【平头哥Sipeed LicheeRV 86 Panel测评】- 5 waft-ui 组件测试（2）

我爱下载

【平头哥Sipeed LicheeRV 86 Panel测评】- 5 waft-ui 组件测试（2） [复制链接]

 

Waft-UI组件学习（2）

接着之前waft-UI中组件的测试，本次继续测试picker，switch和card。

1、picker组件的学习

Waft-UI中提供了picker组件，picker组件是一个两级的列表选择组件，我们可以通过调用这个组件构造一个选择器。

1.1 组件的调用方法

      在index.json中增加button组件的引用，方法为：

{
  "usingComponents": {
       "x-picker": "waft-ui/assembly/picker/picker"
  }
}

1.2picker的显示

在index.axml文件中，增加显示脚本。

      <view class="flex">
        <x-picker
            show="{{showPicker}}"
            pickerData="{{pickerData}}"
            change="handleChange"
            clickConfirm="clickConfirm"
            clickCancel="clickCancel"
        >
        </x-picker>
      </view>

实际显示效果

1.3 picker的事件响应

在index.ts中编写picker的事件响应函数，picker提供了三个事件响应，一个是change事件，一个确认，一个取消。

    this.addEventListener("clickConfirm",(event,target) => {
      console.log("===test-picker的clickConfirm事件===")
      console.log(event.toString());
      (target as Index).setState(
        JSON.parseObject(`{"showPicker":false}`)
      );
      (target as Index).setState(
        JSON.parseObject(`{"showTimePicker":false}`)
      );
    })

    this.addEventListener("clickCancel",(event,target) => {
      console.log("===test-picker的clickCancel事件===")
      console.log(event.toString());
      (target as Index).setState(
        JSON.parseObject(`{"showPicker":false}`)
      );
      (target as Index).setState(
        JSON.parseObject(`{"showTimePicker":false}`)
      );
    })

    this.addEventListener("handleChange",(event,target) => {
      console.log("===test-picker的handleChange事件===")
      console.log(event.toString());
})

事件的响应结果展示

滚动选项列表时的事件信息。

按下确定按键时的响应信息，信息中含有当前选中一级条目、二级条目索引和值。

按下取消键时的响应信息，信息中也含有当前选中一级条目、二级条目索引和值。这个需要通过程序去判断，是否取用当前的返回值。

2、card组件的学习

Waft-UI中提供了card卡片组件，这个卡片可以作为容器，可以放置其它的组件。

2.1 组件的调用方法

      在index.json中增加card组件的引用，方法为：

{
  "usingComponents": {
        "x-card": "waft-ui/assembly/card/card",
  }
}

2.2 card组件的显示

在index.axml文件中添加card组件的显示部分，可以为card组件设置标题，调整宽度和长度，背景色，相当的灵活。     

     <view class="flex">
      <view style="height: 10rpx"> </view>
     
       <x-card title="SWITCH" width="55vw" height="40vh" titleAlign="center" bgColor="green">
         <x-switch checked="{{true}}"> </x-switch><view class="dot"></view>
         <view class="doth"></view>
         <x-switch checked="{{false}}" onTap="change1"></x-switch><view class="dot"></view>
      </x-card>
     </view>

3、switch组件的学习

Waft-UI中提供了switch显示组件，switch是一个二值组件，类似开关一样。

3.1组件的调用方法

      在index.json中增加card组件的引用，方法为：

{
  "usingComponents": {
        "x-card": "waft-ui/assembly/card/card",
        "x-switch": "waft-ui/assembly/switch/switch"
  }
}

3.2 switch组件的显示

      在index.axml中增加switch组件的调用，这里将前面的card组件和switch组件组成一个部件显示，将switch组件放置在card内。     

      <view class="flex">
        <view style="height: 10rpx"> </view>
        <x-card title="SWITCH" width="55vw" height="40vh" titleAlign="center" bgColor="green">
         <x-switch checked="{{true}}"> </x-switch><view class="dot"></view>
         <view class="doth"></view>
         <x-switch checked="{{false}}" onTap="change1"></x-switch><view class="dot"></view>
       </x-card>
      </view>

实际显示效果，包含了card组件，背景色设置为绿色和switch组件

3.3 switch的事件响应

      前面的显示调用中，我们将switch的onTap事件导出名为“change1“的事件。我们只需要响应这个事件就可以了。

    this.addEventListener("change1", (e, target): void => {
      console.log("----> switch事件:changed!");
   });

事件的响应结果展示

 

Jacktang

picker组件功能挺多

我爱下载

Jacktang 发表于 2022-4-2 21:32 picker组件功能挺多

就是资料少点，都需要自己去摸索