SwiftUI：在 TabView 中调整图像的位置

Posted 2023-02-24

【中文标题】SwiftUI：在 TabView 中调整图像的位置

【英文标题】：SwiftUI: Adjusting position of Image in a TabView

【发布时间】：2020-01-25 19:45:06

【问题描述】：

我使用以下代码创建一个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)
        
    

我只使用Imageviews 对没有文字的标签项，结果如下：

我需要将Image 视图定位（或垂直对齐）到TabView 的中心，但找不到直接的方法。

【问题讨论】：

请再上传一张您预期输出的图片。

【参考方案1】：

标准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
                
            
        
    

注意：它甚至可以是没有按钮的，只是带有点击手势的图像等。

【参考方案2】：

我发现了一个使用 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)
    

【讨论】：

这个技巧似乎不再适用于新的 SwiftUI

【参考方案3】：

您可以在标签栏中的图像之前添加空视图，如下所示：

struct TabbedView: View 
    @State private var selected = 0

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