bottomSheet详解

BottomSheet

BottomSheet 作为组件直接使用的时候比较少，比如配合 Scaffold 的子属性使用，可以理解为展示在屏幕下方的一个组件，其构造：

 const BottomSheet({
    super.key,
    this.animationController,//动画控制器
    this.enableDrag = true,//是否可以拖动，默认为 true
    this.onDragStart,//开始拖拽回调
    this.onDragEnd,//结束拖拽回调
    this.backgroundColor,//背景色
    this.elevation,//阴影高度
    this.shape,//形状 BorderShape
    this.clipBehavior,//剪切方式
    this.constraints,//BoxConstraints 约束
    required this.onClosing,//关闭回调函数
    required this.builder,//构建函数
  }) 

例子：

 bottomSheet: BottomSheet(
    enableDrag: false,
    onClosing: (){},
    builder: (context){
      return Container(
        color: Colors.cyan,
        height: 200,
        alignment: Alignment.center,
        child: const Text('BottomSheet'),
      );
    },
 ),

showModalBottomSheet

showModalBottomSheet 是一个直接调起 BottomSheet 的 api，使用频率较高，点击弹出：

 floatingActionButton: FloatingActionButton(
    child: const Icon(Icons.radar),
    onPressed: (){
      showModalBottomSheet(
          context: context,
          builder: (context){
            return Container(
              height: 100,
              child: Column(
                children: [
                  TextButton(
                      onPressed: (){
                        Navigator.of(context).pop();
                      },
                      child: const Text('保存'),
                  ),
                  TextButton(
                    onPressed: (){
                      Navigator.of(context).pop();
                    },
                    child: const Text('取消'),
                  ),
                ],
              )
            );
          }
      );
    },
 ),

showBottomSheet

showBottomSheet实际调用是 Scaffold.of(context).showBottomSheet，.of(context) 方法在当前同一层级是拿不到 Scaffold Widget 的，所以会报错。需要在封装一层 class 进行使用 或者 使用Builder。

完整例子：

import 'package:flutter/material.dart';

class showBottomSheetPage extends StatefulWidget {
  const showBottomSheetPage({Key? key}) : super(key: key);
  @override
  State<showBottomSheetPage> createState() => _showBottomSheetPageState();
}

class _showBottomSheetPageState extends State<showBottomSheetPage> {
  bool _isShow = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('showBottomSheet'),),
      body: const Padding(
        padding: EdgeInsets.all(20),
        child:Text('showBottomSheet')
      ),
      // bottomSheet: BottomSheet(
      //   enableDrag: false,
      //   onClosing: (){},
      //   builder: (context){
      //     return Container(
      //       color: Colors.cyan,
      //       height: 200,
      //       alignment: Alignment.center,
      //       child: const Text('BottomSheet'),
      //     );
      //   },
      // ),
      floatingActionButton: _buildFloatingActionButton(),
      // floatingActionButton: FloatingActionButton(
      //   child: const Icon(Icons.radar),
      //   onPressed: (){
      //     showModalBottomSheet(
      //         context: context,
      //         builder: (context){
      //           return Container(
      //             height: 100,
      //             child: Column(
      //               children: [
      //                 TextButton(
      //                     onPressed: (){
                              //收起上拉框
      //                       Navigator.of(context).pop();
      //                     },
      //                     child: const Text('保存'),
      //                 ),
      //                 TextButton(
      //                   onPressed: (){
                             //收起上拉框
      //                     Navigator.of(context).pop();
      //                   },
      //                   child: const Text('取消'),
      //                 ),
      //               ],
      //             )
      //           );
      //         }
      //     );
      //   },
      // ),
    );
  }
  Widget _buildFloatingActionButton(){
    return Builder(
        builder: (context){
          return FloatingActionButton(
            onPressed: (){
              _floatingActionButtonEvent(context);
              _isShow = !_isShow;
            },
            child: const Icon(Icons.ac_unit_sharp),
          );
        }
    );
  }

  _floatingActionButtonEvent(BuildContext context){
    if(_isShow){
      Navigator.of(context).pop();
    }else{
      _showSheet(context);
    }
  }
  void _showSheet(BuildContext context){
    showBottomSheet(
        context: context,
        builder: (context){
          return Container(
            width: double.infinity,
            height: 200,
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('showBottomSheet'),
          );
        }
    );
  }
}