类似于用户名密码输入框那种,求问怎么设置透明。
截图的背景是一张图片。
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"
}
}
}