Как рассчитать высоту панели вкладок в SwiftUI?

Question

У меня есть страница с плеером, высота которого составляет 1/3 высоты экрана. Под каналами есть несколько каналов внутри прокрутки. Я пытаюсь установить высоту секции просмотра прокрутки точно от нижней части плеера до нижней части страницы. Я попытался установить его (высота экрана - (высота игрока) - (высота панели навигации) - (высота панели вкладок)). Но проблема в том, что высота панели вкладок меняется от устройства к устройству. Я попробовал следующий код:

.frame(height: (UIScreen.main.bounds.height) - ((UIScreen.main.bounds.height) * 2/6) - (geometry.safeAreaInsets.top + geometry.safeAreaInsets.bottom ) )

Но похоже, что geometry.safeAreaInsets.bottom не содержит высоту панели вкладок. Так есть ли способ рассчитать его в SwiftUI или есть какой-нибудь другой способ добиться похожего вида?

Я просто хочу разместить представление прокрутки, которое содержит каналы точно между плеером и панелью вкладок для всех размеров экрана.

Answer 1

Я только начинаю смотреть на SwiftUI, но ... У меня такое впечатление, что GeometryReader должен справиться с этим за вас.

Дайте эту попытку:

struct Tab1View: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Top == 1/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height / 3.0, alignment: .center)
                    .background(Color.init(red: 0.1, green: 0.1, blue: 0.5))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
                Text("Bottom == 2/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 2.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.5, green: 0.1, blue: 0.1))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
            }
            .frame(width: geometry.size.width,
                   height: geometry.size.height,
                   alignment: .topLeading)
        }
    }

}
struct Tab2View: View {
    var body: some View {
        Color.blue
    }
}

struct MyTabView: View {
    var body: some View {

        TabView {
            //Text("The content of the first view")
            Tab1View()
                .tabItem {
                    Image(systemName: "phone.fill")
                    Text("First Tab")
            }
            //Text("The content of the second view")
            Tab2View()
                .tabItem {
                    Image(systemName: "tv.fill")
                    Text("Second Tab")
            }
        }
    }
}

struct MyTabView_Previews: PreviewProvider {
    static var previews: some View {
        MyTabView()
    }
}

Результат:

и автоматически настраивается на высоту TabBar при повороте:

---

Редактировать

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

Вот модифицированный пример:

struct MyItemView: View {
    var itemDesc = "Testing"
    var geoWidth: CGFloat = 100
    var body: some View {
            Text("\(self.itemDesc)")
                .foregroundColor(Color.white)
                .padding(16.0)
                .frame(width: self.geoWidth, height: nil, alignment: .leading)
    }
}

struct Tab1View: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0.0) {
                Text("Top == 1/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 1.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.1, green: 0.1, blue: 0.5))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)

                ScrollView(.vertical) {
                    VStack(alignment: .leading, spacing: 0) {
                        ForEach((1...20), id: \.self) {
                            MyItemView(itemDesc: "This is item \($0)", geoWidth: geometry.size.width)
                                .background(Color.init(red: 0.5, green: 0.1, blue: 0.1))
                                .border(Color.yellow)
                        }
                    }
                }
                .frame(width: geometry.size.width, height: nil, alignment: .leading)
            }
        }
    }
}
struct Tab2View: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Top == 1/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 1.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.1, green: 0.1, blue: 0.7))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
                Text("Bottom == 2/3 height")
                    .frame(width: geometry.size.width, height: geometry.size.height * 2.0 / 3.0, alignment: .center)
                    .background(Color.init(red: 0.2, green: 0.6, blue: 0.1))
                    .foregroundColor(Color.white)
                    .border(Color.yellow)
            }
        }
    }
}
struct MyTabView: View {
    var body: some View {
        TabView {
            Tab1View()
                .tabItem {
                    Image(systemName: "phone.fill")
                    Text("First Tab")
            }
            Tab2View()
                .tabItem {
                    Image(systemName: "tv.fill")
                    Text("Second Tab")
            }
        }
    }
}

struct MyTabView_Previews: PreviewProvider {
    static var previews: some View {
        MyTabView()
    }
}

и новый результат: