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

布局使用

Column控件的使用

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Column{ //列布局
        id:col
        spacing: 10 //控件间距
        Repeater{ //使控件重复
            id:rep
//            model: 3  //控制数量或者数据
            model:ListModel{
            }
            Button{
                width: 100
                height: 50
//                text: "btn"+index
                text: 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.bottom
      anchors.bottomMargin: 20
      onClicked: {
        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.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        width: 400
        height: 300
        border.color: "black"

        Row{ //行布局，默认是从左往右进行绘制的。
            id:col
            spacing: 10 //控件间距
            leftPadding: 40 //距离左边40像素
            topPadding: 40 //距离上面40像素
            layoutDirection: Qt.RightToLeft //设置从右往左绘制

            Repeater{ //使控件重复
                id:rep
                model: 3  //控制数量或者数据
    //            model:ListModel{
    //            }
                Button{
                    width: 100
                    height: 50
                    text: "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.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        width: 300
        height: 200
        border.color: "black"
        Flow { //根据父控件的大小去调整自己的布局，流式布局
            flow:Flow.TopToBottom //默认从左往右  ，设置之后是从上到下绘制。
            anchors.fill: parent
            anchors.margins: 4
            spacing: 10

            Text { 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.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        width: 300
        height: 200
        border.color: "black"
        Grid {
            topPadding: 20
//            columns: 3 //指定有3列
            rows: 2 //指定有2行
            spacing: 2
            Rectangle { 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.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
        Grid {
            visible: false
            id:grid
            columns: 3
            width: 15
            height: 300
            x:200
            y:100
            Repeater{
                model:grid.width/5 * 200/5
//                model:grid.width/5 * grid.height /5

                Rectangle{
                    width: 5;
                    height: 5
                    color: index%2?"black":"white"
                }
            }
        }
    Rectangle{
        id:ret
        width: grid.width
        height: grid.height
        radius: 10
        border.color: "black"
    }
    Rectangle{
        id:bor_ret
        width: grid.width+4
        height: grid.height+4
//        anchors.horizontalCenter: parent.horizontalCenter
//        anchors.bottom: parent.bottom
        border.color: "black"
        radius: 10
        border.width: 3
//        OpacityMask:{ //制作阴影效果，12版本没有，哭了，这qml真难学
//            source :grid
//            maskSource:ret
//            anchors.fill:parent
//            anchors.margins:2
//        }
    }
    Button{
        id:btn
        x:100
        width: 50
        height: 50
        onClicked: {
//            bor_ret.height-= 10
            grid.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.15

Window{
    id:window
    width:800
    height:600
    title: ""
    visible :true

    Column{
        id:col
        Repeater{
            id:rep
            model:3
            Button{
                id:btn
                y:index*60
                text: "btn"+index
            }
        }
        Text {
            id: txt
            text: qsTr("text")
        }
        Rectangle{
            id:rect
            width: 100
            height: 20
            color: "black"
        }

    }

    Button{
        id:btn2
        x:200
        width: 100
        height: 50
        text: "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.15

Window{
    id:window
    width:800
    height:600
    title: ""
    visible :true

    ListView{
        id:list
        width: 100
        height: 300
        model: ['张三','李四',"王五"]
        delegate: Text{   //绘制 控制单个 项
            id:txt
            text: modelData
        }
    }
    Button{
        id:btn
        x:200
        width: 100
        height: 50
        onClicked: {
            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.15

Window{
    id:window
    width:800
    height:600
    title: ""
    visible :true

    ListView{
        id:list
        width: 100
        height: 300
        model: ['张三','李四',"王五"]
        delegate: Column{
            Text{
                id:txt
                text: modelData
            }
            Button{
                id:btn1
                text: "btn"+index
            }

        }
    }
    Button{
        id:btn
        x:200
        width: 100
        height: 50
        onClicked: {
            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])
                }

            }

        }
    }
}