diff --git a/lib/pages/shop/home/widgets/product_item.dart b/lib/pages/shop/home/widgets/product_item.dart index cab0371..17c1f29 100644 --- a/lib/pages/shop/home/widgets/product_item.dart +++ b/lib/pages/shop/home/widgets/product_item.dart @@ -4,8 +4,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:wow_english/models/product_entity.dart'; class ProductItem extends StatelessWidget { - const ProductItem({super.key, - required this.onTap, this.entity}); + const ProductItem({super.key, required this.onTap, this.entity}); final ProductEntity? entity; @@ -15,52 +14,27 @@ class ProductItem extends StatelessWidget { Widget build(BuildContext context) { return Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10.r), - border: Border.all( - width: 1.0, - color: Colors.black - ) - // image: DecorationImage( - // image: AssetImage( - // ''.assetPng, - // ), - // fit: BoxFit.fill - // ) - ), - padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 16.h), + borderRadius: BorderRadius.circular(10.r), + border: Border.all(width: 1.0, color: Colors.black)), + padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( - width: 124.w, + width: 124.w, // 图片宽度 + height: 124.h, // 图片高度 decoration: BoxDecoration( - border: Border.all( - width: 1.0, - color: const Color(0xFF333333), - ), - image: DecorationImage( - image: NetworkImage(entity?.picUrl ?? ''), - ) + borderRadius: BorderRadius.circular(5), + // 圆角为5 + border: Border.all(width: 1.w, color: const Color(0xFF333333)), + // 边框宽度为1 + // 使用ClipRRect圆角会有间隙，ClipRRect在裁剪时可能会导致圆角部分的边框显示不完整。 + image: DecorationImage( + image: NetworkImage(entity?.picUrl ?? ''), // 图片地址 + fit: BoxFit.cover, // 图片填充方式 + ), ), ), - // CachedNetworkImage( - // imageUrl: entity?.picUrl ?? '', - // fit: BoxFit.fill, - // imageBuilder: (context, imageProvider) => - // Container( - // decoration: BoxDecoration( - // border: Border.all( - // width: 1.0, - // color: const Color(0xFF333333), - // ), - // borderRadius: BorderRadius.circular(5.0), - // ), - // ), - // placeholder: (context, url) => const CircularProgressIndicator(), - // // errorWidget: (context, url, error) => const Icon(Icons.error), - // height: 124.h, - // width: 124.w, - // ), 21.5.horizontalSpace, Expanded( child: Column( @@ -72,29 +46,24 @@ class ProductItem extends StatelessWidget { softWrap: true, textAlign: TextAlign.left, style: TextStyle( - fontSize: 12.sp, - color: const Color(0xFF333333) - ), + fontSize: 16.sp, color: const Color(0xFF333333)), ), RichText( - text: TextSpan( - children:[ - TextSpan( - text: '¥', - style: TextStyle( - fontSize: 21.sp, - color: const Color(0xFFF51A1A), - ) - ), - TextSpan( - text: entity?.price?.toString() ?? '', - style: TextStyle( - fontSize: 40.sp, - color: const Color(0xFFF51A1A), - ), - ) - ] - ), + text: TextSpan(children: [ + TextSpan( + text: '¥', + style: TextStyle( + fontSize: 21.sp, + color: const Color(0xFFF51A1A), + )), + TextSpan( + text: entity?.price?.toString() ?? '', + style: TextStyle( + fontSize: 40.sp, + color: const Color(0xFFF51A1A), + ), + ) + ]), ), GestureDetector( onTap: () { @@ -107,8 +76,7 @@ class ProductItem extends StatelessWidget { border: Border.all( color: const Color(0xFF333333), width: 1.0, - ) - ), + )), padding: EdgeInsets.symmetric( vertical: 1.h, horizontal: 26.5.w, @@ -116,9 +84,7 @@ class ProductItem extends StatelessWidget { child: Text( '立即购买', style: TextStyle( - fontSize: 10.sp, - color: const Color(0xFF333333) - ), + fontSize: 10.sp, color: const Color(0xFF333333)), ), ), ) @@ -129,4 +95,4 @@ class ProductItem extends StatelessWidget { ), ); } -} \ No newline at end of file +} diff --git a/lib/pages/shopping/view.dart b/lib/pages/shopping/view.dart index 2ad5add..c5757bc 100644 --- a/lib/pages/shopping/view.dart +++ b/lib/pages/shopping/view.dart @@ -19,33 +19,31 @@ Widget buildRadioOption({ required bool isSelected, required ValueChanged onSelect, }) { - return - GestureDetector( - onTap: () { - onSelect(value); - }, - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Image(image: icon, width: 25.0.w, height: 25.0.h, fit: BoxFit.contain), - const SizedBox(width: 10.0), - Expanded( - child: Text( - text, - style: TextStyle(color: const Color(0xFF333333), fontSize: 12.5.sp), - ), + return GestureDetector( + onTap: () { + onSelect(value); + }, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image(image: icon, width: 25.0.w, height: 25.0.h, fit: BoxFit.contain), + const SizedBox(width: 10.0), + Expanded( + child: Text( + text, + style: TextStyle(color: const Color(0xFF333333), fontSize: 12.5.sp), ), - Image( - image: isSelected - ? AssetImage('checked'.assetPng) - : AssetImage('unchecked'.assetPng), - width: 22.0.w, - height: 22.0.h, - ), - ], - ), - ); - + ), + Image( + image: isSelected + ? AssetImage('checked'.assetPng) + : AssetImage('unchecked'.assetPng), + width: 22.0.w, + height: 22.0.h, + ), + ], + ), + ); } class ShoppingPage extends StatelessWidget { @@ -83,22 +81,22 @@ class _ShoppingView extends StatelessWidget { child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - CachedNetworkImage( - imageUrl: bloc.productData?.detailPicUrl ?? '', - imageBuilder: (context, imageProvider) => Container( - decoration: BoxDecoration( - image: DecorationImage( - image: imageProvider, - fit: BoxFit.cover, - ), - borderRadius: BorderRadius.circular(5.0), + Container( + width: 210.w, // 图片宽度 + height: 210.h, // 图片高度 + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(5.w), + // 圆角为5 + border: + Border.all(width: 1.w, color: const Color(0xFF333333)), + // 边框宽度为1 + // 使用ClipRRect圆角会有间隙，ClipRRect在裁剪时可能会导致圆角部分的边框显示不完整。 + image: DecorationImage( + image: NetworkImage(bloc.productData?.detailPicUrl ?? ''), + // 图片地址 + fit: BoxFit.cover, // 图片填充方式 ), ), - placeholder: (context, url) => - const CircularProgressIndicator(), - // errorWidget: (context, url, error) => const Icon(Icons.error), - height: 210.0.h, - width: 210.0.w, ), const SizedBox(width: 35.5), Expanded(child: _paymentWidget()) @@ -117,26 +115,21 @@ Widget _paymentWidget() => BlocBuilder( crossAxisAlignment: CrossAxisAlignment.start, children: [ RichText( - text: TextSpan( - children: [ - TextSpan( - text: '套餐价格：', - style: - TextStyle(color: const Color(0xFF333333), fontSize: 16.5.sp) - ), - TextSpan( - text: '￥${bloc.productData?.price ?? ''}', - style: - TextStyle(color: const Color(0xFFE5262A), fontSize: 16.5.sp) - ), - ] - ), + text: TextSpan(children: [ + TextSpan( + text: '套餐价格：', + style: TextStyle( + color: const Color(0xFF333333), fontSize: 16.5.sp)), + TextSpan( + text: '￥${bloc.productData?.price ?? ''}', + style: TextStyle( + color: const Color(0xFFE5262A), fontSize: 16.5.sp)), + ]), ), const SizedBox(height: 14.5), Text( '套餐名称：${bloc.productData?.name}', - style: - TextStyle(color: const Color(0xFF333333), fontSize: 16.sp), + style: TextStyle(color: const Color(0xFF333333), fontSize: 16.sp), maxLines: 2, ), const SizedBox(height: 14.5), @@ -158,7 +151,8 @@ Widget _paymentWidget() => BlocBuilder( value: PaymentChannel.wechatPay.payChannelType, icon: AssetImage('weixin'.assetPng), text: PaymentChannel.wechatPay.payChannelName, - isSelected: bloc.curPaymentChannel.payChannelType == PaymentChannel.wechatPay.payChannelType, + isSelected: bloc.curPaymentChannel.payChannelType == + PaymentChannel.wechatPay.payChannelType, onSelect: (newValue) { bloc.add(ChangePaymentChannelEvent(PaymentChannel.wechatPay)); }, @@ -168,7 +162,8 @@ Widget _paymentWidget() => BlocBuilder( value: PaymentChannel.aliPay.payChannelType, icon: AssetImage('zhifubao'.assetPng), text: PaymentChannel.aliPay.payChannelName, - isSelected: bloc.curPaymentChannel.payChannelType == PaymentChannel.aliPay.payChannelType, + isSelected: bloc.curPaymentChannel.payChannelType == + PaymentChannel.aliPay.payChannelType, onSelect: (newValue) { bloc.add(ChangePaymentChannelEvent(PaymentChannel.aliPay)); }, @@ -178,25 +173,26 @@ Widget _paymentWidget() => BlocBuilder( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ RichText( - text: TextSpan( - children: [ - const TextSpan( - text: '需支付：', - style: - TextStyle(color: Color(0xFF333333), fontSize: 12.5, fontFamily: 'PingFangSC-Regular') - ), - TextSpan( - text: '￥${bloc.productData?.price ?? ''}', - style: - TextStyle(color: const Color(0xFFE7383B), fontSize: 41.sp, fontFamily: 'PingFangSC-Regular') - ), - ] - ), + text: TextSpan(children: [ + const TextSpan( + text: '需支付：', + style: TextStyle( + color: Color(0xFF333333), + fontSize: 12.5, + fontFamily: 'PingFangSC-Regular')), + TextSpan( + text: '￥${bloc.productData?.price ?? ''}', + style: TextStyle( + color: const Color(0xFFE7383B), + fontSize: 41.sp, + fontFamily: 'PingFangSC-Regular')), + ]), ), // 确认支付按钮 GestureDetector( onTap: () { - bloc.add(DoPayEvent(bloc.productData, bloc.curPaymentChannel)); + bloc.add( + DoPayEvent(bloc.productData, bloc.curPaymentChannel)); }, child: Image( width: 105.w,