标签：平铺 鸿蒙 width Image 语法 HarmonyOS 组件 Day 属性
文章目录
一、界面开发
1、代码书写方式
1、代码块在build()方法中书写，在右侧预览中查看效果
2、界面开发-布局思路
1、ArkUI(方舟开发框架)
说明：是一套构建鸿蒙应用界面的框架
构建页面的最小单位就是“组件”
组件分类：
(1)基础组件：文字、图片、按钮等
(2)容器组件：Row行、Column列等
2、布局思路：
先排版，再放内容
3、组件语法
(1)容器组件：行Row、列Column
容器组件(){
//内容
}
(2)基础组件(参数)：文字Text、图片img、按钮button
3、组件的属性方法
1、语法
组件(){
}.方法1(参数)
.方法2(参数)
2、属性方法
.width()：宽度
.height()：高度
.backgroundColor()：颜色
.fontSize()：字体大小
.fontWeight()：字体粗细
.fontColor()：字体颜色
.lineHeight(): 设置行高
4、文字溢出省略号、行高
1、文字溢出省略(设置文本超长时的显示方式)
语法：.textOverflow({
overflow: TextOverflow.XXX
//说明
//Ellipsis：隐藏
//Clip：裁剪
//MARQUEE:单行反复滚动
})
注：需要配合.maxLines(行数)使用
如：
Text('全部配套资源领取方式如下：方式1：访问黑马官网可下载：www.itheima.com?bz方式2：关注黑马程序员公众号，回复关键词:鸿蒙NEXT').textOverflow({
overflow: TextOverflow.Ellipsis
}).maxLines(2)
5、Image图片组件
1、语法
Image(图片数据源) 支持网络图片资源和本地图片资源
2、示例
Image('http.../logo.png') //网络图片
Image($r('app.meida.文件名'))
//注：图片文件应该存储在resources - base - media下
6、输入框与按钮
一、输入框
1、语法
TextInput(参数对象)
.属性方法()
2、参数对象
2.1、placeholder 提示文本
3、属性方法
3.1、.type(inputType.xxx) 设置输入框type类型
二、按钮
1、语法
Button('按钮文本')
三、扩展：元素间间隙
在Column()中编写{ space:间隙 }
示例：
Column({space:10})
四、综合实战 - 华为登录
1、代码
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column({space: 5}){
Image($r('app.media.app_icon')).width(50)
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
}).type(InputType.Password)
Button('登录').width('100%')
Row({space:10}){
Text('前往注册')
Text('忘记密码')
}
}.width('100%')
.padding(20)
}
}
五、svg图标
HarmonyOS 主题图标库 | icon素材免费下载 | HarmonyOS开发者
1、用处
在界面中展示图标，拥有任意放大缩小不失真，可以改颜色的特点
2、获取
可以在Harmony OS的图标库中获取
六、布局元素的组成
1、外边距和内边距
1.1、外边距采用margin设置，内边距采用padding设置
1.2、若想为不同方向设置不同的内边距，可以采用以下方法
.padding({
left:1,
top:2,
right:3,
bottom:4
})
2、边框
语法：
.border({
对象属性
width:宽度
color：颜色
style:BorderStyl.样式
})
若要对单独一条边设置
.border({
width:{
left:1,
right:2
}
...
})
3、组件圆角
语法：
.borderRadius(参数)
或
.borderRadius({
topLeft: 5,
topRight: 10,
...
})
4、特殊型状的圆角设置
4.1、正圆
要求：宽高相同，圆角是宽或高的一半
4.2、胶囊
要求：宽度大于高度，圆角是高的一半
5、背景属性
backgroundColor:背景色
backgroundImage:背景图
backgroundImagePosition:背景图位置
backgroundImageSize:背景图尺寸
语法：
backgroundColor(Color.颜色)
backgroundImage(网络或本地图片地址，背景平铺方式)
背景平铺方式：
ImageRepeat.属性
Norepeat：不平铺，默认值
X:水平平铺
Y:垂直平铺
XY:水平垂直均平铺
示例：
backgroundImage(地址, ImageRepeat.XY)
backgroundImagePosition({ x:位置坐标, y:位置坐标})
或
backgroundImagePosition(Alignment.属性)
属性：
center：中央
TopStart：左顶点
TopEnd：右顶点
BottomEnd：右下顶点
BottomStart：左下顶点
backgroundImageSize(宽高对象 或 ImageSize.属性)
属性：
Contain：等比例缩放背景图，使宽或高与组件尺寸相同
Cover：等比例缩放背景图至完全覆盖组件范围
Auto：默认，原图尺寸
二、单位问题
1、问题：背景定位默认单位为PX，相对不同设备的适应很困难
而宽高默认单位为vp——虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致
可背景却只支持px
2、解决方案：
函数 vp2px(数值) 将vp进行转换，得到px的数值
标签：平铺,
鸿蒙,
width,
Image,
语法,
HarmonyOS,
组件,
Day,
属性
From： https://blog.csdn.net/Lin_Zhong_/article/details/136887415