笔记详情界面完成 除图片放大功能和 图片语音展示

lib/apis/mine.dart

@@ -204,5 +204,31 @@ abstract class MineAPI {
     return false;
   }
 
+  /// 12、笔记详情列表
+  ///
+  static Future <List<NoteModel>> noteList({
+    int page = 1,
+    int limit = 10,
+    required String bookId,
+    required String types
+  }) async {
+    final result = await HttpService.to.post(
+      '/v1/members/Information/myBookNotes',
+      params: {
+        'page': page,
+        'page_size': limit,
+        'book_id':bookId,
+        'types': types
+      },
+    );
+    if (result.data is! Map && result.data['list'] is! List) return [];
+    return List.generate(result.data['list'].length, (index){
+      return NoteModel.fromJson(result.data['list'][index]);
+    });
+  }
+
+
+
+
 
 }
\ No newline at end of file

lib/models/mine.dart

@@ -307,4 +307,59 @@ class UserInfoModel {
     return map;
   }
 
+}
+
+class NoteModel {
+  NoteModel({
+    this.types,
+    this.chapterId,
+    this.content,
+    this.positioning,
+    this.noteContent,
+    this.color,
+    this.chapterName,});
+
+  NoteModel.fromJson(dynamic json) {
+    types = json['types'];
+    chapterId = json['chapter_id'];
+    content = json['content'];
+    positioning = json['positioning'];
+    noteContent = json['note_content'];
+    color = json['color'];
+    chapterName = json['chapter_name'];
+  }
+  num? types;
+  num? chapterId;
+  String? content;
+  String? positioning;
+  String? noteContent;
+  String? color;
+  String? chapterName;
+  NoteModel copyWith({  num? types,
+    num? chapterId,
+    String? content,
+    String? positioning,
+    String? noteContent,
+    String? color,
+    String? chapterName,
+  }) => NoteModel(  types: types ?? this.types,
+    chapterId: chapterId ?? this.chapterId,
+    content: content ?? this.content,
+    positioning: positioning ?? this.positioning,
+    noteContent: noteContent ?? this.noteContent,
+    color: color ?? this.color,
+    chapterName: chapterName ?? this.chapterName,
+  );
+  Map<String, dynamic> toJson() {
+    final map = <String, dynamic>{};
+    map['types'] = types;
+    map['chapter_id'] = chapterId;
+    map['content'] = content;
+    map['positioning'] = positioning;
+    map['note_content'] = noteContent;
+    map['color'] = color;
+    map['chapter_name'] = chapterName;
+    return map;
+  }
+
 }
\ No newline at end of file

lib/pages/user_notes/index.dart

@@ -17,4 +17,4 @@ import '../../utils/index.dart';
 
 part 'view.dart';
 part 'controller.dart';
-part 'widgets/item.dart';
\ No newline at end of file
+part 'widgets/item.dart';

lib/pages/user_notes/view.dart

@@ -36,18 +36,21 @@ class _UserNotePageState extends State<UserNotePage> {
                     ),
                   ],
                 ),
-                child: ListView.builder(
-                  physics: const NeverScrollableScrollPhysics(),
-                  shrinkWrap: true,
-                  itemBuilder: (BuildContext context, int index){
-                    return GestureDetector(
-                      onTap: (){
-                        context.pushNamed(Routes.noteDes,extra: controller.notes[index]);
-                      },
-                        child: BuildItem(model: controller.notes[index],index: index,num: controller.notes.length,)
-                    );
-                  },
-                  itemCount: controller.notes.length,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(8),
+                  child: ListView.builder(
+                    physics: const NeverScrollableScrollPhysics(),
+                    shrinkWrap: true,
+                    itemBuilder: (BuildContext context, int index){
+                      return GestureDetector(
+                        onTap: (){
+                          context.pushNamed(Routes.noteDes,extra: controller.notes[index]);
+                        },
+                          child: BuildItem(model: controller.notes[index],index: index,num: controller.notes.length,)
+                      );
+                    },
+                    itemCount: controller.notes.length,
+                  ),
                 ),
               ),
             )

lib/pages/user_notes_des/controller.dart

@@ -2,8 +2,74 @@ part of user_notes_des;
 
 class UserNotesDesController extends GetxController {
   final String tag;
-  UserNotesDesController(this.tag);
+  final CourseModel model;
+  UserNotesDesController(this.tag,this.model);
+  List<NoteModel> notes = [];
 
+  final EasyRefreshController refreshController = EasyRefreshController(
+    controlFinishLoad: true,
+    controlFinishRefresh: true,
+  );
+
+  final int _limit = 10;
+  int _page = 1;
+  bool _noMore = false;
+
+
+  @override
+  void onReady() {
+    onRefresh();
+    super.onReady();
+  }
+
+  @override
+  void onClose() {
+    refreshController.dispose();
+    super.onClose();
+  }
+
+
+  /// 获取笔记列表
+  Future<void> _getNotes([bool isRefresh = false]) async {
+    if (isRefresh) _page = 1;
+    // 网路请求
+    final result = await MineAPI.noteList(
+        page: _page,
+        limit: _limit,
+        bookId: model.bookId.toString(),
+        types: tag
+    );
+    // 如果是刷新 清理数据
+    if (isRefresh) notes.clear();
+    notes.addAll(result);
+    _page ++;
+    _noMore = result.length < _limit;
+    update();
+
+  }
+
+  void onRefresh() async {
+    try {
+      await _getNotes(true);
+      refreshController.finishRefresh(IndicatorResult.success);
+      refreshController.resetFooter();
+    } catch (error) {
+      refreshController.finishRefresh(IndicatorResult.fail);
+    }
+  }
+
+  void onLoading() async {
+    if (_noMore) {
+      refreshController.finishLoad(IndicatorResult.noMore);
+      return;
+    }
+    try {
+      await _getNotes();
+      refreshController.finishLoad();
+    } catch (error) {
+      refreshController.finishLoad(IndicatorResult.fail);
+    }
+  }
 
 
 

lib/pages/user_notes_des/index.dart

 library user_notes_des;
 
+import 'package:easy_refresh/easy_refresh.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_book/widgets/index.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 
+import '../../apis/index.dart';
 import '../../models/index.dart';
 import '../../theme.dart';
 import '../../utils/index.dart';
@@ -12,4 +15,7 @@ import '../../utils/index.dart';
 part 'view.dart';
 part 'controller.dart';
 part 'widgets/item.dart';
-part 'widgets/list.dart';
\ No newline at end of file
+part 'widgets/list.dart';
+part 'widgets/line.dart';
+part 'widgets/note.dart';
+part 'widgets/high.dart';
\ No newline at end of file

lib/pages/user_notes_des/view.dart

@@ -60,7 +60,7 @@ class _UserNotesDesPageState extends State<UserNotesDesPage> {
                 Expanded(
                   child: TabBarView(
                       children: List.generate(tabs.length, (index){
-                        return BuildListPage(tag:'$index');
+                        return BuildListPage(tag:'$index',model:widget.model);
                       })
                   ),
                 )

lib/pages/user_notes_des/widgets/high.dart

+part of user_notes_des;
+
+class BuildHigh extends StatelessWidget {
+  final NoteModel model;
+  const BuildHigh({
+    Key? key,
+    required this.model
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(left: 10,right: 10,top: 10),
+      padding: const EdgeInsets.all(10),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(4),
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: const Color(0xFFC7C7C7).withOpacity(0.5),
+            offset: const Offset(1.5, 0),
+            blurRadius: 7.w,
+            spreadRadius: 0.w,
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(model.content??'',style: const TextStyle(
+              fontSize: 14,
+              height: 1.5,
+              color: Colors.red,
+
+          ),),
+          Gaps.vGaps8,
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.symmetric(vertical: 5,horizontal: 10),
+            color: Colours.cF8,
+            child: Text(model.chapterName??'',style: const TextStyle(fontSize: 12,height: 1.5,color: Colours.c9),),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/user_notes_des/widgets/line.dart

+part of user_notes_des;
+
+class BuildLine extends StatelessWidget {
+  final NoteModel model;
+  const BuildLine({
+    Key? key,
+    required this.model
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(left: 10,right: 10,top: 10),
+      padding: const EdgeInsets.all(10),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(4),
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: const Color(0xFFC7C7C7).withOpacity(0.5),
+            offset: const Offset(1.5, 0),
+            blurRadius: 7.w,
+            spreadRadius: 0.w,
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(model.content??'',style: const TextStyle(
+            fontSize: 14,
+            height: 1.5,
+            color: Colours.c3,
+            decoration: TextDecoration.underline,
+            decorationColor: Colors.red,
+            decorationThickness: 2
+          ),),
+          Gaps.vGaps8,
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.symmetric(vertical: 5,horizontal: 10),
+            color: Colours.cF8,
+            child: Text(model.chapterName??'',style: const TextStyle(fontSize: 12,height: 1.5,color: Colours.c9),),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/user_notes_des/widgets/list.dart

@@ -2,9 +2,11 @@ part of user_notes_des;
 
 class BuildListPage extends StatefulWidget {
   final String tag;
+  final CourseModel model;
   const BuildListPage({
     Key? key,
-    required this.tag
+    required this.tag,
+    required this.model
   }) : super(key: key);
 
 
@@ -12,21 +14,37 @@ class BuildListPage extends StatefulWidget {
   State<BuildListPage> createState() => _BuildListPageState();
 }
 
-class _BuildListPageState extends State<BuildListPage> {
+class _BuildListPageState extends State<BuildListPage> with AutomaticKeepAliveClientMixin{
   @override
   Widget build(BuildContext context) {
     return GetBuilder<UserNotesDesController>(
       tag: widget.tag,
-      init: UserNotesDesController(widget.tag),
-      builder: (controller) =>ListView.builder(
-          itemBuilder: (BuildContext context,int index){
-            return Container(
-              height: 20,
-              color: Colors.red,
-            );
-          },
-        itemCount: 3,
+      init: UserNotesDesController(widget.tag,widget.model),
+      builder: (controller) =>CustomPullScrollView(
+        controller: controller.refreshController,
+        onLoading: controller.onLoading,
+        child: ListView.builder(
+            itemBuilder: (BuildContext context,int index){
+              NoteModel model = controller.notes[index];
+              // 划线
+              if(model.types == 1){
+                return  BuildLine(model: model,);
+              }
+              // 高亮
+              else if(model.types == 2){
+                return BuildHigh(model: model,);
+              }
+              // 笔记
+              else if(model.types == 3){
+                return BuildNote(model: model,);
+              }
+            },
+          itemCount: controller.notes.length,
+        ),
       ),
     );
   }
+
+  @override
+  bool get wantKeepAlive => true;
 }

lib/pages/user_notes_des/widgets/note.dart

+part of user_notes_des;
+
+class BuildNote extends StatelessWidget {
+  final NoteModel model;
+  const BuildNote({
+    Key? key,
+    required this.model
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(left: 10,right: 10,top: 10),
+      padding: const EdgeInsets.all(10),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(4),
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: const Color(0xFFC7C7C7).withOpacity(0.5),
+            offset: const Offset(1.5, 0),
+            blurRadius: 7.w,
+            spreadRadius: 0.w,
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text('看来谁都不记得自己为何出现在此',style: TextStyle(
+            fontSize: 14,
+            height: 1.5,
+            color: Colors.red,
+
+          ),),
+          Gaps.vGaps13,
+          _buildImageGridView(),
+          Gaps.vGaps13,
+          _buildAudioGridView(),
+          Gaps.vGaps13,
+          Container(
+            width: double.infinity,
+            padding: const EdgeInsets.symmetric(vertical: 5,horizontal: 10),
+            color: Colours.cF8,
+            child:Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(model.chapterName??'',style: const TextStyle(fontSize: 12,height: 1.5,color: Colours.c9),),
+                Text('内容：${model.content??''}',style: const TextStyle(fontSize: 12,height: 1.5,color: Colours.c9),),
+              ],
+            )
+          )
+        ],
+      ),
+    );
+  }
+
+  // 图片
+  Widget _buildImageGridView(){
+    return GridView.builder(
+      // padding: const EdgeInsets.only(left: 13,top: 10),
+      physics: NeverScrollableScrollPhysics(),
+      shrinkWrap: true,
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 6,
+          crossAxisSpacing: 2,
+          mainAxisSpacing: 2,
+          childAspectRatio: 1
+      ),
+      itemBuilder: (BuildContext context, int index) {
+        return Container(
+          color: Colors.red,
+          child: Center(child: Text('图片')),
+        );
+      },
+      itemCount: 3,
+    );
+  }
+
+  Widget _buildAudioGridView(){
+    return GridView.builder(
+      // padding: const EdgeInsets.only(left: 13,top: 10),
+      physics: NeverScrollableScrollPhysics(),
+      shrinkWrap: true,
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 6,
+          crossAxisSpacing: 2,
+          mainAxisSpacing: 2,
+          childAspectRatio: 1
+      ),
+      itemBuilder: (BuildContext context, int index) {
+        return Container(
+          color: Colors.red,
+          child: Center(child: Text('音频')),
+        );
+      },
+      itemCount: 3,
+    );
+  }
+
+}

lib/utils/styles.dart

@@ -32,6 +32,7 @@ class Colours {
   static const cFF = Color(0xFFFFFFFF);
   static const cF2 = Color(0xFFF2F2F2);
   static const cF4 = Color(0xFFF4F4F4);
+  static const cF8 = Color(0xFFF8F8F8);
   static const cF9 = Color(0xFFF9F9F9);
   static const cC7 = Color(0xFFC7C7C7);
   static const cAB1941 = Color(0xB3AB1941);
@@ -44,6 +45,7 @@ class Gaps {
   static const Widget hGaps20 = SizedBox(width: 20,);
 
   static const Widget vGaps5 = SizedBox(height: 5,);
+  static const Widget vGaps8 = SizedBox(height: 8,);
   static const Widget vGaps10 = SizedBox(height: 10,);
   static const Widget vGaps13 = SizedBox(height: 13,);
   static const Widget vGaps15 = SizedBox(height: 15,);