[Introduction]
Shelf Life Calculator app is a numerical and textual statistical component developed on the basis of Hongmeng NEXT framework. Users can enter the production date and the number of days of shelf life of an item, and the application automatically calculates and displays the relevant information, including the shelf life status, the number of days remaining, the production date and the expiration date.
[Environmental Preparation]
- Operating system: Windows 10
- Development Tools: DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
- Target device: Huawei Mate60 Pro
- Development language: ArkTS
- Framework: ArkUI
- API version: API 12
[Realization Ideas]
1 Component definition
In the application, we have defined a component called ExpiryDateCalculator which contains various state variables and methods. By listening to input text changes and selecting date changes, we have implemented a feature to automatically update the relevant information.
2 UI interface construction
By building the UI interface, we used column layout and row layout to display each information module. It includes functions such as title display, statistics display, example and clear button, and selecting production date. By setting font color, background color, shadow effect, etc., we make the interface more beautiful and easy to read.
3 Interactive function realization
In terms of interactive functions, we have realized the switching of the focus state of the input box, the clear button function, and the date selection function. Users can easily input information and view the calculation results, which improves user experience and operation convenience.
[complete code]
@Entry
@Component
struct ExpiryDateCalculator {
// Define a state variable for the text color, with an initial value of dark gray.
@State private textColor: string = "#2e2e2e";
// Define a state variable for the shadow border color, with an initial value of light gray.
@State private shadowColor: string = "#d5d5d5";
// Define the state variable for the base inner margin with an initial value of 30
@State private basePadding: number = 30;
// Define a status variable for whether it has expired, with an initial value of false.
@State private isExpired: boolean = false;
// Define a state variable for the production date with an initial value of an empty string
@State private productionDate: string = "";
// Define a state variable for the expiration date, with an initial value of an empty string
@State private expiryDate: string = "";
// Define a state variable for the number of valid days remaining, with an initial value of 0
@State private remainingDays: number = 0;
// Define the theme color, initial value is orange.
@State private themeColor: string | Color = ;
// State variable for whether the input box has gained focus, initially false.
@State isInputFocused: boolean = false;
// Define a state variable that listens for changes in the input text, with an initial value of "9".
@State @Watch('inputChanged') private inputText: string = "9";
// Define the selected date state variable with the initial value of the current date
@State @Watch('inputChanged') private selectedDate: Date = new Date()
// Actions when a component is about to appear
aboutToAppear(): void {
// Call the input change handling method
()
}
// A way to get the year, month, and day
getYearMonthDay(date: Date) {
// Get the year and format it to 4 digits
const year: string = ().toString().padStart(4, '0');
// Get the month and format it to 2 digits
const month: string = (() + 1).toString().padStart(2, '0');
// Get the date and format it to 2 digits
const day: string = ().toString().padStart(2, '0');
// Returns a formatted date string
return `${year}surname Nian${month}moon${day}date`;
}
// Handling of input changes
inputChanged() {
// Print the currently selected date
(`selectedDate:${}`);
// Update the production date to the selected date
= ();
// Create an expiration date object
let expiryDate: Date = new Date();
// Update the expiration date based on the number of days entered
(() + Number());
// Update the expiration date to a formatted string
= (expiryDate);
// Determine if it has expired
= () < new Date().getTime();
// Calculate the time difference
const timeDifference = () - new Date().getTime();
// Calculate the number of days remaining
= (timeDifference / (1000 * 60 * 60 * 24));
}
// Methods for building UI interfaces
build() {
// Create a column layout container
Column() {
// Add a title
Text('Shelf life calculation')
.fontColor()// Set the font color
.fontSize(18)// Setting the font size
.width('100%')// Set the width to 100%
.height(50)// Set the height to 50
.textAlign()// Set text alignment to center
.backgroundColor()// Set the background color to white
.shadow({
// Setting up shadow effects
radius: 2, // Shadow radius
color: , // Shadow color
offsetX: 0, // X-axis offset
offsetY: 5 // Y-axis offset
});
// Create scrollable containers
Scroll() {
// Create a column layout inside a scrollable container.
Column() {
// Add statistics display
Column() {
// Whether expired
Row() {
Text() {
Span(`shelf life：`) // The text "Shelf life:" is displayed.
Span(`${ ? 'Expired' : 'Not expired'}`)// "Expired" or "Not Expired" depending on status
.fontColor( ? "#e74c3c" : "#3ace7d") // Set font color based on status
}
.fontColor() // Set the font color
.fontSize(16) // Setting the font size
.layoutWeight(1); // Setting Layout Weights
}
.constraintSize({ minHeight: 45 }) // Set the minimum height
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
Divider(); // Add a separator line
// Days remaining
Row() {
Text() {
Span(`Days remaining：`) // The text "Days remaining:" is displayed.
Span(`${ < 0 ? 0 : } `).fontColor() // Displays the number of days remaining, negative numbers are displayed as 0
Span('Heaven') // Display in "days"
}
.fontColor() // Set the font color
.fontSize(16) // Setting the font size
.layoutWeight(1); // Setting Layout Weights
}
.constraintSize({ minHeight: 45 }) // Set the minimum height
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
Divider(); // Add a separator line
// Date of manufacture
Row() {
Text() {
Span(`生产date期：`) // Display the text "Date of manufacture:".
Span(`${} `) // Show date of manufacture
}
.fontColor() // Set the font color
.fontSize(16) // Setting the font size
.layoutWeight(1); // Setting Layout Weights
}
.constraintSize({ minHeight: 45 }) // Set the minimum height
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
Divider(); // Add a separator line
// Expiry date
Row() {
Text() {
Span(`到期date期：`) // Display the text "Expiry date:"
Span(`${} `) // Show expiration date
}
.fontColor() // Set the font color
.fontSize(16) // Setting the font size
.layoutWeight(1); // Setting Layout Weights
}
.constraintSize({ minHeight: 45 }) // Set the minimum height
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
}
.alignItems() // Set the child alignment
.width('650lpx') // Set the width to 650 pixels
.padding(`${}lpx`) // Setting the inner margins
.margin({ top: `${}lpx` }) // Set the top margin
.borderRadius(10) // Setting rounded corners
.backgroundColor() // Set the background color to white
.shadow({
// Setting up shadow effects
radius: 10, // Shadow radius
color: , // Shadow color
offsetX: 0, // X-axis offset
offsetY: 0 // Y-axis offset
});
// Add examples and clear buttons
Column() {
Row() {
// Add a text input field
Row() {
TextInput({ text: $$, placeholder: `Please enter the number of days of shelf life` })// Create a text input box
.type()// Set the input type to numeric
.layoutWeight(1)// Setting Layout Weights
.fontSize(16)// Setting the font size
.textAlign()// Set the text alignment
.backgroundColor()// Set the background color to transparent
.padding(0)// Set the inner margin to 0
.height('100%')// Set the height to 100%
.placeholderColor( ? : )// Set the placeholder color
.fontColor( ? : )// Set the font color
.caretColor()// Setting the cursor color
.borderRadius(0)// Set rounded corners to 0
.onBlur(() => = false)// Update state when out of focus
.onFocus(() => = true)// Update state when focus is gained
.width('100%'); // Set the width to 100%
}
.padding(`${ / 2}lpx`) // Setting the inner margins
.backgroundColor("#f2f1fd") // set the background color
.layoutWeight(1) // Setting Layout Weights
.borderWidth(1) // Set the border width
.borderRadius(10) // Set rounded corners to 10
.borderColor( ? : ) // Set border color based on focus state
.margin({ right: `${ / 2}lpx` }); // Set the right margin
Blank(); // Add a blank placeholder
// Clear button
Text('Empty')// Display the text "Empty".
.fontColor("#e48742")// set the font color
.fontSize(16)// Setting the font size
.padding(`${ / 2}lpx`)// Setting the inner margins
.clickEffect({ level: , scale: 0.8 })// Click effect
.backgroundColor("#ffefe6")// set the background color
.borderRadius(5)// Set the fillet to 5
.onClick(() => { // Click event handling
= ""; // Clear the input text
});
}
.height(45) // Set the height to 45
.alignItems() // Set the content to be vertically centered
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
Divider(); // Add a separator line
// Select production date
Row() {
Text('Please select a production date')// Display the text "Please select the date of manufacture".
.fontColor("#5871ce")// Setting the font color
.fontSize(16)// Setting the font size
.padding(`${ / 2}lpx`)// Setting the inner margins
.backgroundColor("#f2f1fd")// set background color
.borderRadius(5)// Set the fillet to 5
.clickEffect({ level: , scale: 0.8 }) // Click effect
Blank(); // Add a blank placeholder
CalendarPicker({ hintRadius: 10, selected: })// Create a calendar selector
.edgeAlign()// Set the alignment
.textStyle({ color: "#ff182431", font: { size: 20, weight: } })// set text style
.margin(10)// Setting the outer margin
.onChange((date: Date) => { // Date change event handling
= date // Update the selected date
})
}
.height(45) // Set the height to 45
.justifyContent() // Set the content alignment
.width('100%'); // Set the width to 100%
}
.alignItems() // Set the horizontal alignment of the content
.width('650lpx') // Set the width to 650 pixels
.padding(`${}lpx`) // Setting the inner margins
.margin({ top: `${}lpx` }) // Set the top margin
.borderRadius(10) // Set rounded corners to 10
.backgroundColor() // Set the background color to white
.shadow({
// Setting up shadow effects
radius: 10, // Shadow radius
color: , // Shadow color
offsetX: 0, // X-axis offset
offsetY: 0 // Y-axis offset
});
// Add an introduction to the tool
Column() {
Text('Introduction to tools')// Display the text "Introduction to the tool".
.fontSize(18)// Set the font size to 18
.fontWeight(600)// Set the font thickness
.fontColor(); // Set the font color to the text color defined in the state variable
Text('Enter the production date and the number of days of shelf life of the goods that need to be calculated, and the tool will automatically calculate the shelf life status, remaining days, and expiration date of the goods for you.')// Display the tool introduction text
.textAlign()// Set text alignment to justified at both ends
.fontSize(16)// Set the font size to 16
.fontColor()// Set the font color to the text color defined in the state variable
.margin({ top: `${ / 2}lpx` }); // Set the top margin to half the base inner margin
}
.alignItems() // Set the horizontal alignment of the content
.width('650lpx') // Set the width to 650 pixels
.padding(`${}lpx`) // Setting the inner margins
.margin({ top: `${}lpx` }) // Set the top margin
.borderRadius(10) // Set rounded corners to 10
.backgroundColor() // Set the background color to white
.shadow({
// Setting up shadow effects
radius: 10, // Shadow radius
color: , // Shadow color
offsetX: 0, // X-axis offset
offsetY: 0 // Y-axis offset
});
}
}
.scrollBar() // Close the scrollbar
.clip(false); // No cropping of content
}
.height('100%') // Set the height to 100%
.width('100%') // Set the width to 100%
.backgroundColor("#f4f8fb"); // set the background color to the specified color
}
}