如何在flutter dart中动态嵌套widget？

Question

我想构建嵌套小部件，以便最初有一个组和一个子组。然后单击添加子组按钮，它将添加子组。另外，我应该能够删除子组中单击的删除按钮。我还有一个添加组按钮，可以添加组。我添加了以下代码，但它将子组添加到组的所有子组中。

任何帮助将不胜感激。

我的代码：

ListView.builder(
    shrinkWrap: true,
    itemCount: _groupCount,
    itemBuilder: (BuildContext context, int index) {
      var removeWidget = Container(
        height: 100,
        width: 50,
      );
      if (index > 0) {
        removeWidget = Container(
          height: 100,
          width: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.all(5.0),
                child: OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.white,
                    backgroundColor: Colors.blue,
                  ),
                  onPressed: () {
                    debugPrint("Remove Group clicked");
                    setState(() {
                      if(_groupCount>1)
                        --_groupCount;
                    });
                  },
                  child: Icon(
                    Icons.delete,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        );
      }
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            children: [
              Container(
                height:40,
                width: 100,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding:
                      EdgeInsets.fromLTRB(20.0, 10.0, 0.0, 10.0),
                      child:
                      Text("Item #" + (index+1).toString() + " Add"),
                    ),
                  ],
                ),
              ),
            ],
          ),

          Container(
            height:  100,
            child: Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 100,
                      width: 200,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: const [
                          Padding(
                            padding: EdgeInsets.all(5.0),
                            child: TextField(
                              decoration: InputDecoration(
                                labelText: 'formfield1',
                                hintText: 'formfield1',
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 100,
                      width: 200,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.all(5.0),
                            child: OutlinedButton(
                              style: OutlinedButton.styleFrom(
                                foregroundColor: Colors.white,
                                backgroundColor: Colors.blue,
                              ),
                              onPressed: () {
                                debugPrint("Add sub group clicked");
                                ///add sub group
                                setState(() {
                                  _subGroupCount++;
                                });
                              },
                              child: Text("Add sub-Group"),
                            ),
                          ),
                        ],
                      ),
                    ),
                    removeWidget
                  ],
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: ListView.builder(
                itemCount: _subGroupCount,//_groupItemCount,
                // physics: ClampingScrollPhysics(),
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return
                    Container(
                      height:  100,
                      child: Column(
                        children: [
                          Row(
                            children: [
                              SizedBox(
                                height: 100,
                                width: 200,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Padding(
                                      padding:
                                      EdgeInsets.fromLTRB(20.0, 8.0, 0.0, 8.0),
                                      child: TextField(
                                        decoration: InputDecoration(
                                          labelText: 'Sub group field1',
                                          hintText: 'Sub group field1',
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(
                                height: 100,
                                width: 200,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.all(5.0),
                                      child: OutlinedButton(
                                        style: OutlinedButton.styleFrom(
                                          foregroundColor: Colors.white,
                                          backgroundColor: Colors.blue,
                                        ),
                                        onPressed: () {
                                          if(_subGroupCount>1) {
                                            debugPrint("Remove sub-group clicked");
                                            ///remove  sub-group
                                            setState(() {
                                              _subGroupCount--;
                                            });
                                          }
                                          else
                                          {
                                            debugPrint("Add Items clicked");
                                            ///add items
                                            setState(() {
                                              _subGroupCount++;
                                            });
                                          }
                                        },
                                        child: Icon( (_subGroupCount>1) ? Icons.delete : Icons.edit ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    );
                }),
          ),
        ],
      );
    }),

附上屏幕截图以提高清晰度：

我尝试使用

ListView.builder

我不知道如何构建逻辑。还有在 Flutter 中使用地图的方法吗？

Answer 1

我得到的解决方案是通过使用 reactive_forms

使用反应形式的角度概念