NativeScript - คอนเทนเนอร์เค้าโครง

NativeScript จัดเตรียมคอลเลกชันของส่วนประกอบคอนเทนเนอร์เพื่อจุดประสงค์เดียวในการจัดวางองค์ประกอบวิดเจ็ต UI คอนเทนเนอร์เค้าโครงทำหน้าที่เป็นองค์ประกอบหลักและสามารถมีองค์ประกอบลูกอย่างน้อยหนึ่งรายการ องค์ประกอบลูกทั้งหมดของคอนเทนเนอร์โครงร่างสามารถจัดเรียงตามเทคนิคที่จัดเตรียมโดยคอนเทนเนอร์โครงร่างหลัก

NativeScript รองรับคอนเทนเนอร์เลย์เอาต์หกแบบและมีดังนี้ -

คอนเทนเนอร์เค้าโครงแน่นอน
คอนเทนเนอร์เค้าโครงท่าเรือ
คอนเทนเนอร์เค้าโครงตาราง
คอนเทนเนอร์เค้าโครงสแต็ก
ห่อเค้าโครงคอนเทนเนอร์
คอนเทนเนอร์เค้าโครง FlexBox

ให้เราเรียนรู้แนวคิดคอนเทนเนอร์โครงร่างทั้งหมดโดยละเอียดในบทนี้

เค้าโครงแน่นอน

AbsoluteLayoutcontainer เป็นคอนเทนเนอร์โครงร่างที่ง่ายที่สุดใน NativeScript AbsoluteLayout ไม่บังคับใช้ข้อ จำกัด ใด ๆ กับลูกของมันและจะวางลูกไว้ข้างในโดยใช้ระบบพิกัด 2 มิติที่มีมุมบนซ้ายเป็นจุดเริ่มต้น

AbsoluteLayout ใช้คุณสมบัติสี่ประการของลูก ๆ เพื่อวางตำแหน่งและมีดังนี้ -

top - กำหนดตำแหน่งของเด็กจากจุดเริ่มต้นเคลื่อนลงไปในทิศทาง y

left - กำหนดตำแหน่งของเด็กจากจุดเริ่มต้นที่เคลื่อนที่ไปด้านข้างในทิศทาง x

width - กำหนดความกว้างของเด็ก

height - กำหนดความสูงของเด็ก

ให้เราเพิ่มคอนเทนเนอร์ AbsoluteLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

เอาต์พุต

ผลลัพธ์ของ AbsoluteLayout มีดังต่อไปนี้ -

DockLayout

Docklayoutส่วนประกอบคอนเทนเนอร์ช่วยให้เด็ก ๆ สามารถเทียบท่าภายในได้ แต่ละด้านของคอนเทนเนอร์ (บนล่างซ้ายขวา) สามารถเชื่อมต่อส่วนประกอบย่อยได้ คอนเทนเนอร์ DockLayout ใช้คุณสมบัติท่าเรือของลูก ๆ เพื่อเชื่อมต่ออย่างถูกต้อง

ค่าที่เป็นไปได้ของคุณสมบัติท่าเรือมีดังนี้ -

top - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมด้านบน

bottom - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมด้านล่าง

left - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมซ้าย

right - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมขวา

โดยค่าเริ่มต้น, DockLayoutคอนเทนเนอร์เชื่อมต่อกับคอมโพเนนต์ลูกสุดท้าย สามารถแทนที่ได้โดยการตั้งค่าคุณสมบัติ stretchLastChild เป็นศูนย์

ให้เราเพิ่ม DockLayout คอนเทนเนอร์ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

เอาต์พุต

ด้านล่างนี้คือเอาต์พุตสำหรับ DockLayout -

GridLayout

ส่วนประกอบคอนเทนเนอร์ GridLayout เป็นคอนเทนเนอร์โครงร่างที่ซับซ้อนและจัดเรียงองค์ประกอบลูกในรูปแบบตารางด้วยแถวและคอลัมน์ โดยค่าเริ่มต้นจะมีหนึ่งแถวและหนึ่งคอลัมน์ มีคุณสมบัติดังต่อไปนี้ -

columns- ใช้เพื่อแสดงความกว้างเริ่มต้นของแต่ละคอลัมน์ที่คั่นด้วย. ค่าที่เป็นไปได้คือตัวเลข * และคำหลักอัตโนมัติ

ที่ไหน

ตัวเลขระบุความกว้างของคอลัมน์สัมบูรณ์
ระบุความกว้างของคอลัมน์ที่สัมพันธ์กับคอลัมน์อื่น ๆ สามารถนำหน้าด้วยตัวเลขเพื่อระบุจำนวนครั้งที่ความกว้างของคอลัมน์ควรสัมพันธ์กับคอลัมน์อื่น ตัวอย่างเช่น 2 * ระบุความกว้างคอลัมน์ควรเป็น 2 เท่าของความกว้างของคอลัมน์ที่เล็กที่สุด
อัตโนมัติระบุความกว้างของคอลัมน์ที่กว้างเท่ากับลูกที่กว้างที่สุด

ตัวอย่างเช่น *, 2 * หมายถึงสองคอลัมน์และวินาทีจะมีขนาดเป็นสองเท่าของคอลัมน์แรก

rows - ใช้เพื่อแสดงความสูงเริ่มต้นของแต่ละแถวที่คั่นด้วย. การแทนค่าจะคล้ายกับคอลัมน์

GridLayout ใช้คุณสมบัติที่ระบุด้านล่างของลูก ๆ ในการจัดวาง -

row - หมายเลขแถว

col - หมายเลขคอลัมน์

rowSpan - จำนวนแถวทั้งหมดที่เนื้อหาย่อยครอบคลุมภายในเค้าโครง

colSpan - จำนวนคอลัมน์ทั้งหมดที่เนื้อหาย่อยครอบคลุมภายในเค้าโครง

ให้เราเพิ่มคอนเทนเนอร์ GridLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์สำหรับ GridLayout -

StackLayout

StackLayout จัดเรียงลูกของมันในเส้นมิติเดียวในแนวนอนหรือแนวตั้ง สามารถปรับขนาดตามพื้นที่ในเค้าโครงโดยใช้ตัวเลือกเค้าโครง มีคุณสมบัติการวางแนวที่สามารถใช้เพื่อระบุทิศทางแนวนอนหรือแนวตั้ง

ให้เราเพิ่มคอนเทนเนอร์ StackLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

เอาต์พุต

ผลลัพธ์สำหรับ StackLayout เป็นดังที่แสดงด้านล่าง -

WrapLayout

WrapLayout ใช้เพื่อรวมเนื้อหาในแถวหรือคอลัมน์ใหม่

มีคุณสมบัติสามประการดังต่อไปนี้ -

orientation - แสดงทั้งในแนวนอนหรือแนวตั้ง

itemWidth - ความกว้างของเค้าโครงสำหรับเด็กแต่ละคน

itemHeight - ความสูงของเค้าโครงสำหรับเด็กแต่ละคน

ให้เราเพิ่มคอนเทนเนอร์ WrapLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

เอาต์พุต

เค้าโครง Flexbox

ส่วนประกอบคอนเทนเนอร์ FlexboxLayout เป็นหนึ่งในคอนเทนเนอร์โครงร่างขั้นสูง มีตัวเลือกในการแสดงเค้าโครงที่เรียบง่ายไปจนถึงเค้าโครงที่ซับซ้อนและซับซ้อนมาก มันขึ้นอยู่กับ CSS Flexbox

ส่วนประกอบ FlexboxLayout มีคุณสมบัติมากมายและมีดังนี้ -

flexDirection

แสดงถึงทิศทางในการจัดเรียงส่วนประกอบย่อย ค่าที่เป็นไปได้ของ flexDirection มีดังนี้ -

row - ส่วนประกอบของเด็กจัดเรียงเคียงข้างกัน

row-reverse - ส่วนประกอบลูกเรียงเคียงข้างกัน แต่ในทิศทางกลับกัน

column - ส่วนประกอบย่อยถูกจัดเรียงไว้ด้านล่างอีกชิ้นหนึ่ง

column-reverse - ส่วนประกอบย่อยถูกจัดเรียงไว้ด้านล่างอีกชิ้นหนึ่ง แต่อยู่ในทิศทางตรงกันข้าม

ให้เราเพิ่มคอนเทนเนอร์ FlexLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ FlexLayout - Row -

ตอนนี้ให้เราเปลี่ยนค่า flexDirection จาก row เป็น row-reverse และตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ Flex Layout - Row Reverse -

ให้เราเปลี่ยนค่า flexDirection จาก row-reverse เป็น column และตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ผลลัพธ์สำหรับ FlexLayout - คอลัมน์ได้รับด้านล่าง -

ให้เราเปลี่ยนค่า flexDirection จากคอลัมน์เป็นคอลัมน์ย้อนกลับและตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ FlexLayout - Column Reverse -

flexWrap

แสดงว่าคอมโพเนนต์ลูกจะแสดงผลในแถว / คอลัมน์เดียวหรือไหลเป็นหลายแถวโดยการห่อตามทิศทางที่กำหนดโดย flexDirection

ค่าที่เป็นไปได้มีดังนี้ -

wrap - ห่อส่วนประกอบลูกถ้าไม่มีที่ว่างในทิศทางที่กำหนด (flexDirection)

wrap-reverse - เหมือนกับการห่อยกเว้นการไหลของส่วนประกอบในทิศทางตรงกันข้าม

ให้เราเพิ่มคุณสมบัติ flexWrap แล้วตั้งค่าเป็น wrap เพิ่มลูกอีกสามคนตามที่ระบุด้านล่าง -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์สำหรับ flexWrap -

JustifyContent

มันแสดงถึงการจัดเรียงองค์ประกอบย่อยโดยเคารพซึ่งกันและกันและโครงสร้างโดยรวม มีคุณสมบัติสามประการตามที่ระบุไว้ด้านล่าง -

flex-end - บรรจุส่วนประกอบลูกไว้ที่ท้ายบรรทัด

space-between - บรรจุองค์ประกอบลูกโดยกระจายอย่างสม่ำเสมอในบรรทัด

space-around - คล้ายกับช่องว่างระหว่างยกเว้นจะบรรจุองค์ประกอบลูกโดยกระจายอย่างสม่ำเสมอในแนวเดียวกันและพื้นที่รอบ ๆ เท่า ๆ กัน

ให้เราเพิ่ม justifyContent ด้วยและตรวจสอบว่ามันทำงานอย่างไร -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>