07f7eef2ec5e263d8de0719431718bf1.png

基础组件

布局组件

布局组件指 MultiChildRenderObjectWidget 的子类或(包含) 的 Widget

布局总结通常用于将功能UI切割成一个个小模块进行管理，不同的布局组件拥有不同的布局特性

线性布局

Row 进行水平布局

Column 进行垂直布局

弹性布局

Flex 运行子组件按照比例分配父容器空间

流式布局

Wrap 和 Flow 允许内容溢出部分换行 Wrap 最为常用，Flow 更复杂性能也更高

参考 css float

层叠布局

Stack 和 Positioned 实现元素定位，前者确定位置，后者允许重叠

参考 css postion

对其与相对定位

Align 内容对齐方式，参考 css content-align

Alignment 内容偏移位置

FractionalOffset 是 Alignment 的补充

Center

居中效果

容器组件

布局和容器都作用于其子 Widget

布局作用于绘制位置，容器作用于对其本身展现效果补充

填充

Padding 添加空白

尺寸限制

ConstrainedBox 添加尺寸的额外约束

装饰容器

DecoratedBox 前后绘制（背景、边框、渐变等）

变换

Transform 角度转换（平移、旋转、缩放）

参考 css transform

容器

组件（基础组件、布局组件、容器组件）行为的整合

参考 css div

菜单

Scaffold 菜单

AppBar 导航

TabBarView 导航所属内容

裁剪

Clip 沿边修整

参考 css border-radius

可滚动组件

功能性组件

未完待续...

以上仅代表前端开发视角理解，在后续具体应用中会细化每个功能点释义

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter 框架跨平台鸿蒙开发 - 实时蔬菜价格查询：智能掌握菜价动态

实时蔬菜价格查询是一款专为居民日常买菜打造的Flutter应用，提供多城市蔬菜价格实时查询、分类统计和价格趋势分析功能。通过智能搜索和数据可视化，让用户轻松掌握菜价动态，合理安排采购计划。运行效果图模型字段说明：计算属性：蔬菜分类与颜色映射：数据生成特点：批发市场列表：筛选条件：筛选流程：刷新逻辑：三个页面：IndexedStack使用：IndexedStack的优势：支持城市（15个）：设计特点

avatar 开源鸿蒙跨平台开发者社区

Flutter 框架跨平台鸿蒙开发 - 免费少儿故事播放：陪伴孩子快乐成长

const Row(Text('故事简介',),],),Text(),],),),const Row(Text('故事标签',),],),Wrap(),],),),简介和标签故事简介文本标签Chip展示Wrap自动换行布局分类主题色fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fi

avatar 开源鸿蒙跨平台开发者社区

Flutter 框架跨平台鸿蒙开发 - 实时潮汐查询：智能预测潮汐时间

CustomPainter是Flutter中用于自定义绘制的强大工具。基本用法@override// 绘制逻辑@override// 使用Canvas常用方法drawLine：绘制直线drawCircle：绘制圆形drawPath：绘制路径drawRect：绘制矩形drawText：绘制文本Paint属性color：颜色：线宽style：样式（填充/描边）使用场景图表绘制自定义形状动画效果数据可视

avatar 开源鸿蒙跨平台开发者社区