如何在 SwiftUI 的 TabView 中添加底部曲線？

Question

賞金將在 4 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Rehan Ali Khan想引起更多人對這個問題的關注。

我只想在我的 tabView 中心有一條底部曲線，但我無法訪問 tabView 形狀屬性。

這就是我要的。

筆記：

曲線應始終保持在中心。 並且項目應該交換，這已經在給定的代碼中實現。

import SwiftUI

struct DashboardTabBarView: View {

@State private var selection: String = "home"

struct Item {
    let title: String
    let color: Color
    let icon: String
}

@State var items = [
    Item(title: "cart", color: .red, icon: "cart"),
    Item(title: "home", color: .blue, icon: "house"),
    Item(title: "car", color: .green, icon: "car"),
]

var body: some View {

    TabView(selection: $selection) {
        ForEach(items, id: \.title) { item in // << dynamically !!
            item.color
                .tabItem {
                    Image(systemName: item.icon)
                    Text(item.title)
                }
        }
    }
    .onChange(of: selection) { title in // << reorder with centered item
        let target = 1
        if var i = items.firstIndex(where: { $0.title == title }) {
            if i > target {
                i += 1
            }
            items.move(fromOffsets: IndexSet(integer: target), toOffset: i)
        }
    }
}
}

Answer 1

好的，實際上我們需要在這里解決兩個問題，首先 - 找到標簽欄的高度，其次 - 正確地將視圖自定義視圖與標准標簽欄上表示的選定項目對齊。 其他一切都是機械。

這是簡化的演示。 使用 Xcode 14 / iOS 16 進行測試。

主要部分：

• 問題 #1 的可能解決方案

struct TabContent<V: View>: View {
    @Binding var height: CGFloat
    @ViewBuilder var content: () -> V

    var body: some View {
        GeometryReader { gp in  // << read bottom edge !!
            content()
                .onAppear {
                    height = gp.safeAreaInsets.bottom
                }
                .onChange(of: gp.size) { _ in
                    height = gp.safeAreaInsets.bottom
                }
        }
    }
}

• 問題 #2 的可能解決方案

    // Just put customisation in z-ordered over TabView
    ZStack(alignment: .bottom) {
        TabView(selection: $selection) {
            // .. content here
        }

        TabSelection(height: tbHeight, item: selected)
    }


struct TabSelection: View {
    let height: CGFloat
    let item: Item
    
    var body: some View {
        VStack {
            Spacer()
            Curve()    // put curve over tab bar !!
                .frame(maxWidth: .infinity, maxHeight: height)
                .foregroundColor(item.color)
        }
        .ignoresSafeArea()   // << push to bottom !!
        .overlay(
            // Draw overlay
            Circle().foregroundColor(.black)
                .frame(height: height).aspectRatio(contentMode: .fit)
                .shadow(radius: 4)
                .overlay(Image(systemName: item.icon)
                    .font(.title)
                    .foregroundColor(.white))
            , alignment: .bottom)
    }
}

測試模塊在這里