HarmonyOS ArkUI 基础类组件

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) // 外边距
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容