Flutter – 模态底片

Modal Bottom Sheet 是菜单或对话框的替代品，可防止用户与应用程序的其余部分进行交互。它将出现在 UI 上，因此无需导航到不同的页面。它可用于执行不需要构建整个新屏幕的小任务。

构造函数：

Future showModalBottomSheet (
{@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
Color barrierColor,
bool isScrollControlled: false,
bool useRootNavigator: false,
bool isDismissible: true,
bool enableDrag: true,
RouteSettings routeSettings}
)

特性：

• builder ：工作表内容的构建器。
• backgroundColor：显示背景颜色。
• 海拔：通过增加阴影来抬高小吃店。
• shape：模态底片的形状。
• clipBehavior：内容将根据此选项进行剪辑。
• barrierColor：显示模态底部表单后在背景中显示的颜色。
• isScrollControlled：启用或禁用滚动。
• useRootNavigator： useRootNavigator参数确保在设置为true 时使用根导航器显示BottomSheet 。
• isDismissible：指定用户是否可以通过点击稀松布来关闭模态底部工作表。
• enableDrag： enableDrag参数指定底部表单是否可以上下拖动和向下滑动解除。
• routeSettings：设置模态底部表单的RouteSettings 。

注意：上下文和构建器应用了 @required 类，这意味着必须使用这些参数。

执行：

主要的。dart文件。

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
// This is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ModalBottomSheetDemo(),
      ),
    );
  }
}
  
class ModalBottomSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
  
          // when raised button is pressed
          // we display showModalBottomSheet 
          showModalBottomSheet(
  
            // context and builder are
            // required properties in this widget
            context: context,
            builder: (BuildContext context) {
  
              // we set up a container inside which
              // we create center column and display text
              return Container(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

输出：

说明：这里我们创建了 2 个无状态小部件，其中第一个无状态小部件用于使用 Material 应用程序构建我们的主屏幕。在第一个无状态小部件中，我们在脚手架内定义了我们的appbar并调用了我们的第二个无状态小部件。

在第二个无状态小部件中，我们在主屏幕中构建内容。在这里，我们创建了一个名为showmodalbottomsheet button 的凸起按钮。当我们按下它时，它会显示模态底部工作表，我们在其中添加了 builder 属性，该属性在列内显示文本geeksforgeeks 。

应用不同的属性：

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
/// This is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: ModalBottomSheetDemo(),
      ),
    );
  }
}
  
class ModalBottomSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          // adding some properties
          showModalBottomSheet(
            context: context,
            // color is applied to main screen when modal bottom screen is displayed
            barrierColor: Colors.greenAccent,
            //background color for modal bottom screen
            backgroundColor: Colors.yellow,
            //elevates modal bottom screen
            elevation: 10,
            // gives rounded corner to modal bottom screen
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            builder: (BuildContext context) {
              return Container(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text('GeeksforGeeks'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

输出：

说明：在上面的代码中，我们添加了一些属性，如barrierColor 、 backgroundColor 、 shape 和height 。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！