QML中利用ColumnLayout 、Rectangle、Grid、RowLayout布局方法

最新推荐文章于 2024-03-17 00:05:37 发布
最新推荐文章于 2024-03-17 00:05:37 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： Qt开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmwz0001/article/details/119459238
版权

QML中利用ColumnLayout 、Rectangle、Grid布局方法：
anchors.fill:parent:锚点布局：填充父窗口
Layout.fillHeight:true 填充高度
Layout.fillWidth:true 填充宽度
布局思路：先用ColumnLayout，然后再用Rectangle划分每个区域，在rectangle中再RowLayout或Grid
进行布局，如果一行的控件比较多建议使用Grid，这里注意一行中的对齐方式的设置，如果想所一行中的所有控件都竖向居中，首先在上一级布局控件中设置竖向居中，然后在本级控件中设置竖向居中，个人一点学习新得，如有不妥欢迎批正！共同学习！

Dialog {
    id:dmdialog
    width: 959
    height: 675
    title: "周视图"
    visible:  false
 ColumnLayout{
        anchors.fill: parent
        Rectangle{
            Layout.fillHeight: true
            Layout.fillWidth: true
            TableView {
                id:tbv
                anchors.fill: parent
                model: dataModel
                sortIndicatorVisible:true
                TableViewColumn {role: "Id";title: "查询项";width: 100}
                TableViewColumn { role: "cameraName"; title: "周一";width: 100}
                TableViewColumn { role: "checkPointName"; title: "周二"; width: 100}
                TableViewColumn { role: "channelId"; title: "周三";width: 100}
                TableViewColumn { role: "containStraight"; title: "周四"; width: 100}
                TableViewColumn { role: "containLeft"; title: "周五";width: 100}
                TableViewColumn { role: "containRight"; title: "周六"; width: 100}
                TableViewColumn { role: "countTime"; title: "周日";width: 150}

                headerDelegate: Rectangle{

                    implicitWidth: 10
                    implicitHeight: 24
                    border.color: "white"
                    color: "gray"
                    border.width: 1
                    MouseArea
                    {
                        id: mous
                        anchors.fill: parent
                        //接收左键和右键
                        acceptedButtons:Qt.LeftButton | Qt.RightButton;
                        Text{
                            id:headertext
                            anchors.fill: parent
                            text: styleData.value
                            color: styleData.pressed ?"blue" : "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pointSize: 11
                            font.bold: true


                        }
                        onClicked: {
                            if (mouse.button === Qt.RightButton)
                            {
                                //发射自定义信号
                                var colId=0;
                                if(headertext.text=="编号")
                                {
                                    colId=0;
                                }
                                else if(headertext.text=="摄像头名称")
                                {
                                    colId=1;
                                }
                                else if(headertext.text=="检测点名称")
                                {
                                    colId=2;
                                }
                                else if(headertext.text=="通道")
                                {
                                    colId=3;
                                }
                                else if(headertext.text=="直")
                                {
                                    colId=4;
                                }
                                else if(headertext.text=="左")
                                {
                                    colId=5;
                                }
                                else if(headertext.text=="右")
                                {
                                    colId=6;
                                }
                                else if(headertext.text=="时间")
                                {
                                    colId=7;
                                }
                                else if(headertext.text=="计数")
                                {
                                    colId=8;
                                }
                                else if(headertext.text=="速度")
                                {
                                    colId=9;
                                }
                                else if(headertext.text=="车道占有率")
                                {
                                    colId=10;
                                }
                                dataModel.sendSignal(colId);
                                tbv.model="";
                                tbv.model=dataModel;
                            }
                        }
                    }
                }
                rowDelegate: Rectangle{
                    height: 24
                    color: styleData.selected?"blue":(styleData.alternate?"#ffffff":"#ffffFF")
                }

                itemDelegate: Rectangle {
                    height: 50
                    color: "transparent"
                    width: parent.width
                    Text {
                        anchors.fill: parent
                        width: parent.width
                        color: styleData.textColor
                        text: styleData.value
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                        font.pointSize: 10
                    }
                }


            }

        }
        Rectangle{
            height: 30
            Layout.fillWidth: true
            color:"lightblue"

            Grid{
                Layout.fillWidth: true
                height: parent.height
                verticalItemAlignment: Grid.AlignVCenter
                columns: 7
                spacing: 5
                leftPadding: 10
                rightPadding: 10

                Label {
                    id: cameraNameLabel
                    width: 70
                    height: parent.height
                    verticalAlignment: "AlignVCenter"
                    text: qsTr("摄像头名称:")
                }
                ComboBox {
                    id: cameraNameComboBox
                    width: 100
                    height: 22

                    editable: true

                    onEditTextChanged: {
                        //发送信号

                        var c_result1=dataModel.getPointByCameraName(cameraNameComboBox.editText.trim());
                        var temp_qml_model1=new Array();
                        for(var i=0;i<c_result1.length;++i)
                        {
                            temp_qml_model1.push(c_result1[i]);
                        }
                        checkPointNameComboBox.model=temp_qml_model1;

                    }
                }
                Label {
                    id: checkPointNameLabel
                    height: parent.height
                    verticalAlignment: "AlignVCenter"
                    text: qsTr("检测点名称:")
                }
                ComboBox {
                    id: checkPointNameComboBox
                    width: 100
                    height: 25
                    editable: true
                }
                Label {
                    id: channelLabel
                    height: parent.height
                    verticalAlignment: "AlignVCenter"
                    text: qsTr("通道:")
                }
                ComboBox {
                    id: channelComboBox
                    width: 100
                    height: 25
                    editable: true
                }
                Button {
                    id: queryButton
                    width: 40
                    height: 25
                    text: qsTr("查询")
                    onClicked: {
                        var cameraName_str=cameraNameComboBox.editText.toString();
                        var checkPointName_str=checkPointNameComboBox.editText.toString();
                        var startDateTime_str=Date.fromLocaleString(Qt.locale(), startDateTimeTextField.text, "yyyy-MM-dd hh:mm:ss");
                        var endDateTime_str=Date.fromLocaleString(Qt.locale(), endDateTimeTextField.text, "yyyy-MM-dd hh:mm:ss");
                        var totalIntervalspinbox_str=totalIntervalspinbox.value.toString();
                        if(startDateTime_str=="Invalid Date"||endDateTime_str=="Invalid Date")
                        {
                            promptDlg.title="信息提示";
                            pDlgText.text="查询时间不能为空！请填写完整！";
                            promptDlg.visible=true;
                        }
                        else
                        {
                            if(dateDifference(startDateTime_str,endDateTime_str)>30)
                            {
                                promptDlg.title="信息提示";
                                pDlgText.text="查询范围超限！为了防止查询时间过长影响检测性能！仅能查询30天以内的数据！";
                                promptDlg.visible=true;
                            }
                            else
                            {
                                var start_str=startDateTimeTextField.text;
                                var end_str=endDateTimeTextField.text;

                                dataModel.sendQuerySignal(cameraName_str,checkPointName_str,start_str,end_str,totalIntervalspinbox_str);
                                tbv.model="";
                                tbv.model=dataModel;
                            }
                        }
                    }
                    //自定义函数
                    function  dateDifference(start,end){
                        var stime =new Date(start).getTime();
                        var etime = new Date(end).getTime();
                        var usedTime = etime - stime;  //两个时间戳相差的毫秒数
                        var days=Math.floor(usedTime/(24*3600*1000));
                        return days;
                    }
                }
            }
        }
        Rectangle{
            height: 30
            Layout.fillWidth: true
            color:"lightblue"
            RowLayout{
                anchors.fill: parent
                spacing: 15

                Label {
                    id: timelabel
                    width: 20
                    leftPadding: 10
                    Layout.fillHeight: true
                    verticalAlignment: "AlignVCenter"
                    text: qsTr("时段")
                }
                Con25.RangeSlider{
                    id:timeRangeSlider
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    from: 1
                    to: 24
                    first.value: 1
                    second.value: 4
                    stepSize: 0.5
                    first.onMoved:
                    {
                        promptlable.text="当前时段："+first.value.toFixed(0)+"-"+second.value.toFixed(0)+"   当前周："+dateSlider.value.toFixed(0);
                    }
                    second.onMoved:
                    {
                        promptlable.text="当前时段："+first.value.toFixed(0)+"-"+second.value.toFixed(0)+"   当前周："+dateSlider.value.toFixed(0);
                    }
                }

            }
        }
        Rectangle{
            height: 30
            Layout.fillWidth: true
            color:"lightblue"

            RowLayout{
                anchors.fill: parent
                spacing: 15
                Label {
                    id: datelabel
                    width: 20
                    leftPadding: 10
                    Layout.fillHeight: true
                    verticalAlignment: "AlignVCenter"
                    text: qsTr("日期")
                }
                Con25.Slider{
                    id:dateSlider
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    from: 1
                    value: 1
                    stepSize: 1
                    to: 52
                    onValueChanged: {
                        promptlable.text="当前时段："+timeRangeSlider.first.value.toFixed(0)+"-"+timeRangeSlider.second.value.toFixed(0)+"   当前周："+dateSlider.value.toFixed(0);
                    }
                }

            }
        }

        Rectangle{
            height: 20
            Layout.fillWidth: true
            color:"red"
            RowLayout{
                anchors.fill: parent
                spacing: 15
                Label{
                   id:promptlable
                   text: ""
                   color: "white"
                   visible: true
                   leftPadding:10
                }

            }
        }

    }
}
864记忆
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
qml自编布局控件Row与Column
12-17
笔者在使用Qml语言开发产品时，使用quick1.1版本，都是一些基础的控件，比如布局类的控件（Row, Column等）这样的控件虽然通用，但在特定的场合下还是有很大的局限性。比喻Row水平布局没有自动居中布局控件的功能，不能设置控件与控件之间的指定间距（Row水平布局是等分间距），还不能指定第一控件与最后控件的间距。
QML 布局：列布局（ColumnLayout）和行布局（RowLayout ）
weixin_42948436的博客
05-11 9387
列布局和行布局相同，都具备以下属性。 导入模块 import QtQuick.Layouts 1.1 继承 item类 属性 layoutDirection 布局的布局方向。 spacing 每个单元格之间的间距。 ColumnLayout中的项支持以下附加属性 Layout.minimumWidth 设置布局中项的最小宽度。将该值设置为-1将把宽度重置为隐式的最小宽度。 Layout.minimumHeight 设置布局中项目的最小高度。 Layout.preferredWidth 设置布局中项目的首选
QML 布局管理器之ColumnLayout
最新发布
liushiyi3083862599的博客
03-17 302
QML中的ColumnLayout是一种布局元素，用于在垂直列中排列其子元素。一.ColumnLayout讲解。
Qt Qml 可拖动设置Rectangle大小Demo
10-12
Qt Qml 可拖动设置Rectangle大小Demo
QT QML的元素布局
01-08
本文介绍QT QML跨平台移动APP开发中的元素布局的相关问题，先看一张图，我们来分析一下其中的问题： 这张图片中，有如下问题： 整体的布局没有居中显示 班级名称： 没有和 请输入班级名称输入框垂直对齐 和输入框的距离太远 班主任的提示也一样 最后的Button一行，需求要求右对齐，在QML的程序中没有实现 代码修改完以后的效果： 改变宽度试一下： 原代码说明： main.qml import QtQuick 2.12 import QtQuick.Window 2.12 Window { visible: true width: 640 height: 480 title: q
QT QML的元素布局的实现
08-24
主要介绍了QT QML的元素布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Roson的Qt之旅 #111 QML布局-ColumnLayout和RowLayout
Allen Roson
08-29 1114
QtQuick布局用法；行布局；列布局；Qt布局
QML类型：StackLayout、GridLayout、ColumnLayout、RowLayout
友善啊，朋友的博客
01-29 2249
StackLayout 一、描述 StackLayout 类提供了一个项目堆栈布局，其中一次只有一个项目可见。 与大多数其他布局相比，子项的 Layout.fillWidth 和 Layout.fillHeight 属性默认为 true。因此，子项默认填充以匹配 StackLayout 的大小，只要它们的 Layout.maximumWidth 或 Layout.maximumHeight 不阻止它。 以下代码将创建一个 StackLayout，其中只有“plum”矩形可见： StackLayo
QML类型说明-Column
杞櫹椅桐的专栏
09-01 2027
Column ImportStatement:   import QtQuick 2.2 Inherits:      Item   Properties add :Transition move :Transition populate :Transition spacing :real   DetailedDescription 子组件以垂直方式布局，他是不适用锚定布局一
QML控件之 RowLayout
u013804856的博客
10-20 3840
水平布局管理器：RowLayout 与之对应的是 ColumnLayout 可以改变RowLayout 的如下四个属性，从而改变Item的位置： Layout.alignment: Qt.AlignBottom Layout.topMargin: 15 Layout.bottomMargin: -25 Layout.leftMargin:-5
qml layout
weixin_30781107的博客
03-05 218
一、使用总结 1.锚点：锚点锚在父控件左边anchors.left: parent.left，才可以设置anchors.leftMargin：20 才有作用，设置anchors.topMargin: 60是没用的。可以这样设置 anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 30 ...
qml中文手册pdf
12-28
qml中文手册pdf,全中文，很详细。各种示例，简单易学。
Qt 5.12--布局元素（Layout Items）
天道酬勤
01-08 1370
Qt 5.12学习笔记--布局元素（Layout Items）1 简介2 Row布局3 Column布局4 Grid布局5 锚点布局6 混合应用参考 1 简介 Qml里面布局主要有Row,、Column、Grid，以及使用Anchor进行布局 Row QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。 Column Q...
QML中Rectangle的用法和属性
热门推荐
CN小黑
03-12 1万+
盒子模型也是QML的特点之一。这里最值得一提的还是Rectangle这个item，因为他的用处很广泛。他可以用来对某个区域进行操作和绘制。比如你要在特定的地方指定接收鼠标单击事件，或者某个地方显示特定的颜色。 简单看一看Rectangle的一些属性。 import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: ...
QML之Rectangle属性
Luck-Dream的博客
06-02 1万+
QML的Rectangle组件，顾名思义就是描绘一个矩形，一个可视化的对象。外加设置属性来达到我们想要的效果。常用的有矩形的颜色，边框颜色，圆角等设置。 Rectangle{         id:rect_buttom  //id,一个名字，用来识别         x:100     //相对父窗口的坐标         y:100         width: 200  /
ColumnLayout的使用方法
Java天堂
01-09 583
CoulumnLayout是经常用到的布局类型，但也是让人感到迷惑的布局。主要原因是同一效果的定义方法有多种。笔者在早期的一篇博文虽然也做过讲解，但是因为例子写的是简洁的写法，反而没把问题说清楚，实在深感抱歉。 总体上说要达到同一效果，CoulumnLayout的定义方法有以下4种： ■      一行定义一个CoulumnLayout，每列中只有一个控件 ■      只定义一个Coulu...
QML类型——Column
fengyanyu68的博客
07-15 731
正文 以列的形式对子元素进行布局。 详细说明 Colum是一个将其子元素放在一列上的类型。它可以用作在不适用anchors毛垫的情况下垂直放置一系列元素。 以下示例包含三个大小不同的矩形列： Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "b
QML类型：Column（列定位器）
友善啊，朋友的博客
09-30 3267
一、描述 Column 是一种将其子项沿单个列定位的类型。它是不使用锚点的情况下垂直定位一系列项目的便捷方式。 下面是一个包含三个不同大小的矩形的列： Column { spacing: 2 Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "blue"; width: 50
QT_QML 界面设计Row和Column布局
weixin_33750452的博客
04-26 827
Column与Row的使用方式类似，下面以Column为例子： Column{ x: label_poseParamValue.x + label_poseParamValue.width + 10 y: label_poseParamValue.y //width: 30 //--不需要指定，最终的长度由内部的各...
qml中使用Rectangle内容过多如何实现滚动展示
05-25
在 QML 中，您可以将 Rectangle 放置在一个 ScrollView 中，以实现滚动展示。以下是一个简单的示例： ```qml import QtQuick 2.0 import QtQuick.Controls 2.12 ScrollView { width: 200 height: 200 Rectangle { width: 2000 // 宽度比 ScrollView 大 height: 2000 // 高度比 ScrollView 大 color: "red" } } ``` 在这个示例中，我们创建了一个 ScrollView，它的宽度和高度都是 200。在 ScrollView 中，我们放置了一个宽度和高度都比 ScrollView 大的 Rectangle。这样，当我们运行程序时，就可以使用 ScrollView 在 Rectangle 中进行滚动。 如果您想在 ScrollView 中放置更多的内容，可以使用一个适当的布局（如 ColumnLayout 或 RowLayout），并将其放置在 ScrollView 中。例如： ```qml import QtQuick 2.0 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 ScrollView { width: 200 height: 200 ColumnLayout { Rectangle { width: 200 height: 100 color: "red" } Rectangle { width: 200 height: 100 color: "blue" } Rectangle { width: 200 height: 100 color: "green" } } } ``` 在这个示例中，我们在 ScrollView 中放置了一个 ColumnLayout，并在其中添加了三个 Rectangle。当列的高度超过 ScrollView 的高度时，将自动启用滚动条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值