/*
* Copyright (c) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import curves from '@ohos.curves';
import { promptAction } from '@kit.ArkUI';
import { AddressExchangeComponent } from './AddressExchangeComponent';
/**
* 使用交换元素组件样例
*
* 核心组件:
*
* 实现步骤:
* 1. 创建左右两边Text组件显示地址。设置初始偏移量以及文本对齐方式
* 2. 点击中间的图标时，修改是否切换的状态变量值和通过animateTo修改偏移量的值，来实现动态更新左右两边地址的显示，完成动画效果
*/
/**
* 功能描述：左右两侧图标可以进行交换，图标也会旋转，伴随着动画效果
*
* 推荐场景： 购票软件选择地址时使用
*
* 核心组件：
* 1. AddressExchangeComponent： 地址交换组件
*
* 实现步骤：
* 1. 自定义左侧地址模块样式
* @example
* @Builder
* leftAddressBuilder() {
* Text($r('app.string.address_exchange_address_left'))
* .width($r('app.string.address_exchange_address_width'))
* .textAlign(TextAlign.Center)
* .fontSize($r('app.string.address_exchange_font_size'))
* .onClick(() => {
* promptAction.showToast({
* message: $r('app.string.address_exchange_other_function'),
* duration: this.toastDuration
* });
* })
* }
* 2. 自定义右侧地址模块样式
* @example
* @Builder
* rightAddressBuilder() {
* Text($r('app.string.address_exchange_address_left'))
* .width($r('app.string.address_exchange_address_width'))
* .textAlign(TextAlign.Center)
* .fontSize($r('app.string.address_exchange_font_size'))
* .onClick(() => {
* promptAction.showToast({
* message: $r('app.string.address_exchange_other_function'),
* duration: this.toastDuration
* });
* })
* }
* 3. 自定义交换图标模块样式
* @example
* @Builder
* exchangeIcon() {
* Image($r('app.media.address_exchange_airplane'))
* .size({
* height: $r('app.integer.address_exchange_airplane_size'),
* width: $r('app.integer.address_exchange_airplane_size')
* })
* Image($r('app.media.address_exchange_recycle'))
* .id('translate_image')
* .size({
* height: $r('app.integer.address_exchange_recycle_size'),
* width: $r('app.integer.address_exchange_recycle_size')
* })
* .rotate({ angle: this.rotateAngle })
* }
* 4. 初始化地址交换动画配置（可选参数）
* @example
* private translateAnimationParam: AnimateParam = { curve: curves.springMotion() };
* 5. 定义单次偏移距离
* @example
* @State distance: number = this.rowWidth * 0.84;
* 6. 初始化地址交换组件容器Flex内组件的排列方向（可选参数，默认为横向）
* @example
* private flexDirection: FlexDirection = FlexDirection.Row;
* 7. 定义交换图标动画执行函数（可选参数，若无动画可以不进行定义）
* @example
* exchangeIconAnimationFunction(): void {
* // 图标一次旋转的角度
* const rotateAddAngle: number = 180;
* animateTo({ curve: curves.springMotion() }, () => {
* this.rotateAngle += rotateAddAngle;
* })
* }
* 8. 构建地址交换组件
* @example
* AddressExchangeComponent({
* leftAddressBuilderParam: this.leftAddressBuilder,
* rightAddressBuilderParam: this.rightAddressBuilder,
* translateAnimationParam: this.translateAnimationParam,
* exchangeIconBuilderParam: this.exchangeIcon.bind(this),
* exchangeIconAnimationFunction: this.exchangeIconAnimationFunction.bind(this),
* distance: this.distance,
* flexDirection: this.flexDirection
* })
*/
@Component
export struct AddressExchangeViewComponent {
// 旋转角度
@State rotateAngle: number = 0;
// 整体内容区宽度
private rowWidth: number = 300;
// 内容相隔距离
private columnSpace: number = 16;
// toast弹窗时长
private toastDuration: number = 2000;
// 地址交换动画的配置，可由开发者自定义
private translateAnimationParam: AnimateParam = { curve: curves.springMotion() };
// 地址交换组件容器Flex的排列方向
private flexDirection: FlexDirection = FlexDirection.Row;
// 单次偏移距离
@State distance: number = this.rowWidth * 0.84;
/**
* 左侧的地址
*/
@Builder
leftAddressBuilder() {
Text($r('app.string.address_exchange_address_left'))
.width($r('app.string.address_exchange_address_width'))
.textAlign(TextAlign.Center)
.fontSize($r('app.string.address_exchange_font_size'))
.onClick(() => {
promptAction.showToast({
message: $r('app.string.address_exchange_other_function'),
duration: this.toastDuration
});
})
}
/**
* 右侧的地址
*/
@Builder
rightAddressBuilder() {
Text($r('app.string.address_exchange_address_right'))
.width($r('app.string.address_exchange_address_width'))
.textAlign(TextAlign.Center)
.fontSize($r('app.string.address_exchange_font_size'))
.onClick(() => {
promptAction.showToast({
message: $r('app.string.address_exchange_other_function'),
duration: this.toastDuration
});
})
}
/**
* 点击即可交换的图标
*/
@Builder
exchangeIcon() {
Image($r('app.media.address_exchange_airplane'))
.size({
height: $r('app.integer.address_exchange_airplane_size'),
width: $r('app.integer.address_exchange_airplane_size')
})
Image($r('app.media.address_exchange_recycle'))
.id('translate_image')
.size({
height: $r('app.integer.address_exchange_recycle_size'),
width: $r('app.integer.address_exchange_recycle_size')
})
.rotate({ angle: this.rotateAngle })
}
/**
* 图标旋转动画
*/
exchangeIconAnimationFunction(): void {
// 图标一次旋转的角度
const rotateAddAngle: number = 180;
animateTo({ curve: curves.springMotion() }, () => {
this.rotateAngle += rotateAddAngle;
})
}
build() {
// 地址交换
Column({ space: this.columnSpace }) {
Column() {
/**
* 构建地址交换组件
* leftAddressBuilderParam：左侧地址模块
* rightAddressBuilderParam：右侧地址模块
* translateAnimationConfig：地址交换动画的配置
* exchangeIconBuilderParam：交换图标模块
* exchangeIconAnimationFunction：图标旋转动画执行函数
* distance：单次偏移距离
* flexDirection：地址交换组件容器Flex的排列方向
*/
AddressExchangeComponent({
leftAddressBuilderParam: this.leftAddressBuilder,
rightAddressBuilderParam: this.rightAddressBuilder,
translateAnimationParam: this.translateAnimationParam,
exchangeIconBuilderParam: this.exchangeIcon.bind(this),
exchangeIconAnimationFunction: this.exchangeIconAnimationFunction.bind(this),
distance: this.distance,
flexDirection: this.flexDirection
})
}
.width(this.rowWidth)
Row({ space: this.columnSpace }) {
Text($r('app.string.address_exchange_date'))
.fontSize($r('app.string.ohos_id_text_size_headline'))
.fontWeight(FontWeight.Medium)
.height($r('app.integer.address_exchange_date_height'))
Text($r('app.string.address_exchange_week'))
.height($r('app.integer.address_exchange_date_height'))
}
.width(this.rowWidth)
.onClick(() => {
promptAction.showToast({
message: $r('app.string.address_exchange_other_function'),
duration: this.toastDuration
});
})
Button($r('app.string.address_exchange_search_ticket'))
.fontColor(Color.White)
.height($r('app.integer.address_exchange_button_height'))
.width(this.rowWidth)
.onClick(() => {
promptAction.showToast({
message: $r('app.string.address_exchange_other_function'),
duration: this.toastDuration
});
})
}
.backgroundColor($r('app.string.ohos_id_color_sub_background'))
.borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
.width($r('app.string.address_exchange_content_size'))
.height($r('app.integer.address_exchange_total_height'))
.margin($r('app.string.ohos_id_card_margin_start'))
}
}