QML 自定义button样式1

最新推荐文章于 2025-07-08 10:27:14 发布

原创最新推荐文章于 2025-07-08 10:27:14 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qml #自定义 #button

QML 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在QML中自定义button样式，包括默认状态和点击效果。提供了动态图展示（查看链接），并给出了使用示例及源码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QML 自定义button样式1

此博客始创于：http://blog.youkuaiyun.com/lys211

转载请注明出处

自己写的小按键，默认状态是：

点击一下：

动态图：

(好像也不能动态显示....)

动态图请跳转到以下地址浏览：

http://www.qtcn.org/bbs/read-htm-tid-58622.html

使用时可以这样：

FenceButton{
  id:fenceBotton;
  x:5;
  initX:5;
  anchors.left: parent.left;
  anchors.verticalCenter: parent.verticalCenter;
  lineColor: root.lineColor;
  lineState:  "default";
  easyBorderWidth: root.easyBorderWidth;
  easyHeight:root.easyHeight;
  height: parent.height;
  onClicked: {
    console.log("FenceButton onClicked")
    if(lineState === "default"){
      lineState = "extend";
    }
    else{
      lineState = "default"
    }
  }
}

改改就能用.

这个按键对应的源码下载地址是：

http://download.youkuaiyun.com/detail/lys211/8544281