首页 > qml文件中怎么设置透明输入框

qml文件中怎么设置透明输入框

类似于用户名密码输入框那种,求问怎么设置透明。
截图的背景是一张图片。


import QtQuick 2.2

Rectangle {
    width: 360
    height: 360
    color: "#6666FF"

    Loader{
        anchors.centerIn: parent
        anchors.verticalCenterOffset: -60
        sourceComponent: component
        onLoaded: {
            item.placeHoldText = "用户名"
            item.color = "#FF00FF"
        }
    }

    Loader{
        anchors.centerIn: parent
        anchors.verticalCenterOffset: 60
        sourceComponent: component
        onLoaded: {
            item.placeHoldText = "......"
            item.color = "#FFFF00"
        }
    }

    Component{
        id: component

        Item{
            width: 300
            height: 80

            property alias text: input.text
            property alias color: iconArea.color
            property alias placeHoldText: placeHold.text

            Rectangle{
                anchors.fill: parent
                radius: 6
                opacity: 0.2
            }

            Rectangle{ // you can change to Image
                id: iconArea
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 9
                width: 30
                height: 30
                radius: 10
            }

            TextInput{
                id: input
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: iconArea.right
                anchors.leftMargin: 6
                anchors.right: parent.right
                anchors.rightMargin: 9
                horizontalAlignment: TextInput.AlignLeft
                verticalAlignment: TextInput.AlignVCenter
                font.pixelSize: 40
                color: "white"
                clip: true

                Text {
                    id: placeHold
                    font: input.font
                    color: "white"
                    opacity: !input.activeFocus
                    Behavior on opacity{
                        NumberAnimation{ duration: 300 }
                    }
                    anchors.fill: parent
                    verticalAlignment: TextInput.AlignVCenter
                }
            }
        }
    }


}

你可以有Image替换掉左侧的Rectangle部分的代码,就可以了
Component部分的代码最好是单独保存成一个QML文件,再做处理,本例中写在一个文件中是为了展示方便。

希望可以帮到你和更多人。


http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html

TextField {
    style: TextFieldStyle {
        textColor: "black"
        background: Rectangle {
            color: "transparent"
        }
    }
}
【热门文章】
【热门文章】