Qml小例子

1. ApplicationWindow

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

ApplicationWindow{
   
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"


    menuBar: MenuBar {
   
             Menu {
   
                 title: qsTr("&File")
                 Action {
    text: qsTr("&New...") }
                 Action {
    text: qsTr("&Open...") }
                 Action {
    text: qsTr("&Save") }
                 Action {
    text: qsTr("Save &As...") }
                 MenuSeparator {
    }
                 Action {
    text: qsTr("&Quit")
                 onTriggered: close()}
             }
             Menu {
   
                 title: qsTr("&Edit")
                 Action {
    text: qsTr("Cu&t") }
                 Action {
    text: qsTr("&Copy") }
                 Action {
    text: qsTr("&Paste") }
             }
             Menu {
   
                 title: qsTr("&Help")
                 Action {
    text: qsTr("&About") }
             }

         }
    header:ToolBar{
   
        Row{
   
            ToolButton{
   
                text: "打开“"
            }
            ToolButton{
   
                text:"编辑"
            }
        }
        background: Rectangle{
   
            color: "orange"
        }
    }

    Rectangle{
   
//        height: 100
//        width: parent.width
        id:content
        anchors.fill: parent
        color: 'red'

        Component.onCompleted: {
   
            console.log(content.width," ",content.height)
        }
    }
    footer: Ctr1.StatusBar{
   
        Row{
   
            Label{
   
                text:"Menu" + ApplicationWindow.menuBar.count+' C ount'
                font.italic: true
                color:'DeepSkyBlue'
            }
        }
    }
}

2. 附加信号与属性

Window{
   
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

    Component.onCompleted: {
   
        console.log('construct')

    }
    Component.onDestruction: {
   
        console.log('destruct')
    }
    Rectangle{
   
        anchors.fill:parent
        color: 'green'
        Component.onCompleted: {
   
            console.log("rectangle construct")
        }
        Component.onDestruction: {
   
            console.log('rectangle desstruct')
        }
    }

}

Window{
   
    id:window
    width:640
    height:480
    visible: true
    title:"Hello world"

    Flickable{
   
        anchors.fill:parent
        contentWidth: image.width