首页 > 其他分享 >HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

时间:2023-10-09 14:31:57浏览次数:31  
标签:OpenHarmony ArkTS 卡片 width height HarmonyOS 组件 Stack Alignment

堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。

一、接口

Stack(value?: { alignContent?: Alignment })

从API version 9开始,该接口支持在ArkTS卡片中使用。

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack_Stack


二、属性

除支持通用属性外,还支持以下属性:

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack_Text_02


三、示例

// xxx.ets
@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

复制

四、效果展示

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack_API_03


五、场景

卡片上实现堆叠的场景使用。

本文根据HarmonyOS官方文档整理。

标签:OpenHarmony,ArkTS,卡片,width,height,HarmonyOS,组件,Stack,Alignment
From: https://blog.51cto.com/u_14946066/7773837

相关文章

  • HarmonyOS应用窗口管理(Stage模型)
     一、 窗口开发概述窗口模块的定义窗口模块用于在同一块物理屏幕上,提供多个应用界面显示、交互的机制。● 对应用开发者而言,窗口模块提供了界面显示和交互能力。● 对终端用户而言,窗口模块提供了控制应用界面的方式。● 对整个操作系统而言,窗口模块提供了不同应用界......
  • 【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器
    【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器@State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态......
  • 【中秋国庆不断更】HarmonyOS对通知类消息的管理与发布通知(下)
    【中秋国庆不断更】HarmonyOS对通知类消息的管理与发布通知(下)一、发布进度条类型通知进度条通知也是常见的通知类型,主要应用于文件下载、事务处理进度显示。HarmonyOS提供了进度条模板,发布通知应用设置好进度条模板的属性值,如模板名、模板数据,通过通知子系统发送到通知栏显示。......
  • 【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器
    【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器@State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态......
  • 修改typecho为鸿蒙字体HarmonyOS_Sans
    参考http://www.manongjc.com/detail/62-rolomyvbgjluyan.html在后台CSS样式添加以下代码:@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap;src:url('https://jsdelivr.panbaidu.cn/gh/baige007/ttf/HarmonyOS_Sans_SC_Me......
  • 【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
    @Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。概述stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:​......
  • 【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
    @Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。概述stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:......
  • 【中秋国庆不断更】HarmonyOS对通知类消息的管理与发布通知(上)
    【中秋国庆不断更】HarmonyOS对通知类消息的管理与发布通知(上)一、通知概述通知简介应用可以通过通知接口发送通知消息,终端用户可以通过通知栏查看通知内容,也可以点击通知来打开应用。通知常见的使用场景:​●显示接收到的短消息、即时消息等。​......
  • 【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
    @Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。概述stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:​......
  • 【中秋国庆不断更】OpenHarmony定义可动画属性:@AnimatableExtend装饰器
    【中秋国庆不断更】OpenHarmony定义可动画属性:@AnimatableExtend装饰器@AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的属性。在动画执行过程时,通过逐帧回调函数修改不可动画属性值,让不可动画属性也能实现动画效果。​●......