Flutter showModalBottomSheet用法

黄油奥特曼2024-06-24 21:13

先搞一个DialogUtil工具类

dart 复制代码

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

dart 复制代码

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

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

dart 复制代码

class InputPickUpCodeWidget extends StatefulWidget{

  InputPickUpCodeWidget({Key? key}):super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return InputPickUpCodeWidgetState();
  }

}
class InputPickUpCodeWidgetState extends State<InputPickUpCodeWidget>{

  @override
  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: [
         

        ],
      ),
    ),
  );

}