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()
              
        )
        
    }
}
複製代碼

效果不盡人意，沒有鋪開

而後將容器撐滿全屏

咱們的能夠使用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()
             
        )
        
    }
}
複製代碼

效果還能夠，可是劉海兒和底部尚未鋪上。

使用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教程和代碼關注專欄

• 請關注個人專欄icloudend, SwiftUI教程與源碼