macOS SwiftUI 开发教程之经典双栏搜索框界面 （教程含源码）_双层搜索框设计

实战需求

macOS SwiftUI 开发教程之经典双栏搜索框界面

本文价值与收获

看完本文后，您将能够作出下面的界面

看完本文您将掌握的技能

• 文本标签Label(“文件”,systemImage:“book”)
• 双栏效果.listStyle(SidebarListStyle())
• 忽略安全区.ignoresSafeArea(.all, edges: .all)
• 视图效果 NSVisualEffectView

实战代码

1、主界面

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        // NavigationView{
        HStack{
            List{
                Label("文件",systemImage:"book")
                Label("书籍",systemImage:"book")
                Label("资料",systemImage:"book")
            }
            .listStyle(SidebarListStyle())
            .frame(maxWidth: 200)
            
            VStack{
       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16