SwiftUI 学习笔记-04 在SwiftUI 中使用 UIView

教程中说的是怎么在SwiftUI中使用BlurView, 因为SwiftUI暂时不支持BlurView,所以使用到了UIViewRepresentable来做桥接,所以关注重点是怎么将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
        
        //常规初始化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 设置与view 等宽高
            blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
            blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
            //也可这样可以直接指定宽/高
//            blurView.widthAnchor.constraint(equalToConstant: <#T##CGFloat#>)
        ])
        return view
    }
    
    //据说是用来完善动画相关的部分
    func updateUIView(_ uiView: UIView, context: Context) {
        
    }
}

使用的时候就把BlurView当做普通的View来用

VStack{
          ...
}
.background(BlurView(style: .systemMaterial))
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在目前阶段,SwiftUI 很难独立开发一款功能强大的 App,还是需要与 UIKit 一起合作,借助 UIKit...
    YungFan阅读 4,781评论 2 9
  • 目录 Swift学习资料@ 完整App@ App框架@响应式框架@ UI@日历三方库@ 下拉刷新@ 模糊效果@ 富...
    Dear_80d3阅读 8,635评论 2 79
  • 学习文章 文集:Hacking with iOS: SwiftUI Edition[https://www.jia...
    xmb阅读 4,558评论 3 14
  • 目录Swift学习资料@完整App@App框架@ 响应式框架@ UI@ 日历三方库@下拉刷新@模糊效果@富文本@图...
    IOS开发攻城狮_Fyc阅读 6,344评论 1 90
  • UIView - 视图 UIView为屏幕上的矩形区域管理内容的对象,一般称为视图(以下称为视图)。视图是应用程序...
    寻心_0a46阅读 591评论 0 1