Question

如何使ServerItem增长以适应内容？现在ServerItems只是相互重叠。

main.qml

import Qt 4.7
import "Teeworlds" as Teeworlds

Item {
    Column {
        Teeworlds.ServerItem {
            serverName: "InstaGib, lost [xyz]"
        }

        Teeworlds.ServerItem {
            serverName: "Arena.sbor (rus)"
        }
    }
}

ServerItem.qml

import QtQuick 1.0

BorderImage {
    id: serverItem

    property string serverName: "unnamed server"
    property string gameType: "DM"
    property int numPlayers: 0
    property int maxPlayers: 8
    property int ping: 60

    Text {
        id: title
        text: parent.serverName
    }

    Grid {
        id: grid
        anchors.top: title.bottom
        columns: 2
        rows: 3
        Text { text: "Gametype: " }  Text { text: gameType }
        Text { text: "Players: " }   Text { text: numPlayers + "/" + maxPlayers }
        Text { text: "Ping: " }      Text { text: ping }
    }
}

Answer 1

您必须为容器指定大小，并在子级中添加锚点/绑定：

main.qml：

import QtQuick 1.1
import "Teeworlds" as Teeworlds

Item {
    width: 800; // root item so give a size
    height: 600;

    Flickable {
         clip: true;
         anchors.fill: parent; // use a flickable to allow scrolling
         contentWidth: width; // flickable content width is its own width, scroll only vertically
         contentHeight: layout.height; // content height is the height of the layout of items

         Column {
             id: layout;
             anchors { // the column should have a real size so make it fill the parent horizontally
                 left: parent.left;
                 right: parent.right;
             }

             Teeworlds.ServerItem {
                serverName: "InstaGib, lost [xyz]";
             }
             Teeworlds.ServerItem {
                serverName: "Arena.sbor (rus)";
             }
        }
    }
 }

Teeworlds / ServerItem.qml：

import QtQuick 1.1

BorderImage {
    id: serverItem;
    height: grid.y + grid.height; // compute the item height using content position and size
    anchors { // to have a real size, items should grow horizontally in their parent
        left: parent.left;
        right: parent.right;
    }

    property string serverName  : "unnamed server";
    property string gameType    : "DM";
    property int      numPlayers  : 0;
    property int      maxPlayers   : 8;
    property int      ping               : 60;

    Text {
        id: title;
        text: parent.serverName;
    }
    Grid {
        id: grid;
        columns: 2;
        anchors { // the grid must anchor under the title but horizontally in the parent too
            top: title.bottom;
            left: parent.left;
            right: parent.right;
        }

        Text { text: "Gametype: " } 
        Text { text: gameType }
        Text { text: "Players: " }  
        Text { text: numPlayers + "/" + maxPlayers }
        Text { text: "Ping: " }    
        Text { text: ping }
    }
}

请记住，默认情况下，所有Item，Rectangle，BorderImage都没有大小，没有位置，并且Column，Row，Flow，Grid，Text和Image自己调整到它们的内容，所以如果你想使用Column来调整它的大小对于子项，您必须确保其子项之一不再自动定义列大小。因为在其他地方，孩子们将保持0x0，列也将是0x0。列应该锚定到其父级中以具有实际大小，并且其子级应该水平（左和右）锚定到列中以具有实际宽度，并且对于高度项，必须根据其内部布局来自定大小... < / p>

Answer 2

实际上这很容易。 ServerItem对象没有大小，您只能看到内容，因为没有剪辑。解决方案是在ServerItem类（或main.qml中的实例）中设置高度和宽度，或者使用增长元素，例如：一列，作为ServerItem根元素。

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}

Answer 3

您必须明确设置大小，以使行/列中的两个QML元素不重叠。

如何使QML项目增长以适应内容？

3 个答案: