目录

一、定位器（Positioners）

1.Row（行定位器）

2.Column（列定位器）

3.Grid（表格定位器）

二、Layout布局

1.RowLayout（行布局）

2.ColumnLayout（列布局）

3.GridLayout（网格布局）

4.StackLayout

三、信号与槽

1.信号

2.槽

3.连接

---

一、定位器（Positioners）

Row、Column、Grid这些定位器使用anchors属性来定位子元素。anchors提供了一种方式，通过指定一个元素与其他元素的关系来确定元素在界面中的位置，例如可以使用anchors.left、anchors.right、anchors.top和anchors.bottom等属性来设置元素的对齐方式和边距。

1.Row（行定位器）

Row可以将它的子元素排列成一行，是一种将其子项沿单个行定位的容器类型。

2.Column（列定位器）

Column可以将它的子元素排列成一列，是一种将其子项沿单个列定位的容器类型。

共有属性：spacing：用于设置子元素之间的间距，默认间距为0。

   

3.Grid（表格定位器）

Grid是一种以网格形式定位其子items的类型，创建一个足够大的单元格网格以容纳其所有子items，并将这些items从左到右和从上到下放置在单元格中，每个items都位于其单元格的左上角，位置为(0, 0)。

属性：

• rows：保存网格中的行数。
• columns：保存网格中的列数，默认列数为4。
• spacing：设置子元素之间的间距，默认间距为0。
• columnSpacing：设置列与列之间的间距。
• rowSpacing：设置行与行之间的间距。
• layoutDirection：指定定位器的排列方式，默认是Qt.LeftToRight，即子元素从左到右排列；也可设置为Qt.RightToLeft，使子元素从右到左排列。

    

示例：

import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Column {anchors.fill: parentRectangle {anchors.left: parent.leftanchors.right: parent.rightheight: 50color: "red"}Rectangle {anchors.left: parent.leftanchors.right: parent.rightheight: 50color: "green"}Rectangle {anchors.left: parent.leftanchors.right: parent.rightheight: 30color: "blue"}Row {anchors.left: parent.leftanchors.right: parent.rightheight: 100Rectangle {anchors.top: parent.topanchors.bottom: parent.bottomwidth: 50color: "aliceblue"}Rectangle {anchors.top: parent.topanchors.bottom: parent.bottomwidth: 30color: "pink"}}Grid {anchors.left: parent.leftanchors.right: parent.rightcolumns: 2spacing: 5Rectangle {color: "red"width: parent.width / parent.columnsheight: 50}Rectangle {color: "blue"width: parent.width / parent.columnsheight: 50}Repeater {model: 6Rectangle {color: "aliceblue"width: parent.width / parent.columnsheight: 30border.color: "black"}}}}
}

  

二、Layout布局

RowLayout、ColumnLayout、GridLayout：这些布局管理器提供了一些附加属性来控制子元素的定位，如Layout.minimumWidth、Layout.minimumHeight、Layout.maximumWidth、Layout.maximumHeight、Layout.preferredWidth和Layout.preferredHeight等，这些属性可以用于设置子元素的最小、最大和首选尺寸。

1.RowLayout（行布局）

RowLayout用于将子元素水平排列在一行中。它会根据子元素的大小和布局属性自动调整它们的位置和大小，以适应父元素的宽度。

RowLayout {anchors.fill: parentRectangle {Layout.preferredHeight: 50  //height: 50Layout.fillWidth: truecolor: "red"}Rectangle {Layout.preferredHeight: 50  //height: 50Layout.fillWidth: truecolor: "blue"}Rectangle {Layout.preferredHeight: 50  //height: 50Layout.alignment: Qt.AlignTop  //anchors.top: parent.topLayout.fillWidth: truecolor: "green"}
}

  

2.ColumnLayout（列布局）

ColumnLayout用于将子元素垂直排列在一列中。它会根据子元素的大小和布局属性自动调整它们的位置和大小，以适应父元素的高度。

ColumnLayout {anchors.fill: parentspacing: 0Rectangle {Layout.alignment: Qt.AlignLeftLayout.preferredWidth: 50Layout.fillHeight: truecolor: "red"}Rectangle {Layout.alignment: Qt.AlignCenterLayout.preferredWidth: 50Layout.fillHeight: truecolor: "green"}Rectangle {Layout.alignment: Qt.AlignRightLayout.preferredWidth: 50Layout.fillHeight: truecolor: "blue"}
}

  

3.GridLayout（网格布局）

GridLayout用于将子元素排列在一个网格中。它创建一个足够大的单元格网格以容纳所有子元素，并将它们从左到右、从上到下放置在单元格中。

GridLayout {anchors.fill: parentcolumns: 3Repeater {model: 7Rectangle {Layout.fillHeight: trueLayout.fillWidth: truecolor: "aliceblue"}}
}

  

4.StackLayout

属性：

• Orientation：用于指定布局方向，有两个取值，Vertical表示垂直方向布局，Horizontal表示水平方向布局，默认值是Vertical。
• Spacing：用于设置每个子视图之间的间隙，默认为6.0。
• VerticalOptions和HorizontalOptions：用于布局定位和设置布局元素大小，有8个属性值，分别是Start、Center、End、Fill、StartAndExpand、CenterAndExpand、EndAndExpand、FillAndExpand。这些属性值可以根据其他布局的内容大小自动填充空白位置。
• Children：用于在代码中灵活地添加子控件，可以通过向该集合中添加控件来实现动态添加。
• count：保存属于布局的项目数，只有作为StackLayout子项的item才会成为布局的候选对象。
• currentIndex：保存当前在StackLayout中可见的子项的索引，默认情况下，空布局为 -1，否则默认为0（指第一项）。

应用场景：

• 界面切换：常用于实现选项卡式界面或在有限空间内切换不同视图或内容的界面。
• 简单列表或表单布局：适用于创建简单的垂直或水平列表，或用于排列表单中的输入字段和标签。
• 导航栏或工具栏布局：可用于创建水平方向的导航栏或工具栏，将多个按钮或图标水平排列。

StackLayout {id: stackanchors.fill: parentRectangle {color: "blue"TapHandler {onTapped: stack.currentIndex = 1;}}Rectangle {color: "red"TapHandler {onTapped: stack.currentIndex = 0;}}
}

点击界面实现颜色切换。

     

三、信号与槽

1.信号

使用signal关键字在QML对象内部定义信号，可以有参数也可以无参数。

由对象内部逻辑或外部事件（如鼠标点击、键盘输入等）触发，触发时就像调用函数一样，如果有参数需要传入正确的参数值。

2.槽

本质是JavaScript函数，定义在QML对象内部，用于处理信号传来的事件或数据。

3.连接

Connections对象用于连接信号与槽。通过设置target为信号源对象，然后定义on<SignalName>函数来处理信号。

在合适的对象关系下（如同一个对象或父子对象关系等），可以直接通过属性绑定的方式连接信号和槽。例如，在Button的onClicked触发信号，在同一个对象中定义on<SignalName>来处理信号。

示例：

Window {id: windowwidth: 640height: 480visible: truetitle: qsTr("Hello World")signal testSig(string s, int x)Button {width: 100height: 50anchors.centerIn: parentonClicked: testSig("abc",123)}Connections {target: window  //不能用parentfunction onTestSig(str, value){console.log(str,value);}}
}

Connections的target属性需要明确指向一个对象，而parent是一个动态属性，如果绑定parent可能无法在Connections初始化时正确解析。