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

问题描述

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

How to make ServerItem to grow to fit contents? Right now ServerItems just overlap each other.

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

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 }
    }
}

推荐答案

你必须给容器一个大小，并在 children 中添加锚点/绑定:

You must give a size to containers, and add anchors / bindings in children :

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.列应锚定到其父级以具有实际大小，其子级应水平(左右)锚定到列中以具有实际宽度，并且高度项必须根据其内部布局自行调整大小...

Remember that by default all Item, Rectangle, BorderImage have no size,no position, and that Column, Row, Flow, Grid, Text and Image size themself to their content, so if you want to use the Column to resize its children you must ensure that column size is no more automatically defined by the one of its children. Because elsewhere, the children will stay 0x0 and column will also be 0x0. Column should be anchored into its parent to have a real size, and its children should anchor horizontally (left and right) into column to have a real width, and for the height items must size them self according to their internal layout...

这篇关于如何使 QML 项目增长以适应内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！