SwiftUI中如何实现字谜游戏的单词高亮效果？

从你提到的modifier来看，假设你用的是SwiftUI，以下是落地的实现思路（如果是UIKit等其他框架，核心逻辑通用，仅样式/手势实现方式不同）：

核心逻辑 #

通过状态管理标记需高亮的单元格坐标，给对应单元格应用样式修改，配合交互手势完成选中/高亮流程。

1. 定义高亮状态容器 #

首先需要存储高亮位置的坐标，用一个可哈希的结构体表示网格位置，再用集合存储：

// 自定义网格位置结构体，实现Hashable才能存入Set
struct GridPosition: Hashable {
    let row: Int
    let col: Int
}

// 临时高亮（用户正在选择的字母）+ 永久高亮（已找到的单词）
@State private var tempHighlighted: Set<GridPosition> = []
@State private var foundHighlighted: Set<GridPosition> = []

2. 给单元格添加高亮样式 #

在每个显示字母的View上，根据是否在高亮集合中切换样式，常用的修改器：

• 背景色高亮（最直接）：

// 假设grid是你的字母二维数组，row/col是当前单元格的索引
Text(grid[row][col])
    .frame(width: 40, height: 40)
    .border(Color.gray)
    .background(
        // 已找到的单词用绿色，临时选中用黄色，默认透明
        foundHighlighted.contains(GridPosition(row: row, col: col)) ? Color.green :
        tempHighlighted.contains(GridPosition(row: row, col: col)) ? Color.yellow :
        Color.clear
    )

• 复杂高亮效果：如果需要边框+背景的组合，用.overlay()叠加半透明层：

.overlay(
    tempHighlighted.contains(pos) ? 
    RoundedRectangle(cornerRadius: 4)
        .stroke(Color.orange, lineWidth: 2)
        .background(Color.orange.opacity(0.2)) :
    nil
)

3. 处理用户交互（选中单词） #

根据你的交互方式（点击单字母/滑动连选）实现不同逻辑：

• 点击选择单个字母：给单元格加点击手势，切换临时高亮状态：

.onTapGesture {
    let pos = GridPosition(row: row, col: col)
    if tempHighlighted.contains(pos) {
        tempHighlighted.remove(pos)
    } else {
        tempHighlighted.insert(pos)
    }
}

• 滑动连选单词：给整个网格容器添加拖动手势，将手势坐标转换为网格索引：

.gesture(
    DragGesture(minimumDistance: 0)
        .onChanged { value in
            // 将手势的全局坐标转换为网格内的相对坐标
            let location = value.location
            // 根据网格的frame计算对应的row和col（需要提前获取网格的frame）
            let row = Int(location.y / cellSize)
            let col = Int(location.x / cellSize)
            let pos = GridPosition(row: row, col: col)
            tempHighlighted.insert(pos)
        }
        .onEnded { _ in
            // 手势结束后，验证选中的字母是否为有效单词
            if isValidWord(tempHighlighted) {
                foundHighlighted.formUnion(tempHighlighted)
            }
            tempHighlighted.removeAll()
        }
)

4. 验证单词并固化高亮 #

实现isValidWord函数，将临时选中的坐标对应的字母拼接成字符串，和预设的单词列表对比：

func isValidWord(_ positions: Set<GridPosition>) -> Bool {
    let letters = positions.sorted { /* 按单词顺序排序坐标，比如从左到右、从上到下 */ }
        .map { grid[$0.row][$0.col] }
        .joined()
    return presetWords.contains(letters)
}

关键工具总结 #

• SwiftUI中：用.background()/.overlay()做样式修改，.onTapGesture()/.gesture()处理交互，@State管理状态
• UIKit中：对应修改UIButton/UILabel的backgroundColor/layer属性，用UITapGestureRecognizer/UIPanGestureRecognizer处理交互，用属性存储高亮集合

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