Flutter 组件索引表，看看你有几个不知道！

Flutter 组件索引表

前言

原文 Flutter开发指南：了解各种UI组件

本文深入探讨Flutter中的各种组件，帮助开发者理解如何利用这些组件提升用户界面设计和开发效率。

参考

1. 基础组件

Text - 显示一段带样式的文本。
Row -- 水平排列子组件。
Column -- 垂直排列子组件。
Container -- 一个带有内边距、外边距和装饰的盒子。
Center -- 用于将其子组件居中显示。
Padding -- 为子组件添加内边距。
Align -- 在自身内部对齐子组件。
Expanded -- 扩展子组件以填满可用空间。
Flexible -- 允许子组件灵活调整大小。
SizedBox -- 一个具有固定尺寸的盒子。
Spacer -- 在弹性容器中占据空间。
AspectRatio -- 强制使用特定的宽高比。
ConstrainedBox -- 施加尺寸约束。
Baseline -- 按照子元素的基线对齐。
FittedBox -- 缩放并定位其子组件。
FractionallySizedBox -- 按父级比例调整子组件大小。
IntrinsicHeight / IntrinsicWidth -- 强制子元素使用内在尺寸。
LimitedBox -- 在无约束时限制大小。
Offstage -- 隐藏子组件但不移除它。
OverflowBox -- 允许子组件超出父组件的边界。
Transform -- 对其子元素应用变换。

2. 布局组件

ListView -- 可滚动的组件列表。
GridView -- 可滚动的控件网格。
Stack -- 重叠显示子组件。
IndexedStack -- 显示堆栈中的一个子元素。
Flow -- 使用流式逻辑的自定义布局。
Table -- 以表格形式排列子组件。
Wrap -- 如果需要，将子元素换行显示到下一行。
ListBody -- 以线性方式排列子组件。
CustomScrollView -- 可自定义的可滚动区域。
SliverList -- 在 CustomScrollView 内的可滚动列表。
SliverGrid -- 在 CustomScrollView 内部的可滚动网格。
SliverAppBar -- 可折叠的应用栏。
SliverToBoxAdapter -- 将非 Sliver 组件包装成 Sliver。
SliverPadding -- 在 Sliver 中添加内边距。
SliverFillRemaining -- 填充剩余的滚动空间。
LayoutBuilder -- 根据父级约束条件构建组件。
SingleChildScrollView -- 可滚动的单子级容器。
SafeArea -- 避开系统 UI 区域（刘海、状态栏）。

3. Material 和 Cupertino 小部件

MaterialApp -- 设置一个 Material Design 应用程序。
Scaffold -- 基本的 Material Design 布局结构。
AppBar - 顶部应用栏，包含标题/操作按钮。
BottomNavigationBar -- 底部标签导航。
TabBar / TabBarView -- 基于标签页的导航。
Drawer -- 侧边导航面板。
FloatingActionButton -- 用于主要操作的圆形按钮。
SnackBar -- 屏幕底部的临时消息。
BottomSheet -- 从底部向上滑动弹出。
Card - 具有阴影效果的 Material Design 卡片。
Chip - 紧凑型元素（例如，筛选标签）。
Divider -- 一条细水平线。
ListTile -- 一个固定高度的行（用于列表）。
Stepper -- 多步骤表单组件。
DataTable -- 以行和列的形式显示数据。
CheckboxListTile -- 带复选框的列表项。
RadioListTile -- 带单选按钮的列表项。
SwitchListTile -- 带开关的列表项。
ExpansionTile -- 可展开的列表项。
CupertinoApp -- iOS 风格的应用结构。
CupertinoButton -- iOS 风格按钮。
CupertinoPicker -- iOS 风格的旋转选择器。
CupertinoSlider -- iOS 风格的滑动条。
CupertinoSwitch -- iOS 风格的切换开关。
CupertinoTabBar -- iOS 风格的底部标签栏。
CupertinoTextField -- iOS 风格的文本输入。

4. 按钮与输入框

ElevatedButton -- Material Design 浮动按钮。
TextButton -- 扁平文本按钮。
OutlinedButton -- 带轮廓的按钮。
IconButton - 带图标的按钮。
DropdownButton -- 显示一个下拉菜单。
PopupMenuButton -- 显示一个弹出菜单。
ButtonBar -- 在一行中排列按钮组。
RawMaterialButton -- 可自定义的底层按钮。
Checkbox -- 可切换的复选框。
Radio -- 单选按钮。
Slider - 可调节的值选择器。
Switch -- 切换开关。
TextField - 单行文本输入。
TextFormField -- 表单兼容的文本输入。
Form -- 管理表单状态和验证。
RichText -- 支持多种样式的文本。
GestureDetector -- 用于检测点击、滑动等手势操作。
InkWell -- 点击时显示材质设计水波纹效果。
Dismissible -- 可以向侧滑动移除。

5. 图像与图标

Image - 用于显示图片。
Icon - 显示一个 Material/Cupertino 图标。
CircleAvatar - 圆形图像/图标。
FadeInImage -- 带有淡入效果的图片。
NetworkImage -- 从 URL 加载图像。
AssetImage -- 从资源中加载图片。
RawImage -- 低层级的图像显示。
ImageIcon - 显示来自图像的图标。
Placeholder -- 一个代表“待加载”内容的占位框。

6. 动画与动态效果

AnimatedContainer -- 对尺寸/颜色变化进行动画处理。
AnimatedCrossFade -- 在两个子组件之间进行交叉渐变。
AnimatedOpacity -- 动画化不透明度的变化。
AnimatedSize -- 动画化尺寸变化。
AnimatedPositioned -- 在 Stack 中对位置进行动画处理。
AnimatedAlign -- 动画显示对齐方式的变化。
AnimatedBuilder -- 自定义动画构建器。
Hero -- 屏幕之间的平滑过渡。
TweenAnimationBuilder -- 在两个值之间进行动画过渡。
SlideTransition -- 实现组件的滑动进入/退出效果。
ScaleTransition -- 用于放大/缩小一个组件。
RotationTransition -- 旋转一个组件。
FadeTransition -- 实现小部件的淡入/淡出效果。
AnimatedList -- 动态地为列表变化添加动画效果。
AnimatedSwitcher -- 带动画地在组件之间切换。

7. 导航与路由

Navigator - 管理页面导航。
MaterialPageRoute - 标准的 Material 页面过渡效果。
PageView -- 可滚动的页面。
TabController - 控制标签页切换。
WillPopScope -- 拦截返回按钮点击事件。
RouteObserver -- 监听路由变化。

8. 对话框和提示

AlertDialog -- 带有标题/内容/操作的弹出对话框。
SimpleDialog -- 带有一系列选项的对话框。
Dialog - 基础对话框容器。
CupertinoAlertDialog -- iOS 风格的弹窗。
ModalBottomSheet -- 从底部滑动弹出。
AboutDialog -- 显示应用信息。
TimePickerDialog - 让用户选择时间。
DatePickerDialog -- 让用户选择日期。

9. 状态管理组件

StatefulBuilder -- 重建部件树的某一部分。
InheritedWidget -- 用于在组件树中向下共享数据。
Provider -- 简单的状态管理。
Consumer - 侦听 Provider 的变化。
Selector -- 仅在需要时重新构建。
ChangeNotifierProvider -- 用于管理可变状态。
FutureProvider -- 提供一个 Future 值。
StreamProvider -- 提供一个 Stream 值。
ValueListenableBuilder -- 监听 ValueListenable。
StreamBuilder -- 从 Stream 构建组件。
FutureBuilder -- 通过 Future 构建组件。

10. 样式与主题

Theme -- 为后代元素应用主题。
MediaQuery -- 用于访问屏幕尺寸/方向。
DefaultTextStyle -- 为后代文本设置默认样式。
CustomPaint -- 使用 Canvas 进行自定义绘制。
ClipRRect -- 用圆角裁剪。
ClipOval -- 裁剪为椭圆形。
ClipPath -- 自定义形状裁剪。
DecoratedBox -- 应用装饰效果（例如渐变）。
RotatedBox -- 以 90° 为增量旋转子组件。
BackdropFilter -- 应用模糊/滤镜效果。
ShaderMask -- 应用着色器效果。
PhysicalModel -- 添加逼真的阴影效果。
Material -- Material Design 界面。

11. 无障碍功能

Semantics -- 添加辅助功能标签。
ExcludeSemantics -- 移除子组件的语义信息。
MergeSemantics -- 合并后代组件的语义信息。
Tooltip -- 长按显示提示信息。

12. 高级 UI 组件

ReorderableListView -- 可拖动重新排序的列表。
Draggable / DragTarget -- 支持拖放功能。
LongPressDraggable -- 长按后可拖动。
InteractiveViewer -- 支持缩放/平移手势。
IgnorePointer -- 忽略触摸事件。
AbsorbPointer -- 拦截触摸事件。
Opacity -- 使子组件部分透明。
Visibility -- 显示或隐藏子组件。
SelectableText -- 可被选中/复制的文本。

13. 测试与调试

GoldenFileComparator -- 将 UI 与黄金文件进行比较。
TestWidgetsFlutterBinding -- 测试框架设置。

14. 其他与工具组件

Builder - 提供一个构建上下文。
PageStorage -- 保存/恢复滚动位置。
NotificationListener -- 监听滚动事件。
KeepAlive -- 防止屏幕外小部件被销毁。
Autocomplete -- 文本输入的自动建议。
RefreshIndicator -- 下拉刷新模式。

15. 流行的包组件

SvgPicture（flutter_svg）-- 用于渲染 SVG 图像。
CachedNetworkImage（cached_network_image）-- 缓存网络图片。
BlocBuilder（flutter_bloc）-- 根据 BLoC 状态构建 UI。
CarouselSlider (carousel_slider) -- 图片轮播组件。
FlutterMap (flutter_map) -- 交互式地图。

小结

Flutter是一款强大的跨平台开发框架，其丰富的组件库使开发者能够轻松创建精美的用户界面。通过掌握Flutter的各种组件，开发者不仅能提升应用的用户体验，还能显著提高开发效率。本文将帮助你深入理解Flutter组件的特性和应用，助力你的开发之旅。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end