黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发 视频笔记 基础组件笔记！！以及用法

鸿蒙

1.基础Arkui组件

(1)快速入门

@Entry                  ————装饰器，标记当前组件是入口组件
@Component              ————标记自己定义组件
strcut Index{           ————自定义组件：可复用UI单元
    @State message: string = 'helloword'  --@State 标记该变量是状态变量，值变化时会触发UI刷新
    build(){                        --UI描述
        Row(){              
          Colum(){              
             Text()
                .fontsize('')
                .fontWeight('')
                .onClick(()=>{
                 //..处理事件
                })
            }
            .width('')
        }
        .height('')
    }
}

(2)Image组件

1.声明Iamge组件并设置图片源：

Image(src: string | PixelMap | Resource)

.string格式，通常用来加载网络图

Image('http://xxx.png')

.PixelMap格式，可以加载像素图片，常在图片编辑中

Image(pixelMasObject)

.Resource格式，加载本地图片，推荐使用

Image($r('app.media.icon'))
Image($rawfile('icon.png'))

2.添加图片属性

Image($r('app.media.icon'))
    .width(100) //宽
    .height(100) //高度
    .bodrderRadius(10) //边框
    .interpolation(ImageInterpolation.High)  //图片插值 弥补，让图片清晰

(3)Text组件

---文本组件

1.声明Text组件并设置文本内容

Text(content?:string | Resource)

.string格式，直接填写文本内容:

Text('nmmdw')

.Resource格式读取本地资源文件:

Text($('app.string.width_label'))

2.添加文本属性

Text('你mm的')
    .lineHeight(32)//行高
    .fontsize(20)//字体大小
    .fontcolor('#ff1876f8')//字体颜色
    .fontWeight(FontWeight.Medium)//字体粗细

(4)TextInput组件

TextInput：文本输入框

1.声明TextInput组件：

TextInput( {placeholder?:ResourceStr，
text?:ResourceStr})

.palceHoder:输入框五输入时的提示文本

TextInput( {palceholder:'请输入账号或手机号'})

.text:输入当前的文本内容

TextIput({text:'666'})

2.添加属性和事件

TextInput({text:'当前输入文本})
    .width(150)//宽
    .height(30)//高
    .backgroundcolor('#FFF')//背景色       .type(InputType.Password)//输入框类型，密码不可见.
    .onChange(value = > {
        //value 是用户输入的文本内容
    })

(5)Buttom按钮

1.声明Button组件，label是按钮文字：

Button(lable?:ResourceStr)

.文字型按钮

Button('点我')

.自定义按钮，在Button内嵌式套其他组件

Button(){
    Image($r('app.media.serch'))
        .width(20)
        .margin(10)
}

2.添加属性和事件

Button('点我')
    .width(100)
    .height(30)
    .type(ButtonType.Normal)//按钮类型
    .onclick(()=>{
        //处理点击事件
})

(6)Slider，组件

Silder：滑动条组件

Slider(option?:SliderOption)
Slider({
     min:0,//最小值
     max:100,//最大值
     value:30,//当前值
     step:10,// 滑动步长
     style:SliderStyle.OutSet, //InSet
     direction:Axis.Horizontal,//Vertical
     reverse:false//是否反向滑动
})
    .width('90%')
    .showTips(true) //是否展示Value百分比提示
    .blockColor('#36d')
    .onChange(value=>{
     //value就是当前滑块的值
    })

(7)Column和Row组件

@Entry
@component
 struct Index {
    build(){
     Column({space:20}){
        Text('item1')
        Text('item2')
        Text('item3')
        Text('item4')
     }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    }
}

 

属性名字方法	说明	参数
justifCount	设置子元素在主轴方向的对齐格式	FelxAlign枚举
alignItems	设置子元素在交叉轴的对齐格式	Row容器使用VerticalAlihn枚举，Column使用HorizontalAlign枚举

下期发布携程静态UI界面，及其源代码