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

层叠布局

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
相关问题
HarmonyOS flex容器布局
395浏览 • 2回复 待解决
实现层叠广告滑动效果
708浏览 • 1回复 待解决
动态布局加载loading效果实现
810浏览 • 1回复 待解决
栅格布局怎么实现滚动效果
302浏览 • 0回复 待解决
ArkTS布局组件实现瀑布流式布局
706浏览 • 1回复 待解决
如何在应用使用媒体查询进行布局
399浏览 • 2回复 待解决
相对布局(RelativeContainer)
957浏览 • 1回复 待解决
HarmonyOS 相对布局高度问题
132浏览 • 1回复 待解决
原子布局能力对应api
9092浏览 • 1回复 待解决
如何优化Flex布局性能
341浏览 • 1回复 待解决