欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

flutter中showModalBottomSheet用法

程序员文章站 2022-03-02 10:27:30
showModalBottomSheet用法常用属性shape可以设置成自己想要的形状!通常直接设置圆角即可isScrollControlled:是否时全屏还是半屏isDismissible:外部是否可以点击,false不可以点击,true可以点击,点击后消失backgroundColor : 通常可以设置白色和透明,所有属性 及默认属性Color backgroundColor, double elevation, //高度???不知道用处ShapeBorder shape, //mo...

showModalBottomSheet用法

常用属性

shape可以设置成自己想要的形状!通常直接设置圆角即可
isScrollControlled:是否时全屏还是半屏
isDismissible:外部是否可以点击,false不可以点击,true可以点击,点击后消失
backgroundColor : 通常可以设置白色和透明,

所有属性 及默认属性

Color backgroundColor, 
double elevation, //高度???不知道用处
ShapeBorder shape, //model边框样式
Clip clipBehavior, //shape不生效,设置一下这个clipBehavior: Clip.antiAlias,
Color barrierColor, //设置外部区域的颜色
bool isScrollControlled = false, //是否时全屏还是半屏
bool useRootNavigator = false, //使用路由??不知道有什么用
bool isDismissible = true, //外部是否可以点击
bool enableDrag = true  //是否可以拖动??不知道有什么用

应用实列

showModalBottomSheet<void>(
  context: context,
  isDismissible: false,  //外部不可以点击
  shape: RoundedRectangleBorder(
  	//这里是modal的边框样式
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  builder: (BuildContext context) {
  	//DatePicker 是自定义的StatefulWidget  model的样式,结构在DatePicker处理  
  	//modal的高度在DatePicker中处理
  	//[StatefulWidget  传参样式结构处理](https://blog.csdn.net/weixin_42322441/article/details/109237716)
    return DatePicker(
      onCancel: () {
        Navigator.of(context).pop();
      },
      onSure: (value) async {
        //确认回调
        //处理data或业务逻辑
        setState(() {
          birthday = value;
        });
        Navigator.pop(context);
      },
    );
  },
);

本文地址:https://blog.csdn.net/weixin_42322441/article/details/109236166

相关标签: app开发 flutter