QML布局管理
QML中的布局管理
1. 定位器
Column
Row
Grid
Flow
2. 重复器Repeater
3. 使用切换
四个定位器中都有一个add和move属性，都需要分配一个Transition对象
QML中给予锚的布局
anchor.margins来指定四个相同的边距
leftMargin、rightMargin、topMargin和bottomMargin来独立指定锚边距
学习Qt的资料比较少，Qt自带Demo是非常不错的选择。下面来自Example：QML Control
界面如下：
代码如下：
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the Qt Quick Controls module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
** of its contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
Item {
id: flickable
anchors.fill: parent
enabled: enabledCheck.checked
property int tabPosition: tabPositionGroup.current === r2 ? Qt.BottomEdge : Qt.TopEdge
RowLayout {
id: contentRow
anchors.fill:parent
anchors.margins: 8
spacing: 16
ColumnLayout {
id: firstColumn
Layout.minimumWidth: implicitWidth
Layout.fillWidth: false
RowLayout {
id: buttonrow
Button {
id: button1
text: "Button 1"
tooltip:"This is an interesting tool tip"
Layout.fillWidth: true
}
Button {
id:button2
text:"Button 2"
Layout.fillWidth: true
menu: Menu {
MenuItem { text: "This Button" }
MenuItem { text: "Happens To Have" }
MenuItem { text: "A Menu Assigned" }
}
}
}
ComboBox {
id: combo
model: choices
currentIndex: 2
Layout.fillWidth: true
}
ComboBox {
model: Qt.fontFamilies()
Layout.fillWidth: true
currentIndex: 47
}
ComboBox {
id: editableCombo
editable: true
model: choices
Layout.fillWidth: true
currentIndex: 2
onAccepted: {
if (editableCombo.find(currentText) === -1) {
choices.append({text: editText})
currentIndex = editableCombo.find(editText)
}
}
}
RowLayout {
SpinBox {
id: t1
Layout.fillWidth: true
minimumValue: -50
value: -20
}
SpinBox {
id: t2
Layout.fillWidth: true
}
}
TextField {
id: t3
placeholderText: "This is a placeholder for a TextField"
Layout.fillWidth: true
}
ProgressBar {
// normalize value [0.0 .. 1.0]
value: (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue)
Layout.fillWidth: true
}
ProgressBar {
indeterminate: true
Layout.fillWidth: true
}
Slider {
id: slider
value: 0.5
Layout.fillWidth: true
tickmarksEnabled: tickmarkCheck.checked
stepSize: tickmarksEnabled ? 0.1 : 0
}
MouseArea {
id: busyCheck
Layout.fillWidth: true
Layout.fillHeight: true
hoverEnabled:true
Layout.preferredHeight: busyIndicator.height
BusyIndicator {
id: busyIndicator
running: busyCheck.containsMouse
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
ColumnLayout {
id: rightcol
Layout.fillWidth: true
anchors {
top: parent.top
bottom: parent.bottom
}
GroupBox {
id: group1
title: "CheckBox"
Layout.fillWidth: true
RowLayout {
Layout.fillWidth: true
CheckBox {
id: frameCheckbox
text: "Text frame"
checked: true
Layout.minimumWidth: 100
}
CheckBox {
id: tickmarkCheck
text: "Tickmarks"
checked: false
Layout.minimumWidth: 100
}
CheckBox {
id: wrapCheck
text: "Word wrap"
checked: true
Layout.minimumWidth: 100
}
}
}
GroupBox {
id: group2
title:"Tab Position"
Layout.fillWidth: true
RowLayout {
ExclusiveGroup { id: tabPositionGroup }
RadioButton {
id: r1
text: "Top"
checked: true
exclusiveGroup: tabPositionGroup
Layout.minimumWidth: 100
}
RadioButton {
id: r2
text: "Bottom"
exclusiveGroup: tabPositionGroup
Layout.minimumWidth: 100
}
}
}
TextArea {
id: area
frameVisible: frameCheckbox.checked
text: loremIpsum + loremIpsum
textFormat: Qt.RichText
wrapMode: wrapCheck.checked ? TextEdit.WordWrap : TextEdit.NoWrap
Layout.fillWidth: true
Layout.fillHeight: true
MouseArea {
id: contextMenu
parent: area.viewport
anchors.fill: parent
acceptedButtons: Qt.RightButton
onPressed: editmenu.popup()
}
}
}
}
}