Flutter 重复造轮子 (11) Icon-text 图标-

详细可以访问仓库 HcUi: 重复创造Flutter 的轮子 在原有组件上拓展 展现出新的特性 (gitee.com)

介绍

可以快速构建一个图片文字的排列组件 不限于Icon与文字可以自由搭配

Screenshot_2023-09-17-17-50-22-0508296502.png

代码演示

文字在左图标在右

        HcIconText(
            label: Text("文字"),
            icon: Icon(Icons.abc_outlined),
          ),

图标在左文字在右

           HcIconText(
            reverse: true,
            label: Text("文字"),
            icon: Icon(Icons.abc_outlined),
          ),

图标在上文字在下

          HcIconText(
            direction: Axis.vertical,
            label: Text("文字"),
            icon: Icon(Icons.abc_outlined),
          ),

图标在下文字在上

        HcIconText(
            reverse: true,
            direction: Axis.vertical,
            label: Text("文字"),
            icon: Icon(Icons.abc_outlined),
          ),

增大间距

        HcIconText(
            reverse: true,
            direction: Axis.vertical,
            spacing: 20,
            label: Text("文字"),
            icon: Icon(Icons.abc_outlined),
          ),

复杂组件

         HcIconText(
            direction: Axis.vertical,
            label: Column(
              children: [Text("第一个组件"), Text("第二个组件")],
            ),
            icon: HcImage(
              width: 80,
              height: 80,
              src: 'assets/images/icon.jpeg',
            ),
          ),

API

props

参数	说明	类型	默认值	是否必填
label	文字	Widget?	-	false
icon	图标	Widget?	-	false
spacing	间隔	double	8.0	false
direction	方向	Axis	Axis.horizontal	false
reverse	是否翻转	bool	false	false
crossAxisAlignment	次轴对齐方式	crossAxisAlignment	false	false
mainAxisAlignment	主轴对齐方式	mainAxisAlignment	-	false
mainAxisSize	主轴方向大小	mainAxisSize	true	false

项目源码

class HcIconText extends StatelessWidget {
  //文字
  final Widget? label;

  //icon
  final Widget? icon;

  //间隔
  final double spacing;

  //排列
  final Axis direction;

  //是否翻转
  final bool reverse;

  //主轴对齐方式
  final MainAxisAlignment mainAxisAlignment;

  //次轴对齐方式
  final CrossAxisAlignment crossAxisAlignment;

  //主轴大小
  final MainAxisSize mainAxisSize;

  const HcIconText({
    super.key,
    this.label,
    this.icon,
    this.spacing = 8.0,
    this.direction = Axis.horizontal,
    this.reverse = false,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.mainAxisAlignment = MainAxisAlignment.center,
    this.mainAxisSize = MainAxisSize.min,
  });

  @override
  Widget build(BuildContext context) {
    List<Widget> list = List.empty(growable: true);
    if (icon != null) {
      list.add(icon!);
    }
    if (icon != null && label != null && (spacing != 0)) {
      list.add(HcSpace(
        width: spacing,
        height: spacing,
      ));
    }
    if (label != null) {
      list.add(label!);
    }
    if (list.isEmpty) {
      list.add(const SizedBox());
    }

    return list.length == 1
        ? list.first
        : direction == Axis.horizontal
            ? Row(
                mainAxisSize: mainAxisSize,
                crossAxisAlignment: crossAxisAlignment,
                mainAxisAlignment: mainAxisAlignment,
                textDirection: reverse ? TextDirection.rtl : TextDirection.ltr,
                children: list,
              )
            : Column(
                mainAxisSize: mainAxisSize,
                mainAxisAlignment: mainAxisAlignment,
                verticalDirection:
                    reverse ? VerticalDirection.up : VerticalDirection.down,
                crossAxisAlignment: crossAxisAlignment,
                children: list,
              );
  }
}