class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Table组件', home: Scaffold( appBar: AppBar( title: Text('Table组件'), ), body: Center( child: Container( //表格组件 child: Table( //列设置 columnWidths: { //列款 0: FixedColumnWidth(100.0), 1: FixedColumnWidth(300.0), 2: FixedColumnWidth(50.0), }, //表格边框样式 border: TableBorder.all( color: Colors.green, width: 2.0, style: BorderStyle.solid), //行 children: [ //行设置 TableRow( decoration: BoxDecoration(color: Colors.grey,), children: [ SizedBox( height: 30, child: Text('姓名',style: TextStyle(fontWeight: FontWeight.bold),), ), SizedBox( height: 30, child: Text('性别',style: TextStyle(fontWeight: FontWeight.bold),), ), SizedBox( height: 30, child: Text('年龄',style: TextStyle(fontWeight: FontWeight.bold),), ), ]), TableRow(children: [ Text('张三'), Text('男'), Text('20'), ]), TableRow(children: [ Text('哆啦A梦'), SizedBox( width: 30.0, height: 30.0, child: Image.network('http://www.5imoban.net/1.jpg'), ), Text('23'), ]), ], ), ), ), ), ); } }
Flutter笔记58:Table表格组件
Flutter的Table表格组件也非常常用,主要用columnWidths来设置列,TableRow来显示行内容,可以放置任何内容,下面是Table的简单使用: