本系列教程对应的代码已开源在 Github zeedle
本篇文章介绍Slint UI如何为播放器页面添加按键绑定,核心思路是当窗口聚焦时,扫描用户按键输入,命中指定按键时,自动调用相关回调函数 。Slint UI支持FocusScope
来处理上述逻辑:
slint
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
:切换到关于页