> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>  **NOTE**<br/>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
The **<TextArea>** component provides multi-line text input.
...
...
@@ -90,7 +90,7 @@ Sets the position of the caret.
```
@Entry
@Component
struct TextAreaExample2 {
struct TextAreaExample1 {
@State text: string = ''
build() {
Column() {
...
...
@@ -126,7 +126,7 @@ struct TextAreaExample2 {
```
@Entry
@Component
struct TextAreaTest {
struct TextAreaExample2 {
controller: TextAreaController = new TextAreaController()
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -61,13 +60,21 @@ In addition to universal attributes, the following attributes are supported.
| InputType.Number | Digit input mode. |
### TextInputController<sup>8+</sup>
Implements the controller of the **<TextInput>** component.
## Events
| Name | Description |
| -------- | -------- |
| caretPosition(value: number):void | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
| onChange(value: string) => void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback: (isEditing: boolean) => void) <sup>8+</sup> | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) => void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
### TextInputController<sup>8+</sup>
Implements the controller of the **<TextInput>** component.
### Objects to Import
...
...
@@ -78,7 +85,7 @@ controller: TextInputController = new TextInputController()
```
### controller.createPosition
#### caretPosition
caretPosition(value: number): void
...
...
@@ -90,18 +97,6 @@ Sets the cursor in a specified position.
| value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
## Events
| Name | Description |
| -------- | -------- |
| onChange(value: string) => void | Triggered when the input changes. |
| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback: (isEditing: boolean) => void) <sup>8+</sup> | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) => void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) => void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) => void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
## Example
...
...
@@ -112,7 +107,7 @@ Sets the cursor in a specified position.
```
@Entry
@Component
struct TextAreaExample2 {
struct TextInputExample1 {
@State text: string = ''
build() {
...
...
@@ -147,7 +142,7 @@ struct TextAreaExample2 {
```
@Entry
@Component
struct TextInputTest {
struct TextInputExample2 {
@State text: string = ''
controller: TextInputController = new TextInputController()
In this section, we will develop an infographic food details page, by building custom components through the container components <Stack> and <Flex> as well as basic components <Image> and <Text>.
In this section, we will develop an infographic food details page, by building custom components through the container components **\<Stack>** and **\<Flex>** as well as basic components **\<Image>** and **\<Text>**.
## Building the Stack Layout
1. Create a food name.
Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one.
Delete the code of the build method in the project template, create a <Stack> component, and place the **\<Text>** component in the braces of the **\<Stack>** component so that the <Text> component becomes a child component of the <Stack> component. A **\<Stack>** component consists of one or more child components. The latter child component overwrites the former one.
```
@Entry
...
...
@@ -26,7 +26,7 @@ In this section, we will develop an infographic food details page, by building c
Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to declare the <Image> component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the `"$rawfile('filename')"` format, where filename indicates the relative path of the file in the rawfile folder. Currently, `$rawfile` only allows the <Image> component to reference image resources.
Create an **\<Image>** component and specify a URL for it. The **\<Image>** and **\<Text>** components are mandatory. To display the **\<Text>** component above the **\<Image>** component, you need to declare the **\<Image>** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `"$rawfile('filename')"` format, where filename indicates the relative path of the file in the **rawfile** folder. Currently, `$rawfile` only allows the **\<Image>** component to reference image resources.
```
@Entry
...
...
@@ -137,9 +137,9 @@ In this section, we will develop an infographic food details page, by building c
7. Adjust the left and bottom margin of the <Text> component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
1.When the parameter is set to Length, the outer margins of the four edges are specified. For example, **margin(20)** indicates that the outer margins of the top, right, bottom, and left edges are all 20.
2.**{top?: Length, right?: Length, bottom?: Length, left?:Length}** specifies the margins of the four edges. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4.
7. Adjust the left and bottom margin of the **\<Text>** component. **Margin** is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
1.To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the outer margins of the top, right, bottom, and left edges are all 20.
2.To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4.
```
...
...
@@ -163,7 +163,8 @@ In this section, we will develop an infographic food details page, by building c
8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component.
8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the **MyComponent** component to **FoodImageDisplay**, which is a child component of the **FoodDetail** component.
A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
...
...
@@ -239,10 +240,11 @@ You can use the Flex layout to build a food composition table. In this way you d
```
2. Create a Flex component to display two food composition categories in the tomato: Calories and Nutrition.
Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
Calories contains information about calories. Nutrition contains information about protein, fat, carbohydrates, and vitamin C.
Create the Calories class. Create a Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text child components, which represent the category name (Calories), content name (Calories), and contain value (17 kcal), respectively. By default, child components in the Flex component are arranged horizontally.
In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
...
...
@@ -279,7 +281,7 @@ You can use the Flex layout to build a food composition table. In this way you d
3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to **2**. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to **1**, and the total proportion of content name and content value to **2**. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
```
@Component
...
...
@@ -336,6 +338,7 @@ You can use the Flex layout to build a food composition table. In this way you d
4. Create the **Nutrient** class in a similar process. Nutrition consists of four parts: Protein, Fat, Carbohydrates, and VitaminC. The names of the last three parts are omitted in the table and represented by spaces.
Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**.
...
...
@@ -467,7 +470,7 @@ You can use the Flex layout to build a food composition table. In this way you d
}
```
When the IngredientItem API is called in the build method of ContentTable, this needs to be used to invoke the method in the scope of the component to distinguish the global method call.
When the ` IngredientItem` API is called in the build method of ContentTable, ` this ` needs to be used to invoke the method in the scope of the component to distinguish the global method call.
```
...
...
@@ -488,7 +491,7 @@ You can use the Flex layout to build a food composition table. In this way you d
}
```
The overall code of the ContentTable component is as follows:
The overall code of the ContentTable component is as follows:
```
...
...
@@ -537,6 +540,6 @@ You can use the Flex layout to build a food composition table. In this way you d
Spacing between elements. You can define different clutter values for different device sizes as part of the overall grid layout specifications. For better results, make sure the gutter is not greater than the margin.
2. Margins:
2. Margin:
Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications.
3. Columns:
3. Column:
Main tool for positioning items in the grid layout. The grid container is divided into various numbers of columns based on the device size. The width per column is calculated based on the total number of columns while respecting the margin and clutter specifications.
Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
