代码之家 › 专栏 › 技术社区 › Z S

删除视图周围边框的底侧

swiftui

Z S · 技术社区 · 1 年前

我想画一个去掉“边框”底部的形状,这样我们就可以看到背景了。

struct SwiftUIView: View {
    var body: some View {
        Text("Hello World!")
            .padding(10.0)
            .border(Color.blue, width: 3.0)
            .cornerRadius(4.0)
    }
}

我不确定能否实现这一目标。我看过clipStyle和Shapes,但不太确定什么是最好的方法。

2 回复 | 直到 1 年前

sonle 1 年前

我认为最简单的方法是添加 overlay 使用底部对齐而不是使用 UIBezierPath 。您可能想尝试这种方法:

Text("Hello World!")
    .padding(10.0)
    .border(Color.blue, width: 3.0)
    .cornerRadius(4.0)
    .overlay(alignment: .bottom) { //<- here
        Rectangle()
            .foregroundColor(.white)
            .frame(height: 3) //<- height should be equal to borderWidth above
    }

El Tomato 1 年前

这是一种俗气的方式,使用 trim(from:to:) 。如果我说得对的话,修剪整齐的家伙只顺时针方向跑,从90度开始。在这种情况下,你必须有两个矩形。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World!")
                .padding(10.0)
                .overlay {
                    RoundedRectangle(cornerRadius: 4.0)
                        .trim(from: 0.45, to: 1.0)
                        .stroke(Color.blue, lineWidth: 3.0)
                    
                    RoundedRectangle(cornerRadius: 4.0)
                        .trim(from: 0.0, to: 0.05)
                        .stroke(Color.blue, lineWidth: 3.0)
                }
        }
    }
}