当前位置：首页 > news >正文

8.ArkUI Stack的介绍和使用

news 2025/4/26 14:48:12

ArkUI Stack 组件介绍与使用指南

什么是 Stack 组件？

Stack 是 ArkUI 中的层叠布局容器组件，它允许子组件按照添加顺序在 Z 轴方向（垂直于屏幕方向）上堆叠显示。Stack 类似于其他UI框架中的 FrameLayout 或 RelativeLayout，适用于需要重叠显示的UI场景。

Stack 的基本属性

alignContent：设置子组件的对齐方式
- Alignment.TopStart（默认）：左上对齐
- Alignment.Top：顶部水平居中
- Alignment.TopEnd：右上对齐
- Alignment.Start：左侧垂直居中
- Alignment.Center：居中
- Alignment.End：右侧垂直居中
- Alignment.BottomStart：左下对齐
- Alignment.Bottom：底部水平居中
- Alignment.BottomEnd：右下对齐
fit：设置 Stack 如何适应子组件大小
- StackFit.Loose（默认）：松散适应，Stack 大小由子组件决定
- StackFit.Expand：扩展适应，Stack 会填满父容器
- StackFit.Keep：保持 Stack 原有大小

基本使用方法

@Entry
@Component
struct StackExample {build() {Stack({ alignContent: Alignment.BottomEnd }) {// 背景层Image('background_image').width('100%').height('100%').objectFit(ImageFit.Cover)// 中间层Text('居中文字').fontSize(24).fontColor(Color.White).align(Alignment.Center)// 前景层Button('底部按钮', { type: ButtonType.Capsule }).width(120).height(40).margin(20)}.width('100%').height(300).borderRadius(12).margin(10)}
}

高级用法

绝对定位子组件

Stack() {// 背景Image('background').width('100%').height('100%')// 绝对定位元素Text('绝对定位元素').position({ x: '50%', y: '30%' })  // 相对于Stack定位.translate({ x: -50, y: -15 })     // 偏移自身宽高的一半实现居中.fontSize(20).backgroundColor('#ffffff').padding(10).borderRadius(4)
}
.width(200)
.height(200)
.margin(10)

动态控制层叠顺序

@Entry
@Component
struct DynamicStackExample {@State showOverlay: boolean = falsebuild() {Stack() {// 主内容Column() {Text('主内容区域').fontSize(20).margin(20)Button('切换覆盖层').onClick(() => {this.showOverlay = !this.showOverlay}).margin(20)}.width('100%').height('100%').backgroundColor('#f0f0f0')// 覆盖层if (this.showOverlay) {Column() {Text('覆盖层内容').fontSize(20).margin(20)Button('关闭').onClick(() => {this.showOverlay = false}).margin(20)}.width('80%').height('60%').backgroundColor('#ffffff').align(Alignment.Center).border({ width: 1, color: Color.Grey }).shadow({ radius: 10, color: '#1a000000' })}}.width('100%').height(300).margin(10)}
}

复杂层叠布局

@Entry
@Component
struct ComplexStackLayout {build() {Stack() {// 背景层Image('background').width('100%').height('100%').objectFit(ImageFit.Cover).opacity(0.8)// 中间内容层Column() {Text('标题').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 20 })Text('内容描述...').fontSize(16).margin({ bottom: 20 }).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })Button('操作按钮').width(120)}.width('80%').padding(20).backgroundColor(Color.White).borderRadius(12).align(Alignment.Center).shadow({ radius: 8, color: '#1a000000' })// 右上角标签Text('NEW').fontSize(12).fontColor(Color.White).backgroundColor(Color.Red).padding({ left: 8, right: 8, top: 2, bottom: 2 }).borderRadius(4).position({ x: '85%', y: '15%' })}.width('90%').height(250).margin(10)}
}

实际应用示例

图片标记应用

@Entry
@Component
struct ImageMarker {@State markers: { x: number, y: number, text: string }[] = [{ x: 30, y: 40, text: '标记1' },{ x: 70, y: 60, text: '标记2' }]build() {Stack() {// 基础图片Image('scenery').width('100%').height(300).objectFit(ImageFit.Cover)// 标记点ForEach(this.markers, (marker) => {Column() {Image('marker_icon').width(24).height(24)Text(marker.text).fontSize(12).backgroundColor(Color.White).padding(4).borderRadius(4)}.position({ x: `${marker.x}%`, y: `${marker.y}%` }).onClick(() => {// 处理标记点击事件})})// 添加标记按钮Button('添加标记', { type: ButtonType.Circle }).width(50).height(50).position({ x: '90%', y: '90%' }).onClick(() => {// 添加新标记逻辑})}.width('100%').height(300).margin(10)}
}

浮动操作按钮 (FAB)

@Entry
@Component
struct FabExample {@State showActions: boolean = falsebuild() {Stack() {// 主内容Column() {Text('页面内容').fontSize(20).margin(20)// 更多内容...}.width('100%').height('100%')// 浮动操作按钮Column() {if (this.showActions) {Button('分享', { type: ButtonType.Circle }).width(50).height(50).margin(5).backgroundColor('#4CAF50')Button('收藏', { type: ButtonType.Circle }).width(50).height(50).margin(5).backgroundColor('#2196F3')}Button('+', { type: ButtonType.Circle }).width(60).height(60).backgroundColor('#FF5722').fontSize(24).fontColor(Color.White).onClick(() => {this.showActions = !this.showActions})}.position({ x: '85%', y: '80%' })}.width('100%').height('100%')}
}