Flutter的底片

我们可以在flutter创建底片。基本上，我们在材料设计中有两种类型的底片： Persistent和Modal 。当我们想要执行操作时使用底表。基本上有两种类型的Bottomsheets ：Persistent 和Modal。 Persistent bottomsheet不隐藏屏幕内容，重点放在两边。但是 Modal bottomsheet更侧重于bottomsheet而不是主屏幕内容。当点击持久按钮时，页面将被推送并显示持久底部表。而在 Modal bottomsheet的情况下，而不是页面推送， bottomsheet将显示在同一页面上，并且没有持久性bottomsheet复杂。我们可以根据我们的要求使用底片中的任何一个。

持久性：即使用户使用应用程序的其他部分，它也是可见的。

Modal ：它阻止用户使用应用程序的其他部分。

让我们借助示例来理解这些：

BottomSheet 类的构造函数：

BottomSheet({Key key, 
AnimationController animationController, 
bool enableDrag: true, 
BottomSheetDragStartHandler onDragStart, 
BottomSheetDragEndHandler onDragEnd, 
Color backgroundColor, 
double elevation, 
ShapeBorder shape, 
Clip clipBehavior, 
@required VoidCallback onClosing, 
@required WidgetBuilder builder})

示例实现：

主要的。dart

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State{
  final _scaffoldKey =new GlobalKey();
  VoidCallback _showPersBottomSheetCallBack;
  
  @override
  void initState(){
    super.initState();
    _showPersBottomSheetCallBack=_showPersistentBottomSheet;
  }
  void _showPersistentBottomSheet(){
    setState(() {
      _showPersBottomSheetCallBack=null;
    });
    _scaffoldKey.currentState.showBottomSheet((context){
      return new Container(
        height: 200.0,
        color: Colors.green,
        child: new Center(
          child: new Text("Persistent BottomSheet",textScaleFactor: 2,
              style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),
        ),
      );
    }).closed.whenComplete((){
      if(mounted){
        setState(() {
          _showPersBottomSheetCallBack=_showPersistentBottomSheet;
        });
      }
    });
  }
  void _showModalSheet(){
    showModalBottomSheet(
        context: context,
        builder: (builder){
          return new Container(
            height: 200.0,
            color: Colors.green,
            child: new Center(
              child: new Text(" Modal BottomSheet",textScaleFactor: 2,
                  style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),
            ),
          );
        }
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key:_scaffoldKey,
      appBar: new AppBar(
        title: new Text("Bottomsheet"),
        backgroundColor: Colors.green,
        actions: [
          Text("GFG",textScaleFactor: 2,)
        ],
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new RaisedButton(
              color: Colors.red,
              onPressed: _showPersBottomSheetCallBack,
              child: new Text("Persistent",
                  style: TextStyle(color: Colors.white,
                      fontWeight: FontWeight.bold)),
            ),
            new Padding(
              padding: const EdgeInsets.only(top: 10.0),
            ),
            new RaisedButton(
              color: Colors.red,
              onPressed: _showModalSheet,
              child: new Text("Model",
                  style: TextStyle(color: Colors.white,
                      fontWeight: FontWeight.bold)),
            )
          ],
        ),
      ),
      backgroundColor: Colors.lightBlue[100],
    );
  }
}

输出：

执行上述代码后，输出如下所示：

当点击 Persistent 按钮时，将显示一个持久的底部表。在这个持久的底页中，主屏幕内容与底页内容同等关注。当点击持久按钮时，页面将被推送并显示持久底部表。当点击模态按钮时，将显示模态底板。在 Modal bottomsheet 中，而不是页面推送， bottomsheet将显示在同一页面上，并且没有持久性bottomsheet复杂。