0
点赞
收藏
分享

微信扫一扫

关联系统-电动助力转向系统EPS

Qt hello - 专注于Qt的技术分享平台

在开发用户界面时,最好的办法是保持数据与可视化的分离。比如一个通讯录,可以用list展示,也可以用grid展示,这都属于view部分,可以不同。但是数据都是相同的,都有名称,头像,手机号等元素。QML针对这种场景提供了model-view框架。其实同样的模式在传统的QWidget 框架中也有,比如QListView 和QTableView。

一,实现起来,记住三个关键点:

1,model。 数据来源,一般是通过网络请求获取。

2,view。负责可视化显示,是ListView 还是GridView。

3,delegate。代理,就是怎么展示数据。它负责将model和view连接起来,将model中的每条数据通过具体的控件,渲染到view中。

下面通过一个例子,来说明代码的写法,这个例子类似一个通讯录,数据我们写死,真实情况应该是从接口获取。利用ListView进行可视化。代理是一个Rectangle 内部一个Image展示头像,一个Text 显示文本。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //可视化view
    ListView{
        anchors.fill: parent
        width: 100
        delegate: addressDelegate
        model: model
    }

    //list 模型
    ListModel{
        id:model
    }

    //代理
    Component{
        id:addressDelegate
        Rectangle{
            width: 140
            height: 120

            RowLayout{
                anchors.fill: parent
                anchors.margins: 10
                //头像
                Image {
                    source: img
                    Layout.preferredWidth: 100
                    Layout.preferredHeight: 100
                }
                //名称
                Text {
                    text: name
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }

    //构造模型数据
    Component.onCompleted: {
        model.append({"img":"https://img2.baidu.com/it/u=607192830,2624468444&fm=253&fmt=auto&app=120&f=JPEG?w=1025&h=684","name":"刘备"})
        model.append({"img":"https://img2.baidu.com/it/u=1662844506,2024543724&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1052","name":"关羽"})
        model.append({"img":"https://img2.baidu.com/it/u=2512544330,2343544095&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300","name":"张飞"})
        model.append({"img":"https://img2.baidu.com/it/u=4186203074,1390758742&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=618","name":"赵云"})
    }
}

二,总结

跳转到这里:QML model-view 框架 - Qt hello

举报

相关推荐

0 条评论