ios - SwiftUI - TabBar 按钮更改
问题描述
嗨,我正在学习 SwiftUI,但在尝试构建应用程序时遇到了问题。我的问题是如何制作一个systemImage
在活动期间更改的选项卡栏(当主页按钮处于活动状态时,它显示“home.fill”,当用户按下搜索按钮时,主页按钮变为“主页”)。
如果您看到我可以在下面的代码中做出任何改进,我们也将不胜感激。谢谢你,祝你有美好的一天,并保持安全。
import SwiftUI
struct ContentView: View {
@State private var fullScreenCover = false
init() {
UITabBar.appearance().isTranslucent = false
}
var body: some View {
VStack {
ForEach(0..<6) { num in
Spacer()
}
HStack {
Spacer()
Button(action: {}, label: {
Image(systemName: "message")
.font(.system(size: 20))
})
.padding(.horizontal, 15)
}
.foregroundColor(Color("Reverse"))
.padding(.vertical, 8)
TabView {
Main_Home()
.tabItem {
Image(systemName: "house")
.font(.system(size: 30))
}
Main_Search()
.tabItem {
Image(systemName: "magnifyingglass")
.font(.system(size: 30))
}
Main_AddContent()
.tabItem {
Image(systemName: "plus.viewfinder")
.font(.system(size: 30))
}
Main_Message()
.tabItem {
Image(systemName: "pencil.circle.fill")
.font(.system(size: 30))
}
Main_Profile()
.tabItem {
Image(systemName: "person.crop.circle")
.font(.system(size: 30))
}
}
.accentColor(Color("Reverse"))
}
.background(Color("Normal"))
.edgesIgnoringSafeArea(.all)
}
}
解决方案
这是一个ViewModifier
可用于添加选项卡项的自定义项:
public struct TabViewItem<SelectionValue>: ViewModifier where SelectionValue: Hashable {
@Binding private var selectedIndex: SelectionValue
private let index: SelectionValue
private let text: String
private let imageName: String
public init(selectedIndex: Binding<SelectionValue>, index: SelectionValue, text: String, imageName: String) {
self._selectedIndex = selectedIndex
self.index = index
self.text = text
self.imageName = imageName
}
public func body(content: Content) -> some View {
content
.tabItem {
image
Text(text)
}
.tag(index)
}
private var image: some View {
guard selectedIndex == index else {
return Image(systemName: imageName)
}
let imageName = self.imageName + ".fill"
if let uiImage = UIImage(systemName: imageName) {
return Image(uiImage: uiImage)
}
return Image(systemName: self.imageName)
}
}
public extension View {
func tabItem<Selection>(
_ text: String,
imageName: String,
index: Selection,
selection: Binding<Selection>
) -> some View where Selection: Hashable {
modifier(TabViewItem(selectedIndex: selection, index: index, text: text, imageName: imageName))
}
}
然后,创建TabView
更简单:
struct ContentView: View {
@State private var selectedTab = 3
var body: some View {
TabView(selection: $selectedTab) {
Text("Main_Home")
.tabItem("Home", imageName: "house", index: 1, selection: $selectedTab)
Text("Main_Search")
.tabItem("Search", imageName: "magnifyingglass", index: 2, selection: $selectedTab)
Text("Main_AddContent")
.tabItem("AddContent", imageName: "plus.viewfinder", index: 3, selection: $selectedTab)
Text("Main_Message")
.tabItem("Message", imageName: "pencil.circle", index: 4, selection: $selectedTab)
Text("Main_Profile")
.tabItem("Profile", imageName: "person.crop.circle", index: 5, selection: $selectedTab)
}
}
}
注意:上述实现是出于通用目的 - 如果您不需要某些部分(如text
选项卡中的部分),只需将其删除或使其成为可选。
推荐阅读
- angularjs - 这是使用 angularjs 导出到 Excel 的正确方法吗
- visual-studio - 我的批处理文件没有在构建后事件中运行
- java - 钩子不在 Cucumber 4 中运行
- android - 如何指定下拉微调器的高度?
- c++ - android studio中的外部C++源文件?
- python - Threading Daemon = True,但使用启动器线程作为主线程?
- ios - IOS splitviewcontroller 和大小类
- typescript - lodash 的 cloneDeep 方法是否也应该单独克隆数据类型和数据
- java - 使用 Java sbt 在运行时获取参数名称
- kotlin - 在 Kotlin 的协程中暂停 IO-bound 和 CPU-bound 函数