专业的编程技术博客社区

网站首页 > 博客文章 正文

flutter软件开发笔记25-内置组件总结

baijin 2025-05-23 15:15:15 博客文章 2 ℃ 0 评论

以下是 Flutter 内置的核心 UI 组件分类及常用组件列表,方便你系统化学习和掌握:


1. 基础组件

组件名

说明

Text

显示文本,支持样式、换行和富文本(TextSpan)

Icon

显示 Material 或 Cupertino 风格的图标(支持自定义图标库)

Image

加载本地/网络图片,支持缩放和裁剪(AssetImage / NetworkImage)

Container

多功能容器,可设置尺寸、边距、背景色、边框等

SizedBox

固定尺寸的盒子,常用于占位或强制子组件大小

Padding

为子组件添加内边距


2. 布局类组件

组件名

说明

Row / Column

水平/垂直排列子组件(通过 MainAxisAlignment 控制对齐方式)

Stack

层叠布局(结合 Positioned 定位子组件)

ListView

可滚动的列表布局(支持懒加载,适用于长列表)

GridView

网格布局(GridView.count 按列数生成,GridView.extent 按最大宽度)

Flexible / Expanded

配合 Row/Column 分配剩余空间(权重布局)

Wrap

流式布局,自动换行

Table

表格布局,通过 TableRow 定义行


3. 交互类组件

组件名

说明

GestureDetector

手势识别(点击、长按、滑动等)

InkWell

Material 风格的可点击区域(带水波纹效果)

Dismissible

支持滑动删除的组件

Draggable / DragTarget

实现拖拽交互


4. 表单类组件

组件名

说明

TextField

文本输入框(支持焦点控制、键盘类型、输入校验)

Checkbox / Switch

复选框和开关组件

Radio

单选按钮

Slider

滑动选择器

DropdownButton

下拉选择框

Form / FormField

表单容器,统一管理多个输入字段的验证和提交


5. Material Design 组件

组件名

说明

AppBar

顶部导航栏(支持标题、按钮、TabBar 集成)

FloatingActionButton

悬浮按钮(常用作主操作按钮)

Card

卡片式容器(圆角阴影效果)

BottomNavigationBar

底部导航栏

SnackBar

底部轻量级提示信息

Drawer

侧边抽屉菜单

AlertDialog

弹窗对话框(确认/取消操作)


6. Cupertino (iOS 风格) 组件

组件名

说明

CupertinoButton

iOS 风格按钮

CupertinoPicker

iOS 滚轮选择器

CupertinoAlertDialog

iOS 风格弹窗

CupertinoTabBar

iOS 底部标签栏


7. 动画与绘制

组件名

说明

AnimatedContainer

支持属性变化自动过渡动画的容器

Hero

实现页面间共享元素的转场动画

CustomPaint

自定义绘制(通过 Canvas 和 Paint 实现复杂图形)

ClipRRect

圆角裁剪(或其他形状裁剪如 ClipOval / ClipPath)


8. 高级组件

组件名

说明

FutureBuilder

异步数据加载时动态构建 UI(如网络请求)

StreamBuilder

响应式数据流构建 UI

PageView

分页滚动视图(常用于轮播图)

SliverAppBar

可折叠的 AppBar(配合 CustomScrollView 使用)


学习建议

  1. 按场景学习:根据需求选择对应分类的组件(如布局→Row/Column,表单→TextField)。
  2. 官方文档:在 Flutter Widget Catalog 查看详细 API 和示例代码。
  3. 组合使用:大部分复杂 UI 通过组合基础组件实现(如 ListView + Card 制作列表)。
  4. 性能优化:滚动组件(如 ListView.builder)使用懒加载避免内存溢出。

掌握这些核心组件后,可覆盖 90% 的常见 UI 开发需求!

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表