Flutter - 如何放置动态图块并根据父宽度换行到下一行

Question

我正在尝试实现以下设计，其中列表将是动态的。

想过使用列和行进行一些计算，但老实说现在我一无所知。任何想法、任何建议、任何参考都会很棒。

Answer 1

使用Wrap小部件，如下所示：

              Wrap(
                    spacing: 10,
                    children: <Widget>[
                      MyContainerWidget('Text1'),
                      MyContainerWidget('Text2'),
                      MyContainerWidget('Text-text-3'),
                      MyContainerWidget('Text-text-4'),
                      MyContainerWidget('Text-text-5'),
                      MyContainerWidget('Text6'),
                      MyContainerWidget('Text7'),
                    ],
                  ),

并创建自定义小部件MyContainerWidget，如下所示：

class MyContainerWidget extends StatelessWidget {
  final String text;

  MyContainerWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(
        text,
        style: TextStyle(color: Colors.grey),
      ),
      decoration: BoxDecoration(
          color: Colors.grey[200],
          border: Border.all(color: Colors.grey[700])),
    );
  }
}

您可以在Wrap Widget中使用for循环

          Wrap(
                spacing: 10,
                children: <Widget>[
                   for(var item in _myListStrings)
                      MyContainerWidget(item),
                ],
              ),

_myListStrings是字符串列表