【问题标题】:Flutter: How to add a button widget at the end of a ListView.builder that contains other type of widgets?Flutter:如何在包含其他类型小部件的 ListView.builder 末尾添加一个按钮小部件?
【发布时间】:2020-04-18 10:08:19
【问题描述】:

我正在尝试构建小部件的水平滑块 (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),
              ),
            ),
          ),
        )
      ],
    ),

【问题讨论】:

    标签: listview flutter


    【解决方案1】:

    只需按以下方式更改您的代码,

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

    【讨论】:

    • 我收到错误“RangeError (index): invalid value: value range is empty: 0
    • 成功了!谢谢你,我正在开发我的第一个应用程序,像你这样的人让这段旅程变得如此有意义!
    猜你喜欢
    • 2021-07-30
    • 2018-11-20
    • 1970-01-01
    • 1970-01-01
    • 2016-04-13
    • 2020-11-07
    • 2021-02-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多