本系列教程对应的代码已开源在 Github zeedle
本篇文章介绍Slint UI如何为播放器页面添加按键绑定，核心思路是当窗口聚焦时，扫描用户按键输入，命中指定按键时，自动调用相关回调函数。Slint UI支持FocusScope来处理上述逻辑：
export component MainWindow inherits Window {
...
forward-focus: key-input-handler;
...
key-input-handler := FocusScope {
key-released(event) => {
if event.text == Key.Space {
root.toggle_play();
return accept;
} else if event.text == Key.RightArrow || event.text == Key.DownArrow {
root.play_next();
return accept;
} else if event.text == Key.LeftArrow || event.text == Key.UpArrow {
root.play_prev();
return accept;
} else if event.text == Key.F1 {
tabs.current-index = 0;
return accept;
} else if event.text == Key.F2 {
tabs.current-index = 1;
return accept;
} else if event.text == Key.F3 {
tabs.current-index = 2;
return accept;
} else if event.text == Key.F4 {
tabs.current-index = 3;
return accept;
}
return reject;
}
}
}
代码解释
上述代码指定了，当某个按键按下时，所触发的操作：
- 空格键：播放/暂停当前歌曲
- 上键头/左键头：上一首歌曲
- 下箭头。右箭头：下一首歌曲
F1：切换到音乐列表页F2：切换到歌词页F3：切换到设置页F4：切换到关于页
