如何在UIView中使SwiftUI视图透明或半透明?

时间:2020-10-04 13:50:32

标签: ios swift swiftui uikit

尽管SwiftUI视图在添加到UIView之后将不透明度设置为0.5,但仍然具有纯色。如果仔细观察,可以在下面的矩形顶部角落看到SwiftUI视图的白色背景。

下面的代码在根视图中添加了一个UILabel和一个SwiftUI矩形视图,该矩形的不透明度为0.5,因此它想看透其后的文本“ Test”,但是它看起来像是不透明的背景。

我还尝试将SwiftUI视图实例的父视图的背景颜色设置为clear

是否可以在一个UIView中使SwiftUI视图透明或半透明?

import UIKit
import SwiftUI

import PlaygroundSupport

struct Foo: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 18)
                .fill(Color.red)
        }
        .background(Color.red)
        .opacity(0.5)
    }
}

class ViewController:UIViewController{
    override func viewDidLoad() {
        super.viewDidLoad()

        let label = UILabel()
        label.text = "TEST"
        
        view.addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
        
        let fooView = Foo()
        let controller = UIHostingController(rootView: fooView)
        let subview = controller.view!
        
        view.addSubview(subview)
        view.backgroundColor = .clear
        subview.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            
            subview.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            subview.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            subview.widthAnchor.constraint(equalToConstant: 100),
            subview.heightAnchor.constraint(equalToConstant: 100)
        ])
    }
}

let viewController = ViewController()
PlaygroundPage.current.liveView = viewController
PlaygroundPage.current.needsIndefiniteExecution = true

enter image description here

1 个答案:

答案 0 :(得分:1)

因为“默认情况下,每个主机控制器视图都是不透明的”,所以将以下内容添加到SwiftUI视图即可解决此问题。

let fooView = Foo()
let controller = UIHostingController(rootView: fooView)
let subview = controller.view!
        
subview.backgroundColor = .clear // <--- THIS LINE

参考 How can I make a background color with opacity on a Sheet view?