本系列教程对应的代码已开源在 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：切换到关于页