鸿蒙开发之ArkUI 界面篇 九 QQ音乐登录界面揭秘

我们需要实现的效果如下图：

 

:

分析，垂直方向，四个按钮，从上往下第一个是Image，第二个是Text、第三个是是Button、第四个是Button，垂直布局用Column，代码实现如下：

@Entry
@Component
struct IndexTest {
  @State message: string = 'IndexTest';
  build() {
    Column(){
      Image($r('app.media.avatar'))
        .width(80)
      Text('挣脱贫穷 奔向自由').margin({
        top:15
      }).fontWeight(777)

      Button('QQ登录').margin({
        top:30
      }).width('100%')

      Button('微信登录').margin({
        top:10
      }).width('100%')
        .backgroundColor('#ddd')
        .fontColor(Color.Black)

    }
    // .backgroundColor(Color.Red)
    .margin({
      top:15,
      left:15,
      right:15,
    })

  }
}