mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #365 from GuMengYu/home_page

Browse Source 
Improve: 首页样式
This commit is contained in:
guozhigq
2024-01-07 16:21:58 +08:00
committed by GitHub
parent 7a71798055 367d8b844a
commit 8ebb4cc70e
4 changed files with 262 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
lib/pages/home/view.dart
View File

@ -30,7 +30,7 @@ class _HomePageState extends State<HomePage>
stream = _homeController.searchBarStream.stream; stream = _homeController.searchBarStream.stream;
} }
showUserBottonSheet() { showUserBottomSheet() {
feedBack(); feedBack();
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
@ -49,47 +49,47 @@ class _HomePageState extends State<HomePage>
return Scaffold( return Scaffold(
extendBody: true, extendBody: true,
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
appBar: AppBar(toolbarHeight: 0, elevation: 0), body: Stack(
body: Column(
children: [ children: [
CustomAppBar( // gradient background
stream: _homeController.hideSearchBar Align(
? stream alignment: Alignment.topLeft,
: StreamController<bool>.broadcast().stream, child: Opacity(
ctr: _homeController, opacity: 0.6,
callback: showUserBottonSheet, child: Container(
), width: MediaQuery.of(context).size.width,
const SizedBox(height: 8), height: MediaQuery.of(context).size.height,
SizedBox( decoration: BoxDecoration(
width: double.infinity, gradient: LinearGradient(
height: 42, colors: [
child: Align( Theme.of(context).colorScheme.primary.withOpacity(0.9),
alignment: Alignment.center, Theme.of(context).colorScheme.primary.withOpacity(0.5),
child: TabBar( Theme.of(context).colorScheme.surface
controller: _homeController.tabController, ],
tabs: [ begin: Alignment.topLeft,
for (var i in _homeController.tabs) Tab(text: i['label']) end: Alignment.bottomRight,
], stops: const [0, 0.0034, 0.34]),
isScrollable: true, ),
dividerColor: Colors.transparent,
enableFeedback: true,
splashBorderRadius: BorderRadius.circular(10),
tabAlignment: TabAlignment.center,
onTap: (value) {
feedBack();
if (_homeController.initialIndex == value) {
_homeController.tabsCtrList[value]().animateToTop();
}
_homeController.initialIndex = value;
},
), ),
), ),
), ),
Expanded( Column(
child: TabBarView( children: [
controller: _homeController.tabController, CustomAppBar(
children: _homeController.tabsPageList, stream: _homeController.hideSearchBar
), ? stream
: StreamController<bool>.broadcast().stream,
ctr: _homeController,
callback: showUserBottomSheet,
),
const CustomTabs(),
Expanded(
child: TabBarView(
controller: _homeController.tabController,
children: _homeController.tabsPageList,
),
),
],
), ),
], ],
), ),
@ -128,24 +128,33 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
duration: const Duration(milliseconds: 500), duration: const Duration(milliseconds: 500),
height: snapshot.data height: snapshot.data
? MediaQuery.of(context).padding.top + 52 ? MediaQuery.of(context).padding.top + 52
: MediaQuery.of(context).padding.top - 10, : MediaQuery.of(context).padding.top + 5,
child: Container( child: Container(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 20, left: 8,
right: 20, right: 8,
bottom: 0, bottom: 0,
top: MediaQuery.of(context).padding.top + 4, top: MediaQuery.of(context).padding.top + 4,
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [ children: [
const Expanded(child: SearchPage()), Expanded(
child: Row(
children: [
Image.asset(
'assets/images/logo/logo_android_2.png',
height: 48,
),
],
)),
const SearchPage(),
if (ctr!.userLogin.value) ...[ if (ctr!.userLogin.value) ...[
const SizedBox(width: 6),
IconButton( IconButton(
onPressed: () => Get.toNamed('/whisper'), onPressed: () => Get.toNamed('/whisper'),
icon: const Icon(Icons.notifications_none)) icon: const Icon(Icons.notifications_none))
], ],
const SizedBox(width: 6), const SizedBox(width: 8),
Obx( Obx(
() => ctr!.userLogin.value () => ctr!.userLogin.value
? Stack( ? Stack(
@ -191,7 +200,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
), ),
onPressed: () => callback!(), onPressed: () => callback!(),
icon: Icon( icon: Icon(
Icons.person_rounded, Icons.account_circle,
size: 22, size: 22,
color: Theme.of(context).colorScheme.primary, color: Theme.of(context).colorScheme.primary,
), ),
@ -207,3 +216,108 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
); );
} }
} }
class CustomTabs extends StatefulWidget {
const CustomTabs({super.key});
@override
State<CustomTabs> createState() => _CustomTabsState();
}
class _CustomTabsState extends State<CustomTabs> {
final HomeController _homeController = Get.put(HomeController());
int currentTabIndex = 1;
@override
void initState() {
super.initState();
_homeController.tabController.addListener(listen);
currentTabIndex = _homeController.tabController.index;
}
void listen() {
setState(() {
currentTabIndex = _homeController.tabController.index;
});
}
void onTap(int index) {
feedBack();
if (_homeController.initialIndex == index) {
_homeController.tabsCtrList[index]().animateToTop();
}
_homeController.initialIndex = index;
setState(() {
_homeController.tabController.index = index;
currentTabIndex = index;
});
}
@override
void dispose() {
super.dispose();
_homeController.tabController.removeListener(listen);
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 56,
child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
scrollDirection: Axis.horizontal,
itemCount: _homeController.tabs.length,
separatorBuilder: (BuildContext context, int index) {
return const SizedBox(width: 8.0);
},
itemBuilder: (BuildContext context, int index) {
bool selected = index == currentTabIndex;
String label = _homeController.tabs[index]['label'];
// add margins to first and last tab;
return CustomChip(
onTap: () {
onTap(index);
},
label: label,
selected: selected);
},
),
);
}
}
class CustomChip extends StatelessWidget {
final Function onTap;
final String label;
final bool selected;
const CustomChip(
{super.key,
required this.onTap,
required this.label,
required this.selected});
@override
Widget build(BuildContext context) {
TextStyle? chipTextStyle =
selected ? const TextStyle(fontWeight: FontWeight.bold) : null;
return InputChip(
side: const BorderSide(color: Colors.transparent),
color: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return Theme.of(context).colorScheme.tertiaryContainer; // 当按钮被按下时的颜色
}
return Theme.of(context).colorScheme.surfaceVariant; // 默认颜色
}),
label: Text(
label,
style: chipTextStyle,
),
onPressed: () {
onTap();
},
selected: selected,
showCheckmark: false,
);
}
}

114
lib/pages/hot/view.dart
View File

@ -70,68 +70,66 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
super.build(context); super.build(context);
return Scaffold( return RefreshIndicator(
body: RefreshIndicator( onRefresh: () async {
onRefresh: () async { return await _hotController.onRefresh();
return await _hotController.onRefresh(); },
}, child: CustomScrollView(
child: CustomScrollView( controller: _hotController.scrollController,
controller: _hotController.scrollController, slivers: [
slivers: [ SliverPadding(
SliverPadding( // 单列布局 EdgeInsets.zero
// 单列布局 EdgeInsets.zero padding:
padding: const EdgeInsets.fromLTRB(0, StyleString.safeSpace - 5, 0, 0),
const EdgeInsets.fromLTRB(0, StyleString.safeSpace - 5, 0, 0), sliver: FutureBuilder(
sliver: FutureBuilder( future: _futureBuilderFuture,
future: _futureBuilderFuture, builder: (context, snapshot) {
builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.connectionState == ConnectionState.done) { Map data = snapshot.data as Map;
Map data = snapshot.data as Map; if (data['status']) {
if (data['status']) { return Obx(
return Obx( () => SliverList(
() => SliverList( delegate:
delegate: SliverChildBuilderDelegate((context, index) {
SliverChildBuilderDelegate((context, index) { return VideoCardH(
return VideoCardH( videoItem: _hotController.videoList[index],
videoItem: _hotController.videoList[index], showPubdate: true,
showPubdate: true, longPress: () {
longPress: () { _hotController.popupDialog = _createPopupDialog(
_hotController.popupDialog = _createPopupDialog( _hotController.videoList[index]);
_hotController.videoList[index]); Overlay.of(context)
Overlay.of(context) .insert(_hotController.popupDialog!);
.insert(_hotController.popupDialog!); },
}, longPressEnd: () {
longPressEnd: () { _hotController.popupDialog?.remove();
_hotController.popupDialog?.remove(); },
}, );
); }, childCount: _hotController.videoList.length),
}, childCount: _hotController.videoList.length), ),
), );
);
} else {
return HttpError(
errMsg: data['msg'],
fn: () => setState(() {}),
);
}
} else { } else {
// 骨架屏 return HttpError(
return SliverList( errMsg: data['msg'],
delegate: SliverChildBuilderDelegate((context, index) { fn: () => setState(() {}),
return const VideoCardHSkeleton();
}, childCount: 10),
); );
} }
}, } else {
), // 骨架屏
return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return const VideoCardHSkeleton();
}, childCount: 10),
);
}
},
), ),
SliverToBoxAdapter( ),
child: SizedBox( SliverToBoxAdapter(
height: MediaQuery.of(context).padding.bottom + 10, child: SizedBox(
), height: MediaQuery.of(context).padding.bottom + 10,
) ),
], )
), ],
), ),
); );
} }

8
lib/pages/main/controller.dart
View File

@ -19,11 +19,11 @@ class MainController extends GetxController {
RxList navigationBars = [ RxList navigationBars = [
{ {
'icon': const Icon( 'icon': const Icon(
Icons.favorite_outline, Icons.home_outlined,
size: 21, size: 21,
), ),
'selectIcon': const Icon( 'selectIcon': const Icon(
Icons.favorite, Icons.home,
size: 21, size: 21,
), ),
'label': "首页", 'label': "首页",
@ -41,11 +41,11 @@ class MainController extends GetxController {
}, },
{ {
'icon': const Icon( 'icon': const Icon(
Icons.folder_outlined, Icons.video_collection_outlined,
size: 20, size: 20,
), ),
'selectIcon': const Icon( 'selectIcon': const Icon(
Icons.folder, Icons.video_collection,
size: 21, size: 21,
), ),
'label': "媒体库", 'label': "媒体库",

85
lib/pages/search/view.dart
View File

@ -48,53 +48,54 @@ class _SearchPageState extends State<SearchPage> with RouteAware {
onClosed: (_) => _searchController.onClear(), onClosed: (_) => _searchController.onClear(),
openColor: Theme.of(context).colorScheme.background, openColor: Theme.of(context).colorScheme.background,
middleColor: Theme.of(context).colorScheme.background, middleColor: Theme.of(context).colorScheme.background,
closedColor: Theme.of(context).colorScheme.background, closedColor: Colors.transparent,
closedShape: const RoundedRectangleBorder( closedShape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0))), borderRadius: BorderRadius.all(Radius.circular(30.0))),
openShape: const RoundedRectangleBorder( openShape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0))), borderRadius: BorderRadius.all(Radius.circular(30.0))),
closedBuilder: (BuildContext context, VoidCallback openContainer) { closedBuilder: (BuildContext context, VoidCallback openContainer) {
return Container( return IconButton(onPressed: openContainer, icon: Icon(Icons.search));
width: 250, // return Container(
height: 44, // width: 250,
clipBehavior: Clip.hardEdge, // height: 44,
decoration: const BoxDecoration( // clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.all(Radius.circular(25)), // decoration: const BoxDecoration(
), // borderRadius: BorderRadius.all(Radius.circular(25)),
child: Material( // ),
color: // child: Material(
Theme.of(context).colorScheme.secondaryContainer.withAlpha(115), // color:
child: InkWell( // Theme.of(context).colorScheme.secondaryContainer.withAlpha(115),
splashColor: Theme.of(context) // child: InkWell(
.colorScheme // splashColor: Theme.of(context)
.primaryContainer // .colorScheme
.withOpacity(0.3), // .primaryContainer
onTap: openContainer, // .withOpacity(0.3),
child: Row( // onTap: openContainer,
children: [ // child: Row(
const SizedBox(width: 14), // children: [
Icon( // const SizedBox(width: 14),
Icons.search_outlined, // Icon(
color: Theme.of(context).colorScheme.onSecondaryContainer, // Icons.search_outlined,
), // color: Theme.of(context).colorScheme.onSecondaryContainer,
const SizedBox(width: 10), // ),
Expanded( // const SizedBox(width: 10),
child: Obx( // Expanded(
() => Text( // child: Obx(
_searchController.defaultSearch.value, // () => Text(
maxLines: 1, // _searchController.defaultSearch.value,
overflow: TextOverflow.ellipsis, // maxLines: 1,
style: TextStyle( // overflow: TextOverflow.ellipsis,
color: Theme.of(context).colorScheme.outline, // style: TextStyle(
), // color: Theme.of(context).colorScheme.outline,
), // ),
), // ),
), // ),
], // ),
), // ],
), // ),
), // ),
); // ),
// );
}, },
openBuilder: (BuildContext context, VoidCallback _) { openBuilder: (BuildContext context, VoidCallback _) {
return Scaffold( return Scaffold(