目錄

?

?

基本概念

代碼及演示

源碼打包下載

---

?

基本概念

以目前的技術累計來說，有3種方式進行美化！

? ? ? ? ? 1. 修改TextField本生的屬性；

? ? ? ? ? 2. 加上TextFieldStyle進行美化；

? ? ? ? ? 3. 在TextInput自定義一個背景；

把這3種方法結合起來，可以做出很有意思的效果，如下所示

?

代碼及演示

普通的效果

稍微好看的效果

程序結構如下：

源碼如下：

main.cpp

#include <QGuiApplication> #include <QQmlApplicationEngine>int main(int argc, char *argv[]) {QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec(); }

main.qml

import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.2 import QtQuick.Particles 2.0Window {id: windowsvisible: truewidth: 1000height: 850title: qsTr("CSDN IT1995")property int columnFactor: 2Column{id: columnspacing: 20anchors.centerIn: parentTextField {implicitWidth: windows.width / columnFactor}TextField {style: TextFieldStyle{background: BorderImage {id: textFieldBorderImagesource: "qrc:/img/textfield_1.png"width: windows.width / columnFactor; height: 100border.left: 5; border.top: 5border.right: 5; border.bottom: 5}}implicitWidth: windows.width / columnFactor}TextField {id: textField3style: textFieldStyleimplicitWidth: windows.width / columnFactor}MyTextField {id: mytextField1anchors.top: textField3.bottomanchors.topMargin: 20width: textField3.width}MyTextField2{id: mytextField2anchors.top: mytextField1.bottomanchors.topMargin: 60}}Component {id: textFieldStyleTextFieldStyle {background: Rectangle {implicitWidth: windows.width / columnFactorcolor: "#f0f0f0"antialiasing: trueborder.color: "gray"radius: height/2Rectangle {anchors.fill: parentanchors.margins: 1color: "transparent"antialiasing: trueborder.color: "#aaffffff"radius: height/2}}}} }

MyTextField.qml

import QtQuick 2.0 import QtQuick.Controls.Styles 1.2 import QtQuick.Controls 1.2Item {Image{width: parent.widthsource: "qrc:/img/textfield_2.png"TextField{anchors {left: parent.leftleftMargin: 45top: parent.toptopMargin: 20}width: parent.width - 90font.pointSize: 20style: TextFieldStyle{background: BorderImage {}}}}}

MyTextField2.qml

import QtQuick 2.0 import QtQuick.Controls.Styles 1.2 import QtQuick.Controls 1.2Item {Image{source: "qrc:/img/textfield_3.png"width: 420height: 300TextField{id: textFieldanchors {left: parent.leftleftMargin: 40top: parent.toptopMargin: 155}rotation: -8width: parent.width - 170font.pointSize: 32smooth: trueantialiasing: truestyle: TextFieldStyle{background: BorderImage {}}}}}

?

源碼打包下載

https://github.com/fengfanchen/Qt/tree/master/TestFieldOfQML

總結

以上是生活随笔為你收集整理的QML工作笔记-为TestField戴上皮肤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。