如何在 Flutter 中使用 setState() 更新 ModalBottomSheet 的 ParentWidget？答案

【问题标题】：How to update the ParentWidget of ModalBottomSheet using setState() in Flutter?如何在 Flutter 中使用 setState() 更新 ModalBottomSheet 的 ParentWidget？
【发布时间】：2021-02-02 02:26:35
【问题描述】：

在我的 SingleDayCalendarView() 中，我有一个按钮调用 showModalBottomSheet()，AddShiftBottomSheet 作为其子项：

class SingleDayCalendarView extends StatelessWidget {
...
    onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      isScrollControlled: true,
                      enableDrag: true,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(25),
                          topRight: Radius.circular(25),
                        ),
                      ),
                      builder: (BuildContext context) {
                        return AddShiftBottomSheet(
                          dayOfTheShift: id,
                        );
                      });
                },

然后在 AddshiftBottomSheet（另一个文件中的有状态小部件）内部，我调用另一个 showModalBottomSheet 来显示 TimePicker

class AddShiftBottomSheet extends StatefulWidget {

 @override
  Widget build(BuildContext context) {

DateTime _startDateTime;

...

Text("${DateFormat("HH:mm").format(_startDateTime)}",
    
showModalBottomSheet(
                              
                         context: context,
                              builder: (BuildContext context) {
                                return Container(
                                  height: 200,
                                  color: Colors.white,
                                  child: CupertinoDatePicker(
                                    onDateTimeChanged: (dateTime) {
                                      setState(() {
                                        _startDateTime = dateTime;
                                      });

                                      print(_startDateTime);
                                    },

问题是，当我使用 TimePicker 更改时间时，应该显示 _startDateTime 的 Text() 不会更改并继续显示其初始值。 使用 print 语句，我看到变量 _startDateTime 它正在发生应有的变化，并且 setState 触发了它，但没有任何反应。

一个奇怪的行为：如果我的 _startDateTime 变量介于：

class AddShiftBottomSheet extends StatefulWidget {
 @override
  _AddShiftBottomSheetState createState() => _AddShiftBottomSheetState();
}

//here
DateTime = _startDateTime;

class _AddShiftBottomSheetState extends State<AddShiftBottomSheet> {

一切正常。

【问题讨论】：

标签： flutter setstate flutter-showmodalbottomsheet

【解决方案1】：

从 build 方法中移除 DateTime _startDateTime; 并在类范围内定义它：

class AddShiftBottomSheet extends StatefulWidget {

DateTime _startDateTime;

 @override
  Widget build(BuildContext context) {
...

当您调用 setState 时再次调用 build 方法，您已在其中定义了 _startDateTime。

【讨论】：

谢谢，这解决了问题。你能解释一下为什么我应该总是在类中定义变量，而不是在 Stateful Widgets 的 build 方法中定义变量吗？我实际上在 build 方法中移动了变量，因为我必须使用 widget.argument 作为其初始值，并且在类范围内是不允许的。
实际上你不应该在你的构建方法中定义期望保持全局状态的变量，因为当你调用setState时，你的构建方法被调用并且变量值将被覆盖。