Text 文字组件
Text('这是文本内容')
.fontSize(18) // 字体大小,单位为 fp
.fontColor('#333333') // 字体颜色
.fontWeight(FontWeight.Bold) // 字重(Normal、Medium、Bold 等)
.fontStyle(FontStyle.Italic) // 字体样式(正常/斜体)
.textAlign(TextAlign.Center) // 文本对齐方式(Start、Center、End)
.maxLines(2) // 最大显示行数,超出将省略显示
.lineHeight(24) // 行高
.decoration(TextDecoration.Underline) // 文本装饰(下划线 / 删除线等)
.letterSpacing(2) // 字符间距
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出处理方式:裁剪、省略号
.backgroundColor('#F0F0F0') // 背景色
.padding(8) // 内边距
.width('90%') // 宽度
Image 图片组件
Image($r('app.media.example')) // 使用资源文件(也可以用网络地址如 'https://...')
.width(100) // 宽度(支持 px 或百分比)
.height(100) // 高度
.fit(ImageFit.Cover) // 图片缩放填充方式(Contain / Cover / Fill / None / ScaleDown)
.borderRadius(10) // 圆角
.objectRepeat(ImageRepeat.NoRepeat) // 是否重复显示(Repeat / RepeatX / RepeatY / NoRepeat)
.interpolation(ImageInterpolation.Medium) // 插值算法(Low / Medium / High)
.renderMode(ImageRenderMode.Original) // 渲染模式(Original / Template)
.alt('加载失败显示的替代文本') // 图片加载失败时显示的替代说明
.backgroundColor('#EEEEEE') // 背景色
.margin(12) // 外边距
Divider 分割线组件
Divider()
.strokeWidth(1) // 分割线粗细
.color('#CCCCCC') // 分割线颜色
.margin({ top: 10, bottom: 10 }) // 上下边距
.lineCap(LineCapStyle.Square) // 线头样式(Butt、Round、Square)
.startMargin(20) // 分割线起始处的缩进(水平)
.endMargin(20) // 分割线结束处的缩进
Blank 空白占位组件
Blank()
.width(20) // 占位宽度
.height(40) // 占位高度
.backgroundColor('#F5F5F5') // 可选:设置背景色用于调试占位效果
.margin(8) // 外边距