【引言】
保质期计算应用是一个基于鸿蒙NEXT框架开发的数字和文本统计组件。用户可以输入商品的生产日期和保质期天数，应用会自动计算并展示相关信息，包括保质状态、剩余天数、生产日期和到期日期。
【环境准备】
• 操作系统：Windows 10
• 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
• 目标设备：华为Mate60 Pro
• 开发语言：ArkTS
• 框架：ArkUI
• API版本：API 12
【实现思路】
1 组件定义
在应用中，我们定义了一个名为ExpiryDateCalculator的组件，其中包含了各种状态变量和方法。通过监听输入文本变化和选择日期变化，实现了自动更新相关信息的功能。
2 UI界面构建
通过构建UI界面，我们使用了列布局和行布局来展示各个信息模块。包括标题展示、统计结果展示、示例和清空按钮、选择生产日期等功能。通过设置字体颜色、背景色、阴影效果等，使界面更加美观和易读。
3 交互功能实现
在交互功能方面，我们实现了输入框焦点状态的切换、清空按钮功能、选择日期功能等。用户可以方便地输入信息并查看计算结果，提升了用户体验和操作便捷性。
【完整代码】
@Entry
@Component
struct ExpiryDateCalculator {
// 定义文本颜色的状态变量，初始值为深灰色
@State private textColor: string = "#2e2e2e";
// 定义阴影边框颜色的状态变量，初始值为浅灰色
@State private shadowColor: string = "#d5d5d5";
// 定义基础内边距的状态变量，初始值为30
@State private basePadding: number = 30;
// 定义是否已过期的状态变量，初始值为false
@State private isExpired: boolean = false;
// 定义生产日期的状态变量，初始值为空字符串
@State private productionDate: string = "";
// 定义到期日期的状态变量，初始值为空字符串
@State private expiryDate: string = "";
// 定义剩余有效天数的状态变量，初始值为0
@State private remainingDays: number = 0;
// 定义主题颜色，初始值为橙色
@State private themeColor: string | Color = Color.Orange;
// 输入框是否获得了焦点的状态变量，初始值为false
@State isInputFocused: boolean = false;
// 定义监听输入文本变化的状态变量，初始值为"9"
@State @Watch('inputChanged') private inputText: string = "9";
// 定义选择的日期状态变量，初始值为当前日期
@State @Watch('inputChanged') private selectedDate: Date = new Date()
// 组件即将出现时的操作
aboutToAppear(): void {
// 调用输入变化处理方法
this.inputChanged()
}
// 获取年月日的方法
getYearMonthDay(date: Date) {
// 获取年份并格式化为4位数
const year: string = date.getFullYear().toString().padStart(4, '0');
// 获取月份并格式化为2位数
const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
// 获取日期并格式化为2位数
const day: string = date.getDate().toString().padStart(2, '0');
// 返回格式化后的日期字符串
return `${year}年${month}月${day}日`;
}
// 输入变化时的处理方法
inputChanged() {
// 打印当前选择的日期
console.info(`selectedDate:${this.selectedDate}`);
// 更新生产日期为选择的日期
this.productionDate = this.getYearMonthDay(this.selectedDate);
// 创建到期日期对象
let expiryDate: Date = new Date(this.selectedDate);
// 根据输入的天数更新到期日期
expiryDate.setDate(expiryDate.getDate() + Number(this.inputText));
// 更新到期日期为格式化后的字符串
this.expiryDate = this.getYearMonthDay(expiryDate);
// 判断是否已过期
this.isExpired = expiryDate.getTime() < new Date().getTime();
// 计算时间差
const timeDifference = expiryDate.getTime() - new Date().getTime();
// 计算剩余天数
this.remainingDays = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
}
// 构建UI界面的方法
build() {
// 创建一个列布局容器
Column() {
// 添加标题
Text('保质期计算')
.fontColor(this.textColor)// 设置字体颜色
.fontSize(18)// 设置字体大小
.width('100%')// 设置宽度为100%
.height(50)// 设置高度为50
.textAlign(TextAlign.Center)// 设置文本对齐方式为居中
.backgroundColor(Color.White)// 设置背景颜色为白色
.shadow({
// 设置阴影效果
radius: 2, // 阴影半径
color: this.shadowColor, // 阴影颜色
offsetX: 0, // X轴偏移量
offsetY: 5 // Y轴偏移量
});
// 创建可滚动的容器
Scroll() {
// 在可滚动容器内部创建列布局
Column() {
// 添加统计结果展示
Column() {
// 是否过期
Row() {
Text() {
Span(`保质状态：`) // 显示文本“保质状态：”
Span(`${this.isExpired ? '已过期' : '未过期'}`)// 根据状态显示“已过期”或“未过期”
.fontColor(this.isExpired ? "#e74c3c" : "#3ace7d") // 根据状态设置字体颜色
}
.fontColor(this.textColor) // 设置字体颜色
.fontSize(16) // 设置字体大小
.layoutWeight(1); // 设置布局权重
}
.constraintSize({ minHeight: 45 }) // 设置最小高度
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
Divider(); // 添加分隔线
// 剩余天数
Row() {
Text() {
Span(`剩余天数：`) // 显示文本“剩余天数：”
Span(`${this.remainingDays < 0 ? 0 : this.remainingDays} `).fontColor(Color.Orange) // 显示剩余天数，负数显示为0
Span('天') // 显示单位“天”
}
.fontColor(this.textColor) // 设置字体颜色
.fontSize(16) // 设置字体大小
.layoutWeight(1); // 设置布局权重
}
.constraintSize({ minHeight: 45 }) // 设置最小高度
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
Divider(); // 添加分隔线
// 生产日期
Row() {
Text() {
Span(`生产日期：`) // 显示文本“生产日期：”
Span(`${this.productionDate} `) // 显示生产日期
}
.fontColor(this.textColor) // 设置字体颜色
.fontSize(16) // 设置字体大小
.layoutWeight(1); // 设置布局权重
}
.constraintSize({ minHeight: 45 }) // 设置最小高度
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
Divider(); // 添加分隔线
// 到期日期
Row() {
Text() {
Span(`到期日期：`) // 显示文本“到期日期：”
Span(`${this.expiryDate} `) // 显示到期日期
}
.fontColor(this.textColor) // 设置字体颜色
.fontSize(16) // 设置字体大小
.layoutWeight(1); // 设置布局权重
}
.constraintSize({ minHeight: 45 }) // 设置最小高度
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
}
.alignItems(HorizontalAlign.Start) // 设置子项对齐方式
.width('650lpx') // 设置宽度为650像素
.padding(`${this.basePadding}lpx`) // 设置内边距
.margin({ top: `${this.basePadding}lpx` }) // 设置上边距
.borderRadius(10) // 设置圆角
.backgroundColor(Color.White) // 设置背景颜色为白色
.shadow({
// 设置阴影效果
radius: 10, // 阴影半径
color: this.shadowColor, // 阴影颜色
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
});
// 添加示例和清空按钮
Column() {
Row() {
// 添加文本输入区域
Row() {
TextInput({ text: $$this.inputText, placeholder: `请输入保质期天数` })// 创建文本输入框
.type(InputType.Number)// 设置输入类型为数字
.layoutWeight(1)// 设置布局权重
.fontSize(16)// 设置字体大小
.textAlign(TextAlign.JUSTIFY)// 设置文本对齐方式
.backgroundColor(Color.Transparent)// 设置背景色为透明
.padding(0)// 设置内边距为0
.height('100%')// 设置高度为100%
.placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)// 设置占位符颜色
.fontColor(this.isInputFocused ? this.themeColor : this.textColor)// 设置字体颜色
.caretColor(this.themeColor)// 设置光标颜色
.borderRadius(0)// 设置圆角为0
.onBlur(() => this.isInputFocused = false)// 失去焦点时更新状态
.onFocus(() => this.isInputFocused = true)// 获得焦点时更新状态
.width('100%'); // 设置宽度为100%
}
.padding(`${this.basePadding / 2}lpx`) // 设置内边距
.backgroundColor("#f2f1fd") // 设置背景色
.layoutWeight(1) // 设置布局权重
.borderWidth(1) // 设置边框宽度
.borderRadius(10) // 设置圆角为10
.borderColor(this.isInputFocused ? this.themeColor : Color.Gray) // 根据焦点状态设置边框颜色
.margin({ right: `${this.basePadding / 2}lpx` }); // 设置右边距
Blank(); // 添加空白占位符
// 清空按钮
Text('清空')// 显示文本“清空”
.fontColor("#e48742")// 设置字体颜色
.fontSize(16)// 设置字体大小
.padding(`${this.basePadding / 2}lpx`)// 设置内边距
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })// 点击效果
.backgroundColor("#ffefe6")// 设置背景色
.borderRadius(5)// 设置圆角为5
.onClick(() => { // 点击事件处理
this.inputText = ""; // 清空输入文本
});
}
.height(45) // 设置高度为45
.alignItems(VerticalAlign.Center) // 设置内容垂直居中
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
Divider(); // 添加分隔线
// 选择生产日期
Row() {
Text('请选择生产日期')// 显示文本“请选择生产日期”
.fontColor("#5871ce")// 设置字体颜色
.fontSize(16)// 设置字体大小
.padding(`${this.basePadding / 2}lpx`)// 设置内边距
.backgroundColor("#f2f1fd")// 设置背景色
.borderRadius(5)// 设置圆角为5
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 点击效果
Blank(); // 添加空白占位符
CalendarPicker({ hintRadius: 10, selected: this.selectedDate })// 创建日历选择器
.edgeAlign(CalendarAlign.END)// 设置对齐方式
.textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })// 设置文本样式
.margin(10)// 设置外边距
.onChange((date: Date) => { // 日期变化事件处理
this.selectedDate = date // 更新选择的日期
})
}
.height(45) // 设置高度为45
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
.width('100%'); // 设置宽度为100%
}
.alignItems(HorizontalAlign.Start) // 设置内容水平对齐方式
.width('650lpx') // 设置宽度为650像素
.padding(`${this.basePadding}lpx`) // 设置内边距
.margin({ top: `${this.basePadding}lpx` }) // 设置上边距
.borderRadius(10) // 设置圆角为10
.backgroundColor(Color.White) // 设置背景颜色为白色
.shadow({
// 设置阴影效果
radius: 10, // 阴影半径
color: this.shadowColor, // 阴影颜色
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
});
// 添加工具介绍
Column() {
Text('工具介绍')// 显示文本“工具介绍”
.fontSize(18)// 设置字体大小为18
.fontWeight(600)// 设置字体粗细
.fontColor(this.textColor); // 设置字体颜色为状态变量中定义的文本颜色
Text('输入需要计算保质期商品的生产日期和保质期天数，工具将为您自动计算商品的保质期状态、剩余天数、到期日。')// 显示工具介绍文本
.textAlign(TextAlign.JUSTIFY)// 设置文本对齐方式为两端对齐
.fontSize(16)// 设置字体大小为16
.fontColor(this.textColor)// 设置字体颜色为状态变量中定义的文本颜色
.margin({ top: `${this.basePadding / 2}lpx` }); // 设置上边距为基础内边距的一半
}
.alignItems(HorizontalAlign.Start) // 设置内容水平对齐方式
.width('650lpx') // 设置宽度为650像素
.padding(`${this.basePadding}lpx`) // 设置内边距
.margin({ top: `${this.basePadding}lpx` }) // 设置上边距
.borderRadius(10) // 设置圆角为10
.backgroundColor(Color.White) // 设置背景颜色为白色
.shadow({
// 设置阴影效果
radius: 10, // 阴影半径
color: this.shadowColor, // 阴影颜色
offsetX: 0, // X轴偏移量
offsetY: 0 // Y轴偏移量
});
}
}
.scrollBar(BarState.Off) // 关闭滚动条
.clip(false); // 不裁剪内容
}
.height('100%') // 设置高度为100%
.width('100%') // 设置宽度为100%
.backgroundColor("#f4f8fb"); // 设置背景颜色为指定颜色
}
}