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

Question

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

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

Answer 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

截图

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

How to handle dropdownbox for listview flutter

listview

dart

dropdown

flutter