WebHU - Programozási kérdések és válaszok

Elem hozzáadása az oszlopelrendezéshez JavaScript segítségével

Dinamikusan szeretnék objektumokat hozzáadni a qml Column elrendezéshez, de nem tudom, hogyan kell ezt megtenni.

Tehát egyszerű példaként tegyük fel, hogy az első téglalap megnyomásával új objektumot kell hozzáadnunk az oszlophoz. Másik kettő csak némi kötetért.

Itt van néhány kód:

import QtQuick 2.9
import QtQuick.Window 2.2

ApplicationWindow {
    width: 360
    height: 360
    visible: true
    id: root


    Item {
        id: itemRef
        width: 310; height: 170

        Column {
            id: columnRef
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { color: "lightblue"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "Press me" }
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                var component = Qt.createComponent("Sprite.qml");
                                if (component.status === Component.Ready){
                                    sprite = component.createObject(columnRef);
                                }
                            }
                        }
            }
            Rectangle { color: "gold"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "1" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "2" } }
        }
    }
}

A Sprite.qml pedig csak:

import QtQuick 2.9

Item {
    Rectangle { width: 300; height: 50; color: "red" }
}

Nem szeretném a listmodel és listview használatával elkészíteni. Van egyszerű módja annak, hogy qml fájlból elemet hozzon létre, majd hozzáadja az oszlophoz?

javascript layout qt qml
02.06.2018

  • Mi a probléma a kóddal? Úgy tűnik, működnie kell. 02.06.2018
  • @Mitch, ó... hát működik, de helytelen. Az új téglalap minden pozicionálás nélkül jelenik meg, és ha párszor megnyomom a gombot, akkor a téglalapok ugyanoda kerülnek, de nem az oszlopba 02.06.2018

Válaszok:


1

Van néhány probléma a kóddal: A sprite változót használja, miközben nincs így definiálva. var-ként kell deklarálnia a java szkriptben.

Másodszor, az Ön sprite.qml egy Item-et hoz létre, amely nem várható gyermekként az Ön Column elrendezésében. Tehát csak egy rectangle-ot kell definiálnia a sprite.qml-en belül, ezeknek a problémáknak a kijavítása a vártnak megfelelően új téglalapot jelenít meg

Bónusz: ha helyesen szeretne megjeleníteni a kattintások ismétlése közben, akkor figyelnie kell az elemtároló magasságát, hogy megbizonyosodjon arról, hogy képes újonnan létrehozott téglalapok befogadására. így hozzáadhat valami ilyesmit a szkripthez: itemRef.height = itemRef.height + sprite.height

A helyes kód így nézhet ki:

...
onClicked: {
    var component;
    var sprite;
    component = Qt.createComponent("Sprite.qml");
    if (component.status === Component.Ready){
        sprite = component.createObject(columnRef);
        itemRef.height = itemRef.height + sprite.height
    }
}
...

és sprite.qml

import QtQuick 2.9
Rectangle { color: "red"; radius: 10.0
            width: 300; height: 50
            Text { anchors.centerIn: parent
                   font.pointSize: 24; text: "new" } }

Eredmény:

adja meg itt a kép leírását

02.06.2018
  • Az tökéletes! Nagyon szépen köszönjük) 03.06.2018
  • A Sprite.qml elemmel is a következőképpen működik: Elem{ szélessége: 300; magasság: 50 Téglalap { szín: piros; sugár: 10.0 anchors.fill: parent Text { anchors.centerIn: parent font.pointSize: 24; szöveg: új } } } Azt hiszem, ez azért van így, mert a méreteket közvetlenül a tételhez írom, és kitöltöm téglalappal 03.06.2018
  • Rendben, de miért van szükséged Item ezen a ponton .. Már összezavarodtál vele. 03.06.2018
    • Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..