Добавить верхнюю тень в TabView в SwiftUI

У меня есть следующее:

Добавить верхнюю тень в TabView в SwiftUI

Я использую родной TabView. Я могу изменить фон, но мне не удалось добавить небольшую тень в верхнюю часть UITabBar, я попытался создать функцию и вызвать ее onAppear следующим образом:

func setupTabBar() {
//        UITabBar.appearance().barTintColor = UIColor(named: "tabBarBackground")
//        UITabBar.appearance().scrollEdgeAppearance = UITabBarAppearance()
    
    UITabBar.appearance().backgroundColor = UIColor(named: "ThemeBackground2")
    UITabBarAppearance().shadowColor = .white
}

который работает для фона, но не для верхней строки, которая мне нужна.

Вот базовый TabView:

TabView(selection: $selectedTab) {
        MarketsTabBarView()
            .tag(HostingBarCategories.market)
            .tabItem {
                Image(systemName: "chart.xyaxis.line")
                Text("Market")
            }
        
        PortfolioTabBarView()
            .tag(HostingBarCategories.portfolio)
            .tabItem {
                Image(systemName: "bitcoinsign.square.fill")
                Text("Portfolio")
            }
            
        SettingsTabBarView()
            .tag(HostingBarCategories.settings)
            .tabItem {
                Image(systemName: "gearshape.fill")
                Text("Settings")
            }
}

Как я могу добавить тень сверху, чтобы отметить это разделение?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

shadowColor применяется к тени вкладки по умолчанию, которая в настоящее время отсутствует, поэтому нам нужен собственный шаблон изображения (например, с градиентной прозрачностью), чтобы shadowColor подкрашивал его.

Вот рабочий подход (Xcode 13.3/iOS 15.4)

demo

Основная часть:

appearance.shadowColor = .white
appearance.shadowImage = UIImage(named: "tab-shadow")?.withRenderingMode(.alwaysTemplate)

Полные выводы и код

Это действительно здорово, что вы публикуете его на github с образцом, отличная работа и спасибо

Arturo 14.05.2022 20:34

Есть ли способ уменьшить высоту белой линии? Кстати, эта строка была не нужна: appearance.shadowImage = UIImage(named: "tab-shadow")?.withRenderingMode(.alwaysTemplate) Я знаю, что сказал тень, но я искал ту линию, которая отделяет вид от панели вкладок :)

Arturo 14.05.2022 20:40

Если вы прокомментируете код с помощью shadowImage, вы получите только одну белую (или любого установленного вами цвета) строку. Наблюдаемая тень имеет высоту изображения - здесь просто для лучшей видимости.

Asperi 14.05.2022 20:42

Как бы вы уменьшили высоту этой строки?

Arturo 14.05.2022 20:46

Кстати, если я верну этот код, я получу эту ошибку: "Need an imageRef"

Arturo 14.05.2022 20:54

Другие вопросы по теме