padding: EdgeInsets.only(top: 100.0),
child: Column(
children: [
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
],
),
);
}
效果图:
不同宽度的虚线只需要修改属性width,达到效果。
水平虚线实现:
效果图:
2、解决问题奇葩方式二:
多个Containter相邻而且相同间距拼凑成水平线,然后进行一个旋转:
_lineContainer() {
return Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(left: 2.0),
color: Colors.green,
height: 2.0,
width: 8.0,
);
}
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.white,
alignment: Alignment.topLeft,
padding: EdgeInsets.only(top: 300.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.transparent),
child: Transform.rotate(
//旋转90度
angle: math.pi / 2,
child: Row(
children: [
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
_lineContainer(),
],
),
),
),
);
}
效果如下:
3、今天主要提及的CustomPaint+画布(Canvas)
涉及的几个点:画笔(Paint)、样式(PaintingStyle)、color(颜色)、线条宽度(strokeWidth);
offset(第一参数,第二参数):表示第一参数和第二参数之间的偏移量。
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
…isAntiAlias = true
…style = PaintingStyle.fill //填充
…color = Color(0x77cdb175); //背景为纸黄色
canvas.dra
wRect(Offset.zero & size, paint);
paint
…style = PaintingStyle.stroke //线
…color = Colors.red
…strokeWidth = 1.0;
for (int i = 0; i <= 35; ++i) {
double dx = 6.0 * i;
canvas.drawLine(Offset(dx, 20), Offset(dx, 22), paint);
}
}
//在实际场景中正确利用此回调可以避免重绘开销,本示例我们简单的返回true
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
引用自定义绘画:
@override
Widget build(BuildContext context) {
return Container(color: Colors.white,child :Center(
child: CustomPaint(
size: Size(300, 300), //指定画布大小
painter: MyPainter(),
),
));
}
效果渐渐离我们很近了:
最后
小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
资料⬅专栏获取
小编这些年深知大多数初中级Android工程师,想要提升自己,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
[外链图片转存中…(img-sWjmM4DB-1719053804098)]
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
资料⬅专栏获取