SwiftUI：如何实现支持两种交互的多色多功能文本区域？

需求说明 #

• 点击「15 minutes」文本弹出TimePicker，点击「weekday」文本弹出对应视图
• 点击「on」与「each」之间的文本区域，可输入自定义内容，原文本「answering questions on stackoverflow」作为占位符

当前实现代码 #

已通过Text组合实现多色样式，但无法添加交互：

Group {
    Text("I would like to spend ")
        .foregroundColor(.primary) +
    Text("15 minutes")
        .foregroundColor(.pink)
        .underline() +
    Text(" on ")
        .foregroundColor(.primary) +
    Text("answering questions on stackoverflow")
        .foregroundColor(.teal)
        .underline() +
    Text(" each ")
        .foregroundColor(.primary) +
    Text("weekday")
        .foregroundColor(.green)
        .underline()
}

核心问题 #

能否通过Markdown实现上述交互需求？

解答 #

明确说：SwiftUI的Markdown文本没法直接实现点击交互或文本输入功能。Markdown在SwiftUI里只能用来渲染样式（比如加粗、斜体、链接样式），没办法绑定自定义的点击弹出、文本输入这类交互逻辑。

要实现你要的效果，推荐两种实用方案：

方案一：用HStack拆分独立可交互组件 #

把每个需要交互的部分拆成独立的按钮或输入框，用HStack组合保持行内排版，这样既保留样式又能加交互：

// 先定义视图需要的状态变量
@State private var showTimePicker = false
@State private var showWeekdayView = false
@State private var customTaskContent = ""

// 界面布局
HStack(spacing: 2) {
    Text("I would like to spend ")
        .foregroundColor(.primary)
    
    // 可点击的时间文本，点击弹出TimePicker
    Button(action: {
        showTimePicker = true
    }) {
        Text("15 minutes")
            .foregroundColor(.pink)
            .underline()
    }
    .sheet(isPresented: $showTimePicker) {
        // 这里放你的TimePicker实现
        TimePicker(selectedTime: /* 绑定你的时间变量 */)
    }
    
    Text(" on ")
        .foregroundColor(.primary)
    
    // 可输入的文本区域，用TextField模拟占位符
    TextField("answering questions on stackoverflow", text: $customTaskContent)
        .foregroundColor(.teal)
        .underline()
        .frame(minWidth: 180) // 限制最小宽度，避免布局错乱
    
    Text(" each ")
        .foregroundColor(.primary)
    
    // 可点击的周期文本，点击弹出对应视图
    Button(action: {
        showWeekdayView = true
    }) {
        Text("weekday")
            .foregroundColor(.green)
            .underline()
    }
    .sheet(isPresented: $showWeekdayView) {
        // 这里放你的weekday选择视图
        WeekdaySelectionView(selectedDay: /* 绑定你的周期变量 */)
    }
}

方案二：用UITextView桥接实现复杂富文本交互 #

如果需要更原生的混合富文本（既有可点击文本又有可编辑区域），可以用UIKit的UITextView通过UIViewRepresentable桥接到SwiftUI，给特定文本范围添加点击手势，同时支持编辑指定区域。但这种方案代码量较大，适合复杂场景，一般方案一就足够满足需求了。

内容的提问来源于stack exchange，提问作者Pete Streem