Câu trả lời ngắn
Start, Center, EndVà Fillđịnh nghĩa của quan điểm liên kết trong không gian của nó .
Expandxác định xem nó chiếm nhiều không gian hơn nếu có.
Học thuyết
Cấu trúc LayoutOptionskiểm soát hai hành vi khác nhau:
Căn chỉnh: Chế độ xem được căn chỉnh trong chế độ xem cha mẹ như thế nào?
Start: Đối với căn dọc, chế độ xem được di chuyển lên trên cùng. Đối với căn ngang, đây thường là phía bên trái. (Nhưng lưu ý rằng trên các thiết bị có cài đặt ngôn ngữ từ phải sang trái, đây là cách khác, nghĩa là căn phải.)Center: Chế độ xem được đặt ở giữa.End: Thông thường chế độ xem là đáy hoặc căn phải. (Tất nhiên, trên các ngôn ngữ từ phải sang trái, tất nhiên, được căn trái.)Fill: Căn chỉnh này là hơi khác nhau. Chế độ xem sẽ trải dài trên toàn bộ kích thước của chế độ xem chính.
Tuy nhiên, nếu cha mẹ không lớn hơn thì con cái của bạn, bạn sẽ không nhận thấy bất kỳ sự khác biệt nào giữa các sắp xếp đó. Căn chỉnh chỉ quan trọng đối với quan điểm của phụ huynh với không gian bổ sung có sẵn.
Mở rộng: Phần tử sẽ chiếm nhiều không gian hơn nếu có?
- Hậu tố
Expand: Nếu chế độ xem cha mẹ lớn hơn kích thước kết hợp của tất cả các con của nó, tức là không gian bổ sung có sẵn, thì không gian đó được cân đối giữa các chế độ xem con với hậu tố đó. Những đứa trẻ đó sẽ "chiếm" không gian của chúng, nhưng không nhất thiết phải "lấp đầy" nó. Chúng ta sẽ xem xét hành vi này trong ví dụ dưới đây.
- Không có hậu tố: Những đứa trẻ không có
Expandhậu tố sẽ không có thêm không gian, ngay cả khi có nhiều không gian hơn.
Một lần nữa, nếu chế độ xem cha mẹ không lớn hơn con cái của nó, hậu tố mở rộng cũng không tạo ra bất kỳ sự khác biệt nào.
Thí dụ
Chúng ta hãy xem ví dụ sau để thấy sự khác biệt giữa tất cả tám tùy chọn bố cục.
Ứng dụng chứa một màu xám đen StackLayoutvới tám nút trắng lồng nhau, mỗi nút được gắn nhãn với tùy chọn bố cục dọc. Khi nhấp vào một trong các nút, nó sẽ gán tùy chọn bố trí dọc cho bố cục ngăn xếp. Bằng cách này, chúng ta có thể dễ dàng kiểm tra sự tương tác của các chế độ xem với cha mẹ, cả hai với tùy chọn bố cục khác nhau.
(Một vài dòng mã cuối cùng thêm các hộp màu vàng bổ sung. Chúng tôi sẽ quay lại vấn đề này ngay lập tức.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
Các ảnh chụp màn hình sau đây cho thấy kết quả khi nhấp vào từng nút trong số tám nút. Chúng tôi thực hiện các quan sát sau đây:
- Miễn là cha mẹ
stackLayoutchặt chẽ (không phải Filltrang), tùy chọn bố cục dọc của mỗi trang Buttonlà không đáng kể.
- Tùy chọn bố trí dọc chỉ quan trọng nếu
stackLayoutlớn hơn (ví dụ thông qua Fillcăn chỉnh) và các nút riêng lẻ có Expandhậu tố.
- Không gian bổ sung được cân đối giữa tất cả các nút có
Expandhậu tố. Để thấy rõ hơn điều này, chúng tôi đã thêm các đường ngang màu vàng giữa mỗi hai nút lân cận.
- Các nút có nhiều không gian hơn chiều cao yêu cầu của chúng không nhất thiết phải "lấp đầy" nó. Trong trường hợp này hành vi thực tế được kiểm soát bởi sự liên kết của họ. Ví dụ, chúng được căn chỉnh trên đỉnh, giữa hoặc nút của không gian của chúng hoặc điền vào nó hoàn toàn.
- Tất cả các nút trải dài trên toàn bộ chiều rộng của bố cục, vì chúng tôi chỉ sửa đổi
VerticalOptions.
Ở đây bạn tìm thấy các ảnh chụp màn hình độ phân giải cao tương ứng.
