Flutter showModalBottomSheet用法

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

        ],
      ),
    ),
  );

}
相关推荐
孤鸿玉11 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥18 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart