SwiftUI教程之扩大选择区域contentShape解决点击不响应问题

如果您尝试向某个视图（例如图像）添加交互，则视图内容周围的透明或透明部分可能无法响应用户的交互，例如点击。您可以使用内容形状修改器添加响应用户交互的形状（例如圆形或矩形）

本文价值与收获

看完本文后，您将能够作出下面的界面

Jietu20200328-142020@2x.jpg

Jietu20200328-142043.gif

代码

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