33

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

3 に答える 3

17

コンテナーにサイズを指定し、 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 を使用して子のサイズを変更する場合は、列のサイズがその子の 1 つによって自動的に定義されないようにしてください。他の場所では、子は 0x0 のままで、列も 0x0 になるためです。列は実際のサイズになるように親に固定する必要があり、その子は列に水平 (左右) に固定して実際の幅にする必要があります。

于 2013-06-26T07:44:30.210 に答える
11

実はそれはとても簡単です。ServerItem オブジェクトにはサイズがありません。クリッピングがないため、コンテンツのみを表示できます。解決策は、ServerItem クラス (または main.qml のインスタンス) で高さと幅を設定するか、成長する要素 (Column など) を ServerItem ルート要素として使用することです。

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}
于 2011-04-27T19:04:08.410 に答える
2

行/列内の 2 つの QML 要素が重ならないように、サイズを明示的に設定する必要があります。

于 2011-11-24T17:44:53.733 に答える