Flutter中setState()结合showDatePicker无法赋值问题求助

核心原因 #

你遇到的问题大概率是没有用状态管理变量存储选中日期，或者未通过setState触发UI更新，也可能是ModalSheet作为独立组件时，状态没有正确传递回父组件。

方案1：ModalSheet与DatePicker同属一个StatefulWidget #

直接在当前State里维护选中日期的状态，调用showDatePicker后通过setState更新变量：

import 'package:flutter/material.dart';

class DateFilterModal extends StatefulWidget {
  const DateFilterModal({super.key});

  @override
  State<DateFilterModal> createState() => _DateFilterModalState();
}

class _DateFilterModalState extends State<DateFilterModal> {
  DateTime? _selectedDate;
  // 用于显示的文本变量，依赖_selectedDate
  String get dateTeks => _selectedDate != null 
      ? "${_selectedDate!.day}/${_selectedDate!.month}/${_selectedDate!.year}" 
      : "未选择日期";

  void _showDatePicker() async {
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime.now(),
    );

    if (pickedDate != null && pickedDate != _selectedDate) {
      // 调用setState更新状态，触发UI重建
      setState(() {
        _selectedDate = pickedDate;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("列表筛选")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 弹出ModalSheet
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  padding: const EdgeInsets.all(16),
                  height: 300,
                  child: Column(
                    children: [
                      // 显示选中的日期文本
                      Text(dateTeks, style: const TextStyle(fontSize: 18)),
                      const SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.pop(context);
                          _showDatePicker();
                        },
                        child: const Text("选择日期"),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: const Text("打开筛选面板"),
        ),
      ),
    );
  }
}

方案2：ModalSheet为独立组件（状态提升） #

如果ModalSheet是单独封装的组件，通过回调函数将选中的日期传递给父组件更新状态：

import 'package:flutter/material.dart';

// 父组件
class FilterPage extends StatefulWidget {
  const FilterPage({super.key});

  @override
  State<FilterPage> createState() => _FilterPageState();
}

class _FilterPageState extends State<FilterPage> {
  DateTime? _selectedDate;
  String get dateTeks => _selectedDate != null 
      ? "${_selectedDate!.day}/${_selectedDate!.month}/${_selectedDate!.year}" 
      : "未选择日期";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("列表筛选")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("当前筛选日期：$dateTeks"),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    // 传递回调函数给ModalSheet
                    return DateFilterSheet(
                      selectedDate: _selectedDate,
                      onDateSelected: (date) {
                        setState(() {
                          _selectedDate = date;
                        });
                      },
                    );
                  },
                );
              },
              child: const Text("打开筛选面板"),
            ),
          ],
        ),
      ),
    );
  }
}

// 独立的ModalSheet组件
class DateFilterSheet extends StatelessWidget {
  final DateTime? selectedDate;
  final Function(DateTime) onDateSelected;

  const DateFilterSheet({
    super.key,
    required this.selectedDate,
    required this.onDateSelected,
  });

  void _showDatePicker(BuildContext context) async {
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: selectedDate ?? DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime.now(),
    );

    if (pickedDate != null) {
      onDateSelected(pickedDate);
      Navigator.pop(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    String dateTeks = selectedDate != null 
        ? "${selectedDate!.day}/${selectedDate!.month}/${selectedDate!.year}" 
        : "未选择日期";

    return Container(
      padding: const EdgeInsets.all(16),
      height: 300,
      child: Column(
        children: [
          Text(dateTeks, style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => _showDatePicker(context),
            child: const Text("选择日期"),
          ),
        ],
      ),
    );
  }
}

关键注意点 #

• 必须用StatefulWidget的setState更新状态，项目复杂度高时也可使用Provider、Riverpod等状态管理工具
• 如果ModalSheet是独立组件，不要在内部维护状态，通过状态提升将状态交给父组件管理，避免状态不一致
• 调用showDatePicker后要判断返回值是否为null，避免空值赋值

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