关于flutter:Flutter-ModalBottomSheet-指导

50次阅读

共计 6887 个字符，预计需要花费 18 分钟才能阅读完成。

https://evandrmb.medium.com/f…

https://github.com/evandrmb/b…

https://material.io/component…

依据材质设计指南，底部表是一个小工具，用于显示锚定在屏幕底部的附加内容。尽管理解应用这个的设计规定很好，但这不是本文的指标。要理解更多对于底板设计准则的详细信息，请参阅“Sheets: bottom — Material Design”。

当初你晓得了 BottomSheet，你可能会问本人: 什么是 ModalBottomSheet？咱们如何应用他们在 Flutter？

好的，第一个问题，有两种底层表: 模态的和长久的。当用户与屏幕交互时，长久化放弃可见。谷歌地图利用就是一个例子。

另一方面，模式化的操作会阻止用户在应用程序中做其余动作。您能够应用它们来确认某些操作，或者申请额定的数据，比方询问用户在电子商务应用程序中订购时须要多少替换，等等。

在本文中，咱们将通过创立一个简略的体重跟踪应用程序来展现如何应用它，在这个应用程序中咱们能够提交咱们的体重并查看咱们之前的体重。咱们不会输出应用程序的详细信息，而是间接进入 ModalBottomSheet 实现。

要显示它，您须要从具备 Scaffold 的上下文调用 showModalBottomSheet，否则，您将失去一个谬误。也就是说，让咱们开始构建咱们的表格。

首先要晓得的是 ModalBottomSheets 的高度默认为屏幕的一半，为了扭转它，必须传递 true 给 isScrollControlled 参数，并返回一个与咱们冀望的大小相匹配的小部件，所以让咱们这样做。

void addWeight() {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) {var date = DateTime.now();

            return Container(
          height: 302,
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [],),
        );
      },
    );
  }

当初，咱们须要增加一些货色，以便咱们的用户能够输出他们的权重让咱们增加一个 TextInput 并给它一个 TextEditingController (这种形式即便咱们的工作表意外敞开时，用户再次关上它，它的值依然存在)。

void addWeight() {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) {var date = DateTime.now();

            return Container(
          height: 302,
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [padding: EdgeInsets.only(bottom: 24.0),
                child: Text(
                  'Register Weight',
                  style: Styles.titleStyle,
                ),
              ),
              TextField(
                controller: weightInputController,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(labelText: 'Weight (KG)',
                  border: OutlineInputBorder(borderRadius: Styles.borderRadius,),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

看起来不错，但当初咱们有麻烦了。当用户点击咱们的 TextField 键盘在它下面，为什么？当键盘关上时，咱们的工作表不会调整地位，咱们能够把工作表做得更大，但这不能解决咱们的问题，因为咱们依然须要增加一个字段，用户能够在其中输出他们记录分量的日期。那么解决方案是什么呢？这很简略，如果关上键盘，咱们让咱们的工作表在它下面，咱们能够实现这一点，给咱们的容器一个边距的边缘。在 viewinset.bottom 中，咱们将失去以下后果:

它开始看起来很漂亮，然而你不认为如果咱们在纸上加一些半径会更平滑吗？让咱们通过增加如下所示的 shapeproperty 来实现。

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(8),
            topRight: Radius.circular(8),
          )),

酷，当初让咱们做咱们的小工具来抉择一个日期。通常，您会创立一个小部件来解决这个逻辑，并应用 ValueChanged 函数公开选定的值，然而为了阐明您未来可能面临的问题，让咱们在工作表自身外部创立所有逻辑。

void addWeight() {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
      )),
      builder: (context) {
        return Container(
          height: 360,
          width: MediaQuery.of(context).size.width,
          margin:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(padding: EdgeInsets.only(bottom: 24.0),
                child: Text(
                  'Register Weight',
                  style: Styles.titleStyle,
                ),
              ),
              TextField(
                controller: weightInputController,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(labelText: 'Weight (KG)',
                  border: OutlineInputBorder(borderRadius: Styles.borderRadius,),
                ),
              ),
              Padding(padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        'Select a date',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    Container(padding: const EdgeInsets.symmetric(horizontal: 4),
                      margin: const EdgeInsets.symmetric(vertical: 8.0),
                      height: 36,
                      decoration: BoxDecoration(borderRadius: Styles.borderRadius,),
                      child: OutlinedButton(onPressed: () async {final now = DateTime.now();

                          final result = await showDatePicker(
                              context: context,
                              initialDate: now,
                              firstDate: now.subtract(
                                const Duration(days: 90,),
                              ),
                              lastDate: now);

                          if (result != null) {setState(() {selectedDate = result;});
                          }
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Padding(padding: const EdgeInsets.only(right: 16.0),
                              child:
                                  Text('${formatDateToString(selectedDate)}'),
                            ),
                            Icon(Icons.calendar_today_outlined),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              )

            ],
          ),
        );
      },
    );
  }

须要留神的是，我曾经在咱们的主页中增加了 selectedDatevariable，你能够在我最初提供的存储库链接中看到这一点。然而当初咱们遇到了一个问题，只管咱们正在应用 setstateoutlinebutton 更新 selectedDate 的值，然而在从新关上工作表之前，依然会显示旧的值，如下所示。

为了解决这个问题，咱们须要将 OutlinedButton 传递给 StatefulBuilder (或者您能够创立一个新的小部件并应用回调公开更改，正如我后面所说的，顺便说一下，这是更正确的办法)。

void addWeight() {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
      )),
      builder: (context) {
        return Container(
          height: 360,
          width: MediaQuery.of(context).size.width,
          margin:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(padding: EdgeInsets.only(bottom: 24.0),
                child: Text(
                  'Register Weight',
                  style: Styles.titleStyle,
                ),
              ),
              TextField(
                controller: weightInputController,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(labelText: 'Weight (KG)',
                  border: OutlineInputBorder(borderRadius: Styles.borderRadius,),
                ),
              ),
              Padding(padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        'Select a date',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    Container(padding: const EdgeInsets.symmetric(horizontal: 4),
                        margin: const EdgeInsets.symmetric(vertical: 8.0),
                        height: 36,
                        decoration: BoxDecoration(borderRadius: Styles.borderRadius,),
                        child: StatefulBuilder(builder: (context, setState) {
                            return OutlinedButton(onPressed: () async {final now = DateTime.now();

                                final result = await showDatePicker(
                                    context: context,
                                    initialDate: now,
                                    firstDate: now.subtract(
                                      const Duration(days: 90,),
                                    ),
                                    lastDate: now);

                                if (result != null) {setState(() {selectedDate = result;});
                                }
                              },
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Padding(padding: const EdgeInsets.only(right: 16.0),
                                    child: Text('${formatDateToString(selectedDate)}'),
                                  ),
                                  Icon(Icons.calendar_today_outlined),
                                ],
                              ),
                            );
                          },
                        )),
                  ],
                ),
              ),
              Expanded(child: Container()),
              ButtonBar(
                children: [
                  ElevatedButton(onPressed: () => Navigator.pop(context),
                    child: Text('Cancel',
                        style: TextStyle(color: Theme.of(context).primaryColor,
                        )),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.white,
                      // minimumSize: Size(96, 48),
                    ),
                  ),
                  ElevatedButton(onPressed: () {setState(() {
                          weights.insert(
                              0,
                              WeightModel(value: double.parse(weightInputController.text),
                                date: selectedDate,
                              ));
                        });
                        Navigator.pop(context);
                      },
                      child: const Text('Register')),
                ],
              ),
            ],
          ),
        );
      },
    );
  }

这是咱们的 ModalBottomSheet 的最终版本！

https://github.com/evandrmb/b…

https://ducafecat.tech/

https://github.com/ducafecat

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

正文完

flutter

发表至： flutter

2021-05-18

0

关于flutter:加入-Flutter-EngagePick-您的专属-Dash-形象

关于flutter:报名开启｜和你约定在-Google-应用出海指南针

关于flutter:Flutter-118个Flutter的优势以及为什么要在下一个项目中尝试Flutter

关于flutter:如何测试-Flutter-应用-ー-单元测试

关于mysql:MySQL慢日志全解析

关于flutter:Flutter-ModalBottomSheet-指导

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

代码

参考

注释

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程内含优惠码）

关于flutter:Flutter-ModalBottomSheet-指导

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

代码

参考

注释

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始 新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程 内含优惠码）

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

Flutter 实战从零开始新闻客户端

Just My Socks（注册教程内含优惠码）