在 SwiftUI 中，在 ZStack 中对齐多个视图的简单方法是什么答案

【问题标题】：In SwiftUI what is an easy way to align more than one view in ZStack在 SwiftUI 中，在 ZStack 中对齐多个视图的简单方法是什么
【发布时间】：2021-08-17 21:07:14
【问题描述】：

我有一个视图，我想在它的右上角和右下角添加两个图标。我设法做到了：

我使用了两个 ZStack：

ZStack(alignment: .bottomTrailing)
{
    ZStack(alignment: .topTrailing)
    {
        Image(item.thumbnailImage)
            .clipShape(Circle())
            .overlay(Circle()
                        .stroke(Color.gray, lineWidth: 2))
        
        if item.isFavorite
        {
            Image(systemName: "star.fill")
                .foregroundColor(.yellow)
                .offset(x: 7, y: -7)
        }
    }
    
    if item.ordered
    {
        Image(systemName: "checkmark.square.fill")
            .offset(x: 7, y: 7)
    }
}

但是我有一种感觉，应该有比在里面嵌套 ZStacks 更简单的方法。除了看起来小图标没有对齐它们的 x 中心。我可能可以通过更改偏移量来解决这个问题，但这会使代码更加笨拙。

有没有更简单的方法？

【问题讨论】：

将两个图像放在一个 vstack 中，中间有一个间隔

标签： swift swiftui swiftui-zstack

【解决方案1】：

您可以使用overlay 修饰符，如下所示：

import PlaygroundSupport
import SwiftUI

PlaygroundPage.current.setLiveView(
    Circle()
        .strokeBorder(Color.gray, lineWidth: 6)
        .frame(width: 44, height: 44)
        .overlay(
            Image(systemName: "star.fill")
                .foregroundColor(.yellow)
                .offset(x: 7, y: -7),
            alignment: .topTrailing)
        .overlay(
            Image(systemName: "checkmark.square.fill")
                .offset(x: 7, y: 7),
            alignment: .bottomTrailing)
        .padding()
)

如果您的部署目标是 iOS 15 或更高版本（或 macOS、tvOS 或 watchOS 的统一版本），您可以改用 ViewBuilder 版本的 overlay：

import PlaygroundSupport
import SwiftUI

PlaygroundPage.current.setLiveView(
    Circle()
        .strokeBorder(Color.gray, lineWidth: 6)
        .frame(width: 44, height: 44)
        .overlay(alignment: .topTrailing) {
            Image(systemName: "star.fill")
                .foregroundColor(.yellow)
                .offset(x: 7, y: -7)
        }
        .overlay(alignment: .bottomTrailing) {
            Image(systemName: "checkmark.square.fill")
                .offset(x: 7, y: 7)
        }
        .padding()
)

我们可以使用 lorem 的建议来使用 VStack 对齐符号中心。然后我们可以将两个offset 修饰符分解为VStack 上的padding。

import PlaygroundSupport
import SwiftUI

PlaygroundPage.current.setLiveView(
    Circle()
        .strokeBorder(Color.gray, lineWidth: 6)
        .frame(width: 44, height: 44)
        .overlay(
            VStack(spacing: 0) {
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)

                Spacer()

                Image(systemName: "checkmark.square.fill")
            }.padding([.top, .bottom, .trailing], -7),
            alignment: .trailing)
        .padding()
)

【讨论】：

【解决方案2】：

仅使用一个Zstack 并将两个图标包装在VStack 中。

        `ZStack`(alignment: .trailing) {
            Circle()
             .stroke(Color.gray, lineWidth: 2)

            VStack {
                Image(systemName: "star.fill")
                Spacer()
                Image(systemName: "checkmark.square.fill")
            }
            // Adjust the position of star and checkmark
            .offset(x: -10)
        }
        .frame(width: 100, height: 100)

【讨论】：