无法滚动在移动设备上使用 Xamarin.Forms 创建的 xaml 页面
Posted
技术标签:
【中文标题】无法滚动在移动设备上使用 Xamarin.Forms 创建的 xaml 页面【英文标题】：Cannot scroll xaml page created with Xamarin.Forms on mobile device 【发布时间】：2021-10-27 17:52:44 【问题描述】：滚动在我的 XAML 文件中不起作用。它削减内容并不显示所有内容。即使我尝试滚动查看底部，它也不允许滚动。底部应该有绿色按钮。但我无法滚动查看它。我尝试添加滚动视图和列表视图，但无法将其向下滚动到页面。所以向下滑动看不到所有内容。
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
NavigationPage.HasNavigationBar="False"
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
<Frame
Margin="10"
BackgroundColor="White"
CornerRadius="12"
HeightRequest="300"
TranslationY="40">
<StackLayout Orientation="Horizontal">
<Frame
Margin="0,0,10,0"
Padding="10"
BackgroundColor="DodgerBlue"
BorderColor="LightGray"
CornerRadius="40"
HasShadow="True"
HeightRequest="20"
IsClippedToBounds="True"
WidthRequest="60">
<abstractions:CircleImage
Aspect="AspectFit"
HeightRequest="20"
Source="prince"
WidthRequest="20" />
</Frame>
<StackLayout>
<Label Text=" "></Label>
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
FontSize="Body"
Text="MOBILE"
TextColor="Red" />
<Span Text=" Tapper" TextColor="LightGray" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
FontAttributes="Bold"
FontSize="16"
Text="OPERATI"
TextColor="DarkSlateGray" />
<!--<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
Text=" Mobile "
TextColor="LightGray" />
<Span
FontAttributes="Bold"
FontSize="Body"
Text=" 0244567876"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>-->
</StackLayout>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button
x:Name="btnTransfer"
Margin="20"
BackgroundColor="#FF2ED833"
Clicked="btnTransfer_Clicked"
CornerRadius="20"
HorizontalOptions="FillAndExpand"
Text="Main Page"
TextColor="White"
VerticalOptions="EndAndExpand" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
【问题讨论】：
如果你想让你的内容滚动，你需要使用 ScrollView 嗨，Jason，我尝试放置滚动视图但不滚动。正如 Jason 所说，ScrollView 应该可以解决问题，您可能只是没有正确使用它。 在第一个堆栈布局上方添加一个ScrollView，如图：
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<ScrollView>
<StackLayout x:Name="stack1" ...
然后在最后一行添加结束的ScrollView标签：
</StackLayout>
</StackLayout>
</ScrollView>
显然也修复了缩进格式。另外，TranslationY 的目的是什么？
【讨论】：
嗨 Saamer，我试过你写的，但还是不能滚动。 TranslitionY 将第一个带有蓝色圆圈的帧从屏幕上方向下放置 40。 您没有使用列表视图有什么原因吗？ 我还添加了列表视图，但不再滚动。我有其他具有列表视图的页面并且它们正在滚动，但此页面没有滚动。使用框架有问题吗？ 我通过将 HeightRequest 提供给第一个 StackLayout stack1 来解决问题。 "我通过将 HeightRequest 提供给第一个 StackLayout stack1 来解决问题。 ""
同时添加 ScrollView
【讨论】：
这很奇怪。但我很高兴你明白了 谢谢我的朋友萨默以上是关于无法滚动在移动设备上使用 Xamarin.Forms 创建的 xaml 页面的主要内容，如果未能解决你的问题，请参考以下文章