swift - 如何防止视图被 SwiftUI 中扩展的其他视图推送

Question

如果你有这样的事情。您会看到底部视图rectangle 1并rectangle 2彼此对齐。

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.smashFrameStartup)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.smashOnShield)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

但是，一旦您将顶部文本从"Data"to"Data 2"或任何更长的时间延长，您就会看到顶部视图将底部视图进一步向下推。无论顶视图中的文本长度如何，如何阻止底视图被进一步向下推？

这是更新的代码以及会发生什么。

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.smashFrameStartup)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.smashOnShield)
                .overlay(
                    VStack {
                        Text("Data 2").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

是否可以定位文本视图使其不移动？无论上述任何一个矩形上的文本视图的长度如何，我都希望rectangle 2必须对齐。rectangle 1

我还应该注意，如果上面的文本视图字符串像下面这样长，它将被截断，这是我不想要的。

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.red)
                .overlay(
                    VStack {
                        Text("Data 2 with even more information here").font(.system(size: 100.0))
                        Text("rectangle 2")
                    }
                )
        }

我也尝试过添加minimumScaleFactor，0.4它确实显示了整个文本而没有被截断，但它有同样的问题，它将底部文本视图进一步向下推。

        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.green)
                .overlay(
                    VStack {
                        Text("Data").font(.system(size: 100.0))
                        Text("rectangle 1")
                    }
                )

            Rectangle()
                .fill(Color.red)
                .overlay(
                    VStack {
                        Text("Data 2 with even more information here").font(.system(size: 100.0))
                            .minimumScaleFactor(0.4)
                        Text("rectangle 2")
                    }
                )
        }

编辑：标准

1. 让每个矩形中的两个底部文本视图的位置相互对齐，就像在第一张图片中一样，并且在屏幕上的那个位置。
2. 顶部文本视图的长度可以是可变的，无论是 2 个字符还是最多 40 个字符，都不应该导致底部文本视图被进一步向下推。应该注意的是，顶部文本视图中字符串的长度与另一个矩形中的顶部文本视图相比可以是不同的长度。尽管如此，底部视图不应向下移动，它们仍应彼此对齐。
3. 如果顶部视图文本字符串开始变得太长，只要不移动底部文本视图，就可以更改字体大小。为了显示所有的文本。
4. 顶视图中很长的字符串不应该像第三张图片那样被截断。我尝试修复此minimumScaleFactor问题，截断问题已修复，如第四张图片所示，但您可以看到底部文本视图仍然移动。