[QML] QML按钮控件解析

1. 普通按钮 (Button)核心作用最基础的交互控件用于触发即时操作。关键属性text: 按钮显示的文字。icon.source: 图标路径支持本地路径或qrc:资源路径。display:图文排版方式。AbstractButton.TextUnderIcon: 文字在图标下方常用。AbstractButton.TextBesideIcon: 文字在图标右侧。AbstractButton.IconOnly: 只显示图标常用于工具栏。anchors.centerIn: parent: 常用布局将按钮居中。核心信号生命周期理解点击的顺序非常重要onPressed: 鼠标按下瞬间触发常用于播放按下音效。onReleased: 鼠标松开瞬间触发。onClicked:一次有效点击按下且在范围内松开。onPressAndHold:长按按住不动超过一定时间。onCanceled:操作取消按下后鼠标移出了按钮区域才松开。避坑如果你的图标不显示通常有两个原因路径写错了比如qrc:/image/touxiang.png文件不存在。没有设置display属性导致图标和文字挤在一起或者被覆盖。import QtQuick import QtQuick.Controls Window { width: 640 height: 480 visible: true title: qsTr(Hello World) Button { width:120 height: 40 text: Button anchors.centerIn: parent display: AbstractButton.TextUnderIcon icon.source: qrc:/image/touxiang.png onClicked: console.log(鼠标按下了) // 鼠标按下在button区域内 取消一次才算一次点击,在button区域外取消 只会触发取消事件 onCanceled: console.log(鼠标取消) onPressed: console.log(按住了); onPressAndHold: console.log(按住不动) } }2. 延时按钮 (DelayButton)核心作用防止误触。用户必须长按一定时间操作才会生效类似手机关机键。关键属性delay:延时时长单位是毫秒例如2000代表 2 秒。progress:只读属性0.0 到 1.0。表示当前的进度。0.0 刚开始按1.0 进度满了即将触发核心信号onProgressChanged: 进度发生变化时触发。可以用来做自定义的进度条动画。onActivated:激活信号。只有当进度条跑满长按时间足够后才会触发这个信号。实战技巧DelayButton默认是透明的如果你运行代码发现“点不动”或者“看不见”是因为它没有背景色。你需要给它设置background: Rectangle { ... }或者给它加个边框否则它就像隐形人一样。import QtQuick import QtQuick.Controls Window { width: 640 height: 480 visible: true title: qsTr(Hello World) // 延时按钮 DelayButton { id:delayBtn width: 100 height: 30 delay: 200 text: 长按我 onActivated: { console.log(time out) } onProgressChanged: { console.log(当前进度 progress) } } }3. 开关 (Switch)核心作用类似于电灯开关用于“开/关”两种状态的切换。关键属性checked:状态值布尔值。true为开false为关。text: 开关旁边的文字。position:逻辑位置0.0 到 1.0。0.0 代表“关”的位置。1.0 代表“开”的位置。注意这个值通常是动画过程中的中间值。visualPosition:视觉位置。与position类似但更侧重于当前的视觉渲染状态。核心信号onCheckedChanged: 状态改变时触发最常用。onToggled: 只有用户手动点击导致状态改变时才触发代码修改checked不会触发它。import QtQuick import QtQuick.Controls Window { width: 640 height: 480 visible: true title: qsTr(Hello World) // 开关按钮 Switch { x:200 width: 100 height: 30 checked: true onPositionChanged: { console.log(position) } onVisualPositionChanged: { console.log(visualPosition) } } }4.单选按钮 (RadioButton) 与 分组核心作用在一组选项中或者说同一个父控件下的RadioButton只能选择一个。关键属性checked: 是否被选中。text: 选项文字。分组机制非常重要单选按钮必须“分组”才能实现互斥选A自动取消B。QML 提供了两种分组方式方式一使用 ButtonGroup推荐逻辑清晰这是最正规的做法。创建一个看不见的ButtonGroup对象把按钮“扔”进去。ButtonGroup { id: myGroup } RadioButton { ButtonGroup.group: myGroup } RadioButton { ButtonGroup.group: myGroup }优点按钮在界面上可以随便摆放不需要有共同的父控件逻辑分组与视觉布局解耦。方式二使用 Item 包裹隐式分组利用 QML 的父子层级关系。同一个父控件下的RadioButton会自动互斥。Item { RadioButton { } RadioButton { } }优点代码少不用定义ButtonGroup。缺点布局受限。如果这两个按钮分别在不同的窗口位置你就没法用这种方法了。