如何在Flutter中通过条件判断复用增改区域功能代码

完全可以通过单一组件实现添加和更新区域的切换逻辑，你已经在代码里引入了isUpdate参数作为区分依据，只需要修正几处细节问题，就能让组件完美适配两种模式。

修正后的完整代码 #

class AddOrUpdateItem extends StatefulWidget {
  const AddOrUpdateItem({super.key, this.isUpdate = false});
  final bool isUpdate;

  @override
  State<AddOrUpdateItem> createState() => _AddOrUpdateItemState();
}

class _AddOrUpdateItemState extends State<AddOrUpdateItem> {
  String selectedCategoryItem = '';

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 366,
      width: 514,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(height: 25),
          SizedBox(
            width: 434,
            height: 42,
            child: Wrap(
              alignment: WrapAlignment.spaceBetween,
              children: [
                Text(
                  // 修正文本判断逻辑：isUpdate为true时显示"Update Item"，否则显示"Add Item"
                  widget.isUpdate ? 'Update Item' : 'Add Item',
                  style: heading2(color: ColorName.blackPrimary),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: InkWell(
                    child: SvgPicture.asset(
                      Assets.icons.closeIcon.path,
                      width: 16,
                      height: 16,
                    ),
                    onTap: () => Navigator.pop(context),
                  ),
                )
              ],
            ),
          ),
          SizedBox(
            width: 435,
            child: Wrap(
              alignment: WrapAlignment.spaceAround,
              children: [
                Wrap(
                  direction: Axis.vertical,
                  children: [
                    Text(
                      'Item Code',
                      style: body1(color: ColorName.blackPrimary),
                    ),
                    SizedBox(height: 10),
                    SizedBox(
                      width: 126,
                      height: 60,
                      child: TextField(
                        style: body1(color: ColorName.blackPrimary),
                        cursorColor: ColorName.blackPrimary,
                        decoration: InputDecoration(
                          hintText: 'Item Code',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            borderSide: BorderSide(color: ColorName.grey),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Wrap(
                  direction: Axis.vertical,
                  children: [
                    Text(
                      'Category Item',
                      style: body1(color: ColorName.blackPrimary),
                    ),
                    const SizedBox(height: 10),
                    Container(
                      width: 288,
                      height: 56,
                      decoration: ShapeDecoration(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(style: BorderStyle.solid, color: ColorName.grey),
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                        ),
                      ),
                      child: DropdownButton<String>(
                        icon: Padding(
                          padding: const EdgeInsets.only(right: 10, top: 8),
                          child: SvgPicture.asset(
                            Assets.icons.dropdownIcon.path,
                            fit: BoxFit.scaleDown,
                          ),
                        ),
                        style: body1(color: ColorName.blackPrimary),
                        items: <String>['Burger', 'Ice cream']
                            .map((String value) {
                              return DropdownMenuItem(
                                value: value,
                                child: Text(value),
                              );
                            }).toList(),
                        hint: Padding(
                          padding: const EdgeInsets.only(top: 8, left: 10),
                          child: Text(
                            style: body1(color: ColorName.grey),
                            // 修正变量名不一致问题，统一使用selectedCategoryItem
                            selectedCategoryItem.isEmpty ? 'Category Item' : selectedCategoryItem,
                          ),
                        ),
                        borderRadius: BorderRadius.circular(10),
                        underline: const SizedBox(),
                        isExpanded: true,
                        onChanged: (value) {
                          if (value != null) {
                            setState(() {
                              // 修正变量名，统一状态管理
                              selectedCategoryItem = value;
                            });
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          SizedBox(
            width: 425,
            child: Wrap(
              alignment: WrapAlignment.spaceBetween,
              children: [
                SizedBox(
                  width: 183,
                  height: 60,
                  child: OutlinedButton(
                    style: ButtonStyle(
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                      side: MaterialStateProperty.all(
                        const BorderSide(color: ColorName.darkBlue),
                      ),
                    ),
                    child: Text(
                      'Cancel',
                      style: subtitle1(color: ColorName.darkBlue),
                    ),
                    onPressed: () => Navigator.pop(context),
                  ),
                ),
                SizedBox(
                  width: 183,
                  height: 60,
                  child: OutlinedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(ColorName.darkBlue),
                      shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                      side: MaterialStateProperty.all(
                        const BorderSide(color: ColorName.darkBlue),
                      ),
                    ),
                    child: Text(
                      // 修正按钮文字判断逻辑
                      widget.isUpdate ? 'Update Item' : 'Add Item',
                      style: subtitle1(color: ColorName.white),
                    ),
                    onPressed: () {
                      // 根据模式触发对应弹窗
                      if (widget.isUpdate) {
                        UpdateSuccess().showCustomDialog(context);
                      } else {
                        AddSuccess().showCustomDialog(context);
                      }
                    },
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 25),
        ],
      ),
    );
  }
}

关键改动说明 #

• 组件重命名：将AddItem改为AddOrUpdateItem，更贴合组件的实际功能
• 修正文本判断逻辑：原代码中标题和按钮的文本判断逻辑颠倒，现在根据isUpdate的值正确显示对应文字
• 统一变量名：修正原代码中selectedCategoryItem、selectedCategory、selectedCategoryArea不一致的问题，确保下拉选择的状态同步正确
• 业务逻辑对齐：确认按钮点击时，根据isUpdate状态调用对应的成功弹窗（更新模式显示UpdateSuccess，添加模式显示AddSuccess）

使用方式 #

• 调用添加模式：AddOrUpdateItem(isUpdate: false)（或直接AddOrUpdateItem()，因为默认值为false）
• 调用更新模式：AddOrUpdateItem(isUpdate: true)

内容的提问来源于stack exchange，提问作者Bilbo Baggins