层叠布局定义和例题
·
tack 是 ArkUI 层叠容器组件,又称堆叠布局。 核心规则:容器内所有子组件默认统一对齐到容器中心点,多层上下重叠摆放,后写入的组件层级更高,会覆盖在先写的组件上方。
- 布局维度:二维叠加布局,区别于 Row(横向单行)、Column(纵向单列)一维线性布局;
- 核心用途:图片加文字遮罩、头像角标、弹窗浮层、卡片叠加、底色 + 前景图文组合。
tack是 ArkUI 层叠容器组件,又称堆叠布局。 核心规则:容器内所有子组件默认统一对齐到容器中心点,多层上下重叠摆放,后写入的组件层级更高,会覆盖在先写的组件上方。 - 布局维度:二维叠加布局,区别于 Row(横向单行)、Column(纵向单列)一维线性布局;
- 核心用途:图片加文字遮罩、头像角标、弹窗浮层、卡片叠加、底色 + 前景图文组合。
- 例:
-
@Entry @Component struct ColStack { build() { Column({ space: 50 }) { Text('这是我的个人主页') .fontSize(35) .fontWeight(FontWeight.Bolder) .backgroundColor(Color.Yellow) Row({space :15}) { Stack() { Text() .width(220) .height(220) .backgroundColor(Color.Yellow) .borderRadius(30) Text('你好') .fontSize(40) .fontColor(Color.Red) .width(120) .height(120) .backgroundColor(Color.Grey) .borderRadius(30) .padding({ left: 15, right: 0, top: 0, bottom: 0 }) } Column() { Text('欢迎来到') .fontSize(35) .fontWeight(FontWeight.Bolder) Text('鸿蒙开发') .fontSize(35) .fontWeight(FontWeight.Bolder) } } .justifyContent(FlexAlign.Center) .width('100%') .height('100%') .backgroundColor(0xff00ff) } } }
更多推荐

所有评论(0)