QML类型说明-Column

Column

ImportStatement:   import QtQuick 2.2

Inherits:      Item

 

Properties

add :Transition

move :Transition

populate :Transition

spacing :real

 

DetailedDescription

子组件以垂直方式布局，他是不适用锚定布局一系列组件的简便方法。

Column {

    spacing: 2

 

    Rectangle { color: "red"; width:50; height: 50 }

    Rectangle { color: "green";width: 20; height: 50 }

    Rectangle { color: "blue"; width:50; height: 20 }

}

这些矩形自动以垂直方式布局，像下面这样：

如果一个Column中的组件不可见，或者它的宽或高为0。改组件将不会被布局，并在Column中不可见。因为Column是自动布局子组件，所以子组件不要设置y坐标或者垂直锚定到顶部、底部、垂直正中、填充或中央锚定。如果我们需要执行这些操作，考虑不使用Column。注意列中的组件可以使用Positioner关联属性来访问它在Column中的位置信息。

 

应用过渡：

Column动画组件可使用指定的过渡来处理子组件的增加或移除。

例如下面的动画：

Column {

    spacing: 2

 

    Rectangle { color: "red"; width:50; height: 50 }

    Rectangle { id: greenRect; color:"green"; width: 20; height: 50 }

    Rectangle { color: "blue"; width:50; height: 20 }

 

    move: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

 

    focus: true

    Keys.onSpacePressed: greenRect.visible =!greenRect.visible

}

当空格键被按下，绿色矩形不可见，在它消失和显示的时候，蓝色矩形在列内如下移动。

注意绿色的矩形，当它消失时，是因为被移除，触发move过渡。而此时蓝色矩形因为获得新位置，触发move过渡。当它显示时，蓝色矩形因为失去位置触发过渡，而绿色矩形由于占用了蓝色的位置，在蓝色位置的过渡目标表中，所以绿色矩形也有动画。

另外，位置是组件的(x,y)坐标。

注意Column中隐含定位器。而Column中的子组件触发过渡，是因为子组件在定位器上失去位置或获得位置导致的。

 

PropertyDocumentation

add :Transition

往列中增加组件或一个组件由不可见变得可见时，这个过渡触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。可参阅ViewTransition的文档来了解更多信息。

注意在Column创建时已经是列的一部分的子组件不会触发这个过渡，取代的，是触发populate过渡。

 

move :Transition

当由于添加，移除或重新排列子组件导致组件失去当前所处的位置，或改变组件的大小导致子组件失去位置时，这个过渡被触发。过渡能用ViewTransition属性去访问添加在子组件上的细节。注意对这个过渡来说，只有当过渡被在移动组件的位置添加组件而失去位置所触发时，ViewTransition.targetIndexes和ViewTransition.targetItems列表才被设置。其他情况，列表是空的。可参阅ViewTransition的文档来了解更多信息。

注意：在Qt Quick 1，Column被创建时的所有存在子组件，都使用这个过渡。而在Qt Quick 2中，使用populate这个过渡来处理Column的第一次创建。

 

populate :Transition

Column第一次被创建时，已经是Column的一部分的子组件触发的过渡。过渡能用ViewTransition属性去访问添加在子组件上的细节。可参阅ViewTransition的文档来了解更多信息。

 

spacing :real

相邻的子组件之间的保留空间，默认为0。