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

界面开发

开发布局思路

开发的最小单位是组件

基础组件：内容

容器组件：布局排版

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

组件的属性方法

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

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

颜色设置

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

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

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

//行高
.lineHeight(数字)

Image

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

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

输入框与按钮

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

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

    }

居中

Column(){

}
.width('100%')

svg图标（矢量图）

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

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)

背景

背景图片基本引入

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)
	}
}