使用导航链接导航时图像太大

Question

我遇到了图像显示问题。 我正在导航到带有背景图像的视图，当我这样做时，整个图像都会关闭屏幕。 像那样。 我试过使用 Geometry Reader，但没有用。 需要你的帮助。

VStack {


// CONTENT HERE

}
            .background (

                ZStack{
                    Image("lake")
                        .resizable()
                        .ignoresSafeArea()
                        .scaledToFill()

                    
//                    LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom)
//                        .ignoresSafeArea()
//                        .aspectRatio(contentMode: .fill)
                    
                }
                
            )
.navigationBarTitle("", displayMode: .inline)
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)

Answer 1

你的图片太大了，所以它在你的视野中流血了。 为了防止您可以在 .background 之后使用.background .clipped() 。 这将“剪辑”视图以确保其内容不会在其框架之外呈现。

Answer 2

实施您的图像后，您应该使用。 frame来设置图像的height和width 。

例子：

ZStack{
   Image("lake")
      .resizable()
      .scaledToFill()
      .frame(width: 400, height: 400) //This will make your image square. You can choose the size you want.
}