QML类型:Column(列定位器)

一、描述

Column 是一种将其子项沿单个列定位的类型。它是不使用锚点的情况下垂直定位一系列项目的便捷方式。

下面是一个包含三个不同大小的矩形的列:

Column 
{
    spacing: 2

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

如果列中的项目不可见,或者它的宽度或高度为 0,则项目将不会被布置并且在列中也不可见。

由于 Column 会自动垂直定位其子项,因此 Column 内的子项不应使用 top、bottom、anchors.verticalCenter、fill、centerIn 这些锚点设置,也不应该设置 y 属性。如果需要执行这些操作,请考虑在不使用 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
    }

二、属性成员

1、add : Transition

此属性保存要为添加到此定位器的项目运行的转换。这适用于:

  • 创建定位器后作为定位器子项创建或重新设置父项的项目。
  • Item::visible 属性从 false 更改为 true 的子项。

2、move : Transition

此属性保存为在定位器内移动的项目运行的过渡。这适用于:

  • 由于定位器中项目的添加、移除或重新排列而移位时会移动的子项目。
  • 由于定位器中项目的大小调整而重新定位的子项目。

3、populate : Transition

此属性保存创建定位器时运行的转换。

    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 }

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

4、spacing : real

间距是相邻项目之间留空的像素量。默认间距为 0。

5、四周填充属性:

  • bottomPadding : real
  • leftPadding : real
  • padding : real
  • rightPadding : real
  • topPadding : real

三、信号成员

1、positioningComplete()

当定位完成时发出该信号。

四、成员函数

1、forceLayout()

此方法强制 Column 立即响应其子项中的任何显着更改。

注意:方法一般只应在组件完成后调用。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值