[導(dǎo)讀]Qt Quick中的ListView初學(xué)
ListView 3要素:
model : 負責(zé)每一個行的 數(shù)據(jù)
delegate:負責(zé)每一個行的 外觀
3.與外界如何交互,刪除和添加數(shù)據(jù)(通過m
Qt Quick中的ListView初學(xué)
3.與外界如何交互,刪除和添加數(shù)據(jù)(通過model和js)
ListView 3要素:
model : 負責(zé)每一個行的 數(shù)據(jù) delegate:負責(zé)每一個行的 外觀3.與外界如何交互,刪除和添加數(shù)據(jù)(通過model和js)
通過JavaScript控制邊線,0，2，4，6…..才顯示邊框,用來顯示每一行的界限,界限顏色用Qt自帶的函數(shù)就可以了
JavaScript代碼:
Myhelp.js
.pragma library
function 求余數(shù)(date) {
var ret =date%2;
console.log("余數(shù):"+ret);
if(ret==0)
{
return 1;
}
return 0;
}
Window {
visible: true
width: 240;
height: 320;
//導(dǎo)出listview的model 供按鈕使用 由于在一個文件中,不需要了
ListView{
id:list_view;
anchors.left: parent.left;
anchors.top: parent.top;
width: parent.width;
height: 180;
model:m_listmodel;
delegate:delegete1;
}
//ListView的model
ListModel{
id:m_listmodel;//model對象中 有數(shù)組ListElement 存儲所有的列表數(shù)據(jù)對象
ListElement{name:"hello"}
}
//listview的代理
Component{
id:delegete1;
Rectangle{
width: parent.width;
height: 40;
color: "#4b3b3b"
border.color: Qt.lighter(color) //顏色暗淡些 不然顯得有點粗
//當(dāng)序號為2的倍數(shù)才有邊框用來分割
border.width: MyHELP.求余數(shù)(index);
Text {
anchors.fill: parent;
id: m_txt;
color: "#f3e3e3"
text:name+"序號"+index;
font.family: "Consolas"
font.pointSize: 14
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
//新建按鈕用來測試
Button{
id:m_btn;
anchors.top: list_view.bottom;
anchors.left:parent.left;
width: parent.width;
height: 40;
text: qsTr("添加");
onClicked: {
m_listmodel.append({name:qsTr(m_input.text)});
}
}
Button{
id:m_delete;
anchors.top: m_btn.bottom;
anchors.left:parent.left;
width: parent.width;
height: 40;
text: qsTr("刪除");
onClicked: {
m_listmodel.remove(m_input.text,1);//刪除指定的項 第二個參數(shù):刪除個數(shù) 1就行了不然亂
}
}
TextInput{
id:m_input;
horizontalAlignment: Text.AlignHCenter
font.pointSize: 14
anchors.left:m_delete.left;
anchors.top: m_delete.bottom;
height: 40;
width: parent.width;
color: "#c69191"
autoScroll: true;
text: qsTr("請輸入")
}
}
下載文檔
