💄 Better scrolling

This commit is contained in:
LittleSheep 2024-05-29 20:13:53 +08:00
parent d4cbabeb31
commit 5f06fc4f9d
6 changed files with 130 additions and 186 deletions

View File

@ -75,94 +75,76 @@ class _ContactScreenState extends State<ContactScreen> {
); );
} }
return SafeArea( return RefreshIndicator(
child: NestedScrollView( onRefresh: () => getChannels(),
headerSliverBuilder: (context, innerBoxIsScrolled) { child: CustomScrollView(
return [ slivers: [
SliverOverlapAbsorber( SliverAppBar(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor( title: Text('contact'.tr),
context), centerTitle: false,
sliver: SliverAppBar( titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
title: Text('contact'.tr), actions: [
centerTitle: false, const NotificationButton(),
titleSpacing: PopupMenuButton(
SolianTheme.isLargeScreen(context) ? null : 24, icon: const Icon(Icons.add_circle),
forceElevated: innerBoxIsScrolled, itemBuilder: (BuildContext context) => [
actions: [ PopupMenuItem(
const NotificationButton(), child: ListTile(
PopupMenuButton( title: Text('channelOrganizeCommon'.tr),
icon: const Icon(Icons.add_circle), leading: const Icon(Icons.tag),
itemBuilder: (BuildContext context) => [ contentPadding:
PopupMenuItem( const EdgeInsets.symmetric(horizontal: 8),
child: ListTile( ),
title: Text('channelOrganizeCommon'.tr), onTap: () {
leading: const Icon(Icons.tag), AppRouter.instance
contentPadding: .pushNamed('channelOrganizing')
const EdgeInsets.symmetric(horizontal: 8), .then(
), (value) {
onTap: () { if (value != null) getChannels();
AppRouter.instance
.pushNamed('channelOrganizing')
.then(
(value) {
if (value != null) getChannels();
},
);
}, },
), );
PopupMenuItem( },
child: ListTile(
title: Text('channelOrganizeDirect'.tr),
leading: const FaIcon(
FontAwesomeIcons.userGroup,
size: 16,
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 8),
),
onTap: () {
final ChannelProvider provider = Get.find();
provider
.createDirectChannel(context, 'global')
.then((resp) {
if (resp != null) {
getChannels();
}
});
},
),
],
), ),
SizedBox( PopupMenuItem(
width: SolianTheme.isLargeScreen(context) ? 8 : 16, child: ListTile(
title: Text('channelOrganizeDirect'.tr),
leading: const FaIcon(
FontAwesomeIcons.userGroup,
size: 16,
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 8),
),
onTap: () {
final ChannelProvider provider = Get.find();
provider
.createDirectChannel(context, 'global')
.then((resp) {
if (resp != null) {
getChannels();
}
});
},
), ),
], ],
), ),
), SizedBox(
]; width: SolianTheme.isLargeScreen(context) ? 8 : 16,
},
body: MediaQuery.removePadding(
removeTop: true,
context: context,
child: Column(
children: [
if (_isBusy)
const LinearProgressIndicator().animate().scaleX(),
Expanded(
child: RefreshIndicator(
onRefresh: () => getChannels(),
child: ListView.builder(
itemCount: _channels.length,
itemBuilder: (context, index) {
final element = _channels[index];
return buildItem(element);
},
),
),
), ),
], ],
), ),
), if (_isBusy)
SliverToBoxAdapter(
child: const LinearProgressIndicator().animate().scaleX(),
),
SliverList.builder(
itemCount: _channels.length,
itemBuilder: (context, index) {
final element = _channels[index];
return buildItem(element);
},
),
],
), ),
); );
}, },

View File

@ -44,22 +44,25 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
); );
} }
return ListView( return CustomScrollView(
children: [ slivers: [
PostItem( SliverToBoxAdapter(
item: item!, child: PostItem(
isClickable: true, item: item!,
isShowReply: false, isClickable: true,
isShowReply: false,
),
), ),
const Divider(thickness: 0.3, height: 0.3), const SliverToBoxAdapter(
Text( child: Divider(thickness: 0.3, height: 0.3),
'postReplies'.tr,
style: Theme.of(context).textTheme.headlineSmall,
).paddingOnly(left: 24, right: 24, top: 16),
PostReplyList(
item: item!,
shrinkWrap: true,
), ),
SliverToBoxAdapter(
child: Text(
'postReplies'.tr,
style: Theme.of(context).textTheme.headlineSmall,
).paddingOnly(left: 24, right: 24, top: 16),
),
PostReplyList(item: item!),
], ],
); );
}, },

View File

@ -66,63 +66,43 @@ class _RealmListScreenState extends State<RealmListScreen> {
); );
} }
return SafeArea( return RefreshIndicator(
child: NestedScrollView( onRefresh: () => getRealms(),
headerSliverBuilder: (context, innerBoxIsScrolled) { child: CustomScrollView(
return [ slivers: [
SliverOverlapAbsorber( SliverAppBar(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor( title: Text('realm'.tr),
context), centerTitle: false,
sliver: SliverAppBar( titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
title: Text('realm'.tr), actions: [
centerTitle: false, const NotificationButton(),
titleSpacing: IconButton(
SolianTheme.isLargeScreen(context) ? null : 24, icon: const Icon(Icons.add_circle),
forceElevated: innerBoxIsScrolled, onPressed: () {
actions: [ AppRouter.instance.pushNamed('realmOrganizing').then(
const NotificationButton(), (value) {
IconButton( if (value != null) getRealms();
icon: const Icon(Icons.add_circle),
onPressed: () {
AppRouter.instance
.pushNamed('realmOrganizing')
.then(
(value) {
if (value != null) getRealms();
},
);
}, },
), );
SizedBox( },
width: SolianTheme.isLargeScreen(context) ? 8 : 16,
),
],
), ),
), SizedBox(
]; width: SolianTheme.isLargeScreen(context) ? 8 : 16,
},
body: MediaQuery.removePadding(
removeTop: true,
context: context,
child: Column(
children: [
if (_isBusy)
const LinearProgressIndicator().animate().scaleX(),
Expanded(
child: RefreshIndicator(
onRefresh: () => getRealms(),
child: ListView.builder(
itemCount: _realms.length,
itemBuilder: (context, index) {
final element = _realms[index];
return buildRealm(element);
},
),
),
), ),
], ],
), ),
), if (_isBusy)
SliverToBoxAdapter(
child: const LinearProgressIndicator().animate().scaleX(),
),
SliverList.builder(
itemCount: _realms.length,
itemBuilder: (context, index) {
final element = _realms[index];
return buildRealm(element);
},
)
],
), ),
); );
}, },

View File

@ -72,39 +72,24 @@ class _SocialScreenState extends State<SocialScreen> {
}), }),
body: Material( body: Material(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surface,
child: SafeArea( child: RefreshIndicator(
child: NestedScrollView( onRefresh: () => Future.sync(() => _pagingController.refresh()),
headerSliverBuilder: (context, innerBoxIsScrolled) { child: CustomScrollView(
return [ slivers: [
SliverOverlapAbsorber( SliverAppBar(
handle: title: Text('social'.tr),
NestedScrollView.sliverOverlapAbsorberHandleFor(context), centerTitle: false,
sliver: SliverAppBar( floating: true,
title: Text('social'.tr), titleSpacing: SolianTheme.isLargeScreen(context) ? null : 24,
centerTitle: false, actions: [
floating: true, const NotificationButton(),
snap: true, SizedBox(
titleSpacing: width: SolianTheme.isLargeScreen(context) ? 8 : 16,
SolianTheme.isLargeScreen(context) ? null : 24,
forceElevated: innerBoxIsScrolled,
actions: [
const NotificationButton(),
SizedBox(
width: SolianTheme.isLargeScreen(context) ? 8 : 16,
),
],
), ),
), ],
];
},
body: MediaQuery.removePadding(
removeTop: true,
context: context,
child: RefreshIndicator(
onRefresh: () => Future.sync(() => _pagingController.refresh()),
child: PostListWidget(controller: _pagingController),
), ),
), PostListWidget(controller: _pagingController),
],
), ),
), ),
), ),

View File

@ -7,7 +7,6 @@ import 'package:solian/widgets/posts/post_action.dart';
import 'package:solian/widgets/posts/post_item.dart'; import 'package:solian/widgets/posts/post_item.dart';
class PostListWidget extends StatelessWidget { class PostListWidget extends StatelessWidget {
final bool shrinkWrap;
final bool isShowEmbed; final bool isShowEmbed;
final bool isClickable; final bool isClickable;
final bool isNestedClickable; final bool isNestedClickable;
@ -16,7 +15,6 @@ class PostListWidget extends StatelessWidget {
const PostListWidget({ const PostListWidget({
super.key, super.key,
required this.controller, required this.controller,
this.shrinkWrap = false,
this.isShowEmbed = true, this.isShowEmbed = true,
this.isClickable = true, this.isClickable = true,
this.isNestedClickable = true, this.isNestedClickable = true,
@ -24,8 +22,7 @@ class PostListWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PagedListView<int, Post>.separated( return PagedSliverList<int, Post>.separated(
shrinkWrap: shrinkWrap,
pagingController: controller, pagingController: controller,
builderDelegate: PagedChildBuilderDelegate<Post>( builderDelegate: PagedChildBuilderDelegate<Post>(
itemBuilder: (context, item, index) { itemBuilder: (context, item, index) {

View File

@ -8,12 +8,10 @@ import 'package:solian/widgets/posts/post_list.dart';
class PostReplyList extends StatefulWidget { class PostReplyList extends StatefulWidget {
final Post item; final Post item;
final bool shrinkWrap;
const PostReplyList({ const PostReplyList({
super.key, super.key,
required this.item, required this.item,
this.shrinkWrap = false,
}); });
@override @override
@ -55,7 +53,6 @@ class _PostReplyListState extends State<PostReplyList> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PostListWidget( return PostListWidget(
isShowEmbed: false, isShowEmbed: false,
shrinkWrap: widget.shrinkWrap,
controller: _pagingController, controller: _pagingController,
); );
} }
@ -76,8 +73,8 @@ class PostReplyListPopup extends StatelessWidget {
style: Theme.of(context).textTheme.headlineSmall, style: Theme.of(context).textTheme.headlineSmall,
).paddingOnly(left: 24, right: 24, top: 32, bottom: 16), ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
Expanded( Expanded(
child: PostReplyList( child: CustomScrollView(
item: item, slivers: [PostReplyList(item: item)],
), ),
), ),
], ],