【问题标题】:SwiftUI scale view without affecting geometrySwiftUI 缩放视图而不影响几何
【发布时间】: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,当你点击一个列表时,你会看到父视图缩小。

【问题讨论】:

    标签: swift swiftui


    【解决方案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中使用安全区怎么办?例如,文本位于屏幕顶部而不是中心?在该视图中,我似乎无法从几何阅读器访问安全区域
    • 酷!这就说得通了。让我困惑的是操作的顺序。
    猜你喜欢
    • 1970-01-01
    • 2014-07-21
    • 1970-01-01
    • 2018-08-22
    • 1970-01-01
    • 2015-07-23
    • 1970-01-01
    • 1970-01-01
    • 2018-04-05
    相关资源
    最近更新 更多