watchOS开发：双击VStack后如何绑定Digital Crown调整指定数值

你需要配合watchOS提供的digitalCrownRotation修饰符、焦点状态管理两个核心能力实现需求，具体改动如下：

1. 首先在视图中新增两个状态变量，用于控制编辑开关和表冠操作的焦点绑定：

// 控制是否处于range编辑状态
@State private var isEditingRange = false
// 绑定range文本的焦点状态，只有获得焦点时表冠操作才会生效
@FocusState private var isRangeFocused: Bool

2. 修改双击手势逻辑，除了设置当前朝向，同时激活编辑状态、绑定焦点：

.onTapGesture(count: 2, perform: {
    waypointManager.bearing = locationManager.heading
    // 激活range编辑状态和焦点
    isEditingRange = true
    isRangeFocused = true
})

3. 给range对应的Text组件添加表冠绑定修饰符，直接关联waypointManager.range，同时配置数值范围、步长等参数，示例里假设range的有效范围是1~10000米，步长为1米：

Text("\(waypointManager.range)m" ).font(.system(size: 15))
    .focusable(true)
    .focused($isRangeFocused)
    // 表冠旋转绑定
    .digitalCrownRotation(
        $waypointManager.range,
        from: 1,
        through: 10000,
        by: 1,
        sensitivity: .medium,
        isContinuous: false,
        isHapticFeedbackEnabled: true
    )
    // 只有编辑状态下才显示高亮提示用户可编辑
    .opacity(isEditingRange ? 1 : 0.8)
    .border(isEditingRange ? .blue : .clear, width: 1)

4. 可选添加退出编辑逻辑，比如单击空白区域结束编辑：

// 给外层VStack加单击手势，退出编辑
.onTapGesture(count: 1, perform: {
    if isEditingRange {
        isEditingRange = false
        isRangeFocused = false
    }
})

修改后完整代码 #

struct WaypointPosition: View {
    @ObservedObject var waypointManager = WaypointManager()
    @ObservedObject var locationManager = LocationManager()
    // 新增状态变量
    @State private var isEditingRange = false
    @FocusState private var isRangeFocused: Bool
    
    var bearing: String {return ("\(waypointManager.bearing)" + "º") }
    var range:   String {return ("\(waypointManager.range)"  +  "m") }
    
    var body: some View {
        VStack {
            Text("\(waypointManager.position)").font(.system(size: 10))
            HStack {
                Text("\(waypointManager.bearing, specifier: "%3.0f")º" ).font(.system(size: 15))
                Spacer()
                Text("\(waypointManager.range)m" ).font(.system(size: 15))
                    .focusable(true)
                    .focused($isRangeFocused)
                    .digitalCrownRotation(
                        $waypointManager.range,
                        from: 1,
                        through: 10000,
                        by: 1,
                        sensitivity: .medium,
                        isContinuous: false,
                        isHapticFeedbackEnabled: true
                    )
                    .opacity(isEditingRange ? 1 : 0.8)
                    .border(isEditingRange ? .blue : .clear, width: 1)
            }
        }
        .onTapGesture(count: 2, perform: {
            waypointManager.bearing = locationManager.heading
            isEditingRange = true
            isRangeFocused = true
        })
        .onTapGesture(count: 1, perform: {
            if isEditingRange {
                isEditingRange = false
                isRangeFocused = false
            }
        })
    }
}

你可以根据实际需求调整digitalCrownRotation里的数值范围、步长、灵敏度参数，符合你的业务场景即可。

内容的提问来源于stack exchange，提问作者Jack.Russell