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}
}
}
}