Question

具有HasUnevenRows的列表视图不会自动更改单元格高度，我的列表视图包含图像和标签，列表视图的行高没有随其内容而改变。我想更改带有标签内容的行高。

这是我的设计

<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,1,1,0.57" AbsoluteLayout.LayoutFlags="All"
                               BackgroundColor="White" VerticalOptions="FillAndExpand">

    <Image Source="waterMark" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" 
           AbsoluteLayout.LayoutBounds="0,1,1,1" AbsoluteLayout.LayoutFlags="All" Margin="0,0,0,40"/>

    <ListView x:Name="lv_List"  IsPullToRefreshEnabled="True" 
        HasUnevenRows="True" BackgroundColor="Transparent" SeparatorVisibility="None"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" 
        AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                               Padding="0" Margin="0" BackgroundColor="WhiteSmoke">

                        <ci:CircleImage Source="profile"  BorderColor="WhiteSmoke" AbsoluteLayout.LayoutBounds="0,0,0.3,1"
                                 AbsoluteLayout.LayoutFlags="All" WidthRequest="65" HeightRequest="65"
                                 HorizontalOptions="StartAndExpand"
                                 VerticalOptions="CenterAndExpand" Aspect="AspectFill">
                        </ci:CircleImage>

                        <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"
                                 AbsoluteLayout.LayoutBounds="1,0,0.75,1" AbsoluteLayout.LayoutFlags="All">
                            <StackLayout.Margin>
                                <OnIdiom Phone="0,0,0,0"
                                             Tablet="-90,0,0,0"/>
                            </StackLayout.Margin>
                            <Label Text="{Binding Name}" HorizontalOptions="FillAndExpand" 
                              FontSize="17.5" TextColor="#555454"/>

                            <Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" 
                                      FontSize="20" TextColor="#555454"/>

                        </StackLayout>

                    </AbsoluteLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</AbsoluteLayout>

Answer 1

您可以在列表视图的DataTemplate中使用Grid来实现。这是我正在运行的屏幕截图。

有布局。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App4"
         xmlns:ci="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
         x:Class="App4.MainPage">

<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,1,1,0.57" AbsoluteLayout.LayoutFlags="All"
                           BackgroundColor="White" VerticalOptions="FillAndExpand">



    <ListView x:Name="lv_List"  IsPullToRefreshEnabled="True" 
    HasUnevenRows="True" BackgroundColor="Transparent" SeparatorVisibility="Default"
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand" 
    AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="3*" />
                        </Grid.ColumnDefinitions>
                        <ci:CircleImage Source="profile"  BorderColor="WhiteSmoke"  Grid.Row="0" Grid.Column="0"  Grid.RowSpan="2"
                             AbsoluteLayout.LayoutFlags="All" WidthRequest="65" HeightRequest="65"
                             HorizontalOptions="StartAndExpand"
                             VerticalOptions="CenterAndExpand" Aspect="AspectFill">
                        </ci:CircleImage>
                        <Label Text="{Binding Name}" HorizontalOptions="FillAndExpand"  Grid.Row="0" Grid.Column="1"
                          FontSize="17.5" TextColor="#555454"/>

                        <Label Text="{Binding Description}" HorizontalOptions="FillAndExpand"  Grid.Row="1" Grid.Column="1"
                                  FontSize="20" TextColor="#555454"/>

                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</AbsoluteLayout>

有listview的数据源。

    public partial class MainPage : ContentPage
{
    ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
    public MainPage()
    {
        InitializeComponent();

        employees.Add(new Employee { Name = "Rob Finnerty", Description = "Rob FinnertyRob FinnertyRob FinnertyRob FinnertyRob FinnertyRob FinnertyRob FinnertyRob FinnertyRob Finnerty" });
        employees.Add(new Employee { Name = "Bill Wrestler", Description = "Bill WrestlerBill Wrestler" });
        employees.Add(new Employee { Name = "Dr. Geri-Beth Hooper", Description = "Dr. Geri-Beth Hooper" });
        employees.Add(new Employee { Name = "Dr. Keith Joyce-Purdy", Description = "Dr. Keith Joyce-PurdyDr. Keith Joyce-PurdyDr. Keith Joyce-Purdy" });
        employees.Add(new Employee { Name = "Sheri Spruce", Description = "Sheri SpruceSheri Spruce" });
        employees.Add(new Employee { Name = "Burt Indybrick", Description = "Burt IndybrickBurt Indybrick" });
        lv_List.ItemsSource = employees;
    }
}

有模型。

    public class Employee
{
    public string Name { get; set; }
    public string Description { get; set; }
}

具有HasUnevenRows的Listview不会自动更改单元格高度吗？

1 个答案: