重生之被裁员后开滴滴之前学习了鸿蒙(part2)

kzncu_

已于 2024-08-19 20:00:45 修改

阅读量464

点赞数 8

文章标签：学习鸿蒙系统鸿蒙

于 2024-08-19 19:57:21 首次发布

本文链接：https://blog.csdn.net/2301_82341091/article/details/141333502

版权

12.ArkUI-界面

1.组件

1.定义

容器组件()｛
//内容
｝

基础组件(参数)

ps：UI界面构建的最小元素是组件
ps：最外层只能有一个容器组件(距离build最近的)

2.组件属性方法

组件()｛｝
     .属性方法1(参数)
     .属性方法2(参数)
     .属性方法3(参数)
……

ps：若是基本组件可将大括号删掉
常用的组件方法

宽度 .width()
高度 .height()
背景色 .backgroundColor()
字体大小 .fontSize()
字体粗细 .fontWeight()

2.文本

Text()

Text(){
  imageSpan($r(''))  //图片
  Span('文本')
  Span('文本')
  Span('文本')
  ...
}

.textAlign(TextAlign.XXX)

3.字体颜色

枚举颜色 Color.颜色名
#开头的16进制 eg：‘#df3c50’

4.文字溢出省略号、行高

.textOverflow(｛
    overflow:TextOverflow.XXX
｝ 相当于名称↑  相当于枚举出的类型↑
)

ps:需配合.maxLines(行数)使用
** eg: .textOverflow(｛**
** overflow:TextOverflow.Ellipsis**
** ｝ )**
** .maxLines(2)**
** 即为从第二个开始实现溢文字出省略号**

.lineHight()

5.图片组件

image('网图地址')

image($r('app.media.文件名'))

6.输入框

TextInput(参数对象)
   .属性方法()


eg:
实现一个有提示文本的登录输入框

column({ space: 10 }){
TextInput({
placeholder:'请输入用户名'
})
.type(InputType.nomal)
        //相当于枚举↑
        
TextInput({
placeholder:'请输入密码'
})
.type(InputType.password)
        //相当于枚举↑
}

.placeholderColor()

ps:

** 控制组件间隙: space:值**
** 参数对象: placeholder: ‘提示的文本’**
** 属性方法: .type(InputType.XXX)**

** type中’XXX’的值: normal,password等**

7.按钮

button('文本内容')

8.复选框

Checkbox()

9.svg图标(随意改变大小仍不失真且能改变颜色)

image($r('app.media.文件名'))

.fillColor(Color.颜色)

10.布局元素的组成

屏幕截图 2024-04-09 112516.png

1.内边距padding

1.四个方向内边距相同
组件(){

}.padding(值)  

2.各个方向上的内边距不同
组件(){

}.padding({
    方向:值    
    left
    right
    top
    bottom
})

2.外边距margin

1.四个方向内边距相同
组件(){

}.margin(值)  

2.各个方向上的内边距不同
组件(){

}.margin({
    方向:值    
    left
    right
    top
    bottom
})

ps:
margin 与 space 的区别在于space使不同组件间的外边距都相同

3.边框border

1.各边相同
组件(){            

}.border({
    width:值,       //宽度，必须设置
    color:值,       //颜色
    style:值       //样式
    ...
})

eg:
    Column(){
      Image($r('app.media.2'))
        .width('40%')
        .height('20%')
        .padding({
          bottom:5
        })
        .border({
          width:10,
          color:'#ff0f29',
          style:BorderStyle.Solid
        })

        
2.各边不相同
组件(){            

}.border({
    width:{
      方向:值
    },
    color:{
      方向:值
    },     
    style:{
      方向:值
    } 
    ...
})

eg:
    Column(){
      Image($r('app.media.2'))
        .width('40%')
        .height('20%')
        .padding({
          bottom:5
        })
        .border({
          width:{
            top:3,left:3,right:3,bottom:10
          },
          color:{
            top:'#ff0f29',left:'#30b30e',right:'#30b30e',bottom:'#ff0f29'
          },
          style:{
            top:BorderStyle.Dashed,
            left:BorderStyle.Dashed,
            right:BorderStyle.Dashed,
            bottom:BorderStyle.Solid
          }
        })

11.设置圆角组件

1.四角相同
组件(){            					

}.borderRadius(参数)

2.四角不相同
组件(){            					

}.borderRadius({        		
      topLeft:参数,
      topRight:参数,
      bottomLeft:参数,
      bottomRight:参数
})

12.特殊形状的圆角设计

1.正圆

组件(){            					

}      
.width(值1)             //要求必须是正方形，宽高一样
.height(值1)
.borderRadius(值1 /2)   //圆角是宽高的一半

2.胶囊

组件(){            					

}      
.width(值1)             
.height(值2)
.borderRadius(值1 /2)   //圆角是高的一半

13.背景属性

背景色				backgroundColor
背景图 			backgroundimage
背景图位置 		backgroundimageposition
背景图尺寸 		backgroundimagesize

1.添加背景图

1.
组件(){           

}.backgroundimage(路径)

2.
组件(){           

}.backgroundimage('app.media.文件名')

是否平铺
组件(){           								

}.backgroundimage(背景图地址,背景图平铺方式-枚举ImageRepeat)
ps:
ImageRepeat.NoRepeat:不平铺
ImageRepeat.x:水平平铺
ImageRepeat.y:垂直平铺
ImageRepeat.xy:水平垂直均平铺
eg:
      组件(){           								
    
    }.backgroundimage($r('app.media.3'),ImageRepeat.xy)

2.背景图位置

1.
组件(){           								

}.backgroundimagePosition({x:位置坐标,y:位置坐标})  //左上角坐标

2.
组件(){           								

}.backgroundimagePosition(Alignment.位置)

3.背景定位-单位问题vp2px

.backgroundimagePosition({x:位置坐标,y:位置坐标}) 中坐标的单位与 .width(值) 或 .height(值) 的单位不同

背景定位默认单位：px,实际的物理像素点，设备出厂就定好了，与分辨率有关
宽高默认单位：vp,虚拟像素，相对于不同的设备会自动更换

函数:vp2px()

4.背景尺寸大小

1.
组件(){           								

}.backgroundimageSize({width:尺寸,height:尺寸})  

2.
组件(){           								

}.backgroundimageSize(ImageSize.XXX)

ImageSize.Contain：等比例缩放背景图，当宽高与组件尺寸相同停止缩放
ImageSize.Cover：等比例缩放背景图至图片完全覆盖组件范围

14.线性布局

1.主轴对齐方式

Column容器(纵向排)
Row容器(横向排)

排布主方向上的对齐方式

属性:
容器{

}.justifyContent(参数)
参数:枚举类型

ps:
FlexAlign.SpaceAround:每个"盒子"的空白间隙环绕宽度相同

2.交叉轴对齐方式

属性:
容器{

}.alignItem(参数)
参数:枚举类型
交叉轴在水平方向:HorizontalAlign.XXX
交叉轴在垂直方向:VerticalAlign.XXX

15.自适应伸缩

设置layoutWeight属性的子元素或兄弟元素，会按照权重进行分配主轴的空间

组件{

}.layoutWeight(数字)

Blank()

16.弹性布局-Flex

ps:涉及到换行时使用

1.定义

屏幕截图 2024-04-13 211338.png
ps:Flex默认主轴水平往右，交叉轴垂直往下

主轴方向					direction
主轴对齐方式			justifycontent
交叉轴对齐方式		alignltems
布局换行					 wrap

Flex(参数对象){
    子组件1
    子组件2
    子组件3
    ...
}

2.修改主轴方向

Flex({
direction:FlexDirection.Column  //默认垂直向下       
}){                  //.Row     默认水平往右
    子组件1          //.ColumnReverse  默认垂直往上
    子组件2          //.RowColumn  默认水平往左
    子组件3
    ...
}

3.主轴对齐方式

Flex({
justifyContent:FlexAlign.XXX //同 8.14.1线性布局 
}){                  
    子组件1          
    子组件2          
    子组件3
    ...
}

4.交叉轴对齐方式

Flex({
alignItems:ItemAlign.XXX 
}){                  
    子组件1          
    子组件2          
    子组件3
    ...
}

5.换行

Flex({
    wrap：FlexWrap.Wrap //多行布局
                  .NoWrap //单行布局
                  .WrapReverse //反转换行布局
})

17.绝对定位和层级zIndex

作用：控制组件位置，可以实现层叠效果

特点：

参照父组件左上角进行偏移
绝对定位后的组件不再占用自身原有位置

1.绝对定位

父组件(){
    组件()
        .position({
            x:值,
            y:值
        }); 
}

2.层级

组件(){

}.zIndex(数值) 数值越大层级越靠上

18.层叠布局

层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等
特点：层叠操作更简洁，编码效率高。(绝对定位的优势是更灵活）
stack 容器内的子元素的顺序为 item1 ->item2 -> item3
在这里插入图片描述

Stack({
    alignContent：Alignment.XXX
}){
    Item1()
    Item2()
    Item3()
}

ps：可用.zIndex()修改层级

19.滚动组件 Scroll

Scroll(){

}
ps:Scroll中的column组件不用设置height

20.Badge角标组件

Badge({
    count:,    //值为0则自动隐藏角标
    position:BadgePosition.XXX,   //图标角置
    style: {
        fontSize:      //文字大小
        badgeSize:     //角标大小
        badgeColor:    //角标颜色
    }
}){
    Image($r('...'))
}

21.Grid布局

屏幕截图 2024-04-20 142420.png

Grid(){
    GridItem(){

    }
}
.columnsTemplate()
.rowsTemplate()
.rowsGap()  //间距

13.交互

1.语法

.onClick( (参数)=>{} )

2.弹框

AlertDialog.show()

3.状态管理

普通变量: 只能在初始化时渲染，后续将不会再刷新。
状态变量: 需要装饰器装饰，改变会引起 U的渲染刷新(必须设置类型和初始值)

eg:

let msg1:string ='abc'

@Entry
@Component
struct Index{
    msg2: string = 'efg'
    build(){
      Column(){
          Text(msg1)
          Text(this.msg2)
          }
    }
}

@Entry
@component
struct Index{
    @state msg3:string ='Hello World'
    build(){
      Column(){
        Text(this.msg3)
          .onclick(()=>{
          this.msg3='你好，世界'
          })
      }
   }
}

4.ForEach 渲染控制

@state 数组名:string[] =['组件名1','组件名2','组件名3'...]
build(){
    Column(){
        ForEach( this.数组名,(item(代表数组成员):string,index(下标):number)=>{
        组件('item')
        })
    }
}

5.动画效果

.animation({
    duration:    //动画持续时间(单位毫秒)
})

6.控制元素缩放

.scale({
    x:    ,//水平方向缩放
    y:    //垂直方向缩放
})

kzncu_

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
重生之被裁员后开滴滴之前学习了鸿蒙(part2)

ps:Flex默认主轴水平往右，交叉轴垂直往下主轴方向 direction主轴对齐方式 justifycontent交叉轴对齐方式 alignltems布局换行 wrapFlex(参数对象){子组件1子组件2子组件3...
复制链接

扫一扫