Как я могу вертикально центрировать только текстовые кнопки TabBar в SwiftUI? - PullRequest
1 голос
/ 22 октября 2019

Я делаю несколько TabView кнопок в SwiftUI ( Xcode 11.1 , Swift 5.1 и iOS 13.1. 3 ).

Для моих TabView я не хочу любых изображений - только текст. Этот код прекрасно выполняет это:

import SwiftUI

struct ContentView: View {
    var body: some View {

        TabView {
            Text("The First Tab")
                .tabItem {
                    Text("My Projects")
            }
            Text("Another Tab")
                .tabItem {
                    Text("Augmented Reality")
            }

            Text("The Last Tab")
                .tabItem {
                    Text("Products")
            }
        }
    }
}

Однако в этом случае текст в конце выравнивается по самому низу элементов панели вкладок, например: tab bar with labels at the bottom

Я хочу только для панели вкладок , а не , чтобы зарезервировать место для значков и центрировать текст по вертикали - что-то вроде этого макета:

tab bar mock-up showing desired layout

Я пытался вставить его в VStack и попытаться отрегулировать выравнивание, но ничего не меняется.

Есть ли какой-нибудь умныйспособ сделать это, или мне нужно сделать какое-то смещение на определенное количество точек?

Кроме того, к сведению, документ разработчика Apple говорит: " Поддержка только представления табуляцииэлементы вкладки типа Текст, Изображение или изображение, за которым следует текст. Передача любого другого типа представления приводит к отображению видимого, но пустого элемента вкладки."

Я должен добавить, что могу использовать .offset для настройки всего TabView , но это явно не то, что мы хотим. .tabItem сам по себе игнорирует любые данные .offset , как и Text в .tabItem .

, который я смогчтобы приблизиться, сделав это - по сути, я перемещаю представление контента для каждой вкладки вниз на 40,0 пункта, а затем перемещаю весь TabView вверх на 40. Это выглядит намного ближе, но фон позадивкладки затем перепутались:

Вот код:

struct ContentView: View {
    let vOffset: CGFloat = 40.0
    var body: some View {


        TabView {
            Text("The First Tab")
                .tabItem {
                    Text("My Projects")
            }.offset(CGSize(width: 0.0, height: vOffset))

            Text("Another Tab")
                .tabItem {
                    Text("Augmented Reality")
            }.offset(CGSize(width: 0.0, height: vOffset))

            Text("The Last Tab")
                .tabItem {
                    Text("Products")
            }.offset(CGSize(width: 0.0, height: vOffset))
        }
        .offset(CGSize(width: 0.0, height: -vOffset))
    }
}

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

TabView and tab content views offset in opposite directions vertically

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

Другая мысль заключается в том, что мне интересно, будет ли это вообще хорошей идеей делать такого рода"хакерской" вещи. Или если это даже является хакерской штукой? Я знаю, что вся идея декларативного характера SwiftUI заключается в том, чтобы отделить реализацию от декларации. Имея это в виду, можно было бы ожидать, что некоторые будущие реализации могут выглядеть совсем по-другому, и, таким образом, будут выглядеть глупо из-за хакерских смещений, которые я здесь делаю.

Помимо этого, я все еще хочусделай это, пока что. 10

Итак, сейчас я ищу способ исправить цвет фона области панели вкладок, а также, конечно, менее удачный способ решения исходной проблемы.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

попробуй

TabView(alignment: .center ,spacing: 20))
{
Text("The First Tab")
      .tabItem {
           Text("My Projects")
       }
}
0 голосов
/ 22 октября 2019

Пустое пространство - это место для иконы. TabView не очень настраиваемый. Вы можете превратить текст в графику и вставить его, используя изображение - это должно подтолкнуть его вверх. Хотя это не будет идеально отцентрировано.

...