SwiftUi Изменить оттенок невыбранного элемента на панели вкладок

Я пытался изменить цвет оттенка невыбранного элемента в SwiftUI.

В настоящее время я получил его так, чтобы он имел фон и менял цвет оттенка (сделав панель вкладок видимой в .tabItem, мы избавляемся от оттенка .red и делаем ее серой)

import SwiftUI
import UIKit

struct Test: View{
    
    init(){
        UITabBar.appearance().backgroundColor = UIColor.systemBackground
        UITabBar.appearance().unselectedItemTintColor = .red
    }
    
    var body: some View{
        
        TabView{
            Text("1")
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("Heart")
                }
              
                
            Text("2")
                .tabItem{
                    Image(systemName: "gearshape.fill")
                    Text("Settings")
                }
        }
    }
}

#Preview{
    Test()
}

Теперь я пытаюсь добавить разделительную линию, которая отделяет панель вкладок от остального содержимого на странице. Выполнение .toolbarBackground(.visible, for: .tabBar) возвращает разделитель, но тогда оттенок невыделенного элемента больше не работает.

TabView{
            Text("1")
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("Heart")
                }
                .toolbarBackground(.visible, for: .tabBar)

Я тоже пробовала этот метод , но похоже, он больше не работает.

swift swiftui tabbar

29.06.2024 05:30

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы просто отказался от нативной TabView и использовал собственную панель вкладок. Затем вы можете оформить его так, как вам нравится.

Хорошо использовать перечисление для определения типов вкладок.
Пользовательская панель вкладок будет иметь по одной кнопке для каждого типа перечисления.
Пользовательский LabelStyle можно использовать для стилизации надписей кнопок.

Что-то вроде:

enum TabType: CaseIterable {
    case heart
    case settings

    var titleKey: String {
        "\(self)".capitalized
    }

    var symbolName: String {
        switch self {
        case .heart: "heart"
        case .settings: "gearshape"
        }
    }
}

struct TabLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 4) {
            configuration.icon
                .dynamicTypeSize(.xxxLarge)
            configuration.title
                .font(.caption)
        }
    }
}

struct CustomTabBar: View {
    @Binding var selection: TabType

    var body: some View {
        HStack {
            ForEach(TabType.allCases, id: \.self) { type in
                Button {
                    withAnimation(.spring(duration: 0.2)) {
                        selection = type
                    }
                } label: {
                    Label(type.titleKey, systemImage: type.symbolName)
                        .labelStyle(TabLabelStyle())
                        .symbolVariant(selection == type ? .fill : .none)
                        .foregroundStyle(selection == type ? Color.accentColor : .red)
                        .frame(maxWidth: .infinity)
                }
            }
        }
        .padding()
        .background(.bar)
        .overlay(alignment: .top) { Divider() }
    }
}

struct ContentView: View {
    @State private var selection = TabType.heart

    var body: some View {
        VStack(spacing: 0) {
            ZStack {
                switch selection {
                case .heart: Text("1")
                case .settings: Text("2")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)

            CustomTabBar(selection: $selection)
        }
    }
}

Animation