HyperNet/Surface
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize news design

Browse Source
This commit is contained in:
LittleSheep 2025-01-28 20:19:02 +08:00
parent 0dbb8f132a
commit 5c2804cc4d
4 changed files with 142 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/screens/explore.dart
View File

@ -7,6 +7,7 @@ import 'package:go_router/go_router.dart';
import 'package:material_symbols_icons/symbols.dart'; import 'package:material_symbols_icons/symbols.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart'; import 'package:styled_widget/styled_widget.dart';
import 'package:surface/providers/config.dart';
import 'package:surface/providers/post.dart'; import 'package:surface/providers/post.dart';
import 'package:surface/providers/sn_network.dart'; import 'package:surface/providers/sn_network.dart';
import 'package:surface/screens/post/post_detail.dart'; import 'package:surface/screens/post/post_detail.dart';
@ -96,6 +97,8 @@ class _ExploreScreenState extends State<ExploreScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final cfg = context.read<ConfigProvider>();
return AppScaffold( return AppScaffold(
floatingActionButtonLocation: ExpandableFab.location, floatingActionButtonLocation: ExpandableFab.location,
floatingActionButton: ExpandableFab( floatingActionButton: ExpandableFab(
@ -243,8 +246,10 @@ class _ExploreScreenState extends State<ExploreScreen> {
), ),
openColor: Colors.transparent, openColor: Colors.transparent,
openElevation: 0, openElevation: 0,
closedColor: Theme.of(context).colorScheme.surfaceContainerLow.withOpacity(0.75),
transitionType: ContainerTransitionType.fade, transitionType: ContainerTransitionType.fade,
closedColor: Theme.of(context).colorScheme.surfaceContainerLow.withOpacity(
cfg.prefs.getBool(kAppBackgroundStoreKey) == true ? 0.75 : 1,
),
closedShape: const RoundedRectangleBorder( closedShape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)), borderRadius: BorderRadius.all(Radius.circular(16)),
), ),

6
lib/screens/home.dart
View File

@ -51,7 +51,7 @@ class HomeScreen extends StatefulWidget {
} }
class _HomeScreenState extends State<HomeScreen> { class _HomeScreenState extends State<HomeScreen> {
static const List<HomeScreenDashEntry> kCards = [ late final List<HomeScreenDashEntry> kCards = [
HomeScreenDashEntry( HomeScreenDashEntry(
name: 'dashEntryRecommendation', name: 'dashEntryRecommendation',
child: _HomeDashRecommendationPostWidget(), child: _HomeDashRecommendationPostWidget(),
@ -69,7 +69,7 @@ class _HomeScreenState extends State<HomeScreen> {
HomeScreenDashEntry( HomeScreenDashEntry(
name: 'dashEntryTodayNews', name: 'dashEntryTodayNews',
child: _HomeDashTodayNews(), child: _HomeDashTodayNews(),
cols: 2, cols: MediaQuery.of(context).size.width >= 640 ? 3 : 2,
), ),
]; ];
@ -293,7 +293,7 @@ class _HomeDashTodayNewsState extends State<_HomeDashTodayNews> {
Text( Text(
_article!.title, _article!.title,
style: Theme.of(context).textTheme.titleMedium!.copyWith(fontSize: 18), style: Theme.of(context).textTheme.titleMedium!.copyWith(fontSize: 18),
maxLines: 2, maxLines: MediaQuery.of(context).size.width >= 640 ? 2 : 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
Text( Text(

99
lib/screens/news/news_detail.dart
View File

@ -175,54 +175,57 @@ class _NewsDetailScreenState extends State<NewsDetailScreen> {
), ),
if (_articleFragment != null && _isReadingFromReader) if (_articleFragment != null && _isReadingFromReader)
Expanded( Expanded(
child: SingleChildScrollView( child: Container(
child: Column( constraints: BoxConstraints(maxWidth: 640),
crossAxisAlignment: CrossAxisAlignment.start, child: SingleChildScrollView(
spacing: 8, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Text(_article!.title, style: Theme.of(context).textTheme.titleLarge), spacing: 8,
Builder(builder: (context) { children: [
final htmlDescription = parse(_article!.description); Text(_article!.title, style: Theme.of(context).textTheme.titleLarge),
return Text( Builder(builder: (context) {
htmlDescription.children.map((ele) => ele.text.trim()).join(), final htmlDescription = parse(_article!.description);
style: Theme.of(context).textTheme.bodyMedium, return Text(
); htmlDescription.children.map((ele) => ele.text.trim()).join(),
}), style: Theme.of(context).textTheme.bodyMedium,
Builder(builder: (context) { );
final date = _article!.publishedAt ?? _article!.createdAt; }),
return Row( Builder(builder: (context) {
spacing: 2, final date = _article!.publishedAt ?? _article!.createdAt;
children: [ return Row(
Text(DateFormat().format(date)).textStyle(Theme.of(context).textTheme.bodySmall!), spacing: 2,
Text(' · ').textStyle(Theme.of(context).textTheme.bodySmall!).bold(), children: [
Text(RelativeTime(context).format(date)).textStyle(Theme.of(context).textTheme.bodySmall!), Text(DateFormat().format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
], Text(' · ').textStyle(Theme.of(context).textTheme.bodySmall!).bold(),
).opacity(0.75); Text(RelativeTime(context).format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
}), ],
Text('newsDisclaimer').tr().textStyle(Theme.of(context).textTheme.bodySmall!).opacity(0.75), ).opacity(0.75);
const Divider(), }),
..._parseHtmlToWidgets(_articleFragment!.children), Text('newsDisclaimer').tr().textStyle(Theme.of(context).textTheme.bodySmall!).opacity(0.75),
const Divider(), const Divider(),
InkWell( ..._parseHtmlToWidgets(_articleFragment!.children),
child: Row( const Divider(),
mainAxisSize: MainAxisSize.min, InkWell(
children: [ child: Row(
Text( mainAxisSize: MainAxisSize.min,
'Reference from original website', children: [
style: TextStyle(decoration: TextDecoration.underline), Text(
), 'Reference from original website',
const Gap(4), style: TextStyle(decoration: TextDecoration.underline),
Icon(Icons.launch, size: 16), ),
], const Gap(4),
).opacity(0.85), Icon(Icons.launch, size: 16),
onTap: () { ],
launchUrlString(_article!.url); ).opacity(0.85),
}, onTap: () {
), launchUrlString(_article!.url);
Gap(MediaQuery.of(context).padding.bottom), },
], ),
).padding(horizontal: 12, vertical: 16), Gap(MediaQuery.of(context).padding.bottom),
), ],
).padding(horizontal: 12, vertical: 16),
),
).center(),
) )
else if (_article != null) else if (_article != null)
Expanded( Expanded(

152
lib/screens/news/news_list.dart
View File

@ -70,11 +70,16 @@ class _NewsScreenState extends State<NewsScreen> {
sliver: SliverAppBar( sliver: SliverAppBar(
leading: AutoAppBarLeading(), leading: AutoAppBarLeading(),
title: Text('screenNews').tr(), title: Text('screenNews').tr(),
floating: true,
snap: true,
bottom: TabBar( bottom: TabBar(
isScrollable: true, isScrollable: true,
tabs: [ tabs: [
Tab(child: Text('newsAllSources'.tr())), Tab(child: Text('newsAllSources'.tr()).textColor(Theme.of(context).appBarTheme.foregroundColor)),
for (final source in _sources!) Tab(child: Text(source.label)), for (final source in _sources!)
Tab(
child: Text(source.label).textColor(Theme.of(context).appBarTheme.foregroundColor),
),
], ],
), ),
), ),
@ -146,80 +151,87 @@ class _NewsArticleListWidgetState extends State<_NewsArticleListWidget> {
return MediaQuery.removePadding( return MediaQuery.removePadding(
context: context, context: context,
removeTop: true, removeTop: true,
child: RefreshIndicator( child: Center(
onRefresh: _fetchArticles, child: Container(
child: InfiniteList( constraints: BoxConstraints(maxWidth: 640),
isLoading: _isBusy, child: RefreshIndicator(
itemCount: _articles.length, onRefresh: _fetchArticles,
hasReachedMax: _totalCount != null && _articles.length >= _totalCount!, child: InfiniteList(
onFetchData: () { isLoading: _isBusy,
_fetchArticles(); itemCount: _articles.length,
}, hasReachedMax: _totalCount != null && _articles.length >= _totalCount!,
itemBuilder: (context, index) { onFetchData: () {
final article = _articles[index]; _fetchArticles();
},
itemBuilder: (context, index) {
final article = _articles[index];
final baseUri = Uri.parse(article.url); final baseUri = Uri.parse(article.url);
final baseUrl = '${baseUri.scheme}://${baseUri.host}'; final baseUrl = '${baseUri.scheme}://${baseUri.host}';
final htmlDescription = parse(article.description); final htmlDescription = parse(article.description);
final date = article.publishedAt ?? article.createdAt; final date = article.publishedAt ?? article.createdAt;
return Card( return Card(
child: InkWell( child: InkWell(
radius: 8, radius: 8,
onTap: () { onTap: () {
GoRouter.of(context).pushNamed( GoRouter.of(context).pushNamed(
'newsDetail', 'newsDetail',
pathParameters: {'hash': article.hash}, pathParameters: {'hash': article.hash},
); );
}, },
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if (article.thumbnail.isNotEmpty && !article.thumbnail.endsWith('.svg')) if (article.thumbnail.isNotEmpty && !article.thumbnail.endsWith('.svg'))
ClipRRect( ClipRRect(
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topRight: Radius.circular(8), topRight: Radius.circular(8),
topLeft: Radius.circular(8), topLeft: Radius.circular(8),
), ),
child: AspectRatio( child: AspectRatio(
aspectRatio: 16 / 9, aspectRatio: 16 / 9,
child: Container( child: Container(
color: Theme.of(context).colorScheme.surfaceContainer, color: Theme.of(context).colorScheme.surfaceContainer,
child: AutoResizeUniversalImage( child: AutoResizeUniversalImage(
article.thumbnail.startsWith('http') ? article.thumbnail : '$baseUrl/${article.thumbnail}', article.thumbnail.startsWith('http')
? article.thumbnail
: '$baseUrl/${article.thumbnail}',
),
),
), ),
), ),
), const Gap(16),
), Text(article.title).textStyle(Theme.of(context).textTheme.titleLarge!).padding(horizontal: 16),
const Gap(16), const Gap(8),
Text(article.title).textStyle(Theme.of(context).textTheme.titleLarge!).padding(horizontal: 16), Text(htmlDescription.children.map((ele) => ele.text.trim()).join())
const Gap(8), .textStyle(Theme.of(context).textTheme.bodyMedium!)
Text(htmlDescription.children.map((ele) => ele.text.trim()).join()) .padding(horizontal: 16),
.textStyle(Theme.of(context).textTheme.bodyMedium!) const Gap(8),
.padding(horizontal: 16), Row(
const Gap(8), spacing: 2,
Row( children: [
spacing: 2, Text(widget.allSources.where((x) => x.id == article.source).first.label)
children: [ .textStyle(Theme.of(context).textTheme.bodySmall!),
Text(widget.allSources.where((x) => x.id == article.source).first.label) ],
.textStyle(Theme.of(context).textTheme.bodySmall!), ).opacity(0.75).padding(horizontal: 16),
Row(
spacing: 2,
children: [
Text(DateFormat().format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
Text(' · ').textStyle(Theme.of(context).textTheme.bodySmall!).bold(),
Text(RelativeTime(context).format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
],
).opacity(0.75).padding(horizontal: 16),
const Gap(16),
], ],
).opacity(0.75).padding(horizontal: 16), ),
Row( ),
spacing: 2, );
children: [ },
Text(DateFormat().format(date)).textStyle(Theme.of(context).textTheme.bodySmall!), ),
Text(' · ').textStyle(Theme.of(context).textTheme.bodySmall!).bold(), ),
Text(RelativeTime(context).format(date)).textStyle(Theme.of(context).textTheme.bodySmall!),
],
).opacity(0.75).padding(horizontal: 16),
const Gap(16),
],
),
),
);
},
), ),
), ),
); );