如何使用 QML 创建如附图所示的输入表单?
How do you create an input form as shown in the attached picture using QML?
我正在尝试创建一个与所附图片相似的输入表单。这是使用 QML 执行此操作的 'standard' 方法吗?我试过使用布局,但无法让它看起来像这样。
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
Window {
id: window
title: qsTr("Test")
width: Screen.width / 8
height: Screen.height / 4
minimumWidth: 300
minimumHeight: 300
visible: true
color: "#ff0000"
Rectangle {
id: rootrect
color: "#000000"
width: parent.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 0
Column {
anchors.fill: parent
anchors.margins: 10
spacing: 10
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width
Label {
text: "Username"
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
anchors.left: parent.left
}
TextField {
x: .3*parent.width
width: .65*parent.width
anchors.verticalCenter: parent.verticalCenter
}
}
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width
Label {
text: "Password"
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
anchors.left: parent.left
}
TextField {
x: .3*parent.width
anchors.verticalCenter: parent.verticalCenter
width: .65*parent.width
}
}
} // Column
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width-20;
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: rootrect.bottom;
anchors.margins: 10
Button {
text: "Exit"
x: .25*parent.width - width/2
anchors.verticalCenter: parent.verticalCenter
onClicked: {
window.close();
}
} // Button
Button {
text: "Save"
x: .75*parent.width - width/2
anchors.verticalCenter: parent.verticalCenter
onClicked: {
}
} // Button
} // Rectangle
} // Rectangle
}
// Window
我追求的是:
如何使用布局完成简单的模板代码:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0
Window {
width: 400
height: 600
visible: true
GridLayout {
anchors.fill: parent
anchors.margins: 10
columns: 2
Label { text: "Username" }
TextField { Layout.fillWidth: true }
Label { text: "Password" }
TextField { Layout.fillWidth: true }
Item { Layout.fillHeight: true; Layout.columnSpan: 2 }
Item {
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.columnSpan: 2
RowLayout {
anchors.centerIn: parent
Button { text: "Cancel" }
Button { text: "OK" }
}
}
}
}
我正在尝试创建一个与所附图片相似的输入表单。这是使用 QML 执行此操作的 'standard' 方法吗?我试过使用布局,但无法让它看起来像这样。
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
Window {
id: window
title: qsTr("Test")
width: Screen.width / 8
height: Screen.height / 4
minimumWidth: 300
minimumHeight: 300
visible: true
color: "#ff0000"
Rectangle {
id: rootrect
color: "#000000"
width: parent.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 0
Column {
anchors.fill: parent
anchors.margins: 10
spacing: 10
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width
Label {
text: "Username"
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
anchors.left: parent.left
}
TextField {
x: .3*parent.width
width: .65*parent.width
anchors.verticalCenter: parent.verticalCenter
}
}
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width
Label {
text: "Password"
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
anchors.left: parent.left
}
TextField {
x: .3*parent.width
anchors.verticalCenter: parent.verticalCenter
width: .65*parent.width
}
}
} // Column
Rectangle {
color: "#000000"
Layout.fillWidth: true
height: 40;
width: parent.width-20;
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: rootrect.bottom;
anchors.margins: 10
Button {
text: "Exit"
x: .25*parent.width - width/2
anchors.verticalCenter: parent.verticalCenter
onClicked: {
window.close();
}
} // Button
Button {
text: "Save"
x: .75*parent.width - width/2
anchors.verticalCenter: parent.verticalCenter
onClicked: {
}
} // Button
} // Rectangle
} // Rectangle
}
// Window
我追求的是:
如何使用布局完成简单的模板代码:
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0
Window {
width: 400
height: 600
visible: true
GridLayout {
anchors.fill: parent
anchors.margins: 10
columns: 2
Label { text: "Username" }
TextField { Layout.fillWidth: true }
Label { text: "Password" }
TextField { Layout.fillWidth: true }
Item { Layout.fillHeight: true; Layout.columnSpan: 2 }
Item {
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.columnSpan: 2
RowLayout {
anchors.centerIn: parent
Button { text: "Cancel" }
Button { text: "OK" }
}
}
}
}