QML项目实战：自定义TextField
目录
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.15
一.添加模块
import QtQuick.Controls 1.2
作用: 引入Qt Quick Controls模块，提供了一组常见的UI控件（如按钮、文本框等），用于快速开发现代用户界面。
性质: 这个模块包含了许多预定义的控件和样式，可以大大简化UI开发。版本号1.2表示你正在使用该模块的第1.2版。
import QtQuick.Controls.Styles 1.4
作用: 引入Qt Quick Controls Styles模块，这个模块扩展了Qt Quick Controls模块，提供了一些额外的样式和主题支持。
性质: 通过这个模块，你可以为你的应用程序应用不同的样式和主题，从而改变控件的外观。版本号1.4表示你正在使用该模块的第1.4版。
import QtGraphicalEffects 1.15
作用: 引入Qt Graphical Effects模块，提供了一组图形效果类，用于为UI元素添加视觉效果，如阴影、模糊、渐变等。
性质: 这个模块允许你在应用程序中实现复杂的视觉效果，提升用户体验。版本号1.15表示你正在使用该模块的第1.15版。
二.自定义TextField
1.属性设置
1.activeFocusOnPress ：当用户点击 TextField 时，自动将焦点设置到该控件上。
2.antialiasing：启用抗锯齿功能，使文本显示更加平滑。
3.readOnly： 将 TextField 设置为只读模式，用户无法编辑内容。
4.placeholderText：设置占位符文本。 
2.输入框设置
1.设置了文本的字体、大小和颜色
2.根据 readOnly 属性动态改变占位符文本的颜色
3.使用 Rectangle 作为背景，并根据 focus 属性动态改变边框颜色
4.添加了阴影效果，使背景看起来更有层次感
3.按钮开关
负责开关TextField的readonly属性
三.效果
1.readonly为false
2.readonly为true
四.代码
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.15
Window {
visible: true
width: 640
height: 480
title: qsTr("TextField")
TextField {
id: root
width: 450
height: 70
anchors.centerIn: parent
activeFocusOnPress: true
antialiasing: true
readOnly: true
placeholderText: root.readOnly ? "现在是只读状态！" : "请输入内容..."
style: TextFieldStyle {
id: tfs
font.pixelSize: 30
font.family: "微软雅黑"
placeholderTextColor: root.readOnly ? "#50596b" : "black"
renderType: Text.QtRendering
background: Item {
id: backgroundItem
Rectangle {
id:_Rectangle
anchors.fill: parent
border.color: root.focus ? "#2850FF" : "white"
border.width: 2
radius: 20
color: "#4ceaf1fb"
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 4
radius: 8
samples: 10
color: "#4d000f43"
}
}
}
}
}
Button{
text: "按钮"
width: 120
height: 40
anchors.top: root.bottom
anchors.topMargin: 30
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
root.readOnly = !root.readOnly
console.log(root.readOnly)
}
}
}
原文地址：https://blog.csdn.net/qq_48597462/article/details/143566146
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！