ListView.builder 中的 SwitchListTile 和 Container 或 RaisedButton 无法正常工作

Question

我有一个 Dialog 类，我想在其中显示可以分配给员工的不同名称。

一开始，我尝试只使用 RaisedButton 来选择所需的名称。在应用程序中，按钮应更改颜色。这部分位于 StatefulWidget 中。

我也尝试了一个修改版本，我只为 Dialog 部分创建了一个新的 StatefulWidget 但这部分没有任何效果，因此我想实现一个SwitchListTile 做同样的事情。

SwitchListTile 被激活和停用，尽管只有真正的值被注册。这意味着当我停用（向左滑动）时，代码不会进入以下 setState：

setState(() { hEnabled[hDesignations[index].designation] = value; });

此外，当 hEnabled 地图在 setState 方法中发生更改时，以下代码不会重新运行以更改容器的颜色：

color: hEnabled[hDesignations[index].designation] ? Colors.green : Colors.grey,

对话框部分：

  Widget buildChooseDesignations(
      BuildContext context, List<Designation> hDesignations) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadiusDirectional.circular(8.0),
      ),
      child: _buildDialogChild(context, hDesignations),
    );
  }

  _buildDialogChild(BuildContext context, List<Designation> hDesignations) {
    //todo: when editing an employee I need the chosen designations (have to pass a list)
    Map<String, bool> hEnabled = new Map<String, bool>();
    for (var i = 0; i < hDesignations.length; i++) {
      hEnabled[hDesignations[i].designation] = false;
    }
    return Container(
      height: 200.0,
      //todo: width not working properly
      width: 50,
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
                itemCount: hDesignations.length,
                itemBuilder: (context, index) {
                  return Row(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          width: 10,
                          color: hEnabled[hDesignations[index].designation] 
                              ? Colors.green
                              : Colors.grey,
                          padding: EdgeInsets.only(left: 80),
                          child: Text(hDesignations[index].designation,
                          style: TextStyle(fontWeight: FontWeight.bold),),
                        ),
                      ),
                      Expanded(
                        child: SwitchListTile(
                            value: hEnabled[hDesignations[index].designation],
                            onChanged: (bool value) {
                              setState(() {
                                hEnabled[hDesignations[index].designation] =
                                    value;
                              });
                            }),
                      )
                    ],
                  );
                }),
          ),
          SizedBox(
            height: 15.0,
          ),
          RaisedButton(
            color: Colors.blueGrey,
            child: Text(
              'set',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              //todo: save the 'newly' selected designations in a list on set click
            },
          )
        ],
      ),
    );
  }

当我点击 Add + FlatButton 时会调用对话框，如下所示：

ButtonTheme(
                      height: 30.0,
                      // child: Container(),
                      child: FlatButton(
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        color: Colors.blueGrey.shade200,
                        onPressed: () {
                          //todo add Dialog
                          // List<Designation> hList = state.designations;
                          showDialog(
                              context: context,
                              builder: (context) => buildChooseDesignations(
                                  context, state.designations));
                          // DesignationDialog(
                          //      designations:state.designations));
                        },
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0)),
                        child: Text(
                          'Add +',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                    ),

Answer 1

发现问题:)

首先，我将所有内容都重新写入了一个新的 StatefulWidget。这是我需要的，因为我希望在单击 SwitchListTile 以重新着色我的容器后重新构建我的小部件。

然后我不得不将我的 hEnabled（重命名为 hChecked）地图移到州外。原因是这个小部件会重新构建所有的东西，包括这个地图的初始化，使用户的输入无用。

这同样适用于 RaisedButton 小部件。

这是我的代码：

class DesignationDialog extends StatefulWidget {
  final List<Designation> designations;

  final Map<String, bool> hChecked;

  DesignationDialog({Key key, this.designations, this.hChecked}) : super(key: key);

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

class _DesignationDialogState extends State<DesignationDialog> {
  _buildDialogChild(BuildContext context, List<Designation> hDesignations) {
    //todo: when editing an employee I need the chosen designations (have to pass a list)
    // for (var i = 0; i < hDesignations.length; i++) {
    //   hChecked[hDesignations[i].designation] = false;
    // }
    return Container(
      height: 200.0,
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
                itemCount: hDesignations.length,
                itemBuilder: (context, index) {
                  // return ButtonTheme(
                  //   //todo: fix the width of the buttons is not working
                  //   minWidth: 20,
                  //   child: RaisedButton(
                  //     color: widget.hChecked[hDesignations[index].designation]
                  //         ? Colors.green
                  //         : Colors.grey,
                  //     child: Text(hDesignations[index].designation),
                  //     onPressed: () {
                  //       //todo mark designation and add to an array
                  //       setState(() {
                  //         widget.hChecked[hDesignations[index].designation] =
                  //             !widget
                  //                 .hChecked[hDesignations[index].designation];
                  //       });
                  //     },
                  //   ),
                  // );

                  // -- With Switch
                  return Row(
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: Text(hDesignations[index].designation),
                          width: 10,
                          color: widget.hChecked[hDesignations[index].designation]
                              ? Colors.green
                              : Colors.grey,
                        )),
                         Expanded(
                        child: SwitchListTile(
                            value: widget.hChecked[hDesignations[index].designation],
                            onChanged: (bool value) {
                              setState(() {
                                widget.hChecked[hDesignations[index].designation] =
                                    value;
                              });
                            }),
                      )
                    ],
                  );
                  // -- end
                }),
          ),
          SizedBox(
            height: 15.0,
          ),
          RaisedButton(
            color: Colors.blueGrey,
            child: Text(
              'set',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              //todo: save the 'newly' selected designations in a list on set click
            },
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadiusDirectional.circular(8.0),
      ),
      child: _buildDialogChild(context, widget.designations),
    );
  }