Row 小部件内的 Flutter Wrap 小部件

Question

我想实现这种行为。我连续有 4 个项目，但我希望中间有两个文本，就像 Wrap 小部件中的 yare 一样，如果很长，则 text2 移动到下一行并填充所有空格。text1

这是我的代码，但它溢出而不是将文本换行成两行

  Widget _buildItem(String name, String status) {
    return Container(
      padding: const EdgeInsets.all(Dimens.unitX2),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Container(
            width: Dimens.unitX5,
            height: Dimens.unitX5,
            color: Colors.blue,
          ),
          SizedBox(width: Dimens.unitX1),
          Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            alignment: WrapAlignment.spaceBetween,
            spacing: Dimens.unitX1,
            direction: Axis.horizontal,
            children: [
              Text(name),
              Text(status),
            ],
          ),
          SizedBox(width: Dimens.unitX1),
          Container(
            color: Colors.red,
            width: Dimens.unitX5,
            height: Dimens.unitX5,
          ),
        ],
      ),
    );
  }

Answer 1

将Wrap小部件包装在Flexible：

...
Flexible(
    child: Wrap(
       crossAxisAlignment: WrapCrossAlignment.center,
       alignment: WrapAlignment.spaceBetween,
       spacing: 30,
       direction: Axis.horizontal,
       children: [
       Text('Text1'),
       Text('Text2 is a long text'),
     ],
   ),
 ),
...

Answer 2

用 widget包装你的WrapWidget Expanded：

Widget _buildItem(String name, String status) {
    return Container(
        padding: const EdgeInsets.all(Dimens.unitX2),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
                Container(
                    width: Dimens.unitX5,
                    height: Dimens.unitX5,
                    color: Colors.blue,
                ),
                SizedBox(width: Dimens.unitX1),
                Expanded(
                    child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.spaceBetween,
                        spacing: Dimens.unitX1,
                        direction: Axis.horizontal,
                        children: [
                            Text(name),
                            Text(status),
                        ],
                    ),
                ),
                SizedBox(width: Dimens.unitX1),
                Container(
                    color: Colors.red,
                    width: Dimens.unitX5,
                    height: Dimens.unitX5,
                ),
            ],
        ),
    );
}