Question

我试图返回水平方向的小部件列表，我想动态扩展小部件的宽度。我怎么能做到这一点。（注意：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),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
    });

预期的输出应类似于以下突出显示的部分：

enter image description here

Answer 1

在您的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),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }),
          );```

Answer 2

实际的工作代码，我从ListView.builder中删除了flex，并为ListItems和ListView添加了宽度。

var buttonListWidth = MediaQuery.of(context).size.width;
Container(

                  height: 45,
                  width: buttonListWidth,
                  child: ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: widget.playType.length,
                      itemBuilder: (BuildContext context, int index) {
                        return InkWell(
                          onTap: () {
                            setState(() {});
                          },
                          child: Container(
                            color: colorSubMenuBg,
                            height: 45,
                            width: buttonListWidth / widget.playType.length,
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                widget.playType[index],
                                style: CustomTextStyle.listTile4(context),
                              ),
                            ),
                          ),
                        );
                      }))

Answer 3

尝试在ListView.builder上添加行，然后向该行添加mainAxisSize: MainAxisSize.min,属性。

如何从ListView.builder返回扩展的窗口小部件？

3 个答案: