将按钮与上方的文本框对齐并调整大小

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 组件相同的 space 数量。是否可以使用 QML 实现此目的？

Answer 1

是的，你只需要给你的TextField

一个id

TextField {
    id: myTextField
    ...
}

并在 Button 中引用 TextField 的宽度：

Button{
    ...
    width: myTextField.width
}

Answer 2

只需将布局调整到所需的宽度并使用附加的属性 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 的子布局中不需要它。

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

将按钮与上方的文本框对齐并调整大小

Align and size buttons to the textbox above it

qt

qml

qtquick2

qtquickcontrols