003 常用组件开发使用

news/2024/11/18 16:25:12/

目录

一.基础组件

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)

  }

}

显示如下：


http://www.ppmy.cn/news/51079.html

相关文章

在嵌入式系统中搭建图像识别处理程序框架的步骤

在嵌入式系统中搭建图像识别处理程序框架的步骤

下面根据我自己的经验，介绍下如何在快速在嵌入式系统中搭建一个缺陷检测的图像识别处理程序框架 1. 确定需求和目标 在开始编写代码之前，需要明确系统的需求和目标。这包括要检测哪些类型的缺陷，需要实现什么样的图像处理算法，以…
阅读更多...
转化率双倍暴涨——客户自助服务门户

转化率双倍暴涨——客户自助服务门户

近年来，社交媒体的兴起使客户负责品牌对话。随着电子商务和在线帮助需求的扩大，公司必须满足并超越新的期望，以保持客户满意度。 通过SaleSmartly（ss客服）自动化流程功能建立客户自助服务是一种双赢的决策&#xff0c…
阅读更多...
测牛学堂：2023软件测试入门学习指南（测试方法之边界值法）

测牛学堂：2023软件测试入门学习指南（测试方法之边界值法）

边界值分析法 边界值：输入数据是一个有序的集合或者范围的时候，处于集合范围的边界上的值。 边界值的几个常用的概念： 上点：边界上的点。比如条件是（1，9）那么上点就是2和9 离点：开区…
阅读更多...
92、Nerfbusters: Removing Ghostly Artifacts from Casually Captured NeRFs

92、Nerfbusters: Removing Ghostly Artifacts from Casually Captured NeRFs

简介 主页:https://ethanweber.me/nerfbusters/ 在远离训练视图的新视图上渲染nerf可能会导致伪影，例如浮动或糟糕的几何形状。这些工件在野外捕获(a)中很普遍，但在NeRF基准测试中很少看到，因为评估视图通常从与训练视图相同的相机路径中选…
阅读更多...
ROS小车研究笔记：ROS TF坐标系管理

ROS小车研究笔记：ROS TF坐标系管理

TF用于管理和查询机器人坐标系变换。通过TF，我们可以得到10秒之内任何机器人两个坐标系间的位置关系 TF使用广播/监听模型。各个节点的坐标构成TF树用以保存节点间坐标变换。如果一个节点要得到某一坐标系变换可以通过TF树进行查询 tf包中可视化tf树工具&#xff…
阅读更多...
ipvs命令~创建VS/DR模式集群

ipvs命令~创建VS/DR模式集群

目录 1.LVS-DR模式的特点： 2.环境规划： 3.初始化配置 4.LVS服务器的LSV配置： 5.node节点配置 6.在客户端服务器，测试： 1.LVS-DR模式的特点： 所有集群节点RS必须和Director在相同的物理网段&#xff08…
阅读更多...
华为2023暑期笔试(1-1)

华为2023暑期笔试(1-1)

题目： 有一个核心交易系统接口被N个上游系统调用，每个上游系统的调用量R[R1,R2,…,RN]。由于核心交易系统集群故障，需要暂时系统降级限制调用，核心交易系统能接受的最大调用量为cnt。   设置降级规则如下: 如果sum(R1,R2…RN) 小…
阅读更多...
GPT模型成功的背后用到了哪些以数据为中心的人工智能（Data-centric AI）技术？

GPT模型成功的背后用到了哪些以数据为中心的人工智能（Data-centric AI）技术？

人工智能（Artificial Intelligence, AI）最近取得了巨大的进展，特别是大语言模型（Large Language Models, LLMs），比如最近火爆全网的ChatGPT和GPT-4。GPT模型在各项自然语言处理任务上有着惊人的效果。至于具…
阅读更多...
最新文章

Copyright @ 2022~2023