SwiftUI: настройка положения изображения в TabView

Я использую следующий код для создания TabView с SwiftUI:

struct TabbedView: View {
    @State private var selected = 0

    var body: some View {
        TabView(selection: $selected) {
            View1().tabItem {
                Image("Tab1")
            }.tag(1)

            View2().tabItem {
                Image("Tab2")
                .offset(y: 20) //<--- has no effect
                }.tag(2)

            View3().tabItem {
                Image("Tab3")
            }.tag(3)
        }
    }
}

Я использую только Image представления для элементов вкладки без текста, результат будет следующим:

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

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


ios swift swiftui tabview
person JAHelia    schedule 25.01.2020    source источник
comment
Загрузите еще одно изображение ожидаемого результата.   -  person Sagar Chauhan    schedule 25.01.2020

Ответы (2)


arrow_upward
6
arrow_downward

Стандарт TabView не позволяет теперь изменять выравнивание tabItem содержимого ... но можно создавать настраиваемые плавающие элементы в виде вкладок на основе Button, как показано ниже, что позволит выравнивать и / или настраивать внешний вид и при этом программно активировать элементы TabView.

struct TabbedView: View {
    @State private var selected = 0

    var body: some View {
        ZStack(alignment: Alignment.bottom) {
            TabView(selection: $selected) {
                View1().tabItem {
                    Text("") // < invisible tab item
                }.tag(1)

                View2().tabItem {
                    Text("")
                    }.tag(2)

                View3().tabItem {
                    Text("")
                }.tag(3)
            }
            // tab-items cover - do anything needed, height, position, alignment, etc.
            HStack { 
                Button(action: { self.selected = 1 } ) {
                    Image("Tab1") // << align & highlight as needed
                }
                Button(action: { self.selected = 2 } ) {
                    Image("Tab2") // << align & highlight as needed
                }
                Button(action: { self.selected = 3 } ) {
                    Image("Tab3") // << align & highlight as needed
                }
            }
        }
    }
}

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

person Asperi    schedule 25.01.2020

arrow_upward
2
arrow_downward

Я обнаружил трюк с использованием расширения для UITabBarController

extension UITabBarController {
open override func viewWillLayoutSubviews() {
    let array = self.viewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
}
person notduongdang    schedule 15.08.2020
comment
Этот трюк больше не работает с новым SwiftUI - person Paul D.; 28.11.2020
comment
Спасибо! Это все еще работает - person dandepeched; 29.03.2021