王学岗鸿蒙开发(北向)——————(四、五、六)ArkUi声明式组件

news2025/10/31 17:57:02

在这里插入图片描述

普通组件

在这里插入图片描述
1,注意，如上图，build只能有一个根节点
2,@Entry表示程序的入口
@Component表示自定义的组件
@Preview表示可以预览
3，图片存放的地方

4，
Image组件最好只给宽度，给了高度又给宽度容易失真。

build() {
    Row() {
      //图片不需要写后缀
      Image($r('app.media.icon'))
        .width(300) //宽有两种写法，1是数字，而是百分比
        .height('40%') //百分比要带引号
        .borderRadius(400) //圆角
        .objectFit(ImageFit.Fill)//填充
        .interpolation(ImageInterpolation.High)//设置差值效果，High可以使图片更清晰
        .onClick(()=>{
          //点击事件
          console.log("我是点击事件")
        })
        .onComplete()//图片加载成功回调函数
        .onError()//图片加载异常的时候回调

    }
    .backgroundColor('green')
    .height('100%')
  }

在这里插入图片描述
string资源要修改多处

     Text($r('app.string.module_desc'))
        .fontWeight(FontWeight.Bold)//fontWeight有两种写法
        // .fontWeight(400)//fontWeight这种写法，粗细默认是400，大于400就会加粗

    TextInput({
    //对象属性
         placeholder:'请输入用户名'
       }).width(400)

在这里插入图片描述
Button组件里可以增加Image组件。

在这里插入图片描述

容器组件

1，Row

    Row({space:30}){//space表示间隙
        Text('赵云')
        Text('马超')
        Text('张飞')
        Text('黄忠')
      }.backgroundColor('green')
      .width('100%')
      .height(200)
      .justifyContent(FlexAlign.Center)//主轴方向上如何布局
      .alignItems(VerticalAlign.Bottom)//交叉轴的对齐方式

Cloumn

.alignItems(HorizontalAlign.End)

Column主轴的布局
在这里插入图片描述
row主轴的布局

在这里插入图片描述
弹性布局组件

在这里插入图片描述
direction的取值有FlexDirection.Row、FlexDirection.RowReverse、FlexDirection.Column、FlexDirection.ColumnReverse
效果图如下

在这里插入图片描述
FlexWrap的取值有:FlexWrap.Wrap、FlexWrap.NoWrap、FlexWrap.WrapReverse
效果如下图,1 2 3的宽度都是’50%’

justifyContent与Column和Row相同
alignItemsFlex
如下图，三个高度不同的元素，取值分别是 ItemAlign.Auto,ItemAlign.Start,ItemAlign.Center,ItemAlign.End,ItemAlign.Stretch,ItemAlign.Baseline
在这里插入图片描述
alignContent
先看代码

在这里插入图片描述

进阶

Blank组件，类似于flutter的Spacer()填充空白区域

在这里插入图片描述

ForEach(
     item,
     (item:string)=>{
       Text(item)
     },
      //keyGenerator不要用默认的要自己定义，如何定义后面会更新，键生成函数，
      //为数组每一项生成一个唯一标识，组件是否重新渲染的判断标准
   )

arts中，数字等变量非0非null为true

在这里插入图片描述