ArkUI - 自定义卡片样式

[cnwutianhao]

HarmonyOS API 9 没有提供原生的卡片样式，我定义了一个卡片样式，可以方便大家在日常开发中使用。

效果图：

卡片样式代码如下：

@Styles function card() {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
}

使用卡片样式：

@Entry
@Component
struct Test {
  build() {
    Column({ space: 10 }) {
      Row() {
        Text('卡片样式')
      }
      .card()
      .margin({ top: 20, bottom: 10 })
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}