【问题标题】:ListView inside CarouselView is not vertical scrollingCarouselView里面的ListView不是垂直滚动的
【发布时间】:2021-02-03 13:08:45
【问题描述】:

我在让我的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,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,0,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,0,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 的行)设置为*,或Auto,这样ListView 就会完全从屏幕上消失。

【问题讨论】:

  • 你可以直接把listview放到CarouselView的DataTemplate中,看看是不是布局引起的滚动问题。
  • @LucasZhang-MSFT 当我将ListView 直接放在CarouselView 模板中时,它正在工作。所以问题是在PCSActivityLocationBrowserTemplate模板中引起的。

标签: xaml xamarin.forms xamarin.forms.listview


【解决方案1】:

终于找到了问题,在通过移动东西进行了更多测试之后(感谢@LucasZhang-MSFT 提示直接在旋转木马中测试ListView),我应该在发布之前做更多的事情。

TLDR;

有几处出错了。

  1. 我删除的第一件事是PCSActivityLocationBrowserTemplate 中的外部Grid,它包含1 个固定行,height 为120,1 行* height。这个Grid 被实现为有一个自定义导航栏(高度为 120),尽管它不再使用(不再使用),因此外部 Grid 是不必要的。
  2. 第二个是第三行(我的ListView 的行)设置为固定高度,通过将其设置为*,列表变得可滚动。
  3. 我一直注意到,当我将第三行(带有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,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,0,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,0,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>

【讨论】:

    猜你喜欢
    • 2022-10-12
    • 2020-09-22
    • 1970-01-01
    • 2020-02-14
    • 1970-01-01
    • 2012-05-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多