Flutter bottomSheet的使用

前言

最近看到群里有朋友在问类似于

这东西怎么实现

我回答的可能不那么清楚,因为我就答了 bottomSheet,下次我可能会回答的更清楚些

这东西在可能在 flutter 里有如下几种解释

Scaffold 的 bottomSheet 属性
一个叫 BottomSheet 的 widget 组件
Scaffold.showBottomSheet 方法
showBottomSheet 方法也就是一个底层弹窗

这里分别来简单的说一下

Scaffold 的 bottomSheet 属性

这个就是前言中的那种东西的简单实现方式,直接把聊天的输入框(TextField)放在里面,用 Container 也好,也用其他什么控件也可以,当然 Container => Row => [TextField,Button]就能实现图上的效果了

简单的页面代码如下

import 'package:flutter/material.dart';class BottomSheet1Page extends StatefulWidget {@override_BottomSheetPageState createState() => _BottomSheetPageState();
}class _BottomSheetPageState extends State<BottomSheet1Page> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('bottom sheet'),),body: ListView.builder(itemBuilder: (BuildContext context, int index) {return ListTile(title: Text(index.toString()),subtitle: Text("我是${index}的副标题"),);},itemCount: 300,),bottomSheet: Container(child: Row(children: <Widget>[Expanded(child: TextField()),RaisedButton(child: Text('发送'),onPressed: () {},),],),),);}
}

效果如下

当然如果要适配 iphoneX 之类的 ,底部可能需要套SafeArea在外面,这类的东西不属于本篇 blog 的内容,一笔带过而已

一个叫 BottomSheet 的 widget 组件

这个看了一下内部实现,增加了一些手势,就是支持往下拉关闭BottomSheet

Scaffold.showBottomSheet 方法

import 'package:flutter/material.dart';class ScaffoldBottomSheetPage extends StatefulWidget {@override_ScaffoldBottomSheetPageState createState() => _ScaffoldBottomSheetPageState();
}class _ScaffoldBottomSheetPageState extends State<ScaffoldBottomSheetPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("scaffold show bottom sheet"),),body: ListView(),floatingActionButton: Builder(builder: (c) {return FloatingActionButton(onPressed: () {Scaffold.of(c).showBottomSheet((c) {return Container(child: Text("我是底部弹出来的"),height: 200.0,);},);},);}),);}
}

使用前的状态

点击后会弹出一个底部弹窗,等待关闭,关闭这个东西你只需要从上往下拖动即可

因为这个是基于 Scaffold 的,所以会和 Scaffold 中的其他部件联动,比如如图所示那个FloatActionButton

showBottomSheet 方法也就是一个底层弹窗

用于从底部弹出弹窗,这个方法是material包中定义的一个全局方法

实际上也是使用的 Scaffold 的 showBottomSheet 方法,直接参考上面就可以

后记

以上