2.gif

【引言】

保質期計算應用是一個基于鴻蒙NEXT框架開發(fā)的數(shù)字和文本統(tǒng)計組件。用戶可以輸入商品的生產日期和保質期天數(shù)，應用會自動計算并展示相關信息，包括保質狀態(tài)、剩余天數(shù)、生產日期和到期日期。

【環(huán)境準備】

? 操作系統(tǒng)：Windows 10

? 開發(fā)工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

? 目標設備：華為Mate60 Pro

? 開發(fā)語言：ArkTS

? 框架：ArkUI

? API版本：API 12

【實現(xiàn)思路】

1 組件定義

在應用中，我們定義了一個名為ExpiryDateCalculator的組件，其中包含了各種狀態(tài)變量和方法。通過監(jiān)聽輸入文本變化和選擇日期變化，實現(xiàn)了自動更新相關信息的功能。

2 UI界面構建

通過構建UI界面，我們使用了列布局和行布局來展示各個信息模塊。包括標題展示、統(tǒng)計結果展示、示例和清空按鈕、選擇生產日期等功能。通過設置字體顏色、背景色、陰影效果等，使界面更加美觀和易讀。

3 交互功能實現(xiàn)

在交互功能方面，我們實現(xiàn)了輸入框焦點狀態(tài)的切換、清空按鈕功能、選擇日期功能等。用戶可以方便地輸入信息并查看計算結果，提升了用戶體驗和操作便捷性。

【完整代碼】

@Entry
@Component
struct ExpiryDateCalculator {
  // 定義文本顏色的狀態(tài)變量，初始值為深灰色
  @State private textColor: string = "#2e2e2e";
  // 定義陰影邊框顏色的狀態(tài)變量，初始值為淺灰色
  @State private shadowColor: string = "#d5d5d5";
  // 定義基礎內邊距的狀態(tài)變量，初始值為30
  @State private basePadding: number = 30;
  // 定義是否已過期的狀態(tài)變量，初始值為false
  @State private isExpired: boolean = false;
  // 定義生產日期的狀態(tài)變量，初始值為空字符串
  @State private productionDate: string = "";
  // 定義到期日期的狀態(tài)變量，初始值為空字符串
  @State private expiryDate: string = "";
  // 定義剩余有效天數(shù)的狀態(tài)變量，初始值為0
  @State private remainingDays: number = 0;
  // 定義主題顏色，初始值為橙色
  @State private themeColor: string | Color = Color.Orange;
  // 輸入框是否獲得了焦點的狀態(tài)變量，初始值為false
  @State isInputFocused: boolean = false;
  // 定義監(jiān)聽輸入文本變化的狀態(tài)變量，初始值為"9"
  @State @Watch('inputChanged') private inputText: string = "9";
  // 定義選擇的日期狀態(tài)變量，初始值為當前日期
  @State @Watch('inputChanged') private selectedDate: Date = new Date()

  // 組件即將出現(xiàn)時的操作
  aboutToAppear(): void {
    // 調用輸入變化處理方法
    this.inputChanged()
  }

  // 獲取年月日的方法
  getYearMonthDay(date: Date) {
    // 獲取年份并格式化為4位數(shù)
    const year: string = date.getFullYear().toString().padStart(4, '0');
    // 獲取月份并格式化為2位數(shù)
    const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
    // 獲取日期并格式化為2位數(shù)
    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);
    // 創(chuàng)建到期日期對象
    let expiryDate: Date = new Date(this.selectedDate);
    // 根據(jù)輸入的天數(shù)更新到期日期
    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();
    // 計算剩余天數(shù)
    this.remainingDays = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
  } 
  // 構建UI界面的方法
  build() {
    // 創(chuàng)建一個列布局容器
    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軸偏移量
        });
      // 創(chuàng)建可滾動的容器
      Scroll() {
        // 在可滾動容器內部創(chuàng)建列布局
        Column() {
          // 添加統(tǒng)計結果展示
          Column() {
            // 是否過期
            Row() {
              Text() {
                Span(`保質狀態(tài)：`) // 顯示文本“保質狀態(tài)：”
                Span(`${this.isExpired ? '已過期' : '未過期'}`)// 根據(jù)狀態(tài)顯示“已過期”或“未過期”
                  .fontColor(this.isExpired ? "#e74c3c" : "#3ace7d") // 根據(jù)狀態(tài)設置字體顏色
              }
              .fontColor(this.textColor) // 設置字體顏色
              .fontSize(16) // 設置字體大小
              .layoutWeight(1); // 設置布局權重
            }
            .constraintSize({ minHeight: 45 }) // 設置最小高度
            .justifyContent(FlexAlign.SpaceBetween) // 設置內容對齊方式
            .width('100%'); // 設置寬度為100%

            Divider(); // 添加分隔線
            // 剩余天數(shù)
            Row() {
              Text() {
                Span(`剩余天數(shù)：`) // 顯示文本“剩余天數(shù)：”
                Span(`${this.remainingDays < 0 ? 0 : this.remainingDays} `).fontColor(Color.Orange) // 顯示剩余天數(shù)，負數(shù)顯示為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() {
              // 添加文本輸入?yún)^(qū)域
              Row() {
                TextInput({ text: $$this.inputText, placeholder: `請輸入保質期天數(shù)` })// 創(chuàng)建文本輸入框
                  .type(InputType.Number)// 設置輸入類型為數(shù)字
                  .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)// 失去焦點時更新狀態(tài)
                  .onFocus(() => this.isInputFocused = true)// 獲得焦點時更新狀態(tài)
                  .width('100%'); // 設置寬度為100%
              }
              .padding(`${this.basePadding / 2}lpx`) // 設置內邊距
              .backgroundColor("#f2f1fd") // 設置背景色
              .layoutWeight(1) // 設置布局權重
              .borderWidth(1) // 設置邊框寬度
              .borderRadius(10) // 設置圓角為10
              .borderColor(this.isInputFocused ? this.themeColor : Color.Gray) // 根據(jù)焦點狀態(tài)設置邊框顏色
              .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 })// 創(chuàng)建日歷選擇器
                .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); // 設置字體顏色為狀態(tài)變量中定義的文本顏色

            Text('輸入需要計算保質期商品的生產日期和保質期天數(shù)，工具將為您自動計算商品的保質期狀態(tài)、剩余天數(shù)、到期日。')// 顯示工具介紹文本
              .textAlign(TextAlign.JUSTIFY)// 設置文本對齊方式為兩端對齊
              .fontSize(16)// 設置字體大小為16
              .fontColor(this.textColor)// 設置字體顏色為狀態(tài)變量中定義的文本顏色
              .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"); // 設置背景顏色為指定顏色
  }
}