Flutter开发之BottomSheetDialog选择组件-5（44）

BottomSheetDialog、ModalBottomSheetDialog同样也是需要借助showDialog唤起，就跟它名字一样，这两种dialog是从屏幕下方向上弹出的，不同的是BottomSheetDialog默认会铺满全屏显示，而ModalBottomSheetDialog半屏显示，二者都支持随用户手指拖动上下移动。

方法签名

• 1.showBottomSheet(context,child) 上下文参数，Widget数组
• 2.showModalBottomSheet(context,child) 上下文参数，Widget数组

演示效果

样例代码

import 'package:flutter/material.dart';

class BottomSheetDialogTest extends StatelessWidget {

  void routeSubpage(BuildContext context, int index) {
    print("点击了第几个cell----$index");
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("BottomSheet"),
      ),
      body: new Column(
        children: <Widget>[
          new Builder(builder: (BuildContext context){
            return new RaisedButton(
              onPressed: () {
                showBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return new Container(
                        child: new Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: new Column(
                            children: <Widget>[
                              new ListTile(
                                leading: new Icon(Icons.chat),
                                title: new Text("对话框列表1"),
                                onTap: () {
                                  routeSubpage(context, 0);
                                },
                              ),
                              new ListTile(
                                leading: new Icon(Icons.help),
                                title: new Text("对话框列表2"),
                                onTap: () {
                                  routeSubpage(context, 1);
                                },
                              ),
                              new ListTile(
                                leading: new Icon(Icons.settings),
                                title: new Text("对话框列表3"),
                                onTap: () {
                                  routeSubpage(context, 2);
                                },
                              ),
                              new ListTile(
                                leading: new Icon(Icons.more),
                                title: new Text("对话框列表4"),
                                onTap: () {
                                  routeSubpage(context, 3);
                                },
                              ),
                            ],
                          ),
                        ),
                      );
                    });
              },
              child: new Text("BottomSheet"),
            );
          }),


          //showModalBottomSheet与BottomSheet的区别是 BottomSheet充满屏幕，ModalBottomSheet半屏
          new RaisedButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return new Container(
                      child: new Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: new Column(
                          children: <Widget>[
                            new ListTile(
                              leading: new Icon(Icons.chat),
                              title: new Text("对话框列表1"),
                              onTap: () {
                                routeSubpage(context, 0);
                              },
                            ),
                            new ListTile(
                              leading: new Icon(Icons.help),
                              title: new Text("对话框列表2"),
                              onTap: () {
                                routeSubpage(context, 1);
                              },
                            ),
                            new ListTile(
                              leading: new Icon(Icons.settings),
                              title: new Text("对话框列表3"),
                              onTap: () {
                                routeSubpage(context, 2);
                              },
                            ),
                            new ListTile(
                              leading: new Icon(Icons.more),
                              title: new Text("对话框列表4"),
                              onTap: () {
                                routeSubpage(context, 3);
                              },
                            ),
                          ],
                        ),
                      ),
                    );
                  });
            },
            child: new Text("ModalBottomSheet"),
          ),
        ],
      ),
    );
  }
}

总结

最近5篇文章介绍了一些提示框、选择框、确认框。都是开发中能用得到的，有了这5篇文章，感觉对Flutter 的认识多了很多，增加了学习Flutter 的信心。