Поделиться через

FlexLayout

  • Статья

Browse sample. Обзор примера

.NET MAUI FlexLayout.

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) FlexLayout — это макет, который может упорядочивать дочерние элементы по горизонтали и вертикали в стеке, а также может упаковать дочерние элементы, если в одной строке или столбце слишком много. Кроме того, FlexLayout можно управлять ориентацией и выравниванием, а также адаптироваться к разным размерам экрана. FlexLayoutоснован на модуле гибкого макета прямоугольника каскадных таблиц стилей (CSS).

Класс FlexLayout определяет следующие свойства:

  • AlignContentтипа, который определяет, как подсистема макета FlexAlignContentраспределяет пространство между дочерними элементами, которые были размещены на нескольких строках. Значение по умолчанию этого свойства равно Stretch. Дополнительные сведения см. в разделе AlignContent.
  • AlignItemsтип , который указывает, как подсистема макета FlexAlignItemsраспределяет пространство между дочерними элементами вдоль перекрестной оси. Значение по умолчанию этого свойства равно Stretch. Дополнительные сведения см. в разделе AlignItems.
  • DirectionFlexDirectionтип, определяющий направление и основную ось дочерних элементов. Значение по умолчанию этого свойства равно Row. Дополнительные сведения см. в разделе "Направление".
  • JustifyContentFlexJustifyтип , который указывает, как пространство распределяется между дочерними элементами вдоль главной оси. Значение по умолчанию этого свойства равно Start. Дополнительные сведения см. в разделе "JustifyContent".
  • PositionFlexPositionтип , который определяет, является ли положение дочерних объектов относительно друг друга или с помощью фиксированных значений. Значение по умолчанию этого свойства равно Relative.
  • WrapFlexWrapТип , который определяет, размещаются ли дочерние элементы в одной строке или в нескольких строках. Значение по умолчанию этого свойства равно NoWrap. Дополнительные сведения см. в разделе "Оболочка".
  • AlignSelfТип , который является присоединенным свойством, которое указывает, как подсистема макета FlexAlignSelfбудет распределять пространство между дочерними элементами для определенного дочернего элемента вдоль перекрестной оси. Значение по умолчанию этого свойства равно Auto. Дополнительные сведения см. в разделе AlignSelf.
  • BasisFlexBasisТип , который является присоединенным свойством, которое определяет начальный основной размер дочернего элемента, прежде чем свободное пространство распределяется в соответствии с другими значениями свойств. Значение по умолчанию этого свойства равно Auto. Дополнительные сведения см. в разделе "Основы".
  • GrowfloatТип , который является присоединенным свойством, которое указывает объем доступного пространства, которое дочерний объект должен использовать на главной оси. Значение по умолчанию этого свойства равно 0.0. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 0. Дополнительные сведения см. в разделе "Рост".
  • OrderТип int, который является присоединенным свойством, которое определяет, следует ли выложить дочерний объект до или после других дочерних элементов в контейнере. Значение этого свойства по умолчанию равно 0. Дополнительные сведения см. в разделе Заказ.
  • ShrinkfloatТип , который является присоединенным свойством, которое определяет, как дочерний элемент должен сжиматься, чтобы все дочерние элементы могли помещаться в контейнер. Значение по умолчанию этого свойства — 1.0. Обратный вызов проверки гарантирует, что при установке свойства его значение больше или равно 0. Дополнительные сведения см. в разделе "Сжатие".

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

Важно!

При расположении элементов в FlexLayout столбце FlexLayout имеет вертикальную основную ось и горизонтальную перекрестную ось. При расположении элементов в FlexLayout строке FlexLayout имеет горизонтальную основную ось и вертикальную перекрестную ось.

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

Ориентация и выравнивание

DirectionСвойства , , Wrapи AlignItemsPosition JustifyContentAlignContentпривязываемые свойства можно задать для FlexLayout управления ориентацией и выравниванием всех дочерних элементов.

Направление

Свойство Direction типа FlexDirectionопределяет направление и основную ось дочерних элементов. Перечисление FlexDirection определяет следующие члены:

  • Column, указывающее, что дочерние элементы должны быть сложены по вертикали.
  • ColumnReverse (или "столбец-обратный" в XAML), указывающий, что дочерние элементы должны быть сложены по вертикали в обратном порядке.
  • Row, указывающее, что дочерние элементы должны быть сложены по горизонтали. Это значение по умолчанию для свойства Direction.
  • RowReverse (или "обратная строка" в XAML), указывающее, что дочерние элементы должны быть сложены по горизонтали в обратном порядке.

Direction Если для свойства задано Columnзначение (илиColumnReverse), основная ось будет осью y, а элементы будут стекаться по вертикали. Direction Если для свойства задано значение Row(илиRowReverse), основная ось будет осью x, а дочерние элементы будут стекаться по горизонтали.

Примечание.

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

Переносить

Свойство Wrap типа FlexWrapопределяет, размещаются ли дочерние элементы в одной строке или в нескольких строках. Перечисление FlexWrap определяет следующие члены:

  • NoWrap, указывающее, что дочерние элементы размещаются в одной строке. Это значение по умолчанию для свойства Wrap.
  • Wrap, указывающий, что элементы размещаются в нескольких строках при необходимости.
  • Reverse (или "оболочка-обратный" в XAML), который указывает, что элементы помещаются в несколько строк при необходимости в обратном порядке.

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

Wrap Если для свойства задано Wrap значение или WrapReverse, AlignContent свойство можно использовать для указания способа распределения строк.

JustifyContent

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

  • Start (или "flex-start" в XAML), указывающее, что дочерние элементы должны быть выровнены в начале. Это значение по умолчанию для свойства JustifyContent.
  • Center, указывающее, что дочерние элементы должны быть выровнены по центру.
  • End (или "flex-end" в XAML), указывающее, что дочерние элементы должны быть выровнены в конце.
  • SpaceBetween (или пробел между" в XAML), который указывает, что дочерние элементы должны быть равномерно распределены, при этом первый дочерний элемент должен находиться в начале и последний дочерний элемент в конце.
  • SpaceAround (или "пробел вокруг" в XAML), указывающее, что дочерние элементы должны равномерно распределяться, причем первые и последние дочерние элементы имеют половинное пространство.
  • SpaceEvenly, указывающее, что дети должны равномерно распределяться, причем все дети имеют равное пространство вокруг них.

AlignItems

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

  • Stretch, указывающее, что дочерние элементы должны быть растянуты. Это значение AlignItems свойства по умолчанию.
  • Center, указывающее, что дочерние элементы должны быть выровнены по центру.
  • Start (или "flex-start" в XAML), указывающее, что дочерние элементы должны быть выровнены в начале.
  • End (или "flex-end" в XAML), указывающее, что дочерние элементы должны быть выровнены в конце.

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

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

ВыравниваниеContent

Свойство AlignContent типа определяет, как подсистема макета FlexAlignContentраспределяет пространство между дочерними элементами, которые были размещены на нескольких строках. Перечисление FlexAlignContent определяет следующие члены:

  • Stretch, указывающее, что дочерние элементы должны быть растянуты. Это значение AlignContent свойства по умолчанию.
  • Center, указывающее, что дочерние элементы должны быть выровнены по центру.
  • Start (или "flex-start" в XAML), указывающее, что дочерние элементы должны быть выровнены в начале.
  • End (или "flex-end" в XAML), указывающее, что дочерние элементы должны быть выровнены в конце.
  • SpaceBetween (или пробел между" в XAML), который указывает, что дочерние элементы должны быть равномерно распределены, при этом первый дочерний элемент должен находиться в начале и последний дочерний элемент в конце.
  • SpaceAround (или "пробел вокруг" в XAML), указывающее, что дочерние элементы должны равномерно распределяться, причем первые и последние дочерние элементы имеют половинное пространство.
  • SpaceEvenly, указывающее, что дети должны равномерно распределяться, причем все дети имеют равное пространство вокруг них.

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

Выравнивание дочерних элементов и размер

AlignSelfСвойства , , BasisOrderGrowи Shrink присоединенные привязываемые свойства можно задать на дочерних элементах для управления ориентацией дочерних FlexLayout элементов, выравниванием и изменением размера.

Выравнивание

Свойство AlignSelf типа указывает, как подсистема макета FlexAlignSelfраспределяет пространство между дочерними элементами для определенного дочернего элемента вдоль перекрестной оси. Перечисление FlexAlignSelf определяет следующие члены:

  • Auto, указывающее, что дочерний элемент должен быть выровнен в соответствии со значением выравнивания родительского элемента. Это значение по умолчанию для свойства AlignSelf.
  • Stretch, указывающее, что дочерний объект должен быть растянут.
  • Center, указывающее, что дочерний элемент должен быть выровнен по центру.
  • Start (или "flex-start" в XAML), указывающее, что дочерний элемент должен быть выровнен в начале.
  • End (или "flex-end" в XAML), указывающее, что дочерний элемент должен быть выровнен в конце.

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

В XAML это свойство задается на дочернем объекте без ссылки на его FlexLayout родительский объект:

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

Эквивалентный код на C# выглядит так:

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Порядок

Свойство Order типа позволяет изменить порядок упорядочения intдочерних элементов FlexLayout . Значение этого свойства по умолчанию равно 0.

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

База

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

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

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

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

Эквивалентный код на C# выглядит так:

FlexLayout.SetBasis(label, 40);

В XAML можно указать процент следующим образом:

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

Эквивалентный код на C# выглядит так:

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

Первый аргумент FlexBasis конструктора — это дробное float значение, которое должно находиться в диапазоне от 0 до 1. Второй аргумент указывает, что размер является относительным, а не абсолютным.

Рост

Свойство Grow типа floatуказывает объем доступного пространства, которое дочерний объект должен использовать на главной оси. Значение по умолчанию этого свойства равно 0,0, а его значение должно быть больше или равно 0.

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

Сжать

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

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

Совет

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

Примеры

В следующих примерах демонстрируется частое использование FlexLayout.

Стек

Может FlexLayout заменить StackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

В этом примере свойству присвоено Columnзначение , которое приводит к тому, Direction что дочерние элементы FlexLayout будут упорядочены в одном столбце. Свойство AlignItems имеет значение Center, что приводит к горизонтальному центру каждого дочернего элемента. Свойство JustifyContent устанавливается SpaceEvenly , для которого выделяется все оставшееся вертикальное пространство между всеми дочерними элементами, над первым дочерним и ниже последнего дочернего элемента:

Vertically oriented .NET MAUI FlexLayout.

Примечание.

Присоединенное AlignSelf свойство можно использовать для переопределения AlignItems свойства для определенного дочернего элемента.

Оболочка элементов

Дочерние FlexLayout элементы можно упаковать в дополнительные строки или столбцы:

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

В этом примере Direction свойство FlexLayout не задано, поэтому он имеет параметр Rowпо умолчанию, то есть дочерние элементы расположены по строкам, а основная ось — горизонтальная. Для Wrap свойства задано значение Wrap, что приводит к тому, что дочерние элементы помещаются в следующую строку, если в строке слишком много дочерних элементов. Свойство JustifyContent устанавливается SpaceAround , для которого выделяется все оставшееся пространство на главной оси, чтобы каждый дочерний элемент был окружен одинаковым объемом пространства:

Horizontally wrapping .NET MAUI FlexLayout.

Файл кода программной части этого примера извлекает коллекцию фотографий и добавляет их в FlexLayoutфайл.

Кроме того, FlexLayout он является дочерним элементом ScrollView. Таким образом, если на странице слишком много строк, то ScrollView свойство по умолчанию Orientation Vertical позволяет прокручивать по вертикали.

Макет страницы

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

В следующем примере показана реализация этого макета с помощью вложенного FlexLayout в другое:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

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

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

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   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="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

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

Holy grail layout with the .NET MAUI FlexLayout.

В этом примере Order свойство задается первым BoxView значением меньше, чем его братья и сестры, чтобы оно отображалось как первый элемент в строке. Свойство Basis устанавливается на обоих BoxView объектах, чтобы дать им ширину 50 независимых от устройств единиц. Свойство Grow задается в вложенном виде, чтобы указать, что это FlexLayout должно занимать все неиспользуемое FlexLayout вертикальное пространство во внешнем FlexLayoutпространстве. Кроме того, Grow свойство задается в Label представлении содержимого, чтобы указать, что это содержимое занимает все неиспользуемое горизонтальное пространство внутри вложенного FlexLayout.

Примечание.

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