我如何在 flutter 的尾随 属性 中添加超过 2 个按钮和 1 个文本

Question

我想在我的应用程序中创建产品购物车列表。所以我使用了 Card Widget 并且在它的内部使用了 ListTile 小部件。在 listTile 中，我使用尾随 属性 创建一个列以添加 2 个按钮和一个数字，当我创建这些内容时，它显示布局错误 BOTTOM OVERFLOWED BY 55 PIXEL。

这是代码

  @override
  _NewTestState createState() => _NewTestState();
}

class _NewTestState extends State<NewTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("data"),
        ),
        body: new Card(
          child: new ListTile(
            leading: new FlutterLogo(
              size: 50.0,
            ),
            title: new Text("Title"),
            subtitle: new Text("subtitle"),
            trailing: new Column(
              children: <Widget>[
                new IconButton(
                  icon: Icon(Icons.arrow_drop_up),
                  onPressed: () {},
                ),
                new Text("1"),
                new IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ));
  }
}

请帮我解决这个...

Answer 1

那是因为你的 Column 比 ListTile 高，因此你的 IconButton 被 ListTile 剪掉了。我想到了两个选项：

• 如果你的Column够小，试试把你的ListTile的isThreeLine属性设为true，这样会让ListTile高一点, 它可能正是您所需要的。
• 更好、更通用的方法是通过组合 Column 和 Row 来制作您自己的 ListTile。真的不难做到。请记住，ListTile 适用于非常特殊的情况。正如 ListTile class documentation 所述：

If the way ListTile pads and positions its elements isn't quite what you're looking for, it's easy to create custom list items with a combination of other widgets, such as Rows and Columns.

检查文档中的示例应用程序，这是它生成的结果。

这可能是您需要的一个很好的起点。

Answer 2

使用行而不是列。

 trailing: Row(
     mainAxisSize: MainAxisSize.min,
     children: ...
   )