How to use HarmonyOS NEXT - @State variable?

ArkUI, as a declarative UI, has the characteristic of state driven UI updates. When users interact with the interface or external events cause a change in state, the change in state will trigger the component to automatically update. So in ArkUI, we only need to record the state through one variable. When the state is changed, ArkUI will automatically update the affected part of the interface. overview @State decorated variables, like other decorated variables in the declarative paradigm, are private and can only be accessed from within the component. When declaring, their type and local initialization must be specified. Initialization can also be done using a named parameter mechanism from the parent component. @State decorated variables have the following characteristics: ·Establish one-way data synchronization between the State decorated variable and the @prop decorated variable in the subcomponent, and with @link Establish bidirectional data synchronization between Object Link decoration variables. ·The variable lifecycle of State decoration is the same as the lifecycle of its corresponding custom component. Restrictive conditions @State decorated variables must be initialized, otherwise compilation time will report an error. @State does not support decorating Function type variables, and the framework will throw runtime errors. Changing state variables in build is not allowed, and the state management framework will report an Error level log during runtime. State supports joint type instances @State supports union types and undefined and null. In the following example, the count type is number | undefined. Clicking the Button to change the property or type of the count will refresh the view accordingly. Explanation of Variable Passing and Access Rules · Initialization from the Parent Component: Optional. It can be initialized from the parent component or locally. If it is initialized from the parent component and the value passed in from the parent component is not undefined, it will overwrite the local initialization. If the value passed in from the parent component is undefined, the initial value will be the initial value of the variable decorated with @State itself. Regular variables in the parent component are supported (When a regular variable assigns a value to @State, it is just a numerical initialization. Changes in regular variables will not trigger a UI refresh. Only state variables can trigger a UI refresh). · Used for Initializing Child Components: Variables decorated with @State support initializing the regular variables of child components. · Whether Access Outside the Component is Supported: Not supported. It can only be accessed within the component. A variable decorated with @State, also known as a state variable. Once a variable has the state property, it can trigger the refresh of the UI component directly bound to it. When the state changes, the corresponding rendering changes will occur in the UI. Code example @Entry @Component struct StatePage { @State message: string = '@State'; count:number=0 @State stateCount:number=0 build() { Column({space:10}) { Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) Button('增加次数').onClick(()=>{ this.count++ this.stateCount++ }) Text('count='+this.count) Text('stateCount='+this.stateCount) } .height('100%') .width('100%') } }

Mar 25, 2025 - 13:40

How to use HarmonyOS NEXT - @State variable?

ArkUI, as a declarative UI, has the characteristic of state driven UI updates. When users interact with the interface or external events cause a change in state, the change in state will trigger the component to automatically update. So in ArkUI, we only need to record the state through one variable. When the state is changed, ArkUI will automatically update the affected part of the interface.

overview
@State decorated variables, like other decorated variables in the declarative paradigm, are private and can only be accessed from within the component. When declaring, their type and local initialization must be specified. Initialization can also be done using a named parameter mechanism from the parent component.

@State decorated variables have the following characteristics:
·Establish one-way data synchronization between the State decorated variable and the @prop decorated variable in the subcomponent, and with @link Establish bidirectional data synchronization between Object Link decoration variables.
·The variable lifecycle of State decoration is the same as the lifecycle of its corresponding custom component.

Restrictive conditions
@State decorated variables must be initialized, otherwise compilation time will report an error.
@State does not support decorating Function type variables, and the framework will throw runtime errors.
Changing state variables in build is not allowed, and the state management framework will report an Error level log during runtime.

State supports joint type instances
@State supports union types and undefined and null. In the following example, the count type is number | undefined. Clicking the Button to change the property or type of the count will refresh the view accordingly.

Explanation of Variable Passing and Access Rules
· Initialization from the Parent Component: Optional. It can be initialized from the parent component or locally. If it is initialized from the parent component and the value passed in from the parent component is not undefined, it will overwrite the local initialization. If the value passed in from the parent component is undefined, the initial value will be the initial value of the variable decorated with @State itself. Regular variables in the parent component are supported (When a regular variable assigns a value to @State, it is just a numerical initialization. Changes in regular variables will not trigger a UI refresh. Only state variables can trigger a UI refresh).
· Used for Initializing Child Components: Variables decorated with @State support initializing the regular variables of child components.
· Whether Access Outside the Component is Supported: Not supported. It can only be accessed within the component.

A variable decorated with @State, also known as a state variable. Once a variable has the state property, it can trigger the refresh of the UI component directly bound to it. When the state changes, the corresponding rendering changes will occur in the UI.
Code example

@Entry
@Component
struct StatePage {
  @State message: string = '@State';
  count:number=0
  @State stateCount:number=0

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button('增加次数').onClick(()=>{
        this.count++
        this.stateCount++
      })
      Text('count='+this.count)
      Text('stateCount='+this.stateCount)
    }
    .height('100%')
    .width('100%')
  }
}