#鸿蒙通关秘籍#如何在List组件中实现子组件超出容器边缘

在开发中，有时候需要子组件能够超出父组件的范围进行展示。例如，在List组件内，可以使用以下两种方式来达到这一效果：

方式一

1. 设置负的margin值来移动组件位置，使其超出父组件范围： typescript Image($r("app.media.listitem_overflow_io_user_portrait")) .width(80) .height(80) .margin({ top: -50, left: 15 })

2. 在List内部使用ListItem进行占位，包住超出的区域： typescript List() { ListItem().height(40).selectable(false) // 占位组件 ListItem() { // 需要超出范围的组件 Image($r("app.media.listitem_overflow_io_user_portrait")) .width(80) .height(80) .margin({ top: -50, left: 15 }) } ... }

方式二

1. 设置负的margin值来移动组件位置，使其超出父组件范围： typescript Image($r("app.media.listitem_overflow_io_user_portrait")) .width(80) .height(80) .margin({ top: -50, left: 15 })

2. 在List组件外部使用Row进行占位，同时设置List的clip属性为false，以便上下移动超出List组件的区域： typescript Row().height(60) // 占位组件 List() { ListItem() { // 需要超出范围的组件 Image($r("app.media.listitem_overflow_io_user_portrait")) .width(80) .height(80) .margin({ top: -50, left: 15 }) } ... }.clip(false)