Cxx0822/food_hub_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:重构UI模块

Browse Source
This commit is contained in:
Cxx0822
2025-11-18 11:01:53 +08:00
parent 6bba9a488c
commit 21ff0ad94f
20 changed files with 501 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
lib/widgets/recipe/calendar.dart
View File

@@ -5,7 +5,6 @@ import 'package:food_hub_app/utils/date_util.dart';
import 'package:food_hub_app/utils/index.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
class RecipeCalendar extends StatefulWidget {
const RecipeCalendar({super.key});
@@ -90,49 +89,50 @@ class _RecipeCalendarState extends State<RecipeCalendar> {
);
}
Widget dailyItem() {
return Card(
elevation: 0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(formatDateTime(_selectedDay, 'MM月dd日 EEEE')),
if (selectRecordList.isEmpty)
TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据')
else
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: selectRecordList.length,
itemBuilder: (context, index) {
return recipeRecordItem(selectRecordList[index]);
},
),
],
),
),
Widget dailyItem(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(formatDateTime(_selectedDay, 'MM月dd日 EEEE')),
if (selectRecordList.isEmpty)
buildEmptyData()
else
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: selectRecordList.length,
itemBuilder: (context, index) {
return recipeRecordItem(context, selectRecordList[index]);
},
),
],
);
}
Widget recipeRecordItem(Record record) {
Widget recipeRecordItem(BuildContext context, Record record) {
final colors = Theme.of(context).colorScheme;
return Card(
elevation: 0,
color: Color(0xFFF5F5DC),
color: colors.inversePrimary,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
children: [
TDAvatar(
size: TDAvatarSize.medium,
type: TDAvatarType.customText,
text: record.category[0],
CircleAvatar(
radius: 24,
backgroundColor: colors.primary,
child: Text(
record.category[0],
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(width: 10),
Expanded(
// 使用Expanded让文本区域占据剩余空间
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
@@ -149,7 +149,7 @@ class _RecipeCalendarState extends State<RecipeCalendar> {
circleIconButton(
context: context,
icon: Icons.chevron_right,
onPressed: () => {}
onPressed: () => {},
),
],
),
@@ -205,8 +205,8 @@ class _RecipeCalendarState extends State<RecipeCalendar> {
Widget build(BuildContext context) {
return Column(
children: [
Card(elevation: 0, color: Colors.white, child: recipeCalendar()),
Expanded(child: dailyItem()),
buildCard(context: context, child: recipeCalendar()),
Expanded(child: buildCard(context: context, child: dailyItem(context))),
],
);
}

221
lib/widgets/recipe/card.dart
View File

@@ -1,5 +1,4 @@
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';
@@ -18,150 +17,106 @@ class RecipeCard extends StatelessWidget {
.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 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: () => {},
),
SizedBox(width: 8),
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: Color(0xFF6A5ACD),
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.thumb_up_alt_outlined,
text: recipe.likeCount.toString(),
color: Color(0xFFDC143C),
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.star_outline,
text: recipe.favouriteCount.toString(),
color: Color(0xFF20B2AA),
),
const SizedBox(width: 12),
_buildIconText(
icon: Icons.comment_outlined,
text: recipe.commentCount.toString(),
color: Color(0xFFDAC570),
),
],
),
Row(
children: [
_buildIconText(
icon: Icons.date_range,
text: recipe.recordList[0].date,
color: Color(0xFF32CD32),
),
],
),
],
),
],
);
}
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,
return buildCard(
context: context,
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),
AspectRatio(
aspectRatio: 1.5,
child: buildNetworkImage(imageUrls.first),
),
SizedBox(height: 8),
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,

11
lib/widgets/recipe/list.dart
View File

@@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
import 'package:food_hub_app/apis/recipe.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:food_hub_app/widgets/recipe/card.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
class RecipeList extends StatefulWidget {
const RecipeList({super.key});
@@ -31,13 +31,16 @@ class _RecipeListState extends State<RecipeList> {
@override
Widget build(BuildContext context) {
if (recipeSummaryList.isEmpty) {
return const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据');
return buildEmptyData();
} else {
return ListView.builder(
return ListView.separated(
itemCount: recipeSummaryList.length,
itemBuilder: (context, index) {
return RecipeCard(recipe: recipeSummaryList[index]);
}
},
separatorBuilder: (context, index) {
return SizedBox(height: 10);
},
);
}
}

141
lib/widgets/recipe/timeline.dart
View File

@@ -3,6 +3,7 @@ import 'package:food_hub_app/apis/recipe.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';
import 'package:food_hub_app/widgets/common/year_selector.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:timelines_plus/timelines_plus.dart';
@@ -30,55 +31,7 @@ class _RecipeTimeline extends State<RecipeTimeline> {
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
YearSelector(
initialYear: DateTime.now().year,
minYear: 2000,
maxYear: 2100,
onYearChanged: (year) => refreshRecord(year),
),
Expanded(child: timelineContainer(recordList)),
],
);
}
}
Widget timelineContainer(List<Record> recordList) {
if (recordList.isEmpty) {
return const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据');
} else {
return Timeline.tileBuilder(
theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
builder: TimelineTileBuilder.connected(
itemCount: recordList.length,
connectorBuilder:
(context, index, type) => Connector.solidLine(
thickness: 2,
color: Theme.of(context).primaryColor,
),
indicatorBuilder: (context, index) {
return Indicator.dot(
size: 12.0,
color: Theme.of(context).primaryColor,
);
},
contentsBuilder: (context, index) {
return TimelineCard(record: recordList[index]);
},
),
);
}
}
class TimelineCard extends StatelessWidget {
final Record record;
const TimelineCard({super.key, required this.record});
Widget cardContent(BuildContext context) {
Widget buildTimelineCard(BuildContext context, Record record) {
final imageUrls = ['${AppConfig.baseApiUrl}/${record.imageUrl}'];
void imageTapClick() {
@@ -91,45 +44,73 @@ class TimelineCard extends StatelessWidget {
);
}
return Card(
elevation: 0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
Text(record.name, style: TextStyle(fontSize: 16)),
const SizedBox(height: 5),
GestureDetector(
onTap: () => imageTapClick(),
child: AspectRatio(
aspectRatio: 1.5,
child: networkImage(imageUrls[0]),
return buildCard(
context: context,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
record.date,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
Column(
children: [
Text(record.name, style: TextStyle(fontSize: 16)),
const SizedBox(height: 5),
GestureDetector(
onTap: () => imageTapClick(),
child: AspectRatio(
aspectRatio: 1.5,
child: buildNetworkImage(imageUrls.first),
),
),
),
],
),
],
),
],
),
);
}
Widget buildTimeline(BuildContext context, List<Record> recordList) {
if (recordList.isEmpty) {
return buildEmptyData();
} else {
return Timeline.tileBuilder(
theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
builder: TimelineTileBuilder.connected(
itemCount: recordList.length,
connectorBuilder:
(context, index, type) => Connector.solidLine(
thickness: 2,
color: Theme.of(context).colorScheme.primary,
),
indicatorBuilder: (context, index) {
return Indicator.dot(
size: 12.0,
color: Theme.of(context).colorScheme.primary,
);
},
contentsBuilder: (context, index) {
return buildTimelineCard(context, recordList[index]);
},
),
);
}
}
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 10, bottom: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
record.date,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
cardContent(context),
],
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
YearSelector(
initialYear: DateTime.now().year,
minYear: 2000,
maxYear: 2100,
onYearChanged: (year) => refreshRecord(year),
),
),
Expanded(child: buildTimeline(context, recordList)),
],
);
}
}