在flutter中，在ListView中使用下拉菜单。

Question

4 浏览2023年3月1日

匿名的 2023年3月1日

0 Comments

我在ListView.Builder中有一个DropDownButton，每当我从下拉菜单中进行选择时，它会给出改变的值，但在UI上没有反映出来。

这是我的ListView Item widget

Widget item(AsyncSnapshot snapshot, int index) {


      String _current = "";
      return Column(
        children: [
          Container(
            height: 40,
            decoration: BoxDecoration(color: MyColors.cartback),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: SizeConfig.screenWidth / 1.7,
                  padding: EdgeInsets.all(SizeConfig.blockSizeHorizontal * 2),
                  decoration: BoxDecoration(
                    color: MyColors.colorLightPrimary,
                  ),
                  child: snapshot.data.data[index].lcwInfo.length > 0
                      ? Theme(
                    data: Theme.of(context).copyWith(
                        brightness: Brightness.dark,
                        canvasColor: MyColors.colorPrimary),
                    child: dropDown(snapshot.data.data[index].lcwInfo,
                        _current,index), // Your Dropdown Code Here,
                  )
                      : FlatButton(
                    onPressed: () {},
                    padding: EdgeInsets.all(0),
                    child: Text(
                      "EXTEND WARRANTY",
                      style: TextStyle(
                          color: Colors.grey[300],
                          fontFamily: "semibold"),
                    ),
                  ),
                ),
                FlatButton.icon(
                  onPressed: () {
                    removeCartItemService(
                        snapshot.data.data[index].productId, index);
                  },
                  icon: Image.asset(
                    'assets/icons/cancel.png',
                    width: 28,
                    height: 28,
                  ),
                  label: Text(''),
                )
              ],
            ),
          ),
        ],
      );
    }

这个方法在ListView Item widget中被调用

Widget dropDown(List list, String _current,int index) {


      List> _dropDownWarranty;
      _dropDownWarranty = getDropDownWarranty();
      _current = _dropDownWarranty[0].value;
      if (list.length > 0) {
        return DropdownButtonHideUnderline(
          child: DropdownButton(
            value: _dropDownWarranty[0].value,
            items: _dropDownWarranty,
            onChanged: (String onValue) {
              debugPrint("CURRENT VALUE:----------${onValue}");
              updateWarrantyService(index,onValue,list[0]);
              setState(() {
                _dropDownWarranty[0] = onValue as DropdownMenuItem;
              });
            },
          ),
        );
      }
    }

以上所有方法都在build(BuildContext context)中声明。

0

3 答案

匿名的 · Answer 1 · 2023-03-17T05:12:24+00:00

问题的原因是在构建ListView时，每个item都包含一个DropdownButton，但是没有为selectedItemValue列表设置初始值。解决方法是在initState方法中为selectedItemValue列表添加初始值，代码如下：


void initState() {
    super.initState();
    for (int i = 0; i < 20; i++) {
        selectedItemValue.add("NONE");
    }
}

这样就为selectedItemValue列表设置了初始值"NONE"，使得DropdownButton可以正常显示默认值。

匿名的 · Answer 2 · 2023-06-13T13:48:45+00:00

在Flutter中，我们可以使用ExpansionTile来实现在ListView中创建下拉菜单的效果。ExpansionTile是Flutter提供的一个组件，可以在一个列表中创建一个可展开的瓦片。

ExpansionTile的使用方法如下所示：

ExpansionTile(


    title: Text(artistData.artistName),
    children: [
        ListTile(
            leading: Image(
                image: NetworkImage(artistData.artworkUrl100),
            ),
            title: Text(artistData.collectionName),
            subtitle: Text(artistData.description),
        )
    ],
);

以上代码展示了如何使用ExpansionTile来创建一个可展开的瓦片。在这个例子中，瓦片的标题是一个Text组件，而展开的内容是一个ListTile组件。

ExpansionTile的title属性接受一个Widget作为标题，可以是文本、图像等。children属性接受一个Widget数组作为展开的内容，可以包含多个子组件。

通过使用ExpansionTile，我们可以在ListView中创建一个可展开的下拉菜单，用户可以点击瓦片来展开或折叠内容。

以上就是解决在Flutter中实现下拉菜单的问题的方法。通过使用ExpansionTile组件，我们可以很方便地在ListView中创建可展开的瓦片，实现下拉菜单的效果。

匿名的 · Answer 3 · 2023-05-24T07:17:25+00:00

问题出现的原因是在调用setState时，build方法中的所有内容都会重新执行，包括重置变量的值。在这个例子中，_dropDownWarranty = getDropDownWarranty();的值会在每次调用setState时被设置为getDropDownWarranty();，而不管它在onChanged中设置为什么。

解决方法是将_dropDownWarranty = getDropDownWarranty();移出build方法，但仍然在类中。实际上，我建议将函数移出build方法，但仍然保留在类中，否则每次调用setState时都会重新运行。

这个例子展示了如何设置值，但没有将其放在build方法中：https://stackoverflow.com/a/54948635/4644407

我将与dropDown相关的所有代码都移出了build方法，但没有效果。实际上，我将所有代码都保留在build方法之外，但我在SO上找到了一个建议我将代码放在build Widget内部的解决方案。

你好，我遇到了同样的问题。我想在列表项中使用下拉菜单。