AtomGit Flutter鸿蒙客户端：共享组件

组件库概览

项目中提取了 6 个可复用组件，位于lib/shared/widgets/和lib/features/repo/widgets/：

ErrorRetryWidget

classErrorRetryWidgetextendsStatelessWidget{finalStringmessage;finalVoidCallback?onRetry;constErrorRetryWidget({super.key,requiredthis.message,this.onRetry,});@overrideWidgetbuild(BuildContextcontext){returnCenter(child:Padding(padding:constEdgeInsets.all(32),child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.error_outline,size:64,color:Theme.of(context).colorScheme.error),constSizedBox(height:16),Text(message,textAlign:TextAlign.center,style:Theme.of(context).textTheme.bodyLarge),if(onRetry!=null)...[constSizedBox(height:24),FilledButton.icon(onPressed:onRetry,icon:constIcon(Icons.refresh),label:constText('重试'),),],],),),);}}

onRetry为可空参数 —— 提供时展示重试按钮，不提供时只展示错误信息。错误图标使用主题色colorScheme.error。

典型用法：

if(provider.error!=null&&provider.repositories.isEmpty){returnErrorRetryWidget(message:provider.error!,onRetry:()=>provider.load(),);}

LoadingIndicator

classLoadingIndicatorextendsStatelessWidget{finalString?message;constLoadingIndicator({super.key,this.message});@overrideWidgetbuild(BuildContextcontext){returnCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[constCircularProgressIndicator(),if(message!=null)...[constSizedBox(height:16),Text(message!,style:Theme.of(context).textTheme.bodyMedium),],],),);}}

简洁的居中加载指示器，可选文案。

MarkdownViewer

classMarkdownViewerextendsStatelessWidget{finalStringmarkdown;constMarkdownViewer({super.key,requiredthis.markdown});@overrideWidgetbuild(BuildContextcontext){returnMarkdownBody(data:markdown,styleSheet:MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(h1:Theme.of(context).textTheme.headlineSmall,h2:Theme.of(context).textTheme.titleLarge,h3:Theme.of(context).textTheme.titleMedium,p:Theme.of(context).textTheme.bodyMedium,code:TextStyle(fontFamily:'monospace',fontSize:13,backgroundColor:Theme.of(context).colorScheme.surfaceContainerHighest,),codeblockDecoration:BoxDecoration(color:Theme.of(context).colorScheme.surfaceContainerHighest,borderRadius:BorderRadius.circular(8),),),);}}

包装flutter_markdown的MarkdownBody，通过MarkdownStyleSheet.fromTheme()继承当前主题，再覆盖代码块和内联代码的样式。代码使用等宽字体和圆角背景容器。

PaginatedList

classPaginatedListextendsStatelessWidget{finalint itemCount;finalWidgetFunction(BuildContext,int)itemBuilder;finalVoidCallback?onLoadMore;finalbool isLoading;finalbool hasMore;finalStringemptyMessage;@overrideWidgetbuild(BuildContextcontext){if(itemCount==0&&!isLoading){returnCenter(child:Text(emptyMessage));}returnListView.builder(addAutomaticKeepAlives:true,itemCount:itemCount+(hasMore?1:0),itemBuilder:(context,index){if(index>=itemCount){returnconstPadding(padding:EdgeInsets.all(16),child:Center(child:CircularProgressIndicator()),);}returnitemBuilder(context,index);},);}}

addAutomaticKeepAlives: true保持列表项状态。当hasMore时在末尾追加加载指示器。空数据时展示emptyMessage。

UserAvatar

classUserAvatarextendsStatelessWidget{finalString?avatarUrl;finaldouble size;finalString?name;constUserAvatar({super.key,this.avatarUrl,this.size=40,this.name,});@overrideWidgetbuild(BuildContextcontext){if(avatarUrl!=null&&avatarUrl!.isNotEmpty){returnCircleAvatar(radius:size/2,backgroundImage:NetworkImage(avatarUrl!),);}returnCircleAvatar(radius:size/2,backgroundColor:Theme.of(context).colorScheme.primaryContainer,child:Text((name?.isNotEmpty==true)?name![0].toUpperCase():'?',style:TextStyle(fontSize:size*0.4,color:Theme.of(context).colorScheme.onPrimaryContainer,),),);}}

有头像 URL 时加载网络图片，无 URL 时显示首字母大写或?。字体大小随size等比缩放。

RepoCard

最复杂的共享组件，包含完整的仓库信息展示：

classRepoCardextendsStatelessWidget{finalRepositoryrepo;finalVoidCallback?onTap;@overrideWidgetbuild(BuildContextcontext){returnCard(margin:constEdgeInsets.symmetric(horizontal:16,vertical:6),child:InkWell(onTap:onTap,borderRadius:BorderRadius.circular(12),child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[_buildHeader(context),if(repo.description!=null)...[constSizedBox(height:8),_buildDescription(context),],constSizedBox(height:12),_buildStats(context),],),),),);}}

头部：私有/公开图标 + 仓库名

Widget_buildHeader(BuildContextcontext){returnRow(children:[_buildPrivacyIcon(),constSizedBox(width:8),Expanded(child:Text(repo.fullName,style:Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight:FontWeight.w600,)),),]);}Widget_buildPrivacyIcon(){if(repo.isPrivate){returnImage.asset('assets/images/private.png',width:16,height:16,errorBuilder:(_,__,___)=>constIcon(Icons.lock_outline,size:16),);}returnconstIcon(Icons.book_outlined,size:16);}

尝试加载私有仓库的本地图标，失败时 fallback 到 Material 图标。

描述（最多 2 行）

Widget_buildDescription(BuildContextcontext){returnText(repo.description!,maxLines:2,overflow:TextOverflow.ellipsis,style:Theme.of(context).textTheme.bodyMedium);}

统计行

Widget_buildStats(BuildContextcontext){returnRow(children:[_LanguageDot(language:repo.language),if(repo.language!=null)...[constSizedBox(width:4),Text(repo.language!,style:Theme.of(context).textTheme.bodySmall),constSizedBox(width:16),],Icon(Icons.star_border,size:16,color:Theme.of(context).colorScheme.onSurfaceVariant),constSizedBox(width:2),Text(_formatCount(repo.stargazersCount),style:Theme.of(context).textTheme.bodySmall),constSizedBox(width:12),Icon(Icons.call_split,size:16,color:Theme.of(context).colorScheme.onSurfaceVariant),constSizedBox(width:2),Text(_formatCount(repo.forksCount),style:Theme.of(context).textTheme.bodySmall),constSpacer(),Text(DateFormatter.relative(repo.updatedAt),style:Theme.of(context).textTheme.bodySmall),]);}

语言颜色映射

final_languageColors={'Dart':constColor(0xFF00B4AB),'Python':constColor(0xFF3572A5),'JavaScript':constColor(0xFFF7DF1E),'TypeScript':constColor(0xFF3178C6),'Java':constColor(0xFFB07219),'Go':constColor(0xFF00ADD8),'Rust':constColor(0xFFDEA584),'C++':constColor(0xFFF34B7D),'C':constColor(0xFF555555),'Swift':constColor(0xFFF05138),'Kotlin':constColor(0xFFA97BFF),};Widget_languageDot(String?language){finalcolor=_languageColors[language]??Colors.grey;returnContainer(width:12,height:12,decoration:BoxDecoration(color:color,shape:BoxShape.circle,),);}

11 种语言的 GitHub 风格配色，未知语言默认为灰色。

数量格式化

String_formatCount(int count){if(count>=1000){return'${(count/1000).toStringAsFixed(1)}k';}returncount.toString();}

设计原则

1. 无业务依赖—— 除 RepoCard 外，其余组件都是纯 UI，不依赖任何业务 Provider
2. 可空回调——onTap、onRetry、message等都可空，按需提供
3. 主题感知—— 所有颜色通过Theme.of(context)获取，支持深色模式
4. 最小状态—— 全部使用 StatelessWidget，状态由父组件管理