Xamarin Forms 滚动视图内的高级定位

Question

我目前正在使用滚动视图并使用网格和堆栈布局来定位事物。当我做非常基本的布局时它工作正常，例如我的视图首先显示图像，然后是大量文本，但是如果你继续滚动一点，我希望进一步创建一个非常高级的布局，目标是它看起来像这样：

我不太确定如何在不使用例如 absolutelayout 的情况下解决这个问题并在滚动视图中完成这样的布局（我曾尝试在滚动视图中使用它，但它一直给我带来麻烦，东西没有出现等）。

这是我的带有图像和文本的基本代码：

<ScrollView>
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="*"></RowDefinition>
 <RowDefinition Height="Auto"></RowDefinition>

  </Grid.RowDefinitions>
  <Image Aspect = "AspectFit" Grid.Row="0" x:Name = "image" />

        <StackLayout Grid.Row="1" Padding = "10,10,10,0" >

        <Label XAlign = "Center" x:Name = "name" FontSize = "15" FontAttributes = "Bold" TextColor = "Black" FontFamily = "Helvetica Neue" />

        <Label XAlign = "Center" x:Name = "date" FontSize = "13" TextColor = "Black" FontFamily = "Helvetica Neue"  />

        <StackLayout Padding = "20,20,20,0" >

        <Label x:Name = "text" FontSize = "12" TextColor = "Black" FontFamily = "Helvetica Neue" />
        </StackLayout> 
        </StackLayout>

  </Grid>
</ScrollView>

我需要如何继续我的代码才能为上面发布的图片添加类似的布局？

Answer 1

只需添加一个 StackLayout 作为 ScrollView 的第一个子元素，然后在其中的第一个网格下方添加另一个网格。或者在 Grid.Row=1

中的 StackLayout 中

<ScrollView>
  <StackLayout>
      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition Height="*"></RowDefinition>
              <RowDefinition Height="Auto"></RowDefinition>
          </Grid.RowDefinitions>
          <Image Aspect = "AspectFit" Grid.Row="0" x:Name = "image" />

          <StackLayout Grid.Row="1" Padding = "10,10,10,0" >

              <Label XAlign = "Center" x:Name = "name" FontSize = "15" FontAttributes = "Bold" TextColor = "Black" FontFamily = "Helvetica Neue" />

              <Label XAlign = "Center" x:Name = "date" FontSize = "13" TextColor = "Black" FontFamily = "Helvetica Neue"  />

              <StackLayout Padding = "20,20,20,0" >

                  <Label x:Name = "text" FontSize = "12" TextColor = "Black" FontFamily = "Helvetica Neue" />
              </StackLayout> 
          </StackLayout>
       </Grid>
       <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            Your content here

       </Grid>
    </StackLayout>
</ScrollView>

Xamarin Forms 滚动视图内的高级定位

Advanced positioning inside a scrollview in Xamarin Forms

c#

scrollview

xamarin

xamarin.forms