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

comment faire ServerItem pour s'adapter aux contenus? Maintenant ServerItems juste se chevauchent les uns les autres.

principal.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 }
    }
}
26
demandé sur lamefun 2011-04-27 20:41:37
la source

3 ответов

vous devez donner une taille aux récipients, et ajouter des ancrages / fixations chez les enfants:

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

rappelez-vous que par défaut tous les éléments, Rectangle, BorderImage n'ont pas de taille,pas de position, et que la colonne, ligne, flux, grille, texte et taille de L'Image eux-mêmes à leur contenu, donc si vous voulez utiliser la colonne à vous devez vous assurer que la taille de la colonne n'est plus automatiquement définie par l'un de ses enfants. Parce qu'ailleurs, les enfants resteront 0x0 et la colonne sera aussi 0x0. La colonne doit être ancrée dans son parent pour avoir une taille réelle, et ses enfants doivent ancrer horizontalement (à gauche et à droite) dans la colonne pour avoir une largeur réelle, et pour la hauteur, les éléments doivent se dimensionner en fonction de leur disposition interne...

11
répondu TheBootroo 2013-06-26 11:50:05
la source

en Fait c'est assez facile. Les objets ServerItem n'ont pas de taille, vous ne pouvez voir le contenu que parce qu'il n'y a pas de coupure. 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, comme élément racine ServerItem.

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}
9
répondu blakharaz 2011-04-27 23:32:55
la source

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

2
répondu RajaRaviVarma 2011-11-24 21:44:53
la source

Autres questions sur