用列表视图填充屏幕

Posted 2023-03-12

【中文标题】用列表视图填充屏幕

【英文标题】：Fill the screen with a listview

【发布时间】：2018-03-12 17:20:59

【问题描述】：

我需要一个技巧，我在我的 xamarin.forms 应用程序中有一个列表视图，但它感觉不到我的屏幕，现在看到它很糟糕，因为它占用了四分之一的屏幕，什么也没有，你能不能我？ XAML：

        <ContentPage.Content>
            <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
                <ListView x:Name="ItemsListView"
                    HeightRequest="000"             <--this is the bad thing
                    VerticalOptions="FillAndExpand"
                    HasUnevenRows="true"
                    IsPullToRefreshEnabled="true"
                    Refreshing="OnRefresh"
                    CachingStrategy="RecycleElement"
                    ItemSelected="OnItemSelected"
                    SeparatorVisibility="Default"
                    BackgroundColor="Transparent">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>

                                <ViewCell.ContextActions>
                                    <MenuItem Clicked="MenuItem_Clicked" CommandParameter="Binding ." Text="Delete" IsDestructive="True" />
                                </ViewCell.ContextActions>
                                <ViewCell.View>

                                    <Grid Margin="0,0,0,15">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10">
                                            <controls:CircleImage Source="Binding UserPicture" WidthRequest="40" HeightRequest="40" Aspect="AspectFit" VerticalOptions="Start"/>
                                            <StackLayout Orientation="Vertical" Padding="5" Spacing="20">
                                                <StackLayout Orientation="Vertical" Spacing="2">
                                                    <Label Text="Binding Title" LineBreakMode="TailTruncation" Style="DynamicResource ListItemTextStyle" 
                                                FontSize="18" FontAttributes="Bold" TextColor="Black"/>
                                                    <Label Text="Binding UserName" LineBreakMode="NoWrap" Style="DynamicResource ListItemDetailTextStyle"
                                                FontSize="14" />
                                                </StackLayout>

                                                <BoxView HeightRequest="1" WidthRequest="250" BackgroundColor="LightGray"/>

                                                <StackLayout Orientation="Horizontal" VerticalOptions="End" >
                                                    <StackLayout Orientation="Horizontal">
                                                        <Image Source="people.png" WidthRequest="20" HeightRequest="20" />
                                                        <Label Text="Binding Posti" LineBreakMode="NoWrap" Style="DynamicResource ListItemDetailTextStyle"
                                                        FontSize="14" />
                                                        <Label Text="/" LineBreakMode="NoWrap" Style="DynamicResource ListItemDetailTextStyle"
                                                        FontSize="14" />
                                                        <Label Text="Binding Participants" LineBreakMode="NoWrap" Style="DynamicResource ListItemDetailTextStyle"
                                                        FontSize="14" />
                                                    </StackLayout>

                                                </StackLayout>
                                            </StackLayout>
                                        </StackLayout>

                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <fab:FloatingActionButtonView
                    ImageName="add.png"
                    ColorNormal="#2196F3"
                    ColorPressed="#2196F3"
                    ColorRipple="#2196F3"
                    x:Name="FloatingActionButtonAdd"
                    IsVisible="False"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"/>
            </AbsoluteLayout>
        </ContentPage.Content>

我希望 heghtrequest 将随设备自动扩展，或者为任何设备提供标准高度

【参考方案1】：

因为您在列表视图周围使用 absolutelayout，您应该尝试如下。将这些添加到您的列表视图VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"

 <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="WhiteSmoke">
                <ListView x:Name="ItemsListView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"  AbsoluteLayout.LayoutFlags="All" 
               AbsoluteLayout.LayoutBounds="0,1,1,1"                     
                    HasUnevenRows="true"
                    IsPullToRefreshEnabled="true"
                    Refreshing="OnRefresh"
                    CachingStrategy="RecycleElement"
                    ItemSelected="OnItemSelected"
                    SeparatorVisibility="Default"
                    BackgroundColor="Transparent">

阅读更多关于 absolutelayout here。在我的代码中

AbsoluteLayout.LayoutBounds="0,0,1,1" 

告诉您从位置垂直 0、水平 0 开始，并将 UI 与屏幕一样大。在这种情况下，您不需要使用 HeightRequest，因为它会动态获取屏幕尺寸。

【参考方案2】：

这是简单的样式和代码，您可以将其更改为自己的

  <RelativeLayout><ListView  x:Name="MessagesListView" HasUnevenRows="True" IsPullToRefreshEnabled ="true" SeparatorVisibility="None"
            RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0"
            RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.92,Constant=0">
    </ListView></RelativeLayout>