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()
                }
            }
        }
    }
}
时间: 2024-11-03 03:34:31

QML布局管理的相关文章

QT开发(二十一)——QT布局管理器

QT开发(二十一)--QT布局管理器 一.布局管理器简介 QT中使用绝对定位的布局方式无法自适应窗口的变化. QT中提供了对界面组件进行布局管理的类,用于对界面组件进行管理,能够自动排列窗口中的界面组件,窗口大小变化后自动更新界面组件的大小. QLayout是QT中布局管理器的抽象基类,通过对QLayout的继承,实现了功能各异且互补的布局管理器. 布局管理器不是界面组件,而是界面组件的定位策略. 任意容器类型的组件都可以指定布局管理器. 同一个布局管理器管理中的组件拥有相同的父组件,在设置布局

【Swing 2】布局管理器上

很苦逼的是,每次想记录一个小程序,发现,要给别人讲清楚,总是得分很多模块讲解. 所以今天来讲下Swing组件的三大布局管理器. 参考:<Head First Java>第十三章 1. BorderLayout--边界布局 2. FlowLayout--顺序布局 3. BoxLayout--不知道叫啥 1. BorderLayout(边界布局) 该管理器把背景分成东南西北中五大块,这是框架默认的布局管理器 1 package demo; 2 3 import javax.swing.*; 4 i

JAVA GUI布局管理器

边界布局管理器: a.布局方式:是把整个容器划分为五个部分.东西南北中,南北要贯通,中间最大 (不仅是中间的范围最大,权利也最大)当周边不存在的时候中间会占领周边,当中间不存在的时候周边不能占据中间 b.使用场景:不是用来直接放组件,而是用来放置子容器(中间容器)的 流布局管理器 : FlowFrame a.布局方式:是按从左往右,从上往下,由中间开始的方式依次排放组件,组件大小根据组件内容确定,组件的位置会随着容器大小的改变而改变 b.使用场景:用来放置组件,而不是用来放中间容器,流布局最好只

Qt布局管理器综合实例

1.布局管理器的综合实例------模拟向导用户界面(Windows平台) -----练习开发一个向导用户界面 @1:在同一界面上展现不同的向导页面 @2:通过上一步和下一步按钮进行切换 @3:不同页面上的元素组件和这些组件排布都不相同 @4:页面中的组件通过布局管理进行排布 (1)通过布局嵌套进行界面设计 @1:上一步和下一步这两个按钮用水平布局管理器QHBoxLayout来进行管理,不同页面上的显示的内容只有按钮不变,所以讲不同页面的内容用栈式布局管理器QStackedLayout进行管理,

PyQt5教程——布局管理(4)

PyQt5中的布局管理 布局管理是GUI编程中的一个重要方面.布局管理是一种如何在应用窗口上防止组件的一种方法.我们可以通过两种基础方式来管理布局.我们可以使用绝对定位和布局类. 绝对定位 程序指定了组件的位置并且每个组件的大小用像素作为单位来丈量.当你使用了绝对定位,我们需要知道下面的几点限制: 如果我们改变了窗口大小,组件的位置和大小并不会发生改变. 在不同平台上,应用的外观可能不同 改变我们应用中的字体的话可能会把应用弄得一团糟. 如果我们决定改变我们的布局,我们必须完全重写我们的布局,这

第22课 布局管理器(一)

1. 绝对定位及存在的问题 (1)直接在像素级指定各个组件的位置和大小 void QWidget::move(int x, int y) void QWidget::resize(int w, int h); (2)存在问题:组件的位置和大小无法自适应父窗口的变化 2. 布局管理器 (1)提供相关的类对界面组件进行布局管理 ①能够自动排列窗口中的界面组件 ②窗口变化后自动更新界面组件的大小 (2)QLayout是Qt中布局管理器的抽象基类 (3)通过继承QLayout实现了功能各异且互补的布局管

JAVA 边界布局管理器

//边界布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian1 extends JFrame{ //定义组件 JButton an1,an2,an3,an4,an5; public static void main(String[] args){ //运行本类的构造方法 Jiemian1 jiemian = new Jiemian1(); } public Jiemian1(){ //创建按钮 an1 = new

JAVA 网格布局管理器

//网格布局管理器 import java.awt.*; import javax.swing.*; public class Jiemian3 extends JFrame{ //定义组件 JButton[] an = {null,null,null,null,null,null,null,null}; public static void main(String[] args){ //运行本类的构造方法 Jiemian3 jiemian = new Jiemian3(); } public

atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform

atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform 1. Absoluti 布局(经常使用) 1 2. Flow 布局(不经常使用) 1 3. BorderLayout (不经常使用) 1 4. BoxLayout( html默认布局) 2 5. CardLayout (tab 布局) 2 6. GridLayout 3 7. GridBagLayout 3 8. Fixed 定位(不经常使用) 3