qt सामग्रियों को फिट करने के लिए क्यूएमएल वस्तुओं को कैसे विकसित किया जाए?




qml (3)

सामग्री फिट करने के लिए सर्वरइटम कैसे बढ़ाना है? अभी सर्वरइटम सिर्फ एक-दूसरे को ओवरलैप करते हैं।

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

आपको कंटेनरों के लिए आकार देना होगा, और बच्चों में एंकर / बाइंडिंग जोड़ना होगा:

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

याद रखें कि डिफ़ॉल्ट रूप से सभी आइटम, आयत, सीमा इमेज का कोई आकार, कोई स्थिति नहीं है, और कॉलम, पंक्ति, प्रवाह, ग्रिड, टेक्स्ट और छवि आकार स्वयं को उनकी सामग्री में आकार देते हैं, इसलिए यदि आप अपने बच्चों का आकार बदलने के लिए कॉलम का उपयोग करना चाहते हैं तो आपको अवश्य ही सुनिश्चित करें कि स्तंभ आकार अब अपने बच्चों में से किसी एक द्वारा परिभाषित नहीं किया गया है। क्योंकि कहीं और, 0x0 रहेंगे और कॉलम 0x0 भी होगा। कॉलम को अपने माता-पिता में वास्तविक आकार रखने के लिए लगाया जाना चाहिए, और उसके बच्चों को वास्तविक चौड़ाई रखने के लिए कॉलम में क्षैतिज (बाएं और दाएं) एंकर करना चाहिए, और ऊंचाई वस्तुओं के लिए उन्हें अपने आंतरिक लेआउट के अनुसार स्वयं आकार देना चाहिए ...


आपको आकार को स्पष्ट रूप से सेट करना होगा ताकि पंक्ति / कॉलम के अंदर दो QML तत्व ओवरलैप न हों।


असल में यह काफी आसान है। ServerItem ऑब्जेक्ट्स का कोई आकार नहीं है, आप केवल सामग्री देख सकते हैं क्योंकि कोई क्लिपिंग नहीं है। समाधान या तो सर्वरइटम क्लास (या main.qml में उदाहरण) में ऊंचाई और चौड़ाई निर्धारित करने के लिए या एक बढ़ते तत्व का उपयोग करने के लिए, उदाहरण के लिए कॉलम, सर्वरइटम रूट तत्व के रूप में होगा।

import QtQuick 1.0

Column {
    id: serverItem

    BorderImage {
        anchors.fill: parent
    }

    //... the rest
}