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

mod: 首页样式

Browse Source
This commit is contained in:
guozhigq
2024-01-07 20:15:39 +08:00
parent 8ebb4cc70e
commit 042a0a848d
3 changed files with 186 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/pages/home/controller.dart
View File

@ -9,7 +9,7 @@ import 'package:pilipala/utils/storage.dart';
class HomeController extends GetxController with GetTickerProviderStateMixin { class HomeController extends GetxController with GetTickerProviderStateMixin {
bool flag = false; bool flag = false;
late List tabs; late List tabs;
int initialIndex = 1; RxInt initialIndex = 1.obs;
late TabController tabController; late TabController tabController;
late List tabsCtrList; late List tabsCtrList;
late List<Widget> tabsPageList; late List<Widget> tabsPageList;
@ -35,7 +35,7 @@ class HomeController extends GetxController with GetTickerProviderStateMixin {
tabsPageList = tabsConfig.map<Widget>((e) => e['page']).toList(); tabsPageList = tabsConfig.map<Widget>((e) => e['page']).toList();
tabController = TabController( tabController = TabController(
initialIndex: initialIndex, initialIndex: initialIndex.value,
length: tabs.length, length: tabs.length,
vsync: this, vsync: this,
); );

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

@ -119,96 +119,22 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
return StreamBuilder( return StreamBuilder(
stream: stream, stream: stream,
initialData: true, initialData: true,
builder: (context, AsyncSnapshot snapshot) { builder: (BuildContext context, AsyncSnapshot snapshot) {
final RxBool isUserLoggedIn = ctr!.userLogin;
final double top = MediaQuery.of(context).padding.top;
return AnimatedOpacity( return AnimatedOpacity(
opacity: snapshot.data ? 1 : 0, opacity: snapshot.data ? 1 : 0,
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
child: AnimatedContainer( child: AnimatedContainer(
curve: Curves.easeInOutCubicEmphasized, curve: Curves.easeInOutCubicEmphasized,
duration: const Duration(milliseconds: 500), duration: const Duration(milliseconds: 500),
height: snapshot.data height: snapshot.data ? top + 52 : top,
? MediaQuery.of(context).padding.top + 52 padding: EdgeInsets.fromLTRB(14, top, 14, 0),
: MediaQuery.of(context).padding.top + 5, child: UserInfoWidget(
child: Container( top: top,
padding: EdgeInsets.only( userLogin: isUserLoggedIn,
left: 8, userFace: ctr?.userFace.value,
right: 8, callback: () => callback!(),
bottom: 0,
top: MediaQuery.of(context).padding.top + 4,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
child: Row(
children: [
Image.asset(
'assets/images/logo/logo_android_2.png',
height: 48,
),
],
)),
const SearchPage(),
if (ctr!.userLogin.value) ...[
IconButton(
onPressed: () => Get.toNamed('/whisper'),
icon: const Icon(Icons.notifications_none))
],
const SizedBox(width: 8),
Obx(
() => ctr!.userLogin.value
? Stack(
children: [
Obx(
() => NetworkImgLayer(
type: 'avatar',
width: 34,
height: 34,
src: ctr!.userFace.value,
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => callback!(),
splashColor: Theme.of(context)
.colorScheme
.primaryContainer
.withOpacity(0.3),
borderRadius: const BorderRadius.all(
Radius.circular(50),
),
),
),
)
],
)
: SizedBox(
width: 38,
height: 38,
child: IconButton(
style: ButtonStyle(
padding:
MaterialStateProperty.all(EdgeInsets.zero),
backgroundColor:
MaterialStateProperty.resolveWith((states) {
return Theme.of(context)
.colorScheme
.onInverseSurface;
}),
),
onPressed: () => callback!(),
icon: Icon(
Icons.account_circle,
size: 22,
color: Theme.of(context).colorScheme.primary,
),
),
),
),
],
),
), ),
), ),
); );
@ -217,6 +143,96 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
} }
} }
class UserInfoWidget extends StatelessWidget {
const UserInfoWidget({
Key? key,
required this.top,
required this.userLogin,
required this.userFace,
required this.callback,
}) : super(key: key);
final double top;
final RxBool userLogin;
final String? userFace;
final VoidCallback? callback;
@override
Widget build(BuildContext context) {
return Row(
children: [
const Expanded(child: SearchPage()),
if (userLogin.value) ...[
const SizedBox(width: 4),
ClipRect(
child: IconButton(
onPressed: () => Get.toNamed('/whisper'),
icon: const Icon(Icons.notifications_none),
),
)
],
const SizedBox(width: 8),
Obx(
() => userLogin.value
? Stack(
children: [
NetworkImgLayer(
type: 'avatar',
width: 34,
height: 34,
src: userFace,
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => callback?.call(),
splashColor: Theme.of(context)
.colorScheme
.primaryContainer
.withOpacity(0.3),
borderRadius: const BorderRadius.all(
Radius.circular(50),
),
),
),
)
],
)
: DefaultUser(callback: () => callback),
),
],
);
}
}
class DefaultUser extends StatelessWidget {
const DefaultUser({super.key, this.callback});
final Function? callback;
@override
Widget build(BuildContext context) {
return SizedBox(
width: 38,
height: 38,
child: IconButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.zero),
backgroundColor: MaterialStateProperty.resolveWith((states) {
return Theme.of(context).colorScheme.onInverseSurface;
}),
),
onPressed: () => callback?.call(),
icon: Icon(
Icons.person_rounded,
size: 22,
color: Theme.of(context).colorScheme.primary,
),
),
);
}
}
class CustomTabs extends StatefulWidget { class CustomTabs extends StatefulWidget {
const CustomTabs({super.key}); const CustomTabs({super.key});
@ -232,25 +248,19 @@ class _CustomTabsState extends State<CustomTabs> {
void initState() { void initState() {
super.initState(); super.initState();
_homeController.tabController.addListener(listen); _homeController.tabController.addListener(listen);
currentTabIndex = _homeController.tabController.index;
} }
void listen() { void listen() {
setState(() { _homeController.initialIndex.value = _homeController.tabController.index;
currentTabIndex = _homeController.tabController.index;
});
} }
void onTap(int index) { void onTap(int index) {
feedBack(); feedBack();
if (_homeController.initialIndex == index) { if (_homeController.initialIndex.value == index) {
_homeController.tabsCtrList[index]().animateToTop(); _homeController.tabsCtrList[index]().animateToTop();
} }
_homeController.initialIndex = index; _homeController.initialIndex.value = index;
setState(() { _homeController.tabController.index = index;
_homeController.tabController.index = index;
currentTabIndex = index;
});
} }
@override @override
@ -261,25 +271,25 @@ class _CustomTabsState extends State<CustomTabs> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return Container(
height: 56, height: 44,
margin: const EdgeInsets.only(top: 4),
child: ListView.separated( child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 12.0), padding: const EdgeInsets.symmetric(horizontal: 14.0),
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
itemCount: _homeController.tabs.length, itemCount: _homeController.tabs.length,
separatorBuilder: (BuildContext context, int index) { separatorBuilder: (BuildContext context, int index) {
return const SizedBox(width: 8.0); return const SizedBox(width: 10);
}, },
itemBuilder: (BuildContext context, int index) { itemBuilder: (BuildContext context, int index) {
bool selected = index == currentTabIndex;
String label = _homeController.tabs[index]['label']; String label = _homeController.tabs[index]['label'];
// add margins to first and last tab; return Obx(
return CustomChip( () => CustomChip(
onTap: () { onTap: () => onTap(index),
onTap(index);
},
label: label, label: label,
selected: selected); selected: index == _homeController.initialIndex.value,
),
);
}, },
), ),
); );
@ -290,34 +300,39 @@ class CustomChip extends StatelessWidget {
final Function onTap; final Function onTap;
final String label; final String label;
final bool selected; final bool selected;
const CustomChip( const CustomChip({
{super.key, super.key,
required this.onTap, required this.onTap,
required this.label, required this.label,
required this.selected}); required this.selected,
});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
TextStyle? chipTextStyle = final ColorScheme colorTheme = Theme.of(context).colorScheme;
selected ? const TextStyle(fontWeight: FontWeight.bold) : null; final Color secondaryContainer = colorTheme.secondaryContainer;
final TextStyle chipTextStyle = selected
? const TextStyle(fontWeight: FontWeight.bold, fontSize: 13)
: const TextStyle(fontSize: 13);
final ColorScheme colorScheme = Theme.of(context).colorScheme;
const VisualDensity visualDensity =
VisualDensity(horizontal: -4.0, vertical: -2.0);
return InputChip( return InputChip(
side: const BorderSide(color: Colors.transparent), side: BorderSide(
color: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) { color: selected
if (states.contains(MaterialState.selected)) { ? colorScheme.onSecondaryContainer.withOpacity(0.2)
return Theme.of(context).colorScheme.tertiaryContainer; // 当按钮被按下时的颜色 : Colors.transparent,
}
return Theme.of(context).colorScheme.surfaceVariant; // 默认颜色
}),
label: Text(
label,
style: chipTextStyle,
), ),
onPressed: () { backgroundColor: secondaryContainer,
onTap(); selectedColor: secondaryContainer,
}, color: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) => secondaryContainer.withAlpha(200)),
padding: const EdgeInsets.fromLTRB(7, 1, 7, 1),
label: Text(label, style: chipTextStyle),
onPressed: () => onTap(),
selected: selected, selected: selected,
showCheckmark: false, showCheckmark: false,
visualDensity: visualDensity,
); );
} }
} }

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

@ -54,48 +54,49 @@ class _SearchPageState extends State<SearchPage> with RouteAware {
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 IconButton(onPressed: openContainer, icon: Icon(Icons.search)); return Container(
// return Container( width: 250,
// width: 250, height: 44,
// height: 44, clipBehavior: Clip.hardEdge,
// clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(
// decoration: const BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(25)),
// borderRadius: BorderRadius.all(Radius.circular(25)), ),
// ), child: Material(
// child: Material( color: Theme.of(context)
// color: .colorScheme
// Theme.of(context).colorScheme.secondaryContainer.withAlpha(115), .onSecondaryContainer
// child: InkWell( .withOpacity(0.05),
// 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(