Improve ui

This commit is contained in:
2025-01-23 18:21:42 +08:00
parent e555779419
commit 5184130ff8
8 changed files with 75 additions and 52 deletions

View File

@@ -1,12 +1,14 @@
part of 'components.dart';
class Appbar extends StatefulWidget implements PreferredSizeWidget {
const Appbar(
{required this.title,
const Appbar({
required this.title,
this.leading,
this.actions,
this.backgroundColor,
super.key});
this.style = AppbarStyle.blur,
super.key,
});
final Widget title;
@@ -16,6 +18,8 @@ class Appbar extends StatefulWidget implements PreferredSizeWidget {
final Color? backgroundColor;
final AppbarStyle style;
@override
State<Appbar> createState() => _AppbarState();
@@ -108,12 +112,20 @@ class _AppbarState extends State<Appbar> {
],
).paddingTop(context.padding.top),
);
if (widget.style == AppbarStyle.shadow) {
return Material(
color: context.colorScheme.surface,
elevation: _scrolledUnder ? 2 : 0,
child: content,
);
} else {
return BlurEffect(
blur: _scrolledUnder ? 15 : 0,
child: content,
);
}
}
}
enum AppbarStyle {
blur,
@@ -256,18 +268,18 @@ class _MySliverAppBarDelegate extends SliverPersistentHeaderDelegate {
}
}
class FilledTabBar extends StatefulWidget {
const FilledTabBar({super.key, this.controller, required this.tabs});
class AppTabBar extends StatefulWidget {
const AppTabBar({super.key, this.controller, required this.tabs});
final TabController? controller;
final List<Tab> tabs;
@override
State<FilledTabBar> createState() => _FilledTabBarState();
State<AppTabBar> createState() => _AppTabBarState();
}
class _FilledTabBarState extends State<FilledTabBar> {
class _AppTabBarState extends State<AppTabBar> {
late TabController _controller;
late List<GlobalKey> keys;
@@ -315,7 +327,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
}
@override
void didUpdateWidget(covariant FilledTabBar oldWidget) {
void didUpdateWidget(covariant AppTabBar oldWidget) {
if (widget.controller != oldWidget.controller) {
_controller = widget.controller ?? DefaultTabController.of(context);
_controller.animation!.addListener(onTabChanged);
@@ -544,7 +556,7 @@ class _IndicatorPainter extends CustomPainter {
var rect = Rect.fromLTWH(
tabLeft + padding.left + horizontalPadding,
_FilledTabBarState._kTabHeight - 3.6,
_AppTabBarState._kTabHeight - 3.6,
tabRight - tabLeft - padding.horizontal - horizontalPadding * 2,
3,
);

View File

@@ -58,26 +58,12 @@ class _AnimatedTapRegionState extends State<AnimatedTapRegion> {
},
child: GestureDetector(
onTap: widget.onTap,
child: AnimatedContainer(
child: AnimatedPhysicalModel(
duration: _fastAnimationDuration,
decoration: BoxDecoration(
elevation: isHovered ? 3 : 1,
color: context.colorScheme.surface,
shadowColor: context.colorScheme.shadow,
borderRadius: BorderRadius.circular(widget.borderRadius),
boxShadow: isHovered
? [
BoxShadow(
color: context.colorScheme.outline,
blurRadius: 2,
offset: const Offset(0, 2),
),
]
: [
BoxShadow(
color: context.colorScheme.outlineVariant,
blurRadius: 1,
offset: const Offset(0, 1),
),
],
),
child: widget.child,
),
),

View File

@@ -52,7 +52,7 @@ class CategoriesPage extends StatelessWidget {
key: Key(categories.toString()),
child: Column(
children: [
FilledTabBar(
AppTabBar(
key: PageStorageKey(categories.toString()),
tabs: categories.map((e) {
String title = e;

View File

@@ -2000,6 +2000,7 @@ class _ComicPageLoadingPlaceHolder extends StatelessWidget {
}
return Shimmer(
color: context.isDarkMode ? Colors.grey.shade700 : Colors.white,
child: Column(
children: [
Appbar(title: Text(""), backgroundColor: context.colorScheme.surface),

View File

@@ -73,6 +73,7 @@ class _CommentsPageState extends State<CommentsPage> {
resizeToAvoidBottomInset: false,
appBar: Appbar(
title: Text("Comments".tl),
style: AppbarStyle.shadow,
),
body: buildBody(context),
);

View File

@@ -137,7 +137,7 @@ class _ExplorePageState extends State<ExplorePage>
}
Widget tabBar = Material(
child: FilledTabBar(
child: AppTabBar(
key: PageStorageKey(pages.toString()),
tabs: pages.map((e) => buildTab(e)).toList(),
controller: controller,

View File

@@ -391,7 +391,7 @@ class _ImageFavoritesDialogState extends State<_ImageFavoritesDialog> {
Widget build(BuildContext context) {
Widget tabBar = Material(
borderRadius: BorderRadius.circular(8),
child: FilledTabBar(
child: AppTabBar(
key: PageStorageKey(optionTypes),
tabs: optionTypes.map((e) => Tab(text: e.tl, key: Key(e))).toList(),
),

View File

@@ -170,7 +170,39 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
),
),
),
Expanded(child: buildRight())
Expanded(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
transitionBuilder: (child, animation) {
return LayoutBuilder(
builder: (context, constrains) {
return AnimatedBuilder(
animation: animation,
builder: (context, _) {
var width = constrains.maxWidth;
var value = animation.isForwardOrCompleted
? 1 - animation.value
: 1;
var left = width * value;
return Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: left,
width: width,
child: child,
),
],
);
},
);
},
);
},
child: buildRight(),
),
)
],
);
} else {
@@ -179,14 +211,13 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
Positioned.fill(child: buildLeft()),
Positioned(
left: offset,
right: 0,
width: MediaQuery.of(context).size.width,
top: 0,
bottom: 0,
child: Listener(
onPointerDown: handlePointerDown,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
reverseDuration: const Duration(milliseconds: 300),
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.fastOutSlowIn,
switchOutCurve: Curves.fastOutSlowIn,
transitionBuilder: (child, animation) {
@@ -198,11 +229,7 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
child: child,
);
},
child: currentPage == -1
? const SizedBox(
key: Key("1"),
)
: buildRight(),
child: buildRight(),
),
),
)
@@ -307,7 +334,7 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
}
Widget buildRight() {
final Widget body = switch (currentPage) {
return switch (currentPage) {
-1 => const SizedBox(),
0 => const ExploreSettings(),
1 => const ReaderSettings(),
@@ -318,10 +345,6 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
6 => const AboutSettings(),
_ => throw UnimplementedError()
};
return Material(
child: body,
);
}
var canPop = ValueNotifier(true);