ListView中的按钮溢出

Question

我有一个基本的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,
            ))
      ],
    ));
  }

Answer 1

您需要使用Flexible小部件来包装您的几个小部件-

代码：

@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,
                        ),
                      )),
                ),
              ],
            )
          ],
        ));

Answer 2

您可以将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,
                ),
              ))
        ],
      ));
  }