Bagikan melalui

The Xamarin.Forms FlexLayout

  • Artikel

Gunakan FlexLayout untuk menumpuk atau membungkus kumpulan tampilan anak.

Xamarin.FormsFlexLayout ini baru dalam Xamarin.Forms versi 3.0. Ini didasarkan pada Modul Tata Letak Kotak Fleksibel CSS, umumnya dikenal sebagai tata letak fleksibel atau kotak fleksibel, jadi disebut karena mencakup banyak opsi fleksibel untuk mengatur anak-anak dalam tata letak.

FlexLayout mirip dengan di Xamarin.FormsStackLayout mana ia dapat mengatur anak-anaknya secara horizontal dan vertikal dalam tumpukan. Namun, FlexLayout juga mampu membungkus anak-anaknya jika ada terlalu banyak yang pas dalam satu baris atau kolom, dan juga memiliki banyak opsi untuk orientasi, penyelarasan, dan beradaptasi dengan berbagai ukuran layar.

FlexLayout berasal dari Layout<View> dan mewarisi properti Children jenis IList<View>.

FlexLayout menentukan enam properti yang dapat diikat publik dan lima properti yang dapat diikat terlampir yang memengaruhi ukuran, orientasi, dan perataan elemen turunannya. (Jika Anda tidak terbiasa dengan properti yang dapat diikat terlampir, lihat artikel Properti terlampir.) Properti ini dijelaskan secara rinci di bagian di bawah ini pada Properti yang dapat diikat secara rinci dan Properti yang dapat diikat terlampir secara terperinci. Namun, artikel ini dimulai dengan bagian tentang beberapa skenarioFlexLayout Penggunaan umum yang menjelaskan banyak properti ini lebih informal. Menjelang akhir artikel, Anda akan melihat cara menggabungkan FlexLayout dengan lembar gaya CSS.

Skenario penggunaan umum

Program sampel berisi beberapa halaman yang menunjukkan beberapa kegunaan FlexLayout umum dan memungkinkan Anda untuk bereksperimen dengan propertinya.

Menggunakan FlexLayout untuk tumpukan sederhana

Halaman Simple Stack menunjukkan bagaimana FlexLayout bisa menggantikan tetapi dengan markup yang StackLayout lebih sederhana. Semua yang ada dalam sampel ini didefinisikan di halaman XAML. berisi FlexLayout empat anak:

<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>

Berikut adalah halaman yang berjalan di iOS, Android, dan Platform Windows Universal:

Halaman Tumpukan Sederhana

Tiga properti FlexLayout ditampilkan dalam file SimpleStackPage.xaml :

  • Properti Direction diatur ke nilai FlexDirection enumerasi. Default adalah Row. Mengatur properti untuk Column menyebabkan turunan disusun FlexLayout dalam satu kolom item.

    Ketika item dalam FlexLayout disusun dalam kolom, FlexLayout dikatakan memiliki sumbu utama vertikal dan sumbu silang horizontal.

  • Properti AlignItems berjenis FlexAlignItems dan menentukan bagaimana item diratakan pada sumbu silang. Opsi Center ini menyebabkan setiap item dipusatkan secara horizontal.

    Jika Anda menggunakan StackLayout daripada FlexLayout untuk tugas ini, Anda akan mempusatkan HorizontalOptions semua item dengan menetapkan properti dari setiap item ke Center. Properti HorizontalOptions tidak berfungsi untuk anak-anak , FlexLayouttetapi satu AlignItems properti mencapai tujuan yang sama. Jika perlu, Anda dapat menggunakan AlignSelf properti yang dapat diikat terlampir untuk mengambil AlignItems alih properti untuk item individual:

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

    Dengan perubahan itu, yang satu ini Label diposisikan di tepi FlexLayout kiri saat urutan bacaan kiri-ke-kanan.

  • Properti JustifyContent berjenis FlexJustify, dan menentukan bagaimana item diatur pada sumbu utama. Opsi mengalokasikan SpaceEvenly semua sisa ruang vertikal secara merata di antara semua item, dan di atas item pertama, dan di bawah item terakhir.

    Jika Anda menggunakan StackLayout, Anda harus menetapkan VerticalOptions properti setiap item untuk CenterAndExpand mencapai efek yang sama. CenterAndExpand Tetapi opsi akan mengalokasikan ruang dua kali lebih banyak di antara setiap item daripada sebelum item pertama dan setelah item terakhir. Anda dapat meniadakan CenterAndExpand opsi VerticalOptions dengan mengatur JustifyContent properti ke FlexLayoutSpaceAround.

Properti ini FlexLayout dibahas secara lebih rinci di bagian Properti yang dapat diikat secara rinci di bawah ini.

Menggunakan FlexLayout untuk membungkus item

Halaman Pembungkusan Foto dari sampel menunjukkan cara FlexLayout membungkus anak-anaknya ke baris atau kolom tambahan. File XAML membuat instans FlexLayout dan menetapkan dua propertinya:

<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>

Properti Direction ini FlexLayout tidak diatur, sehingga memiliki pengaturan Rowdefault , yang berarti bahwa anak-anak diatur dalam baris dan sumbu utama adalah horizontal.

Properti Wrap ini berjenis enumerasi FlexWrap. Jika terlalu banyak item yang pas pada baris, pengaturan properti ini menyebabkan item dibungkus ke baris berikutnya.

Perhatikan bahwa FlexLayout adalah anak dari ScrollView. Jika ada terlalu banyak baris yang pas di halaman, maka ScrollView memiliki properti Vertical default Orientation dan memungkinkan pengguliran vertikal.

Properti JustifyContent mengalokasikan ruang sisa pada sumbu utama (sumbu horizontal) sehingga setiap item dikelilingi oleh jumlah ruang kosong yang sama.

File code-behind mengakses koleksi foto sampel dan menambahkannya ke Children koleksi FlexLayout:

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;
    }
}

Berikut adalah program yang berjalan, secara progresif digulir dari atas ke bawah:

Halaman Pembungkusan Foto

Tata letak halaman dengan FlexLayout

Ada tata letak standar dalam desain web yang disebut holy grail karena merupakan format tata letak yang sangat diinginkan, tetapi seringkali sulit diwujudkan dengan kesempurnaan. Tata letak terdiri dari header di bagian atas halaman dan footer di bagian bawah, keduanya meluas ke lebar penuh halaman. Menempati bagian tengah halaman adalah konten utama, tetapi seringkali dengan menu kolumnar di sebelah kiri konten dan informasi tambahan (kadang-kadang disebut area samping ) di sebelah kanan. Bagian 5.4.1 dari spesifikasi Tata Letak Kotak Fleksibel CSS menjelaskan bagaimana tata letak holy grail dapat diwujudkan dengan kotak fleksibel.

Halaman Tata Letak Grail Suci dari sampel menunjukkan implementasi sederhana tata letak ini menggunakan satu FlexLayout berlapis di yang lain. Karena halaman ini dirancang untuk ponsel dalam mode potret, area di sebelah kiri dan kanan area konten hanya lebar 50 piksel:

<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>

Di sini sedang berjalan:

Halaman Tata Letak Holy Grail

Navigasi dan area samping dirender dengan BoxView di sebelah kiri dan kanan.

Yang pertama FlexLayout dalam file XAML memiliki sumbu utama vertikal dan berisi tiga anak yang disusun dalam kolom. Ini adalah header, isi halaman, dan footer. Berlapis FlexLayout memiliki sumbu utama horizontal dengan tiga anak yang disusun berturut-turut.

Tiga properti terikat terlampir ditunjukkan dalam program ini:

  • Properti Order yang dapat diikat terlampir diatur pada properti pertama BoxView. Properti ini adalah bilangan bulat dengan nilai default 0. Anda dapat menggunakan properti ini untuk mengubah urutan tata letak. Umumnya pengembang lebih suka konten halaman muncul dalam markup sebelum item navigasi dan item samping. Order Mengatur properti pada nilai pertama BoxView ke yang kurang dari saudara kandungnya yang lain menyebabkannya muncul sebagai item pertama dalam baris. Demikian pula, Anda dapat memastikan bahwa item muncul terakhir dengan mengatur Order properti ke nilai yang lebih besar dari saudara-saudaranya.

  • Properti Basis yang dapat diikat terpasang diatur pada dua BoxView item untuk memberinya lebar 50 piksel. Properti ini berjenis FlexBasis, struktur yang mendefinisikan properti statis dari jenis FlexBasis bernama Auto, yang merupakan default. Anda dapat menggunakan Basis untuk menentukan ukuran piksel atau persentase yang menunjukkan berapa banyak ruang yang diduduki item pada sumbu utama. Ini disebut dasar karena menentukan ukuran item yang merupakan dasar dari semua tata letak berikutnya.

  • Properti Grow diatur pada berlapis Layout dan pada anak yang Label mewakili konten. Properti ini berjenis float dan memiliki nilai default 0. Ketika diatur ke nilai positif, semua ruang yang tersisa di sepanjang sumbu utama dialokasikan untuk item tersebut dan ke saudara kandung dengan nilai positif .Grow Ruang dialokasikan secara proporsional ke nilai, agak seperti spesifikasi bintang dalam Grid.

    Properti terlampir pertama Grow diatur pada berlapis FlexLayout, menunjukkan bahwa ini FlexLayout untuk menempati semua ruang vertikal yang tidak digunakan di luar FlexLayout. Properti terlampir kedua Grow diatur pada Label yang mewakili konten, menunjukkan bahwa konten ini adalah untuk menempati semua ruang horizontal yang tidak digunakan dalam bagian dalam FlexLayout.

    Ada juga properti yang dapat diikat terpasang serupa Shrink yang dapat Anda gunakan ketika ukuran anak melebihi ukuran FlexLayout tetapi pembungkusan tidak diinginkan.

Item katalog dengan FlexLayout

Halaman Item Katalog dalam sampel mirip dengan Contoh 1 di Bagian 1.1 dari spesifikasi Kotak Tata Letak Flex CSS kecuali menampilkan serangkaian gambar dan deskripsi yang dapat digulir secara horizontal dari tiga monyet:

Halaman Item Katalog

Masing-masing dari tiga monyet adalah FlexLayout terkandung dalam Frame yang diberi tinggi dan lebar eksplisit, dan yang juga merupakan anak dari yang lebih besar FlexLayout. Dalam file XAML ini, sebagian besar properti FlexLayout anak ditentukan dalam gaya, semuanya kecuali salah satunya adalah gaya implisit:

<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>

Gaya implisit untuk Image mencakup pengaturan dua properti yang dapat diikat terlampir dari Flexlayout:

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

Pengaturan Order –1 menyebabkan Image elemen ditampilkan terlebih dahulu di setiap tampilan berlapis FlexLayout terlepas dari posisinya dalam koleksi anak. Properti AlignSelf penyebab Center dipusatkan Image dalam FlexLayout. Ini mengambil alih pengaturan AlignItems properti, yang memiliki nilai Stretchdefault , yang berarti bahwa Label dan Button anak-anak direntangkan ke lebar penuh .FlexLayout

Dalam masing-masing dari tiga FlexLayout tampilan, kosong Label mendahului Button, tetapi memiliki Grow pengaturan 1. Ini berarti bahwa semua ruang vertikal ekstra dialokasikan untuk kosong Labelini , yang secara efektif mendorong ke Button bawah.

Properti yang dapat diikat secara terperinci

Sekarang setelah Anda melihat beberapa aplikasi umum , FlexLayoutproperti FlexLayout dapat dieksplorasi secara lebih rinci. FlexLayout menentukan enam properti yang dapat diikat yang Anda tetapkan pada FlexLayout dirinya sendiri, baik dalam kode atau XAML, untuk mengontrol orientasi dan perataan. (Salah satu properti ini, Position, tidak tercakup dalam artikel ini.)

Anda dapat bereksperimen dengan lima properti yang dapat diikat yang tersisa menggunakan halaman Eksperimen sampel. Halaman ini memungkinkan Anda menambahkan atau menghapus turunan FlexLayout dari dan untuk mengatur kombinasi dari lima properti yang dapat diikat. Semua anak FlexLayout adalah Label tampilan dari berbagai warna dan ukuran, dengan Text properti diatur ke angka yang sesuai dengan posisinya dalam Children koleksi.

Saat program dimulai, lima Picker tampilan menampilkan nilai default dari kelima FlexLayout properti ini. Menuju FlexLayout bagian bawah layar berisi tiga anak:

Halaman Eksperimen: Default

Label Masing-masing tampilan memiliki latar belakang abu-abu yang menunjukkan ruang yang dialokasikan untuk itu Label dalam FlexLayout. Latar belakang itu FlexLayout sendiri adalah Alice Blue. Ini menempati seluruh area bawah halaman kecuali untuk margin kecil di kiri dan kanan.

Properti Arah

Properti Direction berjenis FlexDirection, enumerasi dengan empat anggota:

  • Column
  • ColumnReverse (atau "column-reverse" di XAML)
  • Row, default
  • RowReverse (atau "row-reverse" di XAML)

Di XAML, Anda dapat menentukan nilai properti ini menggunakan nama anggota enumerasi dalam huruf kecil, huruf besar, atau kasus campuran, atau Anda dapat menggunakan dua string tambahan yang ditampilkan dalam tanda kurung yang sama dengan indikator CSS. (String "column-reverse" dan "row-reverse" ditentukan dalam FlexDirectionTypeConverter kelas yang digunakan oleh pengurai XAML.)

Berikut adalah halaman Eksperimen yang memperlihatkan (dari kiri ke kanan), Row arah, Column arah, dan ColumnReverse arah:

Halaman Eksperimen: Arah

Perhatikan bahwa untuk Reverse opsi, item dimulai di sebelah kanan atau bawah.

Properti Bungkus

Properti Wrap berjenis FlexWrap, enumerasi dengan tiga anggota:

  • NoWrap, default
  • Wrap
  • Reverse (atau "wrap-reverse" di XAML)

Dari kiri ke kanan, layar ini memperlihatkan NoWrapopsi , Wrap dan Reverse untuk 12 anak:

Halaman Eksperimen: Bungkus

Wrap Ketika properti diatur ke NoWrap dan sumbu utama dibatasi (seperti dalam program ini), dan sumbu utama tidak lebar atau cukup tinggi untuk mencocokkan semua anak, FlexLayout upaya untuk membuat item lebih kecil, seperti yang ditunjukkan cuplikan layar iOS. Anda dapat mengontrol penyusutan item dengan Shrink properti yang dapat diikat yang terpasang.

Properti JustifyContent

Properti JustifyContent berjenis FlexJustify, enumerasi dengan enam anggota:

  • Start (atau "flex-start" di XAML), default
  • Center
  • End (atau "flex-end" di XAML)
  • SpaceBetween (atau "spasi antara" di XAML)
  • SpaceAround (atau "space-around" di XAML)
  • SpaceEvenly

Properti ini menentukan bagaimana item diberi spasi pada sumbu utama, yang merupakan sumbu horizontal dalam contoh ini:

Halaman Eksperimen: Membenarkan Konten

Di ketiga cuplikan Wrap layar, properti diatur ke Wrap. Default Start ditampilkan di cuplikan layar Android sebelumnya. Cuplikan layar iOS di sini menunjukkan Center opsi: semua item dipindahkan ke tengah. Tiga opsi lain yang dimulai dengan kata Space mengalokasikan ruang tambahan yang tidak ditempati oleh item. SpaceBetween mengalokasikan ruang secara merata di antara item; SpaceAround menempatkan spasi yang sama di sekitar setiap item, sementara SpaceEvenly menempatkan spasi yang sama di antara setiap item, dan sebelum item pertama dan setelah item terakhir pada baris.

Properti AlignItems

Properti AlignItems berjenis FlexAlignItems, enumerasi dengan empat anggota:

  • Stretch, default
  • Center
  • Start (atau "flex-start" di XAML)
  • End (atau "flex-end" di XAML)

Ini adalah salah satu dari dua properti (yang lainnya AlignContent) yang menunjukkan bagaimana anak-anak selaras pada sumbu silang. Dalam setiap baris, anak-anak direntangkan (seperti yang ditunjukkan pada cuplikan layar sebelumnya), atau diratakan pada awal, tengah, atau akhir setiap item, seperti yang ditunjukkan dalam tiga cuplikan layar berikut:

Halaman Eksperimen: Ratakan Item

Di cuplikan layar iOS, bagian atas semua anak diselaraskan. Dalam cuplikan layar Android, item dipusatkan secara vertikal berdasarkan anak tertinggi. Dalam cuplikan layar UWP, bagian bawah semua item diselaraskan.

Untuk item individual apa pun, AlignItems pengaturan dapat diganti dengan AlignSelf properti yang dapat diikat terlampir.

Properti AlignContent

Properti AlignContent berjenis FlexAlignContent, enumerasi dengan tujuh anggota:

  • Stretch, default
  • Center
  • Start (atau "flex-start" di XAML)
  • End (atau "flex-end" di XAML)
  • SpaceBetween (atau "spasi antara" di XAML)
  • SpaceAround (atau "space-around" di XAML)
  • SpaceEvenly

Seperti AlignItems, AlignContent properti juga menyelaraskan turunan pada sumbu silang, tetapi memengaruhi seluruh baris atau kolom:

Halaman Eksperimen: Ratakan Konten

Di cuplikan layar iOS, kedua baris berada di bagian atas; di cuplikan layar Android, mereka berada di tengah; dan di cuplikan layar UWP mereka berada di bagian bawah. Baris juga dapat diberi spasi dengan berbagai cara:

Halaman Eksperimen: Ratakan Konten 2

AlignContent tidak berpengaruh ketika hanya ada satu baris atau kolom.

Properti yang dapat diikat terlampir secara terperinci

FlexLayout menentukan lima properti yang dapat diikat terlampir. Properti ini diatur pada anak-anak FlexLayout dan hanya berkaitan dengan anak tertentu.

Properti AlignSelf

Properti AlignSelf yang dapat diikat terlampir berjenis FlexAlignSelf, enumerasi dengan lima anggota:

  • Auto, default
  • Stretch
  • Center
  • Start (atau "flex-start" di XAML)
  • End (atau "flex-end" di XAML)

Untuk setiap anak individu dari FlexLayout, pengaturan properti ini mengambil alih properti yang AlignItems ditetapkan pada dirinya FlexLayout sendiri. Pengaturan Auto default sarana untuk menggunakan AlignItems pengaturan.

Label Untuk elemen bernama label (atau contoh), Anda dapat mengatur AlignSelf properti dalam kode seperti ini:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Perhatikan bahwa tidak ada referensi ke FlexLayout induk dari Label. Di XAML, Anda mengatur properti seperti ini:

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

Properti Pesanan

Properti Order berjenis int. Nilai default adalah 0.

Properti Order ini memungkinkan Anda untuk mengubah urutan anak-anak FlexLayout diatur. Biasanya, anak-anak diatur FlexLayout adalah urutan yang sama dengan yang mereka muncul dalam Children koleksi. Anda dapat mengambil alih urutan ini dengan mengatur Order properti yang dapat diikat terlampir ke nilai bilangan bulat bukan nol pada satu atau beberapa anak. FlexLayout kemudian mengatur anak-anaknya berdasarkan pengaturan Order properti pada setiap anak, tetapi anak-anak dengan pengaturan yang sama Order diatur dalam urutan yang muncul dalam Children koleksi.

Properti Dasar

Properti Basis yang dapat diikat terlampir menunjukkan jumlah ruang yang dialokasikan untuk anak pada FlexLayout sumbu utama. Ukuran yang ditentukan oleh Basis properti adalah ukuran di sepanjang sumbu utama induk FlexLayout. Oleh karena itu, Basis menunjukkan lebar anak ketika anak-anak diatur dalam baris, atau tinggi ketika anak-anak diatur dalam kolom.

Properti Basis berjenis FlexBasis, struktur. Ukuran dapat ditentukan dalam unit independen perangkat atau sebagai persentase dari FlexLayoutukuran . Nilai Basis default properti adalah properti FlexBasis.Autostatis , yang berarti lebar atau tinggi anak yang diminta digunakan.

Dalam kode, Anda dapat mengatur Basis properti untuk Label bernama label ke 40 unit independen perangkat seperti ini:

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

Argumen kedua ke FlexBasis konstruktor diberi nama isRelative dan menunjukkan apakah ukurannya relatif (true) atau absolut (false). Argumen memiliki nilai falsedefault , sehingga Anda juga dapat menggunakan kode berikut:

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

Konversi implisit dari float ke FlexBasis ditentukan, sehingga Anda dapat menyederhanakannya lebih lanjut:

FlexLayout.SetBasis(label, 40);

Anda dapat mengatur ukuran ke 25% induk FlexLayout seperti ini:

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

Nilai pecahan ini harus dalam rentang 0 hingga 1.

Di XAML, Anda dapat menggunakan angka untuk ukuran dalam unit independen perangkat:

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

Atau Anda dapat menentukan persentase dalam rentang 0% hingga 100%:

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

Halaman Eksperimen Dasar sampel memungkinkan Anda bereksperimen dengan Basis properti . Halaman menampilkan kolom yang dibungkus dengan lima Label elemen dengan latar belakang alternatif dan warna latar depan. Dua Slider elemen memungkinkan Anda menentukan Basis nilai untuk yang kedua dan keempat Label:

Halaman Eksperimen Dasar

Cuplikan layar iOS di sebelah kiri menunjukkan dua Label elemen yang diberikan ketinggian di unit independen perangkat. Layar Android menunjukkan bahwa mereka diberi tinggi yang sebagian kecil dari tinggi FlexLayouttotal . Basis Jika diatur pada 100%, maka anak adalah tinggi FlexLayout, dan akan membungkus ke kolom berikutnya dan menempati seluruh tinggi kolom tersebut, seperti yang ditunjukkan oleh cuplikan layar UWP: Tampaknya seolah-olah lima anak diatur secara berturut-turut, tetapi mereka benar-benar diatur dalam lima kolom.

Properti Tumbuh

Properti Grow yang dapat diikat terlampir berjenis int. Nilai defaultnya adalah 0, dan nilainya harus lebih besar dari atau sama dengan 0.

Properti Grow memainkan peran ketika Wrap properti diatur ke NoWrap dan baris anak memiliki lebar total kurang dari FlexLayoutlebar , atau kolom anak-anak memiliki tinggi yang lebih pendek dari FlexLayout. Properti Grow menunjukkan cara apportion ruang sisa di antara anak-anak.

Di halaman Tumbuhkan Eksperimen, lima Label elemen warna alternatif disusun dalam kolom, dan dua Slider elemen memungkinkan Anda menyesuaikan Grow properti dari kedua dan keempat Label. Cuplikan layar iOS di ujung kiri menunjukkan properti default Grow 0:

Halaman Kembangkan Eksperimen

Jika ada satu anak yang diberi nilai positif Grow , maka anak tersebut mengambil semua ruang yang tersisa, seperti yang ditunjukkan oleh cuplikan layar Android. Ruang ini juga dapat dialokasikan di antara dua anak atau lebih. Dalam cuplikan layar UWP, Grow properti kedua Label diatur ke 0,5, sedangkan Grow properti keempat Label adalah 1,5, yang memberikan ruang sisa tiga kali keempat Label sebanyak yang kedua Label.

Bagaimana tampilan anak menggunakan ruang tersebut tergantung pada jenis anak tertentu. LabelUntuk , teks dapat diposisikan dalam ruang total menggunakan Label properti HorizontalTextAlignment dan VerticalTextAlignment.

Properti Penyusutan

Properti Shrink yang dapat diikat terlampir berjenis int. Nilai defaultnya adalah 1, dan nilainya harus lebih besar dari atau sama dengan 0.

Properti Shrink memainkan peran ketika Wrap properti diatur ke NoWrap dan lebar agregat baris anak lebih besar dari lebar FlexLayout, atau tinggi agregat dari satu kolom anak lebih besar dari tinggi FlexLayout. FlexLayout Biasanya akan menampilkan anak-anak ini dengan membatasi ukurannya. Properti Shrink dapat menunjukkan anak mana yang diberi prioritas dalam ditampilkan pada ukuran penuhnya.

Halaman Menyusutkan FlexLayout Eksperimen membuat dengan satu baris lima Label anak yang membutuhkan lebih banyak ruang daripada FlexLayout lebar. Cuplikan layar iOS di sebelah kiri menunjukkan semua Label elemen dengan nilai default 1:

Halaman Eksperimen Penyusutan

Di cuplikan layar Android, Shrink nilai untuk yang kedua Label diatur ke 0, dan yang Label ditampilkan dalam lebar penuhnya. Selain itu, yang keempat Label diberi nilai yang Shrink lebih besar dari satu, dan telah menyusut. Cuplikan layar UWP menunjukkan kedua Label elemen yang Shrink diberi nilai 0 untuk memungkinkan mereka ditampilkan dalam ukuran penuhnya, jika memungkinkan.

Anda dapat mengatur nilai Grow dan Shrink untuk mengakomodasi situasi di mana ukuran anak agregat kadang-kadang mungkin kurang dari atau kadang-kadang lebih besar dari FlexLayoutukuran .

Gaya CSS dengan FlexLayout

Anda dapat menggunakan fitur gaya CSS yang diperkenalkan dengan Xamarin.Forms 3.0 sehubungan dengan FlexLayout. Halaman Item Katalog CSS dari sampel menduplikasi tata letak halaman Item Katalog, tetapi dengan lembar gaya CSS untuk banyak gaya:

Halaman Item Katalog CSS

File CatalogItemsPage.xaml asli memiliki lima Style definisi di bagiannya Resources dengan 15 Setter objek. Dalam file CssCatalogItemsPage.xaml, yang telah dikurangi menjadi dua Style definisi hanya dengan empat Setter objek. Gaya ini melengkapi lembar gaya CSS untuk properti yang Xamarin.Forms saat ini tidak didukung fitur gaya 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>

Lembar gaya CSS dirujuk di baris pertama bagian Resources :

<StyleSheet Source="CatalogItemsStyles.css" />

Perhatikan juga bahwa dua elemen di masing-masing dari tiga item termasuk StyleClass pengaturan:

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

Ini mengacu pada pemilih dalam lembar gaya 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;
}

Beberapa FlexLayout properti yang dapat diikat terlampir direferensikan di sini. Di pemilih label.empty , Anda akan melihat flex-grow atribut , yang gayanya kosong Label untuk menyediakan beberapa ruang kosong di atas Button. Pemilih image berisi order atribut dan align-self atribut, yang keduanya sesuai dengan FlexLayout properti yang dapat diikat terlampir.

Anda telah melihat bahwa Anda dapat mengatur properti langsung di FlexLayout dan Anda dapat mengatur properti yang dapat diikat terlampir pada turunan dari FlexLayout. Atau, Anda dapat mengatur properti ini secara tidak langsung menggunakan gaya tradisional berbasis XAML atau gaya CSS. Yang penting adalah mengetahui dan memahami properti ini. Properti inilah yang membuat FlexLayout benar-benar fleksibel.

FlexLayout dengan Xamarin.University

Xamarin.Forms Video Tata Letak Fleksibel 3.0