Qt Quick中的ListView

時(shí)間：2019-11-25 14:58:01

關(guān)鍵字： QT qml-quick

手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]Qt Quick中的ListView初學(xué) ListView 3要素: model : 負(fù)責(zé)每一個(gè)行的數(shù)據(jù) delegate:負(fù)責(zé)每一個(gè)行的外觀 3.與外界如何交互,刪除和添加數(shù)據(jù)(通過(guò)m

Qt Quick中的ListView初學(xué)

ListView 3要素:

model : 負(fù)責(zé)每一個(gè)行的數(shù)據(jù) delegate:負(fù)責(zé)每一個(gè)行的外觀
3.與外界如何交互,刪除和添加數(shù)據(jù)(通過(guò)model和js)

通過(guò)JavaScript控制邊線,0，2，4，6…..才顯示邊框,用來(lái)顯示每一行的界限,界限顏色用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 供按鈕使用 由于在一個(gè)文件中,不需要了
    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對(duì)象中 有數(shù)組ListElement 存儲(chǔ)所有的列表數(shù)據(jù)對(duì)象
        ListElement{name:"hello"}
    }

      //listview的代理
    Component{
           id:delegete1;
           Rectangle{
                width: parent.width;
                height: 40;
                color: "#4b3b3b"
                border.color: Qt.lighter(color) //顏色暗淡些 不然顯得有點(diǎn)粗
                //當(dāng)序號(hào)為2的倍數(shù)才有邊框用來(lái)分割
                border.width: MyHELP.求余數(shù)(index);
                Text {
                    anchors.fill: parent;
                    id: m_txt;
                    color: "#f3e3e3"
                    text:name+"序號(hào)"+index;
                    font.family: "Consolas"
                    font.pointSize: 14
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

           }
    }

    //新建按鈕用來(lái)測(cè)試
    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);//刪除指定的項(xiàng) 第二個(gè)參數(shù):刪除個(gè)數(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("請(qǐng)輸入")

    }

}