当前位置：首页 > news >正文

Flutter——最详细(Table)网格、表格组件使用教程

news 来源：原创 2024/9/20 15:32:58

背景

用于展示表格组件，可指定线宽、列宽、文字方向等属性

属性	作用
columnWidths	列的宽度
defaultVerticalAlignment	网格内部组件摆放方向
border	网格样式修改
children	表格里面的组件
textDirection	文本排序方向

import 'package:flutter/material.dart';class CustomTable extends StatelessWidget {const CustomTable({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {_ItemBean title = _ItemBean("姓名", "年龄", "性别", "单位名称", "单位地点");_ItemBean m = _ItemBean("周", "20", "男", "得意", "武汉");_ItemBean kg = _ItemBean("王", "18", "男", "中科", "武汉");_ItemBean s = _ItemBean("李", "18", "男", "互动", "武汉");_ItemBean a = _ItemBean("菜", "18", "男", "阿里", "武汉");_ItemBean k = _ItemBean("热", "18", "男", "字节", "武汉");_ItemBean mol = _ItemBean("赵", "18", "女", "腾讯", "武汉");_ItemBean cd = _ItemBean("曹", "18", "男", "盛天", "武汉");List<_ItemBean> data = [title, m, kg, s, a, k, mol, cd];return SingleChildScrollView(scrollDirection: Axis.horizontal,child: Table(columnWidths: const <int, TableColumnWidth>{0: IntrinsicColumnWidth(),//可以根据内部组件大小自适应宽度1: FixedColumnWidth(80.0),2: FixedColumnWidth(80.0),3: FixedColumnWidth(80.0),4: FixedColumnWidth(80.0),},defaultVerticalAlignment: TableCellVerticalAlignment.middle,border: TableBorder.all(color: Colors.red, width: 1.0, style: BorderStyle.solid),children: data.map((item) => TableRow(children: <Widget>[Center(child: Text(item.name,style: const TextStyle(color: Colors.black, fontSize: 18),)),Padding(padding: const EdgeInsets.all(8.0),child: Center(child: Text(item.symbol,style: const TextStyle(color: Colors.red, fontSize: 18),)),),Padding(padding: const EdgeInsets.all(8.0),child: Center(child: Text(item.unitSymbol,style: const TextStyle(color: Colors.green, fontSize: 18),)),),Padding(padding: const EdgeInsets.all(8.0),child: Center(child: Text(item.unitName,style:const TextStyle(color: Colors.yellow, fontSize: 18),)),),Padding(padding: const EdgeInsets.all(8.0),child: Center(child: Text(item.unit,style:const TextStyle(color: Colors.deepPurpleAccent, fontSize: 18),)),),])).toList(),),);}
}class _ItemBean {String name;String symbol;String unit;String unitName;String unitSymbol;_ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);
}