feat:更新组件UI

This commit is contained in:
2025-11-19 19:53:05 +08:00
parent 8acad9c63a
commit 07180965cc
13 changed files with 360 additions and 237 deletions

View File

@@ -31,25 +31,35 @@ class _HomePage extends State<HomePage> {
},
),
actions: [
IconButton(
icon: Icon(Icons.search, color: Colors.white),
onPressed: () {
// 搜索功能
},
),
Row(
children: [
IconButton(
icon: Icon(Icons.search, color: Colors.white),
onPressed: () {
// 搜索功能
},
),
IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () {
buildBottomSheet(context);
},
)
],
)
],
),
backgroundColor: Color(0xFFF5F5F5),
drawer: SettingsDrawer(),
body: Padding(padding: EdgeInsets.all(4), child: tabPages[_currentIndex]),
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).colorScheme.primary,
onPressed: () => buildBottomSheet(context),
shape: const CircleBorder(),
mini: true,
child: const Icon(Icons.add, color: Colors.white, size: 30),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
// floatingActionButton: FloatingActionButton(
// backgroundColor: Theme.of(context).colorScheme.primary,
// onPressed: () => buildBottomSheet(context),
// shape: const CircleBorder(),
// mini: true,
// child: const Icon(Icons.add, color: Colors.white, size: 30),
// ),
// floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: buildBottomNavBar(
currentIndex: _currentIndex,
onTap: (index) {

View File

@@ -1,9 +1,10 @@
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:food_hub_app/apis/moment.dart';
import 'package:food_hub_app/models/moment.dart';
import 'package:food_hub_app/provider/food_provider.dart';
import 'package:food_hub_app/widgets/common/easy_refresh.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:food_hub_app/widgets/moment/card.dart';
import 'package:provider/provider.dart';
class MomentPage extends StatefulWidget {
const MomentPage({super.key});
@@ -13,26 +14,23 @@ class MomentPage extends StatefulWidget {
}
class _MomentPageState extends State<MomentPage> {
List<Moment> momentList = [];
int _currentPage = 1;
final int _pageSize = 3;
bool _hasMore = true;
// 初始化EasyRefresh控制器
final EasyRefreshController _freshController = EasyRefreshController(
controlFinishRefresh: true,
controlFinishLoad: true,
);
bool _showScrollToTop = false;
final ScrollController _scrollController = ScrollController();
bool _showScrollToTop = false;
@override
void initState() {
super.initState();
// 初始加载数据
_loadData(isRefresh: true);
_scrollController.addListener(_onScroll);
// 初始化加载数据
WidgetsBinding.instance.addPostFrameCallback((_) {
context.read<FoodProvider>().refreshMomentList();
});
}
@override
@@ -43,50 +41,18 @@ class _MomentPageState extends State<MomentPage> {
super.dispose();
}
// 统一的数据加载方法
Future<void> _loadData({required bool isRefresh}) async {
try {
// 如果是刷新,重置页码
if (isRefresh) {
_currentPage = 1;
}
final result = await queryMomentByPageApi(_currentPage, _pageSize);
setState(() {
if (isRefresh) {
// 刷新时直接替换数据
momentList = result.records;
} else {
// 加载更多时追加数据
momentList.addAll(result.records);
}
// 判断是否还有更多数据
_hasMore = result.current < result.pages;
// 如果有更多数据,准备加载下一页
if (_hasMore) {
_currentPage++;
}
});
} catch (e) {
// 处理错误
debugPrint('加载数据失败: $e');
} finally {
_freshController.finishRefresh();
_freshController.resetFooter();
}
}
// 下拉刷新
Future<void> _onRefresh() async {
await _loadData(isRefresh: true);
await context.read<FoodProvider>().refreshMomentList();
_freshController.finishRefresh();
}
// 上拉加载
Future<void> _onLoad() async {
if (_hasMore) {
await _loadData(isRefresh: false);
final provider = context.read<FoodProvider>();
if (provider.hasMore) {
await provider.loadMoreMomentList();
_freshController.finishLoad(IndicatorResult.success);
} else {
_freshController.finishLoad(IndicatorResult.noMore);
@@ -111,78 +77,47 @@ class _MomentPageState extends State<MomentPage> {
}
// 滚动到顶部
void _scrollToTop() {
_scrollController.animateTo(
0,
duration: const Duration(milliseconds: 500), // 滚动动画时长
curve: Curves.easeInOut, // 滚动动画曲线
void _scrollToTop() => scrollToTopAnimateTo(_scrollController);
Widget _buildMomentList(FoodProvider provider) {
return ListView.builder(
controller: _scrollController,
itemCount: provider.momentList.length,
itemBuilder: (context, index) {
return MomentCard(moment: provider.momentList[index]);
},
);
}
@override
Widget build(BuildContext context) {
final provider = context.watch<FoodProvider>();
// 空状态显示
if (momentList.isEmpty) {
return EasyRefresh(
controller: _freshController,
onRefresh: _onRefresh,
child: buildEmptyData(),
);
if (provider.momentList.isEmpty) {
return buildEmptyData();
}
// 有数据时显示列表
return Stack(
children: [
EasyRefresh(
controller: _freshController,
header: ClassicHeader(
dragText: '下拉刷新',
armedText: '释放刷新',
readyText: '准备刷新',
processingText: '刷新中...',
processedText: '刷新完成',
failedText: '刷新失败',
noMoreText: '没有更多数据',
showText: true,
messageText: '更新于 %T',
showMessage: true,
),
footer: ClassicFooter(
dragText: '上拉加载',
armedText: '释放加载',
readyText: '准备加载',
processingText: '加载中...',
processedText: '加载完成',
failedText: '加载失败',
noMoreText: '没有更多数据',
showText: true,
messageText: '更新于 %T',
showMessage: true,
),
buildEasyRefresh(
freshController: _freshController,
onRefresh: _onRefresh,
onLoad: _onLoad,
child: ListView.builder(
controller: _scrollController,
itemCount: momentList.length,
itemBuilder: (context, index) {
return MomentCard(moment: momentList[index]);
},
body: Stack(
children: [
if (provider.isLoading)
buildLoadingIndicator(context)
else
_buildMomentList(provider),
],
),
),
// 返回顶部按钮
if (_showScrollToTop)
Positioned(
right: 0,
bottom: 0,
child: FloatingActionButton(
onPressed: _scrollToTop,
backgroundColor: Theme.of(context).colorScheme.primary,
elevation: 5,
mini: true,
child: const Icon(Icons.arrow_upward, color: Colors.white),
),
),
buildScrollToTop(context: context, scrollToTop: _scrollToTop),
],
);
}

View File

@@ -86,7 +86,8 @@ class _RecordFormPageState extends State<RecordFormPage> {
else
buildImagePreviewItem(
context: context,
imageUrl: provider.recordFormItem.imageUrl,
imageUrls: [provider.recordFormItem.imageUrl],
index: 0,
onRemoveImage: () => _removeImage(provider),
),
],
@@ -110,7 +111,7 @@ class _RecordFormPageState extends State<RecordFormPage> {
return const Iterable<String>.empty();
}
return _foodNameList.where(
(option) => option.toLowerCase().contains(
(option) => option.toLowerCase().contains(
textEditingValue.text.toLowerCase(),
),
);
@@ -123,10 +124,10 @@ class _RecordFormPageState extends State<RecordFormPage> {
},
optionsViewBuilder: (
BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options,
) {
BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options,
) {
Widget buildOptionItem(String option) {
return InkWell(
onTap: () => onSelected(option),
@@ -164,11 +165,11 @@ class _RecordFormPageState extends State<RecordFormPage> {
},
fieldViewBuilder: (
BuildContext context,
TextEditingController controller,
FocusNode focusNode,
VoidCallback onFieldSubmitted,
) {
BuildContext context,
TextEditingController controller,
FocusNode focusNode,
VoidCallback onFieldSubmitted,
) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (provider.recordFormItem.name.isNotEmpty &&
controller.text.isEmpty) {
@@ -184,11 +185,13 @@ class _RecordFormPageState extends State<RecordFormPage> {
}
Widget? buildSuffixIcon() {
return controller.text.isNotEmpty
final isShow = controller.text.isNotEmpty && !provider.isEditing;
return isShow
? IconButton(
icon: Icon(Icons.clear, size: 18),
onPressed: onClearRecipeName,
)
icon: Icon(Icons.clear, size: 18),
onPressed: onClearRecipeName,
)
: null;
}