鸿蒙初体验

鸿蒙初体验

线性布局

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

基本概念

• 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
• 布局子元素：布局容器内部的元素。
• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
• 间距：布局子元素的间距。

1.垂直布局

元素垂直向下排列

@Entry
@Component
struct OnePage {

  build() {
    // 布局
    Column(){
      // 文本组件
      Text('列........').backgroundColor('red')
      Text('元素垂直向下排列').backgroundColor('green')
      Text('元素垂直向下排列').backgroundColor('black')
      Text('元素垂直向下排列').backgroundColor('blue')
    }
    .height('100%')
    .width('100%')

  }
}

2.水平布局

元素水平方向排列

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

  build() {
    // 行的布局
    Row(){
      Text('行布局').backgroundColor('red')
      Text('行布局').backgroundColor('blue')
      Text('行布局').backgroundColor('green')
      Text('行布局').backgroundColor('black')
      Text('行布局').backgroundColor('#666')
      Text('行布局').backgroundColor('red')
      Text('行布局').backgroundColor('blue')
      Text('行布局').backgroundColor('green')
    }
  }
}

3.常用组件

3.1 Text文本

Text是文本组件，通常用于展示用户视图，如显示文章的文字。

//文本组件
      Text('hello word!')
        .fontSize(30)//字体大小  单位:vp
        .fontColor(Color.Pink)//字体颜色
        .textAlign(TextAlign.Start)//水平对齐方式
        .decoration({//写多个属性
          //类型:下划线,删除线,上划线,倾斜
          type:TextDecorationType.Underline,
          color:'blue',//颜色
          style:TextDecorationStyle.DOTTED//线的样式
        })//装饰:下划线,删除线,上划线,倾斜

3.2 按钮

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

胶囊按钮（默认类型）:此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

Button("胶囊按钮",{type:ButtonType.Capsule,stateEffect:true})

圆形按钮：此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

Button("圆形按钮",{type:ButtonType.Circle,stateEffect:true})

普通按钮:此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

Button("普通按钮",{type:ButtonType.Normal,stateEffect:true })

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

自定义样式

设置边框弧度：使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

Button('circle border', { type: ButtonType.Normal }) 
  .borderRadius(20)
  .height(40)

设置文本样式:通过添加文本样式设置按钮文本的展示样式。

Button('font style', { type: ButtonType.Normal }) 
  .fontSize(20) 
  .fontColor(Color.Pink) 
  .fontWeight(800)

设置背景颜色:添加backgroundColor属性设置按钮的背景颜色。

Button('background color').backgroundColor(0xF55A42)

3.3 文本输入

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参考TextInput、TextArea。

 //   文本输入框  {placeholder:"账号",text:"admin"}
    //   placeholder输入提示,text:默认值
      TextInput({placeholder:"账号",text:"admin"})//默认有圆角的输入框
      TextInput({placeholder:"请输入密码"})
        .type(InputType.Password)//文本框的输入框类型:密码
        .borderRadius(10)//圆角
        .backgroundColor("green")

设置输入框类型

TextInput有9种可选类型，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。通过type属性进行设置：

基本输入模式（默认类型）

TextInput()
  .type(InputType.Normal)

密码输入模式

TextInput()
  .type(InputType.Password)

自定义样式

设置无输入时的提示文本。

TextInput({placeholder:'我是提示文本'})

设置输入框当前的文本内容。

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

添加backgroundColor改变输入框的背景颜色。

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
  .backgroundColor(Color.Pink)

显示图片 (Image)

开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。

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

  build() {
    Column(){
      // $r('app.media.startIcon')  resources>base>media  不用写后缀
      Image($r('app.media.startIcon'))
        .width(40)
      //resources>rawfile  需要写完整的图片名称
      Image($rawfile("ss.jpg"))
        .width(200)
        //渲染颜色(黑白)
        .renderMode(ImageRenderMode.Template)
      // 加载网络图片需要申请网络权限
      Image("https://ts1.cn.mm.bing.net/th/id/R-C.08c4be9a6f712d0e022163456aa55717?rik=i3aloZKtgXLQVA&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f201403%2f7-14030Q43K9.jpg&ehk=xmS%2fk78ynzfhHlPywTKvOFMTabcOZmUTdUC98iCoAiI%3d&risl=&pid=ImgRaw&r=0")
        .width(300)
      Image($r('app.media.user'))
        .width(120)
        // 图片插值  抗锯齿
        .interpolation(ImageInterpolation.High)
    }
    .height('100%')
    .width('100%')
  }
}