feat:更新朋友圈模块
This commit is contained in:
@@ -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() {
|
||||
return TDAvatar(
|
||||
size: TDAvatarSize.medium,
|
||||
type: TDAvatarType.normal,
|
||||
fit: BoxFit.contain,
|
||||
avatarUrl: '${AppConfig.baseApiUrl}/${moment.avatar}');
|
||||
// return SizedBox(
|
||||
// width: 40,
|
||||
// height: 40,
|
||||
// child: ClipRRect(
|
||||
// borderRadius: BorderRadius.circular(25),
|
||||
// child: Image.network(
|
||||
// '${AppConfig.baseApiUrl}/${moment.avatar}',
|
||||
// fit: BoxFit.contain,
|
||||
// errorBuilder: (context, error, stackTrace) {
|
||||
// return Container(
|
||||
// color: Colors.grey[200],
|
||||
// child: const Icon(Icons.person, color: Colors.grey),
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
Widget _buildAvatar(BuildContext context) {
|
||||
if (moment.avatar!.isEmpty) {
|
||||
return TDAvatar(
|
||||
size: TDAvatarSize.medium,
|
||||
type: TDAvatarType.customText,
|
||||
shape: TDAvatarShape.circle,
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
text: moment.username?[0]);
|
||||
} else {
|
||||
return TDAvatar(
|
||||
size: TDAvatarSize.medium,
|
||||
type: TDAvatarType.normal,
|
||||
fit: BoxFit.contain,
|
||||
avatarUrl: '${AppConfig.baseApiUrl}/${moment.avatar}');
|
||||
}
|
||||
}
|
||||
|
||||
// 构建昵称组件
|
||||
@@ -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),
|
||||
child: Image.network(
|
||||
'${AppConfig.baseApiUrl}/${moment.imageList[index]}',
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
color: Colors.grey[200],
|
||||
child: const Icon(Icons.image, color: Colors.grey, size: 30),
|
||||
);
|
||||
},
|
||||
// 单个图片项：添加点击事件
|
||||
return GestureDetector(
|
||||
// 点击图片时，跳转到预览页面
|
||||
onTap: () {
|
||||
// 导航到全屏预览页面，传入所有图片URL和当前点击的索引
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
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),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user