1

我已经看到了一些类似的例子，例如如何在 SwiftUI 中正确设置可调整的拆分视图？以及如何通过从边缘拖动来调整 UIView 的大小？但我找不到与 SwiftUI 正确相关的确切内容

我有一个视图，我希望用户能够通过视图右侧的“抓取栏”调整宽度。当用户向左（减小视图宽度）和向右（增加视图宽度）拖动此栏时。我该怎么做呢？

在示例中，RedRectangle我认为我正在尝试调整由 a 组成的Rectangle以及Resizer被操纵来调整大小的。我在这里做错了什么？

此外，没有逐渐增加/减少帧的动画/过渡，它似乎只是跳跃。我怎样才能做到这一点？

此处链接的可重现示例：

import SwiftUI

struct ContentView: View {
    @State var resizedWidth: CGFloat?

    var body: some View {
        HStack(alignment: .center) {
            Spacer()
            RedRectangle(width: 175, resizedWidth: resizedWidth)
            Resizer()
                .gesture(
                    DragGesture()
                        .onChanged({ value in
                            resizedWidth = max(80, resizedWidth ?? 0 + value.translation.width)
                        })
                )
            Spacer()
        }
    }
}

struct RedRectangle: View {
    let width: CGFloat
    var resizedWidth: CGFloat?

    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(width: resizedWidth != nil ? resizedWidth : width, height: 300)
            .frame(minWidth: 80, maxWidth: 400)
    }
}

struct Resizer: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 8, height: 75)
            .cornerRadius(10)
    }
}
4

1 回答 1

0 
import SwiftUI

struct ContentView: View {
    let minWidth: CGFloat = 100
    @State var width: CGFloat?

    var body: some View {
        HStack(alignment: .center) {
            Spacer()
            RedRectangle(width: width ?? minWidth)
            Resizer()
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            width = max(minWidth, width! + value.translation.width)
                        }
                )
            Spacer()
        }
        .onAppear {
            width = minWidth
        }
    }
}

struct RedRectangle: View {
    let width: CGFloat

    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(width: width, height: 100)
    }
}

struct Resizer: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 8, height: 75)
            .cornerRadius(10)
    }
}
于 2022-01-17T06:23:37.817 回答