opt: search panel layout
This commit is contained in:
@ -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(
|
||||
|
||||
53
lib/pages/search_result/widget/tab_bar.dart
Normal file
53
lib/pages/search_result/widget/tab_bar.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user