鸿蒙 HarmonyOS学习日记 Day 3 布局、京东登录页面

---

一、线性布局

	1、说明
	    通过线性容器Column和row实现
	    Column：垂直排列
	    row：水平排列
	    
	2、主轴上的对齐方式
	    属性：.justifyContent()
	    参数：枚举FlexAlign
	        FlexAlign：
	            Start：顶端对齐
	            Center：居中对齐
	            End：底端对齐
	            SpaceBetween：两端贴边，其余均匀分布
	            SpaceAround：空白间隙环绕
	            SpaceEvenly：所有元素均匀分布
	
	3、交叉轴上的对齐方式
	     属性：.alignItems()
	     参数：枚举HorizontalAlign或VerticalAlign
	     
	         HorizontalAlign：交叉轴在水平方向
	             start：靠左
	             center：居中
	             end：靠右
	             
	         VerticalAlign：交叉轴在垂直方向
	             start：顶端
	             Center：居中
	             Bottom：底部
	
	4、扩展：当输入枚举时使用ctrl+p，可以获取代码提示
	

二、自适应伸缩

	1、设置了layoutWeight属性的 子元素 与 兄弟元素 ，会按照权重进行分配 主轴 的空间
	2、语法：
	    .layoutWeight(数字)

三、综合案例 —— 京东登陆页面

	1、知识点
	    1.1、单选框
	        Checkbox()
	    1.2、一段文本中，有文本需要单独定制，应该使用Text包裹Span
	    
	2、代码
	    import { ButtonOptions } from '@ohos.arkui.advanced.Dialog';
	    
	    @Entry
	    @Component
	    struct Index {
	      @State message: string = 'Hello World';
	      build() {
	        Column(){
	          Row(){
	            Image($r('app.media.ic_public_close'))
	              .width(24)
	            Text('帮助')
	              .fontColor(Color.Gray)
	          }
	          .width('100%')
	          .justifyContent(FlexAlign.SpaceBetween)
	          Row(){
	            Image($r('app.media.bilibili'))
	              .width(200)
	          }
	          Column(){
	            Row(){
	              Text('国家/地址')
	                .layoutWeight(1)
	                .fontColor(Color.Gray)
	              Text('中国(+86)')
	                .fontColor(Color.Gray)
	              Image($r('app.media.ic_public_arrow_right'))
	                .width(20)
	                .fillColor(Color.Gray)
	            }
	            .width('100%')
	            .height(40)
	            .backgroundColor("#fff")
	            .borderRadius(25)
	            .justifyContent(FlexAlign.SpaceBetween)
	            .padding({
	              left:20,
	              right:20
	            })
	    
	            TextInput({
	              placeholder:'请输入手机号'
	            })
	              .margin({
	                top:20
	              })
	    
	            Row(){
	              Checkbox()
	                .width(12)
	                .height(12)
	                .borderRadius(12)
	              Text(){
	                Span('我已经阅读并同意')
	                Span('BiliBili隐私政策》')
	                  .fontColor('#3274f6')
	                Span('《BiliBili用户服务协议》')
	                  .fontColor('#3274f6')
	                Span('未注册的手机号将自动创建BiliBili账号')
	              }.fontSize(12)
	              .lineHeight(20)
	            }
	            .alignItems(VerticalAlign.Top)
	            .margin({
	              top:20
	            })
	          Button('登录')
	            .width('100%')
	            .backgroundColor('#2d92d7')
	            .margin({top:20})
	    
	            Row(){
	              Text('新用户注册')
	                .fontColor(Color.Gray)
	              Text('账户密码登录')
	                .fontColor(Color.Gray)
	              Text('无法登录')
	                .fontColor(Color.Gray)
	            }
	            .margin({
	              top:20
	            })
	            .width('100%')
	            .justifyContent(FlexAlign.SpaceEvenly)
	    
	          Text('其他登录方式')
	            .margin({top:160})
	            .fontColor(Color.Gray)
	          }
	        }
	        .width('100%')
	        .height('100%')
	        .padding(30)
	        .backgroundColor('#f5f5f5')
	      }
	    }
	    

四、弹性布局（Flex）

	1、概念
	    线性布局基于弹性布局
	    Flex默认主轴水平往右，交叉轴垂直往下
	    
	2、用法
	    Flex(参数对象){
	        子组件1
	        子组件2
	        子组件3    
	    }
	    参数对象：
	        主轴方向：direction
	        主轴对齐方向：justifyContent
	        交叉轴对齐方式：alignItems
	        布局换行：wrap
	        
	3、详解
	    Flex({
	        direction:FlexDirection.(Row：水平往右 Column：垂直往下)
	        wrap: FlexWrap.(NoWrap：单行布局 Wrap：多行布局)
	    })
	
	4、注：
	    优先使用线性布局，因为其基于Flex设计，做了性能优化
	五、绝对定位 与 zIndex
	一、绝对定位
	    1、作用：控制组件位置，可以实现层叠效果
	    
	    2、特点：
	        2.1、参照父组件左上角进行便宜
	        2.2、绝对定位后的组件不在占用自身原有位置
	        
	    3、语法：
	         .position(位置对象)
	         参数：
	             {x: 水平偏移量， y：垂直偏移量}
	             
	             

五、zIndex

	1、作用：控制层叠顺序
	2、语法：.zIndex(数字)

六、层叠布局

1、特点：层叠布局操作更简洁，编码效率更高（绝对定位的优势是更灵活）

2、语法：
    Stack({可以通过枚举的方式设置对齐方式}){
       Item1()
       Item2()
       Item3()     
    }
    枚举属性：
    alignContent: Alignment.对齐方式