代码之家 › 专栏 › 技术社区 › meaning-matters

SwiftUI:如何让视图延伸到安全区域之外?

layout swiftui swift ios

meaning-matters · 技术社区 · 3 年前

我的代码类似于:

var body: some View
{
    VStack
    {
        Image("someImage")
            .resizable()
            .frame(width: UIScreen.main.bounds.width)

        Image("someImage")
            .resizable()
            .frame(width: UIScreen.main.bounds.width)

        Image("someImage")
            .resizable()
            .frame(width: UIScreen.main.bounds.width)
    }
}

我的图像具有1:1的纵横比。在iPhone上,这意味着没有足够的垂直空间来容纳它们。

目前,图像是垂直压缩的。

我如何确保所有三个图像都填满屏幕的宽度,中间的图像居中,顶部和底部的图像延伸超过屏幕的顶部和底部边缘?

1 回复 | 直到 3 年前

Bradley Mackey 3 年前

这个 resizable 修改器将告诉图像填充其父对象的空间,而不关心原始纵横比。您想要的是强制图像保持其纵横比,同时占用所有可用空间( contentMode: .fill ):

Image(systemName: "someImage")
  .resizable()
  .aspectRatio(contentMode: .fill)
  .frame(width: UIScreen.main.bounds.width)

如果在 VStack 与屏幕上可见的内容相比,内容将已经扩展到屏幕的边界(和安全区域)之外,除非该内容显式地调整大小以适应其父内容。你可以通过改变来看到这种行为 contentMode 到 .fit 。

适合	填满

推荐文章

sudoExclamationExclamation · iOS自动布局-高度不能小于ThanOrEqualTo

1 年前

Tulon · Firebase身份验证SwiftUI:更改密码后,电子邮件验证状态变为真

1 年前

Danil · 种子/填充核心数据的最佳实践?[关闭]

1 年前

HeWhoRemains · 如何在SwiftUI中创建圆形文本,根据度数变化从一条直线变为一个完美的圆?

1 年前

Robin · LazyVGrid项目预计不会击中测试区域

1 年前

Mahendra · Popover不是从SwiftUI中的项目列表中打开的[重复]

1 年前

Alex Smith · 移动到下一个视图控制器后如何显示警报?

1 年前

sadiq shareef · 即使更新了我的苹果应用程序网站关联文件,iOS应用程序也不会在点击网址时启动

1 年前

selcukctn · 如何在react native中制作无限动画?

1 年前

Nicolas Gimelli · iOS 18远程通信通知不起作用

1 年前