flutter 表格布局

2020-08-25  本文已影响0人  喜剧收尾_XWX
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "table表格布局",
      home: Scaffold(
        appBar: AppBar(
          title: Text("table"),
        ),
        body: Center(
          child: Table(
            //设置表格有多少列,并制定列宽
            columnWidths: const <int, TableColumnWidth>{
              //指定索引及固定列宽
              0: FixedColumnWidth(100.0),
              1: FixedColumnWidth(40.0),
              2: FixedColumnWidth(80.0),
              3: FixedColumnWidth(80.0),
            },

            //设置表格边框样式
            border: TableBorder.all(
                color: Colors.black26, width: 2.0, style: BorderStyle.solid),
            children: const <TableRow>[
              TableRow(children: <Widget>[
                Text('姓名'),
                Text('性别'),
                Text('年龄'),
                Text('体重'),
              ]),
              TableRow(children: <Widget>[
                Text('小红'),
                Text('女'),
                Text('20'),
                Text('50'),
              ]),
              TableRow(children: <Widget>[
                Text('小强'),
                Text('男'),
                Text('20'),
                Text('50'),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读