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

介绍

可以根据方向快速构建实线与虚线的分隔符

Screenshot_2023-09-20-17-22-43-1222167720.png

代码演示

横向实线分隔符

 HcDivider(
    decoration: Axis.horizontal,
    color: Colors.blue,
    thickness: 1,
    ),

横向实线增加宽度分隔符

 HcDivider(
    //横向中spacing指宽度
    spacing:10
    decoration: Axis.horizontal,
    color: Colors.blue,
    thickness: 1,
    ),

横向增加距离起始位置的分隔符

       HcDivider(
            decoration: Axis.horizontal,
            color: Colors.blue,
            thickness: 1,
            indent: 8,
            endIndent: 8,
          ),

纵向实线分隔符

      HcDivider(
          decoration: Axis.vertical,
          color: Colors.blue,
          thickness: 1,
        )

API

props

HcDividerStyle

分隔符样式

项目源码

enum HcDividerStyle { solid, dashed }

class HcDivider extends StatelessWidget {
  //方向
  final Axis decoration;

  //颜色
  final Color? color;

  //厚度
  final double thickness;

  //距离开始距离
  final double indent;

  //距离结束距离
  final double endIndent;

  //间距
  final double spacing;

  //分隔符样式
  final HcDividerStyle style;

  //分隔符数量
  final int? dashedCounts;

  const HcDivider(
      {super.key,
      required this.decoration,
      this.color,
      this.thickness = 0.0,
      this.indent = 0.0,
      this.endIndent = 0.0,
      this.spacing = 12,
      this.style = HcDividerStyle.solid,
      this.dashedCounts});

  @override
  Widget build(BuildContext context) {
    //方向
    bool isVertical = decoration == Axis.vertical;
    //颜色
    Color finalColor = color ?? Theme.of(context).dividerColor;
    //实线下的边框
    BorderSide borderSide = BorderSide(color: finalColor, width: thickness);
    //如果是实线则按照设定的间距 如果是虚线则比较线段宽度与间距哪个更大
    double finalSpacing =
        style == HcDividerStyle.dashed ? max(spacing, thickness) : spacing;
    return SizedBox(
      height: !isVertical ? finalSpacing : null,
      width: isVertical ? finalSpacing : null,
      child: Center(
        child: Container(
          height: !isVertical ? thickness : null,
          width: isVertical ? thickness : null,
          margin: EdgeInsets.only(
            top: isVertical ? indent : 0,
            bottom: isVertical ? endIndent : 0,
            left: !isVertical ? indent : 0,
            right: !isVertical ? endIndent : 0,
          ),
          decoration: BoxDecoration(
              gradient: style == HcDividerStyle.dashed
                  ? HcGradientUtil.generateDividerDashed(
                      color: finalColor,
                      isVertical: isVertical,
                      dashedCounts: dashedCounts)
                  : null,
              border: style == HcDividerStyle.solid
                  ? Border(
                      bottom: !isVertical ? borderSide : BorderSide.none,
                      left: isVertical ? borderSide : BorderSide.none)
                  : null),
        ),
      ),
    );
  }
}