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
上一篇: 移动端开发meta标签作用详解
下一篇: 小程序里的alert,Toast