qml之文字与列表

 

通过两种方式分别加载两个不同的qml

QQmlApplicationEngine搭配Window

QQuickView搭配Item


两者不同之处在于:

使用QQuickView显示QML文档,对窗口的控制权(比如设置窗口标题、Icon、窗口的最小尺寸等)在C++代码;

而使用QQmlApplicationEngine加载以Window为根对象的QML文档,QML文档则拥有窗口的完整控制权,可以直接设置标题、窗口尺寸等属性。


—————– 使用如下 —————– 

QQmlApplicationEngine qmlEngine;

qmlEngine.load(QUrl(QLatin1String("qrc:/main.qml")));

—————–

QQuickView view;

view.setSource(QUrl("qrc:/main.qml"));

view.setVisible(true);

—————–

cpp

#include <QGuiApplication>

#include <QQmlApplicationEngine>

#include<QtQuick/QQuickView>

#include<QListWidget>

 

int main(int argc, char* argv[])

{

    QGuiApplication coreApp(argc, argv);

 

    QQmlApplicationEngine qmlEngine;

    qmlEngine.load(QUrl(QLatin1String("qrc:/calc.qml")));

 

    QQuickView viwer;

    viwer.setSource(QUrl("qrc:/main.qml"));

    viwer.setVisible(true);

 

    return coreApp.exec();

}

 



calc.qml

 

import QtQuick 2.7

import QtQuick.Controls 2.0

import QtQuick.Layouts 1.3

 

 

ApplicationWindow {

    id: window

    title:"qzher-文字测试"

    width: 400

    height: 300

    visible: true

 

    // 最大/ /

    maximumHeight : 1080

    maximumWidth : 1920

    minimumHeight : 200

    minimumWidth : 200

 

    Row{

        anchors.centerIn: parent    // 置于父窗口中间

        spacing: 40 // 间距

 

        TextInput {     // 第一个可输入的文字

            id:txta

            text: "a"   // 默认值

            cursorVisible: false    // 光标是否可见

            font.pointSize: 24  // 字体大小

            color: "green"      // 文字颜色

        }

 

        Text {          // 仅用于显示,而不能输入的文字

            text: "+"

            font.family: "Helvetica"    // 字体

            font.pointSize: 24

            color: "red"

        }

 

        TextInput {

            id:txtb

            text: "b"

            cursorVisible: false

            font.pointSize: 24

            color: "green"

        }

 

        Text {

        text: "="

        font.family: "Helvetica"

        font.pointSize: 24

        color: "red"

        style: Text.Outline

        styleColor: "yellow"

 

            MouseArea{  // 点击 = 号,将ab输入的文字进行相加

                anchors.fill: parent

                onClicked:{

                    txtRes.text = txta.text + txtb.text;

                }

            }

        }

 

        TextInput {

            id:txtRes

            text: " "

            readOnly:true    // 限定文本编辑框不能输入

            cursorVisible: false

            font.pointSize: 24

            color: "green"

        }

    }

}

 

 

 

 

main.qml

 

import QtQuick 2.0

import QtQuick.Controls 2.0

 

 

 Rectangle {

     id: mainrec

 

     property int widthx: 170

     property int heightx:800

 

     width: widthx; height: heightx

     color: "lightgray"

 

     // 代理部分

     Component{

         id:listdelegate

         Item{

             id:delegateitem

             width: widthx

             height:widthx

             

             Column{

                 Text{text:name;color:"#0000ff";font.pointSize: 14}

                 Text{text:number;color:"#000000";font.pointSize: 10}

                 Image{ width: 120; height: 120;source:img}

             }

             

             states: State {

                 name: "Current"

                 when: delegateitem.ListView.isCurrentItem

                 PropertyChanges { target: delegateitem; x:20;scale: 1.1}

             }

             

             transitions: Transition {

                 NumberAnimation { easing.type: Easing.Linear; properties: "x"; duration: 200 }

             }

 

             MouseArea {

                 anchors.fill: parent

                 onClicked:{

                      delegateitem.ListView.view.currentIndex = index

                 }

             }

         }

     }

 

     // 高亮部分

     Component{

         id:highlightrec

         Rectangle{

             width: widthx

             height:widthx

             color: "#f34b08"

             radius: 5

             border.width: 1

             border.color: "#60f50a"

         }

     }

 

 

     // 数据部分

     ListModel{

         id:listModelData

 

         ListElement{

             name:"小明"

             number:"4568467"

             img:"qrc:/res/head5.png"

         }

 

         ListElement{

             name:"YY"

             number:"2741869"

             img:"qrc:/res/head2.png"

         }

 

         ListElement{

             name:"邹民兵"

             number:"986153"

             img:"qrc:/res/head3.png"

         }

 

         ListElement{

             name:"马超"

             number:"39148209"

             img:"qrc:/res/head4.png"

         }

 

         ListElement{

             name:"小明"

             number:"4568467"

             img:"qrc:/res/head5.png"

         }

 

         ListElement{

             name:"YY"

             number:"2741869"

             img:"qrc:/res/head2.png"

         }

 

         ListElement{

             name:"邹民兵"

             number:"986153"

             img:"qrc:/res/head3.png"

         }

 

         ListElement{

             name:"马超"

             number:"39148209"

             img:"qrc:/res/head4.png"

         }

 

         ListElement{

             name:"小明"

             number:"4568467"

             img:"qrc:/res/head5.png"

         }

 

         ListElement{

             name:"YY"

             number:"2741869"

             img:"qrc:/res/head2.png"

         }

 

         ListElement{

             name:"邹民兵"

             number:"986153"

             img:"qrc:/res/head3.png"

         }

 

         ListElement{

             name:"马超"

             number:"39148209"

             img:"qrc:/res/head4.png"

         }

 

     }

 

     // 列表

     ListView{

         id:listinfo

         anchors.fill: parent

         focus: true

         // 选中项高亮,以highlightrec元素进行高亮

         highlight:highlightrec 

 

         // 高亮跟随

         highlightFollowsCurrentItem :true

         model:listModelData    // 列表的数据部分

         delegate:listdelegate  // 列表的代理部分,即控制部分

     }

 }

 


                


Qt5.7 源代码下载: http://download.csdn.net/detail/sinat_35523212/9600340

发表评论

电子邮件地址不会被公开。 必填项已用*标注