詳細可以訪問倉庫 HcUi: 重復創(chuàng)造Flutter 的輪子 在原有組件上拓展 展現(xiàn)出新的特性 (gitee.com)

介紹

可以快速構(gòu)建一個圖片文字的排列組件 不限于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

項目源碼

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

  //icon
  final Widget? icon;

  //間隔
  final double spacing;

  //排列
  final Axis direction;

  //是否翻轉(zhuǎn)
  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,
              );
  }
}