SwiftUI 學習筆記-04 在SwiftUI 中使用 UIView

教程中說的是怎么在SwiftUI中使用BlurView, 因為SwiftUI暫時不支持BlurView,所以使用到了UIViewRepresentable來做橋接,所以關(guān)注重點是怎么將UIView橋接至SwiftUI。
理解為將BlurView先放到容器View中,指定BlurView 與view等寬,view又是自動布局,然后再通過UIViewRepresentable橋接SwiftUI
代碼如下:

import SwiftUI

struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    //指定橋接類型
    typealias UIViewType = UIView
    //指定類型之后會提示自動補全下面兩個方法

    //初始化UIView的方法
    func makeUIView(context: Context) -> UIView {
        //下面要使用自動布局指定大小,所以初始化為0
        let view = UIView(frame: CGRect.zero)
        //指定容器View的背景色為 clear
        view.backgroundColor = .clear
        
        //常規(guī)初始化BlurView的操作
        let blurEffect = UIBlurEffect(style: style)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.translatesAutoresizingMaskIntoConstraints = false
        //將BlurView插入到view的最底層
        view.insertSubview(blurView, at: 0)
        
        //自動布局指定blueView的大小為與View等寬高
        //要注意先后順序,需先將blurView插入到view中
        NSLayoutConstraint.activate([
            //width & height 這里是用autolayout 設(shè)置與view 等寬高
            blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
            blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
            //也可這樣可以直接指定寬/高
//            blurView.widthAnchor.constraint(equalToConstant: <#T##CGFloat#>)
        ])
        return view
    }
    
    //據(jù)說是用來完善動畫相關(guān)的部分
    func updateUIView(_ uiView: UIView, context: Context) {
        
    }
}

使用的時候就把BlurView當做普通的View來用

VStack{
          ...
}
.background(BlurView(style: .systemMaterial))
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在目前階段,SwiftUI 很難獨立開發(fā)一款功能強大的 App,還是需要與 UIKit 一起合作,借助 UIKit...
    YungFan閱讀 5,136評論 2 9
  • 目錄 Swift學習資料@ 完整App@ App框架@響應(yīng)式框架@ UI@日歷三方庫@ 下拉刷新@ 模糊效果@ 富...
    Dear_80d3閱讀 8,691評論 2 79
  • 學習文章 文集:Hacking with iOS: SwiftUI Edition[https://www.jia...
    xmb閱讀 4,691評論 3 14
  • 目錄Swift學習資料@完整App@App框架@ 響應(yīng)式框架@ UI@ 日歷三方庫@下拉刷新@模糊效果@富文本@圖...
    IOS開發(fā)攻城獅_Fyc閱讀 6,539評論 1 90
  • UIView - 視圖 UIView為屏幕上的矩形區(qū)域管理內(nèi)容的對象,一般稱為視圖(以下稱為視圖)。視圖是應(yīng)用程序...
    尋心_0a46閱讀 734評論 0 1

友情鏈接更多精彩內(nèi)容