feat:增加回到顶部功能
This commit is contained in:
@@ -40,22 +40,21 @@ class _HomePage extends State<HomePage> {
|
||||
icon: Icons.account_circle_outlined,
|
||||
activeIcon: Icons.account_circle,
|
||||
page: ProfilePage(),
|
||||
)
|
||||
),
|
||||
];
|
||||
|
||||
List<BottomNavigationBarItem> get bottomNavItems =>
|
||||
navItems.map((item) => BottomNavigationBarItem(
|
||||
icon: Icon(item.icon),
|
||||
activeIcon: Icon(item.activeIcon),
|
||||
label: item.label,
|
||||
)).toList();
|
||||
navItems
|
||||
.map(
|
||||
(item) => BottomNavigationBarItem(
|
||||
icon: Icon(item.icon),
|
||||
activeIcon: Icon(item.activeIcon),
|
||||
label: item.label,
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
List<Widget> get tabPages =>
|
||||
navItems.map((item) => item.page).toList();
|
||||
|
||||
bool isShow(int index) {
|
||||
return index == 0 || index == 2;
|
||||
}
|
||||
List<Widget> get tabPages => navItems.map((item) => item.page).toList();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -64,19 +63,20 @@ class _HomePage extends State<HomePage> {
|
||||
centerTitle: true,
|
||||
title: Text('Food Hub', style: TextStyle(color: Colors.white)),
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
leading: IconButton(
|
||||
icon: Icon(Icons.menu, color: Colors.white),
|
||||
onPressed: () {
|
||||
// 打开侧边栏或菜单
|
||||
leading: Builder(
|
||||
builder: (context) {
|
||||
return IconButton(
|
||||
icon: const Icon(Icons.menu),
|
||||
color: Colors.white,
|
||||
onPressed: () => Scaffold.of(context).openDrawer(),
|
||||
);
|
||||
},
|
||||
),
|
||||
actions: homeActions(),
|
||||
actions: homeActions(context),
|
||||
),
|
||||
backgroundColor: Color(0xFFF5F5F5),
|
||||
endDrawer: const SettingsDrawer(),
|
||||
drawer: const SettingsDrawer(),
|
||||
body: tabPages[_currentIndex],
|
||||
floatingActionButton:
|
||||
isShow(_currentIndex) ? addItemButton(context) : null,
|
||||
bottomNavigationBar: NavBar(
|
||||
navItems: bottomNavItems,
|
||||
currentIndex: _currentIndex,
|
||||
@@ -89,17 +89,3 @@ class _HomePage extends State<HomePage> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget addItemButton(BuildContext context) {
|
||||
void onAddItemClick(BuildContext context) {
|
||||
Navigator.pushNamed(context, '/recordForm');
|
||||
}
|
||||
|
||||
return FloatingActionButton(
|
||||
mini: true,
|
||||
onPressed: () => onAddItemClick(context),
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
shape: const CircleBorder(),
|
||||
child: Icon(Icons.add, color: Colors.white),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import 'package:easy_refresh/easy_refresh.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/api/moment.dart';
|
||||
import 'package:food_hub_app/models/moment.dart';
|
||||
@@ -8,40 +9,188 @@ class MomentPage extends StatefulWidget {
|
||||
const MomentPage({super.key});
|
||||
|
||||
@override
|
||||
State<MomentPage> createState() => _MomentPage();
|
||||
State<MomentPage> createState() => _MomentPageState();
|
||||
}
|
||||
|
||||
class _MomentPage extends State<MomentPage> {
|
||||
class _MomentPageState extends State<MomentPage> {
|
||||
List<Moment> momentList = [];
|
||||
|
||||
// 分页相关变量
|
||||
int _page = 1;
|
||||
final int _pageSize = 3;
|
||||
bool _hasMore = true;
|
||||
// 初始化EasyRefresh控制器
|
||||
final EasyRefreshController _freshController = EasyRefreshController(
|
||||
controlFinishRefresh: true,
|
||||
controlFinishLoad: true,
|
||||
);
|
||||
|
||||
bool _showScrollToTop = false;
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
refreshRecipeList();
|
||||
// 初始加载数据
|
||||
_loadData(isRefresh: true);
|
||||
_scrollController.addListener(_onScroll);
|
||||
}
|
||||
|
||||
Future<void> refreshRecipeList() async {
|
||||
final result = await queryMomentListApi();
|
||||
@override
|
||||
void dispose() {
|
||||
_scrollController.removeListener(_onScroll);
|
||||
_freshController.dispose();
|
||||
_scrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
setState(() {
|
||||
momentList = result;
|
||||
});
|
||||
// 统一的数据加载方法
|
||||
Future<void> _loadData({required bool isRefresh}) async {
|
||||
try {
|
||||
// 如果是刷新，重置页码
|
||||
if (isRefresh) {
|
||||
_page = 1;
|
||||
}
|
||||
|
||||
// 调用API获取数据，传入页码和页大小
|
||||
final result = await queryMomentByPageApi(_page, _pageSize);
|
||||
|
||||
setState(() {
|
||||
if (isRefresh) {
|
||||
// 刷新时直接替换数据
|
||||
momentList = result.records;
|
||||
} else {
|
||||
// 加载更多时追加数据
|
||||
momentList.addAll(result.records);
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
_hasMore = result.current < result.pages;
|
||||
// 如果有更多数据，准备加载下一页
|
||||
if (_hasMore) {
|
||||
_page++;
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// 处理错误
|
||||
debugPrint('加载数据失败: $e');
|
||||
} finally {
|
||||
_freshController.finishRefresh();
|
||||
_freshController.resetFooter();
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
Future<void> _onRefresh() async {
|
||||
await _loadData(isRefresh: true);
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
Future<void> _onLoad() async {
|
||||
if (_hasMore) {
|
||||
await _loadData(isRefresh: false);
|
||||
_freshController.finishLoad(IndicatorResult.success);
|
||||
} else {
|
||||
_freshController.finishLoad(IndicatorResult.noMore);
|
||||
}
|
||||
}
|
||||
|
||||
void _onScroll() {
|
||||
// 当滚动距离超过300时显示返回顶部按钮
|
||||
if (_scrollController.offset > 300) {
|
||||
if (!_showScrollToTop) {
|
||||
setState(() {
|
||||
_showScrollToTop = true;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (_showScrollToTop) {
|
||||
setState(() {
|
||||
_showScrollToTop = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到顶部
|
||||
void _scrollToTop() {
|
||||
_scrollController.animateTo(
|
||||
0,
|
||||
duration: const Duration(milliseconds: 500), // 滚动动画时长
|
||||
curve: Curves.easeInOut, // 滚动动画曲线
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 空状态显示
|
||||
if (momentList.isEmpty) {
|
||||
return const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据');
|
||||
} else {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: ListView.builder(
|
||||
itemCount: momentList.length,
|
||||
itemBuilder: (context, index) {
|
||||
return MomentCard(moment: momentList[index]);
|
||||
},
|
||||
),
|
||||
return EasyRefresh(
|
||||
controller: _freshController,
|
||||
onRefresh: _onRefresh,
|
||||
child: const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据'),
|
||||
);
|
||||
}
|
||||
|
||||
// 有数据时显示列表
|
||||
return Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(5),
|
||||
child: 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,
|
||||
),
|
||||
onRefresh: _onRefresh,
|
||||
onLoad: _onLoad,
|
||||
child: ListView.builder(
|
||||
controller: _scrollController,
|
||||
itemCount: momentList.length,
|
||||
itemBuilder: (context, index) {
|
||||
return MomentCard(moment: momentList[index]);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 返回顶部按钮
|
||||
if (_showScrollToTop)
|
||||
Positioned(
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
child: FloatingActionButton(
|
||||
onPressed: _scrollToTop,
|
||||
backgroundColor: Colors.white,
|
||||
elevation: 5,
|
||||
mini: true,
|
||||
child: const Icon(
|
||||
Icons.arrow_upward
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user