如何在 QML 的 ColumnLayout 中使用自己的对象？

Posted 2023-03-17

【中文标题】如何在 QML 的 ColumnLayout 中使用自己的对象？

【英文标题】：How to use own objects in ColumnLayout in QML?

【发布时间】：2021-06-15 00:48:43

【问题描述】：

我想生成一个表格，其中每一行都有一个 Text() 和一个 ComboBox()。我希望组合框右对齐，文本标签的左侧也像这样：

我有主qml：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12



Window 
    id: wind
    width: 640
    height: 480
    visible: true
    title: qsTr("Public Transport Searcher")
    property string oz: "Odjezdová zastávka"
    property string pz: "Příjezdová zastávka"
    property string co: "Čas odjezdu"




    Rectangle
        id: rect
        x: wind.width/16
         implicitHeight: parent.height/3*2
         implicitWidth: wind.width/8*7
         anchors.right: parent.right
         anchors.left: parent.left
         anchors.margins: 20
        radius: 5


        color: "lightblue"

   ColumnLayout
        id: cl
        spacing: 30
        width: parent.width
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 20
        anchors.fill: parent


    Row
        id: r1
        Layout.alignment: Qt.AlignTop
        //Layout.alignment: Qt.AlignTop
        Layout.margins: 15

        Text
            id: r1t1
            text: "Vyhledávač jízdních řádů"
            font.pointSize: 16
            font.bold: true
        
    

     Line

         id: r2
         tt2: oz
         Layout.alignment: Qt.AlignLeft
         //anchors.top: r1.bottom
     

     Line

         id: r3
         tt2: pz
         Layout.alignment: Qt.AlignLeft
     

     Line

         id: r4
         tt2: co
         Layout.alignment: Qt.AlignLeft
     


        
    


   

还有一个单独的 Line.qml 项：

import QtQuick 2.15
import QtQuick.Controls 2.12


Item 

     property string tt2: "v"

        Text
            id: txt
            text: tt2
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
        
        ComboBox
            id: cb
            anchors.verticalCenter: parent.verticalCenter
            //anchors.fill: parent
            anchors.left: txt.right
        

现在它运行了，但左上角的所有行都被覆盖了。 我知道我可以使用 GridLayout，但我想利用一行的自己的对象（如果我有很多这样的行）以避免复制粘贴技术并单独初始化行的每个对象。 你能告诉我如何以优雅的方式做到这一点吗？

【问题讨论】：

我认为可能缺少的是您的订单项没有宽度/高度。

【参考方案1】：

问题是您的 Line 项目没有任何 ColumnLayout 可以读取的隐式大小。也就是说，Line 的基数只是一个Item，其默认implicitHeight 和implicitWidth 都是0 - 所以ColumnLayout 不正确地呈现它们。您有多种选择。

一种选择是将implicitHeight/implicitWidth（或Layout.preferredWidth/Layout.preferredHeight）添加到您的Line的Item：

import QtQuick 2.12
import QtQuick.Controls 2.12

Item 
    implicitHeight: 30
    implicitWidth: parent.width
    property string tt2: "v"

    Text
        id: txt
        text: tt2
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
    

    ComboBox
        id: cb
        anchors.verticalCenter: parent.verticalCenter
        //anchors.fill: parent
        anchors.left: txt.right
    

实现此目的的另一种方法是将Line 的基础更改为RowLayout（并删除会冲突的内部锚点）：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

RowLayout 
    property string tt2: "v"

    Text 
        id: txt
        text: tt2
        Layout.preferredWidth: 200 // to align ComboBoxes, all text must have same width
        // Layout.fillWidth: true // a different option for aligning ComboBoxes
    
        
    ComboBox 
        id: cb
    

【讨论】：

非常感谢，第二个变体是我正在寻找的，但还有一个问题，我不知道如何强制组合框相互重叠，现在位于文本旁边它有不同的大小，看起来很糟糕。组合框也可以与右边距对齐。当我向 Line.qml 中的文本添加宽度时，它没有帮助。

@FrantišekPrinz 我已经用一些选项更新了第二个变体。要对齐组合框，每行中的文本宽度必须一致。默认情况下，它设置为文本的视觉宽度，这取决于字符串 - 相反，您可以将所有文本硬编码为相同的宽度以对齐组合框。

谢谢，我想，就是这样！