如何摆脱列内文本的像素溢出？答案

【问题标题】：How to get rid of pixel overflow by text inside column?如何摆脱列内文本的像素溢出？
【发布时间】：2021-09-24 20:47:55
【问题描述】：

这就是我的问题的样子：

我有以下小部件树结构：


class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedContainer(duration: Duration()),
        Expanded(
          child: Column(
            children: [
              SomeWidget(),
              Text(
                'Here is some big text causing issue',
              ),
            ],
          ),
        ),
        SomeOtherWidget(),
      ],
    );
  }
}

当我展开AnimatedContainer 的属性时，出现此处显示的文本像素溢出。

我该如何解决这个问题？

设置overflow和softWrap的文本参数没有帮助。

设置最小的第二列长度也无济于事。

【问题讨论】：

尝试用expanded包裹text
用扩展包装解决了这个问题

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您可以通过多种方式解决此问题。

您可以使用 FittedBox 包裹 Text 小部件，这将增加或减小文本的大小以避免溢出。
您可以使用 Expanded 换行文本。
Text小部件中有名为'softwrap'的属性，将其设置为true。

【讨论】：