ListView 中的按钮溢出答案

【问题标题】：Button overflow in ListViewListView 中的按钮溢出
【发布时间】：2019-01-15 11:09:56
【问题描述】：

我有一个基本的 Listview，其中一个 FlatButton 作为其子项。当按钮文本非常大时，它会溢出。 See image.

如何使用省略号（或其他内容）处理溢出？

这是构建函数：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: <Widget>[
        FlatButton.icon(
            color: Colors.grey[200],
            onPressed: () {},
            icon: Icon(Icons.tune, color: Colors.grey),
            label: Text(
              'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ))
      ],
    ));
  }

【问题讨论】：

标签： dart flutter

【解决方案1】：

您可以将 Text 小部件包装在 Expanded 小部件中。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          FlatButton.icon(
              color: Colors.grey[200],
              onPressed: () {},
              icon: Icon(Icons.tune, color: Colors.grey),
              label: Expanded(
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ))
        ],
      ));
  }

【讨论】：

【解决方案2】：

你需要用Flexible Widget 包裹你的几个小部件 -

代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          children: <Widget>[
            Row(
              children: <Widget>[
                Flexible(
                  child: FlatButton.icon(
                      color: Colors.grey[200],
                      onPressed: () {},
                      icon: Icon(Icons.tune, color: Colors.grey),
                      label: Flexible(
                        child: Text(
                          'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      )),
                ),
              ],
            )
          ],
        ));

【讨论】：