12.4 商品标题栏
实现步骤:
第 1 步:图标文字组件 编写
lib/common/widgets/icon_text.dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| import 'package:flutter/material.dart'; import '../index.dart';
class IconTextWidget extends StatelessWidget { final Widget? icon;
final String? text;
final IconData? iconData;
final double? iconSize;
final double? fontSize;
final Color? color;
final double? iconPadding;
const IconTextWidget({ Key? key, this.icon, this.text, this.iconData, this.iconSize, this.color, this.fontSize, this.iconPadding, }) : super(key: key);
@override Widget build(BuildContext context) { return <Widget>[ icon?.paddingRight(iconPadding ?? AppSpace.iconTextSmail) ?? IconWidget.icon( iconData ?? Icons.star, size: iconSize ?? 12, color: color ?? AppColors.primary, ).paddingRight(iconPadding ?? AppSpace.iconTextSmail),
TextWidget.body2( text ?? '', size: fontSize ?? 12, ), ] .toRow( mainAxisSize: MainAxisSize.min, ) .fittedBox( fit: BoxFit.none, clipBehavior: Clip.hardEdge, ); } }
|
第 2 步:视图
lib/pages/goods/product_details/view.dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| Widget _buildTitle() { return <Widget>[ <Widget>[ TextWidget.title1( "\$${controller.product?.price ?? 0}", ).expanded(), const IconTextWidget( iconData: Icons.star, text: "4.5", ).paddingRight(AppSpace.iconTextMedium), const IconTextWidget( iconData: Icons.favorite, text: "100+", ), ].toRow(),
TextWidget.body1( controller.product?.shortDescription?.clearHtml ?? "-", ), ] .toColumn( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, ) .paddingAll(AppSpace.page); }
|
提交代码到 git