鸿蒙NEXT开发案例：保质期计算
【引言】
保质期计算应用是一个基于鸿蒙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@Componentstruct 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"); // 设置背景颜色为指定颜色}}
页:
[1]