IMG_1100.jpg
Widget _getBrandList() {
double screenWidth = MediaQuery.of(context).size.width;
return Container(
margin: EdgeInsets.fromLTRB(6, 60, 6, 14),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
columnWidths: {
//列宽
// 0: FlexColumnWidth( (54.0 / 390.0) * screenWidth),
// 1: FixedColumnWidth( (170.0 / 390.0) * screenWidth),
// 2: FixedColumnWidth( (84.0 / 390.0) * screenWidth),
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(4),
2: FlexColumnWidth(2.5),
},
children: [
TableRow(
children: [
Text('排名', style: TextStyle(color: Color(0xFF828CA0), fontSize: 12,)),
Text('顾问名', style: TextStyle(color: Color(0xFF828CA0), fontSize: 12,),),
Text('售卖量', style: TextStyle(color: Color(0xFF828CA0), fontSize: 12,),),
]
),
TableRow(
children: _getBrandItemCell("[email protected]", "[email protected]", "么天麟", "8527"),
),
TableRow(
children: _getBrandItemCell("[email protected]", "[email protected]", "么天麟", "8527"),
),
TableRow(
children: _getBrandItemCell("[email protected]", "[email protected]", "么天麟", "8527"),
),
],
)
);
}
List _getBrandItemCell(String rankingImage, String iconHead, String name, String num) {
List lists = [
Container (
alignment: Alignment.centerLeft,
child: Image.asset("assets/images/home/" + rankingImage,fit: BoxFit.scaleDown,width: 24,height: 24,),
),
Container(
height: 50,
child: Row(
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(14),
image: DecorationImage(
image: ExactAssetImage("assets/images/home/" + iconHead,),
fit: BoxFit.cover,
// NetworkImage(
// "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/0"),
// fit: BoxFit.cover),
),
),
),
SizedBox(width: 10,),
Text(name, style: TextStyle(color: Color(0xFF111E36), fontSize: 14, fontWeight: FontWeight.w500),)
],
),
),
Text(num, style: TextStyle(color: Color(0xFF111E36), fontSize: 16, fontWeight: FontWeight.w500))
];
return lists;
}
示例代码
import 'package:flutter/material.dart';
class TableScreen extends StatefulWidget {
TableScreen({Key key}) : super(key: key);
@override
_TableScreenState createState() => _TableScreenState();
}
class _TableScreenState extends State {
List _renderList() {
List titleList = ['aaaaaaaa', 'bbbb', 'ccccccccc', 'ddd', 'ee'];
List list = [];
for (var i = 0; i < titleList.length; i++) {
list.add(
TableRow(
children: [
Container(
padding: EdgeInsets.all(12),
child: Text(titleList[i]),
),
Container(
padding: EdgeInsets.all(12),
child: Text(i % 2 == 0 ? 'content' : 'contentcontentcontentcontentcontentcontentcontentcontent'),
)
]
)
);
}
return list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Table'),
),
body: Container(
margin: EdgeInsets.only(top: 40),
color: Colors.black12,
child: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
columnWidths: {
0: IntrinsicColumnWidth(),
1: FlexColumnWidth()
},
children: _renderList()
),
),
);
}
}
image.png
columnWidths这个属性就是对应宽度设置规则的，这个属性对应的值是一个Map类型，key是列的编号，从0开始，value是TableColumnWidth类型的，flutter提供的有6个分别是：IntrinsicColumnWidth、FixedColumnWidth、FractionColumnWidth、FlexColumnWidth、MaxColumnWidth和MinColumnWidth。
- IntrinsicColumnWidth代表那一列中以最长一行的宽度为那一列的宽度
- FixedColumnWidth 固定一个宽度，需要传一个值
- FractionColumnWidth 指的是table的最大宽度的一个比例
- FlexColumnWidth这个flex就很好理解了，和Flexible的用法没有区别
- MaxColumnWidth会传进来两个值，取其中大值
- MinColumnWidth会传进来两个值，取其中小值
defaultColumnWidth这个属性就是在columnWidths没有设置对应列时，即columnWidths[i]是null时，取defaultColumnWidth的值，当然defaultColumnWidth的值类型也是TableColumnWidth的。
textDirection这个属性是文字的排列顺序，不做赘述
border这个属性是定义边框的
TableCellVerticalAlignment这个是定义TableCell的垂直方向的布局的，默认是top，即顶部对齐。示例代码我设置成middle, 才有的水平方向内容居中。
textBaseline 这个是设置文本baseline对齐的时候需要的，值是枚举类型，只有alphabetic(字母类型)和ideographic(表意文字类型)。
宽度部分出处： https://www.jianshu.com/p/9b08b3c84d34