Flutter：如何在包含其他类型小部件的ListView.builder末尾添加按钮小部件？

Question

Flutter：如何在包含其他类型小部件的ListView.builder末尾添加按钮小部件？

8

我正在尝试构建一个水平滑块（ListView）的小部件，并希望在ListView的末尾添加一个按钮，以便您可以添加另一张卡片。到目前为止，如果我尝试通过从中拉取以生成ListView.builder的小部件列表来添加它，它不允许我这样做，因为该小部件与我指定的小部件不同。我不知道其他如何在列表末尾添加它。我已经能够将其放在列表旁边，但那会占用屏幕实际空间，这是不应该的，因为期望的效果应该是将其添加到ListView的末尾，而不是其旁边。下面是代码：

Column(
      children: <Widget>[
        Expanded(
          flex: 20,
          child: Column(
            children: <Widget>[
              Padding(
                padding:
                    const EdgeInsets.only(left: 20, top: 10, bottom: 10),
                child: Align(
                  alignment: Alignment.topLeft,
                  child: Text(
                    'Buildings',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 30,
                        fontFamily: 'Montserrat',
                        fontWeight: FontWeight.w300),
                  ),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: SearchBar(),
                ),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 30,
          child: Row(
            children: <Widget>[
              Expanded(
                child: Consumer<BuildingData>(
                  builder: (context, buildingData, child) {
                    return ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) {
                        final building = buildingData.buildingInputs[index];
                        return BuildingCard(
                          buildingName: building.buildingName,
                        );
                      },
                      itemCount: buildingData.buildingCount,
                    );
                  },
                ),
              ),
              AddBuildingButton(
                onPressed: () {
                  print('success');
                },
              ),
            ],
          ),
        ),
        Expanded(
          flex: 50,
          child: Container(
            padding: EdgeInsets.only(top: 30, left: 30, right: 30),
            decoration: BoxDecoration(
              color: Color(0xff2e3032),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              ),
            ),
          ),
        )
      ],
    ),

- MoofinTheExplorer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay Mungara · Accepted Answer

只需按照以下方式更改您的代码即可：

               return ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) {
                        // checking if the index item is the last item of the list or not
                        if (index == buildingData.buildingCount){
                           return Your_New_Card_Widget();
                        }

                        final building = buildingData.buildingInputs[index];
                        
                        return BuildingCard(
                        buildingName: building.buildingName,
                        );
                      },
                      itemCount: buildingData.buildingCount+1,
                    );

"Your_New_Card_Widget"是一个你想要用来添加新产品到列表中的小部件。