在 SwiftUI 中选择时更改栏图标颜色
Change bar icon color when selected in SwiftUI
我想更改工具栏图标被选中时的颜色。未选择时,颜色为灰色,而选择要选择的颜色时:# FC4949 这是代码:
MainTabView
import SwiftUI
struct MainTabView: View {
@State var selectedTab: Tab = .home
@State var color: Color = .red
var body: some View {
ZStack(alignment: .bottom) {
Group {
switch selectedTab {
case .home:
HomeView()
case .corsi:
CorsiView()
case .carriera:
CarrieraView()
case .messaggi:
MessaggiView()
case .profilo:
ProfileView()
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
HStack {
ForEach(tabItems) { item in Button {
withAnimation(.spring(response: 0.3,
dampingFraction: 0.7)){
selectedTab = item.tab
color = item.color
}
} label: {
VStack(spacing: 0) {
Image(item.icon)
.frame(width: 44, height: 29)
//.lineLimit(1)
}
.frame(maxWidth: .infinity)
}
}
}
.padding(.horizontal, 8)
.padding(.top, 30)
.frame(height: 80, alignment: .top)
.overlay(
HStack {
if selectedTab == .profilo { Spacer()}
if selectedTab == .corsi { Spacer() }
if selectedTab == .carriera {
Spacer()
Spacer()
}
if selectedTab == .messaggi {
Spacer()
Spacer()
Spacer()
}
Rectangle()
.fill(color)
.frame(width: 32, height: 4)
.cornerRadius(3)
.frame(width: 60)
.frame(maxHeight: .infinity, alignment: .bottom)
if selectedTab == .messaggi { Spacer() }
if selectedTab == .home { Spacer() }
if selectedTab == .corsi {
Spacer()
Spacer()
Spacer()
}
if selectedTab == .carriera {
Spacer()
Spacer() }
}
.padding(.horizontal, 14)
)
.ignoresSafeArea()
}
}
}
struct MainTabView_Previews: PreviewProvider {
static var previews: some View {
MainTabView()
}
}
选项卡
import SwiftUI
struct TabItem: Identifiable {
var id = UUID()
var text: String
var icon: String
var tab: Tab
var color: Color
}
var tabItems = [
TabItem(text: "Home", icon: "HomeIcon", tab: .home, color: .red),
TabItem(text: "Corsi", icon: "CorsiIcon", tab: .corsi, color: .red),
TabItem(text: "Carriera", icon: "CarrieraIcon", tab: .carriera, color: .red),
TabItem(text: "Messaggi", icon: "MessaggiIcon", tab: .messaggi, color: .red),
TabItem(text: "Profilo", icon: "ProfileIcon", tab: .profilo, color: .red)
]
enum Tab: String {
case home
case corsi
case carriera
case messaggi
case profilo
}
目前代码的结果是这样的
Currently the result of the code is this
我想要这个:
I would like this
有一个名为 accentcolor 的 属性 用于为您在 SwiftUI.You 中选择的选项卡提供颜色,只需将 属性 提供给您的 tabView.For 示例,如果您希望所选项目为粉红色,您可以这样使用它:-
TabView {
...
}.accentColor(.pink)
我通过添加
解决了这个问题
} label: {
VStack(spacing: 0) {
Image(item.icon)
.foregroundColor(selectedTab == item.tab ? Color(.red) : .gray)
}
.frame(maxWidth: .infinity)
}
我想更改工具栏图标被选中时的颜色。未选择时,颜色为灰色,而选择要选择的颜色时:# FC4949 这是代码:
MainTabView
import SwiftUI
struct MainTabView: View {
@State var selectedTab: Tab = .home
@State var color: Color = .red
var body: some View {
ZStack(alignment: .bottom) {
Group {
switch selectedTab {
case .home:
HomeView()
case .corsi:
CorsiView()
case .carriera:
CarrieraView()
case .messaggi:
MessaggiView()
case .profilo:
ProfileView()
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
HStack {
ForEach(tabItems) { item in Button {
withAnimation(.spring(response: 0.3,
dampingFraction: 0.7)){
selectedTab = item.tab
color = item.color
}
} label: {
VStack(spacing: 0) {
Image(item.icon)
.frame(width: 44, height: 29)
//.lineLimit(1)
}
.frame(maxWidth: .infinity)
}
}
}
.padding(.horizontal, 8)
.padding(.top, 30)
.frame(height: 80, alignment: .top)
.overlay(
HStack {
if selectedTab == .profilo { Spacer()}
if selectedTab == .corsi { Spacer() }
if selectedTab == .carriera {
Spacer()
Spacer()
}
if selectedTab == .messaggi {
Spacer()
Spacer()
Spacer()
}
Rectangle()
.fill(color)
.frame(width: 32, height: 4)
.cornerRadius(3)
.frame(width: 60)
.frame(maxHeight: .infinity, alignment: .bottom)
if selectedTab == .messaggi { Spacer() }
if selectedTab == .home { Spacer() }
if selectedTab == .corsi {
Spacer()
Spacer()
Spacer()
}
if selectedTab == .carriera {
Spacer()
Spacer() }
}
.padding(.horizontal, 14)
)
.ignoresSafeArea()
}
}
}
struct MainTabView_Previews: PreviewProvider {
static var previews: some View {
MainTabView()
}
}
选项卡
import SwiftUI
struct TabItem: Identifiable {
var id = UUID()
var text: String
var icon: String
var tab: Tab
var color: Color
}
var tabItems = [
TabItem(text: "Home", icon: "HomeIcon", tab: .home, color: .red),
TabItem(text: "Corsi", icon: "CorsiIcon", tab: .corsi, color: .red),
TabItem(text: "Carriera", icon: "CarrieraIcon", tab: .carriera, color: .red),
TabItem(text: "Messaggi", icon: "MessaggiIcon", tab: .messaggi, color: .red),
TabItem(text: "Profilo", icon: "ProfileIcon", tab: .profilo, color: .red)
]
enum Tab: String {
case home
case corsi
case carriera
case messaggi
case profilo
}
目前代码的结果是这样的
Currently the result of the code is this
我想要这个:
I would like this
有一个名为 accentcolor 的 属性 用于为您在 SwiftUI.You 中选择的选项卡提供颜色,只需将 属性 提供给您的 tabView.For 示例,如果您希望所选项目为粉红色,您可以这样使用它:-
TabView {
...
}.accentColor(.pink)
我通过添加
解决了这个问题} label: {
VStack(spacing: 0) {
Image(item.icon)
.foregroundColor(selectedTab == item.tab ? Color(.red) : .gray)
}
.frame(maxWidth: .infinity)
}