文本省略号溢出的 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: () {},
        ),
      ),

文本省略号溢出的 FlatButton

FlatButton with Text ellipsis overflowed

layout

ellipsis

flutter

flutter-layout