修复需要在 Flutter 中扩展的 Widget 的最小宽度

Question

我需要为我的列小部件设置最小宽度。在它们每个内部，我都有文本小部件，它们可以很短也可以很长。我需要为它们固定一个最小宽度，以便即使文本很短也能获得可接受的 Column 大小。其他专栏显然需要自己适应。

Row(children: [
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 80), // do not work
        child: Text("short text"),
      ),
    ],
  ),
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 110), // do not work
        child: RichText(
          text: TextSpan(
            text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
        ),
      ],
    ),
  ],
)

Answer 1

使用 FittedBox();

假设示例：

 Row(
      children: [
        Column(
          children: [
            Container(
              constraints: BoxConstraints(minWidth: 80), // do not work
              child: Text("short text"),
            ),
          ],
        ),
        Column(
          children: [
            Container(
              constraints: BoxConstraints(minWidth: 110), // do not work
              child: 
              FittedBox(
                              child: RichText(
                    text: TextSpan(
                        text:
                            "very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
              ),
            ),
          ],
        ),
      ],
    );

Answer 2

可能有十几种方法可以满足您的需求。并且可能 none 其中直接或易于理解。（约束和大小的主题相当复杂。请参阅 this constraints page for more examples & explanations。）

这是一种可能的解决方案。

这将设置蓝色列的最小宽度（基于 stepWidth），但如果里面的文本 (child) 需要，则会 expand/grow。

黄色列将调整大小以适应蓝色列。

class ExpandedRowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Page'),
      ),
      body: SafeArea(
        child: Center(
            child: Row(
              children: [
                IntrinsicWidth(
                  stepWidth: 100,
// BLUE Column
                  child: Container(
                    color: Colors.lightBlueAccent,
                      child: Column(
                        children: [
                          //Text('Short'),
                          Text('shrt')
                        ],
                      )
                  ),
                ),
// YELLOW Column
                Flexible(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.yellow,
                      child: Column(
                        children: [
                          Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
                        ],
                      )
                  ),
                )
              ],
            )
        ),
      ),
    );
  }
}

您可以在没有 Flexible 黄色列的情况下执行上述操作，但是很长的文本 child 会在没有 Flexible 或 Expanded wrapping 小部件的情况下导致溢出警告。

行小部件本身具有无限宽度限制。因此，如果 child 想要大于屏幕宽度，它可以并且会导致溢出。（尝试删除上面的 Flexible 并重建以查看。）

Flexible and Expanded，仅在 Row & Column（或 Flex，它们的超类）内部使用，检查屏幕宽度和 Row 内的其他小部件，并为其 children 提供定义的约束大小而不是无限大小. Children（在 Flexible/Expanded 内）现在可以查找 parent 的约束并相应地调整自己的大小。

例如，当文本小部件对于 Flexible/Expanded 给定的约束来说太宽时，将换行其文本。

修复需要在 Flutter 中扩展的 Widget 的最小宽度

Fix minimum width to a Widget which needs to expand in Flutter

size

text

flutter