feat:更新组件UI
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user