Flutter:如何在包含其他类型窗口小部件的ListView.builder的末尾添加按钮窗口小部件? [英] Flutter: How to add a button widget at the end of a ListView.builder that contains other type of widgets?

问题描述

我正在尝试构建小部件的水平滑块(ListView)，并希望在ListView的末尾添加一个按钮(以便可以添加另一张卡片).到目前为止，如果我尝试通过从中拉出以生成ListView.builder的窗口小部件列表进行添加，则它不允许我这样做，因为该窗口小部件与我指定的列表中的窗口小部件不同.

I'm trying to build a horizontal slider (ListView) of widgets, and want to add a button at the end of the ListView (so that you could add another card). So far if I try to add it via the list of widgets that is being pulled from to generate the ListView.builder, it doesn't allow me because the widget is different than the widgets I specify the list is being made off.

我不知道如何以其他方式将其添加到列表的末尾.我已经能够将其放在列表的旁边，但这会占用屏幕空间，这是不应该的，因为所需的效果应该是将其添加在ListView的末尾，而不是在其旁边.

I don't know how to add it at the end of the list another way. I have been able to put it next to the list, but that takes up screen real estate where it shouldn't, because the desired effect should be that it's added at the end of the ListView, not next to it.

代码如下:

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),
              ),
            ),
          ),
        )
      ],
    ),

推荐答案

只需按照以下步骤更改代码，

Just change your code as follow,

               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"是您想要在列表中添加新产品的小部件.

"Your_New_Card_Widget" is a widget you want for adding a new product in the list.

这篇关于Flutter:如何在包含其他类型窗口小部件的ListView.builder的末尾添加按钮窗口小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！