简述
下面是用Qt去开发Android的时候,遇到时间选择器的需求,通过官方例子和自己的调整,做出了时间选择器界面开发。具体效果图如下:
封装一个滚轮的文件代码(TimeWheel.qml):
mport QtQuick 2.0
import "../" as G
import Sparrow 1.0
Rectangle {
property alias value: list.currentIndex;
property alias myModel: list.model;
property bool bZeroFlags: false;
property bool bTextFlags: false;
property int currentFontSize: 30;
property int normalFontSize: 24;
property string strUnitString: "";
color: "#36393b";
border.color: "white";
Rectangle{
id: wheelList;
anchors {
top: parent.top;
left: parent.left;
}
color: "white";
border.color: "#cdcdcd";
width: parent.width;
height: parent.height;
ListView {
id: list;
width: parent.width * 0.9;
height: parent.height;
highlightRangeMode: ListView.StrictlyEnforceRange;
preferredHighlightBegin: height / 3;
preferredHighlightEnd: height / 3;
clip: true;
delegate:Rectangle {
id: modelRect;
color: "#FEFEFE";
width: parent.width;
height: ListView.isCurrentItem ? G.Tools.height(113) : G.Tools.height(96);
Text {
id: modelText;
anchors.centerIn: parent;
font.family: FontSetting.fontFamily;
font.pointSize: modelRect.ListView.isCurrentItem ? FontSetting.setPixelSizeToPointSize(currentFontSize) : FontSetting.setPixelSizeToPointSize(normalFontSize);
color: modelRect.ListView.isCurrentItem ? "#3e6792" : "#777777";
text:{
if(bTextFlags){
return ( numberText + strUnitString);
}else{
if(bZeroFlags){
return (index + strUnitString);
}else {
return ((index + 1) + strUnitString);
}
}
}
}
MouseArea {
anchors.fill: parent;
onClicked: {
list.currentIndex = index;
}
}
}
}
}
}
在一个Rectangle中放了一个ListView,ListView的代理就是一个Text用来显示内容。在Text中添加了一下条件来判断显示的单位(年,月,日,时,分等),这段代码是一个qml文件,qml文件的名字命名为TimeWheel.qml,可以在其他qml文件中引用TimeWheel.qml并创建对象,就可使用我们已经封装好的时间滑轮。
封装的年月日选择器文件代码(DateSelector.qml)
import QtQuick 2.0
import Sparrow 1.0
import "../" as G
import "../Component"
//设置界面单个滑轮时间选择器
Item {
id: choseDateItem;
property alias yearModel: yearList.myModel;
property alias monthModel: monthList.myModel;
property alias