Getx Bottomsheet setstate 不更新

Question

我实现了一个 getx 底页，我用它来选择日期和时间。但是，当我 select 日期和时间时，ui 不会立即在底部表上更新，直到我关闭并重新打开底部表，然后 selected 值出现在底部表中。

如何解决此问题，以便在 selected 后立即显示值。

要更新的变量是_date和_time。

在下面找到我的底部代码

Get.bottomSheet(Container(
                                              height: SizeConfig.height250,
                                              width: double.maxFinite,
                                              decoration: BoxDecoration(
                                                color: Colors.white,
                                                borderRadius: BorderRadius.only(
                                                    topLeft: Radius.circular(
                                                        SizeConfig.radius10),
                                                    topRight: Radius.circular(
                                                        SizeConfig.radius10)),
                                              ),
                                              child: Padding(
                                                padding: EdgeInsets.all(
                                                    SizeConfig.width10),
                                                child: Column(
                                                  children: [
                                                    TitleTextWidget(
                                                      titleText: services[index]
                                                          .title
                                                          .toString(),
                                                      titleSize:
                                                          SizeConfig.font25,
                                                    ),
                                                    SizedBox(
                                                        height:
                                                            SizeConfig.width10),
                                                    Column(
                                                      mainAxisSize:
                                                          MainAxisSize.max,
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .center,
                                                      children: <Widget>[
                                                        ElevatedButton(
                                                          onPressed: () {
                                                            DatePicker.showDatePicker(
                                                                context,
                                                                theme: DatePickerTheme(
                                                                    containerHeight:
                                                                        SizeConfig
                                                                            .height200),
                                                                showTitleActions:
                                                                    true,
                                                                minTime:
                                                                    DateTime
                                                                        .now(),
                                                                maxTime:
                                                                    DateTime(
                                                                        2025,
                                                                        12,
                                                                        31),
                                                                onConfirm:
                                                                    (date) {
                                                              // print(
                                                              //     'confirm $date');
                                                              _date =
                                                                  '${date.year} - ${date.month} - ${date.day}';
                                                              setState(() {});
                                                            },
                                                                currentTime:
                                                                    DateTime
                                                                        .now(),
                                                                locale:
                                                                    LocaleType
                                                                        .en);
                                                          },
                                                          child: Container(
                                                            alignment: Alignment
                                                                .center,
                                                            height: SizeConfig
                                                                .height50,
                                                            child: Row(
                                                              mainAxisAlignment:
                                                                  MainAxisAlignment
                                                                      .spaceBetween,
                                                              children: <
                                                                  Widget>[
                                                                Row(
                                                                  children: <
                                                                      Widget>[
                                                                    Container(
                                                                      child:
                                                                          Row(
                                                                        children: <
                                                                            Widget>[
                                                                          Icon(
                                                                            Icons.date_range_outlined,
                                                                            size:
                                                                                SizeConfig.width20,
                                                                            color:
                                                                                AppStyles.appSecondaryColor,
                                                                          ),
                                                                          SizedBox(width: SizeConfig.width10),
                                                                          TitleTextWidget(
                                                                            titleText:
                                                                                "$_date",
                                                                            titleColor:
                                                                                AppStyles.appSecondaryColor,
                                                                          )
                                                                        ],
                                                                      ),
                                                                    ),
                                                                  ],
                                                                ),
                                                                TitleTextWidget(
                                                                  titleText:
                                                                      "Change",
                                                                  titleColor:
                                                                      AppStyles
                                                                          .appSecondaryColor,
                                                                )
                                                              ],
                                                            ),
                                                          ),
                                                        ),
                                                        SizedBox(
                                                            height: SizeConfig
                                                                .height10),
                                                        ElevatedButton(
                                                            onPressed: () {
                                                              DatePicker.showTimePicker(
                                                                  context,
                                                                  theme: DatePickerTheme(
                                                                      containerHeight:
                                                                          SizeConfig
                                                                              .height200),
                                                                  showTitleActions:
                                                                      true,
                                                                  onConfirm:
                                                                      (time) {
                                                                // print(
                                                                //     'confirm $time');
                                                                    _time = '${time.hour} : ${time.minute} : ${time.second}';
                                                                    setState(() {});
                                                              },
                                                              currentTime: DateTime.now(), locale: LocaleType.en
                                                              );
                                                              setState(() {});
                                                            },
                                                            child: Container(
                                                              alignment: Alignment.center,
                                                              height: SizeConfig.height50,
                                                              child: Row(
                                                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                                children: <Widget>[
                                                                  Row(
                                                                    children: <Widget>[
                                                                      Container(
                                                                        child: Row(
                                                                          children: <Widget>[
                                                                            Icon(
                                                                              Icons.access_time,
                                                                              size: SizeConfig.width20,
                                                                              color: AppStyles.appSecondaryColor,
                                                                            ),
                                                                            SizedBox(width: SizeConfig.width10),
                                                                            TitleTextWidget(
                                                                              titleText: " $_time",
                                                                              titleColor: AppStyles.appSecondaryColor,
                                                                            ),
                                                                          ],
                                                                        ),
                                                                      ),
                                                                    ],
                                                                  ),
                                                                  TitleTextWidget(
                                                                    titleText: "Change",
                                                                    titleColor: AppStyles.appSecondaryColor,
                                                                  )
                                                                ],
                                                              ),
                                                            ),
                                                          )
                                                      ],
                                                    ),
                                                    SizedBox(
                                                        height:
                                                            SizeConfig.width10),
                                                    Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .spaceBetween,
                                                      children: [
                                                        Container(
                                                          padding:
                                                              EdgeInsets.all(
                                                                  SizeConfig
                                                                      .width10),
                                                          child: Row(
                                                            mainAxisAlignment:
                                                                MainAxisAlignment
                                                                    .spaceBetween,
                                                            children: [
                                                              ElevatedButton(
                                                                onPressed:
                                                                    () {},
                                                                child: const Icon(
                                                                    Icons
                                                                        .remove_outlined),
                                                              ),
                                                              SizedBox(
                                                                  width: SizeConfig
                                                                      .width10),
                                                              TitleTextWidget(
                                                                titleText: "0",
                                                                titleSize:
                                                                    SizeConfig
                                                                        .font30,
                                                              ),
                                                              SizedBox(
                                                                  width: SizeConfig
                                                                      .width10),
                                                              ElevatedButton(
                                                                onPressed:
                                                                    () {},
                                                                child: const Icon(
                                                                    Icons
                                                                        .add_outlined),
                                                              ),
                                                            ],
                                                          ),
                                                        ),
                                                        ElevatedButton(
                                                          onPressed: () {},
                                                          child: TitleTextWidget(
                                                              titleText:
                                                                  "Book Now"),
                                                        )
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ));

Answer 1

使用 StatefulBuilder 更新您的数据。试试下面的代码，

Get.bottomSheet(
      StatefulBuilder(
        builder: (context, setState) {
          return Container(
            height: SizeConfig.height250,
            width: double.maxFinite,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(SizeConfig.radius10),
                  topRight: Radius.circular(SizeConfig.radius10)),
            ),
            child: Padding(
              padding: EdgeInsets.all(SizeConfig.width10),
              child: Column(
                children: [
                  TitleTextWidget(
                    titleText: services[index].title.toString(),
                    titleSize: SizeConfig.font25,
                  ),
                  SizedBox(height: SizeConfig.width10),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ElevatedButton(
                        onPressed: () {
                          DatePicker.showDatePicker(context,
                              theme: DatePickerTheme(
                                  containerHeight: SizeConfig.height200),
                              showTitleActions: true,
                              minTime: DateTime.now(),
                              maxTime: DateTime(2025, 12, 31),
                              onConfirm: (date) {
                            // print(
                            //     'confirm $date');
                            _date =
                                '${date.year} - ${date.month} - ${date.day}';
                            setState(() {});
                          },
                              currentTime: DateTime.now(),
                              locale: LocaleType.en);
                        },
                        child: Container(
                          alignment: Alignment.center,
                          height: SizeConfig.height50,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Icon(
                                          Icons.date_range_outlined,
                                          size: SizeConfig.width20,
                                          color: AppStyles.appSecondaryColor,
                                        ),
                                        SizedBox(width: SizeConfig.width10),
                                        TitleTextWidget(
                                          titleText: "$_date",
                                          titleColor:
                                              AppStyles.appSecondaryColor,
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              TitleTextWidget(
                                titleText: "Change",
                                titleColor: AppStyles.appSecondaryColor,
                              )
                            ],
                          ),
                        ),
                      ),
                      SizedBox(height: SizeConfig.height10),
                      ElevatedButton(
                        onPressed: () {
                          DatePicker.showTimePicker(context,
                              theme: DatePickerTheme(
                                  containerHeight: SizeConfig.height200),
                              showTitleActions: true, onConfirm: (time) {
                            // print(
                            //     'confirm $time');
                            _time =
                                '${time.hour} : ${time.minute} : ${time.second}';
                            setState(() {});
                          },
                              currentTime: DateTime.now(),
                              locale: LocaleType.en);
                          setState(() {});
                        },
                        child: Container(
                          alignment: Alignment.center,
                          height: SizeConfig.height50,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Icon(
                                          Icons.access_time,
                                          size: SizeConfig.width20,
                                          color: AppStyles.appSecondaryColor,
                                        ),
                                        SizedBox(width: SizeConfig.width10),
                                        TitleTextWidget(
                                          titleText: " $_time",
                                          titleColor:
                                              AppStyles.appSecondaryColor,
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              TitleTextWidget(
                                titleText: "Change",
                                titleColor: AppStyles.appSecondaryColor,
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: SizeConfig.width10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: EdgeInsets.all(SizeConfig.width10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            ElevatedButton(
                              onPressed: () {},
                              child: const Icon(Icons.remove_outlined),
                            ),
                            SizedBox(width: SizeConfig.width10),
                            TitleTextWidget(
                              titleText: "0",
                              titleSize: SizeConfig.font30,
                            ),
                            SizedBox(width: SizeConfig.width10),
                            ElevatedButton(
                              onPressed: () {},
                              child: const Icon(Icons.add_outlined),
                            ),
                          ],
                        ),
                      ),
                      ElevatedButton(
                        onPressed: () {},
                        child: TitleTextWidget(titleText: "Book Now"),
                      )
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );

Getx Bottomsheet setstate 不更新

Getx Bottomsheet setstate doesn't update

flutter

dart

setstate

flutter-getx