ScrollView 在 Xamarin Forms 中的另一个 ScrollView 内

Posted 2023-04-13

【中文标题】ScrollView 在 Xamarin Forms 中的另一个 ScrollView 内

【英文标题】：ScrollView Inside another ScrollView in Xamarin Forms

【发布时间】：2021-01-15 02:36:58

【问题描述】：

我正在使用 Xamarin Forms 开发应用程序。在这个应用程序中，我希望用户能够垂直滚动整个页面，但只能垂直滚动页面的一部分。请参阅this image 以获得视觉参考。我在 Xamarin ScrollView 文档上阅读过，

ScrollView 对象不应嵌套。此外，ScrollView 对象不应与其他提供滚动的控件嵌套，例如 CollectionView、ListView 和 WebView。

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

【问题讨论】：

您的图像显示您想要水平滚动内部容器 - 如果正确，则嵌套可能会起作用。你需要试试看。

拥有嵌套的 ScrollViews 但具有不同的方向并不是世界末日，真正的问题是当你有 2 个以上的方向相同时，如果你确实需要在能够滚动浏览的同时列出内容页面，可以关注我的解决方案here

【参考方案1】：

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

注意它是如何说“滚动查看器不应嵌套的，这意味着它当然是可能的，但不建议这样做。我认为嵌套滚动查看器会造成糟糕的用户体验，并且会导致应用程序笨拙，尤其是对于 Xamarin.Forms；但同样，这里是嵌套滚动查看器的演示：

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

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

如果我已经回答了您的问题，请将其标记为正确答案。

谢谢，

【讨论】：

谢谢。我让它按预期工作。我重试了代码，就像你的例子一样，然后它按我想要的方式工作。谢谢。

工作就像一个魅力谢谢@user14090664

【参考方案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>

截图：