Question

当选择一个选项时，我有一个要显示的容器列表。

我的屏幕顶部有一个容器，底部有选择选项，当按下按钮时，该项目将添加到我想在顶部显示的容器中的列表。

我可以使用Text来做到这一点，但是我的列表将包含Containers，以便可以选择它们以及其他UI功能。

但是现在我唯一可以显示此信息的方法是在列表视图中，我基本上想要一个列表视图，其工作方式类似于行中的项目。

喜欢这个。

[Container][Container][Container]

然后，当它们到达屏幕末尾时，它们会转到新行

[Container][Container][Container]
[Container]

我知道如何显示列表的唯一方法是在ListView.Buider中

这是我当前的代码。

这是我要放置的地方。

Expanded(
            flex: 3,
            child: Container(
                width: MediaQuery.of(context).size.width*0.8,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: ListView.builder(
                          itemCount: hashList.length,
                          itemBuilder: (context, index){
                            return Container(
                              child: hashList[index],
                            );
                          }),
                    )
                  ],

                ),
                ),
          ),

这是函数中的容器构建。

isSelected ? widget.list.add(
          Container(
            padding: EdgeInsets.all(10),
            height: 45,
            child: Text(widget.tag, style: TextStyle(color: Color(0xffff9900), fontSize: 20, fontFamily: 'Dokyo'),),
              decoration: BoxDecoration(
            border: Border.all(color: Color(0xffff9900),),
            borderRadius: BorderRadius.circular(10))
          )): widget.list.removeAt(widget.id);

因此您可以看到列表是动态的。

Answer 1

在这里看看Wrap小部件 https://api.flutter.dev/flutter/widgets/Wrap-class.html 它会在水平空间结束时自动包装内容。

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: Text('Laurens'),
    ),
  ],
)

在容器中而不是ListView中摇动显示列表

1 个答案: