003 常用组件开发使用

目录

一.基础组件

Blank:填充控件

Button：按钮

ButtonType枚举说明

Text：文本显示

QRCode

二.常用布局

线性布局（Row和Column）

层叠布局

弹性布局（Flex）

---

一.基础组件

Blank:填充控件

这个是鸿蒙新增的Android开发中没有的组件，主要作用是空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。

1.使用方式

Blank(min?: number | string).color(color:ResourceColor)

min：空白填充组件在容器主轴上的最小大小。默认值：0。在父组件横向排列子组件时如果没有设置父组件的宽度并且没有设置min则看不见Blank填充显示，此时min参数就发挥作用了。

color：填充颜色

2.示例

@Entry @Component struct Index {   @State message: string = 'Hello World'   build() {     Column() {       Row() {         Text('Bluetooth').fontSize(18)         //最小值         Blank().color(Color.White)         Toggle({ type: ToggleType.Switch })       }.width('100%').backgroundColor(0xFFFFFF)       .borderRadius(15).padding({ left: 12 })       .margin({bottom:50})       Row() {         Text('Bluetooth').fontSize(18)         //在父组件没有设置宽度时设置最小值         Blank(100).color(Color.Black)         Toggle({ type: ToggleType.Switch })       }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })     }.backgroundColor(0xEFEFEF).padding(20)   } }

3.显示内容

竖屏状态

横屏状态

Button：按钮

按钮组件，可快速创建不同样式的按钮。

1.使用方式

有两种使用方式如下：

Button(options?: {type?: ButtonType, stateEffect?: boolean})

type：描述按钮显示样式。默认值：ButtonType.Capsule

stateEffect：按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true

说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

label：按钮文本内容。如果设置了label则不能在Button中设置子组件

属性

type：同上

stateEffect：同上

ButtonType枚举说明

Capsule：胶囊型按钮（圆角默认为高度的一半）。

Circle：圆形按钮。

Normal：普通按钮（默认不带圆角）。

示例：

// xxx.ets @Entry @Component struct ButtonExample {   build() {     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {       Text('Normal button').fontSize(9).fontColor(0xCCCCCC)       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {         Button('OK', { type: ButtonType.Normal, stateEffect: true })           .borderRadius(8)           .backgroundColor(0x317aff)           .width(90)           .onClick(() => {             console.log('ButtonType.Normal')           })         Button({ type: ButtonType.Normal, stateEffect: true }) {           Row() {             LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })           }.alignItems(VerticalAlign.Center)         }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)         Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)           .borderRadius(8).backgroundColor(0x317aff).width(90)       }       Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)       Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {         Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)         Button({ type: ButtonType.Capsule, stateEffect: true }) {           Row() {             LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)             Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })           }.alignItems(VerticalAlign.Center).width(90).height(40)         }.backgroundColor(0x317aff)         Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)           .backgroundColor(0x317aff).width(90)       }       Text('Circle button').fontSize(9).fontColor(0xCCCCCC)       Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {         Button({ type: ButtonType.Circle, stateEffect: true }) {           LoadingProgress().width(20).height(20).color(0xFFFFFF)         }.width(55).height(55).backgroundColor(0x317aff)         Button({ type: ButtonType.Circle, stateEffect: true }) {           LoadingProgress().width(20).height(20).color(0xFFFFFF)         }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)       }     }.height(400).padding({ left: 35, right: 35, top: 35 })   } }

显示样式：

Text：文本显示

显示一段文本的组件。

用法

Text(content?: string | Resource)

content：文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：' '

属性

名称	参数类型	描述
textAlign	TextAlign	设置文本段落在水平方向的对齐方式 默认值：TextAlign.Start 说明： 文本段落宽度占满Text组件宽度；可通过align属性控制文本段落在垂直方向上的位置。 从API version 9开始，该接口支持在ArkTS卡片中使用。
textOverflow	{overflow: TextOverflow}	设置文本超长时的显示方式。 默认值：{overflow: TextOverflow.Clip} 说明： 文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 需配合maxLines使用，单独设置不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。
maxLines	number	设置文本的最大行数。 默认值：Infinity 说明： 默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。 从API version 9开始，该接口支持在ArkTS卡片中使用。
lineHeight	string | number | Resource	设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 从API version 9开始，该接口支持在ArkTS卡片中使用。
decoration	{ type: TextDecorationType, color?: ResourceColor }	设置文本装饰线样式及其颜色。 默认值：{ type: TextDecorationType.None, color：Color.Black } 从API version 9开始，该接口支持在ArkTS卡片中使用。
baselineOffset	number | string	设置文本基线的偏移量，默认值0。 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置该值为百分比时，按默认值显示。
letterSpacing	number | string	设置文本字符间距。 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置该值为百分比时，按默认值显示。
minFontSize	number | string | Resource	设置文本最小显示字号。 需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。
maxFontSize	number | string | Resource	设置文本最大显示字号。 需配合minFontSize以及maxline或布局大小限制使用，单独设置不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。
textCase	TextCase	设置文本大小写。 默认值：TextCase.Normal 从API version 9开始，该接口支持在ArkTS卡片中使用。
copyOption9+	CopyOptions	组件支持设置文本是否可复制粘贴。 默认值：CopyOptions.None 该接口支持在ArkTS卡片中使用。

示例1

textAlign，textOverflow，maxLines，lineHeight使用示例。

// xxx.ets @Entry @Component struct TextExample1 {   build() {     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {       // 文本水平方向对齐方式设置       // 单行文本       Text('textAlign').fontSize(9).fontColor(0xCCCCCC)       Text('TextAlign set to Center.')         .textAlign(TextAlign.Center)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('TextAlign set to Start.')         .textAlign(TextAlign.Start)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('TextAlign set to End.')         .textAlign(TextAlign.End)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 多行文本       Text('This is the text content with textAlign set to Center.')         .textAlign(TextAlign.Center)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with textAlign set to Start.')         .textAlign(TextAlign.Start)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with textAlign set to End.')         .textAlign(TextAlign.End)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 文本超长时显示方式       Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)       // 超出maxLines截断内容展示       Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')         .textOverflow({ overflow: TextOverflow.None })         .maxLines(1)         .fontSize(12)         .border({ width: 1 })         .padding(10)       // 超出maxLines展示省略号       Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')         .join('\u200B'))         .textOverflow({ overflow: TextOverflow.Ellipsis })         .maxLines(1)         .fontSize(12)         .border({ width: 1 })         .padding(10)       Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)       Text('This is the text with the line height set. This is the text with the line height set.')         .fontSize(12).border({ width: 1 }).padding(10)       Text('This is the text with the line height set. This is the text with the line height set.')         .fontSize(12).border({ width: 1 }).padding(10)         .lineHeight(20)     }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })   } }

显示内容如下：

示例2

decoration，baselineOffset，letterSpacing，textCase使用示例：

@Entry @Component struct TextExample2 {   build() {     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {       Text('decoration').fontSize(9).fontColor(0xCCCCCC)       Text('This is the text content with the decoration set to LineThrough and the color set to Red.')         .decoration({           type: TextDecorationType.LineThrough,           color: Color.Red         })         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with the decoration set to Overline and the color set to Red.')         .decoration({           type: TextDecorationType.Overline,           color: Color.Red         })         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with the decoration set to Underline and the color set to Red.')         .decoration({           type: TextDecorationType.Underline,           color: Color.Red         })         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 文本基线偏移       Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)       Text('This is the text content with baselineOffset 0.')         .baselineOffset(0)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with baselineOffset 30.')         .baselineOffset(30)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with baselineOffset -20.')         .baselineOffset(-20)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 文本字符间距       Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)       Text('This is the text content with letterSpacing 0.')         .letterSpacing(0)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with letterSpacing 3.')         .letterSpacing(3)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('This is the text content with letterSpacing -1.')         .letterSpacing(-1)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       Text('textCase').fontSize(9).fontColor(0xCCCCCC)       Text('This is the text content with textCase set to Normal.')         .textCase(TextCase.Normal)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 文本全小写展示       Text('This is the text content with textCase set to LowerCase.')         .textCase(TextCase.LowerCase)         .fontSize(12)         .border({ width: 1 })         .padding(10)         .width('100%')       // 文本全大写展示       Text('This is the text content with textCase set to UpperCase.')         .textCase(TextCase.UpperCase)         .fontSize(12).border({ width: 1 }).padding(10)     }.height(700).width(350).padding({ left: 35, right: 35, top: 35 })   } }

显示内容如下：

QRCode

用于显示单个二维码的组件。

用法：

QRCode(value: string)

value：传入用于生成二维码的字符串

属性：

color：设置二维码颜色

backgroundColor：设置二维码背景颜色

示例：

// xxx.ets @Entry @Component struct QRCodeExample {   private value: string = 'hello world'   build() {     Column({ space: 5 }) {       Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).width(200).height(200)       // 设置二维码颜色       Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).color(0xF7CE00).width(200).height(200)       // 设置二维码背景色       Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)     }.width('100%').margin({ top: 5 })   } }

显示如下：

二.常用布局

线性布局（Row和Column）

Row和Colum的线性布局，类似于android的LinearLayout，其中Row是横向的线性布局，Column是竖向的线性布局

参数：

{   space?: string | number;    }

space是item中间的间距

属性：

alignItems(value: HorizontalAlign) justifyContent(value: FlexAlign)

alignItems：这个是Column中子组件的左中右布局方向，Row同理是子组件的上中下方向

justifyContent：这个是Column中子组件的竖向方向布局，Row中同理是子组件中横向的布局，不过值较多，需要结合图片理解，如下：

示例：

// xxx.ets @Entry @Component struct RowAndColumnTest {   build() {     Column({}) {       Column() {       }.width('80%').height(50).backgroundColor(0xF5DEB3)       Column() {       }.width('80%').height(50).backgroundColor(0xD2B48C)       Column() {       }.width('80%').height(50).backgroundColor(0xF5DEB3)     }.width('100%').height(300).backgroundColor('rgb(242,242,242)').justifyContent(FlexAlign.SpaceEvenly)   } }

 

// xxx.ets @Entry @Component struct QRCodeExample {   private value: string = 'hello world'   build() {     Column({ space: 5 }) {       Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).width(200).height(200)       // 设置二维码颜色       Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).color(0xF7CE00).width(200).height(200)       // 设置二维码背景色       Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)       QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)     }.width('100%').margin({ top: 5 }).alignItems(HorizontalAlign.End)   } }

层叠布局

类似于android的帧布局，子组件可以叠加上去，并且可以控制叠加的顺序。

主要参数：

alignContent：对其方式，子控件对齐父控件的位置

zIndex：子组件的叠层排序，zIndex值大的组件会覆盖在zIndex值小的组件上方。

示例：

@Entry @Component struct StackTest {   build() {     Stack({ alignContent: Alignment.BottomStart }) {       Column() {         Text('Stack子元素1').fontSize(20)       }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)       Column() {         Text('Stack子元素2').fontSize(20)       }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)       Column() {         Text('Stack子元素3').fontSize(20)       }.width(200).height(200).backgroundColor(Color.Grey)     }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)   } }

显示如下：

弹性布局（Flex）

Android中没有对应的布局，简单来说就是更加人性化的将子组件放到合适的位置，在设置可以换行的情况下子组件比较多宽度不足的情况下自动将子组件换行到下一行显示

使用方式：

参数名	参数类型	必填	默认值	参数描述
direction	FlexDirection	否	FlexDirection.Row	子组件在Flex容器上排列的方向，即主轴的方向。
wrap	FlexWrap	否	FlexWrap.NoWrap	Flex容器是单行/列还是多行/列排列。 说明： 在多行布局时，通过交叉轴方向，确认新行堆叠方向。
justifyContent	FlexAlign	否	FlexAlign.Start	子组件在Flex容器主轴上的对齐格式。
alignItems	ItemAlign	否	ItemAlign.Start	子组件在Flex容器交叉轴上的对齐格式。
alignContent	FlexAlign	否	FlexAlign.Start	交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

示例：

@Entry @Component struct FlexTest{   build(){     Flex({ justifyContent: FlexAlign.End,wrap :FlexWrap.Wrap }) {       Text('1').width('40%').height(50).backgroundColor(0xF5DEB3)       Text('2').width('40%').height(50).backgroundColor(0xD2B48C)       Text('3').width('40%').height(50).backgroundColor(0xF5DEB3)     }     .width('90%')     .padding({ top: 10, bottom: 10 })     .backgroundColor(0xAFEEEE)   } }

显示如下：