阅读记录页面展示用户的阅读历史，包括每次阅读的时间、页数、时长等信息。今天来实现这个页面，主要涉及统计卡片和记录列表。

这个页面的核心是让用户回顾自己的阅读历程，看到自己的坚持和进步。顶部的统计数据给用户正向反馈。

页面整体结构

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../app/routes/app_routes.dart';

class ReadingRecordPage extends StatelessWidget {
  const ReadingRecordPage({super.key});

  @override
  Widget build(BuildContext context) {

用 StatelessWidget 因为页面主要是展示数据。

记录数据

    final records = [
      {'book': '百年孤独', 'date': '2024-01-15', 'pages': '45页', 'duration': '1小时20分', 'note': '读到了奥雷里亚诺上校的故事'},
      {'book': '百年孤独', 'date': '2024-01-14', 'pages': '32页', 'duration': '55分钟', 'note': ''},
      {'book': '人类简史', 'date': '2024-01-13', 'pages': '28页', 'duration': '40分钟', 'note': '认知革命的章节很有启发'},
      {'book': '百年孤独', 'date': '2024-01-12', 'pages': '50页', 'duration': '1小时30分', 'note': ''},
      {'book': '人类简史', 'date': '2024-01-11', 'pages': '35页', 'duration': '50分钟', 'note': ''},
    ];

每条记录包含书名、日期、页数、时长、备注。备注是选填的，有些记录可能没有。

Scaffold 配置

    return Scaffold(
      backgroundColor: const Color(0xFFFDF8F3),
      appBar: AppBar(
        title: const Text('阅读记录'),
        backgroundColor: const Color(0xFF5B4636),
        foregroundColor: Colors.white,
        actions: [
          IconButton(icon: const Icon(Icons.filter_list), onPressed: () {}),
          IconButton(icon: const Icon(Icons.bar_chart), onPressed: () => Get.toNamed(AppRoutes.readingReport)),
        ],
      ),

右上角有筛选和报告两个按钮。筛选可以按书籍或日期筛选，报告跳转到阅读报告页面。

页面布局

      body: Column(
        children: [
          _buildSummary(),
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.all(16.w),
              itemCount: records.length,
              itemBuilder: (context, index) => _buildRecordItem(records[index]),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color(0xFF5B4636),
        onPressed: () => Get.toNamed(AppRoutes.addReadingRecord),
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }

页面分为统计摘要和记录列表两部分。FAB 用来添加新的阅读记录。

统计摘要

  Widget _buildSummary() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        gradient: const LinearGradient(colors: [Color(0xFF5B4636), Color(0xFF8B7355)]),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildSummaryItem('本周阅读', '8.5 小时'),
          Container(width: 1, height: 40.h, color: Colors.white24),
          _buildSummaryItem('本周页数', '190 页'),
          Container(width: 1, height: 40.h, color: Colors.white24),
          _buildSummaryItem('连续天数', '12 天'),
        ],
      ),
    );
  }

统计摘要显示本周阅读时长、页数和连续阅读天数。用竖线分隔三个数据项。

摘要项

  Widget _buildSummaryItem(String label, String value) {
    return Column(
      children: [
        Text(value, style: TextStyle(color: Colors.white, fontSize: 18.sp, fontWeight: FontWeight.bold)),
        SizedBox(height: 4.h),
        Text(label, style: TextStyle(color: Colors.white70, fontSize: 12.sp)),
      ],
    );
  }

数值在上，标签在下，数值用大号加粗字体突出显示。

记录列表项

  Widget _buildRecordItem(Map<String, String> record) {
    return GestureDetector(
      onTap: () => Get.toNamed(AppRoutes.readingDetail),
      child: Container(
        margin: EdgeInsets.only(bottom: 12.h),
        padding: EdgeInsets.all(14.w),
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12.r)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
                  decoration: BoxDecoration(color: const Color(0xFF5B4636).withOpacity(0.1), borderRadius: BorderRadius.circular(4.r)),
                  child: Text(record['book']!, style: TextStyle(fontSize: 12.sp, color: const Color(0xFF5B4636), fontWeight: FontWeight.w500)),
                ),
                const Spacer(),
                Text(record['date']!, style: TextStyle(color: Colors.grey[500], fontSize: 12.sp)),
              ],
            ),
            SizedBox(height: 12.h),
            Row(
              children: [
                _buildRecordChip(Icons.menu_book, record['pages']!),
                SizedBox(width: 16.w),
                _buildRecordChip(Icons.timer, record['duration']!),
              ],
            ),
            if (record['note']!.isNotEmpty) ...[
              SizedBox(height: 10.h),
              Text(record['note']!, style: TextStyle(color: Colors.grey[600], fontSize: 13.sp), maxLines: 2, overflow: TextOverflow.ellipsis),
            ],
          ],
        ),
      ),
    );
  }

每条记录显示书名标签、日期、页数、时长，如果有备注也显示出来。书名用标签样式，和其他信息区分开。

记录标签

  Widget _buildRecordChip(IconData icon, String text) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(icon, size: 16.sp, color: Colors.grey[600]),
        SizedBox(width: 4.w),
        Text(text, style: TextStyle(fontSize: 13.sp, color: Colors.grey[700])),
      ],
    );
  }
}

页数和时长用图标加文字的形式展示，更直观。

连续阅读天数的意义

连续阅读天数是一个很好的激励机制。用户看到自己已经连续阅读12天，就不想断掉这个记录。这种游戏化的设计能提高用户粘性。

小结

阅读记录页面展示用户的阅读历史，顶部统计数据给用户正向反馈。每条记录显示关键信息，有备注的还会显示备注内容。

下一篇会讲添加阅读记录页面的实现，涉及到页数输入和时长选择，敬请期待。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net