在SwiftUI中添加圓角半徑時如何隱藏背景顏色的溢位？-有解無憂

我想要一個帶有圓角和自定義背景顏色的視圖，但后者在角落中溢位，如下所示：

在 SwiftUI 中添加圓角半徑時如何隱藏背景顏色的溢位？

這是我的代碼：

    var id:Int
    var body: some View {
        VStack(alignment: .leading) {
            Text(name)
                .font(.title2)
                .bold()
                .foregroundColor(.accentColor)
            Text("Index numéro "   String(id))
                .foregroundColor(.accentColor.opacity(0.75))
        }
        .padding()
        .frame(width: UIScreen.width*0.9,
               height: UIScreen.height*0.1,
               alignment: .leading)
        .overlay(RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.accentColor, lineWidth: 3))
        .background(Color.accentColor.opacity(0.1))
    }

在此先感謝，我希望你們能幫我解決這個問題！

uj5u.com熱心網友回復：

您可以使用RoundedRectangle與strokeBorder再追加的背景RoundedRectangle與填充改性劑。此處詳細介紹了此技術：SwiftUI：如何繪制填充和描邊形狀？

var body: some View {
    VStack(alignment: .leading) {
        Text(name)
            .font(.title2)
            .bold()
            .foregroundColor(.accentColor)
        Text("Index numéro "   String(id))
            .foregroundColor(.accentColor.opacity(0.75))
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 20)
            .strokeBorder(Color.accentColor, lineWidth: 3)
            .background(
                RoundedRectangle(cornerRadius: 20).fill(Color.accentColor.opacity(0.3))
            )
    )
    .padding()
}

注意：我還更改了您的.frame修飾符并將其替換為填充，這通常是一種更靈活的解決方案，不依賴于測量螢屏尺寸，但這對這個答案無關緊要

uj5u.com熱心網友回復：

只需替換此代碼：

.background(Color.accentColor.opacity(0.1).cornerRadius(20.0))

uj5u.com熱心網友回復：

在 iOS 15 中，有一個.background()裁剪成形狀的修飾符。

func background<S, T>(_ style: S, in shape: T, fillStyle: FillStyle = FillStyle()) -> some View where S : ShapeStyle, T : InsettableShape

嘗試這個：

struct ContentView: View {

    var body: some View {
        VStack(alignment: .leading) {
            Text("name")
                .font(.title2)
                .bold()
                .foregroundColor(.accentColor)
            Text("Index numéro "   "1")
                .foregroundColor(.accentColor.opacity(0.75))
        }
        .padding()
        .frame(width: 200,
               height: 100,
               alignment: .leading)
        
        .overlay(RoundedRectangle(cornerRadius: 20)
                    .stroke(Color.accentColor, lineWidth: 3))
        .background(Color.accentColor.opacity(0.1), in: RoundedRectangle(cornerRadius: 20))
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/326253.html

標籤：ios 迅速苹果手机代码迅捷

上一篇：無法在AnalyticsEvents電子商務中記錄多個專案

下一篇：SwiftUI鍵盤單詞建議欄