SwiftUI 中如何使用 List, NavigationView, TabView 等组件？

推荐答案

// www.javascriptcn.com code example
import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                List {
                    NavigationLink("Item 1", destination: Text("Detail for Item 1"))
                    NavigationLink("Item 2", destination: Text("Detail for Item 2"))
                }
                .navigationTitle("List")
            }
            .tabItem {
                Label("List", systemImage: "list.bullet")
            }
            
            Text("Second Tab")
                .tabItem {
                    Label("Second", systemImage: "2.square")
                }
        }
    }
}

本题详细解读

1. List 组件

List 是 SwiftUI 中用于显示可滚动列表的组件。它可以包含多个子视图，通常用于显示一组数据。在示例中，List 包含了两个 NavigationLink，点击后会导航到相应的详情页面。

2. NavigationView 组件

NavigationView 是 SwiftUI 中用于实现导航的组件。它通常与 NavigationLink 配合使用，允许用户在视图之间进行导航。在示例中，NavigationView 包裹了 List，使得用户可以从列表项导航到详情页面。

3. TabView 组件

TabView 是 SwiftUI 中用于实现标签页导航的组件。它可以包含多个子视图，每个子视图对应一个标签页。在示例中，TabView 包含了两个标签页，第一个标签页是 NavigationView 包裹的 List，第二个标签页是一个简单的 Text 视图。

4. NavigationLink 组件

NavigationLink 是 SwiftUI 中用于实现导航链接的组件。它通常用于在 NavigationView 中进行视图切换。在示例中，NavigationLink 用于从列表项导航到详情页面。

5. Label 组件

Label 是 SwiftUI 中用于显示图标和文本的组合组件。它通常用于 TabView 的 tabItem 中，以显示标签页的图标和标题。在示例中，Label 用于为每个标签页提供图标和标题。

6. navigationTitle 修饰符

navigationTitle 是 SwiftUI 中用于设置导航栏标题的修饰符。在示例中，navigationTitle 用于为 List 设置标题为 "List"。

7. tabItem 修饰符

tabItem 是 SwiftUI 中用于设置标签页图标的修饰符。在示例中，tabItem 用于为每个标签页设置图标和标题。