点击添加动态小部件并保存值 flutter答案

【问题标题】：add dynamic widgets on tap and save values flutter点击添加动态小部件并保存值 flutter
【发布时间】：2022-12-18 02:01:31
【问题描述】：

我正在尝试添加一行新的小部件（从下拉菜单中选择性别和年龄），当用户点击添加一个孩子并保存每行的不同数据时，当按索引删除一个孩子时，它不应该影响用户输入的其他值我该如何实现？

这是用户界面 UI

这是代码


class ChildrenSection extends StatefulWidget {
  const ChildrenSection({
    Key? key,
  }) : super(key: key);

  @override
  State<ChildrenSection> createState() => _ChildrenSectionState();
}

class _ChildrenSectionState extends State<ChildrenSection> {
  int _count = 1;
  List<String>? onGenderSelected;

  @override
  Widget build(BuildContext context) {
    onGenderSelected = List<String>.filled(_count, '', growable: true);
    return Row(
      children: [
        Text(
          'Children',
          style: NannyFinderTheme.createAdTextStyle,
        ),
        SizedBox(
          width: 10.w,
        ),
        Expanded(
          child: Column(
            children: [
              SizedBox(
                height: (50 * _count).toDouble(),
                child: ListView.builder(
                    itemCount: onGenderSelected?.length,
                    itemBuilder: (context, index) {
                      return _addChild(index);
                    }),
              ),
              SizedBox(
                height: 10.h,
              ),
              InkWell(
                onTap: () {
                  setState(() {
                    _count++;
                  });
                },
                child: Row(
                  children: [
                    const Icon(CupertinoIcons.person_badge_plus_fill),
                    SizedBox(
                      width: 10.w,
                    ),
                    const Text(
                      'Add a child',
                      style: TextStyle(decoration: TextDecoration.underline),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  Widget _addChild(int index) {
    return Row(
      children: [
        InkWell(
            onTap: () {
              if (index != 0) {
                setState(() {
                  _count--;
                });
              }
            },
            child: Icon(index == 0
                ? CupertinoIcons.person_fill
                : CupertinoIcons.person_badge_minus_fill)),
        SizedBox(
          width: 10.w,
        ),
        _children('Girl', index),
        SizedBox(
          width: 4.w,
        ),
        _children('Boy', index),
        //const Spacer(),
        SizedBox(
          width: 10.w,
        ),
        Expanded(
          child: CustomDropDownButton(
            value: kListOfChildrenAge.first,
            menuList: kListOfChildrenAge,
            onChanged: (String? value) {},
          ),
        )
      ],
    );
  }

  Widget _children(String text, int index) {
    return InkWell(
      onTap: () {
        setState(() {
          onGenderSelected?[index] = text;
        });
      },
      child: Container(
        height: 30,
        padding: EdgeInsets.symmetric(horizontal: 8.w),
        decoration: BoxDecoration(
            color: onGenderSelected?[index] == text
                ? NannyFinderTheme.ligtherPrimaryColor
                : Colors.white,
            borderRadius: BorderRadius.circular(4.r),
            border: Border.all(width: 0.5, color: NannyFinderTheme.grayColor)),
        child: Center(
            child: Text(
          text,
          style: TextStyle(
              color: onGenderSelected?[index] == text
                  ? Colors.white
                  : Colors.black,
              fontWeight: FontWeight.bold),
        )),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart dynamic widget