Files
food_hub_app/lib/widgets/recipe/card.dart

183 lines
5.3 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_carousel_widget/flutter_carousel_widget.dart';
import 'package:food_hub_app/config/app_config.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/widgets/common/image.dart';
import 'package:food_hub_app/widgets/common/index.dart';
class RecipeCard extends StatelessWidget {
final RecipeSummary recipe;
const RecipeCard({super.key, required this.recipe});
@override
Widget build(BuildContext context) {
final List<String> imageUrls =
recipe.recordList
.map((item) => '${AppConfig.baseApiUrl}/${item.imageUrl}')
.toList();
Widget buildCarouselItem(String url) {
return Builder(
builder: (BuildContext context) {
return AspectRatio(
aspectRatio: 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: networkImage(url),
),
);
},
);
}
Widget buildRecipeCarousel() {
return FlutterCarousel(
// 轮播项
items:
imageUrls.map((url) {
return buildCarouselItem(url);
}).toList(),
// 轮播配置
options: FlutterCarouselOptions(
height: 300,
autoPlay: imageUrls.length > 1,
enableInfiniteScroll: imageUrls.length > 1,
autoPlayInterval: const Duration(seconds: 3),
viewportFraction: 0.9,
showIndicator: true,
),
);
}
return Card(
shape: RoundedRectangleBorder(
side: BorderSide(color: Theme.of(context).primaryColor, width: 1.0),
borderRadius: BorderRadius.circular(10.0),
),
elevation: 0,
color: Colors.white,
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildRecipeCarousel(),
Divider(
height: 1,
thickness: 1,
color: Theme.of(context).primaryColor,
indent: 0,
endIndent: 0,
),
Padding(
padding: const EdgeInsets.all(10),
child: _buildRecipeContent(context),
),
],
),
);
}
Widget _buildRecipeContent(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
recipe.name,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
maxLines: 1, // 限制单行,避免挤压按钮
overflow: TextOverflow.ellipsis,
),
),
Row(
children: [
circleIconButton(
context: context,
icon: Icons.edit,
onPressed: () => {},
),
circleIconButton(
context: context,
icon: Icons.book,
onPressed:
() => Navigator.pushNamed(
context,
'/recipeDetail',
arguments: {'id': recipe.id},
),
),
],
),
],
),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
_buildIconText(
icon: Icons.food_bank,
text: recipe.category,
color: Theme.of(context).primaryColor,
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.thumb_up_alt_outlined,
text: recipe.likeCount.toString(),
color: Colors.red,
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.star_outline,
text: recipe.favouriteCount.toString(),
color: Colors.blue,
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.comment_outlined,
text: recipe.commentCount.toString(),
color: Colors.deepOrange,
),
],
),
Row(
children: [
_buildIconText(
icon: Icons.date_range,
text: recipe.recordList[0].date,
color: Colors.red,
),
],
),
],
),
],
);
}
// 通用图标文本组件
Widget _buildIconText({
required IconData icon,
required String text,
Color color = Colors.grey, // 默认灰色
double iconSize = 16,
double textSize = 16,
double spacing = 2, // 图标与文本间距
}) {
return Row(
children: [
Icon(icon, size: iconSize, color: color),
SizedBox(width: spacing),
Text(text, style: TextStyle(fontSize: textSize, color: color)),
],
);
}
}