如何防止视图被其他视图在 SwiftUI 中扩展

如何解决如何防止视图被其他视图在 SwiftUI 中扩展

如果你有这样的事情。您会看到底部视图 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" 延长到 "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 修复此问题，截断的问题已修复，如第四张图片所示，但正如您所看到的，底部文本视图仍在移动。