web-dev-qa-db-fra.com

Comment faire évoluer les éléments QML pour s'adapter au contenu?

Comment faire évoluer ServerItem pour s'adapter au contenu? À l'heure actuelle, ServerItems se chevauchent simplement.

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
28
lamefun

Vous devez donner une taille aux conteneurs et ajouter des ancres/fixations aux enfants:

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

N'oubliez pas que par défaut, tous les éléments, rectangles, images de bordure n'ont pas de taille, pas de position, et que la colonne, la ligne, le flux, la grille, le texte et l'image sont eux-mêmes à leur contenu, donc si vous souhaitez utiliser la colonne pour redimensionner ses enfants, vous devez assurez-vous que la taille de la colonne n'est plus définie automatiquement par celui de ses enfants. Parce qu'ailleurs, les enfants resteront 0x0 et la colonne sera également 0x0. La colonne doit être ancrée dans son parent pour avoir une taille réelle, et ses enfants doivent s'ancrer horizontalement (gauche et droite) dans la colonne pour avoir une largeur réelle, et pour la hauteur, les éléments doivent les dimensionner eux-mêmes selon leur disposition interne ...

12
TheBootroo

En fait, c'est assez facile. Les objets ServerItem n'ont pas de taille, vous pouvez uniquement voir le contenu car il n'y a pas d'écrêtage. La solution serait soit de définir la hauteur et la largeur dans la classe ServerItem (ou les instances dans main.qml) ou d'utiliser un élément croissant, par exemple une colonne, en tant qu'élément racine ServerItem.

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}
9
blakharaz

Vous devez définir une taille explicitement afin que deux éléments QML à l'intérieur d'une ligne/colonne ne se chevauchent pas.

1
RajaRaviVarma