|
|
# 界面开发
|
|
|
|
|
|
#### 开发布局思路
|
|
|
|
|
|
开发的最小单位是组件
|
|
|
|
|
|
基础组件：内容
|
|
|
|
|
|
容器组件：布局排版
|
|
|
|
|
|
```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)
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
