1import { 2 memo, 3 __memo_context_type, 4 __memo_id_type, 5 AppStorage, 6 State, 7 StateDecoratedVariable, 8 MutableState, 9 stateOf, 10 observableProxy 11} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins 12 13import hilog from '@ohos.hilog' 14import { 15 $r, 16 Entry, 17 Text, 18 TextInput, 19 Curve, 20 ResourceColor, 21 NavPathStack, 22 NavDestination, 23 Scroll, 24 SheetMode, 25 CustomBuilder, 26 SheetTitleOptions, 27 ScrollSizeMode, 28 TextAttribute, 29 Column, 30 Component, 31 Callback, 32 Row, 33 Button, 34 animateTo, 35 Color, 36 Dimension, 37 Resource, 38 SheetSize, 39 Length, 40 SheetType, 41 SheetOptions, 42 ClickEvent, 43 UserView , 44 Builder, 45 NavDestinationContext 46} from '@ohos.arkui.component' // TextAttribute should be insert by ui-plugins 47 48import { UIContext } from '@ohos.arkui.UIContext'; 49 50 51@Entry 52@Component 53export struct BindSheetTest { 54 @State stateVar: string = 'state var'; 55 @State showVal: boolean =false; 56 @State showVal1: boolean =false; 57 @State showVal2: boolean =false; 58 59 @State height: SheetSize|Length = SheetSize.LARGE 60 @State width:Dimension = '80%' 61 @State showDragBar:boolean = true 62 @State sheetType: SheetType = SheetType.BOTTOM 63 @State showClose:boolean|Resource = true 64 65 @State scrollSizeMode: ScrollSizeMode = ScrollSizeMode.FOLLOW_DETENT 66 @State mode:SheetMode = SheetMode.OVERLAY 67 68 69 @State enableOutsideInteractive: boolean = true 70 71 @State title:SheetTitleOptions | CustomBuilder = { title: $r('app.string.mytitle'), subtitle: $r('app.string.app_name') } as SheetTitleOptions 72 73 @State fontSize:number = 20 74 @Builder 75 titleBuilder() { 76 Text('demo') 77 } 78 @Builder 79 SheetBuilder() { 80 Column(undefined) { 81 Text('1111') 82 Text('1111') 83 Text('1111') 84 Text('1111') 85 Button('close bindsheet').onClick((e: ClickEvent) => { 86 this.showVal1 = false 87 this.showVal = false 88 }) 89 TextInput({text: ''}) 90 TextInput({text: ''}) 91 92 TextInput({text: ''}) 93 TextInput({text: ''}) 94 TextInput({text: ''}) 95 TextInput({text: ''}) 96 TextInput({text: ''}) 97 TextInput({text: ''}) 98 TextInput({text: ''}) 99 TextInput({text: ''}) 100 101 } 102 } 103 104 build() { 105 NavDestination() { 106 Scroll() { 107 Column(undefined) { 108 Row() { 109 Button('showDragBar').onClick((e: ClickEvent) => { 110 this.showDragBar = !this.showDragBar 111 }).fontSize(10) 112 Button('CENTER').onClick((e: ClickEvent) => { 113 this.sheetType = SheetType.CENTER 114 }).fontSize(10) 115 Button('POPUP').onClick((e: ClickEvent) => { 116 this.sheetType = SheetType.POPUP 117 }).fontSize(10) 118 } 119 120 Row() { 121 Button('height MEDIUM').onClick((e: ClickEvent) => { 122 this.height = SheetSize.MEDIUM 123 }).fontSize(10) 124 Button('height FIT_CONTENT').onClick((e: ClickEvent) => { 125 this.height = SheetSize.FIT_CONTENT 126 }).fontSize(10) 127 Button('height str 500').onClick((e: ClickEvent) => { 128 this.height = '500' 129 }).fontSize(10) 130 131 } 132 133 Row() { 134 Button('height0').onClick((e: ClickEvent) => { 135 this.height = 0 136 }).fontSize(10) 137 138 Button('height-10').onClick((e: ClickEvent) => { 139 this.height = -10 140 }).fontSize(10) 141 } 142 143 Row() { 144 Button('width0').onClick((e: ClickEvent) => { 145 this.width = 0 146 }).fontSize(10) 147 Button('width1900').onClick((e: ClickEvent) => { 148 this.width = 1900 149 }).fontSize(10) 150 151 Button('width-10').onClick((e: ClickEvent) => { 152 this.width = -10 153 }).fontSize(10) 154 } 155 156 Row() { 157 Button('showClose false').onClick((e: ClickEvent) => { 158 this.showClose = false 159 }).fontSize(10) 160 Button('titleBuilder').onClick((e: ClickEvent) => { 161 this.title = this.titleBuilder 162 }).fontSize(10) 163 } 164 165 Row() { 166 Button('showClose res true').onClick((e: ClickEvent) => { 167 this.showClose = $r('app.boolean.true') 168 }).fontSize(10) 169 Button('showClose res false').onClick((e: ClickEvent) => { 170 this.showClose = $r('app.boolean.false') 171 }).fontSize(10) 172 } 173 174 Row() { 175 Button('mode EMBEDDED').onClick((e: ClickEvent) => { 176 this.mode = SheetMode.EMBEDDED 177 }).fontSize(10) 178 } 179 180 Row() { 181 Button('enableOutsideInteractive').onClick((e: ClickEvent) => { 182 this.enableOutsideInteractive = !this.enableOutsideInteractive 183 }).fontSize(10) 184 } 185 186 Row() { 187 Button('bindSheet') 188 .backgroundColor('#FFFF00FF') 189 .fontSize(10) 190 .onClick((e: ClickEvent) => { 191 this.showVal = true 192 }) 193 .bindSheet(this.showVal, this.SheetBuilder, 194 { 195 preferType: this.sheetType, 196 showClose: this.showClose, 197 detents: [200, $r('app.float.400'), 2900], 198 width: this.width, 199 dragBar: this.showDragBar, 200 onAppear: () => { 201 hilog.info(0x0000, 'xhq', 'bindSheet onAppear'); 202 }, 203 onDisappear: () => { 204 this.showVal = false 205 hilog.info(0x0000, 'xhq', 'bindSheet onDisappear'); 206 }, 207 onWillAppear: () => { 208 hilog.info(0x0000, 'xhq', 'bindSheet onWillAppear'); 209 }, 210 onWillDisappear: () => { 211 hilog.info(0x0000, 'xhq', 'bindSheet onWillDisappear'); 212 }, 213 onHeightDidChange: (val: number) => { 214 hilog.info(0x0000, 'xhq', 'bindSheet onHeightDidChange:' + val); 215 }, 216 onWidthDidChange: (val: number) => { 217 hilog.info(0x0000, 'xhq', 'bindSheet onWidthDidChange:' + val); 218 }, 219 onDetentsDidChange: (val: number) => { 220 hilog.info(0x0000, 'xhq', 'bindSheet onDetentsDidChange：' + val); 221 }, 222 onTypeDidChange: (val: SheetType) => { 223 hilog.info(0x0000, 'xhq', 'bindSheet onTypeDidChange:' + val); 224 }, 225 scrollSizeMode: this.scrollSizeMode, 226 title: this.title, 227 enableOutsideInteractive: this.enableOutsideInteractive, 228 mode: this.mode, 229 backgroundColor: Color.Yellow, 230 } as SheetOptions) 231 } 232 }.width('100%').height('100%') 233 }.width('100%').height('100%') 234 } 235 .title('模态类组件测试001') 236 } 237} 238 239