HarmonyOS鸿蒙Next中容器组件如何实现子组件溢出时仍然显示子组件？如实现web的overflow:visible功能

HarmonyOS鸿蒙Next中容器组件如何实现子组件溢出时仍然显示子组件？如实现web的overflow:visible功能 容器组件 如何实现子组件溢出时仍然显示子组件？如实现web的overflow:visible的功能

5 回复

使用clip属性可以实现的

更多关于HarmonyOS鸿蒙Next中容器组件如何实现子组件溢出时仍然显示子组件？如实现web的overflow:visible功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


反了吧，默认就是溢出时仍然显示，而不想显示的时候需要使用.clip(true)

cke_749.png

@Entry
@Component
struct Page01 {
  build() {
    Column({space:30}) {
      Stack(){
        Stack(){

        }.width(200).height(50).backgroundColor(Color.Pink)
      }.width(100).height(100).backgroundColor(Color.Orange)

      Stack(){
        Stack(){

        }.width(200).height(50).backgroundColor(Color.Pink)
      }.width(100).height(100).backgroundColor(Color.Orange)
      .clip(true)
    }
    .height('100%')
    .width('100%')
  }
}

父组件的裁切属性设置为false.

在HarmonyOS鸿蒙Next中，若要在容器组件中实现子组件溢出时仍然显示子组件，可以使用Stack组件配合Clip属性。Stack组件允许子组件堆叠在一起，而Clip属性用于控制子组件是否被裁剪。默认情况下，Clip属性为true，子组件超出父容器边界时会被裁剪。将Clip属性设置为false，即可实现类似Web中overflow:visible的效果，子组件溢出时仍然显示。

示例代码如下：

@Entry
@Component
struct OverflowExample {
  build() {
    Stack({ clip: false }) {
      // 子组件
      Text('溢出内容')
        .fontSize(30)
        .position({ x: 150, y: 150 })
    }
    .width(200)
    .height(200)
    .backgroundColor(Color.Gray)
  }
}

在上述代码中，Stack组件的clip属性设置为false，子组件Text即使超出Stack的边界，仍然会显示。通过这种方式，可以在鸿蒙Next中实现子组件溢出时的可见效果。

在HarmonyOS鸿蒙Next中，容器组件的子组件溢出时仍然显示子组件，可以通过设置clip属性为false来实现。clip属性默认值为true，表示子组件超出容器边界时会被裁剪。将其设置为false后，子组件即使超出容器边界也会完整显示，类似于Web中的overflow: visible功能。

示例代码：

Column({ clip: false }) {
  Text('溢出内容').fontSize(50)
}

这样，Text组件超出Column容器时仍然会显示。

回到顶部