Malay translate/my

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Bermula dengan Programming dengan QML (WIP)

Selamat datang di dunia QML, bahasa UI deklaratif. Dalam panduan ini, kita akan membuat sebuah aplikasi editor teks dengan QML. Setelah membaca panduan ini, anda harus bersedia untuk membina aplikasi anda sendiri dengan QML dan Qt C+.

QML untuk Membangun Antara muka pengguna

Aplikasi yang kita akan bina adalah editor teks yang akan memuatkan, menyimpan, dan melakukan beberapa manipulasi teks. Panduan ini akan terdiri dari dua bahagian. Bahagian pertama akan melibatkan merancang tata letak aplikasi dan perilaku menggunakan bahasa deklaratif di QML. Untuk bahagian kedua, memuatkan dan menyimpan fail yang akan dilaksanakan menggunakan Qt C. Menggunakan Qt's Meta-Object System , kita dapat mendedahkan C+ berfungsi sebagai ciri-ciri yang QML elemen boleh guna. Memanfaatkan QML dan Qt C+, kita cekap dapat memisahkan logik antara muka dari logik aplikasi.

p=. text editor

Untuk menjalankan contoh kod QML, hanya menyediakan disertakan qmlviewer alat dengan fail QML sebagai argument. Bahagian C+ dari tutorial ini menganggap bahawa pembaca mempunyai pengetahuan asas tentang prosedur kompilasi Qt's.

Tutorial bab: 1. Mendefinisikan sebuah Button dan Menu 2. Menerapkan Menu Bar 3. Membangun Editor Teks 4. Dekorasi Editor Teks 5. Memperluas QML menggunakan Qt C++

Mendefinisikan sebuah Button dan Menu

Komponen Dasar - Kekunci

Kita mulai editor teks kita dengan membina sebuah butang. Fungsional, butang tetikus mempunyai kawasan sensitif dan label. Kekunci melakukan tindakan apabila pengguna menekan butang. Dalam QML, item visual dasar adalah Rectangle elemen. URectangle elemen memiliki sifat untuk mengawal elemen penampilan dan lokasi.

Pertama, import QtQuick 1.0 membolehkan alat qmlviewer untuk mengimport elemen QML yang akan kita gunakan. Barisan ini harus ada untuk setiap fail QML. Perhatikan bahawa versi Qt modul dimasukkan ke dalam ayat import.

Persegi panjang ringkas ini memiliki pengenal unik, simplebutton, yang terikat pada sifat id. sifat Rectangle's elemen ini adalah terikat untuk nilai dengan senarai sifat, diikuti oleh titik dua, kemudian nilai. Dalam contoh kod, warna abu-abu terikat untuk Rectangle's warna sifat tersebut. Demikian pula, kita mengikat lebar dan tinggi dari Rectangle.

Para Teks elemen adalah teks yang tidak boleh diedit. Kami namakan elemen Teks ini buttonLabel. Untuk menetapkan isi string field Teks, kita mengikat sebuah nilai ke sifat teks. Label ini terkandung dalam Rectangle dan untuk pusat di tengah, kita menetapkan jangkar daripada elemen Teks ke induknya, yang disebut simplebutton. Jangkar dapat mengikat jangkar item lain, sehingga tugas tata letak dengan senang.

Kami akan menyimpan kod ini sebagai SimpleButton.qml. Menjalankan qmlviewer dengan fail sebagai argument akan memaparkan tempat abu-abu dengan label teks.

p=. simple button

Untuk melaksanakan fungsi klik butang, kita boleh menggunakan pengendalian event QML's. acara pengendalian's QML sangat mirip dengan 's isyarat Qt dan slot mekanisme. Isyarat yang dipancarkan dan slot dihubungkan disebut.

 {Rectangle
 id: simplebutton
 …

MouseArea {
 id: buttonMouseArea

anchors.fill: orang tua / / jangkar semua sisi kawasan tetikus untuk persegi panjang's jangkar
 / / OnClicked menangani klik butang tetikus yang sah
 onClicked: console.log (buttonLabel.text + "klik")
 }
 }

Kami termasuk MouseArea elemen dalam simplebutton kami menjelaskan. MouseArea unsur daerah interaktif di mana gerakan mouse dikesan. Untuk butang, kami jangkar turun MouseArea ke induknya, yang simplebutton. Sintaks anchors.fill adalah salah satu cara mengakses hotel khusus yang disebut mengisi di dalam kelompok sifat yang disebut jangkar. QML menggunakan layout yang berpusat jangkar di mana barang dapat menempel pada item lain, mencipta layout kuat.

The MouseArea mempunyai signal handlers banyak yang disebut dalam gerakan mouse dalam batas-batas MouseArea specfied. Salah satunya adalah onClicked dan ini disebut setiap kali butang tetikus diterima diklik, klik kiri menjadi lalai. Kita boleh tindakan mengikat ke handler onClicked. Dalam contoh kita, console.log () output teks setiap kali daerah mouse diklik. The console.log Fungsi () adalah alat yang berguna untuk keperluan debugging dan untuk teks keluaran.

Kod di SimpleButton.qml cukup untuk memaparkan butang pada paparan dan output teks setiap kali diklik dengan mouse.

 {Rectangle
 id: Kekunci
 …

hotel warna buttonColor: "lightblue"
 hotel warna onHoverColor: "emas"
 borderColor hotel warna: "putih"

isyarat buttonClick ()
 onButtonClick: {
 console.log (buttonLabel.text + "klik")
 }

MouseArea {
 onClicked: buttonClick ()
 hoverEnabled: true
 onEntered: parent.border.color = onHoverColor
 onExited: parent.border.color = borderColor
 }

/ / Tentukan warna butang dengan menggunakan pembekal kondisional
 Warna: buttonMouseArea.pressed? Qt.darker (buttonColor, 1.5): buttonColor
 }

Sebuah butang berfungsi sepenuhnya adalah di Button.qml. potongan kod ini dalam artikel ini mempunyai beberapa kod dihilangkan, dilambangkan dengan elips kerana mereka baik diperkenalkan dahulu pada bahagian sebelumnya atau tidak relevan dengan pembahasan kod saat ini.

sifat Custom diisytiharkan menggunakan sintaks taip nama hotel. Dalam kod tersebut, buttonColor hotel, jenis warna, dinyatakan dan terikat pada "nilai" lightblue. buttonColor ini kemudian digunakan dalam operasi bersyarat untuk menentukan's mengisi warna butang tersebut.

Perhatikan bahawa nilai hotel tugas dimungkinkan dengan menggunakan tanda = sama, di samping menggunakan nilai mengikat: aksara usus besar. sifat peribadi membolehkan item dalaman untuk dapat diakses dari luar ruang lingkup Rectangle itu. Ada dasar QML jenis seperti int, string, real, serta yang disebut variasi jenis.

Dengan mengikat onExited penangan isyarat dan onEntered untuk warna, butang's sempadan akan menjadi kuning apabila tetikus di atas butang dan bertukar-tukar warna saat mouse keluar kawasan mouse.

A buttonClick () isyarat ini dideklarasikan pada Button.qml dengan meletakkan kata kunci isyarat di depan nama isyarat. Semua isyarat mempunyai penangan mereka secara automatik dicipta, nama-nama mereka bermula dengan on.

Akibatnya, onButtonClick adalah s handler 'buttonClick. onButtonClick ini kemudian ditugaskan untuk melakukan tindakan. Dalam contoh butang kita, kawalan mouse onClicked hanya akan memanggil onButtonClick, yang memaparkan teks. onButtonClick ini membolehkan benda luar untuk akses kawasan mouse Kekunci 'dengan mudah. Sebagai contoh, item mungkin mempunyai lebih daripada satu deklarasi MouseArea dan isyarat buttonClick boleh membuat perbezaan antara isyarat beberapa pawang MouseArea lebih baik.

Kami sekarang mempunyai pengetahuan asas untuk melaksanakan item dalam QML yang boleh menangani gerakan mouse dasar. Kami mencipta label Teks di dalam Rectangle, disesuaikan sifat, dan perilaku dilaksanakan merespon gerakan mouse. Gagasan untuk mencipta unsur-unsur dalam elemen ini diulang di seluruh aplikasi editor teks.

Butang ini tidak berguna kecuali digunakan sebagai komponen untuk melakukan tindakan. Pada bahagian berikutnya, kita akan segera membuat menu yang mengandungi beberapa butang-butang.

p=. button

Membuat Laman Menu

Sampai tahap ini, kita bahas cara membuat elemen dan menetapkan perilaku di dalam fail QML tunggal. Pada bahagian ini, kita akan membahas bagaimana cara mengimport elemen QML dan bagaimana untuk menggunakan semula beberapa bahagian dibuat untuk membina bahagian-bahagian lain.

Menu memaparkan isi senarai, setiap item mempunyai kemampuan untuk melakukan tindakan. Dalam QML, kita dapat membuat menu dalam beberapa cara. Pertama, kita akan membuat sebuah menu yang mengandungi butang yang pada akhirnya akan melakukan tindakan yang berbeza. Kod menu di FileMenu.qml.

 import QtQuick 1.0 mengimport Qt utama QML modul
 import "folderName" mengimport kandungan folder
 import "script.js" sebagai Script mengimport fail Javascript dan nama sebagai Script

Sintaks yang dipaparkan di atas menunjukkan cara menggunakan kata kunci import. Hal ini diperlukan untuk menggunakan JavaScript jumlah gambar, atau QML fail yang tidak berada dalam direktori yang sama. Kerana Button.qml ada di direktori yang sama seperti FileMenu.qml, kita tidak perlu mengimport fail Button.qml untuk menggunakannya. Kita langsung dapat membuat elemen Button dengan menyatakan Button {}, serupa dengan} {deklarasi Rectangle.

 Dalam FileMenu.qml:

Baris {
 anchors.centerIn: orang tua
 Jarak: parent.width / 6

Kekunci {
 id: loadButton
 buttonColor: "lightgrey"
 label: "Load"
 }
 Kekunci {
 buttonColor: "abu-abu"
 id: saveButton
 label: "Simpan"
 }
 Kekunci {
 id: exitButton
 label: "Keluar"
 buttonColor: "darkgrey"

onButtonClick: Qt . berhenti ()
 }
 }

Dalam FileMenu.qml, kami menyatakan tiga elemen Button. Mereka dinyatakan di dalam Row elemen, positioner yang akan menempatkan anak-anak dalam sepanjang baris menegak.

Perisytiharan Kekunci berada di Button.qml, yang sama dengan Button.qml kita gunakan dalam bahagian sebelumnya. binding hotel baru dapat diisytiharkan dalam mencipta butang baru, berkesan timpa sifat ditetapkan dalam Button.qml. The exitButton disebut butang akan keluar dan menutup tetingkap ketika diklik. Perhatikan bahawa penangan isyarat onButtonClick di Button.qml akan dipanggil di samping handler onButtonClick di exitButton.

p=. buttons

Perisytiharan Row ini diisytiharkan pada sebuah Rectangle, mencipta bekas persegi panjang untuk baris butang.

Persegi panjang tambahan ini mencipta cara tidak langsung menetapkan deretan butang di dalam menu.

Deklarasi dari menu edit adalah sangat mirip pada tahap ini. Menu ini mempunyai butang yang mengandungi label:

Salin, Tempel, dan Select All.

p=. edit buttons

Berbekal pengetahuan kita mengimport dan menyesuaikan bahagian buat sebelumnya, sekarang kita boleh menggabungkan laman-laman menu untuk membuat menu bar, terdiri daripada butang untuk memilih menu, dan melihat bagaimana kita dapat struktur data menggunakan QML.

Menerapkan Menu Bar

aplikasi teks editor kita perlu cara untuk memaparkan menu menggunakan menu bar. Menu bar akan mengaktifkan menu yang berbeza dan user boleh memilih menu untuk dipaparkan. Menu switching menyiratkan bahawa struktur menu memerlukan lebih daripada sekadar memaparkan mereka berturut-turut. QML menggunakan model dan pandangan terhadap struktur data dan memaparkan data berstruktur.

Menggunakan Model Data dan Tayangan

QML telah berbeza pandangan data yang memaparkan model data . menu bar kami akan memaparkan menu dalam senarai, dengan header yang memaparkan deretan nama-nama menu. Senarai menu yang dinyatakan di dalam VisualItemModel. Para VisualItemModel elemen mengandungi item yang sudah memiliki pandangan seperti elemen Rectangle dan import elemen UI. jenis model lain seperti ListModel elemen perlu mendelegasikan untuk memaparkan data mereka.

Kami menyatakan dua item visual di menuListModel tersebut, FileMenu dan EditMenu. Kami menyesuaikan dua menu dan memaparkan mereka menggunakan ListView . File MenuBar.qml mengandungi deklarasi QML dan menu edit sederhana ditakrifkan dalam EditMenu.qml.

 VisualItemModel {
 id: menuListModel
 FileMenu {
 lebar: menuListView.width
 Tinggi: menuBar.height
 Warna: fileColor
 }
 EditMenu {
 Warna: editColor
 lebar: menuListView.width
 Tinggi: menuBar.height
 }
 }

Para ListView elemen akan memaparkan model sesuai untuk mendelegasikan. delegasi ini dapat menyatakan item model untuk dipaparkan pada unsur Row atau memaparkan item dalam kotak. menuListModel kami sudah memiliki item terlihat, oleh kerana itu, kita tidak perlu menyatakan delegasi.

 ListView {
 id: menuListView

/ / Jangkar ditetapkan untuk bertindak balas terhadap jangkar tetingkap
 anchors.fill: orang tua
 anchors.bottom: parent.bottom
 lebar: parent.width
 Tinggi: parent.height

/ / Model mengandungi data
 Model: menuListModel

/ / Mengawal pergerakan menu switching
 snapMode: ListView SnapOneItem.
 orientasi: ListView . Horizontal
 boundsBehavior: Flickable StopAtBounds.
 flickDeceleration: 5000
 highlightFollowsCurrentItem: true
 highlightMoveDuration: 240
 highlightRangeMode: ListView . StrictlyEnforceRange
 }

Selain itu, mewarisi ListView dari Flickable , membuat senarai respon ke mouse mengheret dan gerak tubuh lainnya.

Bahagian terakhir dari kod di atas Flickable hotel set untuk membuat gerakan mengibaskan dikehendaki untuk melihat kami. Secara khusus, perubahan highlightMoveDuration hotel tempoh peralihan filem. Nilai hasil highlightMoveDuration lebih tinggi pada switching menu lambat.

Para ListView mempertahankan item model melalui indeks dan setiap item visual dalam model ini boleh diakses melalui indeks, dalam urutan deklarasi. Tukar currentIndex secara berkesan perubahan item yang diserlahkan di ListView. Header bar menu kami contoh kesan ini. Ada dua butang berturut-turut, baik menukar menu sekarang saat diklik. fileButton Laman menu semasa ini ke menu file ketika diklik, indeks adalah 0 kerana FileMenu diisytiharkan pertama di menuListModel tersebut. Demikian pula, editButton akan mengubah menu semasa ini ke EditMenu saat diklik.

Persegi panjang labelList memiliki nilai z 1, yang menunjukkan bahawa itu ditunjukkan di depan menu bar. Item dengan nilai-nilai yang lebih tinggi z dipaparkan di depan item dengan nilai z lebih rendah. Z standard nilai adalah 0.

 Rectangle{
 id: labelList
 …
 z: 1
 Baris {
 anchors.centerIn: orang tua
 Jarak: 40
 Kekunci {
 label: "File"
 id: fileButton
 …
 onButtonClick: menuListView.currentIndex = 0
 }
 Kekunci {
 id: editButton
 label: "Edit"
 …
 onButtonClick: menuListView.currentIndex = 1
 }
 }
 }

Menu bar baru saja kita buat dapat menyentil untuk mengakses menu atau dengan mengklik nama-nama menu di atas. paparan menu Switching merasa intuitif dan responsif.

p=. menu bar

Membangun Editor Teks

Mengisytiharkan sebuah Textarea

editor teks kita bukanlah sebuah editor teks jika tidak mengandungi kawasan teks yang boleh diedit. QML's TextEdit elemen membolehkan pembahagian-line diedit kawasan teks multi. TextEdit berbeza dari Teks unsur, yang tidak memungkinkan pengguna untuk langsung mengedit teks.

 TextEdit {
 id: textEditor
 anchors.fill: orang tua
 width: parent.width; quality: parent.height
 warna: "midnightblue"
 Fokus: true

wrapMode: TextEdit . Wrap

onCursorRectangleChanged: flickArea.ensureVisible (cursorRectangle)
 }

editor ini memiliki sifat font warna ditetapkan dan diatur untuk membungkus teks. Daerah TextEdit ada di dalam kawasan flickable yang akan menggulung teks jika kursor teks berada di luar kawasan kelihatan. The ensureVisible Fungsi () akan memeriksa sama ada persegi panjang kursor berada di luar batas terlihat dan memindahkan kawasan teks yang sesuai. QML menggunakan sintaks Javascript untuk script, dan seperti yang disebutkan sebelumnya,

Javascript fail boleh diimport dan digunakan dalam fail QML.

 fungsi ensureVisible ® {
 if (contentX> = rx)
 contentX = rx;
 else if (contentX + lebar <= r.x + r.width)
 contentX = r.x + r.width-lebar;
 if (contentY> = ry)
 contentY = ry;
 else if (contentY + quality <= r.y + r.height)
 contentY = r.y + r.height-tinggi;
 }

Menggabungkan Komponen untuk Editor Teks

Kami sekarang bersedia untuk membuat tata letak editor teks kita menggunakan QML. Editor teks mempunyai dua komponen, menu bar kita buat dan kawasan teks. QML membolehkan kita untuk menggunakan semula bahagian-bahagian, sehingga membuat kod kita sederhana, dengan mengimport komponen dan menyesuaikan apabila diperlukan. editor teks kami membahagi tetingkap menjadi dua, salah satu pertiga paparan didedikasikan untuk menu bar dan dua-pertiga dari paparan menunjukkan text area. Menu bar dipaparkan di depan unsur-unsur lain.

 Rectangle{

id: skrin
 width: 1000; quality: 1000

/ / Berwarna yang dibahagi ke dalam menubar dan Textarea. 1 / 3 skrin yang diperuntukkan kepada

menubar
 int hotel partisi: quality / 3

Menubar {
 id: Menubar
 Tinggi: partisi
 lebar: parent.width
 z: 1
 }

Textarea {
 id: textarea
 anchors.bottom: parent.bottom
 y: partisi
 warna: "putih"
 Tinggi: partisi * 2
 lebar: parent.width
 }
 }

Dengan mengimport komponen reusable, kami kod TextEditor kelihatan lebih sederhana. Kita kemudian dapat menyesuaikan aplikasi utama, tanpa bimbang tentang hotel yang sudah memiliki ditakrifkan perilaku. Dengan menggunakan pendekatan ini, aplikasi tata letak dan bahagian-bahagian UI boleh dibuat dengan mudah.

p=. text editor

Dekorasi Editor Teks

Mengimplementasikan Interface Laci

editor teks kami terlihat sederhana dan kita perlu menghiasnya. Menggunakan QML, kita dapat mengisytiharkan peralihan dan menghidupkan editor teks kita. menu bar kami adalah menduduki pertiga daripada paparan dan akan menyenangkan untuk memilikinya hanya muncul ketika kita menginginkannya.

Kita boleh menambah antara muka laci, yang akan kontrak atau memperluaskan menu bar saat diklik. Dalam pelaksanaannya, kami mempunyai persegi panjang tipis yang merespon klik mouse. Laci, dan aplikasi, mempunyai dua sates: ini "laci terbuka" negara dan laci ditutup "negara". Item laci adalah jalur dari persegi panjang dengan ketinggian kecil. Ada bersarang Gambar elemen menyatakan bahawa ikon anak panah akan dipusatkan di dalam laci.

laci ini memberikan suatu negara untuk semua aplikasi, dengan identifier paparan, setiap kali pengguna menekan kawasan mouse.

 Rectangle{
 id:drawer
 height:15

Image{
 id: arrowIcon
 source: "images/arrow.png"
 anchors.horizontalCenter: parent.horizontalCenter
 }

MouseArea{
 id: drawerMouseArea
 anchors.fill:parent
 onClicked:{
 if (screen.state  "DRAWER_CLOSED"){
                     screen.state = "DRAWER_OPEN"
                 }
                 else if (screen.state  "DRAWER_OPEN"){
 screen.state = "DRAWER_CLOSED"
 }
 }
 …
 }
 }

negara adalah hanya kumpulan tatarajah dan dinyatakan dalam Negara elemen. Senarai negara boleh berdaftar dan terikat pada hotel negara. Dalam aplikasi kami, dua negara disebut DRAWER_CLOSED dan DRAWER_OPEN. Item tatarajah dinyatakan dalam PropertyChanges elemen.

Dalam keadaan DRAWER_OPEN, ada empat item yang akan menerima perubahan hotel. Sasaran pertama, menubar, akan mengubah hotel y ke 0. Demikian pula, textarea akan lebih rendah untuk kedudukan baru apabila negara adalah DRAWER_OPEN. The textarea, laci, dan laci's ikon akan mengalami perubahan hotel untuk memenuhi keadaan saat ini.

 states:[
 State {
 name: "DRAWER_OPEN"
 PropertyChanges { target: menuBar; y: 0}
 PropertyChanges { target: textArea; y: partition + drawer.height}
 PropertyChanges { target: drawer; y: partition}
 PropertyChanges { target: arrowIcon; rotation: 180}
 },
 State {
 name: "DRAWER_CLOSED"
 PropertyChanges { target: menuBar; y:-height; }
 PropertyChanges { target: textArea; y: drawer.height; height: screen.height- drawer.height }
 PropertyChanges { target: drawer; y: 0 }
 PropertyChanges { target: arrowIcon; rotation: 0 }
 }
 ]

Negara adalah perubahan mendadak dan keperluan peralihan halus. Peralihan antara negara ditakrifkan menggunakan Peralihan elemen, yang kemudian dapat mengikat's peralihan hotel item. editor teks kami mempunyai peralihan ketika terjadi perubahan keadaan negara baik DRAWER_OPEN atau DRAWER_CLOSED. Yang penting, peralihan keperluan dari dan untuk negara tetapi untuk peralihan kita, kita boleh menggunakan kad liar * simbol untuk menunjukkan bahawa peralihan berlaku untuk semua perubahan negara.

Selama peralihan, kita boleh menentukan animasi untuk perubahan hotel. menubar kami beralih kedudukan dari y: 0 hingga y:-partisi dan kita boleh menghidupkan peralihan ini dengan menggunakan NumberAnimation elemen. Kami menyatakan bahawa sifat-sifat target 'akan menghidupkan untuk tempoh masa yang tertentu dan menggunakan kurva mengurangkan tertentu. Keluk mengurangkan tingkat kawalan animasi dan perilaku interpolasi selama peralihan negara. Keluk meringankan kita pilih adalah Easing.OutQuint , yang melambatkan gerakan di dekat akhir animasi.

Pleae membaca 's Animasi QML rencana.

 transitions: [
 Transition {
 to: "'''"
 NumberAnimation { target: textArea; properties: "y, height"; duration: 100; 

easing.type:Easing.OutExpo }
 NumberAnimation { target: menuBar; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
 NumberAnimation { target: drawer; properties: "y"; duration: 100; easing.type: Easing.OutExpo }
 }
 ]

Cara lain menghidupkan perubahan hotel adalah dengan mengisytiharkan sebuah Kelakuan elemen. Sebuah peralihan hanya bekerja selama perubahan negara dan Kelakuan boleh menetapkan animasi untuk menukar hotel umum. Dalam editor teks, panah mempunyai NumberAnimation menghidupkan hotel putaran bilamana perubahan hotel.

 In TextEditor.qml:

 Behavior{
 NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }
 }

Kembali ke bahagian kami dengan pengetahuan tentang negara dan animasi, kita bisa memperbaiki penampilan dari bahagian-bahagian. Dalam Button.qml, kita dapat menambah dan hotel skala perubahan warna ketika butang diklik.

Warna jenis animasi menggunakan ColorAnimation dan nombor animasi menggunakan NumberAnimation . Pada sintaks propertyname dipaparkan di bawah sangat membantu bila menargetkan sebuah hotel tunggal.

 Dalam Button.qml:
 …

 color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
 Behavior on color { ColorAnimation{ duration: 55} }

 scale: buttonMouseArea.pressed ? 1.1 : 1.00
 Behavior on scale { NumberAnimation{ duration: 55} }

Selain itu, kami dapat meningkatkan penampilan komponen QML kami dengan menambah kesan warna seperti kecerunan dan kesan opacity. Mengisytiharkan sebuah Gradient elemen akan menimpa milik warna elemen. Anda boleh menyatakan warna dalam kecerunan menggunakan GradientStop elemen. kecerunan diposisikan menggunakan skala, antara 0.0 dan 1.0.

 In MenuBar.qml
 gradient: Gradient {
 GradientStop { position: 0.0; color: "#8C8F8C" }
 GradientStop { position: 0.17; color: "#6A6D6A" }
 GradientStop { position: 0.98;color: "#3F3F3F" }
 GradientStop { position: 1.0; color: "#0e1B20" }
 }

kecerunan ini digunakan oleh menu bar untuk memaparkan simulasi kecerunan kedalaman. Warna pertama bermula pada 0,0 dan warna terakhir pada 1,0.

Dimana Pergi dari sini

Kita sudah selesai membangun user interface sebuah editor teks yang sangat sederhana. Ke depan, user interface selesai, dan kita boleh melaksanakan logik aplikasi menggunakan Qt biasa dan C + . QML bekerja dengan baik sebagai alat prototaip, memisahkan logik aplikasi jauh dari desain UI.

p=. text editor

Memperluas QML menggunakan Qt C+

Sekarang kita mempunyai layout teks editor kami, kami kini boleh melaksanakan fungsi teks editor di C+.

Menggunakan QML dengan C + membolehkan kita untuk membuat logik aplikasi kita menggunakan Qt. Kita boleh mencipta konteks QML di C + + aplikasi dengan menggunakan Qt's deklaratif kelas dan memaparkan elemen QML menggunakan Scene Graphics. Atau, kita boleh mengeksport C kita + + kod ke sebuah plugin yang qmlviewer alat yang dapat membaca. Untuk aplikasi kita, kita harus melaksanakan beban dan menyimpan fungsi dalam C + + dan mengeksportnya sebagai plugin. Dengan cara ini, kita hanya perlu untuk memuatkan fail QML langsung bukan menjalankan eksekusi.

Mengekspos C + + Kelas QML

Kami akan melaksanakan loading fail dan menyimpan menggunakan Qt dan C + . C + kelas dan fungsi boleh digunakan dalam QML dengan mendaftarkan mereka. Kelas juga perlu dikompilasi sebagai Qt plugin dan fail QML perlu tahu di mana plugin berada.

Untuk aplikasi kita, kita perlu mencipta hal-hal yang berikut:

Direktori kelas yang akan mengendalikan operasi berkaitan Direktori File kelas yang merupakan QObject , simulasi senarai fail dalam direktori plugin kelas yang akan mendaftar kelas untuk konteks QML Qt projek fail yang akan mengkompilasi plugin Sebuah fail qmldir mengatakan alat qmlviewer di mana mencari plugin

Membangun Qt Plugin

Untuk membina sebuah plugin, kita perlu menetapkan berikut dalam fail projek Qt. Pertama, sumber-sumber yang diperlukan, header, dan Qt modul perlu ditambah ke dalam fail projek kami. Semua C + + kod dan projek file di direktori filedialog.

 Dalam cppPlugins.pro:

 TEMPLATE = lib
 CONFIG + = qt plugin
 QT + = deklaratif

 DESTDIR + = .. / plugins
 OBJECTS_DIR = tmp
 MOC_DIR = tmp

 TARGET = FileDialog

 HEADERS + = directory.h  file.h  dialogPlugin.h

 SUMBER + = directory.cpp  file.cpp  dialogPlugin.cpp

Secara khusus, kami mengkompilasi Qt dengan modul deklaratif dan menyediakan sebagai sebuah plugin, memerlukan template lib. Kita akan meletakkan disusun plugin ke direktori plugin's ibubapa.

Kelas Mendaftarkan ke dalam QML

 Dalam dialogPlugin.h:

 # Include <QtDeclarative/QDeclarativeExtensionPlugin>

 kelas DialogPlugin: awam QDeclarativeExtensionPlugin
 {
 Q_OBJECT

 awam:
 registerTypes void (const char''' uri);

};

Kami plugin kelas, DialogPlugin adalah subclass dari QDeclarativeExtensionPlugin . Kami perlu untuk melaksanakan fungsi warisan, registerTypes () . File dialogPlugin.cpp kelihatan seperti ini:

 DialogPlugin.cpp:

# Include "dialogPlugin.h"
 # Include "directory.h"
 # Include "file.h"
 # Include <QtDeclarative/qdeclarative.h>

void DialogPlugin:: registerTypes (const char * uri) {

qmlRegisterType <Directory> (uri, 1, 0, "Direktori");
 qmlRegisterType <file> (uri, 1, 0, "File");
 }

Q_EXPORT_PLUGIN2 (FileDialog, DialogPlugin);

The registerTypes () fungsi register Direktori kami File dan kelas ke QML. Fungsi ini memerlukan nama kelas untuk template-nya, nombor versi mayor, nombor versi minor, dan nama kelas kita.

Kita perlu untuk mengeksport plugin menggunakan Q_EXPORT_PLUGIN2 makro. Perhatikan bahawa dalam fail dialogPlugin.h kita, kita memiliki Q_OBJECT makro di bahagian atas kelas kami. Selain itu, kita perlu menjalankan qmake pada fail projek untuk menghasilkan kod meta-objek yang diperlukan.

Membuat QML Properties di C + + class

Kita boleh membuat elemen QML dan hotel menggunakan C + + dan -Objek Qt's Meta System . Kita boleh melaksanakan hotel menggunakan slot dan isyarat, membuat Qt menyedari sifat ini. Property ini kemudian boleh digunakan dalam QML.

Untuk editor teks, kita harus mampu untuk memuatkan dan menyimpan fail. Biasanya, ciri-ciri ini terkandung dalam dialog fail. Untungnya, kita boleh menggunakan QDir , QFile , dan QTextStream untuk melaksanakan membaca direktori dan input / output stream.

 Direktori kelas: public QObject {

Q_OBJECT

Q_PROPERTY (filesCount int READ KONSTAN filesCount)
 Q_PROPERTY (QString nama fail nama fail WRITE READ setFilename notify filenameChanged)
 Q_PROPERTY (QString fileContent READ WRITE fileContent notify setFileContent fileContentChanged)
 Q_PROPERTY (QDeclarativeListProperty <file> fail READ fail KONSTAN)

…

Kelas Direktori-Objek menggunakan Qt's Meta System untuk mendaftar hotel perlu untuk mencapai pengendalian fail.

Kelas Direktori dieksport sebagai plugin dan boleh digunakan di QML sebagai elemen Direktori. Setiap hotel yang disenaraikan dengan menggunakan Q_PROPERTY makro adalah hotel QML. The Q_PROPERTY menyatakan hotel serta menulis yang membaca dan fungsi ke Qt's Meta-Objek Sistem. Contohnya, nama fail hotel, jenis QString , boleh dibaca dengan menggunakan nama fail () fungsi dan ditulis menggunakan fungsi setFilename (). Selain itu, ada isyarat berkaitan dengan hotel nama fail yang disebut filenameChanged (), yang dipancarkan ketika perubahan hotel.

Membaca dan menulis fungsi yang diisytiharkan sebagai awam dalam fail header. Demikian pula, kita mempunyai hotel yang lain dinyatakan sesuai untuk kegunaan mereka. Property filesCount menunjukkan jumlah gambar dalam direktori. Property nama fail ditetapkan untuk saat ini memilih nama fail dan fail / kandungan yang disimpan dimuat disimpan di hotel fileContent.

 Q_PROPERTY (QDeclarativeListProperty <file> fail READ fail KONSTAN)

Property senarai fail adalah senarai semua fail ditapis dalam sebuah direktori. Kelas Direktori dilaksanakan untuk menapis fail teks sah; dengan sebuah fail. Hanya sambungan txt berlaku.

Lebih lanjut, QList s boleh digunakan dalam fail QML dengan menyatakan mereka sebagai QDeclarativeListProperty di C + . Objek templated perlu mewarisi daripada QObject , oleh kerana itu, kelas Fail juga harus mewarisi daripada QObject . Di kelas Directory, senarai fail objek disimpan di dalam QList m_fileList disebut.

 class Fail: public QObject {

 Q_OBJECT
 Q_PROPERTY (QString nama READ WRITE notify setName nameChanged)

 …
 };

Sifat kemudian boleh digunakan dalam QML sebagai sebahagian daripada elemen Direktori hotel tersebut. Perhatikan bahawa kita tidak perlu membuat sebuah identifier hotel id di + C kod kita.

 Direktori {
 id: Direktori

filesCount
 Nama fail
 fileContent
 fail

file [0]. Nama
 }

Kerana QML menggunakan sintaks Javascript dan struktur, kita boleh iterate melalui senarai fail dan mengambil hartanya. Untuk mengambil nama fail property pertama, kita boleh memanggil file [0]. Nama.

Regular C + + fungsi juga boleh diakses dari QML. Loading fail dan fungsi tabungan dilaksanakan di C + + dan diisytiharkan menggunakan Q_INVOKABLE makro. Atau, kita dapat menyatakan fungsi sebagai slot dan fungsi akan boleh diakses dari QML.

 Dalam Directory.h:

Q_INVOKABLE savefile void ();
 void Q_INVOKABLE loadFile ();

Kelas Direktori juga harus memberitahu objek lain jika isi direktori berubah. Ciri-ciri ini dilakukan dengan menggunakan isyarat. Seperti yang disebutkan sebelumnya, isyarat QML mempunyai handler yang sesuai dengan nama-nama mereka didahului dengan on. Isyarat ini disebut directoryChanged dan ini dipancarkan apabila terdapat refresh direktori. refresh itu hanya semula isi direktori dan mengemas kini senarai fail yang sah dalam direktori. item QML kemudian boleh diberitahu dengan melampirkan tindakan penangan isyarat onDirectoryChanged.

Sifat senarai perlu digali lebih lanjut. Hal ini kerana sifat senarai menggunakan callback untuk mengakses dan mengubahsuai isi senarai. Property senarai adalah jenis QDeclarativeListProperty <file>. Setiap kali senarai dicapai, fungsi accessor perlu mengembalikan <file> QDeclarativeListProperty. Jenis template, fail, perlu terbitan QObject. Selanjutnya, untuk mencipta QDeclarativeListProperty , senarai's accessor dan pengubah harus diteruskan ke consructor sebagai fungsi pointer. Senarai, sebuah QList dalam kes kami, juga perlu daftar File pointer.

Pengeluar dari QDeclarativeListProperty constructor dan pelaksanaan Direktori:

 QDeclarativeListProperty (QObject * objek, void * data, AppendFunction menambah, CountFunction count = 0,

AtFunction di = 0, ClearFunction jelas = 0)
 QDeclarativeListProperty <file> (ini, & m_fileList, & appendFiles, & filesSize, & fileAt, & clearFilesPtr);

Pengeluar lewat pointer ke fungsi yang akan menambah senarai, menghitung senarai, mengambil item menggunakan indeks, dan senarai kosong. Hanya fungsi append adalah wajib. Perhatikan bahawa fungsi penanda buku harus sesuai dengan definisi AppendFunction , CountFunction , AtFunction , atau ClearFunction .

 void appendFiles (QDeclarativeListProperty <file> * hotel, File fail ''')
 File''' fileAt (QDeclarativeListProperty <file> * hotel, int index)
 int filesSize (QDeclarativeListProperty <file> hotel ''')
 void clearFilesPtr (QDeclarativeListProperty <file> hotel''')

Untuk mempermudah dialog fail kami, kelas Direktori menapis fail teks tidak sah, yang adalah fail yang tidak mempunyai sambungan txt .. Jika nama fail tidak mempunyai sambungan txt., Maka tidak akan terlihat dalam dialog file kita. Juga, pelaksanaannya memastikan bahawa gambar-gambar yang disimpan mempunyai nama txt. Ekstensi di file. Direktori menggunakan QTextStream untuk membaca fail dan ke output isi fail ke sebuah fail.

Dengan elemen Direktori kita, kita boleh mengambil fail sebagai senarai, tahu berapa banyak fail teks dalam direktori aplikasi, mendapatkan nama fail dan kandungan sebagai string, dan diberitahu setiap kali ada perubahan dalam kandungan direktori.

Untuk membina plugin, jalankan qmake pada fail projek cppPlugins.pro, lalu jalankan make untuk membina dan mengalihkan plugin ke direktori plugin.

Mengimport Plugin QML

Alat import qmlviewer fail yang berada dalam direktori yang sama dengan aplikasi. Kita juga boleh membuat fail qmldir mengandungi lokasi fail QML kami ingin import. File qmldir juga boleh menyimpan lokasi plugin dan sumber lain.

 Dalam qmldir:

Kekunci. / Button.qml
 FileDialog. / FileDialog.qml
 Textarea. / TextArea.qml
 TextEditor. / TextEditor.qml
 EditMenu. / EditMenu.qml

plugin plugin FileDialog

Plugin baru saja kita buat disebut FileDialog, seperti yang ditunjukkan oleh medan TARGET dalam fail projek.

Tersebut disusun Plugin di direktori plugin.

Mengintegrasikan Dialog Fail ke Menu File

FileMenu kami perlu untuk memaparkan elemen FileDialog, yang mengandungi senarai fail teks dalam direktori sehingga membolehkan pengguna untuk memilih fail dengan mengklik senarai. Kita juga perlu menetapkan menyimpan, beban, dan butang baru untuk tindakan masing-masing. Ini

FileMenu mengandungi input teks yang boleh diedit untuk membolehkan pengguna untuk menaip nama fail dengan menggunakan keyboard.

Unsur Direktori digunakan dalam fail FileMenu.qml dan memberitahu elemen FileDialog bahawa Direktori segar isinya. Notis ini dilakukan dalam penangan isyarat, onDirectoryChanged.

 Dalam FileMenu.qml:

Direktori {
 id: Direktori
 nama fail: textInput.text
 onDirectoryChanged: fileDialog.notifyRefresh ()
 }

Menjaga dengan kesederhanaan aplikasi kita, dialog fail akan selalu terlihat dan tidak akan menampilkan gambar-gambar teks tidak sah, yang tidak mempunyai nama file txt. Ekstensi mereka.

 Dalam FileDialog.qml:

isyarat notifyRefresh ()
 onNotifyRefresh: dirView.model = directory.files

Unsur FileDialog akan memaparkan isi direktori dengan membaca senarai hotel yang disebut fail. File-file yang digunakan sebagai model dari sebuah GridView unsur, yang memaparkan item data dalam kotak sesuai untuk mendelegasikan. delegasi yang menangani penampilan model dan dialog file kita hanya akan membuat tempat dengan teks berpusat di tengah. Mengklik pada nama fail akan menghasilkan paparan persegi panjang untuk menyerlahkan nama fail. FileDialog ini diberitahu setiap kali isyarat notifyRefresh dipancarkan, reload fail dalam direktori.

 Dalam FileMenu.qml: Button {id: label newButton: "Baru" onButtonClick: {textArea.textContent = ""}} Button {id:

label loadButton: "Load" onButtonClick: {directory.filename textInput.text directory.loadFile = ( )

textArea.textContent = directory.fileContent}} Button {id: label saveButton: "Simpan" onButtonClick:

{directory.fileContent = textArea.textContent directory.filename = textInput.text directory.saveFile ()}}

{Kekunci id: label exitButton : "Keluar" onButtonClick: {Qt.quit ()}}

FileMenu kita sekarang boleh disambungkan ke tindakan masing-masing. saveButton akan memindahkan teks dari TextEdit ke Teman fileContent hotel direktori, lalu copy nama fail dari input teks yang boleh diedit. Akhirnya, butang memanggil savefile () fungsi, menyimpan fail. sloadButton mempunyai eksekusi serupa. Juga, tindakan Baru akan mengosongkan isi dari TextEdit.

Selanjutnya, butang EditMenu menyambung ke fungsi TextEdit untuk menyalin, menempel, dan pilih semua teks dalam editor teks.

p=. text editor

Text Editor Penyelesaian

p=. text editor