这篇博客展示了如何在Qt Quick（QML）中创建一个具有透明背景的TextInput组件。通过使用Rectangle和Loader组件，调整了输入框的样式，包括设置背景透明度和占位符颜色。建议将Component部分的代码拆分为单独的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文件，再做处理，本例中写在一个文件中是为了展示方便。
希望可以帮到你和更多人。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
