feat:更新朋友圈模块

lib/views/moment.dart

@@ -28,17 +28,19 @@ class _MomentPage extends State<MomentPage> {
     });
   }
 
-
   @override
   Widget build(BuildContext context) {
     if (momentList.isEmpty) {
       return const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据');
     } else {
-      return ListView.builder(
+      return Padding(
+        padding: EdgeInsets.all(5),
+        child: ListView.builder(
           itemCount: momentList.length,
           itemBuilder: (context, index) {
             return MomentCard(moment: momentList[index]);
-          }
+          },
+        ),
       );
     }
   }

lib/views/record.dart

@@ -39,31 +39,28 @@ class _RecordPageState extends State<RecordPage>
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: EdgeInsets.all(0),
+      children: [
-      child: Column(
+        TDTabBar(
-        children: [
+          tabs: tabs,
-          TDTabBar(
+          controller: _tabController,
-            tabs: tabs,
+          backgroundColor: Colors.white,
-            controller: _tabController,
+          showIndicator: true,
-            backgroundColor: Colors.white,
+        ),
-            showIndicator: true,
+        Expanded(
-          ),
+          child: Padding(
-          Expanded(
+            padding: EdgeInsets.all(5),
-            child: Padding(
+            child: TabBarView(
-              padding: EdgeInsets.all(5),
+              controller: _tabController,
-              child: TabBarView(
+              children: [
-                controller: _tabController,
+                RecipeList(),
-                children: [
+                RecipeCalendar(),
-                  RecipeList(),
+                RecipeTimeline(),
-                  RecipeCalendar(),
+              ],
-                  RecipeTimeline(),
-                ],
-              ),
             ),
           ),
-        ],
+        ),
-      ),
+      ],
     );
   }
 }

lib/widgets/common/image_preview.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+import 'package:photo_view/photo_view_gallery.dart';
+
+class ImagePreviewPage extends StatefulWidget {
+  final List<String> images;
+  final int initialIndex;
+
+  const ImagePreviewPage({
+    super.key,
+    required this.images,
+    required this.initialIndex,
+  }) : assert(initialIndex >= 0 && initialIndex < images.length);
+
+  @override
+  State<ImagePreviewPage> createState() => _ImagePreviewPageState();
+}
+
+class _ImagePreviewPageState extends State<ImagePreviewPage> {
+  // 声明 PageController 并初始化初始索引
+  late PageController _pageController;
+  // 记录当前显示的图片索引（用于更新页码）
+  int _currentIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    // 初始化控制器，设置初始页面
+    _pageController = PageController(initialPage: widget.initialIndex);
+    // 初始化当前索引为初始索引
+    _currentIndex = widget.initialIndex;
+
+    // 监听页面切换事件
+    _pageController.addListener(() {
+      // 取当前页面的整数索引（避免滑动过程中的小数）
+      final currentPage = _pageController.page?.round() ?? 0;
+      // 只有当索引变化时才更新状态
+      if (currentPage != _currentIndex) {
+        setState(() {
+          _currentIndex = currentPage;
+        });
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: AppBar(
+        backgroundColor: Colors.black54,
+        elevation: 0,
+        leading: IconButton(
+          icon: const Icon(Icons.close, color: Colors.white),
+          onPressed: () => Navigator.pop(context),
+        ),
+        // 显示实时更新的页码（当前索引+1 / 总数量）
+        title: Text(
+          '${_currentIndex + 1}/${widget.images.length}',
+          style: const TextStyle(color: Colors.white),
+        ),
+        centerTitle: true,
+      ),
+      body: PhotoViewGallery(
+        pageOptions: widget.images.map((url) {
+          return PhotoViewGalleryPageOptions(
+            imageProvider: NetworkImage(url),
+            minScale: PhotoViewComputedScale.contained,
+            maxScale: PhotoViewComputedScale.covered * 2,
+            // 点击空白处关闭预览
+            onTapDown: (context, details, controllerValue) {
+              Navigator.pop(context);
+            },
+          );
+        }).toList(),
+        pageController: _pageController,
+        scrollDirection: Axis.horizontal,
+      ),
+    );
+  }
+}

lib/widgets/common/index.dart

@@ -53,16 +53,10 @@ Text buttonText({required String text}) {
 
 Widget errorImageContainer(double height) {
   return Container(
-    height: height,
+    height: 200,
+    width: double.infinity,
     color: Colors.grey[200],
-    child: Row(
+    child: const Icon(Icons.image, color: Colors.grey, size: 30),
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        const Icon(Icons.error, color: Colors.red),
-        const SizedBox(width: 5),
-        const Text("加载失败", style: TextStyle(color: Colors.red)),
-      ],
-    ),
   );
 }
 

lib/widgets/moment/card.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:food_hub_app/config/app_config.dart';
 import 'package:food_hub_app/models/moment.dart';
+import 'package:food_hub_app/widgets/common/image_preview.dart';
 import 'package:tdesign_flutter/tdesign_flutter.dart';
 
 class MomentCard extends StatelessWidget {
@@ -19,7 +20,7 @@ class MomentCard extends StatelessWidget {
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            _buildAvatar(),
+            _buildAvatar(context),
             const SizedBox(width: 12),
             Expanded(
               child: Column(
@@ -30,7 +31,7 @@ class MomentCard extends StatelessWidget {
                   _buildContent(),
                   if (moment.imageList.isNotEmpty) ...[
                     const SizedBox(height: 8),
-                    _buildPostImages(),
+                    _buildPostImages(context),
                   ],
                   const SizedBox(height: 10),
                   _buildTime(),
@@ -46,29 +47,21 @@ class MomentCard extends StatelessWidget {
   }
 
   // 构建头像组件
-  Widget _buildAvatar() {
+  Widget _buildAvatar(BuildContext context) {
-    return TDAvatar(
+    if (moment.avatar!.isEmpty) {
-      size: TDAvatarSize.medium,
+      return TDAvatar(
-      type: TDAvatarType.normal,
+          size: TDAvatarSize.medium,
-      fit: BoxFit.contain,
+          type: TDAvatarType.customText,
-      avatarUrl: '${AppConfig.baseApiUrl}/${moment.avatar}');
+          shape: TDAvatarShape.circle,
-    // return SizedBox(
+          backgroundColor: Theme.of(context).primaryColor,
-    //   width: 40,
+          text: moment.username?[0]);
-    //   height: 40,
+    } else {
-    //   child: ClipRRect(
+      return TDAvatar(
-    //     borderRadius: BorderRadius.circular(25),
+          size: TDAvatarSize.medium,
-    //     child: Image.network(
+          type: TDAvatarType.normal,
-    //       '${AppConfig.baseApiUrl}/${moment.avatar}',
+          fit: BoxFit.contain,
-    //       fit: BoxFit.contain,
+          avatarUrl: '${AppConfig.baseApiUrl}/${moment.avatar}');
-    //       errorBuilder: (context, error, stackTrace) {
+    }
-    //         return Container(
-    //           color: Colors.grey[200],
-    //           child: const Icon(Icons.person, color: Colors.grey),
-    //         );
-    //       },
-    //     ),
-    //   ),
-    // );
   }
 
   // 构建昵称组件
@@ -78,7 +71,6 @@ class MomentCard extends StatelessWidget {
       style: const TextStyle(
         fontSize: 16,
         fontWeight: FontWeight.w600,
-        color: Colors.black87,
       ),
     );
   }
@@ -87,32 +79,35 @@ class MomentCard extends StatelessWidget {
   Widget _buildContent() {
     return Text(
       moment.content,
-      style: const TextStyle(fontSize: 15, color: Colors.black87, height: 1.3),
+      style: const TextStyle(fontSize: 15, height: 1.3),
     );
   }
 
   // 构建朋友圈图片列表（网格布局）
-  Widget _buildPostImages() {
+  Widget _buildPostImages(BuildContext context) {
-    // 图片数量
     final imageCount = moment.imageList.length;
 
-    // 计算网格布局
+    // 计算网格列数
     int crossAxisCount;
     if (imageCount == 1) {
-      crossAxisCount = 1; // 单张图片
+      crossAxisCount = 1;
     } else if (imageCount == 2 || imageCount == 4) {
-      crossAxisCount = 2; // 2张或4张图片用2列
+      crossAxisCount = 2;
     } else {
-      crossAxisCount = 3; // 其他数量用3列
+      crossAxisCount = 3;
     }
 
-    // 计算图片尺寸
+    // 计算宽高比
-    double itemAspectRatio = 1.0; // 默认正方形
+    double itemAspectRatio = 1.0;
     if (imageCount == 1) {
-      // 单张图片使用宽屏比例
       itemAspectRatio = 1.5;
     }
 
+    // 生成图片URL列表（用于预览时切换）
+    final List<String> imageUrls = moment.imageList
+        .map((path) => '${AppConfig.baseApiUrl}/$path')
+        .toList();
+
     return GridView.count(
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
@@ -121,17 +116,34 @@ class MomentCard extends StatelessWidget {
       mainAxisSpacing: 4,
       childAspectRatio: itemAspectRatio,
       children: List.generate(imageCount, (index) {
-        return ClipRRect(
+        // 单个图片项：添加点击事件
-          borderRadius: BorderRadius.circular(8),
+        return GestureDetector(
-          child: Image.network(
+          // 点击图片时，跳转到预览页面
-            '${AppConfig.baseApiUrl}/${moment.imageList[index]}',
+          onTap: () {
-            fit: BoxFit.cover,
+            // 导航到全屏预览页面，传入所有图片URL和当前点击的索引
-            errorBuilder: (context, error, stackTrace) {
+            Navigator.push(
-              return Container(
+              context,
-                color: Colors.grey[200],
+              MaterialPageRoute(
-                child: const Icon(Icons.image, color: Colors.grey, size: 30),
+                builder: (context) => ImagePreviewPage(
-              );
+                  images: imageUrls,
-            },
+                  initialIndex: index,
+                ),
+              ),
+            );
+          },
+          // 原图片组件
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: Image.network(
+              imageUrls[index],
+              fit: BoxFit.cover,
+              errorBuilder: (context, error, stackTrace) {
+                return Container(
+                  color: Colors.grey[200],
+                  child: const Icon(Icons.image, color: Colors.grey, size: 30),
+                );
+              },
+            ),
           ),
         );
       }),

lib/widgets/recipe/card.dart

@@ -1,3 +1,4 @@
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:food_hub_app/config/app_config.dart';
 

pubspec.lock

@@ -105,6 +105,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "8.10.1"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      sha256: bcc61735345c9ab5cb81073896579e735f81e35fd588907a393143ea986be8ff
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "5.1.1"
   characters:
     dependency: transitive
     description:
@@ -645,6 +653,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "2.3.0"
+  photo_view:
+    dependency: "direct main"
+    description:
+      name: photo_view
+      sha256: "1fc3d970a91295fbd1364296575f854c9863f225505c28c46e0a03e48960c75e"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.15.0"
   platform:
     dependency: transitive
     description:

pubspec.yaml

@@ -47,6 +47,8 @@ dependencies:
   fluttertoast: ^8.2.0
   shared_preferences: ^2.3.0
   logger: ^2.6.0
+  photo_view: ^0.15.0
+  carousel_slider: ^5.1.1
 
 dependency_overrides:
   tdesign_flutter_adaptation: 3.16.0