ArkTS proporciona capacidades de control de renderizado. La representación condicional puede usar if, else y else if para representar el contenido de la interfaz de usuario en el estado correspondiente según los diferentes estados de la aplicación. Nota: A partir de la versión 9 de API, esta interfaz admite el uso en tarjetas ArkTS.
1. Reglas de uso
Admite declaraciones if, else y else if.
Las declaraciones condicionales que siguen a if y else if pueden usar variables de estado.
Permite el uso dentro de los componentes del contenedor para construir diferentes subcomponentes mediante declaraciones de representación condicional.
Las declaraciones de representación condicional son "transparentes" cuando se trata de la relación padre-hijo de un componente. Cuando existen una o más declaraciones if entre un componente padre y un componente hijo, las reglas del componente padre con respecto al uso de componentes hijos deben ser seguido.
La función de construcción dentro de cada rama debe seguir las reglas de la función de construcción y crear uno o más componentes. Un constructor vacío que no puede crear un componente produce un error de sintaxis.
Algunos componentes del contenedor limitan el tipo o la cantidad de componentes secundarios. Cuando se utilizan declaraciones de representación condicional dentro de estos componentes, estas restricciones también se aplicarán a los componentes creados dentro de las declaraciones de representación condicional. Por ejemplo, los subcomponentes del componente contenedor Grid solo admiten el componente GridItem. Cuando se utilizan declaraciones de representación condicional dentro de Grid, solo se permite el componente GridItem dentro de la declaración de representación condicional.
2. Mecanismo de actualización
Cuando el valor de la variable de estado utilizada en el juicio de estado después de if y else if cambia, la declaración de representación condicional se actualizará. Los pasos de actualización son los siguientes: 1. Evaluar las condiciones de juicio de estado de if y else if Si
la sucursal no cambia, no es necesario realizar los siguientes pasos. Si hay cambios en la rama, realice los pasos 2 y 3:
2. Elimine todos los subcomponentes creados previamente.
3. Ejecute el constructor de la nueva rama y agregue los componentes obtenidos al contenedor principal if. Si falta la rama else aplicable, no se construye nada.
Las condiciones pueden incluir expresiones mecanografiadas. Para expresiones en constructores, dichas expresiones no deben cambiar el estado de la aplicación.
3. Escenario de uso
1. Úselo if para renderizado condicional
@Entry
@Component
struct ViewA {
@State count: number = 0;
build() {
Column() {
Text(`count=${this.count}`)
if (this.count > 0) {
Text(`count is positive`)
.fontColor(Color.Green)
}
Button('increase count')
.onClick(() => {
this.count++;
})
Button('decrease count')
.onClick(() => {
this.count--;
})
}
}
}
Cada rama de la declaración if contiene una función constructora. Dicho constructor debe crear uno o más subcomponentes. En el renderizado inicial, la instrucción if ejecuta la función de compilación y agrega el componente secundario resultante a su componente principal.
Siempre que la variable de estado utilizada en una declaración condicional if o else if cambia, la declaración condicional actualiza y reevalúa el nuevo valor de la condición. Si la evaluación del valor de la condición cambia, significa que es necesario construir otra rama condicional. En este punto, el marco ArkUI:
1. Eliminará todos los componentes renderizados anteriormente (rama inicial).
2. Ejecute el constructor de la nueva rama y agregue el subcomponente generado a su componente principal.
En el ejemplo anterior, si el recuento aumenta de 0 a 1, entonces la declaración if se actualiza y la condición recuento > 0 se volverá a evaluar y el resultado de la evaluación cambiará de falso a verdadero. Por lo tanto, se ejecutará el constructor de la rama verdadera, se creará un componente de Texto y se agregará a la Columna del componente principal. Si el recuento posterior cambia a 0, el componente Texto se eliminará del componente Columna. Como no hay otra rama, el nuevo constructor no se ejecutará.
2. sentencias if…else… y estados de subcomponentes
El siguiente ejemplo contiene sentencias if…else… y subcomponentes con variables decoradas @State.
@Component
struct CounterView {
@State counter: number = 0;
label: string = 'unknown';
build() {
Row() {
Text(`${this.label}`)
Button(`counter ${this.counter} +1`)
.onClick(() => {
this.counter += 1;
})
}
}
}
@Entry
@Component
struct MainView {
@State toggle: boolean = true;
build() {
Column() {
if (this.toggle) {
CounterView({ label: 'CounterView #positive' })
} else {
CounterView({ label: 'CounterView #negative' })
}
Button(`toggle ${this.toggle}`)
.onClick(() => {
this.toggle = !this.toggle;
})
}
}
}
El subcomponente CounterView (etiquetado como 'CounterView #positivo') se crea cuando se representa por primera vez. Este subcomponente lleva una variable de estado llamada contador. Cuando se modifica la variable de estado CounterView.counter, el subcomponente CounterView (etiquetado como 'CounterView #positivo') conservará el valor de la variable de estado cuando se vuelva a representar. Cuando el valor de la variable de estado MainView.toggle cambia a falso, la declaración if dentro del componente principal de MainView se actualizará y, posteriormente, se eliminará el componente secundario CounterView (etiquetado como 'CounterView #positivo'). Al mismo tiempo, se creará una nueva instancia de CounterView (etiquetada como 'CounterView #negativo'). Y su propia variable de estado de contador se establece en el valor inicial 0.
Nota: CounterView (la etiqueta es 'CounterView #positive') y CounterView (la etiqueta es 'CounterView #negative') son dos instancias diferentes del mismo componente personalizado. Los cambios en la rama if no actualizarán los subcomponentes existentes ni se conservarán el estado.
El siguiente ejemplo muestra las modificaciones que deben realizarse para conservar el valor del contador cuando cambia la condición.
@Component
struct CounterView {
@Link counter: number;
label: string = 'unknown';
build() {
Row() {
Text(`${this.label}`)
Button(`counter ${this.counter} +1`)
.onClick(() => {
this.counter += 1;
})
}
}
}
@Entry
@Component
struct MainView {
@State toggle: boolean = true;
@State counter: number = 0;
build() {
Column() {
if (this.toggle) {
CounterView({ counter: $counter, label: 'CounterView #positive' })
} else {
CounterView({ counter: $counter, label: 'CounterView #negative' })
}
Button(`toggle ${this.toggle}`)
.onClick(() => {
this.toggle = !this.toggle;
})
}
}
}
Aquí, la variable de contador @State es propiedad del componente principal. Por lo tanto, cuando se elimina la instancia del componente CounterView, la variable no se destruirá. El componente CounterView hace referencia al estado a través del decorador @Link. El estado debe trasladarse del niño a su padre (o al padre de su padre) para evitar perder el estado cuando se destruye contenido condicional o duplicado.
3. Declaraciones if anidadas
El anidamiento de declaraciones condicionales no tiene ningún impacto en las reglas relevantes del componente principal.
@Entry
@Component
struct CompA {
@State toggle: boolean = false;
@State toggleColor: boolean = false;
build() {
Column() {
Text('Before')
.fontSize(15)
if (this.toggle) {
Text('Top True, positive 1 top')
.backgroundColor('#aaffaa').fontSize(20)
// 内部if语句
if (this.toggleColor) {
Text('Top True, Nested True, positive COLOR Nested ')
.backgroundColor('#00aaaa').fontSize(15)
} else {
Text('Top True, Nested False, Negative COLOR Nested ')
.backgroundColor('#aaaaff').fontSize(15)
}
} else {
Text('Top false, negative top level').fontSize(20)
.backgroundColor('#ffaaaa')
if (this.toggleColor) {
Text('positive COLOR Nested ')
.backgroundColor('#00aaaa').fontSize(15)
} else {
Text('Negative COLOR Nested ')
.backgroundColor('#aaaaff').fontSize(15)
}
}
Text('After')
.fontSize(15)
Button('Toggle Outer')
.onClick(() => {
this.toggle = !this.toggle;
})
Button('Toggle Inner')
.onClick(() => {
this.toggleColor = !this.toggleColor;
})
}
}
}