UI（一）控件

ImomoTo

已于 2024-06-26 15:48:29 修改

阅读量658

点赞数 19

分类专栏： HarmonyOS 文章标签： ui HarmonyOS 鸿蒙 HarmonyOS Next

于 2024-06-25 14:58:54 首次发布

本文链接：https://blog.csdn.net/qi85481455/article/details/139959255

版权

HarmonyOS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、声明式开发范式

1.1、声明式语法描述

声明式开发范式组成.png

装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。

除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：

@Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
@Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

1.2、声明式UI描述

（1）、创建组件

根据组件构造方法不同，创建组件包含有参数和无参数两种方式

无参数
如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容

Column(){
  Text(' Item 1')
  Divider()
  Text(' Item 2')
}

有参数
如果组件的接口定义包含构造函数，则在组件后面的()内填写相应的参数

Image组件的必选参数src

Image('http://www.test.com/test.png')

Text组件的非必选参数content

//string类型的参数
Text('This is a text content')
//无参形式
Text()
//$r 形式引入应用资源
Text($r('app.string.module_desc'))

变量或者表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求

//设置变量用于参数
Image(this.imagePath)
Image('http://' +  this.imagePath)
Text('count: ${this.count}')

（2）、配置属性

Text(this.message)
  .fontSize(50)

配置组件的多个属性

//配置多个属性
Text('跳转')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .width(100)
  .height(20)

除了直接传递常亮参数外，还可以传递变量或者表达式

//配置多个属性
Text('跳转')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  //传递变量或者表达式
  .width(this.count % 2 == 0 ? 100 : 200)
  .height(this.count + 20)

ArkUI还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。

例如，可以按以下方式配置Text组件的颜色和字体样式。

Text(this.message)
  .fontSize(50)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Bold)

（3）、配置事件

事件方法以"."链式调用的方式配置系统组件支持的事件，建议每个事件单独写一行
使用箭头函数配置组件的事件方法。

Text(this.message)
  .fontSize(50)
  .onClick(() => {
    console.log("this is a click")
  })

使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件。

//使用匿名函数表达式配置组件的事件方法，要求使用bind
.onClick(function(){
  console.log("this is a click")
}.bind(this))

使用组件的成员函数配置组件的事件方法。

doClick(): void{
  this.count += 2
}

 //使用组件的成员函数配置组件的事件方法。
 .onClick(this.doClick.bind(this))

使用声明的箭头函数，可以直接调用，不需要bind this。

fn = () => {
  this.count += 2
}

//使用声明的箭头函数，可以直接调用，不需要bind this。
.onClick(this.fn)

（4）、配置子组件

如果组件支持子组件配置，则需在尾随闭包"{…}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。
以下是简单的Column组件配置子组件的示例。

Column() {
  Text('Hello')
    .fontSize(100)
  Divider()
  Text(this.myText)
    .fontSize(100)
    .fontColor(Color.Red)
}

容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。

//容器组件均支持子组件配置，可以实现相对复杂的多级嵌套
Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

二、常用的组件

2.1、基础组件

Black

Black是空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。
需要注意的是，Black组件仅当其父组件为Row/Colum，且父容器设置宽度后才生效

Button

Button的基本使用

//Button
Button('Button01')
  .borderRadius(8)
  .backgroundColor(Color.Yellow)
  .width(200)
  .fontColor(Color.Blue)
  /**
   * 通过type设置按钮显示样式
   * ButtonType.Capsule  胶囊类型 圆角默认为高度的一般
   * ButtonType.Circle 圆形按钮
   * ButtonType.Normal 普通按钮
   */
  .type(ButtonType.Normal)

Button组件支持包含子组件

如果包含子组件，就不能设置文字了

Button只能包含一个子组件

如果想包含多个字组件，可以使用容器进行包裹

//Button组件包含子组件，但是文字就不会显示
Button( { type: ButtonType.Capsule, stateEffect: true }) {
  Row(){
    Blank()
    Text('Hello Wolrd')
    LoadingProgress()
      .width(20)
      .height(20)
      .color(0xffffff)
    Blank()
  }
  .width('100%')
}
.width(200)
.height('5%')

CheckBox

多选框组件，在实例化时主要是设置多选框的名称，多选框的群组名称

//CheckBox
Checkbox({name:'checkbox1',group:'checkboxGroup'})
  .select(true)  //设置选中
  .selectedColor(Color.Red)  // 设置选中颜色
  .onChange((value:boolean) => {  // 设置选中监听
    console.info('checkbox1 change is '+ value)
  })

Checkbox({name:'checkbox2',group:'checkboxgroup'})
  .select(false)
  .selectedColor(Color.Blue)

CheckBoxGroup

多选框群组，用于控制多选框全选或者不全选状态，通过group表示同一个多选框群组

//CheckBoxGroup
Row(){
  CheckboxGroup({group:'foodCg'})
    .selectedColor(Color.Blue)
    .selectAll(true)
  Text('全要').fontSize(30).fontColor(Color.Black)
}

Row(){
  Checkbox({name:'checkbox1',group:'foodCg'})
    .selectedColor(Color.Blue)
  Text('鸡翅').fontSize(30).fontColor(Color.Black)
}
Row(){
  Checkbox({name:'checkbox2',group:'foodCg'})
    .selectedColor(Color.Blue)
  Text('可乐').fontSize(30).fontColor(Color.Black)
}

格式工厂屏幕录像20240621_160828 00_00_00-00_00_10 00_00_00-00_00_30.gif

DataPanel

DataPannel是数据面板组件，用于将多个数据占比情况使用占比图展示

//DataPanel
Column() {
  DataPanel({ values: this.dataPanelValue, // values 是数据值列表 最多支持9个数据
    max: 100, // 表示最大值
    type: DataPanelType.Circle })  // 类型
    .width(350)
    .height(300)


  DataPanel({ values: this.dataPanelValue,
    max: 100,
    type: DataPanelType.Line })
    .width('80%')
    .height('5%')

}

DataPicker

DataPicker是选择日期的滑动选择器组件

DatePicker({
  start: new Date('1970-01-01'), // 时间选择器起始时间  默认为Data('1970-1-1')
  end: new Date('2100-1-1'), //结束时间  默认时间为Date('2100-1-1')
  selected: new Date('2024-06-21') //  设置选中时间  默认值为当前系统时间
})
  .lunar(true) //设置日期是否显示农历
  .onChange((value: DatePickerResult) => {
    console.log("select data is :" + JSON.stringify(value))
  })

Divider

Divider是分割器组件，用于分割不同内容块/内容元素

   //Divider
      Divider() // 默认为水平品分割线
      Text('分割线下面元素').fontSize(30)

      // 使用vertical 设置垂直分割线
      Divider().vertical(true).height(100)
      Text('分割线下面元素').fontSize(30)

      //设置分割线属性
      Divider()
        .strokeWidth(15) //宽度
        .color(Color.Pink) // 颜色
        .lineCap(LineCapStyle.Round)  //端点样式
      Text('分割线下面元素').fontSize(30)

Gauge

Gauge是一种数据量规图标组件，用于将数据展示为环形图表

//Guage
Gauge({ value: 75 }) // 默认值为75
  .value(23) //属性和参数都设置value  以属性为准
  .startAngle(210)
  .endAngle(150)
    // colors是一个颜色值数组，表示该量规图由4段颜色组成
  .colors([[0x317AF7, 1], [0x5ba854, 1], [0xe08c3a, 1], [0x9c554b, 1]])
  .strokeWidth(20)
  .width(200)
  .height(200)

Image

加载本地图片

//Image
Image($r('app.media.icon'))
  .width(120)
  .height(120)

ImageAnimator

// 初始动画状态
@State animationStatus: AnimationStatus = AnimationStatus.Initial

build(){
  Column(){

    Button('开始')
      .width(100)
      .height('5%')
      .onClick(() => {
        this.animationStatus = AnimationStatus.Running
      })

    Button('暂停')
      .width(200)
      .height('8%')
      .onClick(() => {
        this.animationStatus = AnimationStatus.Paused
      })

    ImageAnimator()
      .images([{
        src:$r('app.media.img1'),
        duration:200,
        width:240,
        height:260,
        top:0,
        left:0
      },{
        src:$r('app.media.img2'),
        duration:200,
        width:240,
        height:260,
        top:0,
        left:170
      },{
        src:$r('app.media.img3'),
        duration:200,
        width:220,
        height:240,
        top:120,
        left:170
      },{
        src:$r('app.media.img4'),
        duration:200,
        width:220,
        height:240,
        top:120,
        left:0
      }])
      .state(this.animationStatus)
      .reverse(false)  //是否逆向播放
      .fixedSize(false)  //是否固定大小
      .preDecode(2)  //是否启动预解码
      .iterations(-1)  // 循环次数
      .width('100%')
      .height('100%')
      .margin({
        left:0,
        top:100
      })


  }
}

格式工厂屏幕录像20240625_140618 00_00_05-00_00_12.gif

LoadingProgress

//LoadingProgres
LoadingProgress()
  .color(Color.Red)

Marquee

跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。

//Marquee
Marquee({
  start:true,   //控制跑马灯是否进入播放状态
  step:12,      //滚动动画文本的滚动步长，默认值为6  单位是vp
  loop:-1,     //循环次数
  fromStart:true, //设置文本从头开始滚动或者反向滚动
  src:'HarmonyOS被成为鸿蒙系统'
}).fontSize(30)

Navigation

Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单

/**
 * 自定义 一个ToolBar组件
 */
@Builder NavigationToolBar(){
  Row(){
    Text('首页').fontSize(20).margin({left:75})
    Text('+').fontSize(20).margin({left:75})
    Text('我').fontSize(20).margin({left:75})
  }
}

//Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题，工具栏，菜单
Navigation(){
  Flex(){
  }
}
.toolBar(this.NavigationToolBar) // 自定义一个ToolBar组件

ImomoTo

关注

19
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
UI（一）控件

Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。Black是空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。需要注意的是，Black组件仅当其父组件为Row/Colum，且父容器设置宽度后才生效。多选框群组，用于控制多选框全选或者不全选状态，通过group表示同一个多选框群组。跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。多选框组件，在实例化时主要是设置多选框的名称，多选框的群组名称。
复制链接

扫一扫