主页 / coding / 问题 / 78168928
Accepted
soleil
Asked: 2024-03-16 02:17:18 +0800 CST

SwiftUI 覆盖对齐水平居中

  • 772

我需要视图 A 在屏幕上居中（垂直和水平）。我需要视图 B 显示在视图 A 下方 30 像素处，也水平居中。但添加 B 时，A 必须保持在屏幕中央，不能向上移动。.overlay我可以通过使用and来完成大部分工作GeometryReader：

struct ContentView: View {
        
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 100)
                    .overlay {
                        GeometryReader {geo in
                            Rectangle()
                                .fill(.blue)
                                .frame(width: 100, height: 100)
                                .offset(y: geo.size.height + 30)
                        }
                    }
            }
        }
    }
}

在此输入图像描述

我不知道如何使蓝色矩形水平居中。我不一定知道它的宽度，尽管这里出于视觉目的指定了它。假设我不知道任一视图的确切帧值，如何将 B 定位在 A 下面 30 像素处，同时将 A 保持在屏幕中心？有没有更好的视图结构来实现这一点？

swiftui

2 个回答

  1. Best Answer

    您可以只使用VStack带有红色矩形上方蓝色矩形的隐藏副本的 a ：

    struct ContentView: View {
    
    private var blueRectangle: some View {
        Rectangle()
            .fill(.blue)
            .frame(width: 100, height: 100)
    }
    
    var body: some View {
        VStack(spacing: 30) {
            blueRectangle.hidden()
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 100)
            blueRectangle
        }
    }
}

    截屏

    或者，如果预计蓝色矩形不会比红色矩形宽，那么您可以通过覆盖来实现此目的：

    var body: some View {
    Rectangle()
        .fill(.red)
        .frame(width: 200, height: 100)
        .overlay(alignment: .top) {
            GeometryReader { proxy in
                blueRectangle
                    .frame(maxWidth: proxy.size.width)
                    .fixedSize(horizontal: false, vertical: true)
                    .offset(y: proxy.size.height + 30)
            }
        }
}
    • 1

  2. 有时听起来很明显，但红色矩形使用 垂直居中.alignmentGuide(.center)，而蓝色矩形通过计算其相对于 的垂直位置在其下方对齐red rectangle's height + 30-pixel offset。两个矩形都继承 ZStack 内的水平居中，确保它们在屏幕上保持居中，如下所示

    struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 100)
                    .alignmentGuide(.center) { _ in
                        0
                    }
                    .overlay {
                        GeometryReader { geo in
                            Rectangle()
                                .fill(Color.blue)
                                .frame(width: 100, height: 100)
                                .alignmentGuide(.center) { _ in
                                    geo.size.height + 30
                                }
                        }
                    }
            }
        }
    }
}
    • 0

相关问题