chongyong的个人主页

http://www.qtcn.org/bbs/u/184854  [收藏] [复制]

chongyong

  • 1

    关注

  • 0

    粉丝

  • 2

    访客

  • 等级:新手上路
  • 总积分:12
  • 男,1994-06-21

最后登录:2018-06-09

更多资料

日志

Qml中listview的用法

2017-09-21 16:12
写下第一片日志,哈哈哈哈。还没用过qml,先记一下吧。

1.Qt的模型视图:
在Qt中想利用视图(ListView)显示一些数据,并不是将这些数据直接放到视图中的。
因为视图只管显示,不会存储数据。数据模型用来存储数据,但是它不涉及显示,仅仅是存放数据。
所以还要用一个代理的东西来设置数据模型中的数据怎样在视图中显示。
就是这样:  
                                            【degelage代理】
【ListModel数据模型】  -------------------------------->   【ListView显示】

2.编写步骤:
(1)先设置数据模型ListModel
(2)设置代理,在代理中设置怎样显示数据delegate
(3)设置视图,在视图中关联了数据模型和代理 ListView中设置model和delegate
(4)设置高亮:listview中的highlight
备注:代理和高亮条头可以通过Component组件来实现
例子:
我的是QtCreater 5.4.1,新建一个 Qt Quick Application项目:改一下里面的那个main.qml。
  1. import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 800
        height: 480
        visible: true

        Rectangle{
         id:mainrec
         property int widthx: 200
         property int heightx: 480
         height: heightx
         width: widthx
         color:"lightgray"
         visible: true
         Component{
             id:listdelegate
             Item{
                 id:delegateitem
                 width:170
                 height:40
                 Column{
                     Text{
                        text:" <b> Name: </b>" + name + " <b> Num: </b>" + number
                     }
                 }
             }
         }


         ListView{
             id:listInfo
             anchors.fill: parent
             focus:true
             model:listdata
             delegate: listdelegate
             highlight: highlight
         }
        Component{
            id:highlight
            Rectangle{
                color:"lightsteelblue"
                radius: 5
            }
        }


         ListModel{
             id:listdata
              ListElement{
                  name:"xcy0"
                  number:"230"
              }
              ListElement{
                  name:"xcy1"
                  number:"231"
              }
              ListElement{
                  name:"xcy2"
                  number:"232"
              }
         }
        }
    }



3.Listview的delegate有两种方式:
(1)直接定义delegate
  1. ListView{
        ...
        delegate:Item{
        ...
        }
        model:ListModel{
        id:testModel
        ListElement
        {
         name:"xcy"
        }
        }
        ...
    }

其他地方使用:
  1. testModel.clear();
    testModel.append({"name":"xcl"});
    testModel.append({"name":"xxl"});

(2)将delegate定义成组件,在ListView中加用其id


参考:
http://www.360doc.com/content/15/1010/14/8236462_504649709.shtml



分类:默认分类|回复:0|浏览:1052|全站可见|转载
 

下一篇: C++中信号与QML中进行绑定

上一篇:

Powered by phpwind v8.7 Certificate Copyright Time now is:03-29 12:35
©2005-2016 QTCN开发网 版权所有 Gzip disabled