如何解决CarouselView 内的 ListView 不是垂直滚动
我在将 ListView
设置为垂直可滚动时遇到了一些问题,这应该是默认行为 (?)。
Listview
与其他几个 CarouselTemplate
项一起包含在 Grid
中。
包含 CarouselView 的主页:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDeFinitions>
<RowDeFinition Height="*" />
</Grid.RowDeFinitions>
<CarouselView
Margin="0,25,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Center">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationbrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedindicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
轮播模板 (PCSActivityLocationbrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDeFinitions>
<RowDeFinition Height="120" />
<RowDeFinition Height="*" />
</Grid.RowDeFinitions>
<!-- PAGE BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- CONTENT -->
<Grid Padding="0,10" RowSpacing="0">
<Grid.RowDeFinitions>
<RowDeFinition Height="250" />
<RowDeFinition Height="140" />
<RowDeFinition Height="450" />
</Grid.RowDeFinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Rest of code left out for simplicity -->
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Rest of code left out for simplicity -->
</Grid>
<!-- BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterandExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- BG -->
<BoxView Grid.Row="2" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- Rooms -->
<ListView
Grid.Row="2"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
房间部分 (Listview
) 是垂直滚动不起作用的地方:
可能有一个非常简单的解决方案,但经过多次调整后我似乎找不到它,例如将第三个 RowDeFinition
高度(包含 ListView
的行)设置为 {{ 1}} 或 *
,这样做后 Auto
会完全从屏幕上消失。
解决方法
终于找到了问题,在通过移动东西进行了更多测试之后(感谢@LucasZhang-MSFT 提示直接在轮播中测试 ListView
),我应该在发布之前多做一点.
TLDR;
有几处不对。
- 我删除的第一件事是
Grid
中的外部PCSActivityLocationBrowserTemplate
,它包含 1 个固定行,height
为 120,1 行带有* height
。此Grid
已实现为具有自定义导航栏(高度为 120),但未使用(不再),因此不需要外部网格。 - 第二个是第三行(我的
ListView
的行)设置为固定高度,通过将其设置为*
,列表变得可滚动。 - 我一直注意到当我将第三行(带有
ListView
)的高度设置为*
时(我按照 .2)。这是由主页中的CarouselView
引起的,因为它的VerticalOptions
设置为Center
。所以它总是将整体居中,并且因为屏幕尺寸随着第三行的非固定高度而增加,整个shebang将居中,因此不再可见。将VerticalOptions
设置为Start
解决了这个问题。
固定代码:
包含 CarouselView 的主页:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Start">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
轮播模板 (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<!-- CONTENT -->
<Grid Padding="0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<!-- Info -->
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Name -->
<Label
FontSize="18"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationName}" />
<!-- {Binding Profile.Name} -->
<!-- Description -->
<Label HorizontalTextAlignment="Center" Text="{Binding ClientName}" />
<!-- {Binding Profile.Description} -->
<!-- Social -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Column 1 -->
<StackLayout Grid.Column="0" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalFloors}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 1629 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ETAGES" />
</StackLayout>
<!-- Column 2 -->
<StackLayout Grid.Column="1" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalRooms}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 235 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="RUIMTES" />
</StackLayout>
<!-- Column 3 -->
<StackLayout Grid.Column="2" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalElements}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 2963 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ELEMENTEN" />
</StackLayout>
</Grid>
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Image -->
<local:CircleCachedImage
BorderColor="{DynamicResource BasePageColor}"
BorderSize="{OnPlatform Android=8,iOS=15}"
HeightRequest="100"
Source="resource://PCS2.APP.SharedImages.PCSDefaultClientImage.png"
WidthRequest="100" />
<!-- Badge -->
<local:Badge
BackgroundColor="#22c064"
HorizontalOptions="Center"
Text="10+"
TextColor="{DynamicResource InverseTextColor}"
TranslationX="40"
VerticalOptions="Start" />
</Grid>
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- Rooms -->
<ListView
Grid.Row="2"
BackgroundColor="Blue"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Always">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。