SwiftUI:增加用户交互的点击/拖动区域

dvtswwa3  于 2022-10-31  发布在  Swift
关注(0)|答案(4)|浏览(250)

我已经在SwiftUI中构建了一个自定义滑块,滑块拖动器为20x20。一切都正常,除了点击目标很小,因为它只是20x20视图。我正在寻找一种方法来增加它,使用户更容易与我的滑块交互。有没有办法在SwiftUI中做到这一点?
我试着用Color.clear.overlay包裹我的拇指,并将框架设置为60x60。如果颜色是纯色,如red,这是有效的,但使用clear时,点击目标似乎恢复为20x20的可见像素。
你可以看到在这个gif我能够拖动滑块,甚至当点击外面的拇指。

但是,只要我将颜色更改为clear,该区域就不再接收交互。

axkjgtzd

axkjgtzd1#

frame之后添加一个.contentShape(Rectangle())

oogrdqng

oogrdqng2#

我相信有几种方法可以实现这一点,但这就是我如何做了一个大按钮与整个区域可点击:

Button(action: { someAction() }, label: {
                Text("OK")
                .frame(minWidth: 200)
                .contentShape(Rectangle())
                .padding()
            })
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(5.0)
3pvhb19x

3pvhb19x3#

我也遇到过同样的问题。只是我不想扩展的覆盖层影响布局的其余部分。如果你把所有东西都嵌入到ZStack中,并在交互对象前放一个矩形,你就可以控制手势的大小。有点像这样:

Rectangle().frame(width: screen.width, height: 300).opacity(0.001)
                    .layoutPriority(-1)

只需要确保将不透明度设置为接近零,这样你就看不到它,并将布局优先级设置为-1,这样它就不会影响视图。

balp4ylt

balp4ylt4#

作为上述答案的后续行动,您可以使用这个作为例子放大可点击矩形一整天.

ZStack {
    Image(systemName: secured ? "eye.slash" : "eye")
        .resizable()
        .renderingMode(.template)
        .aspectRatio(contentMode: .fit)
        .frame(width: 16, height: 16)

    Rectangle()
        .frame(width: 22, height: 20)
        .opacity(0.001)
        .onTapGesture {
            self.secured.toggle()
        }
}

相关问题