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

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Flutter 开发微信悬浮窗时,需要使用到 Flutter自绘组件自绘组件Flutter 提供的一种自定义绘制 UI 的方式,它可以让开发者自由地控制 UI 的绘制过程,达到更高的自由度和灵活度。 在本篇文章中,我们将介绍如何使用 Flutter自绘组件来实现微信悬浮窗。首先,我们需要创建一个自绘组件,并在其中实现绘制逻辑。代码如下: ```dart class FloatWidget extends LeafRenderObjectWidget { @override RenderObject createRenderObject(BuildContext context) { return _FloatRenderBox(); } } class _FloatRenderBox extends RenderBox { @override void performLayout() { size = constraints.biggest; } @override void paint(PaintingContext context, Offset offset) { var canvas = context.canvas; var paint = Paint() ..color = Colors.green ..style = PaintingStyle.fill; canvas.drawCircle( Offset(size.width / 2, size.height / 2), size.width / 2, paint); } } ``` 上述代码中,`FloatWidget` 是一个自绘组件,它返回一个 `_FloatRenderBox` 实例。在 `_FloatRenderBox` 中,我们实现了 `performLayout` 方法和 `paint` 方法。 `performLayout` 方法用于指定组件的大小,这里我们将组件的大小设置为最大限制。`paint` 方法则用于实现具体的绘制逻辑,这里我们绘制了一个绿色的圆形。 接下来,我们可以将 `FloatWidget` 添加到我们的界面中,代码如下: ```dart class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ // ... Positioned( right: 20, bottom: 20, child: FloatWidget(), ), ], ), ); } } ``` 在上述代码中,我们使用了 `Positioned` 组件将 `FloatWidget` 定位在屏幕的右下角。现在运行程序,你就可以看到一个绿色的圆形出现在你的屏幕右下角了。 当然,这只是一个简单的例子,实现一个完整的悬浮窗还需要更多的细节处理。但是通过这个例子,你应该已经掌握了 Flutter 自绘组件的基本使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值