首页 > 解决方案 > 如何从 ListView.builder 返回展开的小部件?

问题描述

我试图返回水平方向的小部件列表,我想动态扩展小部件宽度。我怎么能做到这一点。(注意:ListView.builder 放在列内)

ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: widget.playType.length,
    itemBuilder: (BuildContext context, int index) {
      return Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Flexible(
            child: InkWell(
              onTap: () {},
              child: Container(
                padding: EdgeInsets.only(left: 10, right: 10),
                color: colorSubMenuBg,
                height: 45,
                child: Align(
                  alignment: Alignment.center,
                  child: Text(
                    widget.playType[index],
                    style: CustomTextStyle.listTile4(context),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
    });

预期的输出应该像这个突出显示的部分:

在此处输入图像描述

标签: flutter

解决方案


在您的 ListViewBuilder() 中包装容器(高度:70)

像这样

 Container(
            height: 70,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: widget.playType.length,
                itemBuilder: (BuildContext context, int index) {
                  return Flex(
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Flexible(
                        child: InkWell(
                          onTap: () {},
                          child: Container(
                            padding: EdgeInsets.only(left: 10, right: 10),
                            color: colorSubMenuBg,
                            height: 45,
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                widget.playType[index],
                                style: CustomTextStyle.listTile4(context),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }),
          );```




推荐阅读