Question

我正在使用Qt qml来设计一个非常简单的用户界面。 QML如下：

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Rectangle {
    width: 800; height: 600    

    ColumnLayout {
       anchors.centerIn: parent 
       spacing: 25

       TextField {
        placeholderText: qsTr("User name")
        width: 200
       }

        TextField {
         placeholderText: qsTr("Password")
         width: 200
         echoMode: TextInput.Password
        }

        RowLayout {
            Button {
                text: "Log In"
            }

            Button {
                text: "Cancel"
            }        
        }   
    }
}

我要做的是确保两个按钮的大小相同，并且它们与TextField组件水平占据相同的空间量。是否可以使用QML实现这一目标？

Answer 1

只需将布局调整为所需宽度，然后使用附加属性Layout.fillWidth: true扩展/缩小项目的大小。刚刚更新了您的示例以说明：

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Rectangle {
    width: 800; height: 600

    ColumnLayout {
        width: 200
        anchors.centerIn: parent
        spacing: 25

        TextField {
            placeholderText: qsTr("User name")
            Layout.fillWidth: true
        }
        TextField {
            placeholderText: qsTr("Password")
            Layout.fillWidth: true
            echoMode: TextInput.Password
        }
        RowLayout {
            Button {
                text: "Log In"
                Layout.fillWidth: true
            }

            Button {
                text: "Cancel"
                Layout.fillWidth: true
            }
        }
    }
}

PS：在默认情况下设置Layout.fillWidth和Layout.fillHeight的子布局中不需要它。

如果您对此有任何疑问，请随时提出......

Answer 2

是的，您只需要向AControl

提供id即可

TextField

并引用TextField { id: myTextField ... }中TextField的宽度：

Button

将按钮对齐并调整到其上方的文本框

2 个答案: