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 的信心。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值