Flutter中如何按时间分组照片？实现同日期照片归类展示

Got it, let's tackle grouping your photos by the day they were taken. The core idea is to first organize your photo list into date-based groups, then display each group with a date header followed by the photos in a grid (keeping your original grid layout intact). Here's how to implement this step by step:

Step 1: Add a Helper Function to Group Photos by Date #

First, we'll create a function that takes your list of VideoImageDataModel and groups them into a map where the key is a standardized date string (like yyyy-MM-dd) and the value is the list of photos taken that day. We'll also sort the groups so the most recent date appears first.

Map<String, List<VideoImageDataModel>> groupPhotosByDate(List<VideoImageDataModel> photos) {
  final groupedPhotos = <String, List<VideoImageDataModel>>{};

  // Iterate through each photo and assign it to the correct date group
  for (final photo in photos) {
    // Convert the timestamp to a consistent date string (yyyy-MM-dd)
    final dateKey = DateFormat('yyyy-MM-dd').format(
      DateTime.fromMillisecondsSinceEpoch(photo.millisecond),
    );

    // Initialize the list for the date if it doesn't exist
    if (!groupedPhotos.containsKey(dateKey)) {
      groupedPhotos[dateKey] = [];
    }
    groupedPhotos[dateKey]!.add(photo);
  }

  // Sort the date keys in descending order (newest first)
  final sortedDateKeys = groupedPhotos.keys.toList()
    ..sort((a, b) => b.compareTo(a));

  // Return a sorted map based on the sorted keys
  return Map.fromEntries(
    sortedDateKeys.map((key) => MapEntry(key, groupedPhotos[key]!)),
  );
}

Step 2: Update Your FutureBuilder to Use Grouped Data #

Next, modify your FutureBuilder to use this grouping function, then display each date group as a section in a ListView. Each section will have a date header and a grid of photos for that day.

Here's the updated full code:

Future<List<VideoImageDataModel>> fetchPhotos() async { 
  var dataList = await Historydao().ImageData(); 
  return dataList; 
} 

FutureBuilder<List<VideoImageDataModel>>( 
  future: fetchPhotos(), 
  builder: (context, snapshot) { 
    if (snapshot.hasData) { 
      final photoList = snapshot.data!;
      // Group the photos by date
      final groupedPhotos = groupPhotosByDate(photoList);

      return ListView.builder(
        padding: const EdgeInsets.only(top: 8),
        itemCount: groupedPhotos.length,
        itemBuilder: (context, groupIndex) {
          // Get the current date key and its corresponding photos
          final dateKey = groupedPhotos.keys.elementAt(groupIndex);
          final dayPhotos = groupedPhotos[dateKey]!;

          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Date Header
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Text(
                  // Format the date key to a user-friendly format (e.g., "October 05, 2024")
                  DateFormat('MMMM dd, yyyy').format(DateTime.parse(dateKey)),
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey[800],
                  ),
                ),
              ),
              // Photo Grid for the Day
              GridView.builder(
                // Critical: Shrink the grid to fit its content (prevents scroll conflicts)
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 10 / 10,
                  crossAxisCount: 4,
                ),
                itemCount: dayPhotos.length,
                itemBuilder: (BuildContext context, photoIndex) {
                  final photo = dayPhotos[photoIndex];
                  return Container(
                    margin: const EdgeInsets.fromLTRB(5, 5, 0, 0),
                    child: Hero(
                      tag: photo.thumbnail,
                      child: GestureDetector(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ImagePage(
                                photo.thumbnail.toString(),
                              ),
                            ),
                          );
                        },
                        child: Stack(fit: StackFit.expand, children: [
                          Image.file(
                            fit: BoxFit.cover,
                            File(photo.thumbnail.toString()),
                          ),
                          Positioned(
                            right: 3,
                            bottom: 3,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Text(
                                  '${DateFormat('Hm', 'en_US').format(DateTime.fromMillisecondsSinceEpoch(photo.id))}',
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 9,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                // Optional: Remove the date text here since we have the header
                                // Text(
                                //   '${DateFormat('dd/MM/yyyy').format(DateTime.fromMillisecondsSinceEpoch(photo.millisecond))}',
                                //   style: TextStyle(
                                //     color: Colors.white,
                                //     fontSize: 9,
                                //     fontWeight: FontWeight.bold,
                                //   ),
                                // ),
                              ],
                            ),
                          ),
                        ]),
                      ),
                    ),
                  );
                },
              ),
            ],
          );
        },
      );
    } else { 
      return const Center( 
        child: CircularProgressIndicator( 
          color: Colors.blue, 
        ), 
      ); 
    } 
  }, 
)

Key Notes: #

• Scroll Behavior: The inner GridView uses shrinkWrap: true and NeverScrollableScrollPhysics() to avoid conflicting with the outer ListView's scroll. This ensures the entire page scrolls smoothly as one.
• Date Sorting: We sorted the date groups in descending order so your most recent photos appear at the top—you can reverse the sort order if you prefer oldest first.
• UI Polish: The date header uses a user-friendly format (e.g., "October 05, 2024") instead of the raw yyyy-MM-dd key. You can adjust the date format using DateFormat to match your app's style.
• Redundant Text: I commented out the date text in the photo overlay since the group header already shows the date—this cleans up the UI, but you can keep it if needed.

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