如何消除列内文本的像素溢出？

Question

我的问题是这样的：

我有以下小部件树结构：


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 的设置参数没有帮助。

设置最小的第二列长度也没有帮助。

Answer 1

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

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

如何消除列内文本的像素溢出？

How to get rid of pixel overflow by text inside column?

flutter

flutter-layout

flutter-animation