Flutter 常用组件
·
Flutter 常用组件
1. 页面结构
| Flutter | 前端类比 | 说明 |
|---|---|---|
| Scaffold | <Layout> | 页面骨架，包含 appBar、body、drawer、bottomNavigationBar 等 |
| AppBar | <header> | 顶部导航栏 |
| Drawer | 侧边菜单 | 从左侧/右侧划出的抽屉菜单 |
| BottomNavigationBar | <nav> 底部菜单 | 底部导航栏 |
| TabBar / TabBarView | Tabs 组件 | 标签页切换 |
2. 布局组件
| Flutter | 前端类比 | 说明 |
|---|---|---|
| Container | <div> | 通用容器，可加 padding/margin/border/背景色 |
| Row | display:flex; flex-direction:row | 水平布局 |
| Column | display:flex; flex-direction:column | 垂直布局 |
| Stack | position:absolute 叠加 | 层叠布局（子组件可覆盖） |
| Expanded | flex:1 | 在 Row/Column 里自适应剩余空间 |
| SizedBox | <div style="width:100;height:50"> | 固定宽高，或作为间隔 |
| Center | text-align:center | 居中容器 |
| Align | align-self / align-items | 对齐控制 |
3. 文本与样式
| Flutter | 前端类比 | 说明 |
|---|---|---|
| Text | <p> / <span> | 显示文字 |
| RichText | <span><b>..</b></span> | 富文本，支持多种样式 |
| DefaultTextStyle | 全局 CSS | 为子组件设置统一文字样式 |
4. 按钮
| Flutter | 前端类比 | 说明 |
|---|---|---|
| ElevatedButton | <button>（默认样式） | 带阴影的按钮（Material Design 推荐） |
| TextButton | <a> / 文字按钮 | 没有边框背景的按钮 |
| OutlinedButton | <button class="outlined"> | 带边框按钮 |
| IconButton | 图标按钮 | 只有图标，没有文字 |
| FloatingActionButton | 悬浮按钮 | 页面右下角圆形按钮 |
5. 输入 & 表单
| Flutter | 前端类比 | 说明 |
|---|---|---|
| TextField | <input type="text"> | 输入框 |
| Checkbox | <input type="checkbox"> | 复选框 |
| Radio | <input type="radio"> | 单选框 |
| Switch | <input type="checkbox" role="switch"> | 开关按钮 |
| DropdownButton | <select> | 下拉选择 |
| Slider | <input type="range"> | 滑动条 |
6. 图片 & 图标
| Flutter | 前端类比 | 说明 |
|---|---|---|
| Image | <img> | 显示图片（支持网络、本地、内存） |
| Icon | <i> / SVG | 内置 Material Icons |
| CircleAvatar | <img style="border-radius:50%"> | 圆形头像 |
7. 列表 & 网格
| Flutter | 前端类比 | 说明 |
|---|---|---|
| ListView | <ul> + 滚动 | 可滚动列表 |
| GridView | display:grid | 网格布局 |
| ListTile | <li>（带图标/标题/副标题） | 列表项 |
| Card | <div class="card"> | 卡片式容器 |
8. 动效 & 交互
| Flutter | 前端类比 | 说明 |
|---|---|---|
| GestureDetector | onClick / onTap | 手势识别（点击、长按、滑动等） |
| InkWell | <a> hover/click 效果 | 带水波纹点击效果的组件 |
| AnimatedContainer | CSS transition | 自动动画过渡 |
| Hero | 页面切换动画 | 页面间共享元素过渡 |
9. 弹窗 & 提示
| Flutter | 前端类比 | 说明 |
|---|---|---|
| AlertDialog | alert() / <dialog> | 弹出提示框 |
| SnackBar | Toast/消息条 | 页面底部消息提示 |
| BottomSheet | 抽屉/模态框 | 从底部滑出的面板 |
🔑 总结
- Scaffold：页面骨架
- Row/Column/Stack：布局核心
- Text/Image/Icon：内容展示
- Button/TextField：交互表单
- ListView/GridView：列表数据
- Dialog/SnackBar：弹窗提示
👉 一句话：
学会 Scaffold、Row、Column、Container、Text、ListView、Button、TextField，你就能写出 80% 的 Flutter 页面。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
20
0- 0
已为社区贡献1条内容
所有评论(0)