Qml 样式按钮

Posted 2023-02-16

【中文标题】Qml 样式按钮

【英文标题】：Qml style Button

【发布时间】：2018-04-21 20:19:58

【问题描述】：

我的页面有结构，我想为我的按钮添加一些ButtonStyle（我按照文档中的示例），现在我有一个问题，为什么我不能为这个按钮添加style。下面是我的页面结构

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
Page

...
header: ToolBar 
    ...
    RowLayout
        Button 
        ...
        style: ButtonStyle 
            background: Rectangle 
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient 
                GradientStop  position: 0 ; color: control.pressed ? "#ccc" : "#eee" 
                GradientStop  position: 1 ; color: control.pressed ? "#aaa" : "#ccc" 
                
            
        
        
    

【参考方案1】：

您选择了 QtQuick Controls 2 Button (import QtQuick.Controls 2.0)，可以直接使用 background 进行样式设置（即不需要 QtQuick.Controls.Styles）...Customizing Qt Quick Controls 2。另一方面，如果您想使用QtQuick.Controls 1.x 按钮，则需要将导入更改为import QtQuick.Controls 1.4 以及QtQuick.Controls.Styles 1.4，您的样式将起作用...Qt Quick Controls Styles。

使用 QtQuick Controls 2，您可以直接使用 background 设置 Button 的样式，如下所示：

Button 
    id:control
    background: Rectangle 
        implicitWidth: 100
        implicitHeight: 25
        border.width: control.activeFocus ? 2 : 1
        border.color: "#888"
        radius: 4
        gradient: Gradient 
            GradientStop  position: 0 ; color: control.pressed ? "#ccc" : "#eee" 
            GradientStop  position: 1 ; color: control.pressed ? "#aaa" : "#ccc"