Flutter与OpenHarmony热门标签组件开发-开发者社区

前言

热门标签是内容平台中引导用户发现热点内容的重要组件。它以标签云或列表形式展示当前热门的话题、关键词或分类，帮助用户快速找到感兴趣的内容。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个视觉吸引、交互流畅的热门标签组件。

热门标签的设计需要考虑标签的排列方式、热度的视觉表达、以及点击后的跳转逻辑。不同热度的标签可以使用不同的颜色或大小来区分。

Flutter热门标签实现

标签数据定义

定义标签数据结构，包含名称和热度信息。

classTrendingTagsSectionextendsStatelessWidget{constTrendingTagsSection({super.key});@overrideWidgetbuild(BuildContextcontext){finaltags=[{'name':'苏绣技法','hot':true,'count':'2.3K'},{'name':'花卉刺绣','hot':true,'count':'1.8K'},{'name':'入门教程','hot':false,'count':'1.2K'},{'name':'丝线选择','hot':false,'count':'986'},{'name':'绣绷使用','hot':false,'count':'756'},{'name':'配色技巧','hot':true,'count':'1.5K'},];

每个标签包含名称、是否热门、以及讨论数量。hot字段用于决定是否显示热门标识。

标签布局实现

使用Wrap组件实现自动换行的标签布局。

returnContainer(margin:constEdgeInsets.symmetric(horizontal:16),padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.05),blurRadius:5)],),child:Wrap(spacing:10,runSpacing:10,children:tags.map((tag){finalisHot=tag['hot']asbool;returnGestureDetector(onTap:()=>ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('查看#${tag['name']}#相关内容'),duration:constDuration(seconds:1)),),child:Container(padding:constEdgeInsets.symmetric(horizontal:12,vertical:8),decoration:BoxDecoration(color:isHot?constColor(0xFF8B4513).withOpacity(0.1):Colors.grey[100],borderRadius:BorderRadius.circular(20),border:isHot?Border.all(color:constColor(0xFF8B4513).withOpacity(0.3)):null,),

Wrap组件自动处理标签的换行，spacing控制水平间距，runSpacing控制行间距。热门标签使用品牌色背景和边框突出显示。

标签内容构建

标签内包含名称、热门图标和讨论数量。

child:Row(mainAxisSize:MainAxisSize.min,children:[if(isHot)Padding(padding:constEdgeInsets.only(right:4),child:Icon(Icons.local_fire_department,size:14,color:Colors.orange[700]),),Text('#${tag['name']}#',style:TextStyle(fontSize:13,color:isHot?constColor(0xFF8B4513):Colors.grey[700],fontWeight:isHot?FontWeight.w500:FontWeight.normal,),),constSizedBox(width:4),Text(tag['count']asString,style:TextStyle(fontSize:11,color:Colors.grey[500]),),],),),);}).toList(),),);}}

mainAxisSize.min使Row宽度自适应内容。热门标签显示火焰图标和粗体文字。讨论数量使用小字号灰色显示。

OpenHarmony鸿蒙实现

组件与数据定义

鸿蒙平台定义标签数据接口。

interfaceTagItem{name:stringhot:booleancount:string}@Componentstruct TrendingTagsComponent{privatetags:Array<TagItem>=[{name:'苏绣技法',hot:true,count:'2.3K'},{name:'花卉刺绣',hot:true,count:'1.8K'},{name:'入门教程',hot:false,count:'1.2K'},{name:'丝线选择',hot:false,count:'986'},{name:'绣绷使用',hot:false,count:'756'},{name:'配色技巧',hot:true,count:'1.5K'}]

TypeScript接口定义标签数据结构。

Flex布局实现

使用Flex组件实现自动换行布局。

build(){Column(){Flex({wrap:FlexWrap.Wrap}){ForEach(this.tags,(item:TagItem)=>{Row(){if(item.hot){Image($r('app.media.fire')).width(14).height(14).fillColor('#FF6D00').margin({right:4})}Text('#'+item.name+'#').fontSize(13).fontColor(item.hot?'#8B4513':'#666666').fontWeight(item.hot?FontWeight.Medium:FontWeight.Normal)Text(item.count).fontSize(11).fontColor('#999999').margin({left:4})}.padding({left:12,right:12,top:8,bottom:8}).backgroundColor(item.hot?'#8B45131A':'#F5F5F5').borderRadius(20).border(item.hot?{width:1,color:'#8B45134D'}:{}).margin(5).onClick(()=>{promptAction.showToast({message:'查看#'+item.name+'#相关内容'})})})}}.width('90%').padding(16).backgroundColor(Color.White).borderRadius(12)}}