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的弹窗可以滑动

 //填写取件码订单的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: [
         

        ],
      ),
    ),
  );

}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄油奥特曼

如果可以,请我喝一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值