flutter - 在颤动的行项目之间保持相等的间距
问题描述
我连续有文本和一个开关,数据很好但布局不好。我尝试了 mainAxisAlignement.spaceAround 或 mainAxisAlignement.spaceBetween 或 mainAxisAlignement.spaceEvenly 但由于 text 的大小,项目列表未对齐锯齿形。我已经实现如下
标题小部件
return Container(
margin: EdgeInsets.only(top: 20),
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5.0,
color: Color.fromRGBO(232, 232, 232, 1),
)),
color: Colors.grey),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Spacer(),
Text("S.N"),
Spacer(),
Text("Food Name"),
Spacer(),
Text("Price"),
Spacer(),
Text("Qty"),
Spacer(),
Text("Action"),
Spacer(),
]),
);
列表项
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border:
Border(bottom: BorderSide(width: 5.0, color: Colors.grey[300])),
color: Colors.white,
),
child: Wrap(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(child: Flexible(child: Text((i + 1).toString()))),
Container(
child: Flexible(
child: Text(
removeAllHtmlTags(menuList[i].name),
softWrap: true,
)),
),
Container(
child: Flexible(
child: Text(
removeAllHtmlTags(menuList[i].discountPrice.toString()),
),
),
),
Container(
child: Flexible(
child: Text(
menuList[i].maxQty.toString(),
),
),
),
Container(
width: 100,
child: menuList[i].status == 0
? Text(
menuList[i].foodStatus,
style: TextStyle(color: Colors.red),
)
: YourListViewItem(
id: menuList[i].id,
index: menuList[i].status,
),
),
],
)
],
));
YourListViewItem 小部件
return ListTile(
trailing: new Switch(
value: isSwitched,
activeColor: Colors.green,
activeTrackColor: Colors.green,
inactiveThumbColor: Colors.white,
inactiveTrackColor: Colors.grey,
onChanged: (value) {
setState(() {
if (isSwitched) {
isSwitched = false;
isSwitched = value;
changeFoodStatus(widget.id);
} else {
isSwitched = true;
isSwitched = value;
changeFoodStatus(widget.id);
}
});
},
),
);
解决方案
您可以改用Table
小部件,它可以为您节省嵌套的压力,Columns
并Rows
为您的小部件提供固定尺寸以适应设备屏幕。
在此处阅读有关Table
小部件的更多信息:表类
我以您的小部件树为例添加了一个演示:
- 添加下面的代码片段作为变量,以便给表格行空间
// add this as a variable to gives the table rows spacing
final TableRow rowSpacer = TableRow(children: [
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
SizedBox(
height: 15,
),
]);
- 将此包含在您的小部件树中以查看
Table
小部件的运行情况
// add this in your widget tree
Table(
// give each column in the table a fraction (to adapt to various screen sizes)
columnWidths: {
0: FractionColumnWidth(.1),
1: FractionColumnWidth(.4),
2: FractionColumnWidth(.2),
3: FractionColumnWidth(.15),
4: FractionColumnWidth(.2)
},
children: [
// first table row
TableRow(
children: [
Text('S.N'),
Text('Food Name'),
Text('Price'),
Text('Qty'),
Text('Action'),
],
),
// space each row
rowSpacer,
// first table row
TableRow(
children: [
Text('1'),
Text('Burger'),
Text('180'),
Text('10'),
SizedBox(
height: 20,
child: Switch(
value: true,
onChanged: (val) {},
),
),
],
),
// space each row
rowSpacer,
// third table row
TableRow(
children: [
Text('2'),
Text('Chilli Momo'),
Text('140'),
Text('5'),
SizedBox(
height: 20,
child: Switch(
value: true,
onChanged: (val) {},
),
),
],
),
// .... // add other rows here
],
),
输出:
推荐阅读
- python - Python,比较数字
- windows - Windows 任务计划程序 - 非重复仅在时间窗口内运行
- javascript - 通过索引号调用字符串中的特定单词?
- javascript - 如果 h6 元素具有特定文本,如何禁用 href
- javascript - 如何在 ScriptManager.RegisterStartupScript 中包含的 javascript 函数中使用 getElementById() 调用 asp 控件
- python - 由于多列中的标签相同,桑基图具有自循环
- python - 在 python 类函数中将“self”附加到新定义的变量时是否有优势?
- python - 在遍历列表并追加时在字典中创建随机值
- flutter - 如何替换国家代码以在颤动中标记表情符号
- java - 使用 StandardCharset UTF-8 处理格式错误的异常