JAH*_*lia 3 ios tabview swift swiftui
我使用以下代码创建一个TabView
with 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)
}
}
}
Run Code Online (Sandbox Code Playgroud)
我只Image
对没有文本的选项卡项使用视图,结果如下:
我需要将Image
视图定位(或垂直对齐)到中心,TabView
但找不到直接的方法。
Standard TabView
does not allow now to change alignment of tabItem
content... but it is possible to create custom floating tab-like items based on Button
as below, that would allow to align and/or customise look&feel and still activate TabView items programmatically.
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
}
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
Note: it can be even w/o buttons, just images with tap gesture, etc.