如何创建两个相同大小的文本视图答案

【问题标题】：How to create two text views that are the same size如何创建两个相同大小的文本视图
【发布时间】：2020-10-17 04:48:21
【问题描述】：

我正在开发一款游戏，我有代表可以翻转的卡片的文本视图。卡片的每一面都有文字。我希望卡片的每一面尺寸相同。即，我希望文字较少的卡片与文字较多的卡片尺寸相同。我不想硬编码卡片的大小，因为有时只有一行文本，而其他时候会有多行文本。这是我目前拥有的代码的摘录：

import SwiftUI

struct FlipTestView: View {
    
    @State var flipped = false
    
    var body: some View {
        let flipDegrees = flipped ? 180.0 : 0
        VStack {
            ZStack() {
                Text("Card One First Side Of Card")
                    .placedOnCard(Color.yellow)
                    .flipRotate(flipDegrees).opacity(flipped ? 0.0 : 1.0)
                Text("""
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    """)
                    .placedOnCard(Color.green)
                    .flipRotate(-180 + flipDegrees).opacity(flipped ? 1.0 : 0.0)
            }
            .animation(.easeInOut(duration: 0.8))
            .onTapGesture { flipped.toggle()}
        }
    }
}

struct FlipTestView_Previews: PreviewProvider {
    static var previews: some View {
        FlipTestView()
    }
}

extension View {
    
    func flipRotate(_ degrees : Double) -> some View {
        return rotation3DEffect(Angle(degrees: degrees), axis: (x: 1.0, y: 0.0, z: 0.0))
    }
    
    func placedOnCard(_ color: Color) -> some View {
        return
            padding(15)
            //            .frame(width: 350, height: 65, alignment: .center).background(color)
            .background(color)
            .cornerRadius(16)
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(Color.blue, lineWidth: 4)
            )
    }
}

【问题讨论】：

标签： swiftui

【解决方案1】：

将.placedOnCard 移动到包含两侧的ZStack，然后它将调整为两侧中较大的那个。这是重构代码的解决方案：

ZStack() {
    Text("Card One First Side Of Card")
        .opacity(flipped ? 0.0 : 1.0)
    Text("""
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        """)
        .flipRotate(180.0).opacity(flipped ? 1.0 : 0.0)
}
.placedOnCard(flipped ? Color.green : Color.yellow)
.flipRotate(flipDegrees)
.animation(.easeInOut(duration: 0.8))
.onTapGesture { flipped.toggle()}

【讨论】：