ArkTS 通用样式属性总结
1. 宽/高 width /height页面常用width(100%)铺满屏幕按钮、输入框常规高50头像多用正方形100×100/120×120。实例.width(120).height(120) .width(90%).height(50) .width(100%).height(100%)2. 颜色backgroundColor背景色、fontColor文字色系统色Color.Red、Color.Transparent透明十六进制色0x999999、0xf53f3f实例TextInput({ placeholder: 用户名: }) .width(90%) .height(50) .backgroundColor(0xf773) .fontColor(Color.Black)3. 间距padding组件内部留白margin组件与外部间距 Column 的space可统一子元素间距实例.padding(40)4. 圆角 borderRadius按钮圆角8~12卡片12~16圆形头像圆角设为宽高一半你代码多用大圆角。实例.borderRadius(60)5. 边框 border.border({width:1,color:色值})设置边框粗细与颜色。实例.border({width:1,color:0xcccccc})6. 阴影 shadow给卡片、按钮增加立体凹凸层次感。实例.shadow({radius:50,color:Color.Yellow})7. 透明度 opacity取值0~10 完全透明1 完全不透明。实例.opacity(0.9)8. 图片适配 objectFitImage 专用Cover铺满裁剪Contain完整显示留边实例.objectFit(ImageFit.Cover)9. 对齐文字居中textAlign布局整体居中用justifyContent、alignItems你绝大多数页面都用它居中排版。实现整体垂直 水平居中排版实例.justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)总结实例Entry Component struct zongjie { build() { Column({ space: 30 }) { Image($r(app.media.01)) .width(120) .height(120) .borderRadius(60) .objectFit(ImageFit.Cover) .shadow({radius:50,color:Color.Yellow}) Text(账号登录) .fontSize(26) .fontColor(0x25a9a9) .fontWeight(FontWeight.Bold) TextInput({ placeholder: 用户名: }) .width(90%) .height(50) .backgroundColor(0xf773) .fontColor(Color.Black) TextInput({ placeholder: 密码: }) .width(90%) .height(50) .type(InputType.Password) .backgroundColor(0xf773) .fontColor(Color.Black) Row({ space: 40 }) { Button(登录) .width(120) .height(50) .backgroundColor(0xf5f566) .fontColor(Color.Black) Button(注册) .width(120) .height(50) .backgroundColor(0xf5f566) .fontColor(Color.Black) } } .padding(40) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .width(100%) .height(100%) .backgroundColor(0xf5f59) } }
