于 Qt Widgets 于，我们经常使用许多布局管理器来管理界面 widgets 。

于 Qt Quick 实际上，有两个相关的管理和布局库，所谓集 Item Positioner ，所谓集 Item Layout 。 Item Layout 包含 RowLayout 、 ColumnLayout 、 GridLayout。与 Qt Widgets 中的布局管理器更相近，只是这里不打算介绍它们。本文的重点是 Item Positioner 。 Qt Quick 提供这么几种常常使用的 Positioners ：

anchors ，锚布局
Row ，行布局
Column ，列布局
Grid ，表格布局
Flow ，流式布局

咱们一个一个来看。

请给我的决赛文章《Qt Quick 图像处理实例之美图秀秀（附源代码下载）》投票，谢谢。

版权全部 foruok 。转载请注明出处：http://blog.csdn.net/foruok 。

anchors(锚)布局

在《Qt on Android: Qt Quick 简单教程》一文中我们已经介绍过锚布局了。为了自成篇幅，这里再反复一下。只是演示样例会更新哦。

anchors 提供了一种方式，让你能够通过指定一个元素与其他元素的关系来确定元素在界面中的位置。

你能够想象一下，每一个 item 都有 7 条不可见的锚线：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基线（baseline）。

看图 1 就明确了：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图 1 锚线

在图 1 中。没有标注基线。基线是用于定位文本的，你能够想象一行文字端坐基线的情景。对于没有文本的图元。baseline 和 top 一致。

使用 anchors 布局时，除了对齐锚线，还能够在指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边的留白。看图 2 就明确了：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图 2 留白

除了图 1 和图 2 介绍的属性。 anchors 另一些属性。 centerIn 表示将一个 item 居中放置到另一个 item 内， fill 表示充满某个 item ……很多其他请參考 Item 类的文档。

好了。基础知识介绍完毕，看一个大而全的样例。文件名称是 anchors_layout.qml 。内容例如以下：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    //color pickers look at parent's top

    ColorPicker {

        id: topColor1;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.top: parent.top;

        anchors.topMargin: 4;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: topColor2;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.left: topColor1.right;

        anchors.leftMargin: 4;

        anchors.top: topColor1.top;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: topColor3;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.right: parent.right;

        anchors.rightMargin: 4;

        anchors.top: parent.top;

        anchors.topMargin: 4;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: topColor4;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.right: topColor3.left;

        anchors.rightMargin: 4;

        anchors.top: topColor3.top;

        onColorPicked: setTextColor(clr);

    }

    //color pickers sit on parent's bottom

    ColorPicker {

        id: bottomColor1;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: bottomColor2;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.left: bottomColor1.right;

        anchors.leftMargin: 4;

        anchors.bottom: bottomColor1.bottom;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: bottomColor3;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.right: parent.right;

        anchors.rightMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        onColorPicked: setTextColor(clr);

    }

    ColorPicker {

        id: bottomColor4;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.right: bottomColor3.left;

        anchors.rightMargin: 4;

        anchors.bottom: bottomColor3.bottom;

        onColorPicked: setTextColor(clr);

    }    

    //align to parent's left && vertical center

    ColorPicker {

        id: leftVCenterColor;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.verticalCenter: parent.verticalCenter;

        onColorPicked: setTextColor(clr);

    }  

    //align to parent's right && vertical center

    ColorPicker {

        id: rightVCenterColor;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.right: parent.right;

        anchors.rightMargin: 4;

        anchors.verticalCenter: parent.verticalCenter;

        onColorPicked: setTextColor(clr);

    }      

    //align to parent's top && horizontal center

    ColorPicker {

        id: topHCenterColor;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.top: parent.top;

        anchors.topMargin: 4;

        anchors.horizontalCenter: parent.horizontalCenter;

        onColorPicked: setTextColor(clr);

    }  

    //align to parent's bottom && horizontal center

    ColorPicker {

        id: bottomHCenterColor;

        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        anchors.horizontalCenter: parent.horizontalCenter;

        onColorPicked: setTextColor(clr);

    }

}

演示样例代码中用到的 ColorPicker 是我们在《Qt Quick 组件与对象动态创建具体解释》中自己定义的组件，假设忘了请回头看看，要确保 ColorPicker.qml 与 anchors_layout.qml 在一个目录内。 ColorPicker 定义了 colorPicked 信号，參数为 clr 。类型是 color 。我在演示样例代码中为每一个 ColorPicker 对象创建了 onColorPicked 信号处理器，调用 setTextColor() 函数改变界面中间的文本的颜色。

Qt 是 QML 提供的一个全局对象，提供了非常多实用的方法和枚举值，这里我们使用 rgba() 函数来生成颜色值。

Math 对象是 JavaScript 语言那仅仅对象，它的 random() 方法放回 0 到 1 之间的随机值。

图 3 是运行 qmlscene anchors_layout.qml 后的效果图：

图 3 锚布局演示样例效果

锚布局是最灵活的一种 Qt Quick 布局方式，使用它你能够任意摆布界面上那些可见元素。只是，假设你的界面元素非常多，它也将是代码量最大的一种布局方式。

接下来我们看看那些传统的布局方式吧。假设你使用过 Qt Widgets ，相信会非常快明确。

行布局

anchors 实际上是 Item 的一个属性集。而 Row 则是一个单独的 Item ，专门用来管理其他 Item 的。后面介绍的几种布局，也是相似的。

Row 沿着一行安置它的孩子们。在你须要水平放置一系列的 Item 时。它比锚布局更加方便。一旦你把一个 Item 交给 Row 来管理。那就不要再使用 Item 的 x 、 y 、 anchors 等属性了。 Row 会安排得妥妥的。

在一个 Row 内的 item ，能够使用 Positioner 附加属性来获知自己在 Row 中的很多其他位置信息。 Positioner 有 index 、 isFirstItem 、 isLastItem 三个属性。

看我们的演示样例 row_layout.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Row {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        spacing: 4;

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

    }

}

运行命令 qmlscene row_layout.qml ，效果如图 4 所看到的：

图 4 行布局效果图

由于 Row 本身是一个 Item ，所以你能够使用锚布局来定位一个 Row 。演示样例中这么做了，把 Row 放在界面的左下角。

Row 有一个 spacing 属性，用来指定它管理的 Item 之间的间隔。

另一个 layoutDirection 属性，能够指定布局方向，取值为 Qt.LeftToRight 时从左到右放置 Item 。这是默认行为。取值为 Qt.RightToLeft 时从右向左放置 Item 。

还有其他的一些属性，请參看 Qt SDK 。

列布局

Column 与 Row 相似，只是是在垂直方向上安排它的子 Items 。

在你须要垂直放置一系列的 Item 时，它比锚布局更加方便。

Column 本身也是一个 Item ，能够使用 anchors 布局来决定它在父 Item 中的位置。 Column 的 spacing 属性描写叙述子 Item 之间的间隔。

看演示样例 column_layout.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Column {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        spacing: 4;

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

    }

}

代码与 row_layout.qml 相似，不用解释了。图 5 是运行 qmlscene column_layout.qml 后的效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图 5 列布局效果图

与 Row 相似， Column 内的子 Item 也能够使用 Positioner 附加属性。

表格布局

Grid 在一个网格上安置它的子 Items 。它会创建一个拥有非常多单元格的网格。足够容纳它全部的子 Items 。 Grid 会从左到右、从上到下把它的子 items 一个一个塞到单元格里。

item 默认会被放在一个单元格左上角。(0,0) 位置。

你能够通过 rows 和 columns 属性设定表格的行、列数。假设你不设置，默认仅仅有四列。而行数则会依据实际的 item 数量自己主动计算。 rowSpacing 和 columnSpacing 指定行、列间距，单位是像素。

Grid 的 flow 属性描写叙述表格的流模式，能够取值 Grid.LeftToRight ，这是默认模式。从左到右一个挨一个放置 item ，一行放满再放下一行；取值为 Grid.TopToBottom 时，从上到下一个挨一个放置 item ，一列放满再放下一列。

horizontalItemAlignment 和 verticalItemAlignment 指定单元格对齐方式。默认的单元格对齐方式和 layoutDirection 以及 flow 有关。

先看个简单的样例， grid_layout.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Grid {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        rows: 3;

        columns: 3;

        rowSpacing: 4;

        columnSpacing: 4;

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

    }

}

为了看出 flow 取值不同一时候的效果，我特意将行列数都设置为 3 ，创建了 7 个 ColorPicker 实例。图 6 是效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图 6 表格布局。从左到右的效果

假设设置 Grid 的 flow 属性为 Grid.TopToBottom （加一行代码 "flow: Grid.TopToBottom;"），能够看到图 7 的效果：

图 7 表格布局，从上到下的效果

调整 Grid 的其他属性会带来什么样的变化呢？请你试试吧。

流布局

Flow 事实上和 Grid 相似，不同之处是它没有显式的行、列数，它会计算自身尺寸和子 item 尺寸来依据须要折行。它的 flow 属性。默认取值 Flow.LeftToRight 。从左到右安排 item ，直到 Flow 本身的宽度被超出时折行。当 flow 取值 Flow.TopToBottom 时，从上到下安排 item ，直到 Flow 本身的高度被超出时開始在下一列上安排 item 。

spacing 属性描写叙述 item 之间的间隔。

看个演示样例， flow_layout.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.horizontalCenter: parent.horizontalCenter;

        anchors.top: parent.top;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Flow {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        width: 280;

        height: 130;

        spacing: 4;

        ColorPicker {

            width: 80;

            height: 20;

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            width: 100;

            height: 40;

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            width: 80;

            height: 25;

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            width: 35;

            height: 35;

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            width: 20;

            height: 80;

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

        ColorPicker {

            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

            onColorPicked: setTextColor(clr);

        }

    }

}

我改变了 ColorPicker 实例的大小。以便观察 Flow 布局的特点：依据自身宽高是否被 item 超出而自己主动折行。图 8 是 flow 为 LeftToRight （代码中未设置 flow 属性。默认值是 LeftToRight）时的效果:

图 8 流布局，从左到右效果

改动下代码，在 Flow 对象生命内加入 "flow: Flow.TopToBottom;" 这行代码，再次运行 qmlscene flow_layout.qml 。效果如图 9 所看到的：

图 9 流布局，从上到下效果

如你所见，效果大大不同。

事实上能够把流布局想象成英文文字排版系统。一个 item 相应一个单词，横版模式时，从左到右，一行一行安排单词的位置，当接近一行的宽度时，假设下一个单词摆上去就会超出行宽，那就把这个单词放到下一行上，继续排排排……。竖版模式也是相似的……或许你看过竖版书，非常easy理解这件事情。

常见布局介绍完了，在学习 Qt Widgets 的布局管理器时，我们知道布局能够嵌套，比方我常常拿 QVBoxLayout 和 QHBoxLayout 嵌套来完毕一些界面的布局。

那 Qt Quick 中的布局能否够嵌套呢？

嵌套布局

Qt Quick 中布局是能够嵌套的。比方 Row 和 Column 能够相互嵌套来实现 Grid 布局的效果。

看下 nested_layout.qml ：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Row {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        spacing: 4;

        Column {

            spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        }

        Column {

            spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        } 

        Column {

            spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        }

    }

}

我在一个 Row 内嵌套了 3 个 Column ，实现了 2x3 的表格布局。运行 qmlscene nested_layout.qml ，能够看到图 10 ：

图 10 Row 与 Column 嵌套

嵌套时。比方放在 Row 内的 Column ，事实上对于 Row 来讲和其他非布局类的 item 一样，没什么差别。

我们改动一下上面的代码，嵌套两个 Column 。让其他两个 ColorPicker 实例与 Column 处在同一层级。代码例如以下：

import QtQuick 2.0

import QtQuick.Controls 1.1

Rectangle {

    width: 360;

    height: 240;

    color: "#EEEEEE";

    id: rootItem;

    Text {

        id: centerText;

        text: "A Single Text.";

        anchors.centerIn: parent;

        font.pixelSize: 24;

        font.bold: true;

    }

    function setTextColor(clr){

        centerText.color = clr;

    }

    Row {

        anchors.left: parent.left;

        anchors.leftMargin: 4;

        anchors.bottom: parent.bottom;

        anchors.bottomMargin: 4;

        spacing: 4;

        Column {

            spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        }

        Column {

            spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        } 

        //Column {

        //    spacing: 4;

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

            ColorPicker {

                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);

                onColorPicked: setTextColor(clr);

            }

        //}

    }

}

注意代码中我仅仅是把最后一个 Column 对象声明给凝视掉了，图 11 是运行效果：

图 11 嵌套布局

可能你想到了。锚布局无法和其他布局嵌套……你能够试一下。

好啦。嵌套布局就介绍到这里，感兴趣的话请自行实验其他布局之间的嵌套效果。

版权全部 foruok 。转载请注明出处：http://blog.csdn.net/foruok 。

回想一下：

Qt Quick 布局演示的更多相关文章

Qt Quick 布局介绍
在 Qt Quick 中有两套与布局管理相关的类库,一套叫作 Item Positioner(定位器),一套叫作 Item Layout(布局). 定位器包括 Row(行定位器).Column(列定位 ...
Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才干够自绘.后来发觉不是,原来还有好几种方式都能够画图! 能够使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染).能够构造QSGN ...
Qt Quick 事件处理之信号与槽
前面两篇文章<QML 语言基础>和<Qt Quick 简单教程>中我们介绍了 QML 语言的基本的语法和 Qt Quick 的常见元素,亲们,通过这两篇文章,您应该已经能够完毕 ...
Qt Quick之StackView具体解释（1）
Qt Quick中有个StackView.我在<Qt Quick核心编程>一书中没有讲到.近期有人问起,趁机学习了一下,把它的基本使用方法记录下来. 我准备分两次来讲.第一次讲主要的使用方 ...
Qt Quick 图像处理实例之美图秀秀（附源代码下载）
在<Qt Quick 之 QML 与 C++ 混合编程具体解释>一文中我们解说了 QML 与 C++ 混合编程的方方面面的内容,这次我们通过一个图像处理应用.再来看一下 QML 与 C++ ...
Qt Quick综合实例之文件查看器
假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...
Qt Quick 之 QML 与 C++ 混合编程具体解释
Qt Quick 技术的引入.使得你能够高速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的.也有非常多局限性,原来 Qt 的一些技术,比方低阶的网络编程如 QTcpSocke ...
Qt Quick 之 PathView 具体解释
PathView ,顾名思义,沿着特定的路径显示 Model 内的数据. Model 能够是 QML 内建的 ListModel . XmlListModel ,也能够是在 C++ 中实现的 QAbs ...
Qt Quick 事件处理之信号与槽（foruok的博客）
前面两篇文章<QML 语言基础>和<Qt Quick 简单教程>中我们介绍了 QML 语言的基本语法和 Qt Quick 的常见元素,亲们,通过这两篇文章,您应该已经可以完成简 ...

随机推荐

ovs处理openflow消息的流程
OVS处理各个openflow消息的详细代码在 ofproto/ofproto.c 中: static enum ofperr handle_openflow__(struct ofconn *ofc ...
Atitit.列表页and查询条件的最佳实践(1)------设定搜索条件and提交查询and返回json数据
Atitit.列表页and查询条件的最佳实践(1)------设置查询条件and提交查询and返回json数据 1. 1. 配置条件字段@Conditional 1 1 2. 2. 配置条件字段显示类 ...
org.apache.jasper.JasperException: An exception occurred processing JSP page /admin/jiaoshi/daochuEx
org.apache.jasper.JasperException: An exception occurred processing JSP page /admin/jiaoshi/daochuEx ...
5月，专用程序猿的经典大作——APUE
五一小长假刚刚过去,收回我们游走的心.開始你们的读书旅程吧! 本期特别推荐经典UNIX著作最新版. 20多年来,这本书帮助几代程序猿写出强大.高性能.可靠的代码. 第3版依据当今主流系统进行更新,更 ...
【SEO 决胜网络索引】课程大纲及第一部分第一课：网络营销战略中的索引
内容简介 1.课程大纲 2.第一部分第一课: 网络营销战略中的索引 3.第一部分第二课预告: 索引是什么课程大纲现在是网络为王的时代,人们越来越离不开互联网: SEO(Search Engine ...
告别乱码，针对GBK、UTF-8两种编码的智能URL解码器的java实现（转）
效果图字符字符是早于计算机而存在,从人类有文明那时起,人们就用一个个符号代表世间万象.如ABC,如“一.二.三”. 字符集字符集是所有字符的集合. XXX字符集给字符集中的每一个字符套上一个序 ...
关系数据库的基本概念和MySQL说明
关系数据库的基本概念数据库: 大量的信息化解决方案的高效管理. 根据数据结构来组织.存储和管理数据的库. 数据库系统(DBS,DATABASE SYSTEM): 数据库(DB,DATABASE) + ...
Golang+Mongodb
Golang+Mongodb打造你的第一个站点很多人推荐MEAN来开发站点.MEAN就是M:mongodb,E:expressjs.A:angular最后的N:nodejs. 但是如果你亲身的体会到 ...
关于 cookie 使用中遇到的问题
前段时间在一个项目中涉及到cookie的存取,于是打算封装一个 cookie 的CRUD .按理来说,这本身是一个很简单的问题,不注意的话简单的问题也有大坑. /** * Set or get coo ...
hdoj1010Starship Troopers （树dp，依赖背包）
称号:hdoj1010Starship Troopers 题意:有一个军队n个人要占据m个城市,每一个城市有cap的驻扎兵力和val的珠宝,并且这m个城市的占率先后具有依赖关系,军队的每一个人能够打败 ...

Qt Quick 布局演示

anchors(锚)布局

行布局

列布局

表格布局

流布局

嵌套布局

Qt Quick 布局演示的更多相关文章

随机推荐

热门专题