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

        ],
      ),
    ),
  );

}
相关推荐
恋猫de小郭5 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡12 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克15 小时前
十、高级概念
flutter
帅次1 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡1 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉1 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1231 天前
FlutterView 源码解析
flutter
Zender Han1 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
nc_kai2 天前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter