SwiftUI基础之如何让图片铺满全屏幕

假设我们有个图片希望铺满全屏该如何操作呢?

首先设置背景

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            CircleImage(imageName: "lilly")
                .frame(width:160,height:160)
                .padding(.top,89)
                .padding(.bottom,20)
     
        }
        .background(
            Image("lotus")
                .resizable()
                .scaledToFill()
              
        )
        
    }
}

效果不尽人意,没有铺开
SwiftUI基础之如何让图片铺满全屏幕_第1张图片

然后将容器撑满全屏

我们的可以使用Spacer()将VStack撑开

struct ContentView: View {
    var body: some View {
        VStack{
            CircleImage(imageName: "lilly")
                .frame(width:160,height:160)
                .padding(.top,89)
                .padding(.bottom,20)
            Spacer()
        }
        .background(
            Image("lotus")
                .resizable()
                .scaledToFill()
             
        )
        
    }
}

效果还可以,但是刘海儿和底部还没有铺上。

SwiftUI基础之如何让图片铺满全屏幕_第2张图片

使用edgesIgnoringSafeArea 铺满整个屏幕

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            CircleImage(imageName: "lilly")
                .frame(width:160,height:160)
                .padding(.top,89)
                .padding(.bottom,20)
            Spacer()
        }
        .background(
            Image("lotus")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
        )
        
    }
}

最终效果

SwiftUI基础之如何让图片铺满全屏幕_第3张图片

更多SwiftUI教程和代码关注专栏

你可能感兴趣的:(ios,swift)