QML基本布局管理

import QtQuick 2.12

Item {
    // 垂直排列
    Column {
        spacing: 2
        Rectangle {color: "red"; width: 50; height: 50}
        Rectangle {color: "green"; width: 50; height: 50}
        Rectangle {color: "blue"; width: 50; height: 50}
    }
    // 水平排列
    Row {
        spacing: 2
        Rectangle {color: "red"; width: 50; height: 50}
        Rectangle {color: "green"; width: 50; height: 50}
        Rectangle {color: "blue"; width: 50; height: 50}
    }
    // 网格排列
    // 向单元格放置项目，会从左向右，从上向下进行排列。
    // 默认有4列， 行不限，可以通过columns和rows属性来指定
    Grid {
        columns: 3
        spacing: 2
        Rectangle {color: "red"; width: 50; height: 50}
        Rectangle {color: "green"; width: 50; height: 50}
        Rectangle {color: "blue"; width: 50; height: 50}
        Rectangle {color: "cyan"; width: 50; height: 50}
        Rectangle {color: "magenta"; width: 50; height: 50}
    }
    // Flow通过换行使项目排列成多个行或列
    // Flow.LeftToRight使项目从左向右排列，当超出Flow的宽度就自动换行
    // Flow.TopToBottom使项目从上向下排列，当超出Flow的高度就换到下一列
    Flow {
        spacing: 2
        Rectangle {color: "red"; width: 50; height: 50}
        Rectangle {color: "green"; width: 50; height: 50}
        Rectangle {color: "blue"; width: 50; height: 50}
        Rectangle {color: "cyan"; width: 50; height: 50}
        Rectangle {color: "magenta"; width: 50; height: 50}
    }

    Grid {
        rows: 5
        columns: 5
        spacing: 10
        // Repeater元素用来创建大量相似的项目，
        // 一个Repeater包含一个模型model和一个委托delegate
        // 委托用来将模型中的每一个条目分别实例化
        Repeater {
            width: 70
            height: 70
            Text {
                text: index
                font.pointSize: 30
                anchors.centerIn: parent
            }
        }
    }
    // 基本布局
    Rectangle {
        id: pid
        color: "red"
        // 如果即使用了color又使用了gradient，最终会使用gradient
        gradient: Gradient{
                    GradientStop { position: 0.0; color: "lightsteelblue" }
                    GradientStop { position: 1.0; color: "blue" }
        }
        border.width: 1
        radius: 2
        smooth: true
        Text {
            left: 0
            right: 0
            top: 0
            bottom: 0
            elide: Text.ElideLeft //Text.ElideNone(默认), Text.ElideLeft, Text.ElideMiddle, Text.ElideRight
            font.bold: true // 加粗
            font.family: "宋体" // 字体
            font.italic: true // 是否倾斜
            font.letterSpacing: 2 // 字符间距
            font.wordSpacing: 2// 单词间距
            font.pixelSize: 24 //单位像素，依赖于设备
            font.pointSize: 24 // 大于0的值，与设备无关
            font.strikeout: true // 是否有删除线
            font.underline: true// 是否有下划线
            font.weight: Font.Bold // 字体重量 Font.Light, Font.Normal, Font.DemiBold, Font.Bold, Font.Black
            // 大写策略
            // Font.MixedCase不改变大小写
            // Font.AllUppercase 全部大写
            // Font.AllLowercase 全部小写
            // Font.SmallCaps 小写字母转大写字母，但不改变字体大小
            // Font.Capitalize 首字母大写
            font.capitalization: Font.Capitalize
            // 加载字体
            //FontLoader {source: "https:// www.mysite.com/myfont.ttf"} // 从网络加载
            //FontLoader {name: "myfont"} // 指定字体名称
            horizontalAlignment: Text.AlignLeft // Text.AlignLeft, Text.AlignRight, Text.AlignHCenter
            verticalAlignment: Text.AlignBottom // Text.AlignTop, Text.AlignBottom, Text.AlignVCenter
            style: Text.Sunken // Text.Normal, Text.Outline(描边), Text.Raised(凸起), Text.Sunken(凹陷)
            styleColor: "red"
            // Text.NoWrap 不换行
            // Text.WordWrap 在单词边界换行
            // Text.WrapAnyWhere 只要到达边界就换行，甚至是一个单词中间
            // Text.Wrap 如果可能，会尽量在单词边界换行
            wrapMode: Text.WordWrap
        }
        Text {
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter
            anchors.horizontalCenterOffset: 1
            anchors.verticalCenterOffset: 1
        }
        Text {
            anchors.leftMargin: 1
            anchors.topMargin: 1
            anchors.rightMargin: 1
            anchors.bottomMargin: 1
            anchors.margins: 1
        }
        // 支持copy(), cut(), paste()
        // openSoftwareInput(),closeSoftwareInput() 打开/关闭软键盘
        TextEdit {
            focus: true
        }
        // 单行可编辑框
        TextInput {
            focus: true
            echoMode: TextInput.Password
            validator: IntValidator{bottom: 11; top: 21}
        }
    }
}