web-dev-qa-db-ja.com

コンテンツに合わせてQMLアイテムを成長させる方法は？

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 }
    }
}
qtqml
27
lamefun

コンテナにサイズを指定し、子にアンカー/バインディングを追加する必要があります。

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になります。列は親に固定されて実際のサイズになり、その子は列に水平に（左右に）固定されて実際の幅になり、高さの項目は内部レイアウトに応じてサイズを調整する必要があります...

12
TheBootroo

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

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}
9
blakharaz

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

1
RajaRaviVarma