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 ScrollView
również klasy , Frame
i 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
, Horizontal
lub 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:
Alignment
typuLayoutAlignment
wyliczenia z czterema elementami członkowskimi,Start
,Center
,End
iFill
Expands
typubool
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:
LayoutOptions.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.FillAndExpand
Poniższa dyskusja obejmuje StackLayout
domyślną orientację pionową. Pozioma StackLayout
jest analogiczna.
W przypadku elementu pionowego StackLayout
HorizontalOptions
ustawienie określa, w jaki sposób element podrzędny jest umieszczony w poziomie w obrębie szerokości StackLayout
obiektu . Ustawienie Alignment
, Start
Center
lub 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ść StackLayout
elementu .
W przypadku elementu pionowego StackLayout
każ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
, Center
lub 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 StackLayout
elementu , 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 naColor.Accent
,OutlineColor
gdy nie znasz bazowego schematu kolorów. - Właściwość
HasShadow
można ustawić tak, abytrue
wyświetlała cień na urządzeniach z systemem iOS. Padding
Ustaw właściwość naThickness
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.Fill
domyś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
Start
i LayoutOptions
, Center
lub 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
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 .