Question

我尝试通过将模糊视图和HStack放入ZStack中，在HStack中包含的某些文本和图片下面分层模糊视图。我还对模糊视图应用了框架，以为其提供所需的尺寸。但是，每当我更改帧宽度时，似乎都会影响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)
        }
    }
}

我不认为这是一个错误，因此我认为我仍然无法理解为什么模糊视图的宽度会影响其上方的堆栈，也许有人可以解释如何更改它。

Answer 1

代替使用帧修饰符对BlurView的确切大小进行硬编码，请尝试使用ascpectRatio：

.aspectRatio(2.68, contentMode: .fit)

ZStack通过计算其最大和最高子代的大小来确定其大小。

内部带有Spacer（）的视图将占用其父级提供的任何空间

如果您的BlurView（）没有框架，则ZStack的大小将由HStack来确定，并且由于它具有Spacer（），它将占用整个屏幕的宽度。

在您的示例中，BlurView（）的边框比屏幕宽，因此它强制ZStack的宽度相同，这又意味着HStack提供了相同的宽度，并且由于间隔物的影响，它得以扩展超出屏幕的宽度。

SwiftUI ZStack框架问题

1 个答案: