flutter软件开发笔记29-flutter常用的UI部件总结

大家好，欢迎来到IT知识分享网。

学习flutter也有一段时间了，对常用UI部件，总有支离破碎的感觉，没有一个整体概念，说白了，用flutter开发软件，最基本不就是这些部件们的有机组合，不知道有哪些部件，也谈不上组装，没有一本书能全部列出这些部件，今天借助AI全部统计出来，一个个学习，加快对flutter的使用。

Flutter 提供了丰富的 UI 部件（Widget），涵盖了从基础元素到复杂交互组件的各种需求。以下是按功能分类的常用 UI 控件列表：

一、基础布局控件

• Container：容器控件，可设置宽高、边距、背景、边框等
• Row/Column：水平 / 垂直布局，类似 Flex 布局
• Stack：层叠布局，允许组件叠加显示
• Positioned：配合 Stack 使用，控制子组件的位置
• Expanded：在 Row/Column 中占满剩余空间
• Padding：仅用于设置内边距的控件
• Margin：仅用于设置外边距的控件（通常通过 Container 实现）
• Align：控制子组件的对齐方式（如居中、左对齐）
• Center：使子组件居中显示（Align 的简化版）
• AspectRatio：固定宽高比例的布局控件
• ConstrainedBox：限制子组件的最大 / 最小宽高
• SizedBox：固定大小的空白容器，也可用于限制子组件大小

二、基础 UI 控件

• Text：文本显示控件，支持字体、大小、颜色、样式等设置
• Image：图片显示控件，支持网络图片、本地资源、文件图片等Image.network()：加载网络图片Image.asset()：加载本地资源图片Image.file()：加载本地文件图片
• Icon：图标控件，支持 Material 内置图标和自定义图标
• Button 系列：ElevatedButton：带阴影的悬浮按钮TextButton：仅文本的按钮（无背景）OutlinedButton：带边框的按钮IconButton：图标按钮FloatingActionButton：悬浮按钮（常见于页面右下角）

三、输入与选择控件

• TextField：文本输入框，支持单行 / 多行输入、密码框、输入验证等
• TextFormField：带表单验证功能的输入框
• Checkbox：复选框（多选）
• Radio/RadioListTile：单选按钮（需配合组使用）
• Switch：开关控件（如启用 / 禁用功能）
• Slider：滑动条（用于选择数值范围，如音量调节）
• DropdownButton：下拉选择框
• DatePicker/TimePicker：日期 / 时间选择器（通过 showDatePicker 等方法调用）

四、列表与网格控件

• ListView：列表控件，支持垂直 / 水平滚动ListView.builder：懒加载列表（适合大量数据）ListView.separated：带分割线的列表
• GridView：网格布局控件GridView.count：指定列数的网格GridView.builder：懒加载网格
• ListTile：列表项控件，包含图标、标题、副标题等结构
• ExpansionTile：可展开 / 折叠的列表项（如折叠面板）
• DataTable：表格控件，用于展示结构化数据

五、导航与页面结构控件

• Scaffold：页面基础结构，包含 AppBar、底部导航、抽屉等
• AppBar：顶部导航栏，支持标题、菜单、返回按钮等
• BottomNavigationBar：底部导航栏（切换页面）
• Drawer：侧边栏抽屉（滑出式菜单）
• TabBar/TabBarView：标签页控件（如顶部选项卡切换内容）
• PageView：页面切换控件（支持左右滑动切换页面）
• Navigator：路由管理控件，用于页面跳转

六、交互与反馈控件

• InkWell：可点击控件，支持水波纹效果（常用于给无点击事件的组件添加点击）
• GestureDetector：手势检测控件，支持点击、双击、滑动、缩放、拖动等
• SnackBar：底部短暂提示（如操作成功提示）
• Dialog：对话框控件AlertDialog：警告对话框（带标题、内容、按钮）SimpleDialog：简单对话框（带选项列表）
• Toast：轻量级提示（需第三方库如 fluttertoast）
• Tooltip：长按 / 悬停时显示的提示文本（如图标说明）

七、装饰与动画控件

• DecoratedBox：装饰容器（可设置背景色、渐变、阴影等）
• AnimatedContainer：属性变化时自动过渡的容器（带动画）
• AnimatedOpacity：透明度变化动画控件
• Hero：页面间共享元素动画（如图片从一个页面平滑过渡到另一个页面）
• CircularProgressIndicator：圆形进度指示器
• LinearProgressIndicator：线性进度指示器
• Opacity：控制子组件透明度的控件

八、其他常用控件

• Divider：分割线控件
• Card：卡片控件（带阴影和圆角）
• Chip：标签控件（如筛选标签、标签选择）
• Wrap：流式布局控件（子组件超出一行时自动换行）
• AspectRatio：固定宽高比例的控件
• SafeArea：适配设备安全区域（如刘海屏、底部导航栏区域）

九、第三方 UI 控件库

除了官方控件，Flutter 生态还有许多成熟的第三方 UI 库，可快速实现复杂界面：

• Flutter Material Components：官方 Material Design 3 控件库
• Cupertino Widgets：iOS 风格的控件库
• GetX UI：基于 GetX 框架的轻量 UI 组件
• FlutterElevatedButton：扩展的按钮组件库
• FL Chart：图表控件库（折线图、柱状图等）

这些控件可以通过组合使用，构建出各种复杂且美观的界面。实际开发中，可根据需求选择合适的控件，并结合自定义组件封装复用逻辑。