Udostępnij za pośrednictwem


Podsumowanie rozdziału 4. Przewijanie stosu

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Ten rozdział poświęcony jest przede wszystkim wprowadzeniu koncepcji układu, który jest ogólnym terminem dla klas i technik używanych Xamarin.Forms do organizowania wizualnego wyświetlania wielu widoków na stronie.

Układ obejmuje kilka klas, które pochodzą z Layout i Layout<T>. Ten rozdział koncentruje się na .StackLayout

Uwaga

Wprowadzony FlexLayout w Xamarin.Forms wersji 3.0 można używać w sposób podobny do StackLayout , ale z większą elastycznością.

W tym rozdziale wprowadzono ScrollViewrównież klasy , Framei BoxView .

Stosy widoków

StackLayout element pochodzi z Layout<View> właściwości typu i dziedziczy Children właściwość IList<View>typu . Do tej kolekcji dodaje się wiele elementów widoku i StackLayout wyświetla je w stosie poziomym lub pionowym.

Orientation Ustaw właściwość elementu StackLayout na element członkowski StackOrientation wyliczenia , albo Vertical .Horizontal Wartość domyślna to Vertical.

Spacing Ustaw właściwość StackLayout double na wartość, aby określić odstępy między elementami podrzędnych. Wartość domyślna to 6.

W kodzie można dodawać elementy do kolekcji w pętli lubforeach, jak pokazano w przykładzie ColorLoop, lub zainicjować Children kolekcję z listą poszczególnych widoków, jak pokazano na liście ColorList.for StackLayout Children Elementy podrzędne muszą pochodzić z View elementu , ale mogą zawierać inne StackLayout obiekty.

Przewijanie zawartości

Jeśli element StackLayout zawiera zbyt wiele elementów podrzędnych do wyświetlenia na stronie, możesz umieścić StackLayout element w elemecie ScrollView , aby umożliwić przewijanie.

Content Ustaw właściwość na ScrollView widok, który chcesz przewinąć. Jest to często element StackLayout, ale może to być dowolny widok.

Orientation Ustaw właściwość właściwości ScrollView na element członkowski ScrollOrientation właściwości , Vertical, Horizontallub Both. Wartość domyślna to Vertical. Jeśli zawartość obiektu ScrollView to StackLayout, obie orientacje powinny być spójne.

W przykładzie ReflectedColors pokazano użycie elementów ScrollView i StackLayout do wyświetlania dostępnych kolorów. W przykładzie pokazano również, jak używać odbicia platformy .NET w celu uzyskania wszystkich publicznych właściwości statycznych i pól Color struktury bez konieczności jawnego wyświetlania ich listy.

Opcja Rozwiń

StackLayout Gdy stosuje swoje elementy podrzędne, każde dziecko zajmuje określone miejsce w obrębie całkowitej wysokości StackLayout obiektu, który zależy od rozmiaru dziecka i ustawień jego HorizontalOptions właściwości iVerticalOptions. Te właściwości są przypisywane wartości typu LayoutOptions.

Struktura LayoutOptions definiuje dwie właściwości:

Dla wygody LayoutOptions struktura definiuje również osiem statycznych pól typu LayoutOptions tylko do odczytu, które obejmują wszystkie kombinacje dwóch właściwości wystąpienia:

Poniższa dyskusja obejmuje StackLayout domyślną orientację pionową. Pozioma StackLayout jest analogiczna.

W przypadku elementu pionowego StackLayoutHorizontalOptions ustawienie określa, w jaki sposób element podrzędny jest umieszczony w poziomie w obrębie szerokości StackLayoutobiektu . Ustawienie Alignment , StartCenterlub End powoduje, że element podrzędny jest w poziomie nieskonsekwowany. Element podrzędny określa własną szerokość i jest umieszczony w lewym, środkowym lub prawym rogu obiektu StackLayout. Opcja Fill powoduje, że element podrzędny jest ograniczony w poziomie i wypełnia szerokość StackLayoutelementu .

W przypadku elementu pionowego StackLayoutkażdy element podrzędny jest niezwiązany w pionie i pobiera gniazdo pionowe w zależności od wzrostu dziecka, w tym przypadku VerticalOptions ustawienie jest nieistotne.

Jeśli sam pion StackLayout jest nieskonskresowany — oznacza to, że jego VerticalOptions ustawienie to Start, Centerlub End, wysokość StackLayout elementu jest całkowitą wysokością jego elementów podrzędnych.

Jeśli jednak w pionie jest ograniczona pionowo StackLayout — jeśli jego VerticalOptions ustawienie to Fill— wysokość StackLayout kontenera będzie wysokością kontenera, która może być większa niż łączna wysokość jego elementów podrzędnych. Jeśli tak jest, a jeśli co najmniej jedno dziecko ma VerticalOptions ustawienie z flagą Expands true, dodatkowe miejsce w obiekcie StackLayout jest przydzielane równomiernie wśród wszystkich tych elementów podrzędnych z flagą Expands true. Łączna wysokość elementów podrzędnych będzie wtedy równa wysokości StackLayoutelementu , a Alignment część VerticalOptions ustawienia określa, w jaki sposób element podrzędny jest umieszczony w pionie w miejscu.

Przedstawiono to w przykładzie VerticalOptionsDemo .

Frame i BoxView

Te dwa prostokątne widoki są często używane do celów prezentacji.

Widok Frame wyświetla prostokątną ramkę wokół innego widoku, który może być układem, takim jak StackLayout. Frame dziedziczy właściwość ustawioną Content ContentView na widok, który ma być wyświetlany w obiekcie Frame. Właściwość Frame jest domyślnie przezroczysta. Ustaw następujące trzy właściwości, aby dostosować wygląd ramki:

  • Właściwość , aby była widoczna OutlineColor . Często ustawiane jest ustawienie na Color.Accent , OutlineColor gdy nie znasz bazowego schematu kolorów.
  • Właściwość HasShadow można ustawić tak, aby true wyświetlała cień na urządzeniach z systemem iOS.
  • Padding Ustaw właściwość na Thickness wartość, aby pozostawić spację między ramką a zawartością ramki. Wartość domyślna to 20 jednostek po wszystkich stronach.

Parametr Frame ma wartości LayoutOptions.Filldomyślne HorizontalOptions i VerticalOptions , co oznacza, że Frame element wypełni kontener. W przypadku innych ustawień rozmiar obiektu Frame zależy od rozmiaru zawartości.

Element Frame jest pokazany w przykładzie FramedText .

Obiekt BoxView wyświetla prostokątny obszar koloru określony przez jego Color właściwość.

Jeśli właściwość BoxView jest ograniczona (jego HorizontalOptions VerticalOptions właściwości mają domyślne ustawienia LayoutOptions.Fill), BoxView wypełnia dostępne miejsce. Jeśli element BoxView nie jest ograniczony (z ustawieniami HorizontalOptions Starti LayoutOptions , Centerlub End), ma domyślny wymiar 40 jednostek kwadratowych. Element BoxView może być ograniczony w jednym wymiarze i nieskrępowany w drugim.

Często ustawiasz WidthRequest właściwości BoxView i HeightRequest , aby nadać mu określony rozmiar. Jest to zilustrowane przez przykład SizeBoxView .

Aby wyświetlić określony kolor, możesz użyć kilku wystąpień StackLayout Frame klasy , aby wyświetlić BoxView konkretny kolor, a następnie umieścić każdy z tych widoków w elemecie ScrollView StackLayout , aby utworzyć atrakcyjną listę kolorów pokazanych w przykładzie ColorBlocks:Label

Potrójny zrzut ekranu przedstawiający bloki kolorów

Element ScrollView w obiekcie StackLayout?

Umieszczenie w a StackLayout jest ScrollView powszechne, ale umieszczenie ScrollView w a StackLayout jest również czasami wygodne. Teoretycznie nie powinno to być możliwe, ponieważ elementy podrzędne pionowe są niezwiązane w pionie StackLayout . ScrollView Ale musi być ograniczony pionowo. Musi mieć określoną wysokość, aby można było określić rozmiar elementu podrzędnego do przewijania.

Sztuczką jest nadanie dziecku ScrollView StackLayout VerticalOptions ustawienia .FillAndExpand Jest to pokazane w przykładzie BlackCat .

Przykład BlackCat pokazuje również sposób definiowania i uzyskiwania dostępu do zasobów programu osadzonych w bibliotece udostępnionej. Można to również osiągnąć za pomocą udostępnionych projektów zasobów (SAP), ale proces jest nieco bardziej skomplikowany, jak pokazano w przykładzie BlackCatSap .