You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

请求协助实现Flutter应用中的日期修改功能

Flutter日期修改与数据同步功能实现

需要实现Flutter应用中日期选择修改,并将修改后的日期同步更新到个人数据模型,最终保存并刷新列表的功能。现有代码存在组件回调未触发、初始值未加载、拼写错误等问题,以下是修复后的完整实现方案:


修复后的日期选择组件 EdidPickDate

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class EdidPickDate extends StatefulWidget {
  EdidPickDate({
    super.key,
    this.onTap,
    required this.initialValue,
    this.onChanged,
    this.labelText,
  });

  final void Function()? onTap;
  final String? initialValue;
  final Function(String)? onChanged;
  final String? labelText;

  @override
  State<EdidPickDate> createState() => _EdidPickDateState();
}

class _EdidPickDateState extends State<EdidPickDate> {
  final TextEditingController _dateController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 初始化显示用户现有日期
    if (widget.initialValue != null) {
      _dateController.text = widget.initialValue!;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: TextFormField(
        controller: _dateController,
        decoration: InputDecoration(
          icon: const Icon(Icons.calendar_today_outlined),
          labelText: widget.labelText,
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(width: 3, color: Colors.greenAccent),
          ),
        ),
        readOnly: true, // 禁止手动输入,避免格式错误
        onTap: () async {
          DateTime? initialDate = DateTime.now();
          // 解析现有日期作为选择器默认值
          if (widget.initialValue != null) {
            try {
              initialDate = DateFormat('dd-MM-yyyy').parse(widget.initialValue!);
            } catch (_) {}
          }

          DateTime? pickedDate = await showDatePicker(
            context: context,
            initialDate: initialDate,
            firstDate: DateTime(1920),
            lastDate: DateTime(2300),
          );

          if (pickedDate != null) {
            final formattedDate = DateFormat('dd-MM-yyyy').format(pickedDate);
            setState(() {
              _dateController.text = formattedDate;
            });
            // 将选中日期传递给父组件
            widget.onChanged?.call(formattedDate);
          }
        },
      ),
    );
  }
}

修复后的个人信息编辑页面 EdidPersonBody

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// 请自行导入你的PersonModel和PersonCubit
// import 'path/to/person_model.dart';
// import 'path/to/person_cubit.dart';

class EdidPersonBody extends StatefulWidget {
  const EdidPersonBody({
    Key? key,
    required this.person,
  }) : super(key: key);

  final PersonModel person;

  @override
  State<EdidPersonBody> createState() => _EdidPersonBodyState();
}

class _EdidPersonBodyState extends State<EdidPersonBody> {
  String? _birthday;

  @override
  void initState() {
    super.initState();
    // 初始化用户现有生日数据
    _birthday = widget.person.birthday;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Row(
                children: [
                  Column(
                    children: [
                      EdidPickDate(
                        initialValue: _birthday,
                        onChanged: (value) {
                          setState(() {
                            _birthday = value;
                          });
                        },
                        labelText: '生日',
                      ),
                      const SizedBox(height: 16),
                      CustomAddButton(
                        text: '保存修改',
                        onTap: () {
                          // 更新用户模型的生日数据
                          widget.person.birthday = _birthday ?? widget.person.birthday;
                          // 保存数据并刷新列表
                          widget.person.save();
                          context.read<PersonCubit>().fetchAllPerson();
                          // 返回上一页
                          Navigator.pop(context);
                          debugPrint("修改后的生日: $_birthday");
                        },
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 示例按钮组件(根据你的实际组件调整)
class CustomAddButton extends StatelessWidget {
  const CustomAddButton({
    super.key,
    required this.text,
    required this.onTap,
  });

  final String text;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onTap,
      child: Text(text),
    );
  }
}

关键修改说明

  • 日期组件优化:

    • 添加初始化逻辑,打开页面时自动显示用户现有生日
    • 将hintText改为initialValue,语义更清晰
    • 设置输入框为只读,避免手动输入导致的格式错误
    • 选中日期后主动触发父组件回调,确保数据同步
    • 支持解析现有日期作为选择器默认选中值
  • 编辑页面修正:

    • 修正多处拼写错误(如barthday→birthday、eddid→edit)
    • 使用context.read<PersonCubit>()替代BlocProvider.of,符合Bloc最佳实践
    • 添加UI间距,优化页面布局
    • 初始化本地变量存储现有数据,确保修改时状态同步

内容的提问来源于stack exchange,提问作者Fady Youssef

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 12:25:14