当前位置：首页 > news >正文

QML学习06Button

news 来源：原创 2025/5/26 6:57:20

QMLx学习06Button

1、Button
- 1.1 状态改变（checkable）
- 1.2 排斥性（autoExclusive）
- 1.3 重复触发（autoRepeat）、第一次触发延时时间（autoRepeatDelay）、相互之间触发的时间间隔（autoRepeatInterval）
- 1.4 鼠标按下（onDownChanged）
- 1.5 改变按钮背景颜色和边框颜色（background: Rectangle、border.color）
2、总结

1、Button

1.1 状态改变（checkable）

    Button {id:btnwidth:50height:50//checkable: true         //按钮被选中状态checkable: falseonCheckableChanged: {console.log("changed",checkable)}onClicked: {btn.checkable = !btn.checkable      //可以强制改变checkable状态}

1.2 排斥性（autoExclusive）

Button {id:btnwidth: 50height: 50autoExclusive: true   //排斥性，只有一个按钮能被checkablecheckable: true
}Button {id:btn1width: 50height: 50x:60autoExclusive: truecheckable: true
}Button {id:btn2width: 50height: 50x:120autoExclusive: truecheckable: true
}

1.3 重复触发（autoRepeat）、第一次触发延时时间（autoRepeatDelay）、相互之间触发的时间间隔（autoRepeatInterval）

Button{id:btnwidth: 50height: 50autoRepeat: true            //重复触发autoRepeatDelay: 2000       //第一次触发延时时间autoRepeatInterval: 1000    //相互之间触发的时间间隔onClicked: {console.log("clicked")}onPressed: {console.log("pressed")}onReleased: {console.log("released");}
}

1.4 鼠标按下（onDownChanged）

Button{id:btnwidth: 50height: 50autoRepeat: true            //重复触发autoRepeatDelay: 2000       //第一次触发延时时间autoRepeatInterval: 1000    //相互之间触发的时间间隔checkable: trueonDownChanged: {console.log("down:",down,"pressed",pressed)         //鼠标按下}}

1.5 改变按钮背景颜色和边框颜色（background: Rectangle、border.color）

Button{id:btnwidth: 50height: 50autoRepeat: truebackground: Rectangle{anchors.fill: btncolor: {if(btn.pressed){return "green"}else{return "blue"}}border.width: 5border.color: {if(btn.pressed){return "red"}else{return "black"}}}
}