
1. **装饰器**Entry页面入口 ComponentUI组件缺一不可才能正常显示页面。 2. **结构**struct定义页面build()是页面渲染唯一入口。 3. **布局**Column垂直摆放控件.height(100%)让布局占满全屏。 4. **控件**Button创建按钮链式方法统一设置宽高、文字大小、背景色、圆角。 5. **区分设计**确认蓝、取消灰、删除红删除按钮圆角更大区分危险操作。 6. **单位**数字默认vp自适应屏幕颜色用0xRRGGBB十六进制写法。装饰器位置不能写错Entry、Component必须写在对应struct上方写在下方会报错图上方的空 struct 是无效代码。布局容器用法Column({space:30})垂直布局内部控件上下间距 30.width(100%)占满屏幕宽度.justifyContent(FlexAlign.Center)垂直居中.alignItems(HorizontalAlign.Center)水平居中Row()水平布局内部控件左右并排。按钮通用样式链式设置宽、高、背景色、字号、圆角不同功能用区分色蓝色确认、灰色取消、红色删除。二、页面效果外层 Column 全屏宽整体屏幕居中按钮上下间隔 30第二个取消按钮放在 Row 里实现横向布局。布局嵌套逻辑外层Column({space:30})垂直布局内部嵌套Row()横向容器取消、删除按钮放在同一个 Row 里左右并排和上方单独的确认按钮上下分隔 30 间距。全局居中属性Column.width(100%)/.height(100%)占满全屏宽高.justifyContent(FlexAlign.Center)内部元素垂直居中.alignItems(HorizontalAlign.Center)内部元素水平居中删除按钮样式宽 140、高 50红色背景标识危险操作大圆角 18和取消按钮尺寸统一。代码易错点Entry、Component必须紧贴对应 struct 上方图下方TextDemo是另一个独立页面组件和上方ButtonDemo1互不干扰。整体效果三个按钮整体在屏幕正中间顶部蓝色确认按钮单独一行下方灰色取消、红色删除按钮并排一行两行按钮上下间隔 30。