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);}@overrideWidget 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 的信心。
Flutter开发之BottomSheetDialog选择组件-5(44)相关推荐
- Flutter开发之SimpleDialog对话框组件-1(40)
简单对话框组件在移动开发的交互中比较常用到,用于提示信息.警告.选择等功能.今天就学习一下简单的对话框组件SimpleDialog. 效果如图: 代码非常简单: import 'package:flu ...
- Flutter开发之Tooltip提示组件-3(42)
Tooltip支持用户传入任意一个child作为显示的Widget,并且在用户长按Widget时,会在上方或者下方出现类似Toast的提示,隔一段时间自动消失,由于使用起来比较简单,很好的用户提示体验 ...
- Flutter开发之SnackBar提示组件-4(43)
SnackBar无论是用法还是功能使用几乎都跟原生Android一样 ,唯一有一点需要留意的是在Scaffold.of(context).showSnackBar()中传递的context必须不能是S ...
- Flutter开发之AlertDialog、AboutDialog对话框组件-2(41)
继上一篇介绍了SimpleDialog对话框组件 Flutter开发之SimpleDialog对话框组件-1(40) 这里再介绍一种带有确定.取消按钮的对话框组件:AlertDialog.AboutD ...
- Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解 需求目的 开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求 是否实现 后台定位 ✅ ...
- Flutter开发之ListView使用第三方pull_to_refresh加载更多(36)
在Flutter开发之ListView下拉刷新&上拉加载更多(35) 中我们实现了下拉刷新.上拉分页加载的功能.但是使用起来非常不方便,且不满一屏时难以处理. 今天介绍ListView使用第三 ...
- Flutter开发之ListView下拉刷新上拉加载更多(35)
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
- Flutter开发之ListView添加HeaderView和FooterView-2(39)
参考文章:RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究. 通过Recyc ...
- Flutter开发之ListView使用第三方flutter_refresh加载更多(37)
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
最新文章
- 2020年1月Github上最热门的开源项目
- android service是单例么,android 使用单例还是service?
- Poj2480欧拉函数
- maven2——设置镜像篇
- Redis--COW(Copy On Write)
- SAP CRM one order框架到了S/4HANA后是如何重构的
- 用node-webkit开发多平台的桌面客户端
- 一步步了解线程池之自定义-PriorityThreadPool
- 【负载观测】永磁同步电机的负载观测及前馈补偿
- 4.大数据架构详解:从数据获取到深度学习 --- 数据获取
- jvm 内存溢出 Java heap space 调优解决过程
- Java小项目---电影购票系统
- 表情宝宝(v3.1)——一个表情包管理软件
- windows服务器安全设置怎样操作,要注意什么?
- FPGA之VGA转HDMI之编码模块的编写
- 凯撒密码---最简单的加密方式之一
- 主成分分析时,如果矩阵秩亏,会发生什么后果?
- GP232RL与FT232RL操作区别
- 网页下拉框智能诱导输入
- CS5268规格书|CS5268功能介绍|TYPE-C转HDMI+VGA