目录

一.添加模块

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.15

二.自定义TextField

1.属性设置

2.输入框设置

3.按钮开关

三.效果

1.readonly为false

2.readonly为true

四.代码

---

一.添加模块

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)
        }
    }

}