Skip to main content
  • Flutter CN logo Flutter
  • Flutter CN logo Flutter Docs
  • Flutter CN logo Flutter API
  • Dart logo Dart
  • Dart logo DartPad
  • Dart logo pub.dev
  • 主页
  • 社区
  • Package
  • API
  • 关于中文文档
search 开始使用
  • 开始使用 Flutter
  • 安装和环境配置
    • 概览
    • 编写第一个 Flutter 应用
      • 概览
      • Dart 入门
      • Widget
      • 布局
      • 状态管理
      • 处理用户输入
      • 网络与数据
      • 本地数据与缓存
      • 给 Android 开发者的 Flutter 指南
      • 给 Android Jetpack Compose 开发者的 Flutter 指南
      • 给 iOS SwiftUI 开发者的 Flutter 指南
      • 给 iOS UIKit 开发者的 Flutter 指南
      • 给 React Native 开发者的 Flutter 指南
      • 给 Web 开发者的 Flutter 指南
      • 给 Xamarin.Forms 开发者的 Flutter 指南
      • 声明式 UI 概览
      • Flutter 对比 Swift 的并发
    • 编程练习 (Codelab)
    • 实用教程 (Cookbook)
    • GitHub 上的样例open_in_new
    • 版本升级
    • SDK 版本列表
    • 最近更新
    • 版本发行注记
    • 破坏性改动
    • 兼容性策略
        • 概览
        • 用户体验
        • 新功能集成
        • 自定义大语言模型提供商
        • 聊天客户端示例
      • 使用 Google AI Dart SDK 进行构建(视频)open_in_new
      • 概览
      • 探索如何将 Firebase 用于 Flutteropen_in_new
      • 了解如何将 Firebase 用于 Flutteropen_in_new
      • 使用 FirebaseUI 向 Flutter 应用添加用户身份验证流程open_in_new
      • 了解如何将 Firebase 用于 Webopen_in_new
      • 概览
      • 添加成就和排行榜
      • 使用 Firestore 构建排行榜open_in_new
      • 添加广告
      • 添加多人游戏支持
      • 添加应用内购功能open_in_new
      • 添加用户身份验证open_in_new
      • 使用 Crashlytics 调试open_in_new
      • Flutter Flame 入门open_in_new
        • 广告概览
        • 添加广告
        • 在 Flutter 应用中添加 AdMob 广告open_in_new
        • 添加 AdMob 横幅广告和原生内嵌广告open_in_new
        • 集成多媒体广告(视频)open_in_new
        • Google AdMob 中介广告变现open_in_new
        • 交互式媒体广告插件open_in_new
        • 应用内购功能概览
        • 添加应用内购功能open_in_new
        • 支付概览
        • Google pay packageopen_in_new
      • 为应用程序添加 Google 地图open_in_new
      • Google 地图 package 文档open_in_new
      • 构建新闻应用
  • 用户界面
  • 概览
  • Widget 目录
    • 概览
    • 构建布局
      • 构建与使用列表
      • 构建一个横向列表
      • 构建一个网格视图
      • 构建包含不同类型元素的列表
      • 构建元素之间包含间隔的列表
      • 处理长列表
      • 概览
      • 使用 Sliver 实现各种酷炫滚动效果
      • 在列表开头添加一个浮动的顶栏
      • 构建一个平行错位滚动的效果
    • 概览
    • 通用方法
    • SafeArea & MediaQuery
    • 大屏幕 & 可折叠设备
    • 用户输入 & 无障碍 (A11y)
    • 功能 & 政策
    • 不同平台的自动适配
    • 最佳实践
    • 其他资源
    • 共享主题样式
    • Material 设计
    • 迁移至 Material 3
      • 字体 & 版式
      • 使用自定义字体
      • 将字体从 package 中对外暴露
      • Google 字体 packageopen_in_new
      • 使用自定义的着色器
    • 为你的应用添加交互
      • 概览
      • 处理点击
      • 跨应用拖放对象
      • 拖动界面元素
      • 添加 Material 风格的水波纹
      • 实现滑动取消
      • 创建输入框并且调整样式
      • 读取输入框的内容
      • 处理输入框的内容变动
      • 管理输入框之间的焦点
      • 构建具有校验功能的表单
    • 展示 SnackBar
    • 实现快捷方式和捷径
    • 管理键盘焦点
    • 添加资源和图片
    • 加载网络图片
    • 从占位图过渡到图片
    • 播放及暂停视频
    • 在构建时转换资源
    • 概览
    • 在应用中添加 Tab (标签页切换) 导航
    • 导航至新页面并返回
    • 传递数据到新页面
    • 从新页面返回数据
    • 在页面上添加抽屉
    • 设置 Deeplink
    • 设置 Android Deeplink
    • 设置 iOS Universal Link
    • 设置 Web 的 URL 策略
    • 概览
    • 教程
    • 隐式动画
    • 过渡 Container 的属性
    • 渐入渐出 widget
    • Hero(跨页面共享元素)动画
    • 页面转场动画
    • 模拟物理特性动画
    • 交错动画
    • 构建菜单的交错动画
    • API 概览
    • 无障碍
    • 国际化
  • 界面以外的开发
      • 概览
      • 从声明式的角度思考
      • 短暂状态 & 持久状态
      • 简单的状态管理
      • 状态管理参考
      • 概览
      • 从网络上获取数据
      • 构建需要认证的请求
      • 发送数据到服务器
      • 更新网络上的数据
      • 删除网络上的数据
      • WebSocket 通信
      • JSON 序列化
      • 在后台处理 JSON 解析
      • 将键值对 (Key-Value) 数据存储在硬盘上
      • 读写文件
      • 利用 SQLite 持久化数据
      • 概览
      • 将 Firebase 添加到 Flutter 应用中open_in_new
    • Google APIs
    • 概览
    • 架构设计理念
    • 应用架构指南
      • 概览
      • UI 层
      • 数据层
      • 依赖注入
      • 测试各层级
    • 架构建议
    • 设计模式
    • 支持的平台
    • 构建桌面端应用
    • 撰写平台代码 (插件编写实现)
      • 将 Android 添加为构建目标
      • 添加闪屏页
      • 添加预测性返回
      • 调用原生代码
      • 托管 Android 原生视图
      • 调用 JetPack API
      • 启动 Jetpack Compose Activity
      • 在 Android 上恢复状态
      • 构建适合 Chrome OS 的 Android 应用
      • iOS 上的 Flutter
      • 将 iOS 添加为构建目标
      • 最新 iOS 版本上的 Flutter
      • 使用 Apple 的系统库
      • 添加启动页
      • 添加 iOS App Clip 支持
      • 添加 iOS App 扩展
      • 调用原生代码
      • 托管 iOS 原生视图
      • iOS 平台调试
      • 在 iOS 上恢复状态
      • 将 Linux 添加为构建目标
      • 构建 Linux 桌面软件
      • 将 macOS 添加为构建目标
      • 构建 macOS 应用
      • 调用原生代码
      • 托管 macOS 原生视图
      • Flutter 的 Web 支持
      • 将 Web 添加为构建目标
      • 构建一个 Web 应用
      • 编译为 WebAssembly
      • 自定义 Web 应用初始化
      • 将 Flutter 添加到任意 Web 应用中
      • Flutter 中的 Web 内容
      • Web 平台渲染器
      • 在 Web 里显示图片
      • Web 平台常见问题
      • 将 Windows 添加为构建目标
      • 构建 Windows 桌面软件
    • 使用 package 和插件
    • 开发 Package 和插件
      • 针对应用开发者
      • 针对插件作者
    • Flutter Favorites 项目
    • Package 仓库open_in_new
    • 测试
    • 概览
      • 概览
      • 模拟依赖
      • 概览
      • 寻找 widgets
      • 模拟滚动
      • 模拟用户操作
      • 概览
      • 编写并运行集成测试
      • 衡量集成测试的性能指标
    • 测试插件
    • 在测试中处理插件代码
    • 调试
    • 调试工具
    • 通过代码调试应用
    • 使用原生语言的调试
    • 常见的 Flutter 错误
    • 处理错误
    • 将错误上报到收集服务
    • 概览
    • 使用 Impeller
    • 性能最佳实践
    • 应用大小
    • 延迟加载组件
    • 渲染性能
    • 性能分析
    • Web 性能分析
    • 性能指标
    • 并发与隔离
    • 性能常见问题和回答
    • 附录
    • 混淆 Dart 代码
    • 为 Android 配置 flavor
    • 为 iOS 和 macOS 配置 flavor
    • 构建和发布为 Android 应用
    • 构建和发布为 iOS 应用
    • 构建和发布为 macOS 应用
    • 构建和发布为 Linux 应用
    • 构建和发布为 Windows 应用
    • 构建和发布为 Web 应用
    • 持续部署
    • 概览
      • 工程设定
      • 添加单个 Flutter 页面
      • 添加一个 Flutter Fragment
      • 添加 Flutter 视图
      • Plugin 初始化
      • 工程设定
      • 添加单个 Flutter 页面
    • 添加到 Web 应用
    • 调试内嵌的 Flutter module
    • 多个 Flutter 实例
    • 加载顺序和性能
    • Android Studio & IntelliJ
    • Visual Studio Code
      • 概览
      • 在 Android Studio & IntelliJ 中运行 DevTools
      • 在 VS Code 中运行 DevTools
      • 利用终端命令运行 DevTools
      • Flutter inspector
      • 旧版 Flutter inspector
      • 性能视图
      • CPU 性能视图
      • 内存视图
      • 调试控制条视图
      • 网络视图
      • 调试工具 Debugger
      • 日志视图
      • 应用体积工具
      • DevTools 扩展工具
      • 验证深层链接 (Deep Link)
      • 发布日志
    • SDK 概览
    • Flutter pubspec 选项
    • 自动修复
    • 代码格式化
    • Flutter 架构概览
    • Flutter 工作原理
    • 理解布局约束
    • Flutter 构建模式
    • 热重载
    • 常见问题解答
    • 相关书籍
    • 相关视频
    • 相关课程
    • 学习 Dart
    • 获取支持和帮助
      • 创建有效的 Bug 报告
      • 为 Flutter 做出贡献open_in_new
      • 了解提议的功能
      • 了解 Dash
      • Flutter Widget 列表
      • 创建新的应用
      • Flutter CLI 命令行文档
      • Flutter API 文档open_in_new

Effects

  1. 实用教程 chevron_right
  2. Effects
  • 创建一个带进度条的下载按钮
  • 创建一个可拖放的 UI 组件
  • 创建一个点击展开的 FAB
  • 创建一个渐变色的对话气泡
  • 创建一个嵌套导航
  • 创建一个视差滚动效果
  • 创建一个微光加载效果
  • 创建一个「正在输入」指示器效果
  • 创建一个交错效果的侧边栏菜单
本页内容对你有帮助吗?
感谢你的反馈!
feedback 提供详细信息
感谢你的反馈!欢迎告诉我们该如何改进。
bug_report 提供详细信息

除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-04-04。 查看文档源码 或者 为本页面内容提出建议.

Flutter logo
引用中文内容需注明本站及链接作为出处,英文内容和示例代码均遵从源站授权协议。
  • 使用条款
  • 品牌指南
  • 隐私权说明
  • 安全性