QML —— 四种定位器介绍,及中继器、定位器示例(Row、Column、Gird、Flow)(附完整源码)

示例效果

在这里插入图片描述

定位器介绍

     Row:行定位器一种将其子项沿单行定位的类型。它可以作为一种方便的方式,在不使用锚的情况下水平定位一系列项目。

     Column:列定位器是一种将其子项沿单个列定位的类型。它可以作为一种方便的方式,在不使用锚的情况下垂直定位一系列项目。

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

     Flow:将其子项像单词一样放置在页面上,将它们包装起来以创建项的行或列。

其他

     Repeater:中继器类型用于创建大量类似项目。与其他视图类型一样,Repeater有一个模型和一个委托:对于模型中的每个条目,委托都在一个以模型数据为种子的上下文中实例化。中继器项目通常包含在定位器类型(如行或列)中,以直观地定位中继器创建的多个委托项目。删除或动态销毁由Repeater创建的项会导致不可预知的行为。

     Positioner:定位器类型的对象附着到列、行、流或网格中的顶级子项。它提供的属性允许子项确定其在其父项“列”、“行”、“流”或“网格”的布局中的位置

源码
import QtQuick 2.12
import QtQuick.Window 2.12

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle
    {
        id: rootRect
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "#555555"

        // 行定位器
        Row
        {
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 5
            spacing: 5

            // 中继器
            Repeater
            {
                model: 4

                Rectangle
                {
                    width: 40
                    height: 40
                    color: getRectColor()

                    // 定位器: Positioner.index
                    function getRectColor()
                    {
                        let tColor = "green";
                        switch(Positioner.index)
                        {
                        case 0:tColor = "red";break;
                        case 1:tColor = "yellow";break;
                        case 2:tColor = "blue";break;
                        }
                        return tColor;
                    }
                }
            }
        }

        // 列定位器
        Column
        {
            anchors.left: parent.left
            anchors.leftMargin: 5
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            spacing: 5

            Repeater
            {
                model: 4
                Rectangle
                {
                    width: 40
                    height: 40
                    color: Positioner.isFirstItem ? "red" : "pink"
                    Text
                    {
                        text: parent.Positioner.index
                        anchors.centerIn: parent
                        font.family: "Courier New"
                    }
                }
            }
        }

        // 格子定位器
        Grid
        {
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            spacing: 5

            Repeater
            {
                model: 15
                Rectangle
                {
                    width: 40
                    height: 40
                    color: getColor()
                    function getColor()
                    {
                        let tColor = "green";
                        switch(Positioner.index%5)
                        {
                        case 0:tColor = "red";break;
                        case 1:tColor = "yellow";break;
                        case 2:tColor = "blue";break;
                        case 3:tColor = "pink";break;
                        }
                        return tColor;
                    }

                    Text
                    {
                        text: parent.Positioner.index+1
                        anchors.centerIn: parent
                        font.family: "Courier New"
                    }
                }
            }
        }

        // 自适应定位器
        Flow
        {
            anchors.right: parent.right
            anchors.rightMargin: 5
            anchors.top: parent.top
            anchors.topMargin: 5
            spacing: 5
            width: 300

            Repeater
            {
                /*
                    如果模型是字符串列表或对象列表,
                    则委托还将暴露于保存字符串或对象数据的只读modelData属性
                */
                model: ["apples","oranges","pears","banana","watermelon","tomato","cucumber"]
                Rectangle
                {
                    width: 110
                    height: 40
                    color: getColor()
                    Text
                    {
                        anchors.centerIn: parent
                        text: modelData
                        font.family: "courier new"
                    }

                    function getColor()
                    {
                        let tColor = "green";
                        switch(Positioner.index%5)
                        {
                        case 0:tColor = "red";break;
                        case 1:tColor = "yellow";break;
                        case 2:tColor = "blue";break;
                        case 3:tColor = "pink";break;
                        }
                        return tColor;
                    }
                }
            }
        }
    }
}

关注

笔者 - jxd

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

信必诺

嗨,支持下哥们呗。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值