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,达到效果。

你可能感兴趣的:(程序员,flutter,前端,javascript)