【引言】
保质期计算应用是一个基于鸿蒙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) // 显示剩余天数，负数显示为0Span('天') // 显示单位“天”}.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"); // 设置背景颜色为指定颜色}
}
