The Xamarin.Forms FlexLayout

  • Статья

Download Sample Скачайте пример

Используйте FlexLayout для стека или упаковки коллекции дочерних представлений.

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

FlexLayout аналогично тому Xamarin.FormsStackLayout , что он может упорядочивать дочерние элементы по горизонтали и по вертикали в стеке. Однако он FlexLayout также может упаковать дочерние элементы, если слишком много, чтобы поместиться в одну строку или столбец, а также имеет множество вариантов ориентации, выравнивания и адаптации к различным размерам экрана.

FlexLayout является производным от Layout<View> и наследует свойство Children от типа IList<View>.

FlexLayout определяет шесть общедоступных привязываемых свойств и пять присоединенных привязываемых свойств, влияющих на размер, ориентацию и выравнивание дочерних элементов. (Если вы не знакомы с присоединенными привязываемыми свойствами, см. статью Присоединенные свойства.) Эти свойства подробно описаны в разделах ниже о привязываемых свойствах подробно и вложенных привязываемых свойствах. Однако эта статья начинается с раздела о некоторых распространенных сценарияхFlexLayout использования, описывающих многие из этих свойств более неформальным образом. В конце статьи вы увидите, как объединить таблицы FlexLayoutстилей CSS.

Основные сценарии использования

Пример программы FlexLayoutDemos содержит несколько страниц, демонстрирующих некоторые распространенные способы использования FlexLayout и позволяющие экспериментировать со своими свойствами.

Использование FlexLayout для простого стека

На странице "Простой стек " показано, как FlexLayout заменить его StackLayout более простой разметкой. Все в этом примере определяется на странице XAML. Содержит FlexLayout четыре дочерних элемента:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

Вот эта страница, запущенная на iOS, Android и универсальная платформа Windows:

The Simple Stack Page

Три свойства FlexLayout показаны в файле SimpleStackPage.xaml :

  • Свойство Direction имеет значение перечисления FlexDirection . Значение по умолчанию — Row. Задание свойства Column для упорядочения FlexLayout дочерних элементов в одном столбце элементов.

    Если элементы в столбце расположены в FlexLayout столбце, то, как сообщается, FlexLayout имеется вертикальная основная ось и горизонтальная перекрестная ось.

  • Свойство AlignItems имеет тип FlexAlignItems и указывает, как элементы выравниваются на крестовой оси. Параметр Center приводит к горизонтальному центру каждого элемента.

    Если вы использовали StackLayout не FlexLayout для этой задачи, вы будете центрировать все элементы, назначив HorizontalOptions свойству каждого элемента Center. Свойство HorizontalOptions не работает для дочерних FlexLayoutобъектов, но одно AlignItems свойство выполняет ту же цель. Если вам нужно, можно использовать присоединенное привязываемое AlignSelf свойство для переопределения AlignItems свойства для отдельных элементов:

    <Label Text="FlexLayout in Action"
       FontSize="Large"
       FlexLayout.AlignSelf="Start" />

    С этим изменением этот Label элемент расположен в левом крае FlexLayout , когда порядок чтения находится слева направо.

  • Свойство JustifyContent имеет тип FlexJustifyи указывает, как элементы упорядочены на главной оси. Параметр SpaceEvenly выделяет все левое вертикальное пространство одинаково между всеми элементами и выше первого элемента и ниже последнего элемента.

    Если вы использовали объект StackLayout, необходимо назначить VerticalOptions свойство каждого элемента для CenterAndExpand достижения аналогичного эффекта. CenterAndExpand Но параметр выделяет в два раза больше места между каждым элементом, чем до первого элемента и после последнего элемента. Параметр можно имитировать CenterAndExpandVerticalOptions , задав JustifyContent для свойства FlexLayout значение SpaceAround.

Эти FlexLayout свойства подробно рассматриваются в разделе "Привязываемые свойства" подробно ниже.

Использование FlexLayout для упаковки элементов

На странице "Упаковка фотографий" примера FlexLayoutDemos показано, как FlexLayout упаковать дочерние элементы в дополнительные строки или столбцы. XAML-файл создает экземпляр FlexLayout и назначает два свойства:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

Свойство Direction этого FlexLayout параметра не задано, поэтому он имеет значение Rowпо умолчанию, то есть дочерние элементы расположены в строках, а основная ось — горизонтальная.

Свойство Wrap имеет тип FlexWrapперечисления. Если в строке слишком много элементов, то этот параметр свойства приводит к тому, что элементы будут обтекаться в следующую строку.

Обратите внимание, что FlexLayout это дочерний объект ScrollView. Если на странице слишком много строк, то ScrollView свойство по умолчанию OrientationVertical позволяет прокручиваться по вертикали.

Свойство JustifyContent выделяет левое пространство на главной оси (горизонтальная ось), чтобы каждый элемент был окружен одинаковым объемом пустого пространства.

Файл программной части обращается к коллекции примеров фотографий и добавляет их в коллекцию ChildrenFlexLayout:

public partial class PhotoWrappingPage : ContentPage
{
    // Class for deserializing JSON list of sample bitmaps
    [DataContract]
    class ImageList
    {
        [DataMember(Name = "photos")]
        public List<string> Photos = null;
    }

    public PhotoWrappingPage ()
    {
        InitializeComponent ();

        LoadBitmapCollection();
    }

    async void LoadBitmapCollection()
    {
        using (WebClient webClient = new WebClient())
        {
            try
            {
                // Download the list of stock photos
                Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
                byte[] data = await webClient.DownloadDataTaskAsync(uri);

                // Convert to a Stream object
                using (Stream stream = new MemoryStream(data))
                {
                    // Deserialize the JSON into an ImageList object
                    var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                    ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);

                    // Create an Image object for each bitmap
                    foreach (string filepath in imageList.Photos)
                    {
                        Image image = new Image
                        {
                            Source = ImageSource.FromUri(new Uri(filepath))
                        };
                        flexLayout.Children.Add(image);
                    }
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot access list of bitmap files"
                });
            }
        }

        activityIndicator.IsRunning = false;
        activityIndicator.IsVisible = false;
    }
}

Вот программа работает, постепенно прокручиваемая сверху вниз:

The Photo Wrapping Page

Макет страницы с помощью FlexLayout

Существует стандартный макет в веб-дизайне называется святой грааль , потому что это формат макета, который очень желателен, но часто трудно реализовать с совершенством. Макет состоит из верхнего колонтитула в верхней части страницы и нижнего колонтитула в нижней части страницы, что расширяется до полной ширины страницы. В центре страницы находится основное содержимое, но часто с столбцов меню слева от содержимого и дополнительных сведений (иногда называется в стороне) справа. В разделе 5.4.1 спецификации гибкого прямоугольника CSS описывается, как макет святой грааль можно реализовать с помощью гибкого прямоугольника.

На странице "Макет Святого Грааля" примера FlexLayoutDemos показана простая реализация этого макета с помощью одной FlexLayout вложенной в другой. Так как эта страница предназначена для телефона в книжном режиме, области слева и справа от области содержимого всего 50 пикселей:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="Large"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="Large"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

Здесь выполняется:

The Holy Grail Layout Page

Навигация и области в сторону отрисовываются BoxView слева и справа.

Первый FlexLayout в XAML-файле имеет вертикальную основную ось и содержит три дочерних элемента, расположенных в столбце. Это верхний колонтитул, текст страницы и нижний колонтитул. Вложенная FlexLayout ось имеет горизонтальную основную ось с тремя дочерними элементами, расположенными в строке.

В этой программе показаны три присоединенных привязываемых свойства:

  • Order Присоединенное привязываемое свойство устанавливается на первомBoxView. Это свойство является целым числом со значением по умолчанию 0. Это свойство можно использовать для изменения порядка макета. Как правило, разработчики предпочитают, чтобы содержимое страницы отображалось в разметке до элементов навигации и в сторону элементов. Order Задание свойства в первом значении меньше, чем другие братья и сестры, приводит к отображению в качестве первого BoxView элемента в строке. Аналогичным образом можно убедиться, что элемент отображается последним, задав Order свойству значение больше его братьев и сестер.

  • Присоединенное Basis привязываемое свойство устанавливается на двух BoxView элементах, чтобы дать им ширину в 50 пикселей. Это свойство имеет тип FlexBasis, структура, которая определяет статическое свойство типа FlexBasis с именем Auto, которое является значением по умолчанию. Можно использовать Basis для указания размера пикселя или процента, указывающего, сколько места занимает элемент на главной оси. Он называется основой , так как он указывает размер элемента, который является основой для всех последующих макетов.

  • Свойство Grow задается в вложенных Layout и Label дочерних элементах, представляющих содержимое. Это свойство имеет тип float и имеет значение по умолчанию 0. Если задано положительное значение, все оставшееся пространство вдоль главной оси выделяется этому элементу и братьям и сестрам с положительными значениями Grow. Пространство выделяется пропорционально значениям, как спецификация звезды в объекте Grid.

    Первое Grow присоединенное свойство устанавливается на вложенный FlexLayoutобъект, указывающий, что это FlexLayout занимает все неиспользуемое вертикальное пространство внутри внешнего FlexLayout. Второе Grow присоединенное свойство устанавливается для Label представления содержимого, указывающее, что это содержимое занимает все неиспользуемое горизонтальное пространство внутри внутренней FlexLayoutчасти.

    Существует также аналогичное Shrink присоединенное привязываемое свойство, которое можно использовать, если размер дочерних элементов превышает размер FlexLayout , но оболочка не требуется.

Элементы каталога с помощью FlexLayout

Страница "Элементы каталога" в примере FlexLayoutDemos аналогична примеру 1 в разделе 1.1 спецификации CSS Flex Layout Box, за исключением того, что отображается горизонтально прокручиваемая серия рисунков и описания трех обезьян:

The Catalog Items Page

Каждая из трех обезьян содержится FlexLayout в объекте Frame , который имеет явную высоту и ширину, и который также является дочерним элементом большего размера FlexLayout. В этом XAML-файле большинство свойств дочерних FlexLayout элементов указываются в стилях, но один из которых является неявным стилем:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CatalogItemsPage"
             Title="Catalog Items">
    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>

        <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Неявный стиль для Image параметров двух присоединенных привязываемых свойств Flexlayout:

<Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>

Параметр Order –1 приводит Image к отображению элемента в каждом из вложенных представлений независимо от его положения в коллекции FlexLayout дочерних элементов. Свойство AlignSelfCenter приводит Image к центру в FlexLayoutпределах . Это переопределяет параметр AlignItems свойства, который имеет значение Stretchпо умолчанию, что означает, что Label дочерние элементы Button растянуты до полной ширины FlexLayout.

В каждом из трех FlexLayout представлений Label пустой элемент предшествует Buttonпараметру Grow 1. Это означает, что все дополнительное вертикальное пространство выделяется этому пустому Label, что эффективно толкает вниз Button .

Привязываемые свойства подробно

Теперь, когда вы видели некоторые распространенные приложения FlexLayout, свойства FlexLayout можно изучить более подробно. FlexLayout определяет шесть привязываемых свойств, заданных в FlexLayout коде или XAML, для управления ориентацией и выравниванием. (Одно из этих свойств, Positionне рассматривается в этой статье.)

Вы можете экспериментировать с пятью оставшимися привязываемыми свойствами с помощью страницы "Эксперимент" примера FlexLayoutDemos. Эта страница позволяет добавлять или удалять дочерние элементы из списка FlexLayout и задавать сочетания пяти привязываемых свойств. Все дочерние FlexLayout элементы представляют Label собой представления различных цветов и размеров, при Text этом свойство имеет число, соответствующее его позиции в Children коллекции.

При запуске программы пять Picker представлений отображают значения по умолчанию этих пяти FlexLayout свойств. В FlexLayout нижней части экрана находятся три дочерних элемента:

The Experiment Page: Default

Label Каждый из представлений имеет серый фон, показывающий пространство, выделенное для этого Label внутри FlexLayout. FlexLayout Фон самого себя Алиса Блю. Он занимает всю нижнюю область страницы, за исключением небольшого поля в левой и правой части.

Свойство Direction

Свойство Direction имеет тип FlexDirection, перечисление с четырьмя элементами:

  • Column
  • ColumnReverse (или "столбец-обратный" в XAML)
  • Row (стандартный вариант);
  • RowReverse (или "обратная строка" в XAML)

В XAML можно указать значение этого свойства с помощью имен элементов перечисления в нижнем регистре, верхнем регистре или смешанном регистре или использовать две дополнительные строки, отображаемые в скобках, которые совпадают с индикаторами CSS. (Строки с обратным столбцом и "обратным строкой" определяются в FlexDirectionTypeConverter классе, используемом анализатором XAML.)

Ниже приведена страница "Эксперимент" , показывающая (слева направо), Row направление, Column направление и ColumnReverse направление:

The Experiment Page: Direction

Обратите внимание, что для Reverse параметров элементы начинаются в правом или нижнем углу.

Свойство Wrap

Свойство Wrap имеет тип FlexWrap, перечисление с тремя элементами:

  • NoWrap (стандартный вариант);
  • Wrap
  • Reverse (или "оболочка-обратный" в XAML)

Слева направо эти экраны отображают NoWrapWrapReverse параметры для 12 дочерних элементов:

The Experiment Page: Wrap

Wrap Если для свойства задано NoWrap значение и основная ось ограничена (как и в этой программе), а основная ось недостаточно широка или высока, чтобы соответствовать всем дочерним элементам, FlexLayout попытки сделать элементы меньше, как показано на снимке экрана iOS. Вы можете управлять сжатием элементов с присоединенным привязываемым свойством Shrink .

Свойство JustifyContent

Свойство JustifyContent имеет тип FlexJustify, перечисление с шестью элементами:

  • Start (или "flex-start" в XAML) по умолчанию
  • Center
  • End (или "flex-end" в XAML)
  • SpaceBetween (или пробел между" в XAML)
  • SpaceAround (или "пространство вокруг" в XAML)
  • SpaceEvenly

Это свойство указывает, как элементы расположены на главной оси, которая является горизонтальной осью в этом примере:

The Experiment Page: Justify Content

На всех трех снимках Wrap экрана для свойства задано Wrapзначение . Значение Start по умолчанию отображается на предыдущем снимке экрана Android. Снимок экрана iOS здесь показывает Center параметр: все элементы перемещаются в центр. Три других варианта, начиная с слова Space , выделяют дополнительное пространство, не занятое элементами. SpaceBetween выделяет пространство одинаково между элементами; SpaceAround помещает равное пространство вокруг каждого элемента, в то время как SpaceEvenly помещает равное пространство между каждым элементом и перед первым элементом и после последнего элемента в строке.

Свойство AlignItems

Свойство AlignItems имеет тип FlexAlignItems, перечисление с четырьмя элементами:

  • Stretch (стандартный вариант);
  • Center
  • Start (или "flex-start" в XAML)
  • End (или "flex-end" в XAML)

Это одно из двух свойств (другое существо AlignContent), указывающее, как дочерние элементы выровнены по оси между осью. В каждой строке дочерние элементы растянуты (как показано на предыдущем снимке экрана) или выровнены по начальной, центру или концу каждого элемента, как показано на следующих трех снимках экрана:

The Experiment Page: Align Items

На снимке экрана iOS выровнены верхней части всех дочерних элементов. На снимках экрана Android элементы расположены по вертикали на основе самого высокого дочернего элемента. На снимке экрана UWP выровнены нижние части всех элементов.

Для любого отдельного элемента AlignItems параметр можно переопределить с присоединенным привязываемым свойством AlignSelf .

Свойство AlignContent

Свойство AlignContent имеет тип FlexAlignContent, перечисление с семью элементами:

  • Stretch (стандартный вариант);
  • Center
  • Start (или "flex-start" в XAML)
  • End (или "flex-end" в XAML)
  • SpaceBetween (или пробел между" в XAML)
  • SpaceAround (или "пространство вокруг" в XAML)
  • SpaceEvenly

Например AlignItems, AlignContent свойство также выравнивает дочерние элементы на перекрестной оси, но влияет на все строки или столбцы:

The Experiment Page: Align Content

На снимке экрана iOS обе строки находятся в верхней части экрана; на снимке экрана Android они в центре; и на снимке экрана UWP они находятся в нижней части экрана. Строки также могут быть разделены различными способами:

The Experiment Page: Align Content 2

Не AlignContent действует, если существует только одна строка или столбец.

Вложенные привязываемые свойства подробно

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

Свойство AlignSelf

AlignSelf Присоединенное привязываемое свойство имеет типFlexAlignSelf, перечисление с пятью элементами:

  • Auto (стандартный вариант);
  • Stretch
  • Center
  • Start (или "flex-start" в XAML)
  • End (или "flex-end" в XAML)

Для любого отдельного дочернего FlexLayoutэлемента этого свойства этот параметр переопределяет AlignItems свойство, заданное FlexLayout на самом себе. Параметр Auto по умолчанию означает использование AlignItems параметра.

Для элемента с именем label (или примеромLabel) можно задать AlignSelf свойство в коде следующим образом:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Обратите внимание, что нет ссылки на родительский FlexLayoutLabelэлемент . В XAML вы задаете следующее свойство:

<Label ... FlexLayout.AlignSelf="Center" ... />

Свойство Order

Свойство Order имеет тип int. Значение по умолчанию равно 0.

Свойство Order позволяет изменить порядок упорядочения дочерних FlexLayout элементов. Как правило, дочерние элементы FlexLayout упорядочивания совпадают с тем же порядком, что они отображаются в Children коллекции. Вы можете переопределить этот порядок, задав присоединенное Order привязываемое свойство в целочисленное значение, отличное от нуля, для одного или нескольких дочерних элементов. Затем FlexLayout дочерние элементы упорядочивается на основе параметра Order свойства на каждом дочернем элементе, но дочерние элементы с Order одинаковым параметром упорядочивается в том порядке, в который они отображаются в Children коллекции.

Свойство "Основа"

Присоединенное Basis привязываемое свойство указывает объем пространства, выделенного дочернему элементу основной FlexLayout оси. Размер, указанный Basis свойством, — это размер вдоль основной оси родительского FlexLayoutэлемента. Таким образом, Basis указывает ширину дочернего элемента, если дочерние элементы расположены в строках или высоту, когда дочерние элементы расположены в столбцах.

Свойство Basis имеет тип FlexBasis, структуру. Размер можно указать в отдельных устройствах или в процентах от размера FlexLayout. Значение Basis свойства по умолчанию — это статическое свойство FlexBasis.Auto, которое означает, что используется запрошенная ширина или высота дочернего объекта.

В коде Basis можно задать свойство для именованных Labellabel 40 независимых от устройств единиц, таких как:

FlexLayout.SetBasis(label, new FlexBasis(40, false));

Второй аргумент FlexBasis конструктора называется isRelative и указывает, является ли размер относительным (true) или абсолютным (false). Аргумент имеет значение falseпо умолчанию, поэтому можно также использовать следующий код:

FlexLayout.SetBasis(label, new FlexBasis(40));

Неявное преобразование из floatFlexBasis него определяется, поэтому его можно упростить еще дальше:

FlexLayout.SetBasis(label, 40);

Можно задать размер 25 % родительского FlexLayout элемента следующим образом:

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

Это дробное значение должно находиться в диапазоне от 0 до 1.

В XAML можно использовать число для размера в единицах, независимых от устройств:

<Label ... FlexLayout.Basis="40" ... />

Или можно указать процент в диапазоне от 0 до 100%:

<Label ... FlexLayout.Basis="25%" ... />

Страница "Базовый эксперимент" примера FlexLayoutDemos позволяет экспериментировать со свойством.Basis На странице отображается завернутый столбец из пяти Label элементов с чередующимися цветами фона и переднего плана. Два Slider элемента позволяют указать Basis значения для второго и четвертого Labelэлементов:

The Basis Experiment Page

Снимок экрана iOS слева показывает два Label элемента, которые получают высоту в независимых от устройства единицах. Экран Android показывает, что они получают высоты, которые являются частью общей высоты FlexLayout. Basis Если задано значение 100 %, то дочерний элемент имеет высоту FlexLayoutстолбца и будет завернут к следующему столбцу и занимает всю высоту этого столбца, как показано на снимке экрана UWP: отображается, как если бы пять дочерних элементов упорядочивали в строке, но они на самом деле расположены в пяти столбцах.

Свойство Grow

Присоединенное Grow привязываемое свойство имеет тип int. Значение по умолчанию равно 0, а значение должно быть больше или равно 0.

Свойство Grow играет роль, если Wrap для свойства задано NoWrap значение, а строка дочерних элементов имеет общую ширину меньше ширины FlexLayoutили столбец дочерних объектов имеет более короткую высоту.FlexLayout Свойство Grow указывает, как распределить оставшееся пространство между дочерними элементами.

На странице "Рост эксперимента" пять Label элементов чередующихся цветов расположены в столбце, а два Slider элемента позволяют настроить Grow свойство второго и четвертогоLabel. Снимок экрана iOS в левом углу отображает свойства по умолчанию Grow 0:

The Grow Experiment Page

Если одному дочернему элементу присвоено положительное Grow значение, то этот ребенок занимает все оставшееся пространство, как показано на снимках экрана Android. Это пространство также можно выделить между двумя или более детьми. На снимке экрана Grow UWP свойство второго Label имеет значение 0,5, а свойство четвертого Label — 1,5, что Grow дает четвертое Label три раза больше оставшегося пространства, чем второйLabel.

Как дочернее представление использует это пространство, зависит от конкретного типа дочернего элемента. Для этого Labelтекст можно разместить в общем пространстве Label с помощью свойств HorizontalTextAlignment и VerticalTextAlignment.

Свойство сжатия

Присоединенное Shrink привязываемое свойство имеет тип int. Значение по умолчанию равно 1, а значение должно быть больше или равно 0.

Свойство Shrink играет роль, если Wrap свойству присвоено NoWrap значение, а агрегированная ширина строки дочерних элементов больше ширины FlexLayout, или совокупная высота одного столбца дочерних элементов больше высоты FlexLayout. FlexLayout Обычно эти дочерние элементы будут отображаться путем сужения их размеров. Свойство Shrink может указать, какие дочерние элементы имеют приоритет при отображении в полном объеме.

Страница "Сжатие эксперимента " создает FlexLayout одну строку из пяти Label дочерних элементов, для которых требуется больше места, чем FlexLayout ширина. Снимок экрана iOS слева показывает все Label элементы со значениями по умолчанию 1:

The Shrink Experiment Page

На снимке экрана Shrink Android значение второго Label имеет значение 0 и Label отображается в полной ширине. Кроме того, четвертый LabelShrink получает значение больше одного, и он сократился. Снимок экрана UWP показывает, что оба Label элемента имеют Shrink значение 0, чтобы разрешить их отображать в полном размере, если это возможно.

Можно задать как значения, так Grow и Shrink значения для удовлетворения ситуаций, когда агрегатные дочерние размеры иногда могут быть меньше или иногда больше размера FlexLayout.

Стилизация CSS с помощью FlexLayout

В связи FlexLayoutс ним можно использовать функцию стилизации CSS, представленную в Xamarin.Forms версии 3.0. Страница "Элементы каталога CSS" примера FlexLayoutDemos дублирует макет страницы "Элементы каталога", но с таблицей стилей CSS для многих стилей:

The CSS Catalog Items Page

Исходный файл CatalogItemsPage.xaml содержит пять Style определений в своем Resources разделе с 15 Setter объектами. В файле CssCatalogItemsPage.xaml, который был сокращен до двух Style определений с четырьмя Setter объектами. Эти стили дополняют таблицу стилей CSS для свойств, которые Xamarin.Forms функция стилизации CSS в настоящее время не поддерживает:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CssCatalogItemsPage"
             Title="CSS Catalog Items">
    <ContentPage.Resources>
        <StyleSheet Source="CatalogItemsStyles.css" />

        <Style TargetType="Frame">
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey" StyleClass="header" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey" StyleClass="header" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey" StyleClass="header" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Таблица стилей Resources CSS ссылается на первую строку раздела:

<StyleSheet Source="CatalogItemsStyles.css" />

Обратите внимание, что два элемента в каждом из трех элементов включают StyleClass параметры:

<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />

Эти селекторы относятся к селекторам в таблице стилей CatalogItemsStyles.css :

frame {
    width: 300;
    height: 480;
    background-color: lightyellow;
    margin: 10;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

Здесь приведены ссылки на несколько FlexLayout присоединенных привязываемых свойств. label.empty В селекторе вы увидите flex-grow атрибут, который стили пустымLabel, чтобы предоставить некоторое пустое пространство над атрибутомButton. image Селектор содержит order атрибут и align-self атрибут, оба из которых соответствуют FlexLayout присоединенным свойствам привязки.

Вы видели, что вы можете задать свойства непосредственно на объекте FlexLayout , и вы можете задать присоединенные привязываемые свойства на дочерних элементах FlexLayout. Кроме того, эти свойства можно задать косвенно с помощью традиционных стилей на основе XAML или стилей CSS. Важно знать и понимать эти свойства. Эти свойства являются тем, что делает действительно гибким FlexLayout .

FlexLayout с Xamarin.University

Xamarin.Forms Видео 3.0 Flex Layout