欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

QML学习摘录 02 - 定位和布局

程序员文章站 2022-05-31 12:04:59
...

定位和布局

完整文档参考:https://github.com/cwc1987/QmlBook-In-Chinese

1. 定位元素

有⼀些QML元素被⽤于放置元素对象,它们被称作定位器,QtQuick模块提供了Row,Column,Grid,Flow⽤来作为定位器。


  • Column(列)元素将它的⼦对象通过自上往下依次对齐⽅式进⾏排列。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
  • Row(⾏)元素将它的⼦对象从左到右,或者从右到左依次排列,排列⽅式取决于layoutDirection属性。spacing属性⽤来设置每个元素之间的间隔⼤⼩。
  • Grid(栅格)元素通过设置rows(⾏数)和columns(列数)将⼦对象排列在⼀个栅格中。可以只限制⾏数或者列数。如果没有设置它们中的任意⼀个,栅格元素会⾃动计算⼦项目总数来获得配置,例如,设置rows为3,添加了6个⼦项目到元素中,那么会⾃动计算columns(列数)为2。属性flow(流)与layoutDirection(布局⽅向)⽤来控制⼦元素的加⼊顺序。spacing属性⽤来控制所有元素之间的间隔。
  • Flow(流)。通过flow属性和layoutDirection(布局⽅向)属性来控制流的⽅向。它能够从头到底的横向布局,也可以从左到右或者从右到左进⾏布局。作为加⼊流中的⼦对象,它们在需要时可以被包装成新的⾏或者列。为了让⼀个流可以⼯作,必须指定⼀个宽度或者⾼度,可以通过属性直接设定,或者通过anchor(锚定)布局设置。

示例代码:演示了四种定位元素的基本用法
import QtQuick 2.3
/*定位元素 Positioning Element
  定位器 :Row,Column,Grid,Flow 用以存放元素对象*/
Item{
    id:root
    width:800; height: 450
    Column{
        width: 200
        height: root.height
        x:20;y:10
        spacing:5
        Text{text: "Colum"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Row{
        width: 200
        height: root.height
        x:120;y:10
        spacing:5
        Text{text: "Row"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Grid{
        width: 300
        height: 300
        x:350;y:10
        rows:2
        columns: 2
        spacing:5
        Text{text: "Grid"}
        Rectangle{
         width: 50;height: 50
         color: "red"
        }
        Rectangle{
         width: 50;height: 50
         color: "green"
        }
        Rectangle{
         width: 50;height: 50
         color: "yellow"
        }
    }
    Rectangle{
        x:10;y:200
        width: parent.width-10
        height: parent.height
        Text{text: "Flow"}
        Flow{
            anchors.fill: parent
            anchors.margins: 20
            spacing: 5
            Repeater{//重复创建元素
                model:20
                Rectangle{
                 width: 50;height: 50
                 color: "red"
                }
            }
        }
    }
}

2. 布局元素

QML使⽤anchors(锚)对元素进⾏布局。anchors是基础元素对象的基本属性,可以被所有的可视化QML元素使⽤。anchors是相对关系的表达式,通常需要与其它元素搭配使⽤。

QML学习摘录 02 - 定位和布局
⼀个元素有6条锚定线(top顶,bottom底,left左,right右,horizontalCenter⽔平中,verticalCenter垂直中)。在⽂本元素(Text Element)中有⼀条⽂本的锚定基线(baseline)。每⼀条锚定线都有⼀个偏移(offset)值,在top,bottom,left,right的锚定线中它们也被称作margins。对于horizontalCenter与verticalCenter与baseline中被称作offsets.

示例代码:演示布局元素的使用

/* 布局元素 Layout Element QML使用anchors(锚)对元素进行布局  */
Rectangle {
    id: root
    width: 800;height: 800
    color: "lightblue"
    Rectangle {
        x: 0; y: 0
        width: 100;height: 100
        Rectangle {
            anchors.fill: parent
            color: "red"
        }
        Text { text: "fill:填充"  }
    }
    Rectangle {
        x: 105; y: 0
        width: 100;height: 100
        Rectangle {
            anchors.left: parent.left
            width: 50
            height: 50
            color: "green"
        }
        Text {text: "left:左对齐"}
    }
    Rectangle {
        x: 210
        y: 0
        width: 100
        height: 100

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 50
            height: 50
            color: "yellow"
        }
        Text { width: 100;wrapMode:Text.Wrap;text: "horizontalCenter:水平中间线对齐"}
    }
    Rectangle {
        x: 0
        y: 105
        width: 100
        height: 100
        Rectangle {
            anchors.centerIn: parent
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text: "centerIn:水平居中" }
    }
    Rectangle {
        x: 105; y: 105
        width: 100;height: 100
        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 20
            width: 50; height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text:"horizontalCenterOffset:偏移20"}
    }
    Rectangle {
        x: 0; y: 210
        width: 100;height: 100
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 20
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100; wrapMode:Text.Wrap;text: "verticalCenterOffset:垂直居中偏移20"}
    }
    Rectangle {
        x: 210
        y: 105
        width: 100
        height: 100
        Rectangle {
            anchors.verticalCenter: parent.verticalCenter
            width: 50
            height: 50
            color: "blue"
        }
        Text {width: 100;wrapMode:Text.Wrap;text: "verticalCenter:垂直居中"}
    }
 }

运行效果如下:
QML学习摘录 02 - 定位和布局