Question

我需要一个技巧，我在我的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能够随设备自动缩放，或者对任何设备都有标准高度

Answer 1

因为你在listview周围使用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 documentation。在我的代码中

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

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

Answer 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>

使用列表视图填充屏幕

2 个答案: