如何更改“使用 Apple 登录”按钮的宽度？

Question

我正在使用 UIViewRepresentable 结构在 SwiftUI 中嵌入一个“使用 Apple 登录”按钮来显示按钮。

import SwiftUI
import UIKit
import AuthenticationServices

final class AppleIDButton: UIViewRepresentable {

    typealias UIViewType = UIView

    var appleButton = ASAuthorizationAppleIDButton()

    func makeUIView(context: UIViewRepresentableContext<AppleIDButton>) -> UIView {
        let view = UIView()
        view.addSubview(appleButton)
        return view
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<AppleIDButton>) {
        appleButton.cornerRadius = 8
    }
}

...//这是我的 SwiftUI 文件中的代码

ZStack(alignment: .top) {
                    VStack(spacing: 0) {
                        Rectangle()
                            .frame(width: screenWidth, height: 1)
                            .foregroundColor(Color("lineGray"))

                        Rectangle()
                            .frame(width: screenWidth, height: screenHeight * 0.375)
                            .foregroundColor(.white)
                    }

                    VStack {

                        HStack {
                            self.appleIDButton
                                .frame(width: screenWidth - 24, height: 48)
                                .padding(.leading, 24)
                        }
                            .padding(.bottom, 16)


                        Text("Or")
                            .font(.system(size: 14))
                            .foregroundColor(Color("gray"))
                            .padding(.top, -16)
                        NavigationLink(destination: SignUpView()) {
                            HStack {
                                Spacer()
                                Text("Sign Up with email")
                                    .font(.system(size: 17))
                                    .fontWeight(.semibold)
                                    .foregroundColor(.white)
                                Spacer()
                            }
                            .padding([.top, .bottom], 12)
                        }
                            .background(colors.primaryThemeColor, cornerRadius: 8)
                            .padding([.leading, .trailing], 24)
                            .padding(.bottom)

                        HStack {
                            Spacer()
                            Text("Already have an account?")
                                .foregroundColor(Color("gray"))

                            NavigationLink(destination: SignInView()) {
                                Text("Sign In")
                                    .fontWeight(.semibold)
                                    .foregroundColor(colors.primaryThemeColor)
                            }
                            Spacer()
                        }
                            .font(.system(size: 14))
                    }
                        .padding(.top, 24)
                }

我的代码目前正在生成一个小于屏幕宽度一半并且正在触摸前沿的按钮。

当它出现在 SwiftUI 视图中时，如何更改按钮的宽度以匹配正确的视图约束？

Answer 1

您可以修改默认约束并设置新约束。默认情况下，宽度需要大于 130。

• 目标-C

ASAuthorizationAppleIDButton *appleButton = [[ASAuthorizationAppleIDButton alloc] init];
[appleButton addTarget:self action:@selector(handleSignInWithAppleIDButtonPress:) forControlEvents:UIControlEventTouchUpInside];

// Disable default width constraints
[appleButton.constraints enumerateObjectsUsingBlock:^(__kindof NSLayoutConstraint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    if (obj.firstAttribute == NSLayoutAttributeWidth) {
        obj.active = NO;
    }
}];

// Set new ones
//[appleButton.widthAnchor constraintEqualToConstant:150].active = YES;
[appleButton.widthAnchor constraintEqualToConstant:40].active = YES;
[appleButton.heightAnchor constraintEqualToConstant:40].active = YES;

• 迅速

let appleButton = ASAuthorizationAppleIDButton()
authorizationButton.addTarget(self, action: #selector(handleLogInWithAppleIDButtonPress), for: .touchUpInside)

// Disable default width constraints
appleButton.constraints.forEach { (constraint) in
    if (constraint.firstAttribute == .width) {
            constraint.isActive = false
    }
}

// Set new ones
//appleButton.widthAnchor.constraint(equalToConstant: 150).isActive = true
appleButton.widthAnchor.constraint(equalToConstant: 40).isActive = true

Answer 2

这是一个通常的过程，我们往往会错过的是

appleSignInButton.translatesAutoresizingMaskIntoConstraints = false

当以编程方式添加苹果按钮时，自动调整大小已启用，并且您的约束更改不会响应。

快乐编码