• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16class GreenButtonState {
17    width:number = 0;
18
19    constructor(width:number) {
20        this.width = width;
21    }
22}
23
24@Component
25struct GreenButton {
26    @Link greenButtonState:GreenButtonState;
27
28    build() {
29        Button("Green Button")
30        .width(this.greenButtonState.width)
31        .height(150.0)
32        .backgroundColor("#00ff00")
33        .onClick(() => {
34            this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 125 : 100;
35            console.log("onClick handler on GreenButton, updated value this.greenButtonState.width: " + this.greenButtonState.width);
36        })
37    }
38}
39
40@Component
41struct RedButton {
42    @State redButtonState:number = 100;
43
44    build() {
45        Button("Red Button")
46        .width(this.redButtonState)
47        .height(150.0)
48        .backgroundColor("#ff0000")
49        .onClick(() => {
50            this.redButtonState = (this.redButtonState < 700) ? this.redButtonState + 80 : 100;
51            console.log("onClick handler on RedButton, updated value this.redButtonState: " + this.redButtonState);
52        })
53    }
54}
55
56@Component
57struct YellowButton {
58    @Prop yellowButtonState:number;
59
60    build(){
61        Button("Yellow Button")
62        .width(this.yellowButtonState)
63        .height(150.0)
64        .backgroundColor("#ffff00")
65        .onClick(() => {
66            this.yellowButtonState += 50.0;
67            console.log("onClick handler on YellowButton, updated value this.yellowButtonState: " + this.yellowButtonState);
68        })
69    }
70}
71
72@Entry
73@Component
74struct ShufflingContainer {
75    @State shuffle:boolean = false;
76    @State greenButtonState:GreenButtonState = new GreenButtonState(300);
77    @State yellowButtonProp:number = 100;
78
79    build() {
80        Column(){
81           Button(`Parent View: ${this.shuffle ? 'Shuffle to Red before Green' : 'Shuffle to Green before Red'}`)
82            .width(700.0)
83            .height(150.0)
84            .onClick(() => {
85                this.shuffle = !this.shuffle
86                console.log("onClick handler on ShufflingContainer, updated value this.shuffle: " + this.shuffle);
87            }) //Button "B1"
88            Button("Parent View: Set yellowButtonProp")
89            .width(700.0)
90            .height(150.0)
91            .onClick(() => {
92                this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100;
93                console.log("onClick handler on ShufflingContainer, updated value of yellowButtonProp: " + this.yellowButtonProp);
94            }) //Button "B2"
95            if(this.shuffle) {
96                GreenButton({ greenButtonState: $greenButtonState })
97                RedButton()
98                YellowButton({ yellowButtonState: this.yellowButtonProp })
99            } else {
100                RedButton()
101                YellowButton({ yellowButtonState: this.yellowButtonProp })
102                GreenButton({ greenButtonState: $greenButtonState })
103            }
104        }
105    }
106}
107