flutter中showModalBottomSheet用法

2022-07-29,

目录

    • showModalBottomSheet用法
        • 常用属性
        • 所有属性 及默认属性
        • 应用实列

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

《flutter中showModalBottomSheet用法.doc》

下载本文的Word格式文档,以方便收藏与打印。