重新格式化 ListTile UI Flutter

Posted 2023-04-14

【中文标题】重新格式化 ListTile UI Flutter

【英文标题】：Reformatting ListTile UI Flutter

【发布时间】：2019-03-16 16:47:00

【问题描述】：

我正在尝试创建一个购物车样式列表，用于在整个购物篮中添加和删除产品并添加成本。我想要有按钮来指示购物篮中的物品数量，但我遇到了 UI 问题。我希望产品名称和价格对齐到左侧，计数器对齐到图块的右侧

我尝试过使用列表磁贴。

    ListTile(
          title:Text(record.name),
          subtitle: Text(record.sellingprice.toString()+" RMB"),
         trailing: 
     Row(mainAxisAlignment:MainAxisAlignment.end,children: 
    <Widget>[
      new FloatingActionButton(
        mini: true,
        onPressed: add,
        child: new Icon(Icons.add, color: Colors.black,),
        backgroundColor: Colors.white,),

      new Text('$_n',
          ),

      new FloatingActionButton(
        mini: true,
        onPressed: minus,
        child: new Icon(
            const IconData(0xe15b, fontFamily: 'MaterialIcons'),
            color: Colors.black),

      ),]),
      onTap: () => totalCost + record.sellingprice,
    ),

但这只是给了我图像中显示的内容。知道如何解决吗？ ListTile spacing error

【参考方案1】：

使行使用最小尺寸。

将此参数添加到行中：

mainAxisSize: MainAxisSize.min,

【讨论】：

好了，间距问题解决了，但是现在文字和计数器都挤在一起了，有没有办法让文字左对齐，计数器右对齐？谢谢

好的。正确的。这是另一个问题，您可以通过添加一些填充并使用 Padding() 小部件包装不同的小部件来解决。或者，您可以添加一个SizedBox(width: 10.0), 小部件作为计数器行的第一个子项。这增加了一些间距。

好的很酷，感谢您的帮助，还发现您可以使用 mainAxisAlignment: MainAxisAlignment.spaceBetween 来达到相同的效果。