首页 文章

如何制作一个scrollview并使用absolutelayout和stacklayout（Xamarin Forms）进行布局？

提问于
浏览 次
0

在制作简单的scrollview时遇到很多问题，并且在其内部同时具有absolutelayout和stacklayout . stacklayout工作正常但是由absolutelayout控制的图像/标签不能获得正确的大小 . （我从我的代码页中收集图像和所有标签） .

这是我目前的代码：

<AbsoluteLayout>

  <ScrollView AbsoluteLayout.LayoutBounds="0.0, 0.0, 1, 1" AbsoluteLayout.LayoutFlags="All" >
    <AbsoluteLayout>

        <Image  Aspect = "AspectFill" AbsoluteLayout.LayoutBounds="0.0, 0.0, 1, 0.5" 
        AbsoluteLayout.LayoutFlags="All" x:Name = "image" />

        <Button BackgroundColor = "Red"
        AbsoluteLayout.LayoutBounds="1.0, 0.45, 0.5, 0.15"  />

        <StackLayout AbsoluteLayout.LayoutBounds="0.0, 1.0, 1, 0.5" AbsoluteLayout.LayoutFlags="All"  >

        <Label x:Name = "title" />
        <Label x:Name = "date" />
        <Label x:Name = "text" />

        </StackLayout>

    <AbsoluteLayout>
  </ScrollView>

<AbsoluteLayout>

使用此当前代码，图像的高度不会占据屏幕的0.5 . 它要长得多 . 我试图在AbsolueLayout上添加一个HeightRequest =“700”，然后图像正确定位，但即使标签文本长于屏幕，滚动视图也不起作用 .

c# xaml xamarin xamarin.forms

1 回答

  • 2

    此代码应该为您提供所需的内容 . 网格有两个相等的行（由于使用“”），一个包含图像，另一个包含按钮和stacklayout . 按钮高度为50dp，并使用水平和垂直对齐属性与行的右上角对齐 . 您可以通过在之前添加一个数字来更改行之间的比率 . 例如：

    <RowDefinition Height="2*"></RowDefinition>
    <RowDefinition Height="1*"></RowDefinition>

    上面的片段将剩余的空间分成3，这将给出空间的2/3和堆叠布局的1/3 .

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Rumble.Client.Page1">
  <ScrollView>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
      </Grid.RowDefinitions>
      <Image  Aspect = "AspectFill" Grid.Row="0" x:Name = "image" />
      <Button BackgroundColor="Red"  Grid.Row="1" HeightRequest="50" HorizontalAlignment="End" VerticalAlignment="Start"  />
      <StackLayout Grid.Row="1">
        <Label x:Name = "title" />
        <Label x:Name = "date" />
        <Label x:Name = "text" />
      </StackLayout>
    </Grid>
  </ScrollView>
</ContentPage>

    UPDATE:

    如果你想要滚动工作，你必须将它的行设置为auto，这样它将占用所需的空间而不是屏幕高度限制：

    <Grid.RowDefinitions>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
  </Grid.RowDefinitions>
    回复于

相关问题