Mac OS Swift UI双栏搜索窗口

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack{
            List{
                Label("测试",systemImage:"book")
                Label("测试",systemImage:"book")
                Label("测试",systemImage:"book")
            }
            .listStyle(InsetListStyle())
            .frame(maxWidth: 100)
            
            VStack{
                HomeView()
            }
            
        }
//        .ignoresSafeArea(.all, edges: .all)
        .frame(minWidth: 600, minHeight: 400, alignment: .center)
//        .background(Color.white.opacity(0.8))
        .background(CustomView().opacity(1))
    }
    
}

struct HomeView: View {
    @State var searchValue = ""
    
    var body: some View{
        SearchBar(search: self.$searchValue)
            .padding()
        VStack{
            Spacer()
            Text("搜索内容为:\(self.searchValue)")
            Spacer()
        }
        Spacer()
    }
}

struct SearchBar:View{
    @Binding var search:String
    var body: some View{
        VStack{
            
            HStack(spacing: 10){
                HStack(spacing: 15){
                    
                    Image(systemName: "magnifyingglass")
                        .foregroundColor(.gray)
                    
                    TextField("Search", text: $search)
                        .textFieldStyle(PlainTextFieldStyle())
                }
                .padding(.vertical,10)
                .padding(.horizontal)
                .background(visualEffectView())
                .cornerRadius(10)
                
                Button(action: {
                    print("点击了第一个按钮")
                }, label: {
                    
                    Image(systemName: "slider.vertical.1")
                        .foregroundColor(.black)
                        .padding(10)
                        .background(Color.white)
                        .cornerRadius(10)
                        .shadow(color: Color.black.opacity(0.1), radius: 5, x: 5, y: 5)
                        .shadow(color: Color.black.opacity(0.1), radius: 5, x: -5, y: -5)
                })
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

struct CustomView: NSViewRepresentable {

    func makeNSView(context: Context) -> NSView {
        
        let view = NSView()
        view.wantsLayer = true
        view.layer?.backgroundColor = NSColor.blue.cgColor
        
        return view
    }
    
    func updateNSView(_ nsView:  NSView, context: Context) {
        
    }
}

struct visualEffectView: NSViewRepresentable {

    func makeNSView(context: Context) -> NSVisualEffectView {
        
        let view = NSVisualEffectView()
        view.blendingMode = .behindWindow
        
        return view
    }
    
    func updateNSView(_ nsView: NSVisualEffectView, context: Context) {
        
    }
}


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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄权浩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值