Improve chapters display

This commit is contained in:
2025-02-13 10:05:38 +08:00
parent 18c5d5d85a
commit 34194559f5
2 changed files with 101 additions and 85 deletions

View File

@@ -331,7 +331,8 @@
"Create a folder": "新建收藏夹",
"Created successfully": "创建成功",
"name": "名称",
"Reverse tap to turn Pages": "反转点击翻页"
"Reverse tap to turn Pages": "反转点击翻页",
"Show all": "显示全部"
},
"zh_TW": {
"Home": "首頁",
@@ -665,6 +666,7 @@
"Create a folder": "新建收藏夾",
"Created successfully": "創建成功",
"name": "名稱",
"Reverse tap to turn Pages": "反轉點擊翻頁"
"Reverse tap to turn Pages": "反轉點擊翻頁",
"Show all": "顯示全部"
}
}

View File

@@ -1106,10 +1106,20 @@ class _ComicChaptersState extends State<_ComicChapters> {
Widget build(BuildContext context) {
final eps = state.comic.chapters!;
return SliverLayoutBuilder(
builder: (context, constrains) {
int length = eps.length;
bool canShowAll = showAll;
if (!showAll) {
length = math.min(length, 20);
var width = constrains.crossAxisExtent;
var crossItems = width ~/ 200;
if (width % 200 != 0) {
crossItems += 1;
}
length = math.min(length, crossItems * 8);
if (length == eps.length) {
canShowAll = true;
}
}
return SliverMainAxisGroup(
@@ -1133,8 +1143,9 @@ class _ComicChaptersState extends State<_ComicChapters> {
),
),
SliverGrid(
delegate:
SliverChildBuilderDelegate(childCount: length, (context, i) {
delegate: SliverChildBuilderDelegate(
childCount: length,
(context, i) {
if (reverse) {
i = eps.length - i - 1;
}
@@ -1143,16 +1154,15 @@ class _ComicChaptersState extends State<_ComicChapters> {
bool visited =
(state.history?.readEpisode ?? const {}).contains(i + 1);
return Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
child: Material(
color: context.colorScheme.surfaceContainer,
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderRadius: BorderRadius.circular(16),
child: InkWell(
onTap: () => state.read(i + 1),
borderRadius: const BorderRadius.all(Radius.circular(12)),
borderRadius: BorderRadius.circular(16),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Center(
child: Text(
value,
@@ -1160,7 +1170,9 @@ class _ComicChaptersState extends State<_ComicChapters> {
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: visited ? context.colorScheme.outline : null,
color: visited
? context.colorScheme.outline
: null,
),
),
),
@@ -1168,25 +1180,25 @@ class _ComicChaptersState extends State<_ComicChapters> {
),
),
);
}),
},
),
gridDelegate: const SliverGridDelegateWithFixedHeight(
maxCrossAxisExtent: 200, itemHeight: 48),
maxCrossAxisExtent: 200,
itemHeight: 48,
),
).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)),
if (eps.length > 20 && !showAll)
if (eps.length > 20 && !canShowAll)
SliverToBoxAdapter(
child: Align(
alignment: Alignment.center,
child: FilledButton.tonal(
style: ButtonStyle(
shape: WidgetStateProperty.all(const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)))),
),
child: TextButton.icon(
icon: const Icon(Icons.arrow_drop_down),
onPressed: () {
setState(() {
showAll = true;
});
},
child: Text("${"Show all".tl} (${eps.length})"),
label: Text("${"Show all".tl} (${eps.length})"),
).paddingTop(12),
),
),
@@ -1195,6 +1207,8 @@ class _ComicChaptersState extends State<_ComicChapters> {
),
],
);
},
);
}
}