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

本文鏈接：https://blog.csdn.net/iCloudEnd/article/details/104113058

智能推薦

Android最全屏幕適配的幾個重要概念（一）

為什么要屏幕適配由于Android系統的開放性，任何用戶、開發者、OEM廠商、運營商都可以對Android進行定制，于是導致運行 Android 的設備多種多樣，它們有著不同的屏幕尺寸和像素密度。盡管系統可通過基本的縮放和調整大小功能使界面適應不同屏幕，但您應做出進一步優化，以確保界面能夠在各類屏幕上美觀地呈現。首先我們要搞清楚，幾個比較重要的概念。屏幕尺寸屏幕尺寸指屏幕的對角線的長度，...

如何讓echart鋪滿設置的尺寸

如何讓echart鋪滿設置的尺寸在使用echart進行自適應時，給echart設置了100%，但是echart圖表的大小并沒有鋪滿100%；樣式的話，我是使用less，在頁面渲染的時候，即使設置了尺寸，但會有一定的延遲，拿到的echart尺寸并是不我想要的；可以通過讓echart延遲顯示，達到想要的效果；提供一個容器在頁面一渲染的時候進行設置自適應圖表的配置項通過上面的設置，實現了...

VMware中Ubuntu18如何全屏鋪滿

這兩天下載了Ubuntu18桌面版，但是在VM里面，不能將屏幕鋪滿，都是左右留一部分黑條，有人說下載VMware Tools就行了，但試過沒用，修改分辨率全部試過也對不上。于是試了官方推薦的開源的open-vm-tools 第一步安裝這個：無效命令的話也不慌，再執行這一句然后執行重啟開機后調整分辨率為1920*1080（16：9）就完美解決了。...

SwiftUI 基礎之List如何設置風格

UIKit時代我們可以給UITableview設置不同顯示風格，SwiftUI世界里該如何實現呢？實現方法非常簡單，請看效果和代碼效果 [email protected] 代碼參考文章 https://stackoverflow.com/questions/56498045/remove-extra-separators-below-list-in-swiftui 更多S...

SwiftUI 基礎之如何獲取json文件

創建一個playground 運行效果 image.png 更多SwiftUI教程和代碼關注專欄請關注我的專欄 SwiftUI教程與源碼...