您的位置:首页 > 新闻 > 热点要闻 > Flutter showModalBottomSheet用法

Flutter showModalBottomSheet用法

2025/2/26 5:34:53 来源:https://blog.csdn.net/yaochangliang159/article/details/139862416  浏览:    关键词:Flutter showModalBottomSheet用法

先搞一个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的弹窗可以滑动

 //填写取件码订单的bottomSheetvoid showPickUpCode() {DialogUtil.showCommonBottomSheet(context,InputPickUpCodeWidget(),scrollControlled: true,);}

InputPickUpCodeWidget是你自己定义的底部弹出框的布局控件,这里主要贴主要代码部分:

class InputPickUpCodeWidget extends StatefulWidget{InputPickUpCodeWidget({Key? key}):super(key: key);State<StatefulWidget> createState() {// TODO: implement createStatereturn 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: [],),),);}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com