我是Qt / QML的新手，并尝试创建一个带有标签和图标的自定义按钮。我想将字体更改为粗体，并将颜色更改为某些明亮值，因为按钮背景较暗。问题是，只要我定义label: Text，图标就会消失。如何重新定义标签并保留图标？
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
Item
{
property alias text: btn.text;
property alias iconSource: btn.iconSource;
Button
{
id: btn;
style: ButtonStyle
{
background: Rectangle
{
implicitWidth: 100;
implicitHeight: 25;
border.width: (control.activeFocus ? 2 : 1);
border.color: "#888";
radius: 8;
gradient: Gradient
{
GradientStop
{
position: 0;
color: (control.pressed ? "#929292" : "#424242")
}
GradientStop
{
position: 1;
color: (control.pressed ? "#818181" : "#313131")
}
}
}
label: Text
{
text: control.text;
// iconSource: btn.iconSource;
font.bold: true;
color: "#f2f2f2"
}
}
}
}
答案 0 :(得分：0)
您必须通过复制和修改默认的内置样式来修改ButtonStyle：
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the Qt Quick Controls module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
** of its contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Private 1.0
/*!
\qmltype ButtonStyle
\inqmlmodule QtQuick.Controls.Styles
\since 5.1
\ingroup controlsstyling
\brief Provides custom styling for Button
You can create a custom button by replacing the "background" delegate
of the ButtonStyle with a custom design.
Example:
\qml
Button {
text: "A 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" }
}
}
}
}
\endqml
If you need a custom label, you can replace the label item.
*/
Style {
id: buttonstyle
/*! The \l {QtQuick.Controls::}{Button} this style is attached to. */
readonly property Button control: __control
/*! The padding between the background and the label components. */
padding {
top: 4
left: 4
right: 4 + (control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 0)
bottom: 4
}
/*! This defines the background of the button. */
property Component background: Item {
property bool down: control.pressed || (control.checkable && control.checked)
implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
Rectangle {
anchors.fill: parent
anchors.bottomMargin: down ? 0 : -1
color: "#10000000"
radius: baserect.radius
}
Rectangle {
id: baserect
gradient: Gradient {
GradientStop {color: down ? "#aaa" : "#fefefe" ; position: 0}
GradientStop {color: down ? "#ccc" : "#e3e3e3" ; position: down ? 0.1: 1}
}
radius: TextSingleton.implicitHeight * 0.16
anchors.fill: parent
border.color: control.activeFocus ? "#47b" : "#999"
Rectangle {
anchors.fill: parent
radius: parent.radius
color: control.activeFocus ? "#47b" : "white"
opacity: control.hovered || control.activeFocus ? 0.1 : 0
Behavior on opacity {NumberAnimation{ duration: 100 }}
}
}
Image {
id: imageItem
visible: control.menu !== null
source: "images/arrow-down.png"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 4
opacity: control.enabled ? 0.6 : 0.5
}
}
/*! This defines the label of the button. */
property Component label: Item {
implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight
baselineOffset: row.y + text.y + text.baselineOffset
Row {
id: row
anchors.centerIn: parent
spacing: 2
Image {
source: control.iconSource
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: text
renderType: Settings.isMobile ? Text.QtRendering : Text.NativeRendering
anchors.verticalCenter: parent.verticalCenter
text: StyleHelpers.stylizeMnemonics(control.text)
color: SystemPaletteSingleton.buttonText(control.enabled)
}
}
}
/*! \internal */
property Component panel: Item {
anchors.fill: parent
implicitWidth: Math.max(labelLoader.implicitWidth + padding.left + padding.right, backgroundLoader.implicitWidth)
implicitHeight: Math.max(labelLoader.implicitHeight + padding.top + padding.bottom, backgroundLoader.implicitHeight)
baselineOffset: labelLoader.item ? padding.top + labelLoader.item.baselineOffset : 0
Loader {
id: backgroundLoader
anchors.fill: parent
sourceComponent: background
}
Loader {
id: labelLoader
sourceComponent: label
anchors.fill: parent
anchors.leftMargin: padding.left
anchors.topMargin: padding.top
anchors.rightMargin: padding.right
anchors.bottomMargin: padding.bottom
}
}
}
有点烦吗？此外，如果你不复制所有文本的对齐方式都不正确。
但是，如果您只想改变文本的颜色和粗体，那么有一种更简单的方式：
Button {
text: "<font color=\"red\"><b>Hello</b></font>"
}