7-鸿蒙基础

鸿蒙基础

组件

分为容器组件和基础组件，先放容器组件，再使用基础组件

1,Column 容器组件 列 元素垂直方向排列

2,Row 容器组件 行 元素水平方向排列

3,Text 基础组件 文本组件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column(){
      Text('文本组件')//括号里如果是字符串，必须带单引号
    }
  }
}

文本组件的属性：1，FontSize 字体大小
2，FontWeight 字体粗细
3，FontColor 字体颜色,字体颜色为枚举类型
4，backgroundColor 背景颜色，也是枚举类型

Text('文本组件')
  .FontSize(24)//默认大小为24
  .FontWeight(3)
  .FontColor(Color.blue)
  .backgroundColor(Color.yellow)

4，Image 基础组件 图片组件

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

  build() {
    Column(){
     Image($r(''))
    }
  }
}

图片分为本地图片和网络图片

本地图片：Image($r('app.modia.图片名'))

网络图片：Image('图片地址')

5，TextInput 基础组件 文本框组件 placeholder：提示文本

TextInput({
    placeholder:'请输入文本'
})

TextInput的属性 type：设置文本模式

TextInput({
    placeholder:'请输入文本'
}).type(InputType:normal)//normal:正常文本模式 ，password：密码框模式

6,Button 基础组件 按钮组件

Button('按钮')

属性

通用属性

1,width 宽度

Text('文本')
  .width(50)

2,height 高度

Text('文本')
  .height(50)

3,backgroundColor 背景颜色 枚举

4，backgroundImage 背景图

5，padding 内边距 拉开内容与组件边缘的距离

6，margin 外边距 拉开组建于组件之间的距离

7，border 边框

Text('文本')
  .width(100)
  .height(200)
  .border({
    width:1 //边框的粗细 默认为1
    color:Color.red //边框的颜色 枚举类型 默认为黑色
    style：solid//边框的样式 solid实线 dashed虚线 dotted圆点虚线 默认为solid实线
  })

也可以设置不同边上的属性

Text('文本')
  .width(100)
  .height(200)
  .border({
      width:{left:1,right:2,top:3,botton:4}
      //left左侧 right右侧 top上 botton下
      color:{right：Color.red,left:Color.bule}
  })

8, 圆角：borderRadius

Text('圆角')
  .width(100)
  .height(200)
  .border(1)
  .borderRadius(10)

圆形边框：边框的长和宽相等，圆角为长宽的一半

Text('圆形边框')
  .width(200)
  .height(200)
  .border(1)
  .borderRedius(100)

胶囊边框：高度比宽度短，圆角为高的一半

Text('胶囊')
  .width(200)
  .height(100)
  .border(1)
  .bokrderRedius(50)

9，背景属性

backgroundColor 背景色

backgroundImage 背景图

Imagerepeat 背景图平铺方式

Text('背景属性')
  .backgroundImage(图片位置，Imagerepeat.X)//背景图沿X轴方向平铺，Imagerepeat.Y表示背景图沿Y轴方向平铺，ImageRepeat.XY表示都平铺，NoRepeat表示不平铺

backgroundImagePosition 背景图显示位置 默认会在左上角
属性Alignment

Text('背景图')
  .backgroundImage(图片位置，Imagerepeat.NoRepeat)
  .backgroundImagePosition({
         x:vp2px(20),
         y:vp2px(30)
       })

Alignment:bottomstart左下 bottomend左上 topstart左上 topend右上 bottom底部居中 top顶部居中 center居中

backgroundImageSize 背景图尺寸

Text('背景图')
  .width(100)
  .height(200)
  .backgroundImageSize(ImageSize.cover)//cover:等比例缩放图片，使图片铺满背景，但有一部分会无法显示。contain：等比例缩放图片，是图片完全显示，但背景会有部分留白。auto：默认显示原图尺寸

线性布局

Column 列 主轴为垂直方向

Row 行 主轴为水平方向

justifyContent(FlexAlign.start)

1,start:沿主轴起始位置对齐

2，end：沿主轴末尾位置对齐

3，center：沿主轴中心位置对齐

4，spacebetween：首尾元素分别贴上下两边，其他元素分别均匀分布中间

5，spacearound：间隙环绕 首尾元素与上下边元素的间隙是中间元素间隙的一半

6，spaceevenly：间隙均匀环绕 首尾元素与上下边的间隙与其他元素之间的间隙相同

自适应伸缩 layoutweight()

分配所有的宽度或高度

Row(){
       Text('左侧')
         .backgroundColor(Color.Blue)
         .layoutWeight(1)
       Text('中间')
         .backgroundColor(Color.Green)
         .layoutWeight(1)
       Text('右边')
         .backgroundColor(Color.Orange)
         .layoutWeight(1)
     }
     .width(300)

其中layoutweight括号中的数字代表其所属的文本占总文本的几份