如何在SwiftUI中创建行内按钮？实现按钮与文本同行布局

你想要的文本和按钮同行布局，SwiftUI不支持直接用+运算符拼接Text和Button，可以用以下几种方式实现：

方法一：使用HStack（基础通用写法） #

这是最直接的方式，将文本和按钮放在HStack中，通过调整间距和对齐方式达到同行效果：

struct ContentView: View {
    var body: some View {
        VStack {
            HStack(spacing: 4) {
                Text("You can in")
                Button("Next Page") {
                    // 按钮点击逻辑
                }
                Text("see more")
            }
        }
    }
}

可以通过修改HStack的spacing参数调整元素间距离，也可以给Button添加样式匹配文本风格，比如去掉默认按钮样式：

Button("Next Page") {
    // 点击逻辑
}
.buttonStyle(.plain) // 使用纯文本按钮样式，和普通文本视觉统一

方法二：使用AttributedString实现行内可点击文本（iOS 15+） #

如果希望按钮看起来和文本完全融为一体，可借助AttributedString添加交互：

struct ContentView: View {
    @State private var attributedText: AttributedString = {
        var attrString = AttributedString("You can in Next Page see more")
        if let range = attrString.range(of: "Next Page") {
            attrString[range].foregroundColor = .blue
            attrString[range].underlineStyle = .single
            // 添加点击交互
            attrString[range].link = URL(string: "internal://nextpage")!
        }
        return attrString
    }()
    
    var body: some View {
        VStack {
            Text(attributedText)
                .environment(\.openURL) { url in
                    if url == URL(string: "internal://nextpage") {
                        // 处理点击逻辑
                        return true
                    }
                    return false
                }
        }
    }
}

这种方式的视觉效果更接近"行内按钮"，但需要通过自定义URL来处理交互逻辑。

方法三：使用InlineContent（iOS 16+） #

iOS 16及以上版本，Text支持通过append方法添加自定义视图，实现行内嵌入按钮：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("You can in ")
                .append {
                    Button("Next Page") {
                        // 点击逻辑
                    }
                    .buttonStyle(.plain)
                }
                .append(Text(" see more"))
        }
    }
}

这种写法最接近你最初想要的"拼接"风格，不过仅支持iOS 16及更高版本。

内容的提问来源于stack exchange，提问作者闪电狮