层叠布局,层叠布局在容器内的不同属性下的布局效果

层叠布局

HarmonyOS
2024-05-26 12:45:52
浏览
已于2024-5-27 17:15:04修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fanyu0803

该demo主要用于展示层叠布局在容器内的不同属性下的布局效果。

使用的核心API

核心API可以参考文档:层叠布局

  • router.pushUrl():该方法可以跳转到指定的页面
  • alignContent:Stack组件通过alignContent参数实现位置的相对移动。

其支持九种对齐方式,如下图所示:。

  •  alignContent(Alignment.Top)
  •  alignContent(Alignment.TopEnd)
  •  alignContent(Alignment.Start)
  •  alignContent(Alignment.Center)
  •  alignContent(Alignment.End)
  •  alignContent(Alignment.BottomStart)
  •  alignContent(Alignment.Bottom)
  •  alignContent(Alignment.BottomEnd)

核心代码解释

import router from '@ohos.router'; 
import { BusinessError } from '@ohos.base'; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = '层叠布局效果'; 
  
  build() { 
    Row() { 
      Column({space: 20}) { 
        Text(this.message) 
          .fontSize(48) 
          .fontWeight(FontWeight.Bold) 
        Button('Stack容器内子元素布局效果1') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器的对齐方式2') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内查看子元素对齐方式') 
            router.pushUrl({url: 'pages/StackTest2'}).then(() =>{ 
              console.info('进入Stack容器内查看子元素对齐方式成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内查看子元素对齐方式失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器内子元素布局效果3') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest3'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
        Button('Stack容器内子元素布局效果4') 
          .onClick(() =>{ 
            console.info('点击进入Stack容器内子元素布局页面') 
            router.pushUrl({url: 'pages/StackTest4'}).then(() =>{ 
              console.info('进入Stack容器内子元素布局页面成功') 
            }).catch((err: BusinessError) => { 
              console.error(`进入Stack容器内子元素布局页面失败。 code is ${err.code}, fail message is ${err.message}`) 
            }) 
          }) 
      } 
      .width('100%') 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 16:27:44
相关问题
实现层叠广告滑动效果
399浏览 • 1回复 待解决
动态布局加载loading效果实现
276浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
367浏览 • 1回复 待解决
相对布局(RelativeContainer)
398浏览 • 1回复 待解决
原子布局能力对应api
8122浏览 • 1回复 待解决
基于tabs实现页面布局
201浏览 • 1回复 待解决
请问如何获取到鸿蒙布局
5387浏览 • 1回复 待解决
关于DependentLayout布局一点疑问
4535浏览 • 1回复 待解决
找不到图片和布局资源
10604浏览 • 8回复 待解决
Text组件布局过界问题
376浏览 • 1回复 待解决
请问原子布局能力怎么理解?
9008浏览 • 1回复 已解决
ets中设置布局高度和宽度
1756浏览 • 1回复 待解决
音乐播放悬浮按钮该如何布局
367浏览 • 1回复 待解决