Flutter笔记58：Table表格组件

Flutter的Table表格组件也非常常用，主要用columnWidths来设置列，TableRow来显示行内容，可以放置任何内容，下面是Table的简单使用：

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('https://5.jimth.com/1.jpg'),
                  ),
                  Text('23'),
                ]),
              ],
            ),
          ),
        ),
      ),
    );
  }
}