在 Xamarin 的 ScrollView 中使用 Frame 时如何显示 2 行
How to display 2 rows when using Frame inside ScrollView in Xamarin
我有一个 ScrollView 问题如下:我有一个类别列表。我希望它显示 2 行类别。我搜索了与 ScrollView 相关的所有内容,但没有看到任何结果。
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Padding="12,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
我的想法是限制 ScrollView 的宽度,然后它自己会下降到 2 列的类别,但我认为这太有趣了 =]]]。但是它仍然不起作用。任何人对此有任何解决方案,我不会使用 Grid。谢谢。
这是我希望显示 2 行的内容:
更新
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>
结果:
Jason说用FlexLayout就可以,我写了个例子给大家参考。
这里是 xaml 代码:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>
感谢上面的解决方法,下面是我根据需要自定义的代码:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Vertical">
<FlexLayout FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5sss" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</StackLayout>
</ScrollView>
</FlexLayout>
</ScrollView>
我有一个 ScrollView 问题如下:我有一个类别列表。我希望它显示 2 行类别。我搜索了与 ScrollView 相关的所有内容,但没有看到任何结果。
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Padding="12,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
我的想法是限制 ScrollView 的宽度,然后它自己会下降到 2 列的类别,但我认为这太有趣了 =]]]。但是它仍然不起作用。任何人对此有任何解决方案,我不会使用 Grid。谢谢。
这是我希望显示 2 行的内容:
更新
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>
结果:
Jason说用FlexLayout就可以,我写了个例子给大家参考。
这里是 xaml 代码:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>
感谢上面的解决方法,下面是我根据需要自定义的代码:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Vertical">
<FlexLayout FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5sss" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</StackLayout>
</ScrollView>
</FlexLayout>
</ScrollView>