如何将样式应用于 QML 中的 TextField? "style" 属性似乎不可用
How do I apply the style to a TextField in QML? It seems "style" attribute isn't available
我正在尝试将一些样式应用于我正在处理的新 qt 5.7 应用程序,但以下内容根本不起作用。它给出了错误:
qrc:/SignInView.qml:67 无法分配给不存在的 属性 "style"
出于同样的原因,我无法在设计模式下编辑它。
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
Page {
id: page1
ColumnLayout {
id: columnLayout1
height: 100
anchors.right: parent.right
anchors.left: parent.left
anchors.top: parent.top
Label {
text: qsTr("Label")
font.pointSize: 16
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
}
Image {
id: image1
width: 200
height: 200
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent
source: "qrc:/qtquickplugin/images/template_image.png"
Button {
id: button1
text: qsTr("Button")
anchors.bottomMargin: 10
anchors.rightMargin: 10
anchors.bottom: parent.bottom
anchors.right: parent.right
}
}
Rectangle {
id: field1
width: 200
height: 40
color: "#ffffff"
Layout.fillWidth: true
Label {
id: label1
text: qsTr("Full Name")
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
}
TextField {
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
}
}
}
}
}
}
我一直在尝试效仿这个例子:
http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html
它在 Qt Creator 中的样式属性处失败,给出样式不存在的错误。
我认为这是我的库没有加载或者我设置的环境的问题。
我在按钮或其他任何地方都没有风格。我假设如果我有进口它会工作,但事实并非如此。
这里有一个关于 SO 的相关问题:QML - How to change TextField font size
但在这里它似乎只是工作。
Qt Quick Controls 2 中没有 TextField::style
这样的 属性。通常,Qt Quick Controls 1 中的样式对象无法与 Qt Quick Controls 2 一起使用。Qt Quick Controls 的两个主要版本之间的 API 不兼容。有关详细信息,请参阅以下文档页面:
引入了一个新的 API 不兼容的主要版本,因为基本上没有办法使 Qt Quick Controls 1 的大量基于加载程序的架构表现得相当好。因此,所有 Component
s 的动态加载都在 Qt Quick Controls 2 中被抛弃。过去由动态加载样式对象提供的 Component
s 动态实例化的委托现在成为控件的一部分,实例化 "in place"。本质上:
TextField {
style: TextFieldStyle {
textColor: "white"
background: Rectangle { color: "black" }
}
}
对比
TextField {
color: "white"
background: Rectangle { color: "black" }
}
您可以阅读有关历史的更多信息here. In particular, this post 重点介绍了 Qt Quick Controls 2 中的基本结构变化。
我正在尝试将一些样式应用于我正在处理的新 qt 5.7 应用程序,但以下内容根本不起作用。它给出了错误: qrc:/SignInView.qml:67 无法分配给不存在的 属性 "style" 出于同样的原因,我无法在设计模式下编辑它。
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
Page {
id: page1
ColumnLayout {
id: columnLayout1
height: 100
anchors.right: parent.right
anchors.left: parent.left
anchors.top: parent.top
Label {
text: qsTr("Label")
font.pointSize: 16
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
}
Image {
id: image1
width: 200
height: 200
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
fillMode: Image.PreserveAspectCrop
anchors.horizontalCenter: parent
source: "qrc:/qtquickplugin/images/template_image.png"
Button {
id: button1
text: qsTr("Button")
anchors.bottomMargin: 10
anchors.rightMargin: 10
anchors.bottom: parent.bottom
anchors.right: parent.right
}
}
Rectangle {
id: field1
width: 200
height: 40
color: "#ffffff"
Layout.fillWidth: true
Label {
id: label1
text: qsTr("Full Name")
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
}
TextField {
style: TextFieldStyle {
textColor: "black"
background: Rectangle {
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
}
}
}
}
}
}
我一直在尝试效仿这个例子:
http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html
它在 Qt Creator 中的样式属性处失败,给出样式不存在的错误。 我认为这是我的库没有加载或者我设置的环境的问题。 我在按钮或其他任何地方都没有风格。我假设如果我有进口它会工作,但事实并非如此。
这里有一个关于 SO 的相关问题:QML - How to change TextField font size 但在这里它似乎只是工作。
Qt Quick Controls 2 中没有 TextField::style
这样的 属性。通常,Qt Quick Controls 1 中的样式对象无法与 Qt Quick Controls 2 一起使用。Qt Quick Controls 的两个主要版本之间的 API 不兼容。有关详细信息,请参阅以下文档页面:
引入了一个新的 API 不兼容的主要版本,因为基本上没有办法使 Qt Quick Controls 1 的大量基于加载程序的架构表现得相当好。因此,所有 Component
s 的动态加载都在 Qt Quick Controls 2 中被抛弃。过去由动态加载样式对象提供的 Component
s 动态实例化的委托现在成为控件的一部分,实例化 "in place"。本质上:
TextField {
style: TextFieldStyle {
textColor: "white"
background: Rectangle { color: "black" }
}
}
对比
TextField {
color: "white"
background: Rectangle { color: "black" }
}
您可以阅读有关历史的更多信息here. In particular, this post 重点介绍了 Qt Quick Controls 2 中的基本结构变化。