Qt 5.0 Programming III : Element Hierarchies

          เรื่องลำดับการแสดงผลของ element ใน QML (Element Hierarchies) นั้นจะแสดงผลจากบนลงข้างล่างซึ่งถ้าหากไม่เข้าใจเรื่องจัดเรียงแล้วอาจจะทำให้เกิดการแสดงผลที่ผิดพลาดได้จากตัวอย่าง code นี้ครับ

           จากตัวอย่างมี element rec_1 เป็น element หลักแล้วข้างใน rec_1 มี element ย่อยๆ อีก 6 element คือ rec_1_gray, rec_1_red, rec_1_green, rec_1_blue, rec_1_black, rec_1_pink ซึ่งเมื่อ QML ทำงาน QML จะแสดงผล rec_1_gray,rec_1_red,... ไปจนถึง rec_1_pink ถ้าหากดูจากรูปแรกแล้วจะเห็นว่า rectangle ที่แสดงผลอยู่นั้นมีแค่ 5 อันคือ rec_1_red, rec_1_green, rec_1_blue, rec_1_black, rec_1_pink เพราะ rec_1_gray เป็น element ที่ถูกสร้างก่อนและถูกทับด้วย element rec_1_blue และ rec_1_black (ตาม source code ้) จากนั้นลองแก้ไข source code โดยที่ย้าย rec_1_gray, มาไว้ข้างล่างสุด

ย้าย rec_1_gray มาไว้ล่างสุด

rec_1_gray มาแสดงผลข้างบนสุด และไม่ถูกทับโดย rec_1_blue และ rec_1_black 

           สรุปคือ ลักษณะการแสดงผลของ element ใน QML นั้นจะว่างกันเป็น layer ทับๆ กับไปเรื่องฉะนั้นเวลาที่ต้องออกแบบ software ด้วย QML จะต้องดูเรื่องในส่วนของลำดับของ element ให้ดี

	/*
	QML element hierarchies
	Author : MaIII Themd
	Website : http://miiniq.blogspot.com
	FB : http://www.facebook.com/PiShared
	Env : Qt 5.0.2 clang 64 bit OSX 10.8.4
	*/
	import QtQuick 2.0
	Rectangle {
	id: rec_1
	width: 400
	height: 400
	///*
	Rectangle {
	id: rec_1_gray
	x:100;y:200;
	width: 200;height: 100;
	color:"gray"
	Text{
	text:"Element Hierarchies"
	anchors.centerIn: parent;
	color:"white"
	}
	}
	//*/
	Rectangle {
	id: rec_1_red
	x:0;y:0;
	width: 200;height: 200;
	color:"red"
	}
	Rectangle {
	id: rec_1_green
	x:200;y:0;
	width: 200;height: 200;
	color:"green"
	}
	Rectangle {
	id: rec_1_blue
	x:0;y:200;
	width: 200;height: 200;
	color:"blue"
	}
	Rectangle {
	id: rec_1_black
	x:200;y:200;
	width: 200;height: 200;
	color:"black"
	}
	Rectangle {
	id: rec_1_pink
	x:100;y:100;
	width: 200;height: 100;
	color:"pink"
	Text{
	text:"http://miiniq.blogspot.com"
	anchors.centerIn: parent;
	}
	}
	//
	/*
	Rectangle {
	id: rec_1_gray
	x:100;y:200;
	width: 200;height: 100;
	color:"gray"
	Text{
	text:"Element Hierarchies"
	anchors.centerIn: parent;
	color:"white"
	}
	}
	//*/
	}

view raw Hierarchies.qml hosted with ❤ by GitHub

<< Qt 5.0 Programming II : QML Basic
>> Qt 5.0 Programming IV : QML + Javascript อะไรจะขนาดนั้น !!!