1.Qt Quick快速入门之qml布局

[复制链接]

该用户从未签到

2380

主题

2433

帖子

9139

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
9139
QQ
跳转到指定楼层
楼主
发表于 2017-7-29 22:45:08 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

想要查看内容赶紧注册登陆吧!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

Qml里面布局主要有两种,锚点布局、Grid布局。

  锚点布局使用anchors附件属性将一个元素的边定位到另一个元素的边,从而确定元素的位置和大小。下面是示例

  1. import QtQuick 2.3
  2. import QtQuick.Window 2.0

  3. Window {
  4.     id:anchorLayoutWindow;
  5.     width: 480;
  6.     height: 320;
  7.     title: "AnchorLayout";

  8.     Rectangle{
  9.         id:rect1;
  10.         width: parent.width;
  11.         height:50;
  12.         color:"blue";
  13.         anchors.top: parent.top;
  14.         Text{ text: "Top"; anchors.horizontalCenter: parent.horizontalCenter;anchors.top:parent.top; color:"white"; }
  15.     }

  16.     Rectangle{
  17.         id:rect2;
  18.         width: parent.width/4;
  19.         color: "red";
  20.         anchors.top:rect1.bottom;
  21.         anchors.bottom: rect4.top
  22.         anchors.left: parent.left;
  23.         Text{ text: "Left"; anchors.verticalCenter: parent.verticalCenter; anchors.left: parent.left;color:"white"; }
  24.     }

  25.     Rectangle{
  26.         id:rect3;
  27.         color: "green";
  28.         width:rect2.width;
  29.         anchors.top:rect1.bottom;
  30.         anchors.bottom: rect4.top;
  31.         anchors.right:parent.right;
  32.         Text{ text: "Right";anchors.right: parent.right;anchors.verticalCenter: parent.verticalCenter;color:"white"; }
  33.     }

  34.     Rectangle{
  35.         id:rect4;
  36.         width: parent.width;
  37.         height:50;
  38.         color:"yellow";
  39.         anchors.bottom: parent.bottom;
  40.         Text{ text: "Bottom"; anchors.horizontalCenter: parent.horizontalCenter;anchors.bottom: parent.bottom;color:"blue";}
  41.     }

  42.     Rectangle{
  43.         id:rect5;
  44.         color:"#FF605066";
  45.         anchors.top:rect1.bottom;
  46.         anchors.bottom: rect4.top;
  47.         anchors.left: rect2.right;
  48.         anchors.right: rect3.left;
  49.         Text{ text: "Center";anchors.centerIn: parent; color:"white";}
  50.     }

  51. }
复制代码

效果如下图

Grid布局有GridLayout、ColumnLayout、RowLayout、Column、Row,其中ColumnLayout、RowLayout只是GridLayout的一种特例,ColumnLayout表示只有一列,RowLayout表示只有一行。

  GridLayout使用columns、rows属性将空间分成若干单元格,使用columnSpacing、rowSpacing确立单元格之间的间隔。而GridLayout内部元素的大小由Layout.fillWidth、Layout.fillHeight以及Layout.preferredWidth、Layout.preferredHeight来确定,如Layout.fillWidth:true表示宽度填充整个单元格,Layout.preferredWidth则指定一个建议宽度。Layout.row、Layout.column确定内部元素处于哪个单元格。注意,不要将内部元素的宽度、高度、x、y与GridLayout进行绑定,容易导致绑定循环。

  Column、Row类似于html中的float或是wpf中的StackPanel,会直接将元素一个个挨在一起,元素间的间隔使用spacing控制

  下面是GridLayout布局的一个示例

  1. import QtQuick 2.3
  2. import QtQuick.Window 2.0
  3. import QtQuick.Layouts 1.1

  4. Window {
  5.     id:gridLayoutWindow;
  6.     title:"GridLayoutWindow";
  7.     width: 480;
  8.     height: 320;
  9.     GridLayout{
  10.         id: gridLayout1
  11.         columns: 2;
  12.         rows:2;
  13.         anchors.fill: parent;
  14.         anchors.margins: 5;
  15.         columnSpacing: 0;
  16.         rowSpacing: 0;

  17.         Rectangle{
  18.             id:rect00;
  19.             color: "red";
  20.             Layout.fillWidth: true;
  21.             Layout.fillHeight: true;
  22.         }

  23.         Rectangle{
  24.             id:rect01;
  25.             color: "blue";
  26.             Layout.fillWidth: true;
  27.             Layout.fillHeight: true;
  28.         }

  29.         Rectangle{
  30.             id:rect10;
  31.             color: "green";
  32.             Layout.fillWidth: true;
  33.             Layout.fillHeight: true;
  34.             Layout.row:1;
  35.             Layout.column: 1;
  36.         }

  37.     }
  38. }
复制代码

效果如下所图

  

 SplitView用于提供带切分条的布局,下面是示例

  1. import QtQuick 2.3
  2. import QtQuick.Window 2.0
  3. import QtQuick.Layouts 1.1
  4. import QtQuick.Controls 1.2

  5. Window {
  6.     width: 480;
  7.     height: 320;
  8.     title: "SplitView";

  9.     SplitView{
  10.         anchors.fill:parent;
  11.         orientation: Qt.Horizontal;
  12.         Rectangle{
  13.             id:rect1;
  14.             width:100;
  15.             color:"red";
  16.         }
  17.         Rectangle{
  18.             id:rect2;
  19.             Layout.fillWidth: true;
  20.             Layout.minimumWidth: 50;
  21.             color:"blue";
  22.         }
  23.         Rectangle{
  24.             id:rect3;
  25.             width:100;
  26.             color:"green";
  27.         }
  28.     }
  29. }
复制代码

下面是效果图,注意实际情况可以拖拉切分条

  

  OK,有了以上几种布局方式,通过一定的组合相信可以应对大部分布局需求了

分享到:  QQ好友和群QQ好友和群
收藏收藏
回复

使用道具 举报

快速回复高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表