Xamarin Forms开发：实现含图标、文本、时间戳的ListView

嘿，我之前做项目时也碰到过类似的需求——用ImageCell确实不够灵活，要加第三个元素的话，自定义ViewCell是最靠谱的路子，不管产品负责人最后选时间戳在图标上方还是文本旁，都能轻松实现。下面给你两种对应布局的具体实现：

方案1：时间戳放在图标上方 #

这种布局适合把时间和图标归为一组，用Grid拆分列，第一列放垂直排列的时间和图标，第二列放错误信息：

<ListView ItemsSource="{Binding ErrorItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10" ColumnSpacing="10">
                    <!-- 第一列：时间+图标 -->
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <StackLayout Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
                        <Label Text="{Binding Timestamp, StringFormat='{0:yyyy-MM-dd HH:mm}'}" 
                               FontSize="Small" 
                               TextColor="#666"/>
                        <Image Source="{Binding ErrorIcon}" 
                               WidthRequest="24" 
                               HeightRequest="24" 
                               Margin="0,5,0,0"/>
                    </StackLayout>
                    
                    <!-- 第二列：错误信息 -->
                    <Label Grid.Column="1" 
                           Text="{Binding ErrorMessage}" 
                           FontSize="Medium" 
                           VerticalOptions="Center"
                           LineBreakMode="WordWrap"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

方案2：时间戳放在文本旁（下方/右侧） #

如果产品想把时间和错误信息放在一起，有两种子布局可选：

子方案2.1：时间在错误信息下方（垂直排列） #

适合长错误文本场景，布局更规整：

<ListView ItemsSource="{Binding ErrorItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10" ColumnSpacing="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    
                    <!-- 图标列 -->
                    <Image Grid.Column="0" 
                           Source="{Binding ErrorIcon}" 
                           WidthRequest="24" 
                           HeightRequest="24" 
                           VerticalOptions="Center"/>
                    
                    <!-- 错误信息+时间列 -->
                    <StackLayout Grid.Column="1" VerticalOptions="Center">
                        <Label Text="{Binding ErrorMessage}" 
                               FontSize="Medium"
                               LineBreakMode="WordWrap"/>
                        <Label Text="{Binding Timestamp, StringFormat='{0:yyyy-MM-dd HH:mm}'}" 
                               FontSize="Small" 
                               TextColor="#666"
                               Margin="0,3,0,0"/>
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

子方案2.2：时间在错误信息右侧（水平排列） #

适合短文本场景，节省垂直空间：

<ListView ItemsSource="{Binding ErrorItems}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="10" ColumnSpacing="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    
                    <Image Grid.Column="0" 
                           Source="{Binding ErrorIcon}" 
                           WidthRequest="24" 
                           HeightRequest="24" 
                           VerticalOptions="Center"/>
                    
                    <Label Grid.Column="1" 
                           Text="{Binding ErrorMessage}" 
                           FontSize="Medium"
                           VerticalOptions="Center"/>
                    
                    <Label Grid.Column="2" 
                           Text="{Binding Timestamp, StringFormat='{0:HH:mm}'}" 
                           FontSize="Small" 
                           TextColor="#666"
                           VerticalOptions="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

额外提示 #

1. 你的ViewModel里需要对应三个属性：string ErrorMessage、ImageSource ErrorIcon、DateTime Timestamp，确保绑定路径正确。
2. 时间格式化可以根据需求调整StringFormat，比如只显示时分或者简化日期格式。
3. 如果用字体图标（比如FontAwesome），把Image换成Label，绑定FontFamily和图标字符即可。

这样不管产品那边最后确定哪种布局，你只需要切换对应的ViewCell模板就搞定啦！

内容的提问来源于stack exchange，提问作者Pim Schwippert