SignInWithAppleButton占满可用空间，求更优布局解决方案

我在集成Apple登录时遇到了SignInWithAppleButton的布局问题：使用以下代码时，按钮会占据所有可用空间，无法居中显示在视图中部，同时顶部和底部的长文本也会被截断。

struct DebugSignInButtonLayout_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Text("top with some very long text to check that wrapping is ok")
            Spacer()
            SignInWithAppleButton { _ in }
            onCompletion: { _ in }
                .frame(minHeight: 44.0)
            Spacer()
            Text("bottom with some very long text to check that wrapping is ok")
        }
        .padding()
    }
}

我曾尝试给所有其他元素添加.layoutPriority(1)临时解决，但这种方式需要给每个元素都加修饰符，非常繁琐。

struct DebugSignInButtonLayout_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Text("top with some very long text to check that wrapping is ok").layoutPriority(1)
            Spacer().layoutPriority(1)
            SignInWithAppleButton { _ in }
            onCompletion: { _ in }
                .frame(minHeight: 44.0)
            Spacer().layoutPriority(1)
            Text("bottom with some very long text to check that wrapping is ok").layoutPriority(1)
        }
        .padding()
    }
}

更优解决方案 #

以下几种方式可以更简洁地解决问题：

1. 限制按钮最大高度（推荐）

直接给按钮设置固定的最大高度，符合Apple登录按钮的设计规范（建议高度44pt），按钮不会再扩展占用多余空间：

struct DebugSignInButtonLayout_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Text("top with some very long text to check that wrapping is ok")
            Spacer()
            SignInWithAppleButton { _ in }
                onCompletion: { _ in }
                .frame(minHeight: 44, maxHeight: 44) // 固定按钮高度范围
            Spacer()
            Text("bottom with some very long text to check that wrapping is ok")
        }
        .padding()
    }
}

2. 固定按钮垂直尺寸

使用fixedSize让按钮仅占用自身内容所需的垂直空间，不会自动扩展：

struct DebugSignInButtonLayout_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Text("top with some very long text to check that wrapping is ok")
            Spacer()
            SignInWithAppleButton { _ in }
                onCompletion: { _ in }
                .frame(minHeight: 44.0)
                .fixedSize(horizontal: false, vertical: true) // 垂直方向保持内容尺寸
            Spacer()
            Text("bottom with some very long text to check that wrapping is ok")
        }
        .padding()
    }
}

3. 调整文本布局优先级

仅给顶部和底部的文本设置更高的布局优先级，确保文本优先获得足够空间换行，按钮则使用最小高度：

struct DebugSignInButtonLayout_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Text("top with some very long text to check that wrapping is ok")
                .layoutPriority(1) // 文本优先获取布局空间
            Spacer()
            SignInWithAppleButton { _ in }
                onCompletion: { _ in }
                .frame(minHeight: 44.0)
            Spacer()
            Text("bottom with some very long text to check that wrapping is ok")
                .layoutPriority(1)
        }
        .padding()
    }
}

内容的提问来源于stack exchange，提问作者drekka