LISTVIEW显示水平滚动条的问题，如何显示，或者CollectionView能否完全代替

Question

我想把界面分成上中下三行。前面2行固定高度。第3行自动占满整个屏幕。但最下层有个最小高度不然屏幕小了看不到数据，我去最外层的SCROLLVIEW。又不想和LISTVIEW冲突。所以功能如何实现。

另外我的代码LISTVIEW也不显示水平的滚动条。奇怪了。

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         x:Class="MauiApp2.MainPage">

<Grid RowDefinitions="50,50,*">

    <Label Grid.Row="0" Text="第一行" TextColor="Red"/>

    <Label Grid.Row="1" Text="第二行" TextColor="Blue"/>

    <ListView x:Name="lv1"

                      Grid.Row="2" 

                      HasUnevenRows="True"

                    VerticalOptions="FillAndExpand"

              HorizontalOptions="FillAndExpand"

                      MinimumHeightRequest="100">

        <ListView.Header>

            <HorizontalStackLayout>

                <Label Text="col1" WidthRequest="100" TextColor="Red"/>

                <Label Text="col2" WidthRequest="100" TextColor="Blue"/>

                <Label Text="col3" WidthRequest="100"/>

                <Label Text="col4" WidthRequest="100"/>

                <Label Text="col5" WidthRequest="100"/>

                <Label Text="col6" WidthRequest="100"/>

                <Label Text="col7" WidthRequest="100"/>

                <Label Text="col8" WidthRequest="100"/>

                <Label Text="col9" WidthRequest="100"/>

                <Label Text="col10" WidthRequest="100"/>

            </HorizontalStackLayout>

        </ListView.Header>

        <ListView.ItemTemplate>

            <DataTemplate>

                <ViewCell>

                    <HorizontalStackLayout>

                        <Label Text="{Binding col1}" WidthRequest="100"/>

                        <Label Text="{Binding col1}" WidthRequest="100"/>

                        <Label Text="{Binding col1}" WidthRequest="100"/>

                        <Label Text="{Binding col1}" WidthRequest="100"/>

                        <Label Text="col5" WidthRequest="100"/>

                        <Label Text="col6" WidthRequest="100"/>

                        <Label Text="col7" WidthRequest="100"/>

                        <Label Text="col8" WidthRequest="100"/>

                        <Label Text="col9" WidthRequest="100"/>

                        <Label Text="col10" WidthRequest="100"/>

                    </HorizontalStackLayout>

                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

</Grid>

</ContentPage>

Answer 1

您好,

根据你的代码，您像实现一个数据表格的功能，您可以尝试使用Akgul.Maui.DataGrid 这个包实现这个功能，并且您还想表格能适配不同的手机屏幕，所以不推荐使用Listview 或者Collectionview 去实现一个相似的功能.

这是修改后的layout。DataGrid 可以根据屏幕大小，自动调整表格大小，使所有数据可以显示

<Grid RowDefinitions="50,50,*">
 
     <Label Grid.Row="0" Text="第一行" TextColor="Red"/>
 
     <Label Grid.Row="1" Text="第二行" TextColor="Blue"/>
 
    
<dg:DataGrid  Grid.Row="2" ItemsSource="{Binding Items}"
                       RowHeight="70" 
                        HeaderHeight="50"
>
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="coll1" PropertyName="col1" SortingEnabled="False"/>
<dg:DataGridColumn Title="coll2" PropertyName="col2"  />
<dg:DataGridColumn Title="coll3" PropertyName="col3" />
<dg:DataGridColumn Title="coll4" PropertyName="col4"/>
<dg:DataGridColumn Title="coll5" PropertyName="col5"  />
</dg:DataGrid.Columns>
</dg:DataGrid>
</Grid>

这是ViewModel 和Model.

  internal class MyViewModel
   {
       public List<Model> Items { get; set; }
       public MyViewModel()
       {
           Items= new List<Model>();
           for (int i = 0; i < 10; i++) {
               Items.Add(new Model() { col1="test"+i, col2 = "test" + i , col3 = "test" + i , col4 = "test" + i,col5= "test" + i });
 
 
           }
       }
   }
 
   public class Model
   {
       public string col1 { get; set; }
       public string col2 { get; set; }
 
       public string col3 { get; set; }
 
       public string col4 { get; set; }
       public string col5 { get; set; }
 
   }

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。

注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。