mirror of
https://github.com/bggRGjQaUbCoE/PiliPlus.git
synced 2026-05-02 16:19:44 +08:00
feat: article list
Closes #841 Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
bggRGjQaUbCoE
33
lib/pages/article_list/controller.dart
Normal file
33
lib/pages/article_list/controller.dart
Normal file
@@ -0,0 +1,33 @@
|
||||
import 'package:PiliPlus/http/dynamics.dart';
|
||||
import 'package:PiliPlus/http/loading_state.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/article.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/author.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/data.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/list.dart';
|
||||
import 'package:PiliPlus/pages/common/common_list_controller.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class ArticleListController
|
||||
extends CommonListController<ArticleListData, Article> {
|
||||
final id = Get.parameters['id'];
|
||||
|
||||
@override
|
||||
void onInit() {
|
||||
super.onInit();
|
||||
queryData();
|
||||
}
|
||||
|
||||
ArticleList? list;
|
||||
Author? author;
|
||||
|
||||
@override
|
||||
List<Article>? getDataList(ArticleListData response) {
|
||||
list = response.list;
|
||||
author = response.author;
|
||||
return response.articles;
|
||||
}
|
||||
|
||||
@override
|
||||
Future<LoadingState<ArticleListData>> customGetData() =>
|
||||
DynamicsHttp.articleList(id: id);
|
||||
}
|
||||
192
lib/pages/article_list/view.dart
Normal file
192
lib/pages/article_list/view.dart
Normal file
@@ -0,0 +1,192 @@
|
||||
import 'package:PiliPlus/common/constants.dart';
|
||||
import 'package:PiliPlus/common/skeleton/video_card_h.dart';
|
||||
import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
|
||||
import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
|
||||
import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
|
||||
import 'package:PiliPlus/http/loading_state.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/article.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/list.dart';
|
||||
import 'package:PiliPlus/pages/article_list/controller.dart';
|
||||
import 'package:PiliPlus/pages/article_list/widgets/item.dart';
|
||||
import 'package:PiliPlus/utils/grid.dart';
|
||||
import 'package:PiliPlus/utils/utils.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class ArticleListPage extends StatefulWidget {
|
||||
const ArticleListPage({super.key});
|
||||
|
||||
@override
|
||||
State<ArticleListPage> createState() => _ArticleListPageState();
|
||||
}
|
||||
|
||||
class _ArticleListPageState extends State<ArticleListPage> {
|
||||
final _controller =
|
||||
Get.put(ArticleListController(), tag: Utils.generateRandomString(8));
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ThemeData theme = Theme.of(context);
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
bottom: false,
|
||||
child: refreshIndicator(
|
||||
onRefresh: _controller.onRefresh,
|
||||
child: CustomScrollView(
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: MediaQuery.paddingOf(context).bottom + 80),
|
||||
sliver: Obx(
|
||||
() => _buildBody(theme, _controller.loadingState.value)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(
|
||||
ThemeData theme, LoadingState<List<Article>?> loadingState) {
|
||||
return switch (loadingState) {
|
||||
Loading() => SliverPadding(
|
||||
padding: EdgeInsets.only(
|
||||
top: MediaQuery.paddingOf(context).top + kToolbarHeight + 120),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: Grid.videoCardHDelegate(context),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) {
|
||||
return const VideoCardHSkeleton();
|
||||
},
|
||||
childCount: 10,
|
||||
),
|
||||
),
|
||||
),
|
||||
Success() => SliverMainAxisGroup(
|
||||
slivers: [
|
||||
if (_controller.list != null)
|
||||
_buildHeader(theme, _controller.list!),
|
||||
if (loadingState.response?.isNotEmpty == true)
|
||||
SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithExtentAndRatio(
|
||||
mainAxisSpacing: 2,
|
||||
maxCrossAxisExtent: Grid.smallCardWidth * 2,
|
||||
childAspectRatio: StyleString.aspectRatio * 2.6,
|
||||
minHeight: MediaQuery.textScalerOf(context).scale(90),
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) {
|
||||
return ArticleListItem(
|
||||
item: loadingState.response![index],
|
||||
);
|
||||
},
|
||||
childCount: loadingState.response!.length,
|
||||
),
|
||||
)
|
||||
else
|
||||
HttpError(onReload: _controller.onReload),
|
||||
],
|
||||
),
|
||||
Error() => HttpError(
|
||||
errMsg: loadingState.errMsg,
|
||||
onReload: _controller.onReload,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
Widget _buildHeader(ThemeData theme, ArticleList item) {
|
||||
late final style = TextStyle(color: theme.colorScheme.onSurfaceVariant);
|
||||
late final divider = TextSpan(
|
||||
text: ' | ',
|
||||
style: TextStyle(color: theme.colorScheme.outline.withOpacity(0.7)),
|
||||
);
|
||||
final padding = MediaQuery.paddingOf(context).top + kToolbarHeight;
|
||||
return SliverAppBar.medium(
|
||||
title: Text(item.name!),
|
||||
expandedHeight: kToolbarHeight + 130,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
background: Container(
|
||||
height: 120,
|
||||
margin: EdgeInsets.only(
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: padding,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (item.imageUrl?.isNotEmpty == true)
|
||||
NetworkImgLayer(
|
||||
width: 91,
|
||||
height: 120,
|
||||
src: item.imageUrl,
|
||||
radius: 6,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
if (_controller.author != null) ...[
|
||||
const SizedBox(height: 10),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
Get.toNamed('/member?mid=${_controller.author!.mid}');
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
NetworkImgLayer(
|
||||
width: 30,
|
||||
height: 30,
|
||||
src: _controller.author!.face,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Text(_controller.author!.name!),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 10),
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(text: '${item.articlesCount}篇专栏'),
|
||||
divider,
|
||||
TextSpan(text: '${item.words}个字'),
|
||||
divider,
|
||||
TextSpan(text: '${item.read}次阅读'),
|
||||
],
|
||||
style: style,
|
||||
),
|
||||
),
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text:
|
||||
'${Utils.dateFormat(item.updateTime, formatType: 'day')}更新'),
|
||||
divider,
|
||||
TextSpan(text: '文集号: ${item.id}'),
|
||||
],
|
||||
style: style,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
113
lib/pages/article_list/widgets/item.dart
Normal file
113
lib/pages/article_list/widgets/item.dart
Normal file
@@ -0,0 +1,113 @@
|
||||
import 'package:PiliPlus/common/constants.dart';
|
||||
import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
|
||||
import 'package:PiliPlus/common/widgets/stat/stat.dart';
|
||||
import 'package:PiliPlus/models/dynamics/article_list/article.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class ArticleListItem extends StatelessWidget {
|
||||
const ArticleListItem({
|
||||
super.key,
|
||||
required this.item,
|
||||
});
|
||||
|
||||
final Article item;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
final dynIdStr = item.dynIdStr;
|
||||
Get.toNamed(
|
||||
'/articlePage',
|
||||
parameters: {
|
||||
'id': dynIdStr ?? item.id!.toString(),
|
||||
'type': dynIdStr != null ? 'opus' : 'read',
|
||||
},
|
||||
);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: StyleString.safeSpace,
|
||||
vertical: 5,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.title!,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
height: 1.42,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
if (item.summary != null)
|
||||
Text(
|
||||
item.summary!,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: theme.colorScheme.outline,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const Spacer(),
|
||||
Row(
|
||||
children: [
|
||||
StatView(
|
||||
context: context,
|
||||
value: item.stats?.view ?? 0,
|
||||
goto: 'picture',
|
||||
textColor: theme.colorScheme.outline,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
StatView(
|
||||
context: context,
|
||||
goto: 'like',
|
||||
value: item.stats?.like ?? 0,
|
||||
textColor: theme.colorScheme.outline,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
StatView(
|
||||
context: context,
|
||||
goto: 'reply',
|
||||
value: item.stats?.reply ?? 0,
|
||||
textColor: theme.colorScheme.outline,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (item.imageUrls?.isNotEmpty == true) ...[
|
||||
const SizedBox(width: 10),
|
||||
AspectRatio(
|
||||
aspectRatio: StyleString.aspectRatio,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, boxConstraints) {
|
||||
return NetworkImgLayer(
|
||||
src: item.imageUrls!.first,
|
||||
width: boxConstraints.maxWidth,
|
||||
height: boxConstraints.maxHeight,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user