qml写一个自适应登录框

1、前言

写一个可自由伸缩的登录框，，（横向上）
关键：给相关控件赋予 Layout.fillWidth: true 属性 即可。

2、代码

//main.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQml 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window
    visible: true
    width: 500
    height: 320

    ColumnLayout {
        anchors.fill: parent
        anchors.bottomMargin: 50
        anchors.leftMargin: 50
        anchors.rightMargin: 50
        anchors.topMargin: 50
        spacing: 6

        Label {
            text: "登录"
            font.bold: true
            font.family: "微软雅黑"
            font.pixelSize: 20
            horizontalAlignment: Text.AlignHCenter
            Layout.bottomMargin: 10
            Layout.fillWidth: true
        }

        RowLayout {
            Label {
                text: "用户名:"
                Layout.preferredWidth: 50
                Layout.fillWidth: true
                Layout.maximumWidth: 50
            }
            TextField {
                Layout.fillWidth: true
                Layout.preferredWidth: 200
                placeholderText: "请输入用户名"
            }
        }
        RowLayout {
            Label {
                text: "密码:"
                Layout.fillWidth: true
                Layout.maximumWidth: 50
                Layout.preferredWidth: 50
            }
            TextField {
                Layout.fillWidth: true
                Layout.preferredWidth: 200
                placeholderText: "请输入密码"
            }
        }
        RowLayout {
            spacing: 20

            Button {
                text: "登录"
                Layout.alignment: Qt.AlignHCenter
                Layout.fillWidth: true
            }
            Button {
                text: "取消"
                Layout.alignment: Qt.AlignHCenter
                Layout.fillWidth: true
            }
        }
    }
}