factor:布局颜色重构
This commit is contained in:
58
lib/layout/app_body.dart
Normal file
58
lib/layout/app_body.dart
Normal file
@@ -0,0 +1,58 @@
|
||||
import 'package:flisp_app/pages/calendar_page.dart';
|
||||
import 'package:flisp_app/pages/flisp_page.dart';
|
||||
import 'package:flisp_app/pages/stats_page.dart';
|
||||
import 'package:flisp_app/pages/todo_page.dart';
|
||||
import 'package:flisp_app/provider/app_provider.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class AppBody extends StatefulWidget {
|
||||
const AppBody({super.key});
|
||||
|
||||
@override
|
||||
State<AppBody> createState() => AppBodyState();
|
||||
}
|
||||
|
||||
class AppBodyState extends State<AppBody> {
|
||||
final GlobalKey<FlispPageState> _flispPageKey = GlobalKey();
|
||||
final GlobalKey<TodoPageState> _todoPageKey = GlobalKey();
|
||||
final GlobalKey<CalendarPageState> _calendarPageKey = GlobalKey();
|
||||
|
||||
Widget _buildPage(int index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return FlispPage(key: _flispPageKey);
|
||||
case 1:
|
||||
return TodoPage(key: _todoPageKey);
|
||||
case 2:
|
||||
return CalendarPage(key: _calendarPageKey);
|
||||
case 3:
|
||||
return StatsPage();
|
||||
default:
|
||||
return FlispPage(key: _flispPageKey);
|
||||
}
|
||||
}
|
||||
|
||||
void showPageAddDialog(int index) {
|
||||
if (index == 0) {
|
||||
if (_flispPageKey.currentState != null) {
|
||||
_flispPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
} else if (index == 1) {
|
||||
if (_todoPageKey.currentState != null) {
|
||||
_todoPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
} else if (index == 2) {
|
||||
if (_calendarPageKey.currentState != null) {
|
||||
_calendarPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final appProvider = context.watch<AppProvider>();
|
||||
|
||||
return _buildPage(appProvider.currentTab);
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,7 @@ import 'package:provider/provider.dart';
|
||||
class AppDrawer extends StatelessWidget {
|
||||
const AppDrawer({super.key});
|
||||
|
||||
DrawerHeader buildDrawerHeader(BuildContext context) {
|
||||
DrawerHeader _buildDrawerHeader(BuildContext context) {
|
||||
return DrawerHeader(
|
||||
decoration: BoxDecoration(color: Theme.of(context).colorScheme.primary),
|
||||
child: Column(
|
||||
@@ -86,7 +86,7 @@ class AppDrawer extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildVersionInfo({
|
||||
Widget _buildVersionInfo({
|
||||
required BuildContext context,
|
||||
required String fullVersion,
|
||||
}) {
|
||||
@@ -109,18 +109,16 @@ class AppDrawer extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final appProvider = Provider.of<AppProvider>(context);
|
||||
final appProvider = context.watch<AppProvider>();
|
||||
|
||||
return Drawer(
|
||||
child: Column(
|
||||
children: [
|
||||
// 主要内容区域，可以滚动
|
||||
Expanded(
|
||||
child: ListView(
|
||||
padding: EdgeInsets.zero,
|
||||
children: [
|
||||
// 抽屉头部
|
||||
buildDrawerHeader(context),
|
||||
_buildDrawerHeader(context),
|
||||
_buildThemeSection(context, appProvider),
|
||||
const Divider(),
|
||||
_buildDrawerItem(
|
||||
@@ -135,15 +133,10 @@ class AppDrawer extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
Consumer<AppProvider>(
|
||||
builder: (context, appProvider, child) {
|
||||
return buildVersionInfo(
|
||||
context: context,
|
||||
fullVersion: appProvider.fullVersion,
|
||||
);
|
||||
},
|
||||
),
|
||||
_buildVersionInfo(
|
||||
context: context,
|
||||
fullVersion: appProvider.fullVersion,
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
26
lib/layout/app_floating_button.dart
Normal file
26
lib/layout/app_floating_button.dart
Normal file
@@ -0,0 +1,26 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppFloatingButton extends StatelessWidget {
|
||||
final VoidCallback onPressed;
|
||||
|
||||
const AppFloatingButton({super.key, required this.onPressed});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FloatingActionButton(
|
||||
onPressed: onPressed,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
shape: CircleBorder(),
|
||||
child: Container(
|
||||
width: 50,
|
||||
height: 50,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
child: Icon(Icons.add, color: Colors.white, size: 36),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
43
lib/layout/app_navbar.dart
Normal file
43
lib/layout/app_navbar.dart
Normal file
@@ -0,0 +1,43 @@
|
||||
import 'package:flisp_app/provider/app_provider.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class AppNavbar extends StatelessWidget {
|
||||
AppNavbar({super.key});
|
||||
|
||||
final List<BottomNavigationBarItem> navItems = [
|
||||
BottomNavigationBarItem(icon: Icon(Icons.flash_on), label: '闪灵'),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.checklist), label: '待办'),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.calendar_month), label: '日程'),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.insert_chart), label: '统计'),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final appProvider = context.watch<AppProvider>();
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: colors.shadow.withAlpha(20),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, -2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: BottomNavigationBar(
|
||||
currentIndex: appProvider.currentTab,
|
||||
onTap: (index) => appProvider.changeTab(index),
|
||||
type: BottomNavigationBarType.fixed,
|
||||
backgroundColor: colors.surface,
|
||||
selectedItemColor: colors.primary,
|
||||
unselectedItemColor: colors.onSurface.withAlpha(120),
|
||||
showSelectedLabels: true,
|
||||
showUnselectedLabels: true,
|
||||
items: navItems,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import 'package:flisp_app/layout/app_body.dart';
|
||||
import 'package:flisp_app/layout/app_drawer.dart';
|
||||
import 'package:flisp_app/pages/calendar_page.dart';
|
||||
import 'package:flisp_app/pages/flisp_page.dart';
|
||||
import 'package:flisp_app/pages/stats_page.dart';
|
||||
import 'package:flisp_app/pages/todo_page.dart';
|
||||
import 'package:flisp_app/layout/app_floating_button.dart';
|
||||
import 'package:flisp_app/layout/app_navbar.dart';
|
||||
import 'package:flisp_app/provider/app_provider.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
@@ -15,119 +14,35 @@ class MainScreen extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _MainScreenState extends State<MainScreen> {
|
||||
final GlobalKey<FlispPageState> _flispPageKey = GlobalKey();
|
||||
final GlobalKey<TodoPageState> _todoPageKey = GlobalKey();
|
||||
final GlobalKey<CalendarPageState> _calendarPageKey = GlobalKey();
|
||||
final GlobalKey<AppBodyState> _appBodyKey = GlobalKey();
|
||||
|
||||
List<BottomNavigationBarItem> navItems = [
|
||||
BottomNavigationBarItem(icon: Icon(Icons.flash_on), label: '闪灵'),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.checklist), label: '待办'),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(Icons.calendar_month_rounded),
|
||||
label: '日程',
|
||||
),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.insert_chart), label: '统计'),
|
||||
];
|
||||
void _onPressedFloatingButton(int index) {
|
||||
_appBodyKey.currentState?.showPageAddDialog(index);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Consumer<AppProvider>(
|
||||
builder: (context, appProvider, child) {
|
||||
return Scaffold(
|
||||
drawer: const AppDrawer(),
|
||||
appBar: AppBar(
|
||||
title: Text(_getAppBarTitle(appProvider.currentTab)),
|
||||
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||
foregroundColor: Theme.of(context).colorScheme.onPrimary,
|
||||
elevation: 0,
|
||||
),
|
||||
body: _buildPage(appProvider.currentTab),
|
||||
bottomNavigationBar: Container(
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Theme.of(context).colorScheme.shadow.withAlpha(20),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, -2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: BottomNavigationBar(
|
||||
currentIndex: appProvider.currentTab,
|
||||
onTap: (index) => appProvider.changeTab(index),
|
||||
type: BottomNavigationBarType.fixed,
|
||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
||||
selectedItemColor: Theme.of(context).colorScheme.primary,
|
||||
unselectedItemColor: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurface.withAlpha(120),
|
||||
showSelectedLabels: true,
|
||||
showUnselectedLabels: true,
|
||||
items: navItems,
|
||||
),
|
||||
),
|
||||
floatingActionButton: _buildFloatingButton(
|
||||
context,
|
||||
appProvider.currentTab,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
final provider = context.watch<AppProvider>();
|
||||
|
||||
void _onPressFloatingButton(int index) {
|
||||
if (index == 0) {
|
||||
if (_flispPageKey.currentState != null) {
|
||||
_flispPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
} else if (index == 1) {
|
||||
if (_todoPageKey.currentState != null) {
|
||||
_todoPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
} else if (index == 2) {
|
||||
if (_calendarPageKey.currentState != null) {
|
||||
_calendarPageKey.currentState!.showAddDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Widget? _buildFloatingButton(BuildContext context, int index) {
|
||||
if (index == 3) return null;
|
||||
|
||||
return FloatingActionButton(
|
||||
onPressed: () => _onPressFloatingButton(index),
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
shape: CircleBorder(),
|
||||
child: Container(
|
||||
width: 50,
|
||||
height: 50,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
child: Icon(Icons.add, color: Colors.white, size: 36),
|
||||
return Scaffold(
|
||||
drawer: const AppDrawer(),
|
||||
appBar: AppBar(
|
||||
title: Text(provider.currentAppBarTitle),
|
||||
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||
foregroundColor: Theme.of(context).colorScheme.onPrimary,
|
||||
elevation: 0,
|
||||
),
|
||||
body: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: AppBody(key: _appBodyKey),
|
||||
),
|
||||
bottomNavigationBar: AppNavbar(),
|
||||
floatingActionButton:
|
||||
provider.currentTab == 3
|
||||
? null
|
||||
: AppFloatingButton(
|
||||
onPressed: () => _onPressedFloatingButton(provider.currentTab),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPage(int index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return FlispPage(key: _flispPageKey);
|
||||
case 1:
|
||||
return TodoPage(key: _todoPageKey);
|
||||
case 2:
|
||||
return CalendarPage(key: _calendarPageKey);
|
||||
case 3:
|
||||
return StatsPage();
|
||||
default:
|
||||
return FlispPage(key: _flispPageKey);
|
||||
}
|
||||
}
|
||||
|
||||
String _getAppBarTitle(int index) {
|
||||
final titles = {0: '闪灵', 1: '待办', 2: '日程', 3: '统计'};
|
||||
return titles[index] ?? '闪灵';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user