标签: geometryreader

我有以下示例：

import SwiftUI

struct TestSO: View {

    @State var cards = [
        Card(title: "short title text", subtitle: "short title example"),
        Card(title: "medium title text text text text text", subtitle: "medium title example"),
        Card(title: "long title text text text text text text text text text text text text text text text text text",
         subtitle: "long title example"),
        Card(title: "medium title text text text text text", subtitle: "medium title example"),
        Card(title: "short title text", subtitle: "short title example"),
    ]

    @State var showDetails …

SwiftUI 有很多底部工作表的示例，但是它们都指定了使用 GeometryReader 工作表可以增长到的某种类型的最大高度。我想要的是创建一个底部工作表，其高度仅与其中的内容一样高。我使用首选项键提出了下面的解决方案，但必须有更好的解决方案。也许使用某种类型的动态滚动视图是解决方案？

struct ContentView: View{
    @State private var offset: CGFloat = 0
    @State private var size: CGSize = .zero

    var body: some View{
        ZStack(alignment:.bottom){
            VStack{
                Button(offset == 0 ? "Hide" : "Show"){
                    withAnimation(.linear(duration: 0.2)){
                        if offset == 0{
                            offset = size.height
                        } else {
                            offset = 0
                        }
                    }
                }
                .animation(nil)
                .padding()
                .font(.largeTitle)
                Spacer()
            }
            BottomView(offset: $offset, size: $size)
        }.edgesIgnoringSafeArea(.all)
    }
}

struct BottomView: View{
    @Binding var offset: CGFloat
    @Binding var size: CGSize

    var body: some View{
        VStack(spacing: …

我想在 VStack 之外使用 ScrollView，这样当 VStack 扩展超出屏幕尺寸时我的内容就可以滚动。现在我想GeometryReader在 VStack 中使用，它会导致问题，我只能通过设置 GeometryReader 框架来解决，考虑到我使用阅读器来定义视图大小，这并没有真正帮助我。

这是没有 ScrollView 的代码，它工作得很好：

struct MyExampleView: View {
  var body: some View {
    VStack {
        Text("Top Label")
            .background(Color.red)
        
        GeometryReader { reader in
            Text("Custom Sized Label")
                .frame(width: reader.size.width, height: reader.size.width * 0.5)
                .background(Color.green)
        }
        
        Text("Bottom Label")
            .background(Color.blue)
    }
    .background(Color.yellow)
  }
}

这会产生以下图像：

自定义尺寸的标签应为全宽，但高度为宽度的一半。现在，如果我将相同的代码包装在 ScrollView 中，就会发生这种情况：

不仅所有东西都变小了，而且自定义尺寸标签的高度也被忽略了。如果我设置 GeometryReader 的高度，我可以调整该行为，但我希望 GeometryReader 的大小与其内容一样大。我怎样才能实现这个目标？

谢谢

我正在尝试使用 SwiftUI 在我的应用程序中实现拖放功能。

我创建了两个圆圈，它们位于两个不同的HStacks. 它们不共享相同的坐标空间。

带有描边的圆圈是目标，绿色实心圆圈是要拖动的对象。

我能够使用GeometryReaderinside an来获得他们的绝对位置.overlay。我用它来检测当对象圆被拖动到目标圆上时它们是否重叠。这有效。

当它们不重叠时，对象圆将移回其原始位置。当它们重叠时，对象圆应该卡入目标圆的位置。这是我似乎有问题的地方。

我试图通过以下方式设置对象圆的新 X 和 Y 位置：对象圆本地位置 - 对象圆全局位置 + 目标圆全局位置。

    objectPosition = CGPoint(
        x: objectPosition.x - objectFrame.midX + targetFrame.midX,
        y: objectPosition.y - objectFrame.midY + targetFrame.midY
   )

我假设这会将我带到目标圆的坐标空间。但不知怎的，它不起作用。

到目前为止，我一直无法找到一种可靠且简单的方法来转换 SwiftUI 中的坐标空间。使用覆盖内部的解决方法GeometryReader至少给了我正确的全局位置。但我还没有找到一种方法来使用这些位置将视图放置在.global坐标空间中。

如果有人知道为什么我对坐标空间的计算是错误的，或者甚至知道一种更容易地相对于彼此转换和定位视图的方法，我将非常感激。

这是我的 SwiftUI 单视图 iOS 应用程序的代码：

import SwiftUI

struct ContentView: View {
    
    @State private var isDragging: Bool = false
    
    @State private var objectDragOffset: CGSize = .zero
    @State private var objectPosition: CGPoint = …

我有以下观点：

struct TestView: View {
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
                                
                    Text("TEST TEXT")
                
            }.background(Color.red)
        }
    }
    
}

呈现这个：

我希望 ZStack 中的视图居中，并且只有在删除 时才有效GeometryReader，如下所示：

struct TestView: View {
    
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
            
            Text("TEST TEXT")
            
        }.background(Color.red)
    }
    
}

呈现这个：

如何使用GeometryReaderZStack 并仍然使内容居中，如上面最后一个渲染图片所示？为什么 GeometryReader 会扰乱 ZStack 内容对齐？

这是一个简单的例子。您可以创建新的 SwiftUI iOS 项目并将其复制到 ContentView 文件。

import SwiftUI

struct Settings {
    static let onOff = "onOff"
}

struct ContentView: View {
    @AppStorage(wrappedValue: false, Settings.onOff) var onOff
    
    var body: some View {
        NavigationView {
            GeometryReader { reader in // < Comment out this line
                List {
                    Section (header:
                                VStack {
                                    HStack {
                                        Spacer()
                                        VStack {
                                            Text("THIS SHOULD BE FULL-WIDTH")
                                            Text("It is thanks to GeometryReader")
                                        }
                                        Spacer()
                                    }
                                    .padding()
                                    .background(Color.yellow)
                                    
                                    HStack {
                                        Text("This should update from AppStorage: ")
                                        Spacer()
                                        Text(onOff == true …

我正在尝试在 SwiftUI 中创建一个教程框架，它可以找到特定的视图并通过使屏幕的其余部分变暗来突出显示它。

例如：假设我有三个圆圈......

我想强调蓝色的......

这是我到目前为止所想到的。

• 创建一个 ZStack。
• 将半透明黑色背景放在上面。
• 将倒置蒙版添加到背景中以在其中打孔以显示蓝色圆圈。

这可行，但我需要蓝色圆圈的大小和位置，以便知道在哪里放置遮罩。

为了实现这一目标，我必须使用GeometryReader. 即：在蓝色圆圈的覆盖修改器内创建一个几何读取器并返回清晰的背景。这允许我检索视图的动态大小和位置。如果我只是将蓝色圆圈包裹在普通GeometryReader语句中，它将删除视图的动态大小和位置。

最后，我存储frame蓝色圆圈的 ，并使用它设置蒙版的frame和position，从而实现我想要的，在黑暗覆盖层中蓝色圆圈顶部的切口。

话虽如此，我收到了运行时错误“在视图更新期间修改状态，这将导致未定义的行为。”

而且方法似乎非常黑客和粘性。理想情况下，我想创建一个单独的框架，在其中可以定位视图，然后添加具有特定形状剪切的覆盖视图，以突出显示特定视图。

这是上面示例中的代码：

@State var blueFrame: CGRect = .zero

var body: some View {
    
    ZStack {
        VStack {
            Circle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
            
            ZStack {
                Circle()
                    .fill(Color.blue)
                    .frame(width: 100, height: 100)
                    .overlay {
                        GeometryReader { geometry -> Color in
                            
                            let geoFrame = geometry.frame(in: .global)
                            blueFrame = CGRect(x: geoFrame.origin.x + (geoFrame.width / 2),
                                                  y: geoFrame.origin.y …

红色边框是几何区域，黑色边框是文本区域

目前使用 Xcode12 Beta 3

struct Testing_Geometry_: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .border(Color.black)
        }
        .border(Color.red)
    }
}

我想使用此代码将文本置于中心位置

struct Testing_Geometry_: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .position(x:geo.frame(in:.global).midX,y:geo.frame(in:.global).midY)
                .border(Color.black)
        }
        .border(Color.red)
    }
}

但我得到了这个结果，这意味着 Text 占用了整个几何尺寸，我认为这是不正确的！因为文本必须适合它们的空间

@twostraws 为布局系统建议的三个角色是

1- 父母提供其大小

2-child 选择它的大小

3-parent 定位其孩子

但我认为这是不对的！

文字占据了整个几何空间

有没有办法在滚动视图内的 SwiftUI 中构建具有底部对齐的 UI 元素？

我的用例：我有一个屏幕，屏幕上有

1. 间隔符（分配以下元素后剩下的内容）
2. 标志视图
3. 间隔() - 30
4. 一些文本 - 4/5 行
5. Spacer() - 50（这将根据 GR 尺寸高度计算）
6. 带有两个按钮的 HStack - 这应该固定在视图/ScrollView 的底部

我想知道如何将 HStack 视图固定到 ScrollView 底部

我已经复制了我的设置并在 Swift 游乐场中重现了我的问题，如下所示

struct ContentView: View {
        var body: some View {
        GeometryReader { gr in
            ScrollView {
                VStack {
                    Spacer()
                    Image(systemName: "applelogo")
                        .resizable()
                        .frame(width: gr.size.width * 0.5, height: gr.size.height * 0.3, alignment: .center)
                    Spacer().padding(.bottom, gr.size.height * 0.01)
                    Text("SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT …

我找到了一种用 a和 a保存 ScrollViews偏移量的方法。GeometryReaderPreferenceKey

SwiftUI | 从 ScrollView 获取当前滚动位置

并且有一个滚动到设定位置ScrollViewReader的方法。scrollTo

ScrollView {
    ScrollViewReader { scrollView in
        LazyVGrid(columns: columns, spacing: 0) {
            ForEach(childObjects, id: \.id) { obj in
                CustomView(obj: obj).id(obj.id)
            }
        }
        .onChange(of: scrollTarget) { target in
            if let target = target {
                scrollTarget = nil
                scrollView.scrollTo(target, anchor: .center)
            }
        }
        .background(GeometryReader {
            Color.clear.preference(key: ViewOffsetKey.self,
                value: -$0.frame(in: .named("scroll")).origin.y)
        })
        .onPreferenceChange(ViewOffsetKey.self) { // …