flutter bottomSheet 控件详解

文章目录

- - [1. Persistent BottomSheet](#1. Persistent BottomSheet)
  - - [示例：创建一个 Persistent BottomSheet](#示例：创建一个 Persistent BottomSheet)
    - 解释：
  - [2. Modal BottomSheet](#2. Modal BottomSheet)
  - - [示例：创建一个 Modal BottomSheet](#示例：创建一个 Modal BottomSheet)
    - 解释：
  - [3. BottomSheet 的交互和手势](#3. BottomSheet 的交互和手势)
  - - [示例：实现拖动关闭的 BottomSheet](#示例：实现拖动关闭的 BottomSheet)
    - 解释：
  - [4. `BottomSheet` 的样式和自定义](#4. BottomSheet 的样式和自定义)
  - - [示例：自定义 BottomSheet 样式](#示例：自定义 BottomSheet 样式)
    - 解释：
  - [5. 总结](#5. 总结)

BottomSheet 是 Flutter 中一个非常重要的控件，它用于从屏幕的底部滑出一个面板，提供额外的内容或操作。 BottomSheet 提供了一种非常灵活的方式来展示额外的信息、操作选项或交互组件，通常用于显示不需要占用整个屏幕空间的临时内容。

Flutter 提供了两种类型的 BottomSheet：

Persistent BottomSheet：持久的底部面板，通常用于显示一些永久存在的内容，如过滤选项、音量控制等。用户可以与它交互并保持它可见。
Modal BottomSheet ：模态底部面板，它会覆盖内容并要求用户做出选择或操作。用户在与 Modal BottomSheet 交互时，通常无法与屏幕上的其他内容交互，直到面板被关闭。

1. Persistent BottomSheet

Persistent BottomSheet 是一种常驻底部面板，它不会阻塞用户的其他操作。用户可以与屏幕上的其他内容交互，面板也可以通过手势滑动或编程方式来隐藏。

示例：创建一个 Persistent BottomSheet

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Persistent BottomSheet Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开 Persistent BottomSheet
            showBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  height: 200,
                  color: Colors.blue,
                  child: Center(child: Text('Persistent BottomSheet')),
                );
              },
            );
          },
          child: Text("Show BottomSheet"),
        ),
      ),
    );
  }
}

解释：

showBottomSheet 方法用于显示一个持久的底部面板。当点击按钮时，底部面板从屏幕底部滑出。
该面板上的内容可以自由滚动，且用户可以与屏幕上的其他控件进行交互。

Modal BottomSheet 是模态底部面板，它会覆盖屏幕的部分内容并要求用户操作。用户需要关闭这个面板才能继续与屏幕上的其他内容交互。Modal BottomSheet 通常用于展示选择列表、表单等交互式内容。

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Modal BottomSheet Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开 Modal BottomSheet
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  height: 200,
                  color: Colors.green,
                  child: Center(child: Text('Modal BottomSheet')),
                );
              },
            );
          },
          child: Text("Show Modal BottomSheet"),
        ),
      ),
    );
  }
}

解释：

showModalBottomSheet 方法会创建一个模态底部面板，用户无法在面板关闭之前与其他屏幕内容交互。
builder 回调用于定义面板的内容。该面板通常会遮盖屏幕底部的内容。

3. BottomSheet 的交互和手势

BottomSheet 支持拖动操作，允许用户通过滑动来打开或关闭面板。用户可以通过手势或编程方式控制 BottomSheet 的状态。

示例：实现拖动关闭的 BottomSheet

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomSheet with Gesture"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                  height: 200,
                  color: Colors.red,
                  child: Center(child: Text('Drag me to close')),
                );
              },
            );
          },
          child: Text("Show Modal BottomSheet"),
        ),
      ),
    );
  }
}

解释：

showModalBottomSheet 显示一个模态底部面板，可以通过手势拖动来关闭面板。
showBottomSheet 的面板也支持滑动手势来关闭，但这个例子集中于 Modal BottomSheet 的手势操作。

4. `BottomSheet` 的样式和自定义

你可以自定义 BottomSheet 的样式，包括颜色、圆角、阴影等。通过在 builder 中返回自定义布局，你可以非常灵活地设计 BottomSheet。

示例：自定义 BottomSheet 样式

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom BottomSheet Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
              ),
              builder: (context) {
                return Container(
                  height: 250,
                  color: Colors.orange,
                  child: Center(child: Text('Custom BottomSheet')),
                );
              },
            );
          },
          child: Text("Show Custom BottomSheet"),
        ),
      ),
    );
  }
}

解释：

这里我们通过 shape 属性自定义了底部面板的圆角样式。
使用 RoundedRectangleBorder 来设置底部面板的圆角效果，使得它看起来更加美观。

5. 总结

BottomSheet 是 Flutter 中一个非常有用的控件，它可以提供一种从屏幕底部滑出的界面，用户可以交互并获得更多的信息或操作选项。Flutter 提供了两种类型的 BottomSheet：

Persistent BottomSheet：适合显示持久的内容或操作，用户可以与其他界面内容交互。
Modal BottomSheet：适合显示临时的交互内容，用户需要完成操作或关闭面板才能继续与界面交互。

BottomSheet 提供了灵活的自定义选项，支持手势操作、样式设置和动态内容。无论是简单的底部面板，还是需要复杂交互的模态面板，BottomSheet 都可以满足需求。

结束语

Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！

flutter bottomSheet 控件详解

文章目录

1. Persistent BottomSheet

示例：创建一个 Persistent BottomSheet

解释：

2. Modal BottomSheet

示例：创建一个 Modal BottomSheet

解释：

3. BottomSheet 的交互和手势

示例：实现拖动关闭的 BottomSheet

解释：

4. BottomSheet 的样式和自定义

示例：自定义 BottomSheet 样式

解释：

5. 总结

4. `BottomSheet` 的样式和自定义