[英]Change bar icon color when selected in SwiftUI
我想在选择工具栏图标时更改它的颜色。 未选择时颜色为灰色,而选择要选择的颜色时:# FC4949 这是代码:
主选项卡视图
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
}
目前代码的结果是这样的
我想要这个:
这应该可以解决问题:
VStack(spacing: 0) {
Image(item.icon)
.tint(color) //add this.
.frame(width: 44, height: 29)
//.lineLimit(1)
}
.frame(maxWidth: .infinity)
在 SwiftUI 中有一个名为“accentcolor”的属性,用于为您选择的选项卡提供颜色。您只需将该属性提供给您的 tabView。例如,如果您希望所选项目为粉红色,您可以像这样使用它:-
TabView {
...
}.accentColor(.pink)
我通过添加解决了这个问题
} label: {
VStack(spacing: 0) {
Image(item.icon)
.foregroundColor(selectedTab == item.tab ? Color(.red) : .gray)
}
.frame(maxWidth: .infinity)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.