ios - SwiftUI:在 TabView 中调整图像的位置
问题描述
我使用以下代码创建一个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)
}
}
}
我只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
}
}
}
}
}
注意:它甚至可以是没有按钮的,只是带有点击手势的图像等。
推荐阅读
- python - 如何在 url 中抓取具有不同数据的多个网站
- json - 处理不同类型的请求体
- jquery - 全局防止多次点击
- c# - 获取异常'非零金额必须四舍五入为整数'Sage 50 C# WPF?
- javascript - 尝试 require() 本地文件时不断收到“Webpack Empty Context Error”
- html - 在 Polymer JS 中验证 gstin 时出现控制台错误
- angular - “formGroup”表单未提交且验证不起作用
- angular - 使用角度在 slickgrid 中的 cellclick 事件上应用分页
- java - 如何将搜索文本字段与组合框连接以过滤 jTable 上的结果?
- php - 为什么这个 php 代码返回 13 而不是 3?我真的很困惑