如何在SwiftUI macOS应用程序中模糊背景?

库沙格拉

在此处输入图片说明

我想使突出显示的部分透明和模糊,类似于其他macOS应用程序。我在网上找到有关如何使用NSViewController进行模糊处理的文章,我对此并不完全了解。我是新手,还不了解如何使用Viewcontrollers。我的代码如下。任何帮助,将不胜感激!


import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            GeometryReader { geometry in
                NavigationView{
                    HStack(spacing: 0) {
                        ZStack{

                            Text("BitMessenger")
                                .font(.title)
                                .fontWeight(.light)
                                .foregroundColor(Color.white)
                        }
                        .frame(width: geometry.size.width/2, height: geometry.size.height+20)
                        .background(Color(red: 0.07, green: 0.07, blue: 0.07, opacity: 1.0))
                        VStack{

                            HStack {
                                Text("Sign Up")
                                    .font(.headline)
                                    .padding(.top, 30.0)
                                Spacer()
                            }




                            HStack {
                                Text("Welcome to BitMessenger")
                                    .font(.subheadline)
                                    .foregroundColor(Color.gray)
                                    .padding(.top, 10.0)
                                Spacer()
                            }

                            Form {
                                VStack{
                                    HStack {
                                        Text("Full Name")
                                            .font(.caption)
                                            .foregroundColor(Color.white)
                                            .padding(.top, 10.0)
                                        Spacer()
                                    }





                                    TextField("ex. John Doe", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)




                                    HStack {
                                        Text("Email Address")
                                            .font(.caption)
                                            .foregroundColor(Color.white)
                                            .padding(.top, 10.0)
                                        Spacer()
                                    }





                                    TextField("[email protected]", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)





                                    HStack {
                                        Text("Password")
                                            .font(.caption)
                                            .foregroundColor(Color.white)
                                            .padding(.top, 10.0)
                                        Spacer()
                                    }



                                    TextField("AIOFHWaowhf", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)

                                    HStack {
                                        Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                                            Text("Register")
                                                .padding(.horizontal, 10.0)
                                        }
                                        .padding(.all)
                                    }

                                }
                            }
                            .padding(.top)

                            Spacer()

                            NavigationLink(destination: ContentView()) {
                                Text("Already have an Account? Login")
                                .font(.caption)
                                    .foregroundColor(Color.gray)
                                    .background(Color.clear)
                            }
                            .padding(.bottom)
                            .foregroundColor(Color.clear)


                        }
                        .padding(.horizontal, 30.0)
                        .frame(width: geometry.size.width / 2, height: geometry.size.height+20)
                        .background(Color.black.opacity(0.9))
                    }.edgesIgnoringSafeArea(.all)
                }

            }
            .edgesIgnoringSafeArea(.all)
            .frame(width: 750.0, height: 500.0)

        }

    }
}


class MyViewController: NSViewController {

    var visualEffect: NSVisualEffectView!

    override func loadView() {
        super.loadView()

        visualEffect = NSVisualEffectView()
        visualEffect.translatesAutoresizingMaskIntoConstraints = false
        visualEffect.material = .dark
        visualEffect.state = .active
        visualEffect.blendingMode = .behindWindow
        view.addSubview(visualEffect)

        visualEffect.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        visualEffect.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        visualEffect.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        visualEffect.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true


    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


安娜·莎玛(AnaghSharma)

您实际上不需要继承NSViewController您需要的是-来自AppKit的NSVisualEffectView

为界面中的视图添加半透明和鲜艳效果的视图。

由于NSVisualEffectViewSwiftUI中尚不提供,因此您可以NSViewRepresentable像SwiftUI中不可用的每个AppKit控件一样使用它进行包装

你可以这样-

import SwiftUI

struct VisualEffectView: NSViewRepresentable
{
    let material: NSVisualEffectView.Material
    let blendingMode: NSVisualEffectView.BlendingMode
    
    func makeNSView(context: Context) -> NSVisualEffectView
    {
        let visualEffectView = NSVisualEffectView()
        visualEffectView.material = material
        visualEffectView.blendingMode = blendingMode
        visualEffectView.state = NSVisualEffectView.State.active
        return visualEffectView
    }

    func updateNSView(_ visualEffectView: NSVisualEffectView, context: Context)
    {
        visualEffectView.material = material
        visualEffectView.blendingMode = blendingMode
    }
}

然后,您可以将其独立使用View-

VisualEffectView(material: NSVisualEffectView.Material.contentBackground, blendingMode: NSVisualEffectView.BlendingMode.withinWindow)

或将其用作VStack这样突出显示的背景修饰符-

.background(VisualEffectView(material: NSVisualEffectView.Material.contentBackground, blendingMode: NSVisualEffectView.BlendingMode.withinWindow))

查看Apple Developer文档以了解有关两种混合模式的更多信息。另外,使用Material属性获得所需的结果。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在macOS(不是iOS)上的SwiftUI中以编程方式从后台打开应用程序窗口?

如何在macOS Catalina中删除系统应用程序?

如何在macOS应用程序中从App注册服务?

如何在Android应用程序中更改背景颜色

SwiftUI:更改 macOS 应用程序中的“关于视图”

SwiftUI:如何在macOS应用中实现“编辑”菜单

swiftui像消息应用程序一样长按后将视图带到中心并模糊背景

SwiftUI:与 macOS 应用程序等效的 fullScreenCover?

如何在SwiftUI中位于Apple的Files应用程序的文件夹中写入文件?

如何在swiftui中硬定向锁定我的应用程序

如何在swiftui邮件应用程序中传递主题和正文文本?

如何在我的 SwiftUI 应用程序中显示来自 Api 的数据

如何在应用程序包 [macOS] 中的 C 中查找当前目录

如何在Xcode之外运行Xcode应用程序?MacOS Standalone应用程序与Xcode Simulator中的应用程序运行不同

如何在基于文档的 macOS 应用程序中处理不同的文档类型?

如何在 macOS 上的 Swift 中在 PATH 上启动终端应用程序?

如何在 macOS 应用程序中从文件系统读取图像

如何在macOS下的非基于文档的应用程序中添加选项卡?

如何在.NET Core控制台应用程序中获取MacOS用户名?

如何在SwiftUI中使键盘模糊视图

如何在Instagram应用程序上实现视图上的模糊/霜冻/饱和度背景效果(不包含图像)

如何在macOS上全屏显示tkinter应用程序?

如何在MacOS上将应用程序从/ Applications移至〜/ Applications

如何在UI5应用程序中设置背景图像并使之响应?

如何在RoR应用程序中调试背景视频的HTML5 / CSS

如何在MAC OS X应用程序中更改NSTableView标头背景颜色?

如何在 Xamarin.IOS 应用程序的 UIButton 中设置背景图像?

如何在WPF应用程序中设置和放置背景图像

如何在WPF应用程序中设置所有窗口的背景图像