探索HarmonyOS应用开发：常用组件与布局详解

发表时间: 2024-03-13 20:59

基础组件

Text

功能：用于显示文本内容。
属性：可以设置文本颜色、字体大小、字体样式、字体粗细和字体族。

参数名称	参数类型	描述
fontColor	ResourceColor	设置文本颜色。
fontSize	Length \| Resource	设置文本尺寸，Length为number类型时，使用fp单位。
fontStyle	FontStyle	设置文本的字体样式。默认值：FontStyle.Normal。
fontWeight	number \| FontWeight \| string	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。
fontFamily	string \| Resource	设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif”。

示例代码：

Text()  .fontColor(Color.Blue)  .fontSize(20)  .fontStyle(FontStyle.Italic)  .fontWeight(FontWeight.Bold)  .fontFamily('Arial')

Image

功能：用于显示图像。
属性：包括图像的缩放类型、背景颜色、宽度和高度。

参数名称	参数类型	描述
objectFit	ImageFit	设置图片的缩放类型。
backgroundColor	Color	设置图片的背景颜色。
width	Length	设置图片的宽度。
height	Length	设置图片的高度。

示例代码：

Image($r("app.media.image1"))  .objectFit(ImageFit.Cover)  .backgroundColor(0xCCCCCC)  .width(100)  .height(100)

TextInput

功能：用于接收用户输入的单行文本。
属性：可以设置文本样式、提示文本、输入类型、光标位置等。

功能	示例代码
基础TextInput设置	TextInput()
- 字体颜色	.fontColor(Color.Blue)
- 字体大小	.fontSize(20)
- 字体样式	.fontStyle(FontStyle.Italic)
- 字体粗细	.fontWeight(FontWeight.Bold)
- 字体族	.fontFamily('Arial')
输入提示文本设置	TextInput({ placeholder: '请输入帐号' })
- 提示文本颜色	.placeholderColor(0x999999)
- 提示文本样式	.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
输入框类型设置	TextInput({ placeholder: '请输入密码' }).type(InputType.Password)
- 输入类型	type 的参数类型为 InputType，包括 Normal、Password、Email 和 Number
设置光标位置	使用 TextInputController 动态设置光标位置，例如： this.controller.caretPosition(2)
获取输入文本	设置 onChange 事件，实时获取用户输入的文本信息，例如： TextInput().onChange((value: string) => { this.text = value })

示例代码

TextInput()  .fontColor(Color.Blue)  .fontSize(20)  .fontStyle(FontStyle.Italic)  .fontWeight(FontWeight.Bold)  .fontFamily('Arial')

Button

功能：用于响应点击操作，通常用于实现按钮。
属性：可以设置按钮样式、点击事件和包含子组件。

功能	示例代码
创建登录按钮	Button('登录', { type: ButtonType.Capsule, stateEffect: true })
- 按钮宽度	.width('90%')
- 按钮高度	.height(40)
- 字体大小	.fontSize(16)
- 字体粗细	.fontWeight(FontWeight.Medium)
- 背景颜色	.backgroundColor('#007DFF')
设置按钮样式	type 用于定义按钮样式，可以是 ButtonType.Capsule、ButtonType.Circle 或 ButtonType.Normal。stateEffect 用于设置按钮按下时是否开启切换效果。
设置按钮点击事件	绑定 onClick 事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。例如：.onClick(() => { // 处理点击事件逻辑 })
包含子组件	Button组件可以包含子组件，例如包含Image组件，使按钮更丰富多样。

示例代码：

Button('登录', { type: ButtonType.Capsule, stateEffect: true })  .width('90%')  .height(40)  .fontSize(16)  .fontWeight(FontWeight.Medium)  .backgroundColor('#007DFF')

LoadingProgress

功能：用于显示加载进度。
属性：可以设置加载进度的颜色、高度和宽度。

参数名称	参数类型	描述
color	Color	设置加载进度的颜色。
height	Length	设置加载进度的高度。
width	Length	设置加载进度的宽度。

示例代码：

LoadingProgress()  .color(Color.Blue)  .height(60)  .width(60)

基础容器

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供Column和Row容器组件，Column用于垂直布局，Row用于水平布局。

基本属性

容器组件中存在两根轴：主轴和交叉轴。它们始终相互垂直，但它们的方向取决于容器的类型。

主轴：在Column容器中，子组件按垂直方向从上到下排列，主轴方向是垂直的。在Row容器中，子组件按水平方向从左到右排列，主轴方向是水平的。
交叉轴：交叉轴与主轴垂直相交，如果主轴是垂直的，交叉轴就是水平的，反之亦然。

属性名称	描述
justifyContent	设置主轴上的对齐格式。
alignItems	设置交叉轴上的对齐格式。

主轴方向

对齐格式	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

Column

对齐格式	描述
Start	设置子组件在水平方向上按照起始端对齐。
Center (默认值)	设置子组件在水平方向上居中对齐。
End	设置子组件在水平方向上按照末端对齐。

Row

对齐格式	描述
Top	设置子组件在垂直方向上居顶部对齐。
Center (默认值)	设置子组件在垂直方向上居中对齐。
Bottom	设置子组件在垂直方向上居底部对齐。

示例代码

@Entry@Componentexport struct LoginPage {  build() {    Column() {      Image($r('app.media.logo'))        ...      Text($r('app.string.login_page'))        ...      Text($r('app.string.login_more'))        ...      TextInput({ placeholder: $r('app.string.account') })        ...      TextInput({ placeholder: $r('app.string.password') })        ...      Row() {        Text($r(…))         Text($r(…))       }      Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })        ...      Row() {        this.imageButton($r(…))        this.imageButton($r(…))        this.imageButton($r(…))      }      ...    }    ...  }}

列表容器

ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。

List组件

属性	描述
ForEach	用于遍历数组并生成列表项，减少代码冗余。
divider	用于自定义列表项之间的分割线，包括线宽、颜色和距离设置。
onScroll	用于监听列表滚动事件，提供滑动偏移量和当前滑动状态。
onScrollIndex	用于监听滑动时的起始位置和结束位置索引值。
onReachStart	用于监听列表到达起始位置的事件。
onReachEnd	用于监听列表到达底部末尾位置的事件。
onScrollStop	用于监听列表滑动停止的事件。
listDirection	用于设置列表项的排列方向，可以是垂直或水平。

Grid组件

属性	描述
ForEach	用于遍历数组并生成网格布局中的GridItem，可以减少重复代码。
columnsTemplate	用于指定网格的列布局，通过设置每列的宽度分配比例来定义列数和宽度。
rowsTemplate	用于指定网格的行布局，通过设置每行的高度分配比例来定义行数和高度。
columnsGap	用于设置列之间的间距。
rowsGap	用于设置行之间的间距。
onScrollIndex	用于监听滚动时的起始位置和结束位置索引值，可用于实现滚动监听。

Tabs组件

属性	描述
barPosition	设置页签位置，可以是BarPosition.Start或BarPosition.End。默认值是BarPosition.Start。
barWidth	设置TabBar的宽度。
barHeight	设置TabBar的高度。
barMode	设置Tabs的布局模式，可以是BarMode.Fixed或BarMode.Scrollable。默认值是BarMode.Fixed。
vertical	设置TabBar的排列方向，为true时纵向排列，为false时横向排列。默认值是false。
TabContent	子组件，每一个页签对应一个TabContent组件。
tabBar	用于设置TabBar的显示内容，可以是字符串或使用@Builder修饰的函数。
TabsController	控制页签切换和监听页签变化的控制器。
onChange	监听页签切换时的回调函数。

结语

无论是创建简单的文本标签还是实现复杂的按钮操作，HarmonyOS提供了强大的组件，以帮助您构建出色的用户界面。希望这些组件介绍能帮助您更好地理解和利用HarmonyOS的界面开发能力。