NativeScript - Vùng chứa Bố cục

NativeScript cung cấp bộ sưu tập thành phần vùng chứa với mục đích duy nhất là bố trí thành phần tiện ích con giao diện người dùng. Các vùng chứa bố trí hoạt động như thành phần mẹ và có thể có một hoặc nhiều thành phần con. Tất cả các thành phần con của vùng chứa bố cục có thể được sắp xếp dựa trên kỹ thuật được cung cấp bởi vùng chứa bố cục mẹ của nó.

NativeScript hỗ trợ sáu vùng chứa bố cục và chúng như sau:

Vùng chứa bố cục tuyệt đối
Dock bố trí container
Vùng chứa bố cục lưới
Bộ chứa bố cục ngăn xếp
Gói bố cục bọc
Vùng chứa bố cục FlexBox

Hãy để chúng tôi tìm hiểu tất cả các khái niệm vùng chứa bố cục một cách chi tiết trong chương này.

Bố cục tuyệt đối

AbsoluteLayoutcontainer là vùng chứa bố cục đơn giản nhất trong NativeScript. AbsoluteLayout không thực thi bất kỳ ràng buộc nào đối với con của nó và sẽ đặt con của nó bên trong nó bằng cách sử dụng hệ tọa độ 2 chiều với góc trên bên trái làm điểm gốc.

AbsoluteLayout sử dụng bốn thuộc tính con của nó để định vị chúng và chúng như sau:

top - Xác định vị trí của đứa trẻ từ điểm gốc chuyển động xuống dưới theo hướng y.

left - Xác định vị trí của đứa trẻ từ điểm gốc di chuyển sang một bên theo hướng x.

width - Xác định chiều rộng của con.

height - Xác định chiều cao của trẻ.

Hãy để chúng tôi thêm vùng chứa AbsoluteLayout trong trang chủ của ứng dụng của chúng tôi như bên dưới:

<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>

Đầu ra

Đầu ra của AbsoluteLayout như dưới đây:

DockLayout

Docklayoutthành phần container cho phép con của nó gắn vào bên trong nó. Mỗi bên của vùng chứa (trên, dưới, trái, phải) có thể gắn một thành phần con. Vùng chứa DockLayout sử dụng thuộc tính dock của con của nó để gắn chúng một cách chính xác.

Các giá trị có thể có của thuộc tính dock như sau:

top - Bố cục container gắn thành phần con ở góc trên cùng.

bottom - Bố cục container gắn thành phần con ở góc dưới cùng.

left - Layout container gắn thành phần con ở góc trái.

right - Bố cục container gắn thành phần con ở góc bên phải.

Theo mặc định, DockLayoutcontainer cập bến thành phần con cuối cùng của nó. Nó có thể ghi đè bằng cách đặt thuộc tính StretLastChild của nó thành 0.

Hãy để chúng tôi thêm DockLayout vùng chứa trong trang chủ của ứng dụng của chúng tôi như bên dưới -

<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>

Đầu ra

Dưới đây là đầu ra cho DockLayout -

GridLayout

Thành phần vùng chứa GridLayout là một trong những vùng chứa bố cục phức tạp và sắp xếp các phần tử con ở định dạng bảng với các hàng và cột. Theo mặc định, nó có một hàng và một cột. Nó có các thuộc tính sau:

columns- Được sử dụng để đại diện cho chiều rộng mặc định của mỗi cột cách nhau bởi,. Các giá trị có thể là số, * và từ khóa tự động.

Ở đâu,

số cho biết chiều rộng cột tuyệt đối.
cho biết chiều rộng của một cột so với các cột khác. Nó có thể được đặt trước bằng số để cho biết chiều rộng cột phải tương đối bao nhiêu lần so với cột khác. Ví dụ: 2 * cho biết chiều rộng của cột phải bằng 2 lần chiều rộng của cột nhỏ nhất.
tự động cho biết chiều rộng của cột rộng bằng con rộng nhất của nó.

Ví dụ: *, 2 * có nghĩa là hai cột và cột thứ hai sẽ gấp đôi kích thước của cột đầu tiên.

rows - Được sử dụng để thể hiện chiều cao mặc định của mỗi hàng cách nhau bằng,. Biểu diễn giá trị tương tự như cột.

GridLayout sử dụng các thuộc tính được chỉ định dưới đây của các thuộc tính con của nó để bố trí chúng -

row - Số hàng

col - Số cột

rowSpan - tổng số hàng mà nội dung con trải dài trong một bố cục.

colSpan - tổng số cột mà nội dung con trải dài trong một bố cục.

Hãy để chúng tôi thêm vùng chứa GridLayout trong trang chủ của ứng dụng của chúng tôi như bên dưới -

<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>

Đầu ra

Dưới đây là đầu ra cho GridLayout -

StackLayout

StackLayout sắp xếp các con của nó theo một đường một chiều theo chiều ngang hoặc chiều dọc. Nó có thể được định kích thước dựa trên không gian trong bố cục bằng cách sử dụng các tùy chọn bố cục. Nó có thuộc tính định hướng có thể được sử dụng để chỉ định hướng, ngang hoặc dọc.

Hãy để chúng tôi thêm vùng chứa StackLayout vào trang chủ của ứng dụng của chúng tôi như bên dưới -

<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>

Đầu ra

Đầu ra cho StackLayout như hình dưới đây:

WrapLayout

WrapLayout được sử dụng để bọc nội dung trên các hàng hoặc cột mới.

Nó có ba thuộc tính sau:

orientation - hiển thị theo chiều ngang hoặc chiều dọc.

itemWidth - chiều rộng bố trí cho mỗi trẻ.

itemHeight - chiều cao bố trí cho từng trẻ.

Hãy để chúng tôi thêm vùng chứa WrapLayout trong trang chủ của ứng dụng của chúng tôi như bên dưới -

<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>

Đầu ra

Bố cục Flexbox

Thành phần vùng chứa FlexboxLayout là một trong những vùng chứa bố cục nâng cao. Nó cung cấp tùy chọn để hiển thị bố cục đơn giản đến bố cục rất phức tạp và phức tạp. Nó dựa trên CSS Flexbox.

Thành phần FlexboxLayout có rất nhiều thuộc tính và chúng như sau:

flexDirection

Nó thể hiện hướng mà các thành phần con được sắp xếp. Các giá trị có thể có của flexDirection như sau:

row - Các thành phần con được sắp xếp cạnh nhau.

row-reverse - Các thành phần con được xếp cạnh nhau nhưng ngược chiều.

column - Các thành phần con được sắp xếp bên dưới cái khác.

column-reverse - Các thành phần con được sắp xếp bên dưới cái khác nhưng theo chiều ngược lại.

Hãy để chúng tôi thêm vùng chứa FlexLayout vào trang chủ của ứng dụng của chúng tôi như bên dưới -

<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>

Đầu ra

Dưới đây là đầu ra của FlexLayout - Row -

Bây giờ, chúng ta hãy thay đổi giá trị flexDirection từ hàng thành đảo ngược hàng và kiểm tra xem nó ảnh hưởng như thế nào đến bố cục.

<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>

Đầu ra

Dưới đây là kết quả của Bố cục Linh hoạt - Đảo ngược Hàng -

Hãy để chúng tôi thay đổi giá trị flexDirection từ ngược hàng thành cột và kiểm tra xem nó ảnh hưởng như thế nào đến bố cục.

<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>

Đầu ra

Đầu ra cho FlexLayout - Cột được đưa ra bên dưới -

Hãy để chúng tôi thay đổi giá trị flexDirection từ cột thành ngược cột và kiểm tra xem nó ảnh hưởng như thế nào đến bố cục.

<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>

Đầu ra

Dưới đây là đầu ra của FlexLayout - Column Reverse -

flexWrap

Nó đại diện cho việc các thành phần con sẽ được hiển thị trong một hàng / cột duy nhất hay chảy thành nhiều hàng bằng cách quấn theo hướng được thiết lập bởi flexDirection.

Các giá trị có thể có như sau:

wrap - Bao bọc các thành phần con, nếu không có khoảng trống theo hướng đã cho (flexDirection).

wrap-reverse - Giống như quấn ngoại trừ dòng linh kiện theo hướng ngược lại.

Hãy để chúng tôi thêm thuộc tính flexWrap và sau đó đặt giá trị của nó là bọc. Đồng thời thêm ba con nữa như được chỉ định bên dưới -

<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>

Đầu ra

Dưới đây là đầu ra cho flexWrap -

JustifyContent

Nó thể hiện cách các thành phần con được sắp xếp tương ứng với nhau và cấu trúc tổng thể. Nó có ba thuộc tính như được chỉ định bên dưới:

flex-end - Nó đóng gói thành phần con về phía dòng cuối.

space-between - Nó đóng gói thành phần con bằng cách phân bổ đồng đều theo hàng.

space-around - Tương tự như space-between ngoại trừ nó đóng gói thành phần con bằng cách phân phối đều trên hàng cũng như không gian bằng nhau xung quanh chúng.

Hãy để chúng tôi thêm justifyContent và kiểm tra xem nó hoạt động như thế nào -

<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>