SwiftUI中一个按钮内嵌另一个按钮

Question

如何使内部的按钮执行其操作，而不是始终执行外部的按钮？

struct Foo: View {
    var body: some View {
        Button(action: { print("alloha") }) {
            HStack {
                Button(action: { print("hello") }) {
                    Image(systemName: "circle.fill")
                }
                Text("world")
                Spacer()
            }
        }
    }
}

- Ivan

---

尝试将外部视图用作View并放置tap，如果您不需要对外部/父按钮进行任何效果，则可以这样做。有了这个，内部按钮将正常工作，当您点击外部视图时，您将获得操作。 - Sumeet Mourya

如果我只添加轻触，那么对于用户来说，外部视图对触摸的反应就不够明显了。 - Ivan

你也可以使用.overlay将较小的按钮放在顶部。 - TruMan1

TruMan1的方法是正确的，可以为每个按钮实现正确的UI效果。将一个按钮叠加在另一个按钮上方，它就会起作用。 - smat88dd

Answer 1

它可以工作，只需为内部按钮留足够的空间，这样命中测试就可以指定要激活哪个按钮，就像下面的例子一样。(在Xcode 11.4 / iOS 13.4中进行了测试)

struct Foo: View {
    var body: some View {
        Button(action: { print("alloha") }) {
            HStack {
                Button(action: { print("hello") }) {
                    Image(systemName: "circle.fill").padding() // << more space !!
                        .border(Color.red) // << for testing
                }
                Text("world")
                Spacer()
            }
        }
    }
}

- Asperi

---

不，它不行。我使用了建议的44点固定框架来制作图标。这段特定的代码是用于简化的。在生产级应用程序中，如果外部视图是一个单元格，而内部是一个类似的图标，则它将无法正常工作。 - Ivan

你好，@Asperi 当内部按钮被按下时，是否有一种方法可以禁用外部按钮的按下状态？ - Balázs Papp

@BalázsPapp 你可以使用 ZStack 来分层每个按钮。 - Yotzin Castrejon

Answer 2

我很好奇为什么你要在一个按钮里面添加另一个按钮？我可以像下面这样在 HStack 中使用两个按钮。当用户点击每个按钮时，这将是显而易见的。

HStack {
    Button(action: { print("hello") }) {
        Image(systemName: "circle.fill")
    }

    Button(action: {
        print("World")
    }) {
        Text("World")
    }
}

- padam thapa

---

因为产品所有者不了解用户体验。 - Ivan

@Ivan，上述的视图结构对你有用吗？根据你的问题，上述的替代方案比按钮内部的按钮更为优雅。否则，你需要告诉我们你在生产中使用的确切视图结构，因为你提到你的问题示例只是一个简化版本。 - padam thapa