当前位置：首页 > news >正文

AtomGit Flutter鸿蒙客户端：仓库详情页

news 2026/6/7 17:56:16

路由参数

仓库详情页通过命名路由/repo进入，接收owner和name参数：

// 导航到详情页Navigator.pushNamed(context,'/repo',arguments:{'owner':'atomgit','name':'flutter-ohos'});// 详情页提取参数finalargs=ModalRoute.of(context)!.settings.argumentsasMap<String,dynamic>;finalowner=args['owner']asString;finalname=args['name']asString;

RepoDetailProvider

Provider 在创建时即开始加载数据：

classRepoDetailProviderextendsChangeNotifier{finalAtomGitApiClient_apiClient;Repository?_repository;String?_readme;bool _isLoading=false;String?_error;Future<void>load(Stringowner,Stringname)async{_isLoading=true;_error=null;notifyListeners();try{finalencodedOwner=Uri.encodeComponent(owner);finalencodedName=Uri.encodeComponent(name);finalresponse=await_apiClient.get('/repos/$encodedOwner/$encodedName',);finaldata=parseMap(response.data);if(data!=null){_repository=Repository.fromJson(data);}_readme=await_loadReadme(encodedOwner,encodedName,_repository?.defaultBranch??'main');}onApiExceptioncatch(e){_error=e.message;}catch(e){_error='加载失败:$e';}finally{_isLoading=false;notifyListeners();}}}

关键细节：owner 和 name 都经过Uri.encodeComponent编码，处理含特殊字符的仓库路径。

README 加载

README 加载采用静默失败策略 —— 没有 README 不报错，只是不展示：

Future<String?>_loadReadme(Stringowner,Stringrepo,Stringbranch)async{try{finalresponse=await_apiClient.get('/repos/$owner/$repo/readme',queryParams:{'ref':branch},);finaldata=parseMap(response.data);if(data!=null&&data['content']isString){finalcontent=data['content']asString;returnutf8.decode(base64.decode(content));}}onApiException{// README 不存在是正常的，不报错}catch(_){}returnnull;}

API 返回的 README 内容是 Base64 编码的，解码后用MarkdownViewer渲染。

页面结构

RepoDetailScreen 是 StatelessWidget，通过 ChangeNotifierProvider 注入 Provider：

classRepoDetailScreenextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){finalargs=ModalRoute.of(context)!.settings.argumentsasMap<String,dynamic>;finalowner=args['owner']asString;finalname=args['name']asString;returnChangeNotifierProvider(create:(_)=>RepoDetailProvider(context.read<AtomGitApiClient>())..load(owner,name),child:_RepoDetailBody(owner:owner,name:name),);}}

自定义 Tab 栏

不使用 Flutter 的 TabBar/TabBarView，而是自定义 Row 按钮实现四个标签切换：

enum_DetailTab{code,issues,pulls,readme}class_RepoDetailBodyStateextendsState<_RepoDetailBody>{_DetailTab _currentTab=_DetailTab.readme;Widget_buildTabBar(){returnMaterial(elevation:1,child:Padding(padding:constEdgeInsets.symmetric(horizontal:16,vertical:8),child:Row(children:[_TabButton(label:'代码',isSelected:_currentTab==_DetailTab.code,onTap:(){Navigator.pushNamed(context,'/repo/code',arguments:{'owner':widget.owner,'name':widget.name,'branch':provider.repository?.defaultBranch??'main',});},),_TabButton(label:'Issues',isSelected:_currentTab==_DetailTab.issues,onTap:(){Navigator.pushNamed(context,'/repo/issues',arguments:{'owner':widget.owner,'name':widget.name,'type':'issue',});},),_TabButton(label:'PRs',isSelected:_currentTab==_DetailTab.pulls,onTap:(){Navigator.pushNamed(context,'/repo/pulls',arguments:{'owner':widget.owner,'name':widget.name,'type':'pr',});},),_TabButton(label:'README',isSelected:_currentTab==_DetailTab.readme,onTap:()=>setState(()=>_currentTab=_DetailTab.readme),),],),),);}}

每个按钮的选中态通过底部蓝色指示条实现：

class_TabButtonextendsStatelessWidget{finalStringlabel;finalbool isSelected;finalVoidCallbackonTap;Widgetbuild(BuildContextcontext){returnExpanded(child:GestureDetector(onTap:onTap,child:Column(children:[Text(label,style:TextStyle(color:isSelected?Theme.of(context).colorScheme.primary:null,fontWeight:isSelected?FontWeight.w600:null,)),if(isSelected)Container(height:2,margin:constEdgeInsets.only(top:4),color:Theme.of(context).colorScheme.primary,),],),),);}}

头部信息区

仓库名、描述、统计数据以卡片形式展示：

Widget_buildRepoHeader(Repositoryrepo){returnCard(margin:constEdgeInsets.all(16),child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Icon(repo.isPrivate?Icons.lock_outline:Icons.book_outlined,size:20),constSizedBox(width:8),Expanded(child:Text(repo.fullName,style:Theme.of(context).textTheme.titleMedium)),]),if(repo.description!=null)...[constSizedBox(height:8),Text(repo.description!),],constSizedBox(height:12),Row(children:[_StatItem(Icons.star_border,'${repo.stargazersCount}'),_StatItem(Icons.call_split,'${repo.forksCount}'),_StatItem(Icons.remove_red_eye_outlined,'${repo.watchersCount}'),_StatItem(Icons.error_outline,'${repo.openIssuesCount}'),]),],),),);}

README 渲染

Widget_buildReadme(RepoDetailProviderprovider){if(provider.readme==null||provider.readme!.isEmpty){returnconstCenter(child:Text('暂无 README'));}returnSingleChildScrollView(padding:constEdgeInsets.all(16),child:MarkdownViewer(markdown:provider.readme!),);}

状态处理

三种状态的完整处理：

Widget_buildBody(RepoDetailProviderprovider){if(provider.error!=null&&provider.repository==null){returnErrorRetryWidget(message:provider.error!,onRetry:()=>provider.load(widget.owner,widget.name),);}if(provider.repository==null){returnconstLoadingIndicator(message:'加载仓库信息...');}returnColumn(children:[_buildTabBar(),Expanded(child:_buildReadme(provider)),]);}