QML::常用基础控件属性1

Posted 2020-11-23 osbreak

 

Item 属性：
Item 类型比较特殊，因为它是所有其他可视化类型的基类型。
Qt Quick中所有可视化类型都基于 Item。
Item 对象本身没有一个可视化的外观，但是它定义了可视化项目中所有常见的特性，比如 x 、y 、width 、height 、anchors 和键盘处理等。
Item 类型最常见的用法是作为其他项目的容器，这样就可以把其他项目作为一个整体

 

Item {
    children: [
        Image {
            source: "images/about.png"
        },
        Image {
            x: 190
            width: 100
            height: 100
            fillMode: Image.Tile
            source: "images/about.png"
        }
    ]
    Component.onCompleted: {
        console.log("width = :", children[1].width) // children[1]来访问组中的对象
    }
}

 

分组属性：如字体设置
Text {
    id: t1
    text: qsTr("text")
    font.pixelSize: 50
    font.bold: true
    font.pointSize: 1
}
Text {
    id: t2
    text: qsTr("text2")
    font{pixelSize: 30; bold:true}
}

 

Column/Row 属性：
Column {
    spacing: 0//间隔
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}
Row{
    x:200
    spacing: 0//间隔
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
}

 

Grid 属性：
Grid {
        columns: 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 }
        Rectangle { color: "yellow"; width: 10; height: 20 }
    }

 

文本框：
 Rectangle {
        color: "lightblue"
        width: 300; height: 200

        Flow {
            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 }
        }
    }