31.Harmonyos Next仿uv-ui 组件NumberBox 步进器组件异步操作处理
// NumberBoxAsyncDemo.ets
// NumberBox步进器异步操作示例
import { NumberBox } from '../components/NumberBox';
@Entry
@Component
struct NumberBoxAsyncDemo {
@State value1: number = 0; // 异步初始化
@State value2: number = 5; // 异步验证
@State value3: number = 3; // 延迟更新
@State value4: number = 10; // 模拟服务器限制
@State loading1: boolean = true; // 加载状态
@State loading2: boolean = false; // 验证状态
@State loading3: boolean = false; // 更新状态
@State loading4: boolean = false; // 服务器状态
@State serverValue: number = 10; // 服务器端的值
@State errorMessage: string = ''; // 错误信息
aboutToAppear() {
// 模拟异步获取初始值
this.fetchInitialValue().then(value => {
this.value1 = value;
this.loading1 = false;
});
}
// 模拟从服务器获取初始值
private fetchInitialValue(): Promise<number> {
return new Promise<number>((resolve) => {
setTimeout(() => {
resolve(8); // 假设服务器返回的值是8
}, 2000); // 模拟网络延迟
});
}
// 模拟异步验证
private validateValueAsync(value: number): Promise<number> {
return new Promise<number>((resolve) => {
setTimeout(() => {
// 假设我们需要将值四舍五入到最接近的整数
resolve(Math.round(value));
}, 1000); // 模拟处理延迟
});
}
// 模拟异步更新服务器值
private updateServerValue(value: number): Promise<boolean> {
return new Promise<boolean>((resolve, reject) => {
setTimeout(() => {
// 假设服务器只接受10-20之间的值
if (value >= 10 && value <= 20) {
this.serverValue = value;
this.errorMessage = '';
resolve(true);
} else {
this.errorMessage = '服务器只接受10-20之间的值';
reject(new Error('值超出范围'));
}
}, 1000); // 模拟网络延迟
});
}
build() {
Column() {
// 标题
Text('NumberBox 异步操作示例')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
// 异步初始化
Row() {
Text('异步初始化')
.width('40%')
.fontSize(16)
if (this.loading1) {
// 显示加载状态
LoadingProgress()
.width(24)
.height(24)
} else {
NumberBox({
value: this.value1,
onChange: (value: number) => {
this.value1 = value;
}
})
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.padding(10)
// 异步验证
Row() {
Text('异步验证(四舍五入)')
.width('40%')
.fontSize(16)
Stack() {
NumberBox({
value: this.value2,
step: 0.5, // 设置步长为0.5
decimalLength: 1, // 显示1位小数
onChange: (value: number) => {
this.loading2 = true;
// 临时更新UI
this.value2 = value;
// 异步验证
this.validateValueAsync(value).then(validValue => {
this.value2 = validValue; // 更新为验证后的值
this.loading2 = false;
});
}
})
if (this.loading2) {
// 显示验证中状态
LoadingProgress()
.width(20)
.height(20)
.position({x: '50%', y: '50%'})
.translate({x: -10, y: -10})
}
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.padding(10)
// 延迟更新
Row() {
Text('延迟更新(500ms)')
.width('40%')
.fontSize(16)
Stack() {
NumberBox({
value: this.value3,
onChange: (value: number) => {
this.loading3 = true;
// 延迟更新，模拟网络延迟
setTimeout(() => {
this.value3 = value;
this.loading3 = false;
}, 500);
}
})
if (this.loading3) {
// 显示更新中状态
LoadingProgress()
.width(20)
.height(20)
.position({x: '50%', y: '50%'})
.translate({x: -10, y: -10})
}
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.padding(10)
// 模拟服务器限制
Row() {
Text('服务器限制(10-20)')
.width('40%')
.fontSize(16)
Stack() {
NumberBox({
value: this.value4,
min: 5, // 本地最小值为5
max: 25, // 本地最大值为25
onChange: (value: number) => {
this.loading4 = true;
// 临时更新UI
this.value4 = value;
// 尝试更新服务器值
this.updateServerValue(value).then(() => {
// 成功更新
this.loading4 = false;
}).catch(() => {
// 更新失败，回滚到服务器值
this.value4 = this.serverValue;
this.loading4 = false;
});
}
})
if (this.loading4) {
// 显示服务器通信状态
LoadingProgress()
.width(20)
.height(20)
.position({x: '50%', y: '50%'})
.translate({x: -10, y: -10})
}
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
.padding(10)
// 错误信息显示
if (this.errorMessage !== '') {
Text(this.errorMessage)
.fontSize(14)
.fontColor('#ff0000')
.width('100%')
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}
// 显示当前值
Column() {
Text('当前值：')
.fontSize(16)
.fontWeight(FontWeight.Bold)
.margin({ top: 20, bottom: 10 })
Text('异步初始化值: ' + this.value1)
.fontSize(14)
.margin({ bottom: 5 })
Text('异步验证值: ' + this.value2)
.fontSize(14)
.margin({ bottom: 5 })
Text('延迟更新值: ' + this.value3)
.fontSize(14)
.margin({ bottom: 5 })
Text('服务器值: ' + this.serverValue + ' (本地值: ' + this.value4 + ')')
.fontSize(14)
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.margin({ top: 20 })
}
.width('100%')
.padding(16)
}
}