Бөлісу құралы:

Сводная информация о Главе 4. Прокрутка стека

  • Мақала

Примечание.

Эта книга была опубликована весной 2016 года и с тех пор не обновлялась. Многое в этой книге остается ценным, но некоторые материалы устарели, а некоторые разделы перестали быть полностью верными или полными.

Эта глава посвящена в первую очередь такому понятию, как макет, которое обобщенно включает все классы и методики, используемые в Xamarin.Forms для организации визуального отображения нескольких представлений на странице.

Для создания макета нужно определить классы, производные от Layout и Layout<T>. В этой главе рассматривается StackLayout.

Примечание.

FlexLayout появился в Xamarin.Forms 3.0 и используется примерно так же, как StackLayout, но дает намного больше гибкости.

Также в этой главе вы познакомитесь с классами ScrollView, Frame и BoxView.

Стек представлений

StackLayout является производным от Layout<View> и наследует свойство Children от типа IList<View>. В эту коллекцию вы можете добавить несколько представлений, и тогда StackLayout отображает их в виде горизонтального или вертикального стека.

Присвойте свойству Orientation объекта StackLayout значение одного из элементов перечисления StackOrientation, то есть Vertical или Horizontal. Значение по умолчанию — Vertical.

Присвойте свойству Spacing объекта StackLayout значение double, чтобы задать расстояние между дочерними элементами. По умолчанию используется значение 6.

Вы можете в коде добавлять элементы в коллекцию Children с StackLayout, используя цикл for или foreach, как показано в примере ColorLoop, или инициализировать коллекцию Children списком отдельных представлений, как показано в примере ColorList. Дочерние элементы должны быть производными от View, но могут содержать другие объекты StackLayout.

Прокрутка содержимого

Если StackLayout содержит слишком много дочерних элементов и они не помещаются на странице, поместите StackLayout в ScrollView, чтобы разрешить прокрутку.

Присвойте свойству Content объекта ScrollView значение представления, для которого вы хотите применить прокрутку. Обычно это StackLayout, но может быть и любое другое представление.

Установите свойству Orientation объекта ScrollView значение одного из элементов свойства ScrollOrientation, то есть Vertical, Horizontal или Both. Значение по умолчанию — Vertical. Если содержимое ScrollView является StackLayout, обе ориентации должны быть единообразными.

В примере ReflectedColors демонстрируется использование ScrollView и StackLayout для вывода доступных цветов. В этом примере также показано, как использовать отражение .NET для получения всех открытых статических свойств и полей структуры Color, не перечисляя их явным образом.

Параметр Expand

Когда StackLayout размещает дочерние элементы в стеке, каждый из них занимает в пределах общей высоты StackLayout определенную область, которая зависит от размера дочернего элемента и значений его свойств HorizontalOptions и VerticalOptions. Этим свойствам присваиваются значения типа LayoutOptions.

Структура LayoutOptions определяет два свойства.

Для удобства структура LayoutOptions также определяет восемь статических полей только для чтения с типом LayoutOptions, которые описывают все возможные сочетания двух свойств экземпляра:

В дальнейшем обсуждении всегда предполагается StackLayout с вертикальной ориентацией по умолчанию. Для горизонтального StackLayout все работает так же.

Для вертикального StackLayout параметр HorizontalOptions определяет горизонтальное положение дочернего элемента в пределах ширины StackLayout. Если параметр Alignment имеет значение Start, Center или End, дочерний элемент не ограничивается в горизонтальном направлении. Дочерний элемент самостоятельно определяет свою ширину и располагается слева, по центру или справа от StackLayout. Значение Fill налагает ограничение на горизонтальный размер дочернего элемента и заполняет ширину, указанную в StackLayout.

Для вертикального StackLayout каждый дочерний элемент не имеет ограничений по вертикали, и размер выделяемой ему области определяется в зависимости от высоты дочернего элемента, а значит параметр VerticalOptions не применяется.

Если вертикальная StackLayout сама по себе не ограничена, то есть если его VerticalOptions параметр имеет Startзначение , Centerили End, то высота StackLayout является общей высотой его дочерних элементов.

Тем не менее, если вертикальная вертикали StackLayout ограничена (если его VerticalOptions параметр имеет Fillзначение), высота StackLayout контейнера будет высотой контейнера, что может быть больше общей высоты дочерних элементов. Если это так, и если по крайней мере один дочерний элемент имеет параметр VerticalOptions и флаг Expands со значением true, дополнительное пространство в StackLayout равномерно распределяется между всеми дочерними элементами, у которых флаг Expands имеет значение true. После этого общая высота дочернего элемента будет равна высоте StackLayout, а часть Alignment параметра VerticalOptions определяет, какую вертикальную позицию занимает дочерний элемент в своей области.

Это показано в примере VerticalOptionsDemo.

Frame и BoxView

Эти два прямоугольных представления часто используются для наглядной презентации.

Представление Frame отображает прямоугольную рамку вокруг другого представления, которая может быть макетом, например StackLayout. Frame наследует свойство Content из ContentView, который вы указываете для отображения представления в пределах Frame. По умолчанию Frame прозрачна. Задайте следующие три свойства, чтобы изменить внешний вид рамки.

  • Свойство OutlineColor сделает ее видимой. Обычно для OutlineColor задают значение Color.Accent, если базовая цветовая схема не известна.
  • Для свойства HasShadow можно задать значение true, чтобы на устройствах iOS отображалась черная тень.
  • Для свойства Padding задайте значение Thickness, чтобы оставить пробел между рамкой и содержимым. По умолчанию используется значение 20 единиц со всех сторон.

Frame имеет значения по умолчанию HorizontalOptions и VerticalOptions для LayoutOptions.Fill, то есть Frame полностью заполнит свой контейнер. При других значениях параметров размер Frame зависит от размера содержимого.

Применение Frame демонстрируется в примере FramedText.

BoxView отображает прямоугольную область, цвет которой задается свойством Color.

Если объект BoxView ограничен (свойства HorizontalOptions и VerticalOptions имеют значения по умолчанию LayoutOptions.Fill), BoxView заполняет все доступное пространство. Если объект BoxView не ограничен (то есть HorizontalOptions и LayoutOptions имеют значения Start, Center или End), его размер по умолчанию устанавливается в 40 единиц. BoxView может быть ограниченным по одному измерению и неограниченным по другому.

Часто задают свойства WidthRequest и HeightRequest для BoxView, чтобы присвоить ему конкретный размер. Это продемонстрировано в примере SizedBoxView.

Вы можете использовать несколько экземпляров StackLayout, чтобы объединить BoxView с несколькими экземплярами Label в Frame и отобразить определенный цвет, а затем поместить каждое из этих представлений в StackLayout в ScrollView, чтобы создать симпатичный список цветов, как показано в примере ColorBlocks.

Снимок экрана с тремя изображениями цветных блоков

Размещение ScrollView в StackLayout

Обычно StackLayout размещают в ScrollView, но иногда бывает удобно разместить ScrollView в StackLayout. Теоретически это не должно быть возможным, так как дочерние элементы вертикального StackLayout не ограничены по вертикали. Но ScrollView должны быть ограничены по вертикали. Необходимо присвоить элементу определенную высоту, чтобы появилась возможность определить размер дочернего элемента для прокрутки.

Хитрость заключается в том, чтобы присвоить значение FillAndExpand параметру VerticalOptions в ScrollView, который является дочерним элементом StackLayout. Это показано в примере BlackCat.

Пример BlackCat также демонстрирует, как определить и использовать ресурсы программы, внедренные в общую библиотеку. Такого же результата можно добиться с помощью проектов общих ресурсов (SAP), но этот процесс немного сложнее, как показано в примере BlackCatSap.