feat: vertical tabbar

Signed-off-by: dom <githubaccount56556@proton.me>
This commit is contained in:
dom
2026-02-06 20:30:58 +08:00
parent cc1704a021
commit 29e7e0e556
3 changed files with 2417 additions and 93 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -2,9 +2,7 @@ import 'dart:async';
import 'package:PiliPlus/models/common/rank_type.dart'; import 'package:PiliPlus/models/common/rank_type.dart';
import 'package:PiliPlus/pages/common/common_controller.dart'; import 'package:PiliPlus/pages/common/common_controller.dart';
import 'package:PiliPlus/pages/main/controller.dart';
import 'package:PiliPlus/pages/rank/zone/controller.dart'; import 'package:PiliPlus/pages/rank/zone/controller.dart';
import 'package:flutter/foundation.dart' show clampDouble;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
@@ -21,27 +19,6 @@ class RankController extends GetxController
@override @override
ScrollController get scrollController => controller.scrollController; ScrollController get scrollController => controller.scrollController;
final _mainCtr = Get.find<MainController>();
final tabScrollController = ScrollController();
void scrollToCurrentIndex(double tabHeight, int index) {
final position = tabScrollController.position;
final offset = clampDouble(
(tabHeight * (2 * index + 1) - position.viewportDimension) / 2.0 +
(_mainCtr.useBottomNav && (_mainCtr.showBottomBar?.value ?? true)
? 80.0
: 0.0),
position.minScrollExtent,
position.maxScrollExtent,
);
tabScrollController.animateTo(
offset,
duration: kTabScrollDuration,
curve: Curves.ease,
);
}
@override @override
void onInit() { void onInit() {
super.onInit(); super.onInit();
@@ -51,7 +28,6 @@ class RankController extends GetxController
@override @override
void onClose() { void onClose() {
tabController.dispose(); tabController.dispose();
tabScrollController.dispose();
super.onClose(); super.onClose();
} }

View File

@@ -1,3 +1,4 @@
import 'package:PiliPlus/common/widgets/flutter/vertical_tabs.dart';
import 'package:PiliPlus/models/common/rank_type.dart'; import 'package:PiliPlus/models/common/rank_type.dart';
import 'package:PiliPlus/pages/rank/controller.dart'; import 'package:PiliPlus/pages/rank/controller.dart';
import 'package:PiliPlus/pages/rank/zone/view.dart'; import 'package:PiliPlus/pages/rank/zone/view.dart';
@@ -43,76 +44,24 @@ class _RankPageState extends State<RankPage>
); );
} }
@override
void didChangeDependencies() {
super.didChangeDependencies();
_tabHeight = MediaQuery.textScalerOf(context).scale(21) + 14;
}
late double _tabHeight;
Widget _buildTab(ThemeData theme) { Widget _buildTab(ThemeData theme) {
return SizedBox( return VerticalTabBar(
width: 64, dividerWidth: 0,
child: Obx(() { isScrollable: true,
final tabIndex = _rankController.tabIndex.value; indicatorWeight: 3,
return ListView.builder( indicatorSize: .tab,
controller: _rankController.tabScrollController, controller: _rankController.tabController,
padding: .only(bottom: MediaQuery.paddingOf(context).bottom + 105), padding: .only(bottom: MediaQuery.paddingOf(context).bottom + 105),
itemCount: RankType.values.length, tabs: RankType.values.map((e) => VerticalTab(text: e.label)).toList(),
itemBuilder: (context, index) { onTap: (index) {
final item = RankType.values[index]; if (!_rankController.tabController.indexIsChanging) {
final isCurr = index == tabIndex; _rankController.animateToTop();
return SizedBox( } else {
height: _tabHeight, _rankController
child: Material( ..tabIndex.value = index
color: isCurr ..tabController.animateTo(index);
? theme.colorScheme.onInverseSurface }
: theme.colorScheme.surface, },
child: InkWell(
onTap: isCurr
? _rankController.animateToTop
: () => _rankController
..tabIndex.value = index
..tabController.animateTo(index)
..scrollToCurrentIndex(_tabHeight, index),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (isCurr)
Container(
width: 3,
height: double.infinity,
color: theme.colorScheme.primary,
)
else
const SizedBox(width: 3),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
padding: const .symmetric(vertical: 7),
child: Text(
item.label,
style: isCurr
? TextStyle(
fontSize: 15,
color: theme.colorScheme.primary,
)
: const TextStyle(fontSize: 15),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
),
);
},
);
}),
); );
} }
} }