flutter 用canvas绘制边框并实现动画效果

最新推荐文章于 2025-09-24 14:07:38 发布

原创

最新推荐文章于 2025-09-24 14:07:38 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #边框动画 #flutter

此篇博客介绍如何在Flutter中创建一个带有圆角边框且能动态切割的按钮。通过`CustomPaint`、`Path`、`PathMetric`和`AnimationController`实现轨迹动画，详细展示了代码实现过程及使用示例。

代码如下
利用 RRect绘制带radius的盒子和边际线利用Path设置边界线轨迹
利用PathMetric和AnimationController达成轨迹动画效果

import 'dart:ui';

import 'package:flutter/material.dart';

class CutDownBorderButton extends StatefulWidget {
  const CutDownBorderButton(
      {Key? key,
      this.radius,
      required this.width,
      required this.height,
      required this.cutController,
      this.initBorderColor,
      this.activeBorderColor,
      this.borderWidth})
      : super(key: key);

  @override
  _CutWidgetState createState() => _CutWidgetState();

  final double? radius;
  final double width;
  final double height;
  final Color? initBorderColor;
  final Color? activeBorderColor;
  final double? borderWidth;
  final CutController cutController;
}

class _CutWidgetState extends State<CutDownBorderButton> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CustomSingleChildLayout(
        delegate: _SingleC