feat: 顶栏收起

This commit is contained in:
guozhigq
2023-08-06 21:05:51 +08:00
parent 930282b7bd
commit acfe556c26
10 changed files with 303 additions and 110 deletions

View File

@ -167,6 +167,10 @@ class Api {
// 热搜 // 热搜
static const String hotSearchList = static const String hotSearchList =
'https://s.search.bilibili.com/main/hotword'; 'https://s.search.bilibili.com/main/hotword';
// 默认搜索词
static const String searchDefault = '/x/web-interface/wbi/search/default';
// 搜索关键词 // 搜索关键词
static const String serachSuggest = static const String serachSuggest =
'https://s.search.bilibili.com/main/suggest'; 'https://s.search.bilibili.com/main/suggest';

View File

@ -0,0 +1,3 @@
import 'package:get/get.dart';
class BangumiController extends GetxController {}

View File

@ -0,0 +1,4 @@
library bangumi_panel;
export './controller.dart';
export './view.dart';

View File

@ -0,0 +1,19 @@
import 'package:flutter/material.dart';
class BangumiPage extends StatefulWidget {
const BangumiPage({super.key});
@override
State<BangumiPage> createState() => _BangumiPageState();
}
class _BangumiPageState extends State<BangumiPage> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('还在开发中'),
),
);
}
}

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:pilipala/http/index.dart';
import 'package:pilipala/pages/bangumi/index.dart';
import 'package:pilipala/pages/hot/index.dart'; import 'package:pilipala/pages/hot/index.dart';
import 'package:pilipala/pages/live/index.dart'; import 'package:pilipala/pages/live/index.dart';
import 'package:pilipala/pages/rcmd/index.dart'; import 'package:pilipala/pages/rcmd/index.dart';
@ -31,6 +33,14 @@ class HomeController extends GetxController with GetTickerProviderStateMixin {
'label': '热门', 'label': '热门',
'type': 'hot' 'type': 'hot'
}, },
{
'icon': const Icon(
Icons.play_circle_outlined,
size: 15,
),
'label': '番剧',
'type': 'bangumi'
},
]; ];
int initialIndex = 1; int initialIndex = 1;
late TabController tabController; late TabController tabController;
@ -38,7 +48,9 @@ class HomeController extends GetxController with GetTickerProviderStateMixin {
Get.find<LiveController>, Get.find<LiveController>,
Get.find<RcmdController>, Get.find<RcmdController>,
Get.find<HotController>, Get.find<HotController>,
Get.find<BangumiController>,
]; ];
RxString defaultSearch = '输入关键词搜索'.obs;
@override @override
void onInit() { void onInit() {
@ -48,6 +60,7 @@ class HomeController extends GetxController with GetTickerProviderStateMixin {
length: tabs.length, length: tabs.length,
vsync: this, vsync: this,
); );
searchDefault();
} }
void onRefresh() { void onRefresh() {
@ -61,4 +74,11 @@ class HomeController extends GetxController with GetTickerProviderStateMixin {
var ctr = ctrList[index]; var ctr = ctrList[index];
ctr().animateToTop(); ctr().animateToTop();
} }
void searchDefault() async {
var res = await Request().get(Api.searchDefault);
if (res.data['code'] == 0) {
defaultSearch.value = res.data['data']['name'];
}
}
} }

View File

@ -1,10 +1,16 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:hive/hive.dart';
import 'package:pilipala/common/widgets/network_img_layer.dart';
import 'package:pilipala/pages/bangumi/index.dart';
import 'package:pilipala/pages/hot/index.dart'; import 'package:pilipala/pages/hot/index.dart';
import 'package:pilipala/pages/live/index.dart'; import 'package:pilipala/pages/live/index.dart';
import 'package:pilipala/pages/main/index.dart';
import 'package:pilipala/pages/mine/index.dart';
import 'package:pilipala/pages/rcmd/index.dart'; import 'package:pilipala/pages/rcmd/index.dart';
import 'package:pilipala/utils/feed_back.dart'; import 'package:pilipala/utils/feed_back.dart';
import 'package:pilipala/utils/storage.dart';
import './controller.dart'; import './controller.dart';
class HomePage extends StatefulWidget { class HomePage extends StatefulWidget {
@ -18,7 +24,7 @@ class _HomePageState extends State<HomePage>
with AutomaticKeepAliveClientMixin, TickerProviderStateMixin { with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
final HomeController _homeController = Get.put(HomeController()); final HomeController _homeController = Get.put(HomeController());
List videoList = []; List videoList = [];
// late TabController? _tabController; Stream<bool> stream = Get.find<MainController>().bottomBarStream.stream;
@override @override
bool get wantKeepAlive => true; bool get wantKeepAlive => true;
@ -27,103 +33,231 @@ class _HomePageState extends State<HomePage>
Widget build(BuildContext context) { Widget build(BuildContext context) {
super.build(context); super.build(context);
return Scaffold( return Scaffold(
appBar: AppBar( extendBody: true,
titleSpacing: 0, extendBodyBehindAppBar: true,
title: Padding( appBar: AppBar(toolbarHeight: 0, elevation: 0),
padding: const EdgeInsets.only(left: 12, right: 12, bottom: 0), body: Column(
child: Stack( children: [
children: [ CustomAppBar(stream: stream, ctr: _homeController),
const Align( Container(
alignment: Alignment.centerLeft, padding: const EdgeInsets.only(left: 12, right: 12, bottom: 4),
child: Padding( child: Stack(
padding: EdgeInsets.only(left: 8), children: [
child: Text( Align(
'PLPL', alignment: Alignment.center,
style: TextStyle( child: Theme(
height: 2.8, data: ThemeData(
fontSize: 17, splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明
fontWeight: FontWeight.bold, highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明
letterSpacing: 1,
fontFamily: 'Jura-Bold',
), ),
), child: Padding(
), padding: const EdgeInsets.only(top: 2),
), child: TabBar(
Align( controller: _homeController.tabController,
alignment: Alignment.center, tabs: [
child: Theme( for (var i in _homeController.tabs)
data: ThemeData( // Tab(text: i['label'])
splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明 Padding(
highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明 padding: const EdgeInsets.symmetric(
), horizontal: 0, vertical: 11),
child: Padding( child: Row(
padding: const EdgeInsets.only(top: 4), children: [
child: TabBar( i['icon'],
controller: _homeController.tabController, const SizedBox(width: 4),
tabs: [ Text(i['label'])
for (var i in _homeController.tabs) ],
// Tab(text: i['label']) ),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 11),
child: Row(
children: [
i['icon'],
const SizedBox(width: 4),
Text(i['label'])
],
), ),
), ],
], isScrollable: true,
isScrollable: true, indicatorWeight: 0,
indicatorWeight: 0, indicatorPadding: const EdgeInsets.symmetric(
indicatorPadding: const EdgeInsets.symmetric( horizontal: 4, vertical: 5),
horizontal: 4, vertical: 5), indicator: BoxDecoration(
indicator: BoxDecoration( color: Theme.of(context)
color: Theme.of(context) .colorScheme
.colorScheme .primaryContainer
.primaryContainer .withOpacity(0.8),
.withOpacity(0.8), borderRadius:
borderRadius: const BorderRadius.all(Radius.circular(20)),
const BorderRadius.all(Radius.circular(20)), ),
indicatorSize: TabBarIndicatorSize.tab,
labelColor: Theme.of(context).colorScheme.primary,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: Colors.transparent,
unselectedLabelColor:
Theme.of(context).colorScheme.outline,
onTap: (value) =>
{feedBack(), _homeController.initialIndex = value},
), ),
indicatorSize: TabBarIndicatorSize.tab,
labelColor: Theme.of(context).colorScheme.primary,
labelStyle: const TextStyle(fontSize: 13),
dividerColor: Colors.transparent,
unselectedLabelColor:
Theme.of(context).colorScheme.outline,
onTap: (value) =>
{feedBack(), _homeController.initialIndex = value},
), ),
), ),
), ),
), ],
Align( ),
alignment: Alignment.centerRight, ),
child: Hero( Expanded(
tag: 'searchTag', child: TabBarView(
child: IconButton( controller: _homeController.tabController,
onPressed: () { children: const [
feedBack(); LivePage(),
Get.toNamed('/search'); RcmdPage(),
}, HotPage(),
icon: const Icon(CupertinoIcons.search, size: 21), BangumiPage(),
), ],
), ),
),
],
), ),
),
),
body: TabBarView(
controller: _homeController.tabController,
children: const [
LivePage(),
RcmdPage(),
HotPage(),
], ],
), ),
); );
} }
} }
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final double height;
final Stream<bool>? stream;
final ctr;
const CustomAppBar({
super.key,
this.height = kToolbarHeight,
this.stream,
this.ctr,
});
@override
Size get preferredSize => Size.fromHeight(height);
@override
Widget build(BuildContext context) {
Box user = GStrorage.user;
return StreamBuilder(
stream: stream,
initialData: true,
builder: (context, AsyncSnapshot snapshot) {
return ClipRect(
clipBehavior: Clip.hardEdge,
child: AnimatedOpacity(
opacity: snapshot.data ? 1 : 0,
duration: const Duration(milliseconds: 300),
child: AnimatedContainer(
curve: Curves.linear,
duration: const Duration(milliseconds: 300),
height: snapshot.data ? 94 : MediaQuery.of(context).padding.top,
child: Container(
padding: EdgeInsets.only(
left: 12,
right: 12,
bottom: 4,
top: MediaQuery.of(context).padding.top,
),
child: Row(
children: [
const Text(
'PLPL',
style: TextStyle(
height: 2.8,
fontSize: 17,
fontWeight: FontWeight.bold,
fontFamily: 'Jura-Bold',
),
),
const SizedBox(width: 10),
Expanded(
child: Hero(
tag: 'searchWrap',
child: GestureDetector(
onTap: () {
Get.toNamed('/search', parameters: {
'hintText': ctr.defaultSearch.value
});
},
child: Container(
width: 250,
height: 45,
clipBehavior: Clip.hardEdge,
padding: const EdgeInsets.only(left: 12, right: 22),
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(25)),
color: Theme.of(context)
.colorScheme
.onInverseSurface,
),
child: Row(
children: [
Icon(
Icons.search_outlined,
size: 23,
color: Theme.of(context).colorScheme.outline,
),
const SizedBox(width: 7),
Expanded(
child: Obx(
() => Text(
ctr.defaultSearch.value,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Theme.of(context)
.colorScheme
.outline),
),
),
),
],
),
),
),
),
),
const SizedBox(width: 12),
if (user.get(UserBoxKey.userLogin) ?? false) ...[
GestureDetector(
onTap: () {
feedBack();
showModalBottomSheet(
context: context,
builder: (_) => const SizedBox(
height: 450,
child: MinePage(),
),
clipBehavior: Clip.hardEdge,
isScrollControlled: true,
);
},
child: NetworkImgLayer(
type: 'avatar',
width: 34,
height: 34,
src: user.get(UserBoxKey.userFace),
),
)
] else ...[
IconButton(
onPressed: () {
feedBack();
showModalBottomSheet(
context: context,
builder: (_) => const SizedBox(
height: 450,
child: MinePage(),
),
clipBehavior: Clip.hardEdge,
isScrollControlled: true,
);
},
icon: const Icon(CupertinoIcons.person, size: 22),
)
],
],
),
),
),
),
);
},
);
}
}

View File

@ -35,5 +35,6 @@ class MainController extends GetxController {
'label': "媒体库", 'label': "媒体库",
} }
].obs; ].obs;
final StreamController<bool> bottomBarStream = StreamController<bool>(); final StreamController<bool> bottomBarStream =
StreamController<bool>.broadcast();
} }

View File

@ -66,7 +66,6 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) { if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) {
_homeController.onRefresh(); _homeController.onRefresh();
} else { } else {
await Future.delayed(const Duration(microseconds: 300));
_homeController.animateToTop(); _homeController.animateToTop();
} }
_lastSelectTime = DateTime.now().millisecondsSinceEpoch; _lastSelectTime = DateTime.now().millisecondsSinceEpoch;
@ -82,7 +81,6 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) { if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) {
_dynamicController.onRefresh(); _dynamicController.onRefresh();
} else { } else {
await Future.delayed(const Duration(microseconds: 300));
_dynamicController.animateToTop(); _dynamicController.animateToTop();
} }
_lastSelectTime = DateTime.now().millisecondsSinceEpoch; _lastSelectTime = DateTime.now().millisecondsSinceEpoch;

View File

@ -19,6 +19,7 @@ class SSearchController extends GetxController {
RxList<SearchSuggestItem> searchSuggestList = [SearchSuggestItem()].obs; RxList<SearchSuggestItem> searchSuggestList = [SearchSuggestItem()].obs;
final _debouncer = final _debouncer =
Debouncer(delay: const Duration(milliseconds: 200)); // 设置延迟时间 Debouncer(delay: const Duration(milliseconds: 200)); // 设置延迟时间
String hintText = '搜索';
@override @override
void onInit() { void onInit() {
@ -33,7 +34,13 @@ class SSearchController extends GetxController {
} }
// 其他页面跳转过来 // 其他页面跳转过来
if (Get.parameters.keys.isNotEmpty) { if (Get.parameters.keys.isNotEmpty) {
onClickKeyword(Get.parameters['keyword']!); if (Get.parameters['keyword'] != null) {
onClickKeyword(Get.parameters['keyword']!);
}
if (Get.parameters['hintText'] != null) {
hintText = Get.parameters['hintText']!;
searchKeyWord.value = hintText;
}
} }
historyCacheList = histiryWord.get('cacheList') ?? []; historyCacheList = histiryWord.get('cacheList') ?? [];
historyList.value = historyCacheList; historyList.value = historyCacheList;

View File

@ -60,26 +60,29 @@ class _SearchPageState extends State<SearchPage> with RouteAware {
), ),
const SizedBox(width: 10) const SizedBox(width: 10)
], ],
title: Obx( title: Hero(
() => TextField( tag: 'searchWrap',
autofocus: true, child: Obx(
focusNode: _searchController.searchFocusNode, () => TextField(
controller: _searchController.controller.value, autofocus: true,
textInputAction: TextInputAction.search, focusNode: _searchController.searchFocusNode,
onChanged: (value) => _searchController.onChange(value), controller: _searchController.controller.value,
decoration: InputDecoration( textInputAction: TextInputAction.search,
hintText: '搜索', onChanged: (value) => _searchController.onChange(value),
border: InputBorder.none, decoration: InputDecoration(
suffixIcon: IconButton( hintText: _searchController.hintText,
icon: Icon( border: InputBorder.none,
Icons.clear, suffixIcon: IconButton(
size: 22, icon: Icon(
color: Theme.of(context).colorScheme.outline, Icons.clear,
size: 22,
color: Theme.of(context).colorScheme.outline,
),
onPressed: () => _searchController.onClear(),
), ),
onPressed: () => _searchController.onClear(),
), ),
onSubmitted: (String value) => _searchController.submit(),
), ),
onSubmitted: (String value) => _searchController.submit(),
), ),
), ),
), ),