Article directory
foreword
Table widget, in fact, is rarely used, and when necessary, check the widget
1. What is Table?
Form widget, but not as powerful as excel.
| project | Value |
|---|---|
| computer | $1600 |
| cell phone | $12 |
| catheter | $1 |
2. Use steps
| project | Value |
|---|---|
| Table | a form |
| TableRow | one line |
| TableCell | a cell |
1. Table basic use
The code is as follows (example):
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Table(
children: [
TableRow(children: [
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
)
]),
TableRow(children: [
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
)
])
],
),
2. Width
Several forms of width setting
- FlexColumnWidth
//columnWidths 单元格的宽，map 哪列 ：宽度
columnWidths: {
0: FlexColumnWidth(20),
1: FlexColumnWidth(10),
2: FlexColumnWidth(10),
3: FlexColumnWidth(10)
},
As shown in the picture:
- IntrinsicColumnWidth: Take the widest cell as the width of the column
columnWidths: {
0: IntrinsicColumnWidth(),
1: FlexColumnWidth(10),
2: FlexColumnWidth(20),
3: FlexColumnWidth(10)
},
As shown in the picture:
- MaxColumnWidth: Use the widest cell as the width of the column, set the maximum value, if it exceeds this maximum value, it will also take the maximum value
columnWidths: const {
0: MaxColumnWidth(FlexColumnWidth(20), FlexColumnWidth(200)),
1: FlexColumnWidth(10),
2: FlexColumnWidth(10),
3: FlexColumnWidth(10)
},
3. Set the border
The code is as follows (example):
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Table(
border: TableBorder(
//添加上行左右的网格线
top: BorderSide(color: Colors.red),
left: BorderSide(color: Colors.red),
bottom: BorderSide(color: Colors.red),
right: BorderSide(color: Colors.red),
//水平线
horizontalInside: BorderSide(color: Colors.red),
//垂直方向
verticalInside: BorderSide(color: Colors.red)),
//columnWidths 单元格的宽，map 哪列 ：宽度
columnWidths: {
0: FlexColumnWidth(20),
1: FlexColumnWidth(10),
2: FlexColumnWidth(10),
3: FlexColumnWidth(10)
},
children: [
TableRow(children: [
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
)
]),
TableRow(children: [
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
),
TableCell(
child: Text(' i am one '),
)
])
],
),
// This trailing comma makes auto-formatting nicer for build methods.
);
4. TableCell set cell format widget and other settings
- The content of the unit can be set as a widget
TableCell(
child: Card(child: Text(' i am onedfasdfadsfasd ')),
),
- Set the alignment in the vertical direction:
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Text(' i am onedfasdfadsfasd '),
),
- set background color
TableRow(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(Radius.circular(15))),
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.bottom,
child: Text(' i am onedfasdfadsfasd '),
),
Summarize
Welcome to pay attention, leave a message, consult and communicate!
