HarmonyOS/鸿蒙.learn/NEXT 星河版-黑马/02.界面开发.md

# 界面开发

#### 开发布局思路

开发的最小单位是组件

基础组件：内容

容器组件：布局排版

```tsx
build(){
    Column(){
        Text('简介')
        Row(){
         Text('The one')
         Text('The two')
         Text('The there')
         Text('The fore')
        }
    }
}
```



### 组件的属性方法

用于调整组件属性，美化外观，优化样式

```tsx
//
Text('简介')
	.height(40)
	.fontSize(20)
	...



```



##### 颜色设置

```
//设置颜色
.fontColor(颜色值)
枚举颜色：Color.颜色名
#开头的16进制颜色
```



##### 文字溢出显示省略号、行高

```tsx
Text('')
	.textOverflow({
        overflow: TextOverflow.Ellipsis
    })
    .maxLines(2)

//行高
.lineHeight(数字)
```







##### Image

```tsx
//网图加载
Image('图片网络链接')

//本地地址
Image($r('本地地址'))
//一般在 ./resources/base/medio/
Image($r('app.medio.图片名称'))
```





##### 输入框与按钮

```tsx
//同一容器中间隙space
Column({space: 15}){
      TextInput({
        placeholder: '请输入用户名'
      })
    
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)

      Button('登录')
        .width(200)

    }
```





##### 居中

```tsx
Column(){

}
.width('100%')
```





##### svg图标（矢量图）

特点：任意缩放大小不失真，可以改颜色

```tsx
Image($r(''))
	.fillColor(Color.Orange)
```



### 布局元素的组成



- 内边距
- 外边距
- 边框
- 内容区域



##### 内边距 padding

```
//总体设置
Text('内边距padding')
	.padding(20)

//分别设置
Text('内边距padding')
	.padding({
		top: 10,
		right: 20,
		bottom: 40,
		left: 80
	})
```





##### 外边距 margin

```
Text('外边距margin')
	.margin(20)
//分别设置同上
```





##### 边框 border

```

.border({
	width: 1,
	color: Color.Red
	style: BorderStyle.Dashed
})

//单边框,示例左边框。同理，颜色和样式也可以单独配置
.border({
	width: {
	left: 1
	}
	
})
```





##### 设置组件圆角

```
 Text('内边距padding')
        .borderRadius(5)
        .backgroundColor(Color.Blue)
```





##### 特殊圆角



- 正圆

```
Text('正圆')
	.width(100)
	.height(100)
	.borderRadius(50)
```



- 胶囊按钮

```
Text('正圆')
	.width(50)
	.height(50)
	.borderRadius(25)
```





### 背景

##### 背景图片基本引入

```tsx
Text('内容文本')
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .backgroundImage($r('app.media.cat'))
```



##### 背景图片平铺

```
Text('内容文本')
        .width(200)
        .height(100)
        .backgroundColor(Color.Green)
        .backgroundImage($r('app.media.cat'),ImageRepeat.XY)
```



##### 背景图片位置设置

```
Text('内容文本')
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.cat'))
        //.backgroundImagePosition({x: 50,y: 10})
        .backgroundImagePosition(Alignment.Center)
```



注意：背景定位默认单位为 px 实际的物理像素点 对于不同设备显示会有不同

宽高默认单位  vp   虚拟像素，可以自动转换

转换方法：

```
vp2px(数值)
```



##### 背景尺寸大小设置

```
 Text('内容文本')
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.cat'))
        .backgroundImageSize(ImageSize.Cover)
```





### 线性布局

Column  &  Row

##### 主轴对齐方式

```
 Column({space: 15}){
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Pink)
        .border({width: 2})
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Pink)
        .border({width: 2})
        .margin(5)
      Text()
        .width(200).height(100)
        .backgroundColor(Color.Pink)
        .border({width: 2})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .justifyContent(FlexAlign.SpaceEvenly)
```



##### 交叉轴对齐方式

```
//对于Column
.alignItems(HorizontalAlign.Start)
//对于Row
.alignItems(VerticalAlign.Top)
```





##### 自适应伸缩

```
.layoutWeight(权重)
```







### 弹性布局Flex



Flex默认主轴水平往右，交叉轴垂直向下

```
//设置主轴方向、对齐方式、交叉轴对齐方式、布局换行（单行布局还是多行布局）
 Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.SpaceAround,
      alignItems: ItemAlign.Stretch
      wrap: FlexWrap.Wrap
    }){

    }
```









### 绝对定位

优势是灵活

参照父组件的左上角进行偏移

```
Text('')
	.position({
	x: 0,
	y: 0
	})
```

调整组件层级

```
.zIndex(数字)
```





### 层叠布局

```
Stack(){
Text(){
	.zIndex(3)
	}
	
Text(){
	.zIndex(4)
	}
	
Text(){
	.zIndex(5)
	}
}
```