From 238fd09bc73c0f66b1d7ad6da07fc0177240f407 Mon Sep 17 00:00:00 2001 From: laiiihz Date: Thu, 4 Feb 2021 11:30:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0placeholder-=E9=87=8D?= =?UTF-8?q?=E5=86=99=E7=A4=BE=E5=8C=BA=E8=AF=9D=E9=A2=98=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/images/placeholder.webp | Bin 0 -> 10322 bytes lib/const/resource.dart | 4 + .../community/community_topic_model.dart | 8 ++ .../goods_manage_page/goods_manage_page.dart | 2 +- lib/ui/community/activity/activity_card.dart | 2 +- .../activity/activity_detail_page.dart | 2 +- .../activity/activity_people_list_page.dart | 2 +- .../topic/topic_community_view.dart | 80 ++++++------ .../topic/topic_detail_page.dart | 25 ++-- .../topic/topic_scrollable_text.dart | 47 -------- .../topic/topic_sliver_header.dart | 114 ++++++++++++++++++ .../community_views/widgets/chat_card.dart | 17 +++ lib/ui/community/notice/notice_card.dart | 2 +- .../community/notice/notice_detail_page.dart | 2 +- lib/widget/others/stack_avatar.dart | 2 +- lib/widget/picker/bee_image_preview.dart | 2 +- lib/widget/views/bee_grid_image_view.dart | 2 +- lib/widget/views/horizontal_image_view.dart | 2 +- 18 files changed, 205 insertions(+), 110 deletions(-) create mode 100644 assets/images/placeholder.webp delete mode 100644 lib/ui/community/community_views/topic/topic_scrollable_text.dart create mode 100644 lib/ui/community/community_views/topic/topic_sliver_header.dart create mode 100644 lib/ui/community/community_views/widgets/chat_card.dart diff --git a/assets/images/placeholder.webp b/assets/images/placeholder.webp new file mode 100644 index 0000000000000000000000000000000000000000..0b27014f2ff1113ea93f06a97431196f1272d4a5 GIT binary patch literal 10322 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 headSculptureImgUrl; List gambitThemeCommentVoList; + String get firstImg { + var firstImg = ''; + if (imgUrls?.isNotEmpty ?? false) { + firstImg = imgUrls?.first?.url ?? ''; + } + return firstImg; + } + CommunityTopicModel( {this.id, this.createId, diff --git a/lib/pages/goods_manage_page/goods_manage_page.dart b/lib/pages/goods_manage_page/goods_manage_page.dart index f42b194f..1cacd960 100644 --- a/lib/pages/goods_manage_page/goods_manage_page.dart +++ b/lib/pages/goods_manage_page/goods_manage_page.dart @@ -53,7 +53,7 @@ class _GoodsManagePageState extends State { margin: EdgeInsets.only(right: 20.w), child: ClipRRect( child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image( model.imgUrls.isEmpty ? '' : model.imgUrls.first.url))), ), diff --git a/lib/ui/community/activity/activity_card.dart b/lib/ui/community/activity/activity_card.dart index 6683eca4..4e79ecb4 100644 --- a/lib/ui/community/activity/activity_card.dart +++ b/lib/ui/community/activity/activity_card.dart @@ -48,7 +48,7 @@ class ActivityCard extends StatelessWidget { child: Material( color: Colors.grey, child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(firstPath), height: 210.w, width: double.infinity, diff --git a/lib/ui/community/activity/activity_detail_page.dart b/lib/ui/community/activity/activity_detail_page.dart index f8e9efcb..4a3d2ca1 100644 --- a/lib/ui/community/activity/activity_detail_page.dart +++ b/lib/ui/community/activity/activity_detail_page.dart @@ -119,7 +119,7 @@ class _ActivityDetailPageState extends State { ), clipBehavior: Clip.antiAlias, child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: e.url, ), ), diff --git a/lib/ui/community/activity/activity_people_list_page.dart b/lib/ui/community/activity/activity_people_list_page.dart index fafaccfe..5edc6558 100644 --- a/lib/ui/community/activity/activity_people_list_page.dart +++ b/lib/ui/community/activity/activity_people_list_page.dart @@ -50,7 +50,7 @@ class _ActivityPeopleListPageState extends State { 96.hb, 20.wb, FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(model.imgUrl.first.url), height: 60.w, width: 60.w, diff --git a/lib/ui/community/community_views/topic/topic_community_view.dart b/lib/ui/community/community_views/topic/topic_community_view.dart index a1e4190c..22a08746 100644 --- a/lib/ui/community/community_views/topic/topic_community_view.dart +++ b/lib/ui/community/community_views/topic/topic_community_view.dart @@ -21,55 +21,55 @@ class _TopicCommunityViewState extends State EasyRefreshController _refreshController = EasyRefreshController(); _buildItem(CommunityTopicModel model) { - var firstImg = ''; - if (model?.imgUrls?.isNotEmpty ?? false) { - firstImg = model?.imgUrls?.first?.url ?? ''; - } return MaterialButton( padding: EdgeInsets.symmetric(horizontal: 53.w, vertical: 20.w), onPressed: () { - Get.to(TopicDetailPage(id: model.id)); + Get.to(TopicDetailPage(model: model)); }, child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - clipBehavior: Clip.antiAlias, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8.w), - color: Colors.black12, - ), - child: Stack( - children: [ - FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, - image: API.image(firstImg), - height: 160.w, - width: 250.w, - ), - Positioned( - bottom: 0, - left: 0, - right: 0, - child: ClipRRect( - borderRadius: BorderRadius.vertical( - bottom: Radius.circular(8.w), - ), - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), - //TODO 等待后端接口补充话题摘要 - // model.summary - child: ('#${''}') - .text - .center - .size(28.sp) - .white - .make() - .material(color: Colors.black26), + Hero( + tag: "${model.firstImg}_${model.id}", + child: Container( + clipBehavior: Clip.antiAlias, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.w), + color: Colors.black12, + ), + child: Stack( + children: [ + FadeInImage.assetNetwork( + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, + image: API.image(model.firstImg), + height: 160.w, + width: 250.w, + fit: BoxFit.cover, + ), + Positioned( + bottom: 0, + left: 0, + right: 0, + child: ClipRRect( + borderRadius: BorderRadius.vertical( + bottom: Radius.circular(8.w), + ), + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), + //TODO 等待后端接口补充话题摘要 + // model.summary + child: ('#${''}') + .text + .center + .size(28.sp) + .white + .make() + .material(color: Colors.black26), + ), ), ), - ), - ], + ], + ), ), ), 12.wb, diff --git a/lib/ui/community/community_views/topic/topic_detail_page.dart b/lib/ui/community/community_views/topic/topic_detail_page.dart index 0f0efcd1..32dd8457 100644 --- a/lib/ui/community/community_views/topic/topic_detail_page.dart +++ b/lib/ui/community/community_views/topic/topic_detail_page.dart @@ -1,10 +1,12 @@ -import 'package:akuCommunity/ui/community/community_views/topic/topic_scrollable_text.dart'; +import 'package:akuCommunity/model/community/community_topic_model.dart'; +import 'package:akuCommunity/ui/community/community_views/topic/topic_sliver_header.dart'; import 'package:akuCommunity/utils/headers.dart'; import 'package:flutter/material.dart'; class TopicDetailPage extends StatefulWidget { - final int id; - TopicDetailPage({Key key, @required this.id}) : super(key: key); + final CommunityTopicModel model; + + TopicDetailPage({Key key, this.model}) : super(key: key); @override _TopicDetailPageState createState() => _TopicDetailPageState(); @@ -16,17 +18,14 @@ class _TopicDetailPageState extends State { return Scaffold( body: CustomScrollView( slivers: [ - SliverAppBar( - expandedHeight: 500.w, - backgroundColor: Colors.transparent, - elevation: 0, - pinned: true, - flexibleSpace: FlexibleSpaceBar( - title: TopicScrollableText(title: '#TEST'), - titlePadding: EdgeInsets.zero, - collapseMode: CollapseMode.pin, - background: Container(color: Colors.red), + SliverPersistentHeader( + delegate: TopicSliverHeader( + id: widget.model.id, + title: 'TEST', + imgPath: widget.model.firstImg, + subTitle: widget.model.content, ), + pinned: true, ), SliverToBoxAdapter( child: 40000.hb, diff --git a/lib/ui/community/community_views/topic/topic_scrollable_text.dart b/lib/ui/community/community_views/topic/topic_scrollable_text.dart deleted file mode 100644 index bb23f6e0..00000000 --- a/lib/ui/community/community_views/topic/topic_scrollable_text.dart +++ /dev/null @@ -1,47 +0,0 @@ -import 'package:akuCommunity/utils/headers.dart'; -import 'package:flutter/material.dart'; - -class TopicScrollableText extends StatefulWidget { - final String title; - TopicScrollableText({Key key, @required this.title}) : super(key: key); - - @override - _TopicScrollableTextState createState() => _TopicScrollableTextState(); -} - -class _TopicScrollableTextState extends State { - ScrollPosition _scrollPosition; - - _positionListener() { - setState(() {}); - } - - @override - void dispose() { - _scrollPosition?.removeListener(_positionListener); - super.dispose(); - } - - @override - void didChangeDependencies() { - super.didChangeDependencies(); - _scrollPosition = Scrollable.of(context)?.position; - _scrollPosition?.addListener(_positionListener); - } - - double get offset { - if (_scrollPosition.pixels >= 500.w) return 1; - if (_scrollPosition.pixels < 500.w && _scrollPosition.pixels >= 0) { - return _scrollPosition.pixels / 500.w; - } else - return 0; - } - - @override - Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.only(bottom: 202.w - offset * 160.w), - child: Text(widget.title), - ); - } -} diff --git a/lib/ui/community/community_views/topic/topic_sliver_header.dart b/lib/ui/community/community_views/topic/topic_sliver_header.dart new file mode 100644 index 00000000..8a27ebd2 --- /dev/null +++ b/lib/ui/community/community_views/topic/topic_sliver_header.dart @@ -0,0 +1,114 @@ +import 'package:akuCommunity/constants/api.dart'; +import 'package:akuCommunity/utils/headers.dart'; +import 'package:akuCommunity/widget/bee_back_button.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class TopicSliverHeader extends SliverPersistentHeaderDelegate { + final String imgPath; + final String title; + final String subTitle; + final int id; + + TopicSliverHeader({ + this.imgPath, + this.title, + this.subTitle, + @required this.id, + }); + + _buildOverlay(double shrinkOffset) { + return Positioned( + left: 0, + right: 0, + top: 0, + bottom: 0, + child: Material( + color: Colors.white.withOpacity(0 + 0.5 * _offset(shrinkOffset)), + ), + ); + } + + _buildBackButton() { + return Positioned( + left: 0, + top: ScreenUtil().statusBarHeight, + child: BeeBackButton().material( + color: Colors.transparent, + clipBehavior: Clip.antiAlias, + borderRadius: BorderRadius.circular(24), + ), + ); + } + + _buildTitle(double shrinkOffset) { + return Positioned( + bottom: 202.w - 195.w * _filterOffset(shrinkOffset), + left: 32.w + (95.w - 32.w) * _offset(shrinkOffset), + child: '#$title'.text.bold.size(52.sp).make(), + ); + } + + _buildSubTitle(double shrinkOffset) { + return Positioned( + bottom: 104.w - 104.w * _offset(shrinkOffset) * 2, + left: 32.w, + child: Opacity( + opacity: 1 - _offset(shrinkOffset), + child: subTitle.text.size(24.sp).make(), + ), + ); + } + + @override + Widget build( + BuildContext context, double shrinkOffset, bool overlapsContent) { + return Container( + color: Colors.white, + child: Stack( + fit: StackFit.expand, + children: [ + Hero( + tag: "$imgPath\_$id", + child: FadeInImage.assetNetwork( + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, + image: API.image(imgPath), + fit: BoxFit.cover, + ), + ), + _buildOverlay(shrinkOffset), + _buildBackButton(), + _buildTitle(shrinkOffset), + _buildSubTitle(shrinkOffset), + ], + ), + ); + } + + double _offset(double shrinkOffset) { + if (shrinkOffset <= 0) + return 0; + else if (shrinkOffset > 0 && shrinkOffset <= maxExtent) + return shrinkOffset / maxExtent; + else + return 1; + } + + double _filterOffset(double shrinkOffset) { + var offset = _offset(shrinkOffset); + if (offset <= 0) return 0; + if (offset < 0.7) return offset / 0.7; + return 1; + } + + @override + double get maxExtent => 460.w + ScreenUtil().statusBarHeight; + + @override + double get minExtent => 48 + ScreenUtil().statusBarHeight; + + @override + bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) { + return true; + } +} diff --git a/lib/ui/community/community_views/widgets/chat_card.dart b/lib/ui/community/community_views/widgets/chat_card.dart new file mode 100644 index 00000000..f22fa476 --- /dev/null +++ b/lib/ui/community/community_views/widgets/chat_card.dart @@ -0,0 +1,17 @@ +import 'package:flutter/material.dart'; + +class ChatCard extends StatefulWidget { + final String name; + final String title; + ChatCard({Key key, this.name, this.title}) : super(key: key); + + @override + _ChatCardState createState() => _ChatCardState(); +} + +class _ChatCardState extends State { + @override + Widget build(BuildContext context) { + return Container(); + } +} diff --git a/lib/ui/community/notice/notice_card.dart b/lib/ui/community/notice/notice_card.dart index f2ad8dd0..c8f1b50a 100644 --- a/lib/ui/community/notice/notice_card.dart +++ b/lib/ui/community/notice/notice_card.dart @@ -96,7 +96,7 @@ class NoticeCard extends StatelessWidget { borderRadius: BorderRadius.circular(8.w), ), child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(model.imgUrls.first.url), width: 152.w, height: 152.w, diff --git a/lib/ui/community/notice/notice_detail_page.dart b/lib/ui/community/notice/notice_detail_page.dart index fe3dd637..f15f55bb 100644 --- a/lib/ui/community/notice/notice_detail_page.dart +++ b/lib/ui/community/notice/notice_detail_page.dart @@ -99,7 +99,7 @@ class _NoticeDetailPageState extends State { color: Colors.black12, ), child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(e.url), fit: BoxFit.cover, ), diff --git a/lib/widget/others/stack_avatar.dart b/lib/widget/others/stack_avatar.dart index ad2209e2..05662077 100644 --- a/lib/widget/others/stack_avatar.dart +++ b/lib/widget/others/stack_avatar.dart @@ -32,7 +32,7 @@ class StackAvatar extends StatelessWidget { child: FadeInImage.assetNetwork( height: 44.w, width: 44.w, - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(avatars[index]), ), ), diff --git a/lib/widget/picker/bee_image_preview.dart b/lib/widget/picker/bee_image_preview.dart index 43a43499..3c70c36b 100644 --- a/lib/widget/picker/bee_image_preview.dart +++ b/lib/widget/picker/bee_image_preview.dart @@ -33,7 +33,7 @@ class _BeeImagePreviewState extends State { return Hero( tag: widget.path, child: FadeInImage.assetNetwork( - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(widget.path), ), ); diff --git a/lib/widget/views/bee_grid_image_view.dart b/lib/widget/views/bee_grid_image_view.dart index f61e74e6..49df7e41 100644 --- a/lib/widget/views/bee_grid_image_view.dart +++ b/lib/widget/views/bee_grid_image_view.dart @@ -44,7 +44,7 @@ class BeeGridImageView extends StatelessWidget { child: FadeInImage.assetNetwork( height: 184.w, width: 184.w, - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(urls[index]), fit: BoxFit.cover, ), diff --git a/lib/widget/views/horizontal_image_view.dart b/lib/widget/views/horizontal_image_view.dart index d273143b..5f34eb21 100644 --- a/lib/widget/views/horizontal_image_view.dart +++ b/lib/widget/views/horizontal_image_view.dart @@ -43,7 +43,7 @@ class HorizontalImageView extends StatelessWidget { child: FadeInImage.assetNetwork( height: 184.w, width: 184.w, - placeholder: R.ASSETS_IMAGES_LOGO_PNG, + placeholder: R.ASSETS_IMAGES_PLACEHOLDER_WEBP, image: API.image(urls[index]), fit: BoxFit.cover, ),