1# ListItem 2 3<!--Kit: ArkUI--> 4<!--Subsystem: ArkUI--> 5<!--Owner: @yylong--> 6<!--Designer: @yylong--> 7<!--Tester: @liuzhenshuo--> 8<!--Adviser: @HelloCrease--> 9 10用来展示列表具体item，必须配合List来使用。 11 12> **说明：** 13> 14> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15> - 该组件的父组件只能是[List](ts-container-list.md)或者[ListItemGroup](ts-container-listitemgroup.md)。 16> - 当ListItem配合LazyForEach使用时，ListItem子组件在ListItem创建时创建。配合if/else、ForEach使用时，或父组件为List/ListItemGroup时，ListItem子组件在ListItem布局时创建。 17 18## 子组件 19 20可以包含单个子组件。 21 22## 接口 23 24### ListItem<sup>10+</sup> 25 26ListItem(value?: ListItemOptions) 27 28创建ListItem组件。 29 30**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 31 32**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 40| value | [ListItemOptions](#listitemoptions10对象说明) | 否 | 为ListItem提供可选参数，该对象内含有ListItemStyle枚举类型的style参数。<br/>默认值：{ style: ListItemStyle.NONE } | 41 42### ListItem<sup>(deprecated)</sup> 43 44ListItem(value?: string) 45 46创建ListItem组件。 47 48从API version 10开始，该接口不再维护，推荐使用[ListItem<sup>10+</sup>](#listitem10)。 49 50**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54**参数：** 55 56| 参数名 | 类型 | 必填 | 说明 | 57| ------ | ----------------------------- | ---- | -------- | 58| value | string | 否 | 无 | 59 60## 属性 61 62除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 63 64### sticky<sup>(deprecated)</sup> 65 66sticky(value: Sticky) 67 68设置ListItem吸顶效果。 69 70从API version 9开始废弃不再使用，推荐使用[List组件sticky属性](ts-container-list.md#sticky9)。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| ------ | ----------------------------------- | ---- | ------------------------------------------ | 78| value | [Sticky](#stickydeprecated枚举说明) | 是 | ListItem吸顶效果。<br/>默认值：Sticky.None | 79 80### editable<sup>(deprecated)</sup> 81 82editable(value: boolean | EditMode) 83 84设置当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。 85 86从API version 9开始废弃不再使用，无替代接口。 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**参数：** 91 92| 参数名 | 类型 | 必填 | 说明 | 93| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------ | 94| value | boolean \| [EditMode](#editmodedeprecated枚举说明) | 是 | ListItem元素是否可编辑。<br/>默认值：false | 95 96### selectable<sup>8+</sup> 97 98selectable(value: boolean) 99 100设置当前ListItem元素是否可以被鼠标框选。外层List容器的鼠标框选开启时，ListItem的框选才生效。 101 102**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 103 104**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 107 108**参数：** 109 110| 参数名 | 类型 | 必填 | 说明 | 111| ------ | ------- | ---- | ------------------------------------------------- | 112| value | boolean | 是 | ListItem元素是否可以被鼠标框选。设置为true时可以被鼠标框选，设置为false时无法被鼠标框选。<br/>默认值：true | 113 114### selected<sup>10+</sup> 115 116selected(value: boolean) 117 118设置当前ListItem选中状态。该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。该属性需要在设置[选中态样式](./ts-universal-attributes-polymorphic-style.md)前使用才能生效选中态样式。 119 120**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 121 122**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 123 124**系统能力：** SystemCapability.ArkUI.ArkUI.Full 125 126**参数：** 127 128| 参数名 | 类型 | 必填 | 说明 | 129| ------ | ------- | ---- | ---------------------------------------- | 130| value | boolean | 是 | 当前ListItem选中状态。设置为true时为选中状态，设置为false时为默认状态。<br/>默认值：false | 131 132### swipeAction<sup>9+</sup> 133 134swipeAction(value: SwipeActionOptions) 135 136用于设置ListItem的划出组件。 137 138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| ------ | ------------------------------------------------- | ---- | -------------------- | 146| value | [SwipeActionOptions](#swipeactionoptions9对象说明) | 是 | ListItem的划出组件。 | 147 148## Sticky<sup>(deprecated)</sup>枚举说明 149 150ListItem吸顶效果枚举。 151 152从API version 9开始废弃不再使用，推荐使用[List组件stickyStyle枚举](ts-container-list.md#stickystyle9枚举说明)。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156| 名称 | 值 | 说明 | 157| -------- | -------- | -------- | 158| None | - | 无吸顶效果。 | 159| Normal | - | 当前item吸顶。 | 160| Opacity | - | 当前item吸顶显示透明度变化效果。 | 161 162## EditMode<sup>(deprecated)</sup>枚举说明 163 164ListItem元素编辑模式枚举。 165 166从API version 9开始废弃不再使用，无替代接口。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170| 名称 | 值 | 说明 | 171| ------ | ------ | --------- | 172| None | - | 编辑操作不限制。 | 173| Deletable | - | 可删除。 | 174| Movable | - | 可移动。 | 175 176## SwipeEdgeEffect<sup>9+</sup>枚举说明 177 178滑动效果枚举。 179 180**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184| 名称 | 值 | 说明 | 185| ------ | ------ | --------- | 186| Spring | - | ListItem划动距离超过划出组件大小后可以继续划动。<br>如果设置了删除区域，ListItem划动距离超过删除阈值后可以继续划动，<br/>松手后按照弹簧阻尼曲线回弹。 | 187| None | - | ListItem划动距离不能超过划出组件大小。<br>如果设置了删除区域，ListItem划动距离不能超过删除阈值，<br/>并且在设置删除回调的情况下，达到删除阈值后松手触发删除回调。 | 188 189## SwipeActionOptions<sup>9+</sup>对象说明 190 191start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。 192 193滑动手势只在listItem区域上，如果子组件划出ListItem区域外，在ListItem以外部分不会响应划动手势。所以在多列模式下，建议不要将划出组件设置太宽。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197| 名称 | 类型 | 只读 | 可选 | 说明 | 198| ---------------------------- | ------------------------------------------------------------ | ---- | -- | ------------------------------------------------------------ | 199| start | [CustomBuilder](ts-types.md#custombuilder8) \| [SwipeActionItem](#swipeactionitem10对象说明) | 否 | 是 | ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 200| end | [CustomBuilder](ts-types.md#custombuilder8) \| [SwipeActionItem](#swipeactionitem10对象说明) | 否 | 是 | ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 201| edgeEffect | [SwipeEdgeEffect](#swipeedgeeffect9枚举说明) | 否 | 是 | 滑动效果。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 202| onOffsetChange<sup>11+</sup> | (offset: number) => void | 否 | 是 | 滑动操作偏移量更改时调用。 <br/>**说明：** <br/> 当列表项向左或向右滑动（当列表方向为“垂直”时），向上或向下滑动（当列表方向为“水平”时）位置发生变化触发，以vp为单位。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 203 204## SwipeActionItem<sup>10+</sup>对象说明 205 206List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选项或向左滑动时，item右边的长距离滑动删除选项。 207</br>List水平布局，ListItem向上滑动，item下边的长距离滑动删除选项或向下滑动时，item上边的长距离滑动删除选项。 208 209**系统能力：** SystemCapability.ArkUI.ArkUI.Full 210 211| 名称 | 类型 | 只读 | 可选 | 说明 | 212| -------------------- | ------------------------------------------------------------ | ---- | -- | ------------------------------------------------------------ | 213| actionAreaDistance | [Length](ts-types.md#length) | 否 | 是 | 设置组件长距离滑动删除距离阈值。<br/>默认值：56vp <br/>**说明：** <br/>不支持设置百分比。<br/>删除距离阈值大于item宽度减去划出组件宽度，或删除距离阈值小于等于0就不会设置删除区域。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 214| onAction | () => void | 否 | 是 | 组件进入长距删除区后删除ListItem时调用，进入长距删除区后抬手时触发。<br/>**说明：** <br/> 滑动后松手的位置超过或等于设置的距离阈值，并且设置的距离阈值有效时才会触发。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 215| onEnterActionArea | () => void | 否 | 是 | 在滑动条目进入删除区域时调用，只触发一次，当再次进入时仍触发。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 216| onExitActionArea | () => void | 否 | 是 |当滑动条目退出删除区域时调用，只触发一次，当再次退出时仍触发。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 217| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 是 |当列表项向左或向右滑动（当列表方向为“垂直”时），向上或向下滑动（当列表方向为“水平”时）时显示的操作项。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 218| builderComponent<sup>18+</sup> | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 否 | 是 |当列表项向左或向右滑动（当列表方向为“垂直”时），向上或向下滑动（当列表方向为“水平”时）时显示的操作项。 <br/>**说明：** <br/>该参数的优先级高于参数builder。即同时设置builder和builderComponent时，以builderComponent设置的值为准。<br/> 同一个builderComponent不推荐同时给不同的start/end使用，否则会导致显示问题。 <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。| 219| onStateChange<sup>11+</sup> | (state:[SwipeActionState](#swipeactionstate11枚举说明)) => void | 否 | 是 |当列表项滑动状态变化时候触发。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 220## ListItemOptions<sup>10+</sup>对象说明 221 222ListItem组件参数。 223 224**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 225 226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 227 228| 名称 | 类型 | 只读 | 可选 | 说明 | 229| ----- | ----------------------------------------- | ---- | -- | ------------------------------------------------------------ | 230| style | [ListItemStyle](#listitemstyle10枚举说明) | 否 | 是 | 设置List组件卡片样式。<br/>默认值：ListItemStyle.NONE<br/>设置为ListItemStyle.NONE时无样式。<br/>设置为ListItemStyle.CARD时，建议配合[ListItemGroup](ts-container-listitemgroup.md)的ListItemGroupStyle.CARD同时使用，显示默认卡片样式。 <br/>卡片样式下，ListItem默认规格：高度48vp，宽度100%，左右内边距8vp。如果需要实现ListItem高度自适应，可以把height设置为undefined。<br/>卡片样式下，为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。<br/>**说明：**<br/>当前卡片模式下，使用默认Axis.Vertical排列方向，如果listDirection属性设置为Axis.Horizontal，会导致显示混乱；List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。 | 231 232## ListItemStyle<sup>10+</sup>枚举说明 233 234List组件卡片样式枚举。 235 236**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 237 238**系统能力：** SystemCapability.ArkUI.ArkUI.Full 239 240| 名称 | 值 | 说明 | 241| ---- | ---- | ------------------ | 242| NONE | 0 | 无样式。 | 243| CARD | 1 | 显示默认卡片样式。 | 244 245## SwipeActionState<sup>11+</sup>枚举说明 246 247列表项滑动状态枚举。 248 249**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253| 名称 | 值 | 说明 | 254| --------- | --------- | ------------------------------------------------------------ | 255| COLLAPSED | 0 | 收起状态，当ListItem向左或向右滑动（当列表方向为“垂直”时），<br/>向上或向下滑动（当列表方向为“水平”时）时操作项处于隐藏状态。 | 256| EXPANDED | 1 | 展开状态，当ListItem向左或向右滑动（当列表方向为“垂直”时），<br/>向上或向下滑动（当列表方向为“水平”时）时操作项处于显示状态。<br/>**说明：**<br/>需要ListItem设置向左或向右滑动（当列表方向为“垂直”时），<br/>向上或向下滑动（当列表方向为“水平”时）时显示的操作项。 | 257| ACTIONING | 2 | 长距离状态，当ListItem进入长距删除区后删除ListItem的状态。<br/>**说明：**<br/>滑动后松手的位置超过或等于设置的距离阈值，并且设置的距离阈值有效时才能进入该状态。 | 258 259## 事件 260 261### onSelect<sup>8+</sup> 262 263onSelect(event: (isSelected: boolean) => void) 264 265ListItem元素被鼠标框选的状态改变时触发回调。 266 267**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 268 269**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Full 272 273**参数：** 274 275| 参数名 | 类型 | 必填 | 说明 | 276| ---------- | ------- | ---- | ------------------------------------------------------------ | 277| isSelected | boolean | 是 | 进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | 278 279## 示例 280 281### 示例1（创建ListItem） 282该示例实现了创建ListItem的基本用法。 283 284```ts 285// xxx.ets 286export class ListDataSource implements IDataSource { 287 private list: number[] = []; 288 289 constructor(list: number[]) { 290 this.list = list; 291 } 292 293 totalCount(): number { 294 return this.list.length; 295 } 296 297 getData(index: number): number { 298 return this.list[index]; 299 } 300 301 registerDataChangeListener(listener: DataChangeListener): void { 302 } 303 304 unregisterDataChangeListener(listener: DataChangeListener): void { 305 } 306} 307 308@Entry 309@Component 310struct ListItemExample { 311 private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); 312 313 build() { 314 Column() { 315 List({ space: 20, initialIndex: 0 }) { 316 LazyForEach(this.arr, (item: number) => { 317 ListItem() { 318 Text('' + item) 319 .width('100%') 320 .height(100) 321 .fontSize(16) 322 .textAlign(TextAlign.Center) 323 .borderRadius(10) 324 .backgroundColor(0xFFFFFF) 325 } 326 }, (item: string) => item) 327 }.width('90%') 328 .scrollBar(BarState.Off) 329 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 330 } 331} 332``` 333 334 335 336### 示例2（设置划出组件） 337该示例展示了ListItem设置了swipeAction的横滑效果。 338 339```ts 340// xxx.ets 341@Entry 342@Component 343struct ListItemExample2 { 344 @State arr: number[] = [0, 1, 2, 3, 4]; 345 @State enterEndDeleteAreaString: string = 'not enterEndDeleteArea'; 346 @State exitEndDeleteAreaString: string = 'not exitEndDeleteArea'; 347 private scroller: ListScroller = new ListScroller(); 348 349 @Builder itemEnd() { 350 Row() { 351 Button('Delete').margin('4vp') 352 Button('Set').margin('4vp').onClick(() => { 353 this.scroller.closeAllSwipeActions(); 354 }) 355 }.padding('4vp').justifyContent(FlexAlign.SpaceEvenly) 356 } 357 358 build() { 359 Column() { 360 List({ space: 10, scroller: this.scroller }) { 361 ForEach(this.arr, (item: number) => { 362 ListItem() { 363 Text('item' + item) 364 .width('100%') 365 .height(100) 366 .fontSize(16) 367 .textAlign(TextAlign.Center) 368 .borderRadius(10) 369 .backgroundColor(0xFFFFFF) 370 } 371 .transition({ type: TransitionType.Delete, opacity: 0 }) 372 .swipeAction({ 373 end: { 374 builder: () => { this.itemEnd() }, 375 onAction: () => { 376 this.getUIContext()?.animateTo({ duration: 1000 }, () => { 377 let index = this.arr.indexOf(item); 378 this.arr.splice(index, 1); 379 }); 380 }, 381 actionAreaDistance: 56, 382 onEnterActionArea: () => { 383 this.enterEndDeleteAreaString = 'enterEndDeleteArea'; 384 this.exitEndDeleteAreaString = 'not exitEndDeleteArea'; 385 }, 386 onExitActionArea: () => { 387 this.enterEndDeleteAreaString = 'not enterEndDeleteArea'; 388 this.exitEndDeleteAreaString = 'exitEndDeleteArea'; 389 } 390 } 391 }) 392 }, (item: number) => item.toString()) 393 } 394 Text(this.enterEndDeleteAreaString).fontSize(20) 395 Text(this.exitEndDeleteAreaString).fontSize(20) 396 } 397 .padding(10) 398 .backgroundColor(0xDCDCDC) 399 .width('100%') 400 .height('100%') 401 } 402} 403``` 404 405 406### 示例3（设置卡片样式） 407该示例展示了ListItem的卡片样式效果。 408 409```ts 410// xxx.ets 411@Entry 412@Component 413struct ListItemExample3 { 414 build() { 415 Column() { 416 List({ space: '4vp', initialIndex: 0 }) { 417 ListItemGroup({ style: ListItemGroupStyle.CARD }) { 418 ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => { 419 ListItem({ style: itemStyle }) { 420 Text('' + index) 421 .width('100%') 422 .textAlign(TextAlign.Center) 423 } 424 }) 425 } 426 ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => { 427 ListItem({ style: itemStyle }) { 428 Text('' + index) 429 .width('100%') 430 .textAlign(TextAlign.Center) 431 } 432 }) 433 } 434 .width('100%') 435 .multiSelectable(true) 436 .backgroundColor(0xDCDCDC) 437 } 438 .width('100%') 439 .padding({ top: 5 }) 440 } 441} 442``` 443 444 445### 示例4（通过ComponentContent设置划出组件） 446 447该示例通过ComponentContent设置ListItem中的划出组件操作时显示的操作项。 448 449```ts 450// xxx.ets 451import { ComponentContent } from '@kit.ArkUI'; 452 453class BuilderParams { 454 text: string | Resource; 455 scroller: ListScroller; 456 constructor(text: string | Resource, scroller: ListScroller) { 457 this.text = text; 458 this.scroller = scroller; 459 } 460} 461 462@Builder 463function itemBuilder(params: BuilderParams) { 464 Row() { 465 Button(params.text).margin('4vp') 466 Button('Set').margin('4vp').onClick(() => { 467 params.scroller.closeAllSwipeActions() 468 }) 469 }.padding('4vp').justifyContent(FlexAlign.SpaceEvenly) 470} 471@Component 472struct MyListItem { 473 scroller: ListScroller = new ListScroller(); 474 @State arr: number[] = [0, 1, 2, 3, 4]; 475 @State project ?: number = 0; 476 startBuilder ?: ComponentContent<BuilderParams> = undefined; 477 endBuilder ?: ComponentContent<BuilderParams> = undefined; 478 479 builderParam = new BuilderParams('delete', this.scroller); 480 481 aboutToAppear(): void { 482 this.startBuilder = new ComponentContent(this.getUIContext(), wrapBuilder(itemBuilder), this.builderParam); 483 this.endBuilder = new ComponentContent(this.getUIContext(), wrapBuilder(itemBuilder), this.builderParam); 484 } 485 GetStartBuilder() { 486 this.startBuilder?.update(new BuilderParams('StartDelete', this.scroller)); 487 return this.startBuilder; 488 } 489 GetEndBuilder() { 490 this.endBuilder?.update(new BuilderParams('EndDelete', this.scroller)); 491 return this.endBuilder; 492 } 493 build() { 494 ListItem() { 495 Text('item' + this.project) 496 .width('100%') 497 .height(100) 498 .fontSize(16) 499 .textAlign(TextAlign.Center) 500 .borderRadius(10) 501 .backgroundColor(0xFFFFFF) 502 } 503 .transition({ type: TransitionType.Delete, opacity: 0 }) 504 .swipeAction({ 505 end: { 506 builderComponent: this.GetEndBuilder(), 507 onAction: () => { 508 this.getUIContext()?.animateTo({ duration: 1000 }, () => { 509 let index = this.arr.indexOf(this.project); 510 this.arr.splice(index, 1); 511 }); 512 }, 513 actionAreaDistance: 56 514 }, 515 start: { 516 builderComponent: this.GetStartBuilder(), 517 onAction: () => { 518 this.getUIContext()?.animateTo({ duration: 1000 }, () => { 519 let index = this.arr.indexOf(this.project); 520 this.arr.splice(index, 1); 521 }); 522 }, 523 actionAreaDistance: 56 524 } 525 }) 526 .padding(5) 527 } 528} 529 530@Entry 531@Component 532struct ListItemExample { 533 @State arr: number[] = [0, 1, 2, 3, 4]; 534 private scroller: ListScroller = new ListScroller(); 535 536 build() { 537 Column() { 538 List({ space: 10, scroller: this.scroller }) { 539 ListItemGroup() { 540 ForEach(this.arr, (project: number) => { 541 MyListItem({ scroller: this.scroller, project: project, arr:this.arr }) 542 }, (item: string) => item) 543 } 544 } 545 } 546 .padding(10) 547 .backgroundColor(0xDCDCDC) 548 .width('100%') 549 .height('100%') 550 } 551} 552``` 553
