Qt 如何正确对齐qml组件?
我正在尝试编写简单的QML应用程序,它将由许多重复的元素组成,按行组织。结果将与下文所述类似: 目前,我有一段重复的代码实现了这个目标:Qt 如何正确对齐qml组件?,qt,layout,qml,qtquick2,qqmlcomponent,Qt,Layout,Qml,Qtquick2,Qqmlcomponent,我正在尝试编写简单的QML应用程序,它将由许多重复的元素组成,按行组织。结果将与下文所述类似: 目前,我有一段重复的代码实现了这个目标: import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 import QtQuick.Controls.Material 2.3 import QtQuick.Layouts 1.12 ApplicationWindow { Material.theme:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12
ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Hello world!")
id: root
GridLayout {
anchors.horizontalCenter: parent.horizontalCenter
columns: 3
Text {
color: "white"
text: "aaa"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "ml"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
Text {
color: "white"
text: "bbb"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 100
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "%"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
Text {
color: "white"
text: "ccc"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
from: 0
to: 100
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
font.family: "Ubuntu"
font.pixelSize: 16
text: "%"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
但是,每一行都有完全相同的结构,因此我尝试从代码中提取组件:
Item {
id: ingredient
property alias ingredientText: qualifier.text
property alias ingredientMaxValue: amount.to
property alias ingredientUnit: unit.text
RowLayout {
Text {
id: qualifier
color: "white"
text: "asdf"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
id: amount
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
id: unit
font.family: "Ubuntu"
font.pixelSize: 16
text: "unit"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
不幸的是,当我尝试在主窗口中使用我的组件时,它没有对齐,并且脱离了它的可见部分(我可以在最大化窗口后再次看到它):
问题是:如何使用“成分”组件实现第一张图片中的项目对齐?您有以下错误:
- 您孩子的大小不用于计算物品的大小。要计算正确的大小,可以使用RowLayout的implicitWidth和implicitHeight
- 您不能使用GridLayout,因为正如您指出的,每个成分都是一个元素,在这种情况下,您必须使用ColumnLayout
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
Item {
id: ingredient
property alias ingredientText: qualifier.text
property alias ingredientMaxValue: amount.to
property alias ingredientUnit: unit.text
width: rl.implicitWidth
height: rl.implicitHeight
RowLayout {
id: rl
Text {
id: qualifier
color: "white"
text: "asdf"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
id: amount
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
id: unit
font.family: "Ubuntu"
font.pixelSize: 16
text: "unit"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12
ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Hello world!")
id: root
ColumnLayout{
width: parent.width
height: implicitHeight
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
}
}
main.qml
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
Item {
id: ingredient
property alias ingredientText: qualifier.text
property alias ingredientMaxValue: amount.to
property alias ingredientUnit: unit.text
width: rl.implicitWidth
height: rl.implicitHeight
RowLayout {
id: rl
Text {
id: qualifier
color: "white"
text: "asdf"
font.family: "Ubuntu"
font.pixelSize: 20
}
SpinBox {
id: amount
from: 0
to: 1000
stepSize: 1
editable: true
}
Rectangle {
width: 40
height: 20
color: "#F48FB1"
Text {
id: unit
font.family: "Ubuntu"
font.pixelSize: 16
text: "unit"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.12
ApplicationWindow {
Material.theme: Material.Dark
visible: true
width: 480
height: 640
title: qsTr("Hello world!")
id: root
ColumnLayout{
width: parent.width
height: implicitHeight
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
Ingredient{
Layout.alignment: Qt.AlignHCenter
ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
}
}
}
问题已解决。你应该读一下,这对你将来会有帮助的。你可以尝试尝试锚定,为你选择最佳的定位
简要介绍一下锚。锚点将自动设置项目的位置,以调整屏幕。此外,我还建议您阅读,以及
组件的根
项
没有大小,即其大小为0,因此布局将其放置在如此奇怪的位置。除此之外,这个东西在这里是完全无用的。