QML 和 Qt：问题

问题描述 投票：0回答：2

我希望我的窗口元素与应用程序窗口具有相同的高度和宽度

我想当我点击其中一个按钮时，它会显示在矩形上，你能解释一下怎么做吗，因为我搜索过但我不太明白

     ApplicationWindow 
     {
    
            visible: true
            width: 640
            height: 380
            title: "Menu Example"
        
            Column {
                id: leftMenuBar
                width: 100
                height: parent.height
                spacing: 10
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
        
                Repeater {
                    model: 3
        
                    Button {
                        text: "Button " + (index + 1)
                        onClicked: centerRectangle.displayedButton = text
                        width: 80
                        height: 80
                    }
                }
            }
        
            Row {
                id: bottomMenuBar
                width: parent.width
                height: 80
                spacing: 10
                anchors.bottom: parent.bottom
        
                anchors.right: parent.right
                anchors.leftMargin: 2
        
        
        
                Repeater {
                    model: 8
        
                    Button {
                        text: "Button " + (index + 1)
                        onClicked: centerRectangle.displayedButton = text
                        width: 80
                        height:80
                        anchors.bottomMargin: 5
                    }
                }
            }
        
            Rectangle {
                width: 530
                height: 280
                anchors.left: leftMenuBar.right
                anchors.leftMargin : 2
                anchors.topMargin: bottomMenuBar.height
        
                anchors.rightMargin: 5
        
                y:7
                anchors.margins: -9
        
                border.width: 2
                border.color: "lightgray"
                radius: 35
        
                Text {
                    id: displayedText
                    text: "Selected Button: " + displayedButton
                    font.pixelSize: 20
                    anchors.centerIn: parent
                }
        
                property string displayedButton: ""
            }
            MouseArea {
                  anchors.fill: parent
                  onDoubleClicked: {
                      if (windowState === Qt.WindowMaximized) {
                          
                          windowState = Qt.WindowNoState;
                      } else {
                         
                          windowState = Qt.WindowMaximized;
                      }
                  }
              }
        
        }
qt qml
2个回答
0
投票

需要考虑的一些提示：

  • 注意 MouseArea：2 MouseArea 不应该处理空间中的相同区域。在您的示例中，会发生这种情况并导致按钮不起作用
  • 你不需要在矩形内定义属性，你可以通过简单地给它一个id来分配文本。 
    displayedText.text = "Selected Button: " + text

这是您需要的代码的修改版本：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.0

ApplicationWindow
{

    visible: true
    width: 640
    height: 380
    title: "Menu Example"

    Column {
        id: leftMenuBar
        width: 100
        height: parent.height
        spacing: 10
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        Repeater {
            model: 3

            Button {
                text: "Button " + (index + 1)
                onClicked: displayedText.text = "Selected Button: " + text

                width: 80
                height: 80
            }
        }
    }

    Row {
        id: bottomMenuBar
        width: parent.width
        height: 80
        spacing: 10
        anchors.bottom: parent.bottom

        anchors.right: parent.right
        anchors.leftMargin: 2

        Repeater {
            model: 8

            Button {
                text: "Button " + (index + 1)
                onClicked: displayedText.text = "Selected Button: " + text
                width: 80
                height:80
                anchors.bottomMargin: 5
            }
        }
    }

    Rectangle {
        width: 530
        height: 280
        anchors.left: leftMenuBar.right
        anchors.leftMargin : 2
        anchors.topMargin: bottomMenuBar.height

        anchors.rightMargin: 5

        y:7
        anchors.margins: -9

        border.width: 2
        border.color: "lightgray"
        radius: 35

        Text {
            id: displayedText
            font.pixelSize: 20
            anchors.centerIn: parent
        }

    }
}
0
投票

我要做的第一个改变是将您的 

displayedButton
的定义移动到应用程序的根级别。这样，其中的每个组件都可以读取/写入该属性，而无需定义范围。属性绑定意味着当任何
Button
更新
displayedButton
的值时，它将自动显示在下面的
Text
中。

ApplicationWindow {
    property string displayedButton: ""
    //...
    Button {
        text: "Button " + (index + 1)
        onClicked: displayedButton = text
    }
    //...
    Text {
        //id: displayedText // no need for an id here
        text: "Selected Button: " + displayedButton
        font.pixelSize: 20
        anchors.centerIn: parent
    }
}

关于

Button
、
Rectangle
的尺寸和放置，您可以考虑许多改进，例如评论中提到的
RowLayout
、
ColumnLayout
。布局控件允许我们为控件分配空间，而无需指定锚定。您利用
Layout
附加属性，例如
Layout.fillWidth: true
，
Layout.fillHeight: true
，
Layout.orientation: Qt.AlignTop
等。

我也会考虑使用 

Page
，它有一个内置的 
footer
组件，所以不需要定义锚点或布局来分离 footerMenuBar，因为你是免费的。

我会考虑使用结合了两者的

Column+Repeater
，而不是
Row+Repeater
，
ListView
来显示您的按钮。 
ListView
实现的另一个功能是轻弹操作，因此，如果窗口缩小，您可以滚动 
ListView
菜单栏以查看屏幕外的任何按钮。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ApplicationWindow {
    id: applicationWindow
    property string displayedButton: ""
    Page {
        anchors.fill: parent
        RowLayout {
            anchors.fill: parent
            ListView {
                id: leftMenuBar
                Layout.alignment: Qt.AlignTop
                implicitWidth: 90
                implicitHeight: contentHeight
                spacing: 10
                model: 3
                delegate: Button {
                    text: "Button " + (index + 1)
                    onClicked: displayedButton = text
                    width: 90
                    height: 90
                }
            }
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Rectangle {
                    anchors.fill: parent
                    anchors.margins: 20
                    border.width: 2
                    border.color: "lightgray"
                    radius: 35
                    Text {
                        anchors.centerIn: parent
                        text: "Selected Button: " + displayedButton
                        font.pixelSize: 20
                    }
                }
            }
        }
        footer: ListView {
            id: bottomMenuBar
            implicitHeight: 90
            implicitWidth: contentWidth
            orientation: ListView.Horizontal
            spacing: 10
            model: 8
            delegate: Button {
                text: "Button " + (index + 1)
                onClicked: displayedButton = text
                width: 90
                height: 90
            }
        }
    }
}

您可以在线试用！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.