#鸿蒙通关秘籍#如何借助Row组件与List.clip(false)实现子组件溢出List区域？

在HarmonyOS Next开发中，若需实现组件溢出List区域的效果，并允许上下滚动时区域的溢出，可采取以下步骤：

1. 使用负margin值调整组件位置，使其超出父组件范围边界。例如：

   Image($r("app.media.io_user_portrait"))
     .width(80)
     .height(80)
     .margin({ top: -50, left: 15 })
   1.
   2.
   3.
   4.

   复制

2. 在List外部使用Row占位，并将List的clip属性设置为false，以允许组件溢出边界：

   Row().height(60) // 占位组件
   List() {
     ListItem() { // 实现超出范围的组件
       Image($r("app.media.io_user_portrait"))
         .width(80)
         .height(80)
         .margin({ top: -50, left: 15 })
     }
     ...
   }.clip(false)
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.

   复制

如此设置可以显著提升组件的展示效果，例如在头像显示时比界面更突出，动态展示中更吸引眼球。