QT之QML从入门到精通（第八章）

布局使用

Column控件的使用

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Column{ //列布局id:colspacing: 10 //控件间距Repeater{ //使控件重复id:rep
//            model: 3  //控制数量或者数据model:ListModel{}Button{width: 100height: 50
//                text: "btn"+indextext: name //name是从按钮点击的时候拿到的name}}move: Transition {// 移动时候弹跳NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }}add: Transition { //添加时候弹跳NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }}populate: Transition { //从控件创建的时候 200坐标移动到当前左边的动画NumberAnimation { properties: "x,y"; from: 200; duration: 1000; easing.type: Easing.OutBounce }}}Button{anchors.bottom:parent.bottomanchors.bottomMargin: 20onClicked: {rep.model.insert(0,{"name":rep.model.count})}}
}

Row控件的使用

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{width: 400height: 300border.color: "black"Row{ //行布局，默认是从左往右进行绘制的。id:colspacing: 10 //控件间距leftPadding: 40 //距离左边40像素topPadding: 40 //距离上面40像素layoutDirection: Qt.RightToLeft //设置从右往左绘制Repeater{ //使控件重复id:repmodel: 3  //控制数量或者数据//            model:ListModel{//            }Button{width: 100height: 50text: "btn"+index}}Component.onCompleted: {console.log(effectiveLayoutDirection) //显示是否有镜像}}}}

Flow控件的使用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{width: 300height: 200border.color: "black"Flow { //根据父控件的大小去调整自己的布局，流式布局flow:Flow.TopToBottom //默认从左往右  ，设置之后是从上到下绘制。anchors.fill: parentanchors.margins: 4spacing: 10Text { text: "Text"; font.pixelSize: 40 }Text { text: "items"; font.pixelSize: 40 }Text { text: "flowing"; font.pixelSize: 40 }Text { text: "inside"; font.pixelSize: 40 }Text { text: "a"; font.pixelSize: 40 }Text { text: "Flow"; font.pixelSize: 40 }Text { text: "item"; font.pixelSize: 40 }}}}

Gird控件使用

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{width: 300height: 200border.color: "black"Grid {topPadding: 20
//            columns: 3 //指定有3列rows: 2 //指定有2行spacing: 2Rectangle { color: "red"; width: 50; height: 50 }Rectangle { color: "green"; width: 20; height: 50 }Rectangle { color: "blue"; width: 50; height: 20 }Rectangle { color: "cyan"; width: 50; height: 50 }Rectangle { color: "magenta"; width: 10; height: 10 }}}
}

自定义Grid控件

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Grid {visible: falseid:gridcolumns: 3width: 15height: 300x:200y:100Repeater{model:grid.width/5 * 200/5
//                model:grid.width/5 * grid.height /5Rectangle{width: 5;height: 5color: index%2?"black":"white"}}}Rectangle{id:retwidth: grid.widthheight: grid.heightradius: 10border.color: "black"}Rectangle{id:bor_retwidth: grid.width+4height: grid.height+4
//        anchors.horizontalCenter: parent.horizontalCenter
//        anchors.bottom: parent.bottomborder.color: "black"radius: 10border.width: 3
//        OpacityMask:{ //制作阴影效果，12版本没有，哭了，这qml真难学
//            source :grid
//            maskSource:ret
//            anchors.fill:parent
//            anchors.margins:2
//        }}Button{id:btnx:100width: 50height: 50onClicked: {
//            bor_ret.height-= 10grid.height -= 10 //点击-10,会导致不断绘制，可以改变grid的高度}}}

访问复杂组件的子项

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{id:windowwidth:800height:600title: ""visible :trueColumn{id:colRepeater{id:repmodel:3Button{id:btny:index*60text: "btn"+index}}Text {id: txttext: qsTr("text")}Rectangle{id:rectwidth: 100height: 20color: "black"}}Button{id:btn2x:200width: 100height: 50text: "click"onClicked: {console.log("length = ",col.children.length) //虽然是5个控件，但是界面上Repeater也是一个控件。for(var i=0;i<col.children.length ;i++){if(col.children[i] instanceof Button){console.log(col.children[i].text)}
//                console.log(col.children[i] instanceof Button )  //判断是否是这个对象的实例。}}}}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{id:windowwidth:800height:600title: ""visible :trueListView{id:listwidth: 100height: 300model: ['张三','李四',"王五"]delegate: Text{   //绘制 控制单个 项id:txttext: modelData}}Button{id:btnx:200width: 100height: 50onClicked: {var len = list.contentItem.children.length //访问内部控件console.log(len)for(var i=0;i<len;i++ ){console.log(list.contentItem.children[i])}}}
}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{id:windowwidth:800height:600title: ""visible :trueListView{id:listwidth: 100height: 300model: ['张三','李四',"王五"]delegate: Column{Text{id:txttext: modelData}Button{id:btn1text: "btn"+index}}}Button{id:btnx:200width: 100height: 50onClicked: {var len = list.contentItem.children.length //访问内部控件console.log(len)for(var i=0;i<len;i++ ){var col =  list.contentItem.children[i];console.log(col.children.length)for(var j=0;j< col.children.length;j++){console.log(col.children[j])}}}}
}