Question

我必须在Xamarin Forms中实现图像的可滚动网格，该网格为n x 2，因此需要并排放置两个图像。由于我不知道如何将ScrollView与Grid组合在一起，因此我尝试了一下（我所有的控件都在网格内，但这无关紧要）：

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">
        <StackLayout HorizontalOptions="Fill" Orientation="Horizontal">
            <Image Source="test.png" HorizontalOptions="Start"/>
            <Image Source="test.png" HorizontalOptions="End"/>
        </StackLayout>
        <!-- put several of these here -->
    </StackLayout>
</ScrollView>

但是结果远远不能令人满意：

我尝试了几种变体，但看来StackLayout不会遵守其父辈的界限。

只是为了好玩，我尝试了Grid却没有成功，因为它在网格之间增加了很多空间（而且我不知道为什么）：

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker">                    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>

如何在Xamarin Forms中实现简单的可滚动网格？这是我手绘的目标：

欢迎任何提示！

Answer 1

您应该为该任务使用ListView。否则，您必须自己处理很多事情。以下是我希望您可以找到所需布局的链接：https://github.com/02047788a/TwoColumnListView

Answer 2

元素之间的间距是根据StackLayout间距确定的，该间距定义了每个添加元素的间距。

您还需要考虑的另一件事是VerticalOptions，它将确定元素的位置，请参见下面的示例：

<ScrollView x:Name="scroller"
            Orientation="Vertical"
            BackgroundColor="Fuchsia"
            Grid.Row="0" Grid.Column="1"
            Grid.RowSpan="10" Grid.ColumnSpan="5">
    <StackLayout x:Name="stacker" VerticalOptions="Start" Padding="0" Spacing="0">                    
        <Grid VerticalOptions="StartAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="test.png" Grid.Row="0" Grid.Column="0"/>
            <Image Source="test.png" Grid.Row="0" Grid.Column="1"/>
        </Grid>
        <!-- put several of these here --> 
    </StackLayout>
</ScrollView>

Xamarin中的可滚动网格

2 个答案: