【综合案例】使用DevEco Studio编写人气卡片

最新推荐文章于 2024-09-05 10:41:35 发布

学前端的小朱

最新推荐文章于 2024-09-05 10:41:35 发布

阅读量129

点赞数 3

分类专栏：鸿蒙开发文章标签：前端 arkts 鸿蒙

本文链接：https://blog.csdn.net/qq_45569925/article/details/140820817

版权

鸿蒙开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果展示

知识点

绝对定位

作用：控制组件位置，可以实现层叠效果

特点：

参照父组件左上角进行偏移
绝对定位后的组件不再占用自身原有位置

语法：.position(位置对象)

参数：{ x: 水平偏移量 , y: 垂直偏移量}

zIndex层级

作用：调整组件层级

语法：.zIndex(数字)

参数：取值为整数数字，取值越大，显示层级越高

代码展示

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column() {
        Text("VIP")
          .position({
            x: 0,
            y: 0
          })
          .zIndex(1)
          .width(70)
          .height(40)
          .textAlign(TextAlign.Center)
          .fontSize(20)
          .fontWeight(700)
          .border({
            width: 5,
            color: "#F8EA87"
          })
          .borderRadius({
            topLeft: 20,
            bottomRight: 20
          })
          .fontColor("#F8EA87")
          .backgroundColor("#F1932D")
        Image($r("app.media.position_moco"))
          .width('99%')
          .borderRadius(20)
        Row({ space: 20 }) {
          Image($r("app.media.position_earphone"))
            .padding(5)
            .width(30)
            .borderRadius(15)
            .fillColor("#fff")
            .backgroundColor("#0AC1EF")
          Text("飞狗MOCO")
            .fontSize(24)
            .fontWeight(700)
        }
        .padding({
          left: 20
        })
        .margin({
          top: 10,
          bottom: 10
        })
        .width("100%")
      }
      .width(300)
      .backgroundColor("#fff")
    }
    .padding(20)
    .width("100%")
    .height("100%")
    .linearGradient({
      angle: 135, // 设置颜色渐变起始角度为顺时针方向45°
      colors: [
        [0xceeff2, 0.0],
        [0xf2e0de, 0.4],
        [0xFFFFFF, 0.8],
      ]
    })
  }
}