4

我正在尝试使用 SwiftUI 在另一个按钮内插入一个按钮。但是,如果我按下该按钮,它也会为按下的外部按钮设置动画,即使它没有运行动作闭包。有没有办法防止这种情况,也许使用自定义 ButtonStyle?

这是它的样子:

按钮

这是按下内部按钮时的样子:

按下按钮

这是我的代码:

var body: some View {
    Button(action: {
        print("outer button pressed")
    }) {
        HStack {
            Text("Button")
            Spacer()
            Button(action: {
                print("inner button pressed")
            }) {
                Circle()
                    .foregroundColor(Color.accentColor.opacity(0.2))
                    .frame(width: 28.0, height: 28.0)
                    .overlay(Image(systemName: "ellipsis"))
            }
        }
        .padding()
        .accentColor(.white)
        .background(Color.accentColor)
        .clipShape(RoundedRectangle(cornerRadius: 14.0, style: .continuous))
    }
    .frame(maxWidth: 200.0)
    .padding()
}
4

2 回答 2

1

在 ZStack 中使用 2 个不同的按钮怎么样?

var body: some View {
        
        ZStack(alignment: .trailing) {
            
            Button(action: {
                print("outer button pressed")
            }) {
                HStack {
                    Text("Button")
                    Spacer()
                }
                .padding()
                .accentColor(.white)
                .background(Color.accentColor)
                .clipShape(RoundedRectangle(cornerRadius: 14.0, style: .continuous))
            }
            .frame(maxWidth: 200.0)
            .padding()

            Button(action: {
                print("inner button pressed")
            }) {
                Circle()
                    .foregroundColor(Color.accentColor.opacity(0.2))
                    .frame(width: 28.0, height: 28.0)
                    .overlay(Image(systemName: "ellipsis"))
                .padding()
                .accentColor(.white)
                .clipShape(RoundedRectangle(cornerRadius: 14.0, style: .continuous))
            }
            .padding()

        }
    }
于 2020-10-12T07:27:40.797 回答
0

可能有更优雅的解决方案,但以下代码应该为您提供所需的行为:

struct ContentView: View {
    @State private var innerButtonDidTap = false
    @State private var outerButtonDidTap = false
   
    var body: some View {
        HStack {
            Text("Button")

            Spacer()

            Circle()
                .onTapGesture {
                    print("inner button tapped")
                    innerButtonDidTap.toggle()
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                        innerButtonDidTap.toggle()
                    }
                }
                .foregroundColor(Color.accentColor.opacity(innerButtonDidTap ? 1.0 : 0.2))
                .frame(width: 28.0, height: 28.0)
                .overlay(Image(systemName: "ellipsis"))
            
        }
        .contentShape(Rectangle())
        .onTapGesture {
            print("outer button tapped")
            outerButtonDidTap.toggle()
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                outerButtonDidTap.toggle()
            }
        }
        .frame(maxWidth: 200)
        .padding()
        .accentColor(.white)
        .foregroundColor(.white)
        .background(Color.accentColor.opacity(outerButtonDidTap ? 0.2 : 1))
        .animation(Animation.linear(duration: 0.1))
        .clipShape(RoundedRectangle(cornerRadius: 14.0, style: .continuous))
    }
}

因此,我将 aHStack和 aCircle与两个onTapGesture修饰符结合使用,而不是两个按钮。

于 2020-10-11T09:29:30.683 回答