HarmonyOS - 自定義組件之Switch開關
前言
最近在開發FA項目時使用到switch開關組件，該switch組件是基于JS擴展的類Web開發范式組件中的基礎組件 。在使用的過程中發現了一些問題，比如：
1、設置寬高等樣式屬性不會改變switch組件本身的寬高，而是會修改switch組件的內邊距。
2、switch組件存在一定比例的縮放。
使用switch組件在頁面布局時存在上述等問題，但可通過一些技術手段（transform屬性的scale）或一些替代方案，達到預期效果。基于此，通過現在已掌握的FA相關知識實現一個簡單的自定義switch開關組件。
效果展示
實現原理
基于css關鍵幀動畫animation和@keyframes，通過對switch的滑塊設置css屬性position: absolute，并添加相應的動畫class，即可達到switch開關的過渡效果。給switch設置固定的寬度和高度，保證switch組件不被縮放，在switch組件的外層包裹div組件，來實現布局的合理性。
css動畫樣式官方指導API：
屬性名稱 | 數據類型 | 默認值 | 描述 |
transform | string | - | 支持同時設置平移/旋轉/縮放等屬性。 |
animation6+ | string | 0s ease 0s 1 normal none running none | 格式：duration | timing-function | delay | iteration-count | direction | fill-mode| play-state | name，每個字段不區分先后，但是 duration / delay 按照出現的先后順序解析。 |
animation-name | string | - | 指定@keyframes的名稱。 |
animation-fill-mode | string | none | 指定動畫開始和結束的狀態：1、none：在動畫執行之前和執行之后都不會應用任何樣式到目標上；2、forwards：在動畫結束后，目標將保留動畫結束時的狀態（在最后一個關鍵幀中定義）；3、backwards6+：動畫將在animation-delay期間應用第一個關鍵幀中定義的值。當animation-direction為"normal"或"alternate"時應用from關鍵幀中的值，當animation-direction為"reverse"或"alternate-reverse"時應用to關鍵幀中的值。4、both6+：動畫將遵循forwards和backwards的規則，從而在兩個方向上擴展動畫屬性。 |
animation-duration | <time> | 0 | 定義一個動畫周期。支持的單位為[s(秒) | ms(毫秒) ]，默認單位為ms，格式為：1000ms或1s。（注意：animation-duration 樣式必須設置，否則時長為 0，則不會播放動畫。） |
animation-delay | <time> | 0 | 定義動畫播放的延遲時間。支持的單位為[s(秒) | ms(毫秒) ]，默認單位為ms，格式為：1000ms或1s。 |
translateX | <length> | <percent> | - | X軸方向平移動畫屬性。 |
實現過程
switch組件 hml 部分：
<div class="define-switch">
<!-- switch 滑塊背景包裹節點 -->
<div class="switch-wrapper {{ isChecked ? 'bg-blue' : 'bg-grey'}}" onclick="handleClick"></div>
<!-- switch 滑塊 -->
<div class="switch-block {{ isChecked ? 'closed' : 'opened'}}"></div>
</div>
switch組件 css 部分：
.define-switch {
position: relative;
padding: 2px;
}
.switch-wrapper {
position: relative;
width: 36px;
height: 20px;
background-color: rgba(0,0,0,0.05);
border-radius: 25px;
}
.switch-block {
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
background-color: #FFFFFF;
border-radius: 8px;
}
.opened {
animation-name: open;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.closed {
animation-name: close;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.bg-blue {
background-color: #0A59F7;
}
.bg-grey {
background-color: rgba(0,0,0,0.05);
}
@keyframes open {
from {
transform: translateX(16px);
}
to {
transform: translateX(0px);
}
}
@keyframes close {
from {
transform: translateX(0px);
}
to {
transform: translateX(16px);
}
}
switch組件 js 部分：
export default {
name: 'DefineSwitch',
data() {
return {
isChecked: false,
}
},
handleClick(evt) {
console.log('事件對象event：' + JSON.stringify(evt) + this.isChecked);
this.isChecked = ! this.isChecked; // 修改isChecked的值
this.$emit('switchChange', {checked: this.isChecked}); // 向父組件傳遞值
}
}
父組件 hml中：
<!-- 引入組件 -->
<element name="mySwitch" src="../mySwitch/mySwitch.hml"></element>
<!-- 組件使用 -->
<div style="width: 40px; height: 24px;">
<mySwitch @switch-change="handleSwitchChange"></mySwitch>
</div>
父組件 js中：
handleSwitchChange(e) {
console.log('子組件傳來的數據' + e.detail.checked); // 父組件中獲取到switch的開關狀態
}
實現中遇到的問題及解決方案：
問題描述：在實現關鍵幀動畫時switch滑塊執行完最后一幀動畫后會回到原來的位置，導致動畫執行效果不理想。
原因分析：動畫屬性animation的animation-fill-mode屬性默認為none（ 在動畫執行之前和之后都不會應用任何樣式到目標上 ）。
解決方案：將animation-fill-mode屬性設置為 forwards （ 在動畫結束后，目標將保留動畫結束時的狀態 ）。
總結
此自定義組件是對css關鍵幀動畫、父子組件通信的回顧。
