先搞一个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: [
         

        ],
      ),
    ),
  );

}

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部