SwiftUI - TabView 不粘在视图底部答案

【问题标题】：SwiftIUI - TabView not sticking to bottom of viewSwiftUI - TabView 不粘在视图底部
【发布时间】：2021-09-25 11:24:42
【问题描述】：

我有一个自定义标签视图：

import SwiftUI

struct CustomTabBar: View {
var animation: Namespace.ID
@Binding var currentTab: Tab
var body: some View {
    HStack(spacing: 0) {
        ForEach(Tab.allCases, id: \.rawValue) {tab in
            TabButton(tab: tab, animation: animation, currentTab: $currentTab) { pressedTab in
                withAnimation(.spring()) {
                    currentTab = pressedTab
                }
            }
        }
    }
}
}

struct TabButton: View {
var tab: Tab
var animation: Namespace.ID
@Binding var currentTab: Tab
var onTap: (Tab)->()

var body: some View {
    Image(tab.rawValue)
        .renderingMode(.original)
        .resizable()
        .frame(width: 27, height: 27)
        .foregroundColor(currentTab == tab ? .white : .gray)
        .frame(width: 50, height: 50 )
        .background(
            ZStack {
                if currentTab == tab {
                    Circle()
                        .fill(Color("startColor"))
                        .matchedGeometryEffect(id: "TAB", in: animation)
                }
            }
        )
        .frame(maxWidth: .infinity)
        .onTapGesture {
            onTap(tab)
        }
}
}

我使用 customTabBar 的主视图：

import SwiftUI

struct MainView: View {

@State var currentTab : Tab = .Home
init() {
    UITabBar.appearance().isHidden = true
}
@Namespace var animation

var body: some View {
    ZStack(alignment: .bottom) {
        TabView(selection: $currentTab) {
            HomeView()
                .tag(Tab.Home)
            
            SearchView()
                .tag(Tab.Search)
            
            MessagesView()
                .tag(Tab.Messages)
            
            SettingsView()
                .tag(Tab.Settings)
        }
        CustomTabBar(animation: animation, currentTab: $currentTab)
    }
}
}

enum Tab: String, CaseIterable {
case Home = "Home"
case Search = "Search"
case Messages = "Messages"
case Settings = "Settings"
}


struct MainView_Previews: PreviewProvider {
static var previews: some View {
    MainView()
}
}

当我单击以显示键盘并显示键盘时，视图被向上推，这没关系，但 TabView 也被带到顶部，这应该保持在底部。

我怎样才能让 TabView 粘在底部而不是在键盘出现时出现。

【问题讨论】：

标签： swift swiftui

【解决方案1】：

实现此目的的一种方法是使用 .position 修饰符，但它需要预先知道选项卡视图的高度（这在您的情况下是固定的，所以它应该可以工作）。

struct MainView: View {
    
    @State var currentTab : Tab = .Home
    @State var screenSize = UIScreen.main.bounds.size
    @State var safeSize: EdgeInsets = EdgeInsets()
    
    init() {
        UITabBar.appearance().isHidden = true
    }
    @Namespace var animation
    
    var body: some View {
        ZStack(alignment: .bottom) {
            GeometryReader { geometry in
                TabView(selection: $currentTab) {
                    HomeView()
                        .tag(Tab.Home)
                    
                    SearchView()
                        .tag(Tab.Search)
                    
                    MessagesView()
                        .tag(Tab.Messages)
                    
                    SettingsView()
                        .tag(Tab.Settings)
                }
                .onAppear {
                    // Get the safe area on the first draw (only),
                    // this should get the max safe area
                    self.safeSize = geometry.safeAreaInsets
                }
                
                CustomTabBar(animation: animation, currentTab: $currentTab)
                    // stick it to the bottom of the original safe area
                    .position(x: screenSize.width / 2, y: screenSize.height - safeSize.bottom - safeSize.top - 25 /* half of the tab frame height */)
            }
        }
    }
}

【讨论】：