SwiftUI 缩放视图而不影响几何

Posted 2023-02-24

【中文标题】SwiftUI 缩放视图而不影响几何

【英文标题】：SwiftUI scale view without affecting geometry

【发布时间】：2020-05-18 08:55:13

【问题描述】：

寻找一种在不影响底层几何图形的情况下缩放视图（屏幕）的方法。

所以目前我有一个 SwiftUI 视图 (ScaleViewTest)，我添加了一个 ZStack，其背景为矩形，覆盖了整个视图（忽略安全区域）

在我的预览结构中，我添加了一个值为 0.99 的缩放修饰符，它应该按比例将视图缩放到该因子...理论上。

实际发生的是它正在改变内部视图的几何形状，（在这种情况下，内部视图显示，“我们只获得了 99% 的屏幕可以使用，因此，我们没有安全区域）

我想要实现的是能够在没有内部视图几何形状的情况下缩放视图。

我试过了：

使用GeometryReader 获取safeAreaInsets 但不起作用，因为没有安全区域。

粘贴代码以提供参考。

struct ScaleViewTest: View 
    var body: some View 
      ZStack 
        Rectangle()
        .fill(LinearGradient(gradient: Gradient(colors: [Color.init(hexadecimal: "#005A65"), Color.init(hexadecimal: "#002D33")]), startPoint: .top, endPoint: .bottom))
          .edgesIgnoringSafeArea(.all)

        Text("Hello, this is a new view")
          .foregroundColor(.white)
          .font(.system(size: 22))

      
    


struct ScaleViewTest_Previews: PreviewProvider 
    static var previews: some View 
        ScaleViewTest()
          .scaleEffect(0.99)
    

很难理解正在发生的事情，如果您需要任何其他信息，请留下一些 cmet。但是我想要实现的一个例子就像 Airbnb，当你点击一个列表时，你会看到父视图缩小。

【参考方案1】：

任何修饰符创建新视图，它在父容器中与默认规则对齐，直到明确指定。

所以这个

    ScaleViewTest()
        .scaleEffect(0.99) // << new view

和这个类似

    ScaleViewTest()
        .frame(height: 400) // << new view

可能大家都认为从第二个开始期待全屏是很奇怪的，所以第一个也是一样。

因此，将结果视图拉伸到全屏的解决方案显然是，

    ScaleViewTest()
      .scaleEffect(0.99)
      .edgesIgnoringSafeArea(.all)

更新：建议的解决方案 - 通过绑定将比例移动到内部（外部可管理和动画）

所以在预览中

ScaleViewTest(scale: .constant(0.99))

给予

struct ScaleViewTest: View 
    @Binding var scale: CGFloat
    var body: some View 
      ZStack 
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.yellow]), startPoint: .top, endPoint: .bottom))

        Text("Hello, this is a new view")
          .foregroundColor(.white)
          .font(.system(size: 22))

      
      .scaleEffect(scale)
      .edgesIgnoringSafeArea(.all)
    

【讨论】：

如果你还想在ScaleViewTest中使用安全区怎么办？例如，文本位于屏幕顶部而不是中心？在该视图中，我似乎无法从几何阅读器访问安全区域

酷！这就说得通了。让我困惑的是操作的顺序。