QML

För annan användning, se QML (disambiguation) .
QML
Paradigm Multi-paradigm : deklarativ , reaktiv , scripting
Utvecklare Qt-projekt
Dök först upp 2009 ; 14 år sedan ( 2009 )
Stabil frisättning
5.15.0 / 26 maj 2020 ; för 2 år sedan ( 2020-05-26 )
Maskinskrivningsdisciplin dynamisk , stark
Hemsida qt-project .org /doc /qt-5 /qmlapplications .html
Påverkad av
XAML , JSON , JavaScript , Qt
Influenced
Qt , Ring
QML
Filnamnstillägg
.qml
Internet mediatyp text/x-qml
Utvecklad av Qt-projekt
Typ av format Skriptspråk
Hemsida qt-project .org /doc /qt-5 /qmlapplications .html

QML ( Qt Modeling Language ) är ett märkningsspråk för användargränssnitt . Det är ett deklarativt språk (liknande CSS och JSON ) för att designa användargränssnittscentrerade applikationer. Inline JavaScript- kod hanterar imperativa aspekter. Det är associerat med Qt Quick , UI-skapandet som ursprungligen utvecklades av Nokia inom Qt -ramverket. Qt Quick används för mobila applikationer där beröring, flytande animationer och användarupplevelse är avgörande. QML används också med Qt3D för att beskriva en 3D-scen och en "frame graph"-renderingsmetod. Ett QML-dokument beskriver ett hierarkiskt objektträd. QML-moduler som levereras med Qt inkluderar primitiva grafiska byggstenar (t.ex. rektangel, bild), modelleringskomponenter (t.ex. FolderListModel, XmlListModel), beteendekomponenter (t.ex. TapHandler, DragHandler, State, Transition, Animation) och mer komplexa kontroller (t.ex. , knapp, skjutreglage, låda, meny). Dessa element kan kombineras för att bygga komponenter som sträcker sig i komplexitet från enkla knappar och reglage, till kompletta internetaktiverade program.

QML-element kan utökas med standard JavaScript både inline och via inkluderade .js-filer. Element kan också integreras sömlöst och utökas med C++- komponenter med Qt-ramverket.

QML är språket; dess JavaScript-körtid är den anpassade V4-motorn, eftersom Qt 5.2; och Qt Quick är 2D- scengrafen och UI-ramverket baserat på det. Dessa är alla en del av Qt Declarative-modulen, medan tekniken inte längre kallas Qt Declarative.

QML- och JavaScript-kod kan kompileras till inbyggda C++-binärer med Qt Quick Compiler. Alternativt finns det ett QML-cache-filformat som lagrar en kompilerad version av QML dynamiskt för snabbare uppstart nästa gång den körs.

Adoption

Syntax, semantik

Grundläggande syntax

Exempel:

  

  
     
      
      
      

      
         
          
          
            
     
  import  QtQuick  Rectangle  {  id: canvas  bredd:  250  höjd:  200  färg:  "blå"  Bild  {  id: logotyp  källa:  "pics/logo.png"  anchors.centerIn:  parent  x:  canvas  .  höjd  /  5  }  }

Objekt specificeras efter deras typ, följt av ett par hängslen. Objekttyper börjar alltid med stor bokstav. I exemplet ovan finns det två objekt, en rektangel; och dess barn, en bild. Mellan klammerparenteserna kan man ange information om objektet, såsom dess egenskaper. Egenskaper anges som egenskap: värde. I exemplet ovan kan vi se att bilden har en egenskap som heter source, som har tilldelats värdet pics/logo.png . Egenskapen och dess värde separeras med ett kolon.

Egenskapen id

Varje objekt kan ges en speciell unik egenskap som kallas ett id. Genom att tilldela ett id kan objektet hänvisas till av andra objekt och skript. Det första rektangelelementet nedan har ett id, myRect . Det andra Rectangle-elementet definierar sin egen bredd genom att referera till myRect.width , vilket betyder att det kommer att ha samma breddvärde som det första Rectangle-elementet. 

  
      
         
          
          
     
      
          
          
     
  Objekt  {  Rectangle  {  id: myRect  width:  120  height:  100  }  Rectangle  {  width:  myRect  .  bredd  höjd:  200  }  }

Observera att ett id måste börja med en liten bokstav eller ett understreck och får inte innehålla andra tecken än bokstäver, siffror och understreck.

Fastighetsbindningar

En egenskapsbindning anger värdet på en fastighet på ett deklarativt sätt. Egenskapsvärdet uppdateras automatiskt om de andra egenskaperna eller datavärdena ändras, enligt det reaktiva programmeringsparadigmet .

Egenskapsbindningar skapas implicit i QML närhelst en egenskap tilldelas ett JavaScript-uttryck. Följande QML använder två egenskapsbindningar för att koppla storleken på rektangeln till storleken på otherItem.

  
      
      
  Rectangle  {  width:  otherItem  .  bredd  höjd:  annanArt  .  höjd  }

QML utökar en standardkompatibel JavaScript-motor, så alla giltiga JavaScript-uttryck kan användas som en egenskapsbindning. Bindningar kan komma åt objektegenskaper, göra funktionsanrop och till och med använda inbyggda JavaScript-objekt som Date och Math.

Exempel:

  
       
           
     
      
       
      
            
  Rektangel  {  function  calculateMyHeight  ()  {  return  Math  .  max  (  OtherItem  .  height  ,  thirdItem  .  height  );  }  anchors.centerIn:  parent  width:  Math  .  min  (  OtherItem  .  width  ,  10  )  height:  calculateMyHeight  ()  färg:  width  >  10  ?  "blue"  :  "röd"  }

stater

Tillstånd är en mekanism för att kombinera förändringar av egenskaper i en semantisk enhet. En knapp har till exempel ett nedtryckt och ett icke nedtryckt tillstånd, en adressboksapplikation kan ha ett skrivskyddat och ett redigeringstillstånd för kontakter. Varje element har ett "implicit" bastillstånd. Alla andra tillstånd beskrivs genom att lista egenskaperna och värdena för de element som skiljer sig från bastillståndet.

Exempel: I standardläget är myRect placerad på 0,0. I "flyttat" tillstånd är den placerad på 50,50. Genom att klicka inom musområdet ändras tillståndet från standardtillståndet till "flyttat" tillstånd, vilket flyttar rektangeln.

  

  
     
        

      
         
            
          
     
      
          
              
              
                  
                  
                  
             
         
     
      
          
            
     
  import  QtQuick  Item  {  id: myItem  width:  200  ;  höjd:  200  Rektangel  {  id: myRect  bredd:  100  ;  höjd:  100  färg:  "röd"  }  anger:  [  State  {  name:  "moved"  PropertyChanges  {  target:  myRect  x:  50  y:  50  }  }  ]  MouseArea  {  anchors.fill:  parent  onClicked:  myItem  .  state  =  'flyttad'  }  }

Tillståndsändringar kan animeras med hjälp av övergångar.

Om du till exempel lägger till den här koden i objektelementet ovan animeras övergången till tillståndet "flyttad":

  
      
          
          
               
     
   transitions:  [  Övergång  {  från:  "*"  till:  "flyttad"  NumberAnimation  {  egenskaper:  "x,y"  ;  varaktighet:  500  }  }  ]

Animation

Animationer i QML görs genom att animera egenskaper hos objekt. Egenskaper av typen real, int, color, rect, point, size och vector3d kan alla animeras.

QML stöder tre huvudformer av animering: grundläggande egenskapsanimering, övergångar och egenskapsbeteenden.

Den enklaste formen av animering är en PropertyAnimation, som kan animera alla egenskapstyperna som anges ovan. En egenskapsanimering kan anges som en värdekälla med hjälp av syntaxen Animation on property. Detta är särskilt användbart för upprepade animationer.

Följande exempel skapar en studsande effekt:

  
     
        

      
         
          
            
          0

            
              
                       
                 
                0     
         
     
  Rectangle  {  id: rect  width:  120  ;  höjd:  200  Bild  {  id: img  source:  "pics/qt.png"  x:  60  -  img  .  width  /  2  y:  SequentialAnimation  på  y  {  loops:  Animation  .  Infinite  NumberAnimation  {  to:  200  -  img  .  höjd  ;  easing.type:  Easing  .  OutBounce  ;  duration:  2000  }  PauseAnimation  {  duration:  1000  }  NumberAnimation  {  till:  ;  easing.type:  Easing  .  OutQuad  ;  varaktighet:  1000  }  }  }  }

Qt/C++ integration

Användning av QML kräver inte Qt/C++-kunskaper för att använda, men det kan enkelt utökas via Qt. Alla C++-klasser härledda från QObject kan enkelt registreras som en typ som sedan kan instansieras i QML.

Bekanta begrepp

QML ger direkt tillgång till följande koncept från Qt:

  • QObject-signaler – kan utlösa callbacks i JavaScript
  • QObject-platser – tillgängliga som funktioner att anropa i JavaScript
  • QObject-egenskaper – tillgängliga som variabler i JavaScript och för bindningar
  • QWindow – Window skapar en QML-scen i ett fönster
  • Q*Model – används direkt vid databindning (t.ex. QAbstractItemModel)

Signalhanterare

Signalhanterare är JavaScript-återuppringningar som gör det möjligt att vidta nödvändiga åtgärder som svar på en händelse. MouseArea-elementet har till exempel signalhanterare för att hantera muspress, släpp och klicka:

  
      
  MouseArea  {  onPressed:  konsol  .  log  (  "musknapp nedtryckt"  )  }

Alla signalhanterares namn börjar med "på".

Utvecklings verktyg

Eftersom QML och JavaScript är väldigt lika fungerar nästan alla kodredigerare som stöder JavaScript. Men fullt stöd för syntaxmarkering , kodkomplettering, integrerad hjälp och en WYSIWYG-redigerare finns tillgängligt i den kostnadsfria plattformsoberoende IDE Qt Creator sedan version 2.1 och många andra IDE:er.

Den körbara filen qml kan användas för att köra en QML-fil som ett skript. Om QML-filen börjar med en shebang kan den göras direkt körbar. Men att paketera en applikation för distribution (särskilt på mobila plattformar) innebär i allmänhet att skriva en enkel C++-startprogram och paketera de nödvändiga QML-filerna som resurser.

externa länkar

Gör så här

Hämtad från " https://en.wikipedia.org/w/index.php?title=QML&oldid=1120136790 "