打造SwiftUI版微信App：底部标签栏与导航视图

2023-12-30 14:07:36

在本文中，我们将继续 SwiftUI 实战，仿写微信 App。这次，我们重点关注创建底部标签栏和导航视图，以实现类似微信的功能和用户界面。

一、目标

创建一个底部标签栏，提供类似微信的导航功能。
实现导航视图，用于在不同的视图之间切换。
完善 SwiftUI 微信 App 的用户界面和交互性。

二、创建底部标签栏

底部标签栏是微信 App 中最重要的导航元素之一，它允许用户在不同的功能模块之间切换。要创建底部标签栏，可以使用 TabBar 和 TabBarItem 组件。

struct ContentView: View {
    var body: some View {
        TabBar {
            TabBarItem {
                Image(systemName: "house")
                Text("微信")
            }
            TabBarItem {
                Image(systemName: "message")
                Text("通讯录")
            }
            TabBarItem {
                Image(systemName: "person")
                Text("发现")
            }
        }
    }
}

三、实现导航视图

导航视图提供了在不同视图之间切换的能力。要实现导航视图，可以使用 NavigationLink 和 NavigationView 组件。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("微信")
            } label: {
                Image(systemName: "house")
            }
            NavigationLink {
                Text("通讯录")
            } label: {
                Image(systemName: "message")
            }
            NavigationLink {
                Text("发现")
            } label: {
                Image(systemName: "person")
            }
        }
    }
}

四、完善用户界面

为了完善用户界面，可以添加更多细节，例如标题、图标和颜色。

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("微信")
            } label: {
                Image(systemName: "house")
                Text("微信")
            }
            NavigationLink {
                Text("通讯录")
            } label: {
                Image(systemName: "message")
                Text("通讯录")
            }
            NavigationLink {
                Text("发现")
            } label: {
                Image(systemName: "person")
                Text("发现")
            }
        }
        .navigationBarTitle("微信")
        .accentColor(Color.green)
    }
}