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()
              
        )
        
    }
}

效果不尽人意，没有铺开

[email protected]

然后将容器撑满全屏

我们的可以使用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()
             
        )
        
    }
}

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

[email protected]

使用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)
        )
        
    }
}

最终效果

[email protected]

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

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970