文本对齐 / swiftUi答案

【问题标题】：text alignment / swiftUi文本对齐 / swiftUi
【发布时间】：2021-01-10 12:01:21
【问题描述】：

swiftui 我正在学习新东西。我无法对齐我的大脑停止了。在图片中，我说我想如何做到这一点。你能帮忙吗？

  HStack{
                Text("Picture")
                    .font(.custom("Pacifico-Regular",size: 50))
                    .padding()
                    .foregroundColor(Color.white)
                        .shadow(color: .white, radius: 10, x: 0, y: 0)
                    
                    Image("1coin").resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width:30, height: 30)
                    Text("123")
                        .font(.custom("Pacifico-Regular",size: 20))
                        .foregroundColor(Color.white)
                    
                }

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

这是可能的布局（使用一些复制的组件而不是您的自定义）。使用 Xcode 12.1 / iOS 14.1 准备

    HStack{
        Spacer()
        Text("Picture")
            .font(.custom("Pacifico-Regular",size: 50))
            .padding()
            .foregroundColor(Color.white)
            .shadow(color: .white, radius: 10, x: 0, y: 0)
        Spacer().overlay(
            HStack {
                Image(systemName: "1.circle").resizable()
                    .foregroundColor(Color.white)
                    .aspectRatio(contentMode: .fit)
                    .frame(width:30, height: 30)
                Text("123")
                    .font(.custom("Pacifico-Regular",size: 20))
                    .foregroundColor(Color.white)
            }
        , alignment: .trailing)
    }

【讨论】：

【解决方案2】：

您可以使用ZStack 嵌入两个HStacks 并分别对齐它们。它们将重叠显示。

您将“图片”文本居中对齐 - 默认情况下会发生这种情况。然后将第二个 HStack 与 Spacer() 对齐

ZStack {
    HStack{
        Text("Picture")
        .font(.custom("Pacifico-Regular",size: 50))
        .background(Color.red)
        .padding()
        .shadow(color: .black, radius: 10, x: 0, y: 0)
    }
    HStack {
         Spacer()
         Image("1coin").resizable()
         .aspectRatio(contentMode: .fit)
         .frame(width:30, height: 30)
         .background(Color.red)
         Text("123")
         .font(.custom("Pacifico-Regular",size: 20))
         .background(Color.red)
    }
}

如果要将所有元素保持在顶部，则需要在 ZStack 顶部再添加一个 VStack + Spacer：

VStack {
    ZStack {
        HStack{
        Text("Picture")
            .font(.custom("Pacifico-Regular",size: 50))
            .background(Color.red)
            .padding()
                .shadow(color: .black, radius: 10, x: 0, y: 0)
        }
        
        HStack {
            Spacer()
            Image("1coin").resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:30, height: 30)
                .background(Color.red)
            Text("123")
                .font(.custom("Pacifico-Regular",size: 20))
                .background(Color.red)
        }
    }
    Spacer()
}

【讨论】：

我希望图片像行星一样围绕自身旋转，而不是顺时针旋转。我该怎么做？ “1coin”图像。你知道吗