flutter 学习之 做一个简单的画板(CustomPainter)

本文介绍如何在Flutter中使用CustomPainter进行绘图,通过三个步骤:继承CustomPainter并重写paint和shouldRepaint方法,利用Canvas进行绘制,以及使用CustomPaint构建Widget。文中以创建一个简单的画板为例,讲解了画点和线的操作,并讨论了如何处理手指滑动时的线条绘制。最后提到虽然目前实现存在不流畅的问题,但提供了源码地址以供进一步研究和优化。
摘要由CSDN通过智能技术生成

今天来学习一下flutter中的绘制,从如何使用Canvas draw/paint了解到,在Flutter中使用绘制方式自定义Widget,需要以下三个步骤:

  • 1.继承CustomPainter并重写paint方法和shouldRepaint方法

  • 2.在写paint方法中绘制内容

  • 3.使用CustomPaint来构建Widget

先通过写一个简单的画板来学习一下paint的使用

first:声明一个画纸的class,如上所说继承CustomPainter并重写paint方法和shouldRepaint方法

class Paper extends CustomPainter {
  Paper({
    @required this.lines,
    this.positions,
  }) {
    _paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;
  }

  Paint _paint;
  final List<List<TolyCircle>> lines;
  final List<TolyCircle> positions;
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    for (int i = 0; i < lines.length; i++) {
      drawLine(canvas, lines[i]);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: impleme
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您演示如何使用Flutter的Stepper来实现一个侧边进度条。 首先,我们需要在Flutter项目中添加Stepper组件的依赖。在pubspec.yaml文件中,添加如下代码: ```yaml dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 flutter_stepper: ^0.1.2 ``` 然后,我们在Flutter页面中创建一个StatefulWidget来显示Stepper组件。在这个例子中,我们将使用一个简单的列表来演示一个侧边进度条。 ```dart import 'package:flutter/material.dart'; import 'package:flutter_stepper/flutter_stepper.dart'; class SideProgressBar extends StatefulWidget { @override _SideProgressBarState createState() => _SideProgressBarState(); } class _SideProgressBarState extends State<SideProgressBar> { int _currentStep = 0; List<Step> _steps = [ Step( title: Text('Step 1'), content: Text('This is the first step.'), isActive: true, ), Step( title: Text('Step 2'), content: Text('This is the second step.'), isActive: true, ), Step( title: Text('Step 3'), content: Text('This is the third step.'), isActive: true, ), ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Expanded( child: Stepper( currentStep: _currentStep, steps: _steps, type: StepperType.vertical, onStepTapped: (int step) { setState(() { _currentStep = step; }); }, onStepContinue: () { setState(() { if (_currentStep < _steps.length - 1) { _currentStep++; } }); }, onStepCancel: () { setState(() { if (_currentStep > 0) { _currentStep--; } }); }, ), ), ], ), ), ); } } ``` 在这个示例中,我们使用了一个包含三个步骤的列表。我们还定义了一个_currentStep变量来跟踪当前步骤,并将Stepper组件包装在一个Expanded组件中,以便使它在屏幕上占用尽可能多的空间。 通过添加onStepTapped、onStepContinue和onStepCancel回调函数,我们可以让用户通过点击侧边进度条上的步骤来导航,或者通过点击“下一步”和“上一步”按钮来移动到下一个或上一个步骤。 最后,我们将整个Stepper包装在一个Scaffold组件内,以便在屏幕上显示。现在,您可以运行这个应用程序并查看您的侧边进度条是否正确显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值