SwiftUI 的 .tag(_:) 是什么?#
.tag(_:) 是 SwiftUI 提供的一个修饰符,主要用于标记视图,使其可用于选择或导航。它常用于 Picker、TabView 和 NavigationLink 等控件,与 @State 或 @Binding 变量配合使用。
.tag(_:) 主要使用场景#
1. 在 Picker 中标记选项#
在 Picker 中,.tag(_:) 用于为选项赋予唯一标识,以便 SwiftUI 识别用户选择的是哪个选项。
struct PickerExample: View {
@State private var selectedFruit = "Apple"
var body: some View {
Picker("Select a fruit", selection: $selectedFruit) {
Text("Apple").tag("Apple")
Text("Banana").tag("Banana")
Text("Cherry").tag("Cherry")
}
.pickerStyle(.segmented)
}
}📌 如何工作?
selectedFruit绑定到Picker,当用户选择"Banana",selectedFruit变为"Banana"。.tag("Apple")、.tag("Banana")、.tag("Cherry")让Picker识别选中的选项。
2. 在 TabView 中标记选项卡#
在 TabView 里,.tag(_:) 用于标记不同的 Tab,使 @State 变量可以追踪当前选中的 Tab。
struct TabViewExample: View {
@State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
Text("Home Screen")
.tabItem { Label("Home", systemImage: "house") }
.tag(0)
Text("Profile Screen")
.tabItem { Label("Profile", systemImage: "person") }
.tag(1)
}
}
}📌 如何工作?
selectedTab追踪当前选中的Tab,默认为0(Home)。.tag(0)标记第一个Tab,.tag(1)标记第二个Tab,切换时selectedTab也会更新。
3. 在 NavigationLink 中使用#
在 NavigationLink 结合 NavigationDestination(iOS 16+)时,.tag(_:) 可用于唯一标识不同的导航目标。
struct NavigationExample: View {
@State private var selectedPage: String? = nil
var body: some View {
NavigationStack {
VStack {
Button("Go to Detail") {
selectedPage = "detail"
}
.buttonStyle(.bordered)
NavigationLink("Detail Page", value: "detail")
.tag("detail")
.navigationDestination(for: String.self) { value in
Text("You're on the \(value) page")
}
}
}
}
}📌 如何工作?
selectedPage追踪当前的导航状态。NavigationLink绑定tag("detail"),当selectedPage = "detail"时,自动跳转到详情页。
.tag(_:) 总结#
✅ .tag(_:) 主要用于:
Picker- 绑定selection,让 SwiftUI 追踪选中的选项。TabView- 绑定selection,让 SwiftUI 追踪当前 Tab。NavigationLink(iOS 16+) - 标记导航目标,配合navigationDestination(for:)使用。
📌 核心作用:.tag(_:) 赋予视图一个唯一标识,使其可与 @State 或 @Binding 变量交互,从而追踪用户选择的状态。