Flutter 虚线组件的封装

虚线的组件

如果在css里面我们直接弄一个样式就可以了

但是在flutter里面这样做很明显是不行的

flutter它这个是不支持虚线的

所以我们要自己封装一个

虚线的组件核心就是SizedBox

SizedBox就可以 显示这样的

这个东西就像一个一个的div块但是它是用flex布局拼起来的

• 注意使用这个东西的时候必须使用Container来包裹起来
• 如果是垂直排布就要设置高度 如果是 水平排布就要设置宽度
• 同时因该设置每个块的排布方式 Axis.vertical 时候垂直排布 默认的情况就是水平排布

属性

• axis SizedBox是垂直排布还是水平排布
• dashedWidth 每个块的宽度(水平排布时候的长度)
• dashedHeigth(垂直排布时候的长度)
• count：密度 个数
• color: 虚线颜色

// 封装虚线组件 虚线这个东西需要一个Container
class HYDashedLine extends StatelessWidget {
//    Flex Column/Row方向 Axis
  final Axis axis;
  final double dashedWidth;
  final double dashedHeight;
  final int count;
  final Color color;

  HYDashedLine({
    this.axis = Axis.horizontal,  // 方向
    this.dashedHeight = 1,            // 虚线厚度
    this.dashedWidth = 1,             // 虚线长度
    this.count = 10,
    this.color = Colors.red
  });

  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: axis,
//      这样才能铺开
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
//      用不上用_替代
      children: List.generate(count, (_) {
        return SizedBox(
            width: dashedWidth,
            height: dashedHeight,
//          这个东西是没有颜色的
//        为什么Dcoration
            child: DecoratedBox(
              decoration: BoxDecoration(color: color),
            )
        );
      }),
    );
  }
}

使用

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 200,
            child: HYDashedLine(dashedWidth: 8,),
          ),
          Container(
            height: 200,
            child: HYDashedLine(axis: Axis.vertical, dashedHeight: 8,)
          )
        ],
      )
    );
  }
}