带有文字省略号的FlatButton溢出

Question

当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: () {},
        ),
      ),
    ],
  );
}

Answer 1

您可以用label包裹Flexible以查看ellipsis生效。

下面的工作代码：

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: () {},
        ),
      ),