如何处理列表视图颤动的下拉框答案

【问题标题】：How to handle dropdownbox for listview flutter如何处理列表视图颤动的下拉框
【发布时间】：2020-09-07 09:05:00
【问题描述】：

我有一个listView，每个项目都附有dropdownbox。他们正在填充项目。我现在有两个问题。首先，当我从每个项目中进行选择时，所选值不会出现在复选框上。另外，我需要独立处理它们，以便可以单独选择它们。现在发生的情况是，在启动应用程序时，在我选择之前没有默认值。此外，当我选择它时，它会在列表中设置所有其他人。这是我的代码伙计们。

                                      ListView.builder(
                          physics: NeverScrollableScrollPhysics(),
                          itemCount: mainBloc.orders.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: HexColor("#240C44"),
                                      width: 0.5),
                                  color: HexColor("#180332"),
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(4))),
                              margin: EdgeInsets.only(
                                  top: 10, bottom: 10, left: 0, right: 0),
                              child: ListTile(
                                title: Row(
                                  children: <Widget>[
                                    new Image.asset(
                                      "assets/images/order_list_image.png",
                                      width: 40,
                                      height: 40,
                                    ),
                                    Spacer(),
                                    Container(
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(15.0),
                                        color: mainBloc.orders[index].status=="enroute"?
                                        HexColor("#FF9F1C"):
                                        mainBloc.orders[index].status=="delivered"?
                                        HexColor("#71F79F"):
                                        Colors.white.withOpacity(0.6),
                                        border: Border.all(
                                            color: HexColor("#FF9F1C"),
                                            style: BorderStyle.solid,
                                            width: 0.80),
                                      ),
                                      child: new DropdownButton<String>(
                                        items: <String>['Delivered', 'Enroute', 'Processed'
                                        ].map((String value) {
                                          return new DropdownMenuItem<String>(
                                            value: value,
                                            child: new Text(
                                              value,
                                              style: TextStyle(
                                                color: primaryColor,
                                                fontSize: 14,
                                                fontFamily: 'CircularStd',
                                                fontWeight: FontWeight.w500,
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                        onChanged: (_) {

                                        },
                                      ),
                                    ),
                                    SizedBox(
                                      width: 20,
                                    ),
                                    IconButton(
                                      icon: Image.asset(
                                        "assets/images/edit.png",
                                        width: 15,
                                        height: 15,
                                        color: Colors.white,
                                      ), onPressed: () {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(builder: (context) =>
                                           EditOrderPage(index:index)),
                                      );
                                    },
                                    ),
                                  ],
                                ),
                              ),
                            );
                          }),

【问题讨论】：

标签： flutter listview dart dropdown

【解决方案1】：

要管理每个下拉按钮的状态，您需要将列表项包装在 StatefulWidget 中。

这是我对您的示例的实现：

代码示例

class ListItem extends StatefulWidget {
  final String label;
  final String defaultStatus;

  ListItem({this.label, this.defaultStatus = 'Enroute'});

  @override
  createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  String _status;

  @override
  void initState() {
    super.initState();
    _status = widget.defaultStatus;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        color: _status == null || _status.toLowerCase() == 'processed'
            ? Colors.white.withOpacity(0.6)
            : _status.toLowerCase() == "enroute"
                ? Color(0xFFFF9F1C)
                : Color(0xFF71F79F),
        border: Border.all(
            color: Color(0xFFFF9F1C), style: BorderStyle.solid, width: 0.80),
      ),
      child: Row(children: <Widget>[
        if (widget.label != null && widget.label.isNotEmpty)
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Text(widget.label),
        ),
        DropdownButton<String>(
          value: _status,
          items:
              <String>['Delivered', 'Enroute', 'Processed'].map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(
                value,
                style: TextStyle(
                  color: Theme.of(context).primaryColor,
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          }).toList(),
          onChanged: (val) => setState(() => _status = val),
        ),
      ]),
    );
  }
}

试试DartPad

截图

【讨论】：

感谢您。不过，我有一个轻微的障碍。在我为我选择一个项目之前，该复选框不会显示价值
我知道你的代码是正确的，但我的错误可能是什么原因
你能用你所做的实现编辑你的代码，这样我就可以测试了。
请查看我更新的代码。感谢期待
我认为它没有显示任何值，因为您没有设置value 的DropdownButton 属性，所以在您更改值之前，它一开始不会有任何值。在我分享的实现中，我使用defaultStatus 作为要显示的第一个值。