Skip to content

防止桌面端调整窗口大小时封面闪烁，优化首页列数计算方法 #1573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yaoyaozijing wants to merge 5 commits into
base: main
Choose a base branch
from
Open

防止桌面端调整窗口大小时封面闪烁，优化首页列数计算方法 #1573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14f7f3b
防止桌面端调整窗口大小时反复缓存、加载图片，优化列数算法
yaoyaozijing Dec 15, 2025
658f8e7
注意到avatar等情况，不再写死桌面端尺寸，而仅在初期缓存一次
yaoyaozijing Dec 16, 2025
b62e59b
修复窗口过小时首页的闪退问题
yaoyaozijing Dec 16, 2025
a24f679
修复组件树重建问题
Dec 31, 2025
ffab107
整理代码，允许拖动侧边导航栏来移动窗口
Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 47 additions & 39 deletions lib/bean/card/network_img_layer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import 'package:flutter/material.dart';
import 'package:kazumi/utils/constants.dart';
import 'package:kazumi/utils/extension.dart';
import 'package:kazumi/utils/logger.dart';

class NetworkImgLayer extends StatelessWidget {
class NetworkImgLayer extends StatefulWidget {
const NetworkImgLayer({
super.key,
this.src,
Expand All @@ -26,58 +25,64 @@ class NetworkImgLayer extends StatelessWidget {
final int? quality;
final double? origAspectRatio;

@override
State<NetworkImgLayer> createState() => _NetworkImgLayerState();
}

class _NetworkImgLayerState extends State<NetworkImgLayer> {
int? memCacheWidth, memCacheHeight;
@override
Widget build(BuildContext context) {
final String imageUrl = src ?? '';
final String imageUrl = widget.src ?? '';

//// We need this to shink memory usage
int? memCacheWidth, memCacheHeight;
double aspectRatio = (width / height).toDouble();

void setMemCacheSizes() {
if (aspectRatio > 1) {
memCacheHeight = height.cacheSize(context);
} else if (aspectRatio < 1) {
memCacheWidth = width.cacheSize(context);
} else {
if (origAspectRatio != null && origAspectRatio! > 1) {
memCacheWidth = width.cacheSize(context);
} else if (origAspectRatio != null && origAspectRatio! < 1) {
memCacheHeight = height.cacheSize(context);
if (memCacheWidth == null && memCacheHeight == null) {
double aspectRatio = (widget.width / widget.height).toDouble();
void setMemCacheSizes() {
if (aspectRatio > 1) {
memCacheHeight = widget.height.cacheSize(context);
} else if (aspectRatio < 1) {
memCacheWidth = widget.width.cacheSize(context);
} else {
memCacheWidth = width.cacheSize(context);
memCacheHeight = height.cacheSize(context);
if (widget.origAspectRatio != null && widget.origAspectRatio! > 1) {
memCacheWidth = widget.width.cacheSize(context);
} else if (widget.origAspectRatio != null && widget.origAspectRatio! < 1) {
memCacheHeight = widget.height.cacheSize(context);
} else {
memCacheWidth = widget.width.cacheSize(context);
memCacheHeight = widget.height.cacheSize(context);
}
}
}
}

setMemCacheSizes();
setMemCacheSizes();

if (memCacheWidth == null && memCacheHeight == null) {
memCacheWidth = width.toInt();
if (memCacheWidth == null && memCacheHeight == null) {
memCacheWidth = widget.width.toInt();
}
}

return src != '' && src != null
return widget.src != '' && widget.src != null
? ClipRRect(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(
type == 'avatar'
widget.type == 'avatar'
? 50
: type == 'emote'
: widget.type == 'emote'
? 0
: StyleString.imgRadius.x,
),
child: CachedNetworkImage(
imageUrl: imageUrl,
width: width,
height: height,
width: widget.width,
height: widget.height,
memCacheWidth: memCacheWidth,
memCacheHeight: memCacheHeight,
fit: BoxFit.cover,
fadeOutDuration:
fadeOutDuration ?? const Duration(milliseconds: 120),
widget.fadeOutDuration ?? const Duration(milliseconds: 120),
fadeInDuration:
fadeInDuration ?? const Duration(milliseconds: 120),
widget.fadeInDuration ?? const Duration(milliseconds: 120),
filterQuality: FilterQuality.high,
errorListener: (e) {
KazumiLogger().w("NetworkImage: network image load error", error: e);
Expand All @@ -91,29 +96,32 @@ class NetworkImgLayer extends StatelessWidget {
}

Widget placeholder(BuildContext context) {
final int? cacheW = widget.width.cacheSize(context);
final int? cacheH = widget.height.cacheSize(context);

return Container(
width: width,
height: height,
width: widget.width,
height: widget.height,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onInverseSurface.withValues(alpha: 0.4),
borderRadius: BorderRadius.circular(type == 'avatar'
borderRadius: BorderRadius.circular(widget.type == 'avatar'
? 50
: type == 'emote'
: widget.type == 'emote'
? 0
: StyleString.imgRadius.x),
),
child: type == 'bg'
child: widget.type == 'bg'
? const SizedBox()
: Center(
child: Image.asset(
type == 'avatar'
widget.type == 'avatar'
? 'assets/images/noface.jpeg'
: 'assets/images/loading.png',
width: width,
height: height,
cacheWidth: width.cacheSize(context),
cacheHeight: height.cacheSize(context),
width: widget.width,
height: widget.height,
cacheWidth: (cacheW != null && cacheW > 0) ? cacheW : null,
cacheHeight: (cacheH != null && cacheH > 0) ? cacheH : null,
),
),
);
Expand Down
9 changes: 4 additions & 5 deletions lib/pages/collect/collect_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,11 @@ class _CollectPageState extends State<CollectPage>
list.sort((a, b) => b.time.millisecondsSinceEpoch
.compareTo(a.time.millisecondsSinceEpoch));
}
int crossCount = 3;
int crossCount;
if (MediaQuery.sizeOf(context).width > LayoutBreakpoint.compact['width']!) {
crossCount = 5;
}
if (MediaQuery.sizeOf(context).width > LayoutBreakpoint.medium['width']!) {
crossCount = 6;
crossCount = 3 + ((MediaQuery.sizeOf(context).width-LayoutBreakpoint.compact['width']!) ~/ 200);
} else {
crossCount = 3;
}
for (List<CollectedBangumi> collectedBangumiRenderItem
in collectedBangumiRenderItemList) {
Expand Down
125 changes: 55 additions & 70 deletions lib/pages/menu/menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:kazumi/bean/widget/embedded_native_control_area.dart';
import 'package:kazumi/bean/appbar/drag_to_move_bar.dart';
import 'package:kazumi/pages/router.dart';
import 'package:provider/provider.dart';

Expand Down Expand Up @@ -38,8 +39,41 @@ class NavigationBarState extends ChangeNotifier {
}
}

// 通用导航项
class _NavItem {
final IconData icon;
final IconData selectedIcon;
final String label;
const _NavItem(this.icon, this.selectedIcon, this.label);
}

class _ScaffoldMenu extends State<ScaffoldMenu> {
final PageController _page = PageController();
final GlobalKey _pageViewKey = GlobalKey();

// 通用导航内容
static const List<_NavItem> _navItems = <_NavItem>[
_NavItem(Icons.home_outlined, Icons.home, '推荐'),
_NavItem(Icons.timeline_outlined, Icons.timeline, '时间表'),
_NavItem(Icons.favorite_border, Icons.favorite, '追番'),
_NavItem(Icons.settings_outlined, Icons.settings, '我的'),
];
static List<NavigationDestination> get _bottomDestinations => _navItems
.map((e) => NavigationDestination(selectedIcon: Icon(e.selectedIcon), icon: Icon(e.icon), label: e.label))
.toList();
static List<NavigationRailDestination> get _sideDestinations => _navItems
.map((e) => NavigationRailDestination(selectedIcon: Icon(e.selectedIcon), icon: Icon(e.icon), label: Text(e.label)))
.toList();

Widget _buildPageView() {
return PageView.builder(
key: _pageViewKey,
physics: const NeverScrollableScrollPhysics(),
controller: _page,
itemCount: menu.size,
itemBuilder: (_, __) => const RouterOutlet(),
);
}

@override
Widget build(BuildContext context) {
Expand All @@ -59,38 +93,12 @@ class _ScaffoldMenu extends State<ScaffoldMenu> {
return Scaffold(
body: Container(
color: Theme.of(context).colorScheme.primaryContainer,
child: PageView.builder(
physics: const NeverScrollableScrollPhysics(),
controller: _page,
itemCount: menu.size,
itemBuilder: (_, __) => const RouterOutlet(),
),
child: _buildPageView(),
),
bottomNavigationBar: state.isHide
? const SizedBox(height: 0)
: NavigationBar(
destinations: const <Widget>[
NavigationDestination(
selectedIcon: Icon(Icons.home),
icon: Icon(Icons.home_outlined),
label: '推荐',
),
NavigationDestination(
selectedIcon: Icon(Icons.timeline),
icon: Icon(Icons.timeline_outlined),
label: '时间表',
),
NavigationDestination(
selectedIcon: Icon(Icons.favorite),
icon: Icon(Icons.favorite_outlined),
label: '追番',
),
NavigationDestination(
selectedIcon: Icon(Icons.settings),
icon: Icon(Icons.settings),
label: '我的',
),
],
destinations: _bottomDestinations,
selectedIndex: state.selectedIndex,
onDestinationSelected: (int index) {
state.updateSelectedIndex(index);
Expand All @@ -107,45 +115,26 @@ class _ScaffoldMenu extends State<ScaffoldMenu> {
EmbeddedNativeControlArea(
child: Visibility(
visible: !state.isHide,
child: NavigationRail(
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
groupAlignment: 1.0,
leading: FloatingActionButton(
elevation: 0,
heroTag: null,
onPressed: () {
Modular.to.pushNamed('/search/');
child: DragToMoveArea(
child: NavigationRail(
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
groupAlignment: 1.0,
leading: FloatingActionButton(
elevation: 0,
heroTag: null,
onPressed: () {
Modular.to.pushNamed('/search/');
},
child: const Icon(Icons.search),
),
labelType: NavigationRailLabelType.selected,
destinations: _sideDestinations,
selectedIndex: state.selectedIndex,
onDestinationSelected: (int index) {
state.updateSelectedIndex(index);
Modular.to.navigate("/tab${menu.getPath(index)}/");
},
child: const Icon(Icons.search),
),
labelType: NavigationRailLabelType.selected,
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
selectedIcon: Icon(Icons.home),
icon: Icon(Icons.home_outlined),
label: Text('推荐'),
),
NavigationRailDestination(
selectedIcon: Icon(Icons.timeline),
icon: Icon(Icons.timeline_outlined),
label: Text('时间表'),
),
NavigationRailDestination(
selectedIcon: Icon(Icons.favorite),
icon: Icon(Icons.favorite_border),
label: Text('追番'),
),
NavigationRailDestination(
selectedIcon: Icon(Icons.settings),
icon: Icon(Icons.settings_outlined),
label: Text('我的'),
),
],
selectedIndex: state.selectedIndex,
onDestinationSelected: (int index) {
state.updateSelectedIndex(index);
Modular.to.navigate("/tab${menu.getPath(index)}/");
},
),
),
),
Expand All @@ -163,11 +152,7 @@ class _ScaffoldMenu extends State<ScaffoldMenu> {
topLeft: Radius.circular(16.0),
bottomLeft: Radius.circular(16.0),
),
child: PageView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: menu.size,
itemBuilder: (_, __) => const RouterOutlet(),
),
child: _buildPageView(),
),
),
),
Expand Down
9 changes: 4 additions & 5 deletions lib/pages/popular/popular_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,12 +164,11 @@ class _PopularPageState extends State<PopularPage>
}

Widget contentGrid(bangumiList) {
int crossCount = 3;
int crossCount;
if (MediaQuery.sizeOf(context).width > LayoutBreakpoint.compact['width']!) {
crossCount = 5;
}
if (MediaQuery.sizeOf(context).width > LayoutBreakpoint.medium['width']!) {
crossCount = 6;
crossCount = 3 + ((MediaQuery.sizeOf(context).width-LayoutBreakpoint.compact['width']!) ~/ 200);
} else {
crossCount = 3;
}
return SliverPadding(
padding: const EdgeInsets.all(8),
Expand Down
Loading