SwiftUI ZStack帧问题

Question

我试图通过将模糊视图和HStack放入HStack中，在包含在ZStack中的一些文本和图片下面分层模糊视图。我还对模糊视图应用了一个框架，使其具有我想要的尺寸。但是，每当我更改框架宽度时，它似乎都会影响HStack (将它推到两边)和它的内容，考虑到这两者都包含在ZStack中，因此基本上位于HStack的下面，所以它不应该受到影响。

Blur view width 415

Blur view width 600

经过一些测试后，我发现模糊视图的宽度只影响它上面的元素，当它们包含在某种堆栈中时。

struct AlbumNameView: View {
    var body: some View {
        ZStack {
            BlurView(style: .dark)
                .frame(width: 415, height: 155)
                .shadow(radius: 2, x: 0, y: 3)

            HStack {
                Image("shindy nautilus")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(24)
                    .frame(width: 130, height: 130)
                    .shadow(radius: 4)

                VStack(alignment: .leading) {

                    Text("Nautilus")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .bold()
                        .shadow(radius: 1, x: 0, y: 1)

                    Text("Shindy")
                        .foregroundColor(.white)
                        .font(.headline)
                        //.bold()
                        .shadow(radius: 1, x: 0, y: 1)

                    Spacer()

                } .frame(width: 230, height: 120, alignment: .leading)


                Spacer()

            }
            .padding(.horizontal)
        }
    }
}

我不认为这是一个bug，所以我想我仍然不能理解为什么模糊视图的宽度会影响它上面的堆栈，也许有人可以解释我如何改变这一点。

Answer 1

尝试使用ascpectRatio，而不是使用frame修饰符硬编码BlurView的确切大小：

.aspectRatio(2.68, contentMode: .fit)

ZStack通过取其最宽和最高的子级的大小来确定其大小。

内含空格符()的视图将占用其父视图提供的任何空间

如果您的BlurView()没有帧，那么ZStack的大小将由HStack决定，因为它有一个空格符()，所以它将占据整个屏幕的宽度。

在您的示例中，BlurView()具有比屏幕更宽的框架，因此它强制ZStack具有相同的宽度，这反过来意味着为HStack提供相同的宽度，并且由于间隔使用它并扩展到超出屏幕的宽度。