Flutter bottomSheet的使用
文章目录
前言
最近看到群里有朋友在问类似于
这东西怎么实现
我回答的可能不那么清楚,因为我就答了 bottomSheet,下次我可能会回答的更清楚些
这东西在可能在 flutter 里有如下几种解释
- Scaffold 的 bottomSheet 属性
- 一个叫 BottomSheet 的 widget 组件
- Scaffold.showBottomSheet 方法
- showBottomSheet 方法也就是一个底层弹窗
这里分别来简单的说一下
Scaffold 的 bottomSheet 属性
这个就是前言中的那种东西的简单实现方式,直接把聊天的输入框(TextField)放在里面,用 Container 也好,也用其他什么控件也可以,当然 Container => Row => [TextField,Button]就能实现图上的效果了
简单的页面代码如下
1import 'package:flutter/material.dart';
2
3class BottomSheet1Page extends StatefulWidget {
4 @override
5 _BottomSheetPageState createState() => _BottomSheetPageState();
6}
7
8class _BottomSheetPageState extends State<BottomSheet1Page> {
9 @override
10 Widget build(BuildContext context) {
11 return Scaffold(
12 appBar: AppBar(
13 title: Text('bottom sheet'),
14 ),
15 body: ListView.builder(
16 itemBuilder: (BuildContext context, int index) {
17 return ListTile(
18 title: Text(index.toString()),
19 subtitle: Text("我是${index}的副标题"),
20 );
21 },
22 itemCount: 300,
23 ),
24 bottomSheet: Container(
25 child: Row(
26 children: <Widget>[
27 Expanded(child: TextField()),
28 RaisedButton(
29 child: Text('发送'),
30 onPressed: () {},
31 ),
32 ],
33 ),
34 ),
35 );
36 }
37}
效果如下
当然如果要适配 iphoneX 之类的 ,底部可能需要套SafeArea在外面,这类的东西不属于本篇 blog 的内容,一笔带过而已
一个叫 BottomSheet 的 widget 组件
这个看了一下内部实现,增加了一些手势,就是支持往下拉关闭BottomSheet
Scaffold.showBottomSheet 方法
1import 'package:flutter/material.dart';
2
3class ScaffoldBottomSheetPage extends StatefulWidget {
4 @override
5 _ScaffoldBottomSheetPageState createState() => _ScaffoldBottomSheetPageState();
6}
7
8class _ScaffoldBottomSheetPageState extends State<ScaffoldBottomSheetPage> {
9 @override
10 Widget build(BuildContext context) {
11 return Scaffold(
12 appBar: AppBar(
13 title: Text("scaffold show bottom sheet"),
14 ),
15 body: ListView(),
16 floatingActionButton: Builder(builder: (c) {
17 return FloatingActionButton(
18 onPressed: () {
19 Scaffold.of(c).showBottomSheet(
20 (c) {
21 return Container(
22 child: Text("我是底部弹出来的"),
23 height: 200.0,
24 );
25 },
26 );
27 },
28 );
29 }),
30 );
31 }
32}
使用前的状态
点击后会弹出一个底部弹窗,等待关闭,关闭这个东西你只需要从上往下拖动即可
因为这个是基于 Scaffold 的,所以会和 Scaffold 中的其他部件联动,比如如图所示那个FloatActionButton
showBottomSheet 方法也就是一个底层弹窗
用于从底部弹出弹窗,这个方法是material包中定义的一个全局方法
实际上也是使用的 Scaffold 的 showBottomSheet 方法,直接参考上面就可以
后记
以上