Коротка відповідь
Start, Center, EndІ Fillвизначити вид по узгодженості в її просторі .
Expandвизначає, чи займає вона більше місця, якщо є.
Теорія
Структура LayoutOptionsконтролює дві різні форми поведінки:
Вирівнювання: Як вигляд вирівнюється в батьківському поданні?
Start: Для вертикального вирівнювання погляд переміщується вгору. Для горизонтального вирівнювання це, як правило, лівий бік. (Але зауважте, що на пристроях із налаштуваннями мови справа наліво це навпаки, тобто вирівнюється справа.)Center: Вид зосереджений.End: Зазвичай вигляд вирівняний внизу або вправо. (На мовах справа наліво, звичайно, ліворуч вирівнюється.)Fill: Це вирівнювання дещо інше. Вид буде розтягуватися на весь розмір батьківського подання.
Якщо ж батько не більший, ніж його діти, ви не помітите різниці між цими вирівнюваннями. Вирівнювання має значення лише для батьківських представлень з додатковим місцем.
Розширення: Чи буде елемент займати більше місця, якщо він є?
- Суфікс
Expand: Якщо вигляд батьків перевищує комбінований розмір усіх його дітей, тобто є додатковий простір, то простір пропорційно розподіляється між дочірніми переглядами з цим суфіксом. Ці діти будуть "займати" їх простір, але не обов'язково "заповнювати" його. Ми розглянемо цю поведінку на прикладі нижче.
- Немає суфікса: Діти без
Expandсуфікса не отримають додаткового місця, навіть якщо більше місця.
Знову ж таки, якщо батьківський вигляд не більший за його дочірніх, суфікс розширення також не має ніякої різниці.
Приклад
Давайте подивимось на наступному прикладі, щоб побачити різницю між усіма восьми варіантами компонування.
Додаток містить темно-сірий StackLayoutз вісьмома вкладеними білими кнопками, кожна з яких позначена своїм варіантом вертикального макета. Клацнувши по одній із кнопок, вона призначає свій варіант вертикальної компонування для макета стека. Таким чином ми можемо легко перевірити взаємодію поглядів з батьками, як з різним варіантом компонування.
(Останні кілька рядків коду додають додаткові жовті поля. Ми повернемося до цього через мить.)
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,
});
}
}
На наступних знімках екрана відображається результат при натисканні на кожну з восьми кнопок. Ми робимо такі зауваження:
- Поки батьків
stackLayoutє щільним (не Fillсторінка), варіант вертикального макета кожногоButton є незначним.
- Варіант вертикального макета має значення лише у тому випадку, якщо
stackLayoutбільший (наприклад, за допомогою Fillвирівнювання) та окремі кнопки мають Expandсуфікс.
- Додатковий простір пропорційно розподіляється між усіма кнопками із
Expandсуфіксом. Щоб зрозуміти це, ми додали жовті горизонтальні лінії між кожними двома сусідніми кнопками.
- Кнопки з більшим простором, ніж потрібна висота, не обов'язково "заповнюють" її. У цьому випадку фактична поведінка контролюється їх вирівнюванням. Наприклад, вони або вирівняні вгорі, по центру або на кнопці місця, або заповнити його повністю.
- Усі кнопки переходять на всю ширину макета, оскільки ми лише змінюємо
VerticalOptions.
Тут ви знайдете відповідні скріншоти з високою роздільною здатністю.
