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 StackSample { 20 @State alignDirection: string = 'Bottom' 21 @State fontDirection: string = 'Top' 22 23 build() { 24 Column() { 25 NavigationBar({ title: 'Stack' }) 26 Column() { 27 Scroll() { 28 Column() { 29 Stack({ alignContent: Alignment[this.alignDirection] }) { 30 Column() 31 .width('100%') 32 .height('100%') 33 .backgroundColor(0xF1F3F5) 34 .border({ width: 5, color: 0x2788D9, radius: 10, style: BorderStyle.Solid }) 35 Divider() 36 .vertical(false) 37 .strokeWidth(5) 38 .color(0x2788D9) 39 .lineCap(LineCapStyle.Round) 40 .width('100%') 41 .position({ x: 0, y: '33.3%' }) 42 Divider() 43 .vertical(false) 44 .strokeWidth(5) 45 .color(0x2788D9) 46 .lineCap(LineCapStyle.Round) 47 .width('100%') 48 .position({ x: 0, y: '66.6%' }) 49 Divider() 50 .vertical(true) 51 .strokeWidth(5) 52 .color(0x2788D9) 53 .lineCap(LineCapStyle.Round) 54 .width('100%') 55 .position({ x: '-16.7%', y: 0 }) 56 Divider() 57 .vertical(true) 58 .strokeWidth(5) 59 .color(0x2788D9) 60 .lineCap(LineCapStyle.Round) 61 .width('100%') 62 .position({ x: '16.7%', y: 0 }) 63 Text('First Child') 64 .width('33%') 65 .height('33.7%') 66 .backgroundColor(0x2788D9) 67 .align(Alignment[this.fontDirection]) 68 .textAlign(TextAlign.Center) 69 .fontSize('15fp') 70 .padding({ top: '3%', bottom: '4%' }) 71 Text('Second Child') 72 .width('20%') 73 .height('17%') 74 .backgroundColor('red') 75 .border({ width: 5, color: 0x2788D9, radius: 10, style: BorderStyle.Solid }) 76 .fontSize('16fp') 77 .textAlign(TextAlign.Center) 78 }.width('60%').height('81%') 79 } 80 .width('100%') 81 .height('100%') 82 .justifyContent(FlexAlign.Center) 83 } 84 .width('100%') 85 .height('100%') 86 }.width('100%') 87 .constraintSize({ minHeight: 218, maxHeight: 402 }) 88 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 89 .margin({ bottom: 24 }) 90 91 Scroll() { 92 Row() { 93 Text('align') 94 .fontSize('16fp') 95 .opacity(0.5) 96 .fontColor('#182431') 97 .fontWeight(FontWeight.Medium) 98 Blank() 99 Text(`${this.alignDirection}`) 100 .fontSize('16fp') 101 .fontColor('#182431') 102 .fontWeight(FontWeight.Medium) 103 .width('50%') 104 .textAlign(TextAlign.End) 105 .bindMenu([ 106 { 107 value: 'TopStart', 108 action: () => { 109 this.alignDirection = 'TopStart' 110 this.fontDirection = 'Bottom' 111 } 112 }, 113 { 114 value: 'Top', 115 action: () => { 116 this.alignDirection = 'Top' 117 this.fontDirection = 'Bottom' 118 } 119 }, 120 { 121 value: 'TopEnd', 122 action: () => { 123 this.alignDirection = 'TopEnd' 124 this.fontDirection = 'Bottom' 125 } 126 }, 127 { 128 value: 'Start', 129 action: () => { 130 this.alignDirection = 'Start' 131 this.fontDirection = 'Top' 132 } 133 }, 134 { 135 value: 'Center', 136 action: () => { 137 this.alignDirection = 'Center' 138 this.fontDirection = 'Top' 139 } 140 }, 141 { 142 value: 'End', 143 action: () => { 144 this.alignDirection = 'End' 145 this.fontDirection = 'Top' 146 } 147 }, 148 { 149 value: 'BottomStart', 150 action: () => { 151 this.alignDirection = 'BottomStart' 152 this.fontDirection = 'Top' 153 } 154 }, 155 { 156 value: 'Bottom', 157 action: () => { 158 this.alignDirection = 'Bottom' 159 this.fontDirection = 'Top' 160 } 161 }, 162 { 163 value: 'BottomEnd', 164 action: () => { 165 this.alignDirection = 'BottomEnd' 166 this.fontDirection = 'Top' 167 } 168 }, 169 ]) 170 } 171 .width('100%') 172 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 173 .borderRadius(24) 174 .backgroundColor('#FFFFFF') 175 .margin({ top: 8, bottom: 20 }) 176 } 177 .height('10%') 178 } 179 .width('100%') 180 .height('100%') 181 .backgroundColor('#F1F3F5') 182 .padding({ left: '3%', right: '3%', bottom: 10 }) 183 } 184 185 pageTransition() { 186 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 187 .slide(SlideEffect.Bottom) 188 .opacity(0.0) 189 190 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 191 .slide(SlideEffect.Bottom) 192 .opacity(0.0) 193 } 194} 195