其他分享
首页 > 其他分享> > 第13篇 基础(十三)QML 之 定位元素(Row、Column、Grid、Flow)

第13篇 基础(十三)QML 之 定位元素(Row、Column、Grid、Flow)

作者:互联网

目录

 1、定位器

 2、定义组件

 3、定位器之Column(列)

 4、定位器之Row(行)

 5、定位器之Grid(栅格)

 6、定位器之Flow(流)

 7、重复元素Repeater


1、定位器

有一些QML元素被用于放置元素对象,它们被称作定位器。

提供了Row、Column、Grid、Flow用来作为定位器。

2、定义组件

RedSquare.qml

组件包含一个48*48的着色区域。

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "red"
    border.color: Qt.lighter(color)
}

BlueSquare.qml

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "blue"
    border.color: Qt.lighter(color)
}

GreenSquare.qml

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "green"
    border.color: Qt.lighter(color)
}

3、定位器之Column(列)

Column(列)元素将它的子对象通过顶部对齐的列方式进行排列。

spacing属性:设置每个元素直接的间隔大小。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Column {
        id: column
        anchors.centerIn: parent
        spacing: 8
        RedSquare {}
        BlueSquare {}
        GreenSquare {}
    }
}

结果显示:

 4、定位器之Row(行)

Row(行):将它的子对象从左到右,或者从右到左依次排列,排列方式取决于layoutDirection属性。

spacing属性用来设置每个元素之间的间隔。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 20
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
    }
}

结果显示:

 5、定位器之Grid(栅格)

Grid(栅格):通过设置行数和列数,将子对象排列在一个栅格中。

可以限制行数或者列数。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Grid {
        id: grid
        rows: 2
        columns: 3
        anchors.centerIn: parent
        spacing: 8
        RedSquare {}
        BlueSquare {}
        GreenSquare {}
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
    }
}

结果展示:

 6、定位器之Flow(流)

通过flow(流)属性和layoutDirection(布局方向)属性来控制流的方向。

能从头到底横向布局。

也可以从左到右或者从右到左。

作为加⼊流中的⼦对象, 它们在需要时可以被包装成新的⾏或者列。 为了让⼀个流可以⼯作, 必须指定⼀个宽度或者⾼度, 可以通过属性直接设定, 或者通过anchor(锚定) 布局设置。
main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Flow {
        anchors.centerIn: parent
        anchors.margins: 20
        spacing: 20
        RedSquare {}
        GreenSquare {}
        BlueSquare {}
    }
}

结果展示:

 7、重复元素Repeater

工作方式像for循环与迭代器的模式一样。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 600
    height: 400

    Grid {
        anchors.centerIn: parent
        anchors.margins: 8
        spacing: 4
        Repeater {
            model: 16
            Rectangle {
                width: 56; height: 56
                color: "blue"
                border.color: Qt.lighter(color)
                Text {
                    anchors.centerIn: parent
                    color: "green"
                    text: "Cell " + index
                }
            }
        }
    }
}

结果展示:

标签:13,QtQuick,Column,Flow,定位器,height,color,Window,import
来源: https://blog.csdn.net/fanjufei123456/article/details/122813322