居中行内容，如果太长则换行

Question

我有一个 Row，一个 Icon 和一个 Text。我希望 Row 的内容居中，即 Icon + Text 应该居中，Icon 在 Text 的左边。我通过在 Row.

上设置 mainAxisAlignment: MainAxisAlignment.center 来做到这一点

问题是有时候 Text 的内容太长，一行都放不下，需要换行。我可以通过将它包装在 Expanded 中来做到这一点，但这也有使 Text 占据整个 Row 的副作用，所以现在 Icon 和 Text 将变为左调整而不是在 Row 中居中，即使文本内容很短。

Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        Icon(Icons.info_outline, color: Colors.grey),
        Expanded(
          child: Text(
              'Short text' // or 'Some very long text that won\'t fit one one line here'
          ),
        ),
    ],
)

我怎样才能达到我想要的效果 - 即在 Row 的内容居中的同时，如果文本太长无法放在一行中，仍然允许 Text 换行？

Answer 1

如果您的 Row 被 Center 包围。试试这个。

Center(
    child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Icon(Icons.info_outline, color: Colors.grey),
            Flexible(
                child: Text('Hello World'),
            ),
        ],
    ),
)

将Expanded更改为Flexible

居中行内容，如果太长则换行

Center row content, or wrap if it's too long

word-wrap

centering

flutter

flutter-layout