waft-ui组件的学习和测试 - picker，switch和card

[yanmingjian]

接着之前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",
  }
}

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!");
});

事件的响应结果展示