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("icon_ranking_01@3x.png", "icon_ranking_01@3x.png", "么天麟", "8527"),
),
TableRow(
children: _getBrandItemCell("icon_ranking_02@3x.png", "icon_ranking_02@3x.png", "么天麟", "8527"),
),
TableRow(
children: _getBrandItemCell("icon_ranking_03@3x.png", "icon_ranking_03@3x.png", "么天麟", "8527"),
),
],
)
);
}
List<Widget> _getBrandItemCell(String rankingImage, String iconHead, String name, String num) {
List<Widget> 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: <Widget>[
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<TableScreen> {
List<TableRow> _renderList() {
List titleList = ['aaaaaaaa', 'bbbb', 'ccccccccc', 'ddd', 'ee'];
List<TableRow> 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這個屬性就是對應寬度設置規(guī)則的，這個屬性對應的值是一個Map類型，key是列的編號凡恍，從0開始腺兴，value是TableColumnWidth類型的，flutter提供的有6個分別是：IntrinsicColumnWidth悍缠、FixedColumnWidth、FractionColumnWidth、FlexColumnWidth秸仙、MaxColumnWidth和MinColumnWidth。
- IntrinsicColumnWidth代表那一列中以最長一行的寬度為那一列的寬度
- FixedColumnWidth 固定一個寬度桩盲，需要傳一個值
- FractionColumnWidth 指的是table的最大寬度的一個比例
- FlexColumnWidth這個flex就很好理解了寂纪，和Flexible的用法沒有區(qū)別
- MaxColumnWidth會傳進來兩個值，取其中大值
- MinColumnWidth會傳進來兩個值赌结，取其中小值
defaultColumnWidth這個屬性就是在columnWidths沒有設置對應列時捞蛋，即columnWidths[i]是null時，取defaultColumnWidth的值姑曙，當然defaultColumnWidth的值類型也是TableColumnWidth的襟交。
textDirection這個屬性是文字的排列順序，不做贅述
border這個屬性是定義邊框的
TableCellVerticalAlignment這個是定義TableCell的垂直方向的布局的伤靠，默認是top捣域，即頂部對齊。示例代碼我設置成middle, 才有的水平方向內(nèi)容居中宴合。
textBaseline 這個是設置文本baseline對齊的時候需要的焕梅，值是枚舉類型，只有alphabetic(字母類型)和ideographic(表意文字類型)卦洽。
寬度部分出處： http://www.reibang.com/p/9b08b3c84d34
