Карта SwiftUI переопределяет внешний вид ToolBar/NavigationBar?

При добавлении Map с помощью MapKit изменяется внешний вид TabBar, в частности, придается панели инструментов полупрозрачный фон с тенью; стиль iOS по умолчанию.

Я попытался добавить на карту следующий модификатор

.toolbarBackground(Color("White"), for: .navigationBar)

Но панель инструментов навигации по-прежнему имеет тень, а TabBar имеет полупрозрачный цвет фона по умолчанию с тенью.

Корень

init() {
    // this is not the same as manipulating the proxy directly
    let appearance = UINavigationBarAppearance()
    
    // this overrides everything you have set up earlier.
    appearance.configureWithTransparentBackground()
    
    appearance.shadowColor = .clear
    
    //In the following two lines you make sure that you apply the style for good
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
    UINavigationBar.appearance().standardAppearance = appearance
    
    
    UITabBar.appearance().barTintColor = UIColor.white
    UITabBar.appearance().backgroundColor = UIColor.white
    UITabBar.appearance().shadowImage = UIImage()
    UITabBar.appearance().backgroundImage = UIImage()
    
    UINavigationBar.appearance().isTranslucent = false
    UIToolbar.appearance().backgroundColor = UIColor.white
    UIToolbar.appearance().isTranslucent = false
    UIToolbar.appearance().setShadowImage(UIImage(), forToolbarPosition: .any)
}

struct MainView: View {
    var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Label("Menu", systemImage: "list.dash")
                }
        }
    }
}

Панель вкладок имеет сплошной белый цвет без тени, а также панели навигации.

Просмотр контента

struct ContentView: View {

@State var position = MapCameraPosition.region(
    MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 51.510357, longitude: -0.116773),
        latitudinalMeters: 500, longitudinalMeters: 500)
)

    var body: some View {
        NavigationStack() {
            NavigationLink(destination: MapView(position: $position)) {
              Text("Hello, World!")
            }
        }
        .navigationTitle("Content")
    }
}

КартаView

struct MapView: View {
    @Binding var position:  MapCameraPosition

    var body: some View {
        Map(position: $position)
            .mapControlVisibility(.hidden)
            .edgesIgnoringSafeArea(.bottom)
            .allowsHitTesting(false)
            .frame(maxWidth: .infinity)
            .frame(height: 414)
            .clipped()
    }
}

Я просмотрел документацию, но ничего не нашел. https://developer.apple.com/documentation/mapkit/map

Обратите внимание: NavigationView устарел, используйте NavigationStack. Также есть более новые версии звонков Map, см.: Карта

workingdog support Ukraine 05.05.2024 01:51

@workingdogsupportUkraine спасибо за ответ, я обновил ответ, но проблема все еще существует

RileyDev 05.05.2024 13:21

Пожалуйста, покажите, что вам нужно и что вы получите с изображениями для пояснения.

Mojtaba Hosseini 07.05.2024 17:16
Стоит ли изучать 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
3
206
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

1. Нанесение сплошного цвета

Чтобы полоса имела сплошной цвет, вы должны убедиться, что это одновременно colored И visible, используя:

.toolbarBackground(.visible, for: .tabBar)
.toolbarBackground(.white, for: .tabBar)

Также обратите внимание, что конфигурация ДОЛЖНА применяться ВНУТРИ представления Navigation или Tab, а НЕ сама по себе!

Например, я применил их глубоко внутри Map:

Demo 1

2. Удаление тени («линии роста волос»)

К сожалению, в Swiftui нет прямого способа скрыть эти тени. но вы можете одновременно скрыть и цвет фона, и тень, передав hidden:

.toolbarBackground(.visible, for: .tabBar)
.toolbarBackground(.white, for: .tabBar)

Demo 2

3. Добавьте цвета позади invisible решеток.

Вы можете добавить цвет фона, игнорируя всю безопасную область, и вычесть безопасную область, чтобы она отображалась как фон полос:

ZStack {
    Color(.red).ignoresSafeArea()
    Rectangle().blendMode(.destinationOut)
}
.compositingGroup()

Demo 3

✅ Заключение

Конечно, вы можете использовать цвет .white в сочетании с цветом method 3, чтобы добиться того, что вы изначально просили:

Demo


PS: Полностью избавьтесь от этого init метода, который вы пишете!

PS: Не забудьте проверить свои потребности в темном режиме! Вы можете просто использовать method 2 и просто обрезать содержимое, если вам нужно, чтобы полосы соответствовали текущей цветовой схеме (светлая/темная).

Большое спасибо за ваш ответ, в MapView TabBar и NavigationBar отображаются правильно, однако, когда я возвращаюсь в ContentView, панели инструментов фактически снова становятся полупрозрачными с тенью. Итак, это просмотр содержимого с белым > MapView с белым > Прозрачный просмотр содержимого.

RileyDev 07.05.2024 19:46

Я думаю, вы меняете внешний вид где-то еще. Вот что я вижу без проблем.

Mojtaba Hosseini 07.05.2024 19:58

Награжден! Мне пришлось ждать Х времени, прежде чем получить награду. Спасибо!! Это была такая боль

RileyDev 09.05.2024 01:07

продолжение: похоже, что модификатор меняет шрифт навигации, установленный в init, есть ли способ предотвратить это? или снова поменяйте шрифт

RileyDev 15.05.2024 00:42

Извините, но я не понял. Кстати, комментарии – не лучшее место для обсуждения технических вопросов. Пожалуйста, откройте новый вопрос с необходимой детализацией и минимально воспроизводимым кодом, чтобы я и сообщество могли внести свой вклад 🙌🏻

Mojtaba Hosseini 15.05.2024 09:10

Конечно, я разместил вопрос здесь: stackoverflow.com/questions/78480945/…

RileyDev 18.05.2024 12:33

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