我想构建嵌套小部件,以便最初有一个组和一个子组。然后单击添加子组按钮,它将添加子组。另外,我应该能够删除子组中单击的删除按钮。我还有一个添加组按钮,可以添加组。我添加了以下代码,但它将子组添加到组的所有子组中。
任何帮助将不胜感激。
我的代码:
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 中使用地图的方法吗?
我得到的解决方案是通过使用 reactive_forms
使用反应形式的角度概念