Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线（一）

有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。

1、解决问题奇葩方式一：

为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。

_lineContainer() {

return Container(

margin: EdgeInsets.only(top: 2.0),

color: Colors.blue,

height: 8.0,

width: 2.0,

);

}

@override

Widget build(BuildContext context) {

return Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height,

color: Colors.white,

padding: EdgeInsets.only(top: 100.0),

child: Column(

children: [

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

_lineContainer(),

],

),

);

}

效果图：

不同宽度的虚线只需要修改属性width，达到效果。