我使用以下代码用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
的中心,但是找不到简单的方法。
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
}
}
}
}
}
注意:它甚至可以是不带按钮的,只是带有点击手势的图像等。