swiftui - 如何在 SwiftUI 中的文本末尾添加按钮？

Question

我想在 Game Center Settings 中创建一个类似于 Apple 的 UI，其中文本末尾有一个可点击的链接:

我正在使用 SwiftUI。我试图结合 Text和 Button在几个方面:

Form {
    Text("A social gaming service that lets you interact with friends, track and compare scores and achievements, challenge other players, and compete in mulitplayer games.")
    Button("See how your data is managed...", action: {})

    Button(action: {}, label: {
        Text("A social gaming service that lets you interact with friends, track and compare scores and achievements, challenge other players, and compete in mulitplayer games.").foregroundColor(.black)
        Text("See how your data is managed...")
    })

    Group {
        Text("A social gaming service that lets you interact with friends, track and compare scores and achievements, challenge other players, and compete in mulitplayer games.")
        Button("See how your data is managed...", action: {})
    }

    HStack {
        Text("A social gaming service that lets you interact with friends, track and compare scores and achievements, challenge other players, and compete in mulitplayer games.")
        Button("See how your data is managed...", action: {})
    }
}

但是这些组合都不起作用:

理想情况下，我想避免 using an NSAttributedString ，因为我想使用 SwiftUI 组件，并且只希望蓝色部分是可点击的。

如何附加 Button至 Text以便它的文本与文本的基线对齐？

Answer 1

这种类型的布局不太可能很快在 SwiftUI 中可用。主要的复杂性来自于 Button text 必须有一些关于(A)Text 框架的知识块(例如，知道在哪里放置溢出的内容，如原始示例中的“数据”一词)，(B)对齐 Button Text 的第一个基线的最后一个基线，和 (C) 对齐 Button的前沿到 Text 的确切末端在最后一行(例如，它不能只是在框架的右侧，否则您将获得 HStack 行为)。

一种解决方法是遵循垂直放置组件的不同模式(即 Safari 设置中的模式):

这是在 SwiftUI 中更容易实现的布局:

Section(footer:
    VStack(alignment: .leading) {
        Text("Allow websites to check if Apple Pay is enabled and if you have an Apple Card account.")
        Button("About Safari & Privacy...", action: {})
}) {
    EmptyView()
}