SwiftUI教程之扩大选择区域contentShape解决点击不响应问题
如果您尝试向某个视图(例如图像)添加交互,则视图内容周围的透明或透明部分可能无法响应用户的交互,例如点击。您可以使用内容形状修改器添加响应用户交互的形状(例如圆形或矩形)
本文价值与收获
看完本文后,您将能够作出下面的界面
代码
import SwiftUI
struct ContentShape_Solution: View {
@State private var likes = 0
var body: some View {
VStack(spacing: 20) {
Text("Content Shape").font(.largeTitle)
Text("Solution").foregroundColor(.gray)
Text("以使用内容形状修改器添加响应用户交互的形状(例如圆形或矩形)")
.frame(maxWidth: .infinity)
.padding().foregroundColor(.white)
.background(Color.pink)
VStack(spacing: 20) {
Image(systemName: likes > 0 ? "heart.fill" : "heart")
.foregroundColor(likes > 0 ? .red : .gray)
.frame(width: 100, height: 100)
Text("Hit me! (Likes: \(likes))")
}
.padding()
.background(RoundedRectangle(cornerRadius: 20).stroke(Color.red, lineWidth: 1))
.contentShape(RoundedRectangle(cornerRadius: 20))
.onTapGesture {
self.likes = self.likes + 1
}
}
.font(.title)
}
}
技术交流
QQ:3365059189
SwiftUI技术交流QQ群:518696470
- 请关注我的专栏icloudend, SwiftUI教程与源码
https://www.jianshu.com/c/7b3e3b671970