Flutter 文本省略号溢出的FlatButton

当扁平按钮的文本溢出时，我尝试使用省略号

它适用于普通的FlatButton，但不适用于FlatButton.icon。我希望你能解释一下

void main() => runApp(Test());

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // bottomNavigationBar: BottomAppBar(child: widgetOk()),
        bottomNavigationBar: BottomAppBar(child: widgetNotOk()),
      ),
    );
  }
}

Widget widgetOk() {
  return Row(
    children: <Widget>[
      Flexible(
        child: FlatButton(
          child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton(
          child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
    ],
  );
}

Widget widgetNotOk() {
  return Row(
    children: <Widget>[
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
    ],
  );
}

可以使用Flexible包装标签以查看省略号是否生效

工作代码如下：

Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Flexible(
              child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis)),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Flexible(
            child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          ),
          onPressed: () {},
        ),
      ),

---

谢谢，它起作用了。但是我不明白为什么每篇文章都需要两个活页。您能解释一下吗？外部灵活性是告诉Row只为其所有子级占用可用空间。因为它的一个子元素是FlatButton.icon，所以它本身就是两个小部件的组合，文本和图标。根据官方文件，图标和文本的开头加12像素，结尾加16像素，中间加8像素。因此，为了使较大的文本能够正确呈现并同时容纳图标，使用了Flexible。希望这有帮助。