flutter - Flutter 中带有溢出文本的 FlatButton.icon

Question

我想做一个 FlatButton溢出 Text .为了显示小部件框，我放置了 Container围绕一些小部件。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.lime,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              color: Colors.yellow,
              child: FlatButton.icon(
                label: Container(
                  color: Colors.blue,
                  child: Text('Short Text'),
                ),
                icon: Icon(Icons.done),
                onPressed: () {},
              ),
            ),
            Container(
              color: Colors.orange,
              child: FlatButton.icon(
                label: Container(
                  color: Colors.red,
                  child: Text('Long Long Long Long Long Long Long Long Text'),
                ),
                icon: Icon(Icons.done),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }

解决溢出错误并在溢出末尾添加省略号 Text s，我已经阅读了 FlatButton.icon source code , 包装了 Text小部件变成 Row :

child: Row(
  mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      icon,
      const SizedBox(width: 8.0),
      label,
    ],
),

因此，我将“长文本”小部件包装成 Flexible带有 flexFit 的小部件设置为 loose ，并设置 overflow Text 的属性(property)小部件到 ellipsis :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.lime,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              color: Colors.yellow,
              child: FlatButton.icon(
                label: Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    color: Colors.blue,
                    child: Text(
                      'Short Text',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
                icon: Icon(Icons.done),
                onPressed: () {},
              ),
            ),
            Container(
              color: Colors.orange,
              child: FlatButton.icon(
                label: Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    color: Colors.red,
                    child: Text(
                      'Long Long Long Long Looong Loooooooooooong',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
                icon: Icon(Icons.done),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }

但是在“长文本”小部件中，由于一些文本已经变成省略号，我想减小 Text的宽度。更多的。具体来说，我不想要“...”后面的红色空间。下面是理想的布局:


有什么方法可以实现这一目标吗？

编辑:澄清一下， FlatButton 的文本取决于用户内容，因此布局需要适合所有文本和所有设备尺寸。

Answer 1

像这样定义一个 maxWidth 属性:

Container(
  color: Colors.red,
  constraints: BoxConstraints(
    maxWidth: 300 // set a correct maxWidth
  )
  child: Text(
    'Long Long Long Long Looong Loooooooooooong',
    overflow: TextOverflow.ellipsis,
  ),
)

您可以使用 :

MediaQuery.of(context).size.width

获取手机/平板电脑屏幕的宽度。