Qt 5.0 Programming IX : Anchor

          ปัญหาใหญ่ๆ ของการออกแบบ GUI บนหน้าจอที่มีความละเอียดต่างกันก็คือเรื่องการจัด layout ถ้าเราวางตำแหน่งของ element ด้วยตำแหน่ง x และ y ถ้านำ application ไปรันบนเครื่องที่มีความละเอียดของหน้าจอที่ต่างกัน การแสดงผลก็จะสวยงาม ก็ต้องมาตามแก้ใช้ application ของเรารองรับในทุกๆ ความละเอียดมาคิดดูแล้วก็ยุ่งยาก ใน QML มี properties นึงที่ช่วยกัดการเรื่อง layout ให้คือ

anchors

          anchors พูดง่ายๆ ก็คือการเลือกหลักในการยึด เช่นหากเรามี element rectangle แล้วต้องการให้ rectangle นั้นอยู่ติดอยู่ล่างสุดของ form ต้องทำอย่างไร ถ้าขนาดของ form มีการปรับเปลี่ยนตลอดเวลา ??? เรื่องของ anchors นี่แหละที่ช่วยเราเรื่องนี้ได้ มาลองดู code นี้กัน

	/*
	QML Anchors
	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 {
	width: 500;height: 500;
	Rectangle
	{
	width: parent.width;height: parent.height/30;
	anchors.bottom: parent.bottom;
	anchors.horizontalCenter: parent.horizontalCenter;
	color: "red"
	}
	Text
	{
	text: "http://miiniq.blogspot.com"
	anchors.centerIn: parent;
	font.pixelSize: parent.width/20;
	}
	}

view raw qml_anchors.qml hosted with ❤ by GitHub

          จาก source code ข้างบนลอง comment 2 บรรทัดใน element rectangle แล้วลองรันดูผลลัพธ์ที่แตกต่างกันดูครับ

        anchors.bottom: parent.bottom;

        anchors.horizontalCenter: parent.horizontalCenter;

 
          Anchors หลัก ๆ ที่ใช้งานบ่อยๆ ก็จะมี

 anchors.top:     //ข้างบนสุดของ element นี้ยึดติดกับ ???

 anchors.topMargin:     //เว้นระยะห่างข้างบนไว้  ???

 anchors.bottom:   //ข้างล่างสุดของ element นี้ยึดติดกับ ???

 anchors.bottomMargin: //เว้นระยะห่างข้างล่างไว้  ???

 anchors.left:  //ข้างซ้ายของ element นี้ยึดติดกับ ???

 anchors.leftMargin: //เว้นระยะห่างข้างซ้ายไว้  ???

 anchors.right: //ข้างขวาของ element นี้ยึดติดกับ ???

 anchors.rightMargin: //เว้นระยะห่างข้างขวาไว้ ???

 anchors.horizontalCenter: //อยู่ตรงกลางในแกนนอน(x) ของ ???

 anchors.verticalCenter: //อยู่ตรงกลางในแกนตั้ง(y) ของ ???

 anchors.centerIn: //อยู่ตรงกลางของ ???

 ยกตัวอย่างการใช้งาน เช่น

anchors.bottom: parent.bottom;  //ล่างสุดของ element นี้ติดกับ ล่างสุดของ parent

anchors.horizontalCenter: parent.horizontalCenter;  //ตรงกึ่งกลางในแกน x ของ element นี้อยู่ตรงกึ่งกลางของ parent

anchors.left: my_rec.right; //ซ้ายของ element นี้ติดกับ ขวาของ my_rec 

anchors.leftMargin: 50; //เว้นระยะห่างด้านซ้ายไว้ 50

แต่มีข้อควรระวังในการใช้งาน Anchors คือ เมื่อมีการใช้งานคำสั่งของ Anchors แล้วจะไม่สามารถกำหนด properties ในตำแหน่ง x y ได้ และถ้าหากใช้งาน anchor left right จะได้แค่อย่างใดอย่างหนึ่ง (top และ bottom ก็เช่นเดียวกัน) horizontalCenter,  verticalCenter ก็จะหักล้างกับ  left right top bottom ตรงนี้ต้องระวังให้ดีครับ







<< Qt 5.0 Programming VIII : Element FontLoader
>> Qt 5 Programming X : Call C++ Method