Flutter bottomSheet的使用

前言

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

这东西怎么实现

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

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

1. Scaffold 的 bottomSheet 属性
2. 一个叫 BottomSheet 的 widget 组件
3. Scaffold.showBottomSheet 方法
4. 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> {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title