标签: qtquickcontrols

我在我的应用程序中使用 QML 作为 UI，现在我想构建一些表单。这是一个代码：

Window {
    width: 400
    height: 600
    flags: Qt.Dialog
    modality: Qt.ApplicationModal

    GridLayout {
        id: mainLayout
        columns: 2
        rowSpacing: 5
        columnSpacing: 5
        anchors {
            top: parent.top;
            left: parent.left
            right: parent.right
        }

        Label { text: "field1" }
        TextField { id: field1; }

        Label { text: "field2"}
        TextField { id: field2 }
    }
}

如何设置TextFields 的宽度？他们中的大多数必须适合右列中的所有空间。

现在的样子：

我想用Qt Quick创建下面的光泽按钮(最好是纯QML,没有C++):

它需要是可扩展的,所以我不能使用PNG等.

我的代码到目前为止:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

ApplicationWindow {
    id: window
    color: "#cccccc"
    width: 200
    height: 200

    Button {
        id: button
        width: Math.min(window.width, window.height) - 20
        height: width * 0.3
        anchors.centerIn: parent
        text: "Button"

        style: ButtonStyle {
            background: Rectangle {
                gradient: Gradient {
                    GradientStop {
                        position: 0
                        color: "#bbffffff"
                    }
                    GradientStop {
                        position: 0.6
                        color: "#00c0f5"
                    }
                }

                border.color: "grey"
                border.width: height * 0.05
                radius: height / 5
            }

            label: Label {
                text: button.text …

我有一个简单的CheckBoxes 列表,一周中的每一天.它们取决于days使用掩码的整数值,每个都是1位CheckBox.

days使用"全部清除"按钮或"全部设置"按钮分配两者都可以正常工作并更新.但是,一旦单击任何框,它们就不再响应依赖属性的更改days.

为什么是这样？他们在某种程度上变得没有约束力.如果是这样,我应该手动重新绑定它们,如果是这样,为什么？

这是代码,

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

ApplicationWindow
{
    visible: true
    width: 800
    height: 400

    property int days: 0

    ColumnLayout
    {
        Repeater
        {
            model: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            CheckBox
            {
                text: modelData
                checked: (days & (1<<index)) != false
                onClicked:
                {
                    if (checked) days |= (1<<index);
                    else days &= ~(1<<index);
                }

            }
        }

        Button 
        {
            text: "clear all"
            onClicked: days = 0 …

我正在使用SplitView. 我希望初始空间在项目之间均匀分布，但一个项目占据了所有空间。

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4

ApplicationWindow {
    id:window; visible:true
    width:500; height:300
    title:'Borked Layouts'

    SplitView {
        orientation:Qt.Horizontal
        anchors.fill:parent
        Rectangle { color:'red'
            Layout.minimumWidth:50; Layout.fillWidth:true
            Layout.preferredWidth:window.width/2
        }
        SplitView {
            orientation:Qt.Vertical
            Layout.minimumWidth:50
            Layout.preferredWidth:window.width/2
            Rectangle { color:'green'
                Layout.minimumHeight:50; Layout.fillWidth:true
            }
            Rectangle { color:'blue'
                Layout.minimumHeight:50; Layout.fillWidth:true
            }
        }
    }
}

我可以拖动空格之间的分隔符来实现我想要的分布，并且尊重最小尺寸。但是我怎样才能在项目之间共享初始分布呢？

我正在尝试使用qt5(5.3.2)在运行Raspbian-Jessie的Raspberry pi 3上编译一些qml.
我设法运行一些简单的东西但现在我需要使用QtQuick.Controls所以我添加import QtQuick.Controls 1.0到我的qml 文件但是当我尝试运行它时,我收到此错误消息:module "QtQuick.Controls" is not installed
Qt安装在以下文件夹中/usr/lib/arm-linux-gnueabihf/qt5/(它是自动检测到的)所以我去那里发现QtQuick Controls实际上在那里(中[path to qt]/qml/QtQuick/Controls)

我是否需要做一些实际的安装？
我试图添加/usr/lib/arm-linux-gnueabihf/qt5/qml/QtQuick/Controls,QML_IMPORT_PATH但我仍然收到错误消息.
我也看过,我需要QtQuick 2.0 QtQuick.Controls工作,但是当我改变import QtQuick 1.0到import QtQuick 2.0我得到一个module "QtQuick" version 2.0 is not installed
任何人都设法在树莓派使用QtQuick.Controls？
关于如何调试这个的任何建议？

我正在使用a 在委托中TextArea显示带有嵌入<IMG ...>标签的多行文本ListView.我把它设置为只读(而不是禁用),因为我需要文本中的超链接是可点击的,所以我需要使用它的onLinkActivated事件处理程序.这通常是需要a Label(不处理鼠标滚轮事件)的东西,但是Label当文本<IMG ...>在HTML中包含标记时,a 不能正确地呈现换行符.

我遇到的问题是TextArea处理鼠标滚轮事件,即使它是只读的,所以如果光标碰巧超过其中一个可见TextArea控件,ListView则不会响应鼠标滚轮事件(因此它不会滚动).换句话说,TextArea正在捕获鼠标滚轮事件,我希望它不会这样做.

我在文档中看到控件有一个wheelEnabled:属性,但TextArea似乎不支持这个.

更新:这是一个演示问题的最小代码示例:

import QtQuick.Controls 1.4 as Controls

Rectangle {

    id: test

    color: "white"
    width: 300
    anchors {
        left: parent.left
        top: parent.top
        bottom: parent.bottom
    }

    Controls.ScrollView {

        id: _scrollview

        anchors.fill: parent

        ListView {
            anchors.fill: parent
            model: 100

            delegate: Rectangle {
                id: tableRow
                width: test.width
                height: 50
                color: "yellow" …

我有一个图像提供程序派生自QQuickImageProvider实现requestPixmap.

此图像提供程序适用于Image组件.

现在我想以同样的方式提供imageSourcea Button.但没有图像出现.可能是什么问题？

QML代码

Image {
    anchors.fill: parent
    anchors.margins: 10
    source: "image://provider/" + model.DisplayRole
    fillMode: Image.PreserveAspectFit
}

Button {
    Layout.fillWidth: true
    Layout.preferredHeight: width
    iconSource: "image://provider/" + model.DisplayRole
    onClicked: appCore.switch(model.DisplayRole)
}

C++代码

QPixmap ImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
    QModelIndex index;
    bool foundId = false;

    for(int row = 0; row < m_myModel->rowCount(); row++)
    {
        index = m_myModel->index(row, 0);
        QString name = QVariant(m_myModel->data(index, Qt::DisplayRole)).toString();

        if(name == id)
        {
            foundId …

我想展示一个BusyIndicator漫长的过程正在进行中.问题是它在我运行时没有显示,并且在完成该过程后显示.根据文件

繁忙指示符应用于指示正​​在加载内容时的活动,或者阻止UI等待资源变为可用.

我创建了一个基于原始代码的最小代码

Window {
    id: win
    width: 300
    height: 300

    property bool run : false

    Rectangle {
        anchors.fill: parent
        BusyIndicator {
            anchors.centerIn: parent
            running: run
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                run = true
                for(var a=0;a<1000000;a++) { console.log(a) }
                run = false
            }
        }
    }
}

因此,当Rectangle单击时,我想显示BusyIndicator时间直到计算完成.

例如,我在这里使用了for循环.在实际场景中,我通过调用一个函数(在数据库中插入大约1000行)ContextProperty.但在那种情况下,BusyIndicator也没有显示.

我是以正确的方式做到的吗？或者最好的方法是什么？

如何更改QML菜单项的文本颜色MenuBar？

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.3 as QtQuickControlStyle

ApplicationWindow {
    title: qsTr("Test")
    width: 640
    height: 480
    visible: true

    property color menuBackgroundColor: "#3C3C3C"
    property color menuBorderColor: "#282828"

    menuBar: MenuBar {

        style: QtQuickControlStyle.MenuBarStyle {
            padding {
                left: 8
                right: 8
                top: 3
                bottom: 3
            } 
            background: Rectangle {
                border.color: menuBorderColor
                color: menuBackgroundColor
            }
            // font: // how to set font color to red?
            // textColor: "red" /* does not work …

我Row习惯于在Rectangle自定义工具栏实现上布局一些按钮。问题是无论我做什么，组件始终从左对齐。我希望它们与行的中心对齐并向外流向边缘。该代码如下所示：

Rectangle {
        id: toolbar
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 100

        Row
        {
            anchors.fill: parent                
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 60

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }
        }
 }

我的按钮总是从行的左侧开始布置。相反，我希望它们相对于工具栏的中心进行布局。我认为指定该行anchors.horizontalCenter: parent.horizontalCenter应该可以实现，但是无论我如何尝试，组件都应从左侧边界布局。