43、鸿蒙/布局/综合布局案例

案例：实现卡片效果，自上而下布局使用Column，按钮悬浮在图片上，图片+按钮使用层叠布局Stack，效果和代码如下：

代码：

@Component
export struct StackLayout2 {
  build() {
    Column(){
      //
      Column(){
        //
        Stack(){
          // 封面
          Image($r('app.media.background')).height(180).width('100%')
            .borderRadius({
              topLeft: 5,
              topRight: 5
            })
          // 点赞
          Row(){
            //
            Row(){
              Image($r('app.media.app_icon')).width(20).height(20)
              Text('400万').fontColor(Color.White).fontWeight(600).padding({left: 8})
            }

            Row(){
              Image($r('app.media.app_icon')).width(20).height(20)
              Text('300人').fontColor(Color.White).fontWeight(600).padding({left: 8})
            }.margin({left: 20})

            // 占有剩余空间
            Blank()
            //
            Row(){
              Image($r('app.media.app_icon')).width(20).height(20)
              Text('1232').fontColor(Color.White).fontWeight(600).padding({left: 8})
            }.margin({left: 20})


          }.width('100%')
          .justifyContent(FlexAlign.Start)
          .padding({
            left: 15,
            right: 15
          })
          .height(40)
          .backgroundColor('#000').opacity(0.6)
        }.alignContent(Alignment.BottomEnd)
        // 作者
        Row() {
          Image($r('app.media.startIcon')).width(30).height(30)
          Text('圆梦人生').fontSize(18)
            .margin({
              left: 12
            })
        }
        .alignItems(VerticalAlign.Center)
        .width('100%')
        .height(40)
        .padding({
          left: 15
        })

      }.backgroundColor(Color.White)
      .margin({
        top: 20
      })
      .borderRadius(5)
      .width(320)
      .height(220)


    }.backgroundColor(Color.Gray)
    .height('100%')
    .width('100%')
  }
}