ZStack 中的 SwiftUI 图像未与屏幕底部对齐

Question

我有这个代码

struct ContentView: View {
    var body: some View {
        ZStack(alignment:.bottom) {
            Image("login-devices-mobile")
                .resizable()
                .scaledToFit()
            
        }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
    }
}

我正在尝试在屏幕底部显示图像。但是当我运行预览的时候。它仍然显示在中间。

有什么提示可以让我以不同的方式对齐屏幕底部的图像吗？

Answer 1

你可以像 -

struct ContentView: View {
var body: some View {
    ZStack() {
        Spacer() // Add these....
        Image("login-devices-mobile")
            .resizable()
            .scaledToFit()
        
    }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
}

}

希望对您有所帮助。

Answer 2

我猜你想要这个

ZStack(alignment:.bottom) {
    Image("login-devices-mobile")
        .resizable()
        .scaledToFit()
    
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom) // << here !!
.background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))

Answer 3

将图像包装在 VStack 中应该可以解决问题：

struct ContentView: View {
    var body: some View {
        ZStack() {
            VStack {
                Spacer() 
                Image("login-devices-mobile")
                    .resizable()
                    .scaledToFit()
            }
        }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
        
    }
}

ZStack 中的 SwiftUI 图像未与屏幕底部对齐

SwiftUI Image in ZStack not aligning to bottom of screen

swift

swiftui