• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 */
15import { NavigationBar } from '../../../common/components/navigationBar'
16
17@Entry
18@Component
19struct ColumnSplitSample {
20  @State space: number = 25
21  @State alignItemsConfig: VerticalAlign = VerticalAlign.Top
22  @State circularArr: number[] = [1, 2, 3]
23  private showMessage: string = 'VerticalAlign.Top'
24  private boxWidth: string = '20%'
25  private backGround: string [] = ['#EE82EE', '#87CEFA', '#FF4500']
26  private circularVal: number = 0;
27  @State resizeableVal: boolean = false
28
29  build() {
30    Column() {
31      NavigationBar({ title: 'ColumnSplit' })
32      Column() {
33        Column() {
34          Scroll() {
35            ColumnSplit() {
36              ForEach(this.circularArr, (item: number) => {
37                Text(`${item}`)
38                  .width(this.boxWidth)
39                  .height(50)
40                  .backgroundColor(this.backGround[(item)%3])
41                  .textAlign(TextAlign.Center)
42                  .lineHeight(35)
43                  .fontColor(Color.White)
44                  .fontSize(20)
45              }, (item: number) => item.toString())
46            }
47            .resizeable(this.resizeableVal)
48            .width('100%')
49            .padding(5)
50            .backgroundColor(0xAFEEEE)
51          }
52          .width('100%')
53          .backgroundColor('#b6dfff')
54        }
55        .width('100%')
56        .constraintSize({ minHeight: 218, maxHeight: 402 })
57        .padding({ left: 12, right: 12, top: 22, bottom: 22 })
58        .margin({ bottom: 24 })
59
60        Scroll() {
61          Column() {
62            Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
63              Text(this.showMessage)
64                .width('90%')
65                .fontSize('20fp')
66                .fontColor('#000000')
67                .margin({ bottom: 5, left: 15 })
68                .textAlign(TextAlign.Center)
69                .fontWeight(FontWeight.Medium)
70                .opacity(0.8)
71            }
72            .margin({ top: 3, bottom: 15 })
73            .padding(5)
74
75            Row({ space: FlexAlign.SpaceBetween }) {
76              Button('+', { type: ButtonType.Capsule, stateEffect: true })
77                .borderRadius(14)
78                .backgroundColor('#007DFF')
79                .size({ width: 44, height: 28 })
80                .fontSize('16fp')
81                .onClick(() => {
82                  this.circularVal = this.circularArr.length + 1;
83                  this.circularArr[this.circularVal-1] = this.circularVal;
84                })
85
86              Blank()
87
88              Button('-', { type: ButtonType.Capsule, stateEffect: true })
89                .borderRadius(14)
90                .backgroundColor('#007DFF')
91                .size({ width: 44, height: 28 })
92                .fontSize('16fp')
93                .onClick(() => {
94                  this.circularArr = this.circularArr.slice(0, this.circularArr.length - 1)
95                  this.circularVal = this.circularArr.length + 1
96                })
97            }
98            .width('100%')
99            .alignItems(VerticalAlign.Center)
100            .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
101            .borderRadius(24)
102            .backgroundColor('#FFFFFF')
103            .margin({ top: 8 })
104
105            Row({ space: FlexAlign.SpaceBetween }) {
106              Text('resizeableVal')
107                .fontSize('16fp')
108                .opacity(0.5)
109                .fontColor('#182431')
110                .fontWeight(FontWeight.Medium)
111
112              Blank()
113
114              Column() {
115                Text(this.resizeableVal + '')
116                  .fontSize('16fp')
117                  .fontColor('#182431')
118                  .fontWeight(FontWeight.Medium)
119                  .width('50%')
120                  .textAlign(TextAlign.End)
121              }
122              .bindMenu([
123                {
124                  value: 'ture',
125                  action: () => {
126                    this.resizeableVal = true
127                    this.showMessage = 'resizeableVal:true'
128                  }
129                },
130                {
131                  value: 'false',
132                  action: () => {
133                    this.resizeableVal = false
134                    this.showMessage = 'resizeableVal:false'
135                  }
136                },
137              ])
138            }
139            .width('100%')
140            .alignItems(VerticalAlign.Center)
141            .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
142            .borderRadius(24)
143            .backgroundColor('#FFFFFF')
144            .margin({ top: 8, bottom: 8 })
145          }
146        }
147        .width('100%')
148      }
149      .alignItems(HorizontalAlign.Center)
150      .justifyContent(FlexAlign.Center)
151      .padding({ left: '3%', right: '3%', bottom: 10 })
152      .height('100%')
153    }
154    .width('100%')
155    .height('100%')
156    .backgroundColor('#F1F3F5')
157  }
158
159  pageTransition() {
160    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
161      .slide(SlideEffect.Bottom)
162      .opacity(0.0)
163
164    PageTransitionExit({ duration: 370, curve: Curve.Friction })
165      .slide(SlideEffect.Bottom)
166      .opacity(0.0)
167  }
168}