鸿蒙 HarmonyOS学习日记 Day 2 界面开发、布局

---

一、界面开发

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的数值