鸿蒙开发之android开发指南《基础组件》

同android开发一样,华为鸿蒙官方也提供了很多基础组件,下面介绍几种容器组件和常用基础组件的使用方式。

一、容器组件

鸿蒙组件 描述
Column 沿垂直方向布局的容器
Row 沿水平方向布局容器
RelativeContainer 相对约束布局容器组件
Flex 以弹性方式布局子组件的容器组件
Grid 网格容器组件
GridRow 栅格容器组件
List 沿水平方向布局容器组件
Tabs 标签页容器组件

1.Column&Row 排列容器组件

Column竖向排列容器组件,等同于竖向的LinerLayout。Row横向排列的容器组件,等同于横向的LinerLayou。使用方法如下:

scss 复制代码
Column() {
  Text("1")
  ...
  Text("2")
  ...
  Text("")
  ...
}
scss 复制代码
Row() {
  Text("1")
  ...
  Text("2")
  ...
  Text("3")
  ...
}

关键属性:

属性名称 作用 描述
justifyContent 设置子组件在主轴方向上的对齐格式 Colmun-FlexAlign属性参考Row-VerticalAlign属性参考
alignItems 设置子组件在交叉轴方向上的对齐格 Column-HorizontalAlign属性参考Row-VerticAlalig属性参考

2.RelativeContainer 相对布局容器组件

RleativeContainer相当于android中的RelativeLayout,使用方式如下:

less 复制代码
RelativeContainer() {
  Text("1")
    .fontSize(32)
    .fontColor(Color.White)
    .alignRules({
      top: { anchor: "__container__", align: VerticalAlign.Top },
      left: { anchor: "__container__", align: HorizontalAlign.Start }
    })
    .id("one_txt")
    .width(50)
    .height(50)
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Green)

  Text("2")
    .fontSize(32)
    .fontColor(Color.White)
    .alignRules({
      top: { anchor: "one_txt", align: VerticalAlign.Top },
      left: { anchor: "one_txt", align: HorizontalAlign.End }
    })
    .id("two_txt")
    .width(50)
    .height(50)
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Red)
  Text("3")
    .fontSize(32)
    .fontColor(Color.White)
    .alignRules({
      top: { anchor: "two_txt", align: VerticalAlign.Bottom },
      left: { anchor: "one_txt", align: HorizontalAlign.End }
    })
    .id("three_txt")
    .width(50)
    .height(50)
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Blue)

}.width("100%").height("100%")

首先需要给子组件设置"id",然后通过"alignRules"定义规则,"anchor"锚点。详细规则见官网

3.List 列表组件

List列表展示组件,同Listview,List组件包含两种子组件ListItemListItemGroup,下面是List的简单使用:

scss 复制代码
@Component
export struct ListUi {
  @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .border({ width: 2, color: Color.Green })
        }, item => item)
      }
      .height("100%")
      .width("100%")
      .padding(20)
    }
  }
}

关键属性和接口:

属性或者接口名称 描述
ListDirection(..) 排列方向(竖向Axis.Vertical、横向Axis.Horizontal)
space 子控件主方向上的间隔
initialIndex 设置当前List初次加载时视口起始位置显示的item的索引值
scroller 可滚动组件的控制器。用于与可滚动组件进行绑定
divider 设置ListItem分割线样式,默认无分割线
cachedCount 设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来
lanes9+ api 9新增,以列模式为例(listDirection为Axis.Vertical),lanes用于决定List组件在交叉轴方向按几列布局。
onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) 滚动事件监听
其它参考官方文档

4.Grid 网格组件

Grid网格布局组件,同GridView,简单使用方式如下:

scss 复制代码
@State Number: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']

build() {
  Grid() {
    ForEach(this.Number, (day: string) => {
      GridItem() {
        Text(day)
          .fontSize(16)
          .backgroundColor(0xF9CF93)
          .width('20%')
          .height(100)
          .textAlign(TextAlign.Center)
      }
    }, day => day)
  }
  .width('100%')
  .backgroundColor(Color.White)
  .height('100%')
}

关键属性和接口:

属性或接口名称 描述
columnsTemplate 设置当前网格布局列的数量,不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。
rowsTemplate 设置当前网格布局行的数量,不设置时默认1行。例如,'1fr 1fr 2fr'是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。
columnsGap 设置列与列的间距
rowsGap 设置行与行的间距
GridDirection 沿主轴布局方向

还有很多api,参考官网

二、常用基础组件

android组件 鸿蒙组件 描述
TextView Text 用于文本显示
EditText TextInput 用于文本文本输入
Button Button 用于点击按钮
ImageView Image 图片显示

1.Text 文本显示控件

同TextView,主要用于文本显示,简单使用方式如下:

scss 复制代码
Text("文本显示控件 超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长")
  .fontColor(Color.Green)
  .fontSize(24)
  .width("100%")
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

关键属性:

名称 描述
textAlign 设置文本段落在水平方向的对齐方式默认值:TextAlign.Start
textOverflow 设置文本超长时的显示方式。默认值:{overflow: TextOverflow.Clip}
maxLines 设置文本的最大行数
lineHeight 设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时单位为fp
decoration 设置文本装饰线样式及其颜色
letterSpacing 设置文本字符间距
minFontSize 设置文本最小显示字号
maxFontSize 设置文本最大显示字号

2.TextInput 文本输入控件

同EditText,文本输入控件,简单使用如下:

scss 复制代码
TextInput({ placeholder: '请输入密码' })
  .width(400)
  .height(40)
  .margin(20)
  .type(InputType.Password)
  .maxLength(9)
  .showPasswordIcon(true)

关键属性:

名称 描述
type 设置输入框类型(密码、数字、邮箱等)
placeholderColor 设置placeholder文本颜色
placeholderFont 设置placeholder文本样式
enterKeyType 设置输入法回车键类型,目前仅支持默认类型显示
caretColor 设置输入框光标颜色
maxLength 设置文本的最大输入字符数
inputFilter8+ 正则表达式,匹配表达式的输入允许显示,不匹配的输入将被过滤。目前仅支持单个字符匹配,不支持字符串匹配
textAlign9+ 设置输入文本在输入框中的对齐方式
onChange(callback: (value: string) => void) 输入内容发生变化时,触发该回调
onSubmit(callback: (enterKey: EnterKeyType) => void) 按下输入法回车键触发该回调,返回值为当前输入法回车键的类型
onEditChange(callback: (isEditing: boolean) => void)8+ 输入状态变化时,触发该回调

3.Button 按钮控件

Button常见的按钮点击控件,使用方法如下:

scss 复制代码
Button('OK', { type: ButtonType.Normal, stateEffect: true })
  .borderRadius(8)
  .backgroundColor(0x317aff)
  .width(90)
  .onClick(() => {
    console.log('click ok')
  })
  .margin({ top: 20, left: 20 })

Button({ type: ButtonType.Circle, stateEffect: true }) {
  LoadingProgress().width(20).height(20).color(0xFFFFFF)
}.width(55).height(55).backgroundColor(0x317aff).margin({ top: 20 })

Button({ type: ButtonType.Circle, stateEffect: true }) {
  LoadingProgress().width(20).height(20).color(0xFFFFFF)
}.width(55).height(55).margin({ top: 20 }).backgroundColor(0xF55A42)

关键属性:

名称 描述
type 按钮显示样式(胶囊样式、圆、普通样式)
stateEffect 按钮按下时是否开启按压态显示效果
onClick() 点击事件

4.Image 图片加载控件

Image同ImageView,用于图片展示,支持png、jpg、bmp、svg和gif类型的图片格式。下面加载图片和网络图片案例:

scss 复制代码
Image($r('app.media.test_bg')).width(400).width(400)
Text("本地图片").width("100%").textAlign(TextAlign.Center).fontSize(22).fontColor(Color.Black).margin({top:20})

Image("https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500").width(400).width(400).margin({top:40})
Text("网络图片").width("100%").textAlign(TextAlign.Center).fontSize(22).fontColor(Color.Black).margin({top:20})

注意网络图片需要在module.json里面配置网络权限:ohos.permission.INTERNET

关键属性:

名称 描述
alt 加载时显示的占位图,支持本地图片(png、jpg、bmp、svg和gif类型),不支持网络图片
objectFit 设置图片的填充效果。
fitOriginalSize 图片组件尺寸未设置时,显示尺寸是否跟随图源尺寸
autoResize 设置图片解码过程中是否对图源自动缩放。设置为true时,组件会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。
onComplete 加载完成事件
onError 加载失败事件
相关推荐
一个处女座的程序猿O(∩_∩)O28 分钟前
开源鸿蒙 5.0 正式版发布
华为·harmonyos
程序猿会指北1 小时前
【鸿蒙(HarmonyOS)性能优化指南】内存分析器Allocation Profiler
性能优化·移动开发·harmonyos·openharmony·arkui·组件化·鸿蒙开发
程序猿会指北4 小时前
【鸿蒙(HarmonyOS)性能优化指南】启动分析工具Launch Profiler
c++·性能优化·harmonyos·openharmony·arkui·启动优化·鸿蒙开发
鸿蒙程序媛4 小时前
2024最新鸿蒙开发面试题合集-HarmonyOS NEXT Release(API 12 Release)
harmonyos·harmonyos面试题
轻口味5 小时前
【每日学点鸿蒙知识】DevEco、HDC报错、C调用数据库、测试工具、codegen
数据库·华为·harmonyos
沈剑心15 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
Georgewu15 小时前
【HarmonyOS】鸿蒙应用加载读取csv文件
前端·harmonyos
Georgewu16 小时前
【HarmonyOS】 鸿蒙图片或视频保存相册
前端·harmonyos
川石教育21 小时前
鸿蒙开发-ArkTS 中使用 filter 组件
harmonyos·鸿蒙·鸿蒙应用开发·鸿蒙开发·鸿蒙开发培训·arkts语言
李洋-蛟龙腾飞公司1 天前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据权限与基础数据
分布式·华为·harmonyos