Partilhar via

Resumo do Capítulo 4. Rolagem da pilha

  • Artigo

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.

Este capítulo é dedicado principalmente à introdução do conceito de layout, que é o termo geral para as classes e técnicas que Xamarin.Forms usa para organizar a exibição visual de várias visualizações na página.

O layout envolve várias classes que derivam de Layout e Layout<T>. Este capítulo concentra-se em StackLayout.

Observação

O FlexLayout introduzido na Xamarin.Forms versão 3.0 pode ser usado de forma semelhante, StackLayout mas com mais flexibilidade.

Também são introduzidas neste capítulo as ScrollViewclasses , Framee BoxView .

Pilhas de visualizações

StackLayout deriva de Layout<View> e herda uma Children propriedade do tipo IList<View>. Você adiciona vários itens de exibição a essa coleção e StackLayout os exibe em uma pilha horizontal ou vertical.

Defina a Orientation propriedade de StackLayout para um membro da StackOrientation enumeração, ou VerticalHorizontal. O padrão é Vertical.

Defina a Spacing propriedade de StackLayout como um double valor para especificar um espaçamento entre os filhos. O valor padrão é 6.

No código, você pode adicionar itens à Children coleção de em um for loop ou foreachStackLayout conforme demonstrado no exemplo ColorLoop ou pode inicializar a Children coleção com uma lista dos modos de exibição individuais, conforme demonstrado em ColorList. As crianças devem derivar de View , mas podem incluir outros StackLayout objetos.

Rolagem de conteúdo

Se um StackLayout contiver muitos filhos para exibir em uma página, você poderá colocar o em um ScrollView para permitir a StackLayout rolagem.

Defina a Content propriedade de para o modo de ScrollView exibição que você deseja rolar. Isso muitas vezes é um , mas pode ser qualquer StackLayoutvisão.

Defina a Orientation propriedade de ScrollView como um membro da ScrollOrientation propriedade, Vertical, Horizontalou Both. O padrão é Vertical. Se o conteúdo de a ScrollView for um StackLayout, as duas orientações devem ser consistentes.

O exemplo ReflectedColors demonstra o uso de ScrollView e StackLayout para exibir as cores disponíveis. O exemplo também demonstra como usar a reflexão do .NET para obter todas as propriedades estáticas públicas e campos da estrutura sem a necessidade de Color listá-los explicitamente.

A opção Expande

Quando um StackLayout empilha seus filhos, cada criança ocupa um slot particular dentro da altura total do StackLayout que depende do tamanho da criança e das configurações de suas HorizontalOptions e VerticalOptions propriedades. A essas propriedades são atribuídos valores do tipo LayoutOptions.

A LayoutOptions estrutura define duas propriedades:

Para sua conveniência, a LayoutOptions estrutura também define oito campos estáticos somente leitura do tipo LayoutOptions que abrangem todas as combinações das duas propriedades de instância:

A discussão a seguir envolve um StackLayout com uma orientação vertical padrão. A horizontal StackLayout é análoga.

Para uma vertical StackLayout, a HorizontalOptions configuração determina como uma criança é posicionada horizontalmente dentro da largura do StackLayout. Uma Alignment configuração de Start, Centerou End faz com que a criança seja horizontalmente irrestrita. A criança determina sua própria largura e é posicionada à esquerda, ao centro ou à direita do StackLayout. A Fill opção faz com que a criança seja restringida horizontalmente e preenche a largura do StackLayout.

Para uma vertical StackLayout, cada criança é verticalmente irrestrita e recebe um slot vertical dependendo da altura da criança, caso em que a VerticalOptions configuração é irrelevante.

Se a vertical StackLayout em si é irrestrita — isto é, se sua VerticalOptions configuração é Start, Centerou End, então a altura do StackLayout é a altura total de seus filhos.

No entanto, se a vertical StackLayout for verticalmente restrita — se sua VerticalOptions configuração for Fill—, a altura do StackLayout será a altura de seu recipiente, que pode ser maior do que a altura total de seus filhos. Se esse for o caso, e se pelo menos uma criança tiver uma VerticalOptions configuração com uma Expands bandeira de true, então o espaço extra no StackLayout é alocado igualmente entre todas as crianças com uma Expands bandeira de true. A altura total das crianças será então igual à altura do StackLayout, e a Alignment parte do VerticalOptions ajuste determina como a criança está posicionada verticalmente em seu slot.

Isso é demonstrado no exemplo VerticalOptionsDemo.

Frame e BoxView

Essas duas vistas retangulares são frequentemente usadas para fins de apresentação.

O Frame modo de exibição exibe um quadro retangular ao redor de outro modo de exibição, que pode ser um layout como StackLayout. Frame Herda uma Content propriedade da qual você definiu para o modo de ContentView exibição a ser exibido no Frame. O Frame é transparente por padrão. Defina as três propriedades a seguir para personalizar a aparência do quadro:

  • A OutlineColor propriedade para torná-lo visível. É comum definir OutlineColor para Color.Accent quando você não sabe o esquema de cores subjacente.
  • A HasShadow propriedade pode ser definida para true exibir uma sombra preta em dispositivos iOS.
  • Defina a Padding propriedade como um Thickness valor para deixar um espaço entre o quadro e o conteúdo do quadro. O valor padrão é 20 unidades em todos os lados.

O Frame tem padrão HorizontalOptions e VerticalOptions valores de LayoutOptions.Fill, o que significa que o Frame irá preencher seu contêiner. Com outras configurações, o tamanho do Frame é baseado no tamanho de seu conteúdo.

O Frame é demonstrado no exemplo FramedText .

O BoxView exibe uma área retangular de cor especificada por sua Color propriedade.

Se o BoxView for restrito (suas HorizontalOptions propriedades e VerticalOptions têm suas configurações padrão de LayoutOptions.Fill), o BoxView preenche o espaço disponível para ele. Se o BoxView for irrestrito (com HorizontalOptions e LayoutOptions configurações de Start, Centerou End), ele terá uma dimensão padrão de 40 unidades quadradas. A BoxView pode ser restringido em uma dimensão e irrestrito na outra.

Muitas vezes, você definirá as WidthRequest propriedades e HeightRequest de BoxView para dar-lhe um tamanho específico. Isso é ilustrado pelo exemplo SizedBoxView .

Você pode usar várias instâncias de StackLayout para combinar uma BoxView e várias Label instâncias em um Frame para exibir uma cor específica e, em seguida, colocar cada um desses modos de exibição em um ScrollViewStackLayout para criar a lista atraente de cores mostrada no exemplo ColorBlocks:

Captura de tela tripla de blocos de cores

Um ScrollView em um StackLayout?

Colocar um StackLayout em um ScrollView é comum, mas colocar um ScrollView em um StackLayout também às vezes é conveniente. Em teoria, isso não deveria ser possível porque os filhos de uma vertical StackLayout são verticalmente irrestritos. Mas um ScrollView deve ser verticalmente restringido. Ele deve receber uma altura específica para que possa então determinar o tamanho de seu filho para rolagem.

O truque é dar ao ScrollView filho do StackLayout um VerticalOptions cenário de FillAndExpand. Isso é demonstrado no exemplo BlackCat.

O exemplo BlackCat também demonstra como definir e acessar recursos de programa incorporados na biblioteca compartilhada. Isso também pode ser alcançado com projetos de ativos compartilhados (SAPs), mas o processo é um pouco mais complicado, como demonstra o exemplo BlackCatSap.