HarmonyOS 鸿蒙Next半模态

HarmonyOS 鸿蒙Next半模态 我想要让半模态界面里的图片超出半模态边框并且完整显示应该怎么做?我尝试了各种加内外边距办法图片都显示不完整。

// CalendarPopupComponent.ets
import { router } from "@kit.ArkUI"
import { DataPage } from "./CalendarComponent"

@Component
export struct Calendarpopupcomponent {
  @State isShowSheet: boolean = false;

  // 半模态弹窗构建
  @Builder
  mySheet() {
    Column() {
      Stack({ alignContent: Alignment.TopEnd }) {
        // 日历主体内容
        DataPage({
          isShowSheet: $isShowSheet
        }).margin({ top: 120 })

        // 顶部溢出图片容器
        Stack() {
          Image($r('app.media.CalendarCat'))
            .width(112)
            .height(94)
            .objectFit(ImageFit.Contain)
            .position({ x: '20%', y: -110 })
            .zIndex(9999)
        }
        .height(150)
        .margin({ top: -100 })
        .clip(false)
      }
      .height('140%')
      .clip(false)

      // 底部操作栏
      Row() {
        Text('取消')
          .fontColor('#333333')
          .onClick(() => this.closeSheet())
      }
      .height(60)
      .width('100%')
      .backgroundColor('#F5F5F5')
    }
    .backgroundColor(Color.White)
  }

  // 关闭弹窗
  private closeSheet() {
    this.isShowSheet = false;
    console.info('Calendar popup closed');
  }

  build() {
    Column() {
      // 触发按钮
      Image($r('app.media.img_data_target_arrow1_new'))
        .width(20)
        .height(20)
        .margin({ left: 174, top: 61 })
        .onClick(() => this.isShowSheet = true)
    }
    .bindSheet(this.isShowSheet, this.mySheet(), {
      showClose: false,
      height: '70%',
      dragBar: false,
      onDisappear: () => this.closeSheet()
    })
  }
}

更多关于HarmonyOS 鸿蒙Next半模态的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

您好,您的问题已收到,正在处理中。

更多关于HarmonyOS 鸿蒙Next半模态的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


用Flex吧,Column约束性这么强

HarmonyOS 鸿蒙Next的半模态技术是一种创新的交互方式,允许用户在特定场景下同时进行多任务操作。通过半模态设计,用户可以在不中断当前任务的情况下,快速访问或处理其他功能,提升操作效率。这种技术广泛应用于智能设备,如手机、平板和智能家居设备,优化了用户体验,增强了系统的灵活性和响应速度。

回到顶部