首页 > 解决方案 > 当我使用 SwiftUI 绘制自定义标签栏时,Spacer 不起作用

问题描述

我在swift ui中做了一些练习我做了一个如图所示的标签栏,我想把它移到屏幕的底部,但是我不能用spacer不起作用,也许它也与我想要的路径有关给角落半径我是新的但situi提前谢谢你的回答

struct ContentView: View {

var body: some View {
    
    VStack {
        
        Spacer()
        
        CustomTabBar()
    }
    
}}



struct CustomTabBar: View {
var body: some View {
    ZStack {
        
        Path { path in
            
            path.addRect(CGRect(x: 10, y: 200, width: UIScreen.main.bounds.size.width - 20, height: 80))
            
        }
        .cornerRadius(40)
        .foregroundColor(.blue)
        
        Path { path in
            
            path.addArc(center: CGPoint(x: UIScreen.main.bounds.size.width / 2, y: 200), radius: 50, startAngle: .degrees(0), endAngle: .degrees(180), clockwise: false)
            
        }.foregroundColor(.white)
        
    }
}}

在此处输入图像描述

标签: iosswiftxcodeswiftui

解决方案


是的你是对的。它与您拥有的 Path 元素有关。我会对纯 SwiftUI ShapesRectangleCircle. 这也简化了圆角半径的工作。

这是我的代码:

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            CustomTabBar()
        }
    }
}

struct CustomTabBar: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(height: 80)
                .foregroundColor(Color.blue)
                .cornerRadius(40)
                .padding(.horizontal, 10)
            
            
            Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.white)
                .offset(x: 0, y: -50)
        }
    }
}

这会产生以下结果:

上面代码的结果


推荐阅读