Фон на экранах в TabView с PageTabViewStyle не заполняет все доступное вертикальное пространство

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

TabView(selection: $selection) {
    VStack {
        Text("screen 1")
    }.frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(Color.green)
    
    VStack {
        Text("screen 2")
    }.frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(Color.red)

}.edgesIgnoringSafeArea(.all)
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

Однако выглядит это так:

введите описание изображения здесь

И после того, как я прокручиваю вниз:

введите описание изображения здесь

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


ios swift swiftui background-color tabview
person Barrrdi    schedule 05.10.2020    source источник
comment
Ответьте на этот вопрос stackoverflow.com/a/62596307/12299030?   -  person Asperi    schedule 05.10.2020
comment
Хм, он не отвечает, так как код не приводит к тому, что цвет фона заполняет все доступное пространство, но похоже, что это та же проблема.   -  person Barrrdi    schedule 05.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Обычно я бы не предлагал GeometryReader, но это не похоже на предполагаемое поведение со стороны Apple. Ключ заключается в расширении цвета модификатора фона до достаточно большой высоты, чтобы вы не могли видеть белый фон за вкладкой.

Спасибо, Аспери, за то, что поделились ссылкой на аналогичный вопрос для вдохновения:

https://stackoverflow.com/a/62596307/12299030

struct ContentView: View {
    
    @State private var selection: Int = 0
    
    var body: some View {
        GeometryReader { geo in
            TabView(selection: $selection) {
                
                VStack {
                    Text("Screen 1")
                }.frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    EmptyView()
                        .frame(minHeight: 2 * geo.size.height)
                        .background(Color.green)
                )
                .tag(0)
                
                VStack {
                    Text("Screen 2")
                }.frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(
                    EmptyView()
                        .frame(minHeight: 2 * geo.size.height)
                        .background(Color.red)
                )
                .tag(1)

            }.edgesIgnoringSafeArea(.all)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        }
    
    }
    
}

Использование EmptyView в сочетании с установленной минимальной высотой, в 2 раза превышающей текущую высоту, гарантирует, что пользователь может прокручивать вверх и вниз, достигая расстояния возврата, и не видеть белый фон. Поместите любой фон на это представление.

Вы можете поменять EmptyView на все, что захотите, но это было первое, что пришло в голову. Я добавил .tag() и selection, чтобы ContentView можно было запускать самостоятельно на случай, если вы захотите поэкспериментировать.

person Lineous    schedule 05.10.2020