Flutter如何显示容器中的小部件列表

时间:2019-11-25 13:36:25

标签: flutter dart

因此,在我的应用程序中,我正在构建一个小部件列表,该列表基本上只是一个包含文本的容器。 我这样做的原因有很多,但基本上这是我遇到问题的地方。

我可以在ListView.Builder中查看此列表,但是我不想那样查看它们。我希望能够在容器中查看它们。然后在添加项目时包装好容器。

下面是我正在尝试做的模拟。

enter image description here

现在我的页面看起来像这样。

body: Column(children: <Widget>[
          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],
                            );
                          }),
                    )
                  ],

                ),
                ),
          ),
          Expanded(
            flex: 6,
            child: Container(
              color: Colors.black,
              child: ListView.builder(
                itemCount: snapshot.length,
                itemBuilder: (context, index) {
                  return Tag(
                    callback: (list) => setState(() => hashList = list),
                    tag: snapshot[index].data["title"],
                    list: hashList,
                    id: index,
                  );
                },
              )
    ))]),

“标签小部件”将添加以下内容。

void _handleOnPressed() {
    setState(() {
      isSelected = !isSelected;
      isSelected
          ? _animationController.forward()
          : _animationController.reverse();
      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);
    });
  }
}

可以将列表添加到列表视图中,但这不是所需的效果。

我不知道该怎么做,我完全迷路了。

1 个答案:

答案 0 :(得分:0)

尝试将rinkleWrap添加到ListView Builder中

child: ListView.builder(shrinkWrap:true, <-- this
       ....           # then continue your logic