鸿蒙应用开发 |最基础的组件应用Column、Row！！

鸿蒙应用开发 |最基础的组件应用Column、Row！！

今天来学习一下鸿蒙开发中，最常用的2个组件：Column 和Row

下面先来介绍一下这两个组件的作用：

Column：内容垂直排列

下面是在代码中最直观的体现

接下来是Row

Row：是内容水平排列（但不能换行！！）

下面是代码

相信看过之后大家已经对这两个组件有了最基本的认识，那么当我们拿到一个案例时该如何快速的去判别究竟用哪个呢？

当拿到下面的案例时，相信大家在脑海里可以很快的判断出图片的总体框架应该是用Row

下面是对内容逐步地去分析，先看左边的模块可以看出它是一个垂直排列，

  Column({ space: 10 }) {
        Text("玩一玩")
          .fontSize(30)
        Text("签到兑礼 | 超多大奖 超好玩")
          .fontSize(13)
          .fontColor("#a9a9ad")
      }
      .alignItems(HorizontalAlign.Start)

接下来在看右边，它是由一个图片和一个箭头组成的水平排列 sign=Htje%2BudzL79e6SH16%2Fz%2Bw7Y3h%2BU%3D) Row({ space: 20 }) { Image($r("app.media.tree")) .width(100) .borderRadius(20) .aspectRatio(1) Image($r("app.media.arrow_right")) .width(50) .aspectRatio(1) }

下面就是将这两个模块用Column组件套在一起

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


  build() {
    Row() {
      Column({ space: 10 }) {
        Text("玩一玩")
          .fontSize(30)
        Text("签到兑礼 | 超多大奖 超好玩")
          .fontSize(13)
          .fontColor("#a9a9ad")
      }
      .alignItems(HorizontalAlign.Start)


      Row({ space: 20 }) {
        Image($r("app.media.tree"))
          .width(100)
          .borderRadius(20)
          .aspectRatio(1)
        Image($r("app.media.arrow_right"))
          .width(50)
          .aspectRatio(1)
      }


    }
    .padding({
      left: 10
    })
    .justifyContent(FlexAlign.SpaceBetween)
    .width("100%")
    .height("100%")
  }
}

这两个就是在页面布局中最为基础的组件，第一次写文章希望大家能够提出宝贵的意见