先搞一个DialogUtil工具类
import 'package:flutter/material.dart';
class DialogUtil {
static void showCommonBottomSheet(BuildContext context,Widget widget,{scrollControlled=false}){
showModalBottomSheet(
context: context,
enableDrag:false,
builder: (BuildContext context) {
return widget;
},
isScrollControlled: scrollControlled,
isDismissible: true,
backgroundColor: Colors.white,
elevation: 10.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
),
);
}
}
调用的时候scrollControlled属性要设置true,这样bottomSheet的弹窗可以滑动
//填写取件码订单的bottomSheet
void showPickUpCode() {
DialogUtil.showCommonBottomSheet(
context,
InputPickUpCodeWidget(),
scrollControlled: true,
);
}
InputPickUpCodeWidget是你自己定义的底部弹出框的布局控件,这里主要贴主要代码部分:
class InputPickUpCodeWidget extends StatefulWidget{
InputPickUpCodeWidget({Key? key}):super(key: key);
State<StatefulWidget> createState() {
// TODO: implement createState
return InputPickUpCodeWidgetState();
}
}
class InputPickUpCodeWidgetState extends State<InputPickUpCodeWidget>{
Widget build(BuildContext context) {
//很重要,这个bottomSize必须有
double bottomSize=MediaQuery.of(context).viewInsets.bottom;
return AnimatedPadding(
child: _buildMain(),
padding: EdgeInsets.only(bottom: bottomSize),
duration: const Duration(milliseconds: 100),);
}
//SingleChildScrollView必须有,不然bottomSheet页面有输入框的话,软键盘一弹出来,页面布局就溢出报错了,加个SingleChildScrollView就可以自己滑动了
Widget _buildMain()=>SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15)),
),
//MainAxisSize.min很重要,必须设置,bottomSheet会自适应内容高度
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
],
),
),
);
}
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Flutter showModalBottomSheet用法
发表评论 取消回复