HarmonyOS ArkUI-eTS常用控制

系统 OpenHarmony
本篇带给大家ArkUI-eTS常用控制的相关知识,希望能够帮助到你!

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://harmonyos.51cto.com​

1.显隐控制

  • 支持版本: eTS API Version 7+
  • 属性名称: visibility
  • 作用: 控制该属性所在组件显示或隐藏
  • 默认: Visible(显示)
  • 其他值: Hidden(隐藏,占用布局空间)、None(隐藏,但不占用布局空间)
  • 使用举例:

分别使用该属性三种值定义1、2、3、4四个按钮。

第一个按钮设置为显示,第二个按钮设置为隐藏且占空间,第三个按钮设置为隐藏且不占空间。

最后4号按钮用来判别上一个按钮是否占用了布局空间。

@Entry
@Component
struct Sample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('显式')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button('1').visibility(Visibility.Visible)

Text('隐式占位')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button('2').visibility(Visibility.Hidden)

Text('隐式不占位')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button('3').visibility(Visibility.None)

Button('4').visibility(Visibility.Visible)
}
.width('100%')
.height('100%')
}
}

如下图:

2.禁用控制

  • 支持版本: eTS API Version 7+
  • 属性名称: enabled
  • 作用: 控制该属性所在组件是否禁用
  • 默认: true(组件可用)
  • 其他值: false(组件不可用)
  • 使用举例:

以按钮为例,分别设置按钮禁用和按钮可用

@Entry
@Component
struct Sample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('禁用按钮').enabled(false).opacity(0.4).margin({bottom:10})
Button('可用按钮').enabled(true)
}
.width('100%')
.height('100%')
}
}

如下图:

3.Z序控制

  • 支持版本: eTS API Version 7+
  • 属性名称: zIndex
  • 作用: 同一容器中兄弟组件的显示层级关系(叠加关系)
  • 默认: 0(最底层)
  • 其他值: number类型n(放在第n层)
  • 使用举例:

主要使用堆叠容器Stack(可见文章末拓展内容),向容器中添加相关组件并使用Z序控制对内容进行层级划分。

@Entry
@Component
struct Sample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Stack() {
Text('Z序--2')
.fontSize(15)
.size({width: '40%', height: '10%'}).backgroundColor(Color.Yellow)
.zIndex(2)
// 默认值0
Text('默认0')
.fontSize(15)
.size({width: '90%', height: '50%'}).backgroundColor(Color.Green).align(Alignment.TopStart)
Text('Z序--1')
.fontSize(15)
.size({width: '70%', height: '30%'}).backgroundColor(Color.Blue).align(Alignment.TopStart)
.zIndex(1)
}
}
.width('100%')
.height('100%')
}
}

如下图:

4.Popup控制

  • 支持版本: eTS API Version 7+
  • 属性名称: bindPopup
  • 作用: 给组件绑定Popup,点击后出现弹窗
  • 主要参数: show(弹窗提示是否默认显示,默认为false)、popup(配置弹窗提示信息—PopupOption,CustomPopupOption两个接口)
  • PopupOption接口常见属性:message(弹窗信息内容)、placementOnTop(是否在组件上方显示,默认值为false)
  • CustomPopupOption接口常见属性:placement(气泡优先显示位置,自定义位置容纳不下时,会自动调整位置)、popupColor(提示气泡的颜色)
  • 使用举例:
@Entry
@Component
struct Sample {
@State noHandlePopup: boolean = false
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
Button('按钮')
.width('50%')
.margin({top:100})
.onClick(()=>{
this.noHandlePopup = !this.noHandlePopup
})
.bindPopup(this.noHandlePopup,{
message:'弹窗一', //弹窗内容
placement:Placement.Bottom, //弹窗位于按钮底部
onStateChange:(e)=>{
console.info(e.isVisible.toString())
if(!e.isVisible){
this.noHandlePopup = false
}
}
})
}
.width('100%')
.height('100%')
}
}

如下图:

5.点击控制

  • 支持版本: eTS API Version 8+
  • 属性名称: touchable
  • 作用: 设置当前组件是否可以被触摸
  • 默认: true
  • 使用举例:
@Entry
@Component
struct Sample {
@State text_touch: string = ''

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Circle()
.fill(Color.Orange)
.width(100)
.height(100)
.touchable(true)
.onClick(() => {
console.info(this.text_touch = '您已经点击过此图形')
})
.overlay(this.text_touch, { align: Alignment.Bottom, offset: { x: 0, y: 50 } })
}
.width('100%')
.height('100%')
}
}

如下图:

6.Stack容器(基于Z序控制拓展组件)

  • 支持版本: eTS API Version 7+
  • 接口: Stack(value:{alignContent?: Alignment})
  • 参数alignContent: 默认值Center(子组件在容器内的对齐方式)
  • 使用举例:
....................
Stack({ alignContent: Alignment.Bottom }) { //设置为底部对齐
Text('子组件一')
.fontSize(15)
.width('90%')
.height('100%')
.backgroundColor(Color.Blue)
.align(Alignment.Top)
Text('子组件二')
.fontSize(15)
.width('70%')
.height('60%')
.backgroundColor(Color.Grey)
.align(Alignment.Top)
}.width('100%').height(150).margin({ top: 5 })
}
.................

如下图:

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://harmonyos.51cto.com​

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-02-23 15:36:46

ArkUI-eTS事件监听鸿蒙

2022-10-24 14:49:54

ArkUI心电图组件

2022-11-02 16:06:54

ArkUIETS

2022-07-05 16:13:37

ArkUI-eTS智能晾晒系统

2022-09-05 15:22:27

ArkUIets

2022-07-04 16:34:46

流光按钮Stack

2022-01-25 17:05:44

ArkUI_eTS操作系统鸿蒙

2022-08-12 19:13:07

etswifi连接操作

2023-03-13 15:03:05

鸿蒙ArkUI

2021-11-26 10:08:57

鸿蒙HarmonyOS应用

2022-07-11 16:26:37

eTS计算鸿蒙

2022-05-26 14:50:15

ArkUITS扩展

2021-12-03 09:49:59

鸿蒙HarmonyOS应用

2022-02-16 16:37:51

HarmonyOSArkUI操作系统

2022-10-10 14:51:51

ArkUI eTSPieChart组件

2022-10-09 15:13:18

TextPickerArkUI eTS

2022-08-25 21:41:43

ArkUI鸿蒙

2022-07-13 16:24:12

ArkUI(JS)打地鼠游戏

2022-09-21 14:51:21

ArkUI信件弹出

2021-11-26 15:31:43

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号