ScrollView 在 Xamarin Forms 中的另一个 ScrollView 中

Question

我正在使用 Xamarin Forms 开发应用程序。在此应用程序中，我希望用户能够垂直滚动整个页面，但只能垂直滚动页面的一部分。请参阅 this image for a visual reference. I read on the Xamarin ScrollView 文档，即

ScrollView objects should not be nested. In addition, ScrollView objects should not be nested with other controls that provide scrolling, such as CollectionView, ListView, and WebView.

那么，如何在不嵌套两个 ScrollView 的情况下实现这一点？预先感谢您的帮助。

Answer 1

在 Xamarin.Forms 中可以有 2 个嵌套的滚动查看器。

注意它是怎么说'滚动查看器不应该嵌套的，这意味着它当然可以，但不推荐。我认为嵌套的滚动查看器会造成糟糕的 user-experience 并使应用程序笨拙，尤其是 Xamarin.Forms；但同样，这是嵌套滚动查看器的演示：

 <ScrollView Orientation="Horizontal">
        <StackLayout Orientation="Vertical">
            <Grid>
            </Grid>
            <ScrollView Orientation="Vertical">
                <Grid>
                </Grid>
            </ScrollView>
        </StackLayout>
    </ScrollView>

我认为一旦您玩过嵌套滚动查看器，您应该很容易实现您想要的。我建议使用带有列和行定义的网格以及您想要的测量值。

如果我回答了你的问题，请将此标记为正确答案。

谢谢，

Answer 2

根据您的截图，我制作了一个代码示例供您参考。

Xaml:

 <ScrollView Orientation="Vertical">
    <StackLayout Orientation="Horizontal">
        <BoxView BackgroundColor="Blue" WidthRequest="150" />
        <StackLayout Orientation="Vertical">
            <ScrollView Orientation="Horizontal" BackgroundColor="Accent">
                <StackLayout Orientation="Horizontal">
                    <Label
                        HeightRequest="50"
                        Text="A1"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A2"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A3"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A4"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A5"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A6"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A7"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A8"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A9"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A10"
                        WidthRequest="50" />
                </StackLayout>
            </ScrollView>
            <Label HeightRequest="150" Text="Elem1"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem2"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem3"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem4"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem5"  BackgroundColor="Green"/>
            <ScrollView Orientation="Horizontal">
                <StackLayout Orientation="Horizontal">
                    <Label
                        HeightRequest="50"
                        Text="B1"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B2"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B3"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B4"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B5"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B6"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B7"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B8"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B9"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B10"
                        WidthRequest="50" />
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </StackLayout>

</ScrollView>

截图：

ScrollView 在 Xamarin Forms 中的另一个 ScrollView 中

ScrollView Inside another ScrollView in Xamarin Forms

c#

mobile

scrollview

xamarin

xamarin.forms