Question

我有一个Row和一个Icon和一个Text。我希望Row的内容居中，即Icon + Text应该居中，Icon在Text的左边。我是通过在mainAxisAlignment: MainAxisAlignment.center上设置Row来实现的。

问题在于，Text的内容有时太长而无法放在一行上，因此需要进行包装。我可以通过将其包装在Expanded中来做到这一点，但这也有使Text占据整个Row的副作用，所以现在Icon和{{ 1}}将变为左对齐，而不是居于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换行？

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

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

1 个答案: