Просмотр прокрутки естественным образом выходит за пределы безопасной зоны?

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

struct ContentView: View {
    
    var body: some View {
        ZStack {
            Color.red
            PrimaryView()
                .scrollClipDisabled(false)
        }
    }
}

struct PrimaryView: View {
    
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0...100, id: \.self) { _ in
                    hello
                }
            }
            .padding()
        }
    }
    
    private var hello: some View {
        HStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
    }
}

@Sweeper Я прочитал документацию. Пожалуйста, прочтите ОП. отключен == ложь.

bobby123uk 08.06.2024 11:23

Объясните, что вы поняли из документации и что еще вы хотите об этом узнать.

Sweeper 08.06.2024 11:25

@Sweeper «По умолчанию при прокрутке содержимое обрезается до границ, но вы можете отключить это поведение...»

bobby123uk 08.06.2024 11:28
Стоит ли изучать 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
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я согласен, что странно, что ScrollView, кажется, намерен игнорировать края безопасной области, даже когда вы устанавливаете .scrollClipDisabled(false), как вы это делаете. Я нахожу двойную отрицательную маркировку немного запутанной: (клип отключен == false) означает (клип включен == true).

Если вы добавите рамку к ScrollView, вы увидите, что рамка соблюдает края безопасной области, а прокручиваемый контент — нет:

ScrollView(.horizontal) {
    // ...
}
.border(.yellow, width: 2)

Screenshot

Один из обходных путей — добавить .clipShape к ScrollView:

PrimaryView()
    .scrollClipDisabled(false)
    .clipShape(Rectangle())

Однако при таком подходе индикатор прокрутки исчезает в стороны.

Если индикатор прокрутки должен быть видимым, как в вашем примере, другим обходным решением является добавление номинального горизонтального заполнения. Это нарушает контакт с краями безопасной области, поэтому края больше не игнорируются. Я обнаружил, что 0,1 недостаточно, но 0,2 вроде работает:

PrimaryView()
    .scrollClipDisabled(false)
    .padding(.horizontal, 0.2)

Screenshot

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