QML之SearchBox

一个有水印输入框的Example

//SearchBox.qml import Qt 4.7 FocusScope { property string defaultText; id: focusScope width: 250; height: 28 BorderImage { source: "images/lineedit-bg.png" width: parent.width; height: parent.height border { left: 4; top: 4; right: 4; bottom: 4 } } BorderImage { source: "images/lineedit-bg-focus.png" width: parent.width - 6; height: parent.height -6 border { left: 4; top: 4; right: 4; bottom: 4 } visible: focusScope.wantFocus ? true : false } Text { id: typeSomething anchors.fill: parent; anchors.leftMargin: 8 verticalAlignment: Text.AlignVCenter text: defaultText color: "gray" font.italic: true } MouseArea { anchors.fill: parent onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); } } TextInput { id: textInput anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter } focus: true } Image { id: clear anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter } source: "images/clear.png" opacity: 0 MouseArea { anchors.fill: parent onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); } } } states: State { name: "hasText"; when: textInput.text != '' PropertyChanges { target: typeSomething; opacity: 0 } PropertyChanges { target: clear; opacity: 1 } } transitions: [ Transition { from: ""; to: "hasText" NumberAnimation { exclude: typeSomething; properties: "opacity" } }, Transition { from: "hasText"; to: "" NumberAnimation { properties: "opacity" } } ] }

上面代码中有wantFocus没有起到作用。好像是Qt的一个Bug，在网上找到一个兄弟向Nokia提交的Bug：

http://bugreports.qt.nokia.com/browse/QTBUG-7724?page=com.atlassian.jira.plugin.system.issuetabpanels%3Achangehistory-tabpanel

 

//main.qml import Qt 4.7 Rectangle { id: page width: 500; height: 250 color: "#edecec" MouseArea { anchors.fill: parent onClicked: page.focus = false; } Column { anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter } spacing: 10 SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true; defaultText: "Please input username" } SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1; defaultText: "Please input password" } SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2; defaultText: "Please input age" } } } 

 

 

 

 

下面是我花了点时间做的一个简单的SearchBox,思路跟上面一样.

 

//SearchBox2 import Qt 4.7 FocusScope { property string defaultText : "请输入查询关键字"; id: focusScope width: 250; height: 28 BorderImage { source: "images/lineedit-bg.png" width: parent.width; height: parent.height border { left: 4; top: 4; right: 4; bottom: 4 } } Text { id: defaultInputText anchors.fill: parent; anchors.leftMargin: 8 verticalAlignment: Text.AlignVCenter text: defaultText color: "gray" font.italic: true } TextInput { id: textInput anchors { left: parent.left; right: searchImg.left; leftMargin:8; rightMargin: 8; verticalCenter: parent.verticalCenter } focus: true } Image { id: searchImg source: "images/find.png" anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter } } states:State { name: "hasText" when: textInput.text != '' PropertyChanges{ target: defaultInputText; opacity: 0 } } transitions: [ Transition { from: "" to: "hasText" NumberAnimation { exclude: defaultInputText; properties: "opacity"} }, Transition { from: "hasText" to: "" NumberAnimation {properties: "opacity"} } ] }