Sdílet prostřednictvím

Shrnutí kapitoly 4. Posouvání zásobníku

  • Článek

Poznámka:

Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.

Tato kapitola je primárně věnovaná představení konceptu rozložení, což je celkový termín pro třídy a techniky, které Xamarin.Forms používají k uspořádání vizuálního zobrazení více zobrazení na stránce.

Rozložení zahrnuje několik tříd, které jsou odvozeny od Layout a Layout<T>. Tato kapitola se zaměřuje na StackLayout.

Poznámka:

Zavedený FlexLayout ve Xamarin.Forms verzi 3.0 lze použít způsoby, které se podobají StackLayout , ale s větší flexibilitou.

V této kapitole jsou ScrollViewtaké uvedeny , Framea BoxView třídy.

Zásobníky zobrazení

StackLayout je odvozen z Layout<View> a dědí Children vlastnost typu IList<View>. Do této kolekce přidáte více položek zobrazení a StackLayout zobrazíte je ve vodorovném nebo svislém zásobníku.

Orientation Nastavte vlastnost StackLayout na člen výčtuStackOrientation, buď Vertical nebo Horizontal. Výchozí hodnota je Vertical.

Spacing Nastavte vlastnost StackLayout na double hodnotu, která určuje mezery mezi podřízenými objekty. Výchozí hodnota je 6.

V kódu můžete přidat položky do Children kolekce v kolekci StackLayout v for souboru nebo foreach smyčce, jak je znázorněno v ukázce ColorLoop, nebo můžete inicializovat kolekci Children se seznamem jednotlivých zobrazení, jak je znázorněno v ColorListu. Podřízené položky musí být odvozeny, View ale mohou obsahovat i jiné StackLayout objekty.

Posouvání obsahu

StackLayout Pokud obsahuje příliš mnoho podřízených položek, které se mají zobrazit na stránce, můžete ho StackLayout ScrollView umístit tak, aby bylo možné posouvání povolit.

Content Nastavte vlastnost ScrollView zobrazení, které chcete posunout. To je často , StackLayoutale může to být jakékoli zobrazení.

Orientation Nastavte vlastnost ScrollView na člena ScrollOrientation vlastnosti, Vertical, Horizontal, nebo Both. Výchozí hodnota je Vertical. Pokud je obsahem souboru ScrollView StackLayout, měly by být obě orientace konzistentní.

Ukázka ReflectedColors ukazuje použití ScrollView a StackLayout zobrazení dostupných barev. Ukázka také ukazuje, jak pomocí reflexe .NET získat všechny veřejné statické vlastnosti a pole Color struktury, aniž by bylo nutné je explicitně vypsat.

Možnost Rozbalit

Když se podřízené položky nashromaždí StackLayout , každé dítě zabírá konkrétní slot v celkové výšce StackLayout , která závisí na velikosti dítěte a nastavení jeho HorizontalOptions a VerticalOptions vlastností. Tyto vlastnosti jsou přiřazeny hodnoty typu LayoutOptions.

Struktura LayoutOptions definuje dvě vlastnosti:

Pro usnadnění vašeho pohodlí LayoutOptions definuje struktura také osm statických polí typu LayoutOptions jen pro čtení, která zahrnují všechny kombinace těchto dvou vlastností instance:

Následující diskuze zahrnuje StackLayout výchozí svislou orientaci. StackLayout Vodorovná je analogická.

U svislého StackLayoutnastavení HorizontalOptions určuje, jak je podřízený objekt vodorovně umístěn v rámci šířky objektu StackLayout. Nastavení Alignment Start, Centernebo End způsobí, že dítě bude vodorovně unconstrained. Dítě určuje svou vlastní šířku a je umístěna vlevo, na střed nebo vpravo od StackLayout. Tato Fill možnost způsobí, že podřízená položka bude vodorovně omezena a vyplní šířku StackLayout.

Pro svislé StackLayout, každé dítě je svisle unconstrained a získá svislý slot v závislosti na výšce dítěte, v takovém případě VerticalOptions nastavení je irelevantní.

Pokud je samotný svislý StackLayout nekontrénovaný – to znamená, že VerticalOptions jeho nastavení je Start, Centernebo End, pak výška je celková výška StackLayout jeho podřízených položek.

Pokud je však svislé StackLayout omezení – pokud je Filljeho VerticalOptions nastavení – výška kontejneru bude výška jeho kontejneru větší než celková výška StackLayout podřízených položek. Je-li to případ, a pokud alespoň jeden dítě má VerticalOptions nastavení s příznakem trueExpands , pak nadbytečné místo v tomto StackLayout případě je přiděleno rovnoměrně mezi všechny děti s příznakem Expands true. Celková výška podřízených položek se pak rovná výšce StackLayouta Alignment část VerticalOptions nastavení určuje, jak je dítě svisle umístěné ve svém slotu.

To je znázorněno v ukázce VerticalOptionsDemo .

Frame a BoxView

Tato dvě obdélníková zobrazení se často používají pro účely prezentace.

Zobrazení Frame zobrazí obdélníkový rámeček kolem jiného zobrazení, což může být rozložení, například StackLayout. Frame zdědí Content vlastnost, kterou ContentView jste nastavili na zobrazení, které se má zobrazit v rámci Frame. Ve Frame výchozím nastavení je transparentní. Nastavte následující tři vlastnosti pro přizpůsobení vzhledu rámce:

  • Vlastnost OutlineColor , která ji zpřístupní. Je běžné nastavit OutlineColor Color.Accent , když neznáte podkladové barevné schéma.
  • Vlastnost HasShadow lze nastavit tak, aby true se na zařízeních s iOSem zobrazoval černý stín.
  • Padding Nastavte vlastnost na Thickness hodnotu, která ponechá mezeru mezi rámečkem a obsahem rámce. Výchozí hodnota je 20 jednotek na všech stranách.

Obsahuje Frame výchozí HorizontalOptions hodnoty a VerticalOptions hodnoty LayoutOptions.Fill, což znamená, že Frame vyplní kontejner. S jinými nastaveními je velikost Frame založena na velikosti jeho obsahu.

Ukázka Frame je ukázaná v ukázce FramedText .

Zobrazí BoxView obdélníkovou oblast barvy určenou jeho Color vlastností.

BoxView Pokud je omezení (jeho HorizontalOptions a VerticalOptions vlastnosti mají výchozí nastaveníLayoutOptions.Fill), BoxView vyplní mezeru, která je pro ni k dispozici. BoxView Pokud je nekontrénovaný (s HorizontalOptions a LayoutOptions nastavením Start, Centernebo End), má výchozí rozměr 40 jednotek čtverce. A BoxView může být omezena v jedné dimenzi a nekontrénována v druhé.

Často nastavíte WidthRequest a HeightRequest vlastnosti BoxView , abyste jí dali určitou velikost. To je znázorněno ukázkou SizedBoxView .

Pomocí několika instancí můžete zkombinovat a několik Label instancí v objektu a Frame zobrazit určitou barvu a pak každou z těchto zobrazení vložit do seznamu ScrollView StackLayout atraktivních barev zobrazených v ukázce ColorBlocks:BoxView StackLayout

Trojitý snímek obrazovky s barevnými bloky

ScrollView v StackLayoutu?

Uvedení do StackLayout ScrollView běžného, ale vložení do ScrollView a StackLayout je také někdy vhodné. Teoreticky by to nemělo být možné, protože děti svislé StackLayout jsou svisle unconstrained. ScrollView Musí se ale omezit svisle. Musí mít určitou výšku, aby pak mohl určit velikost jeho podřízeného prvku pro posouvání.

Trik je dát ScrollView dítě StackLayout VerticalOptions nastavení FillAndExpand. To je demonstrováno v ukázce BlackCat .

Ukázka BlackCat také ukazuje, jak definovat a přistupovat k prostředkům programu, které jsou vloženy do sdílené knihovny. Toho lze dosáhnout také pomocí projektů sdílených prostředků (SAPs), ale proces je trochu složitější, jak ukazuje ukázka BlackCatSap.