【Qt】QML快速入门5——定位元素

矫情吗；* 2022-10-28 15:26 150阅读 0赞

**QML快速入门**

【Qt】QML快速入门1——语法：[https://blog.csdn.net/See\_Star/article/details/113729827][https_blog.csdn.net_See_Star_article_details_113729827]  
【Qt】QML快速入门2——基本元素：[https://blog.csdn.net/See\_Star/article/details/113730053][https_blog.csdn.net_See_Star_article_details_113730053]  
【Qt】QML快速入门3——组件：[https://blog.csdn.net/See\_Star/article/details/113730209][https_blog.csdn.net_See_Star_article_details_113730209]  
【Qt】QML快速入门4——简单转换：[https://blog.csdn.net/See\_Star/article/details/113736543][https_blog.csdn.net_See_Star_article_details_113736543]  
【Qt】QML快速入门5——定位元素：[https://blog.csdn.net/See\_Star/article/details/113737019][https_blog.csdn.net_See_Star_article_details_113737019]  
【Qt】QML快速入门6——布局元素：[https://blog.csdn.net/See\_Star/article/details/113737297][https_blog.csdn.net_See_Star_article_details_113737297]  
【Qt】QML快速入门7——输入元素：[https://blog.csdn.net/See\_Star/article/details/113737418][https_blog.csdn.net_See_Star_article_details_113737418]

--------------------

**定位元素（Positioning ELement）**

有一些QML元素被用于放置元素对象，它们被称作定位器，QtQuick模块提供了**Row**，**Column**，**Grid**，**Flow**用来作为定位器。你可以在下面的插图中看到它们使用相同内容的显示效果。

注意：在我们详细介绍前，我们先介绍一些相关的元素，红色（red），蓝色（blue），绿色（green），高亮（lighter）与黑暗（darker）方块，每一个组件都包含了一个48乘48的着色区域。下面是关于RedSquare（红色方块）的代码：

// RedSquare.qml
    
    import QtQuick 2.0
    
    Rectangle {
        width: 48
        height: 48
        color: "#ea7025"
        border.color: Qt.lighter(color)
    }

请注意使用了Qt.lighter（color）来指定了基于填充色的边界高亮色。我们将会在后面的例子中使用到这些元素，希望后面的代码能够容易读懂。请记住每一个矩形框的初始化大小都是48乘48像素大小。

### 目录 ###

*   *  1 Column（列）元素
     *  2 Row（行）元素
     *  3 Grid（栅格）元素
     *  4 FLow（流）元素

## 1 Column（列）元素 ##

Column（列）元素将它的子对象通过顶部对齐的列方式进行排列。spacing属性用来设置每个元素之间的间隔大小。  
![在这里插入图片描述][20210207104334749.png]

// column.qml
    
    import QtQuick 2.0
    
    DarkSquare {
        id: root
        width: 120
        height: 240
    
        Column {
            id: column
            anchors.centerIn: parent
            spacing: 8
            RedSquare { }
            GreenSquare { width: 96 }
            BlueSquare { }
        }
    }
    
    // M1<<

## 2 Row（行）元素 ##

Row（行）元素将它的子对象从左到右，或者从右到左依次排列，排列方式取决于layoutDirection属性。spacing属性用来设置每个元素之间的间隔大小。

![在这里插入图片描述][20210207104457699.png]

// row.qml
    
    import QtQuick 2.0
    
    BrightSquare {
        id: root
        width: 400; height: 120
    
        Row {
            id: row
            anchors.centerIn: parent
            spacing: 20
            BlueSquare { }
            GreenSquare { }
            RedSquare { }
        }
    }

## 3 Grid（栅格）元素 ##

Grid（栅格）元素通过设置rows（行数）和columns（列数）将子对象排列在一个栅格中。可以只限制行数或者列数。如果没有设置它们中的任意一个，栅格元素会自动计算子项目总数来获得配置，例如，设置rows（行数）为3，添加了6个子项目到元素中，那么会自动计算columns（列数）为2。属性flow（流）与layoutDirection（布局方向）用来控制子元素的加入顺序。spacing属性用来控制所有元素之间的间隔。  
![在这里插入图片描述][20210207104644980.png]

// grid.qml
    
    import QtQuick 2.0
    
    BrightSquare { 
        id: root
        width: 160
        height: 160
    
        Grid { 
            id: grid
            rows: 2
            columns: 2
            anchors.centerIn: parent
            spacing: 8
            RedSquare {  }
            RedSquare {  }
            RedSquare {  }
            RedSquare {  }
        }
    
    }

## 4 FLow（流）元素 ##

通过flow（流）属性和layoutDirection（布局方向）属性来控制流的方向。它能够从头到底的横向布局，也可以从左到右或者从右到左进行布局。作为加入流中的子对象，它们在需要时可以被包装成新的行或者列。为了让一个流可以工作，必须指定一个宽度或者高度，可以通过属性直接设定，或者通过anchor（锚定）布局设置。  
![在这里插入图片描述][20210207104819362.png]

// flow.qml
    
    import QtQuick 2.0
    
    BrightSquare {
        id: root
        width: 160
        height: 160
    
        Flow {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 20
            RedSquare { }
            BlueSquare { }
            GreenSquare { }
        }
    }

通常Repeater（重复元素）与定位器一起使用。它的工作方式就像for循环与迭代器的模式一样。在这个最简单的例子中，仅仅提供了一个循环的例子。  
![在这里插入图片描述][20210207104833538.png]

// repeater.qml
    
    import QtQuick 2.0
    
    DarkSquare { 
        id: root
        width: 252
        height: 252
        property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
    
    
        Grid{ 
            anchors.fill: parent
            anchors.margins: 8
            spacing: 4
            Repeater { 
                model: 16
                Rectangle { 
                    width: 56; height: 56
                    property int colorIndex: Math.floor(Math.random()*3)
                    color: root.colorArray[colorIndex]
                    border.color: Qt.lighter(color)
                    Text { 
                        anchors.centerIn: parent
                        color: "#f0f0f0"
                        text: "Cell " + index
                    }
                }
            }
        }
    }

在这个重复元素的例子中，我们使用了一些新的方法。我们使用一个颜色数组定义了一组颜色属性。重复元素能够创建一连串的矩形框（16个，就像模型中定义的那样）。每一次的循环都会创建一个矩形框作为repeater的子对象。在矩形框中，我们使用了JS数学函数Math.floor(Math.random()\*3)来选择颜色。这个函数会给我们生成一个0~2的随机数，我们使用这个数在我们的颜色数组中选择颜色。注意之前我们说过JavaScript是QtQuick中的一部分，所以这些典型的库函数我们都可以使用。

一个重复元素循环时有一个index（索引）属性值。当前的循环索引（0,1,2,…15）。我们可以使用这个索引值来做一些操作，例如在我们这个例子中使用Text（文本）显示当前索引值。

注意：当有一小部分的静态数据需要显示时，使用重复元素是最好的方式。

[https_blog.csdn.net_See_Star_article_details_113729827]: https://blog.csdn.net/See_Star/article/details/113729827
[https_blog.csdn.net_See_Star_article_details_113730053]: https://blog.csdn.net/See_Star/article/details/113730053
[https_blog.csdn.net_See_Star_article_details_113730209]: https://blog.csdn.net/See_Star/article/details/113730209
[https_blog.csdn.net_See_Star_article_details_113736543]: https://blog.csdn.net/See_Star/article/details/113736543
[https_blog.csdn.net_See_Star_article_details_113737019]: https://blog.csdn.net/See_Star/article/details/113737019
[https_blog.csdn.net_See_Star_article_details_113737297]: https://blog.csdn.net/See_Star/article/details/113737297
[https_blog.csdn.net_See_Star_article_details_113737418]: https://blog.csdn.net/See_Star/article/details/113737418
[20210207104334749.png]: /images/20221024/6d83f6845b4b4fd899d92f9a44aa979f.png
[20210207104457699.png]: /images/20221024/46f357eb71f2458896cd3e21350d4241.png
[20210207104644980.png]: /images/20221024/a47ea9c9704543ad9af32c0f998cf1ce.png
[20210207104819362.png]: /images/20221024/fa9e8847430743b99cc7d099dae28ce0.png
[20210207104833538.png]: /images/20221024/9769c0cb30cb48a68dfcd4bc33973d97.png