@@ -15,7 +15,7 @@ In ArkTS, you define a custom component by using decorators **@Component** and *
}
```
-**build** function: a function that complies with the **Builder** API definition and is used to define the declarative UI description of components. A **build** function must be defined for custom components, and custom constructors are prohibited for custom components.
-**build** function: A custom component must implement the **build** function and must implement no constructor. The **build** function meets the definition of the **Builder** API and is used to define the declarative UI description of components.
```ts
interfaceBuilder{
...
...
@@ -49,9 +49,9 @@ Column() {
}
```
### Structs with Mandatory Parameters
### Structs with Parameters
A struct with mandatory parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters.
A struct with parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters.
Sample code:
...
...
@@ -61,7 +61,7 @@ Sample code:
Image('https://xyz/test.jpg')
```
- Set the mandatory parameter **content** of the **\<Text>** component as follows:
- Set the optional parameter **content** of the **\<Text>** component as follows:
```ts
Text('test')
...
...
@@ -83,35 +83,35 @@ Component attributes are configured using an attribute method, which follows the
```ts
Text('test')
.fontSize(12)
.fontSize(12)
```
- Example of configuring multiple attributes at the same time by using the "**.**" operator to implement chain call:
```ts
Image('test.jpg')
.alt('error.jpg')
.width(100)
.height(100)
.alt('error.jpg')
.width(100)
.height(100)
```
- Example of passing variables or expressions in addition to constants:
```ts
Text('hello')
.fontSize(this.size)
.fontSize(this.size)
Image('test.jpg')
.width(this.count%2===0?100:200)
.height(this.offset+100)
.width(this.count%2===0?100:200)
.height(this.offset+100)
```
- For attributes of built-in components, ArkUI also provides some predefined [enumeration types](../reference/arkui-ts/ts-appendix-enums.md), which you can pass as parameters to methods if they meet the parameter type requirements. For example, you can configure the font color and weight attributes of the **\<Text>** component as follows:
```ts
Text('hello')
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
```
### Event Configuration
...
...
@@ -146,7 +146,7 @@ Events supported by components are configured using event methods, which each fo
...
Button('add counter')
.onClick(this.myClickHandler)
.onClick(this.myClickHandler.bind(this))
```
### Child Component Configuration
...
...
@@ -158,11 +158,11 @@ For a component that supports child components, for example, a container compone
@@ -18,6 +18,10 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
**filename**: name of the file in the **resources/rawfile** directory of the project.
> **NOTE**
>
> When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
## Length
The **Length** type is used to represent a size unit.
...
...
@@ -138,12 +142,12 @@ The **LengthConstrain** type is used to describe the maximum and minimum lengths
| size | [Length](#length)| No | Font size. If the value is of the number type, the unit fp is used. |
| weight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
| family | string \|[Resource](#resource)| No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle)| No | Font style. |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.|
| weight | [FontWeight](ts-appendix-enums.md#fontweight)\| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
| family | string \|[Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**. Currently, only the **'sans-serif'** font is supported.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. |
## Area<sup>8+</sup>
...
...
@@ -212,4 +216,4 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
| CustomBuilder | () => any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|
| CustomBuilder | () =>any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|
A focus event is triggered when the page focus moves between components. It can be used to change the content of a component.
A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component.
> **NOTE**
>
> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event.
>
> - Components that have default interaction logic, such as **\<Button>** and **\<TextInput>**, are focusable by default. Other components, such as **\<Text>** and **\<Image>**, are not focusable by default. Only focusable components can trigger a focus event. To enable a component to be focusable, set its **focusable** attribute to **true**.
| onFocus(event: () => void) | No | Triggered when the current component obtains focus.|
| onFocus(event: () => void) | No | Triggered when the current component obtains focus.|
| onBlur(event:() => void) | No | Triggered when the current component loses focus.|
> **NOTE**
>
> The following components support focus events: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
## Example
...
...
@@ -27,44 +26,52 @@ A focus event is triggered when the page focus moves between components. It can
@Entry
@Component
structFocusEventExample{
@StatetextOne:string=''
@StatetextTwo:string=''
@StatetextThree:string=''
@StateoneButtonColor:string='#FF0000'
@StateoneButtonColor:string='#FFC0CB'
@StatetwoButtonColor:string='#87CEFA'
@StatethreeButtonColor:string='#90EE90'
build(){
Column({space:20}){
Button(this.textOne)
Column({space:20}){
// You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back.
