HarmonyOS 初体验

HarmonyOS 入门

线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

1.垂直布局

Column 从上到下布局

@Entry
@Component
struct OnePage {
  build() {
   //  布局  线性布局
   //  column从上往下布局
   Column(){
     // Text文本组件
     Text('列.......').backgroundColor("green")
     Text('元素垂直向下').backgroundColor("red")
     Text('元素垂直向下').backgroundColor("blue")
     Text('元素垂直向下').backgroundColor("black")
   }
   .height('100%')
   .width('100%')
  }
}

2.水平布局

Row 从左往右布局

@Entry
@Component
struct RowPage {
  @State message: string = 'Hello World';
  build() {
  // 行的布局   水平方向从左往右
  Row(){
    Text("行布局").backgroundColor("red")
    Text("行布局").backgroundColor("#999")
    Text("行布局").backgroundColor("#f70")
    Text("行布局").backgroundColor("green")
    Text("行布局").backgroundColor("blue")
    Text("行布局").backgroundColor("#f70")
    Text("行布局").backgroundColor("green")
    Text("行布局").backgroundColor("blue")
    Text("行布局").backgroundColor("#f70")
    Text("行布局").backgroundColor("green")
    Text("行布局").backgroundColor("blue")
   }
  }
}

组件

1.文本显示

Text("hello word!")
  .fontSize(30)//字体大小      单位vp
  .fontColor(Color.Orange)//字体颜色
  .textAlign(TextAlign.Start)//水平对其方式   不生效位置不对
  .decoration({
    //写多个属性
    //类型：下划线，删除线，上划线
    type:TextDecorationType.Underline,
    color:"blue",
    style:TextDecorationStyle.DOTTED  //线的样式
  })//装饰：下划线，删除线，上划线

2文本输入

//文本输入框
// {placeholder输入的提示,text:默认值
TextInput({placeholder:"请输入帐号",text:"admin"})//默认样式，有圆角的输入框

TextInput({placeholder:"请输入密码"})
  .type(InputType.Password)//输入框类型:密码
  .borderRadius(10)//圆角
  .backgroundColor("green")

3.按钮

//按钮
Button("按钮").width(100)
//type:ButtonType.Circle  按钮的形状
// stateEffect:false    按钮下压的状态
Button("圆形按钮",{type:ButtonType.Circle,stateEffect:false})
  .height(120)
Button("胶囊按钮",{type:ButtonType.Capsule,stateEffect:false})
Button("普通按钮",{type:ButtonType.Normal,stateEffect:false})

4.图片

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

  build() {
  Column(){
  //   $r('app.media.startIcon')     resources>base>media   不用写后缀
  Image($r('app.media.startIcon'))
    .width(100)
    // resources>rawfile    需要写完整的图片名称
    Image($rawfile("006OuROzly1hhh19bwh8nj34802tc4qw.jpg"))
      .width(400)
      .renderMode(ImageRenderMode.Original)//渲染颜色
    //加载网络图片需要申请网络权限
  Image("https://img30.360buyimg.com/pop/s1180x940_jfs/t1/80849/38/24536/56064/669e1cf8Fdfccdaa0/02464ee6675fda44.jpg.webp")
  Image($rawfile("user.png"))
    .width(120)

    //图片插值  抗锯齿
    .interpolation(ImageInterpolation.High)


  }
  .height("100%")
  .width("100%")
  }
}