Ios 如何在 SwiftUI 的 TabView 中添加底部曲线

好的，实际上我们在这里需要解决两个问题，第一-找到标签栏的高度，第二-正确地将视图自定义视图与表示的选定项对齐而不是标准的标签栏.其他的都是mechanics美元.

下面是简化的演示.使用Xcode 14/iOS 16进行测试.

主要部分:

• 第一个问题的可能解决方案

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)
    }
}

Test module is here个