本地门户网站在线商城

本地门户网站,在线商城,大型网站建设兴田德润专业,佛山市专业的网站设计前言 商品详情页面是电商应用中最重要的转化页面。它需要展示商品图片、价格、规格、描述、评价等信息#xff0c;并提供加入购物车和立即购买的入口。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个功能完善的商品详情页面。 商品详情页面的设计直接影响用户的购买…前言商品详情页面是电商应用中最重要的转化页面。它需要展示商品图片、价格、规格、描述、评价等信息并提供加入购物车和立即购买的入口。本文将详细介绍如何在Flutter和OpenHarmony平台上实现一个功能完善的商品详情页面。商品详情页面的设计直接影响用户的购买决策需要在信息展示和购买引导之间取得平衡。Flutter商品详情页面实现页面结构设计商品详情页面接收商品名称参数。classProductDetailPageextendsStatefulWidget{finalStringproductName;constProductDetailPage({super.key,requiredthis.productName});overrideStateProductDetailPagecreateState()_ProductDetailPageState();}class_ProductDetailPageStateextendsStateProductDetailPage{int _quantity1;bool _isFavoritefalse;使用StatefulWidget管理数量和收藏状态。商品图片区域使用PageView实现商品图片轮播。overrideWidgetbuild(BuildContextcontext){returnScaffold(body:CustomScrollView(slivers:[SliverAppBar(expandedHeight:350,pinned:true,backgroundColor:constColor(0xFF8B4513),leading:IconButton(icon:constIcon(Icons.arrow_back,color:Colors.white),onPressed:()Navigator.pop(context),),actions:[IconButton(icon:Icon(_isFavorite?Icons.favorite:Icons.favorite_border,color:_isFavorite?Colors.red:Colors.white),onPressed:()setState(()_isFavorite!_isFavorite),),IconButton(icon:constIcon(Icons.share,color:Colors.white),onPressed:(){}),],flexibleSpace:FlexibleSpaceBar(background:Container(color:Colors.grey[200],child:constCenter(child:Icon(Icons.shopping_bag,size:100,color:Colors.grey)),),),),SliverAppBar实现可折叠的图片头部。收藏按钮根据状态显示不同图标和颜色。商品信息区域展示价格、名称和销量信息。SliverToBoxAdapter(child:Container(padding:constEdgeInsets.all(16),color:Colors.white,child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(crossAxisAlignment:CrossAxisAlignment.end,children:[constText(¥,style:TextStyle(fontSize:16,color:Color(0xFFE53935),fontWeight:FontWeight.bold)),constText(299,style:TextStyle(fontSize:28,color:Color(0xFFE53935),fontWeight:FontWeight.bold)),constSizedBox(width:8),Text(¥399,style:TextStyle(fontSize:14,color:Colors.grey[500],decoration:TextDecoration.lineThrough)),],),constSizedBox(height:8),Text(widget.productName,style:constTextStyle(fontSize:18,fontWeight:FontWeight.bold)),constSizedBox(height:8),Row(children:[Container(padding:constEdgeInsets.symmetric(horizontal:6,vertical:2),decoration:BoxDecoration(color:constColor(0xFFE53935).withOpacity(0.1),borderRadius:BorderRadius.circular(4)),child:constText(限时特惠,style:TextStyle(fontSize:10,color:Color(0xFFE53935))),),constSizedBox(width:8),Text(已售 1.2K,style:TextStyle(fontSize:12,color:Colors.grey[600])),constSpacer(),Row(children:[constIcon(Icons.star,size:14,color:Colors.amber),constSizedBox(width:2),Text(4.9,style:TextStyle(fontSize:12,color:Colors.grey[600])),],),],),],),),),价格使用红色突出显示原价使用删除线。促销标签和销量信息增强购买信心。数量选择与购买按钮底部固定的购买操作栏。],),bottomNavigationBar:Container(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.1),blurRadius:10,offset:constOffset(0,-5))],),child:Row(children:[Column(mainAxisSize:MainAxisSize.min,children:[constIcon(Icons.store_outlined,color:Colors.grey),Text(店铺,style:TextStyle(fontSize:10,color:Colors.grey[600])),],),constSizedBox(width:16),Column(mainAxisSize:MainAxisSize.min,children:[constIcon(Icons.chat_bubble_outline,color:Colors.grey),Text(客服,style:TextStyle(fontSize:10,color:Colors.grey[600])),],),constSizedBox(width:16),Expanded(child:Row(children:[Expanded(child:ElevatedButton(onPressed:(){},style:ElevatedButton.styleFrom(backgroundColor:constColor(0xFFFF9800),padding:constEdgeInsets.symmetric(vertical:12),shape:constRoundedRectangleBorder(borderRadius:BorderRadius.horizontal(left:Radius.circular(25)),),),child:constText(加入购物车,style:TextStyle(color:Colors.white)),),),Expanded(child:ElevatedButton(onPressed:(){},style:ElevatedButton.styleFrom(backgroundColor:constColor(0xFFE53935),padding:constEdgeInsets.symmetric(vertical:12),shape:constRoundedRectangleBorder(borderRadius:BorderRadius.horizontal(right:Radius.circular(25)),),),child:constText(立即购买,style:TextStyle(color:Colors.white)),),),],),),],),),);}}底部栏包含店铺、客服入口和购买按钮。加入购物车和立即购买使用不同颜色区分。OpenHarmony鸿蒙实现页面定义鸿蒙平台使用路由参数接收商品信息。EntryComponentstruct ProductDetailPage{StateproductName:stringStateisFavorite:booleanfalseStatequantity:number1aboutToAppear(){constparamsrouter.getParams()asRecordstring,stringthis.productNameparams?.name||商品详情}页面布局实现使用Scroll构建可滚动页面。build(){Column(){Scroll(){Column(){Stack(){Image($r(app.media.product_placeholder)).width(100%).height(350).objectFit(ImageFit.Cover)Row(){Image($r(app.media.back)).width(24).height(24).fillColor(Color.White).onClick(()router.back())Blank()Image(this.isFavorite?$r(app.media.heart_filled):$r(app.media.heart)).width(24).height(24).fillColor(this.isFavorite?#F44336:Color.White).onClick((){this.isFavorite!this.isFavorite})Image($r(app.media.share)).width(24).height(24).fillColor(Color.White).margin({left:16})}.width(100%).padding(16).position({y:40})}.width(100%).height(350).backgroundColor(#F0F0F0)Column(){Row(){Text(¥).fontSize(16).fontColor(#E53935).fontWeight(FontWeight.Bold)Text(299).fontSize(28).fontColor(#E53935).fontWeight(FontWeight.Bold)Text(¥399).fontSize(14).fontColor(#999999).decoration({type:TextDecorationType.LineThrough}).margin({left:8})}.alignItems(VerticalAlign.Bottom).width(100%)Text(this.productName).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#333333).margin({top:8}).width(100%)Row(){Text(限时特惠).fontSize(10).fontColor(#E53935).backgroundColor(#E539351A).borderRadius(4).padding({left:6,right:6,top:2,bottom:2})Text(已售 1.2K).fontSize(12).fontColor(#666666).margin({left:8})Blank()Image($r(app.media.star)).width(14).height(14).fillColor(#FFC107)Text(4.9).fontSize(12).fontColor(#666666).margin({left:2})}.width(100%).margin({top:8})}.width(100%).padding(16).backgroundColor(Color.White)}}.layoutWeight(1)Row(){Column(){Image($r(app.media.store)).width(20).height(20).fillColor(#999999)Text(店铺).fontSize(10).fontColor(#666666)}Column(){Image($r(app.media.service)).width(20).height(20).fillColor(#999999)Text(客服).fontSize(10).fontColor(#666666)}.margin({left:16})Row(){Button(加入购物车).fontSize(14).fontColor(Color.White).backgroundColor(#FF9800).layoutWeight(1).borderRadius({topLeft:25,bottomLeft:25})Button(立即购买).fontSize(14).fontColor(Color.White).backgroundColor(#E53935).layoutWeight(1).borderRadius({topRight:25,bottomRight:25})}.layoutWeight(1).margin({left:16})}.width(100%).height(60).padding({left:16,right:16}).backgroundColor(Color.White)}.width(100%).height(100%)}}底部购买栏固定显示。按钮使用不同颜色区分功能。总结本文介绍了Flutter和OpenHarmony平台上商品详情页面的实现方法。商品详情页面是电商应用的核心转化页面其设计需要突出商品信息并提供便捷的购买入口。