swift 照片将圆角矩形修改为矩形

fjaof16o  于 2023-03-07  发布在  Swift
关注(0)|答案(1)|浏览(189)

下面的代码:

import Foundation
import SwiftUI

struct SignInButtonStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        ZStack{
            RoundedRectangle(cornerRadius: 20)
                .fill(Color(red: 27/255, green: 57/255, blue: 255/255))
                .frame(width: 315, height: 72)
            HStack{
                Spacer()
                VStack{
                    ZStack(alignment: .topTrailing){
                        Image("Ellipse 4")
                        Image("Ellipse 5")
                    }
                    Spacer()
                }
            }
                VStack{
                    HStack{
                
                    Text("Sign in")
                        .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                Spacer()
                    Image(systemName:"arrow.forward")
                            .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                }
                    .padding(.horizontal, 20)
            }
                    configuration.label
                }
        .frame(width: 315, height: 72)
        .opacity(configuration.isPressed ? 0.7 : 1)
    }
}

extension ButtonStyle where Self == SignInButtonStyle{
    static var signIn: SignInButtonStyle{.init()}
}

按钮如下所示:

右角不再圆了,我不确定如何修复这个问题。我试着用面膜,但不确定如何正确处理。
这是正确的按钮:

bvn4nwqk

bvn4nwqk1#

您可以clip视图以形成形状。

struct SignInButtonStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        ZStack{
            Color(red: 27/255, green: 57/255, blue: 255/255) //Put color at the bottom
            RoundedRectangle(cornerRadius: 20)
                .stroke(lineWidth: 2)
            //use this rectangle for the border/stroke
            HStack{
                Spacer()
                VStack{
                    ZStack(alignment: .topTrailing){
                        Image("Ellipse 4")
                        Image("Ellipse 5")
                    }
                    Spacer()
                }
            }
                VStack{
                    HStack{
                
                    Text("Sign in")
                        .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                Spacer()
                    Image(systemName:"arrow.forward")
                            .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                }
                    .padding(.horizontal, 20)
            }
                    configuration.label
                }
        .opacity(configuration.isPressed ? 0.7 : 1)
        .aspectRatio(5, contentMode: .fit)
        .clipShape(RoundedRectangle(cornerRadius: 20))//Clip to shape
    }
}

相关问题