opt: search panel layout

This commit is contained in:
guozhigq
2024-10-26 15:10:30 +08:00
parent b6e6cc1735
commit baa6a644e3
8 changed files with 134 additions and 77 deletions

View File

@ -3,6 +3,7 @@ import 'package:get/get.dart';
import 'package:pilipala/models/common/search_type.dart';
import 'package:pilipala/pages/search_panel/index.dart';
import 'controller.dart';
import 'widget/tab_bar.dart';
class SearchResultPage extends StatefulWidget {
const SearchResultPage({super.key});
@ -29,6 +30,17 @@ class _SearchResultPageState extends State<SearchResultPage>
);
}
// tab点击事件
void _onTap(int index) {
if (index == _searchResultController.tabIndex) {
Get.find<SearchPanelController>(
tag: SearchType.values[index].type +
_searchResultController.keyword!)
.animateToTop();
}
_searchResultController.tabIndex = index;
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -55,50 +67,10 @@ class _SearchResultPageState extends State<SearchResultPage>
body: Column(
children: [
const SizedBox(height: 4),
Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 8),
color: Theme.of(context).colorScheme.surface,
child: Theme(
data: ThemeData(
splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明
highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明
),
child: Obx(
() => (TabBar(
controller: _tabController,
tabs: [
for (var i in _searchResultController.searchTabs)
Tab(text: "${i['label']} ${i['count'] ?? ''}")
],
isScrollable: true,
indicatorWeight: 0,
indicatorPadding:
const EdgeInsets.symmetric(horizontal: 3, vertical: 8),
indicator: BoxDecoration(
color: Theme.of(context).colorScheme.secondaryContainer,
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
indicatorSize: TabBarIndicatorSize.tab,
labelColor:
Theme.of(context).colorScheme.onSecondaryContainer,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: Colors.transparent,
unselectedLabelColor: Theme.of(context).colorScheme.outline,
tabAlignment: TabAlignment.start,
onTap: (index) {
if (index == _searchResultController.tabIndex) {
Get.find<SearchPanelController>(
tag: SearchType.values[index].type +
_searchResultController.keyword!)
.animateToTop();
}
_searchResultController.tabIndex = index;
},
)),
),
),
TabBarWidget(
onTap: _onTap,
tabController: _tabController!,
searchResultCtr: _searchResultController,
),
Expanded(
child: TabBarView(

View File

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pilipala/pages/search_result/index.dart';
class TabBarWidget extends StatelessWidget {
final Function(int) onTap;
final TabController tabController;
final SearchResultController searchResultCtr;
const TabBarWidget({
required this.onTap,
required this.tabController,
required this.searchResultCtr,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
ColorScheme colorScheme = Theme.of(context).colorScheme;
Color transparent = Colors.transparent;
return Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 8),
color: colorScheme.surface,
child: Theme(
data: ThemeData(splashColor: transparent, highlightColor: transparent),
child: Obx(
() => TabBar(
controller: tabController,
tabs: [
for (var i in searchResultCtr.searchTabs)
Tab(text: "${i['label']} ${i['count'] ?? ''}"),
],
isScrollable: true,
indicatorPadding:
const EdgeInsets.symmetric(horizontal: 3, vertical: 8),
indicator: BoxDecoration(
color: colorScheme.secondaryContainer,
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
indicatorSize: TabBarIndicatorSize.tab,
labelColor: colorScheme.onSecondaryContainer,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: transparent,
unselectedLabelColor: colorScheme.outline,
tabAlignment: TabAlignment.start,
onTap: onTap,
),
),
),
);
}
}