实现的功能大概是这样的:
1、一个Rectangle主窗口,左上角有一个文本Text
2、主窗口中有一个Rectangle停靠在主窗口的最右边,高与主窗口相同,宽比主窗口小
3、定义了一个Flow填充(填满)在停靠的Rectangle中
4、Flow中有一系列的小Rectangle,按照Qt.TopToBottom排列
5、点击这些不同颜色的小Rectangle,文字的颜色会改变
import QtQuick 2.0 //需求:通过Flow布局中的颜色选择器,改变文本的颜色 Rectangle { 900; height: 900; color: "gray"; id: root; //文本 Text { id: txt; text: qsTr("click to change color"); font.pixelSize: 24; anchors.top: parent.top; anchors.topMargin: 8; anchors.left: parent.left; anchors.leftMargin: 8; } //函数——改变文本的颜色 function changeTxtColor(clr) {//参数不需要指定类型 txt.color = clr; } //Rectangle里面放Flow Rectangle { id: flowParent; 300; anchors.top: parent.top; anchors.topMargin: 10; anchors.right: parent.right; anchors.rightMargin: 0; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; border.color: "red"; border. 5; property real subHeight: flowParent.height / 7;//不要放在Flow里面,否则得到的是Flow根据实际情况所放的组件的高度来设置的 //Flow布局 Flow { id: flow; //设置Flow(父组件)在root中的位置 spacing: 0; //设置排列方式 flow: Flow.TopToBottom; //Flow布局下的所有颜色选择组件——放7个组件 Rectangle { id: p1; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p1.color); } } Rectangle { id: p2; Width: flowParent.width; height: flowParent.subHeight;
anchors.left: p1.right;//<------------------------------------------------------------------------注意这一句!!!!!! //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p2.color); } } Rectangle { id: p3; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p3.color); } } Rectangle { id: p4; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p4.color); } } Rectangle { id: p5; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p5.color); } } Rectangle { id: p6; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p6.color); } } Rectangle { id: p7; Width: flowParent.width; height: flowParent.subHeight; //设置边框——如何为自定义的空间设置? border.5; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0); MouseArea { anchors.fill: parent; onClicked: changeTxtColor(p7.color); } } } } }
运行出现:QML Flow: Cannot specify anchors for items inside Flow. Flow will not function.
解决方法:
上述错误说明Flow中不能使用anchors布局,而在代码中(最长箭头所指的语句)Flow布局中的小Rectangle使用了anchors布局,所以不行,只能另想办法设置想要的布局,删掉它!!!
与题目无关的小改动:
把主窗口的Rectangle中浮动在右边的Rectangle中的Flow里面的小Rectangle的width和height属性设置成implicitHeight和implicitWidth