如何在iOS上为Compose多平台视图设置透明背景?

huangapple go评论45阅读模式
英文:

How to set transparent background on Compose Multiplatform view on iOS?

问题

我在Kotlin中使用org.jetbrains.compose v 1.4.0有最简单的设置:

fun MainViewController() =
    ComposeUIViewController {
       Button(onClick = { }) {
            Text("Click me")
        }
    }

在iOS上,我有以下代码:

struct ComposeView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        MainIosKt.MainViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct ContentView: View {
    @State var showSettings = false
    
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 500, height: 500)
                ComposeView()
                    .padding(EdgeInsets(top: 140, leading: 140, bottom: 140, trailing: 140))
            }
        }
    }
}

即使没有特别设置,白色背景会遮挡红色矩形。我想要透明的背景,这样我就可以在其他iOS内容(如相机图像)上叠加Compose UI。

我尝试过:

  1. 更改Compose主题的背景和表面。
  2. 将ComposeView的modalPresentationStyle更改为.currentContext或.overCurrentContext。
  3. 更改ComposeView的vc.view.backgroundColor = UIColor.clear

但是白色背景仍然存在。这是目前不支持的吗,还是我做错了什么?

英文:

I have the simplest setup in Kotlin with org.jetbrains.compose v 1.4.0

fun MainViewController() =
    ComposeUIViewController {
       Button(onClick = { }) {
            Text("Click me")
        }
    }

On iOS i have:

struct ComposeView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        MainIosKt.MainViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct ContentView: View {
    @State var showSettings = false
    
    var body: some View {
        VStack {
            
            ZStack {
                Rectangle()
                    .fill(.red)
                    .frame(width: 500, height: 500)
                ComposeView()
                    .padding(EdgeInsets(top: 140, leading: 140, bottom: 140, trailing: 140))
                
            }
        }
    }
}

There is a white background obscuring the red rectangle even if not set specifically. I would like to have transparent background so that I can overlay compose UI over other iOS content like camera feed.

Tried to:

  1. change compose theme background & surface
  2. change ComposeView modalPresentationStyle to .currentContext or .overCurrentContext
  3. change ComposeView vc.view.backgroundColor = UIColor.clear

But the white background is still present. Is that not supported for now or am I doing something wrong?

答案1

得分: 1

感谢这次的Slack对话: https://kotlinlang.slack.com/archives/C0346LWVBJ4/p1685005635951389

并更新到compose-multiplatform 1.5.0
只需添加对话中的两个文件,并像这样使用:

fun MainViewController() =
    TransparentComposeUIViewController {
        Button(onClick = { }) {
            Text("Click me")
        }
    }
英文:

Thanks to this slack conversation: https://kotlinlang.slack.com/archives/C0346LWVBJ4/p1685005635951389

And updated to compose-multiplatform 1.5.0
Just add two files from the conversation and use it like this:

    fun MainViewController() =
        TransparentComposeUIViewController {
           Button(onClick = { }) {
                Text("Click me")
            }
        }

huangapple
  • 本文由 发表于 2023年5月25日 02:19:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76326406.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定