Question

我连续有文本和开关，数据不错，但布局不好。我尝试了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(),
      ]),
);

ListItems

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);
            }
          });
        },
      ),
    );

Answer 1

您可以改用Table小部件，它减轻了嵌套Columns和Rows的压力，还为小部件提供了固定大小以适合设备屏幕。

在此处详细了解Table小部件：Table Class

我使用您的小部件树作为示例添加了一个演示：

在下面添加代码片段作为变量，以提供表行空间

// 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
                ],
              ),

输出：

在颤振中的行项之间保持相等的间距

1 个答案: