FlutterGroupedListView：如何按日期排序？

我有一個食譜應用程式。用戶可以將食譜保存在每周計劃器中（使用 Hive）。日期以這種格式保存：2022-09-08 00:00:00.000（= 用戶想要在 9 月 8 日烹飪食譜）。

在我的計劃頁面上，我想顯示預定的食譜。我正在使用 Grouped Listview 按日期對我的食譜進行分組。我還需要能夠對列出的食譜進行排序（用戶明天想要烹飪的食譜應該在串列的頂部，然后是后天，依此類推）。當我使用 2022-09-08 00:00:00.000 格式的日期時，我可以對食譜進行分組并以正確的順序排列它們。但我不喜歡這種格式。我寧愿展示（星期四，9 月 8 日）。所以我嘗試了以下方法：

return Column(
        children: [
         SizedBox(height: 24),
          Expanded(
            child: GroupedListView<dynamic,String>(
              elements: jsonList,
               groupBy: (element) {
                element['plannerdate'];
                String date = DateFormat('dd. MMMM, EEEE').format(element['plannerdate']);
                return date;
              },
              groupSeparatorBuilder: (value) => Container(
                
                width: double.infinity,
                padding: const EdgeInsets.all(16),
                color: Colors.white,
                child: Text(value),
              ),
              itemBuilder: (context, element) => Card(
                child: Row(
         children: <Widget>[
            CircleAvatar(
              radius: 70,
              backgroundImage: NetworkImage(element['url'],
              ), 
           ),
         

但是，我的日期被轉換為字串。格式看起來不錯，但是這樣順序就搞砸了。8 月 31 日的食譜位于串列末尾，而 9 月 2 日的食譜位于榜首。有人可以幫忙嗎？

編輯：我的食譜課是：

//Recipe Model class for Hive Recipes Favorite Box


import 'package:hive/hive.dart';
part 'recipe_data_model.g.dart';

@HiveType(typeId: 0)
class RecipeModelData extends HiveObject {
  @HiveField(0)
   String? id;

  @HiveField(1)
   String? title;

  @HiveField(2)
   String? url;

  @HiveField(3)
   String? price;

  @HiveField(4)
   int? servings;

  @HiveField(5)
   String? calories;

  @HiveField(6)
   String? carbs;

  @HiveField(7)
   String? protein;

  @HiveField(8)
   String? fat;

  @HiveField(9)
   List? ingredients;

  @HiveField(10)
   List? instructions;

  @HiveField(11)
   DateTime? plannerdate;

  

 Map<String, dynamic> toJson() => 
  {
    'id': id,
    'title': title,
    'url': url,
    'price': price,
    'servings': servings,
    'calories': calories,
    'carbs': carbs,
    'protein': protein,
    'fat': fat,
    'ingredients': ingredients,
    'instructions': instructions,
    'plannerdate': plannerdate,
  };
}

包含所有配方詳細資訊的 jsonList 是：

flutter: jsonList: [{id: 1, title: Bananenbrott, url: https://firebasestorage.xyz, price: 0,77, servings: 1, calories: 234, carbs: 12, protein: 34, fat: 1, ingredients: [2 Bananen, 30 g Mehl, 2 Eier], instructions: [1. Zun?chst das Ei mit den zerdrückten Bananen in einer Schüssel vermischen., 2. Dann das Mehl sieben und hinzufügen., 3. Alles umrühren und fertig], plannerdate: 2022-08-31 00:00:00.000}, {id: 2, title: Gemüsecurry, url: https://firebasestorage.xys, price: 1,20, servings: 1, calories: 450, carbs: 42, protein: 22, fat: 9, ingredients: [2 Dosen Kokosmilch, 400 ml Wasser, 1 Karotte], instructions: [1. Das Wasser zum Kochen bringen und dann mit der Kokosmilch vermischen., 2. Die Karotte sch?len und dann mit dazu geben, 3. Alles miteinander gut kochen und verspeisen.]<…>

uj5u.com熱心網友回復：

groupSeparatorBuilder您可以在而不是在中顯示格式化的日期groupBy。

例子

return Column(
    children: [
     SizedBox(height: 24),
      Expanded(
        child: GroupedListView<dynamic,DateTime>(
          elements: jsonList,
           groupBy: (element) => element['plannerdate'],
          groupSeparatorBuilder: (value) { 
             String date = DateFormat('dd. MMMM, EEEE').format(value);
             Container(
               width: double.infinity,
               padding: const EdgeInsets.all(16),
               color: Colors.white,
               child: Text(date),
            )},
          itemBuilder: (context, element) => Card(
            child: Row(
     children: <Widget>[
        CircleAvatar(
          radius: 70,
          backgroundImage: NetworkImage(element['url'],
          ), 
       ),

標籤：扑 排序 约会时间 列表显示

上一篇：在不使用串列視圖wpf的情況下系結集合

下一篇：FLUTTER SQL：在ListViewBuilder中顯示資料庫中的資料