Flutter Clip 裁剪

Flutter Clip 裁剪
totem_four_logo.jpg
:-

1、目录

• 1、裁剪三角形
• 2、裁剪椭圆形
• 3、裁剪圆弧形

2、效果

效果图
totem_four_logo.jpg
:-

3、代码实现

class MainWavePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainWaveState();
  }
}

class _MainWaveState extends State<MainWavePage> {
  static const double min = 2;
  static const double max = 30;
  double _slideValue = min + 1;
  int _slideDivisions = (max - min).toInt();
  int _waveCount = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wave"),
      ),
      body: Column(
        children: <Widget>[
          Spacer(),
          Spacer(),
          Slider(
            value: _slideValue,
            min: min,
            max: max,
            divisions: _slideDivisions,
            label: "$_waveCount",
            onChanged: (double value) {
              setState(() {
                _slideValue = value;
                _waveCount = value.toInt();
              });
            },
          ),
          Divider(),
          Spacer(),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: ClipPath(
              key: GlobalKey(),
              clipBehavior: Clip.antiAlias,
              clipper:
                  WaveTriangleClipper(waveCount: _waveCount, isReverse: false),
              child: BlueGradient(),
            ),
          ),
          Divider(),
          Spacer(),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: ClipPath(
              key: GlobalKey(),
              clipBehavior: Clip.antiAlias,
              clipper: WaveOvalClipper(waveCount: _waveCount, isReverse: false),
              child: BlueGradient(),
            ),
          ),
          Divider(),
          Spacer(),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: ClipPath(
              key: GlobalKey(),
              clipBehavior: Clip.antiAlias,
              clipper: WaveArcClipper(waveCount: _waveCount, isReverse: false),
              child: BlueGradient(),
            ),
          ),
          Divider(),
          Spacer(),
          Spacer(),
        ],
      ),
    );
  }
}

class BlueGradient extends StatelessWidget {
  final overlayHeight = 50.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: overlayHeight,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.topCenter,
          end: FractionalOffset.bottomCenter,
          colors: [
            Colors.blue,
            Colors.blue.withOpacity(0.25),
          ],
        ),
      ),
    );
  }
}

• 1、裁剪三角形

import 'package:flutter/material.dart';

/// WaveTriangleClipper
///
/// 三角形效果的
class WaveTriangleClipper extends CustomClipper<Path> {
  int _count;
  bool _isReverse;

  WaveTriangleClipper({
    int waveCount,
    bool isReverse = false,
  }) {
    _count = waveCount;
    _isReverse = isReverse;
  }

  @override
  Path getClip(Size size) {
    var path = Path();

    var _segment = _count * 2;

    double pieceOfWidth = size.width / _segment;
    double pieceOfHeight = size.height;

    if (_isReverse) {
      path.moveTo(0, 0);
    } else {
      path.moveTo(0, pieceOfHeight);
    }

    for (int i = 0; i < _segment; i++) {
      double y = 0.0;

      if (_isReverse) {
        if (i % 2 == 1) {
          y = 0;
        } else {
          y = pieceOfHeight;
        }
      } else {
        if (i % 2 == 1) {
          y = pieceOfHeight;
        } else {
          y = 0;
        }
      }
      path.lineTo(pieceOfWidth * (i + 1), y);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

• 2、裁剪椭圆形

import 'package:flutter/material.dart';

/// WaveOvalClipper
///
/// 椭圆效果的
class WaveOvalClipper extends CustomClipper<Path> {
  int _count;
  bool _isReverse;

  WaveOvalClipper({
    int waveCount,
    bool isReverse = false,
  }) {
    _count = waveCount;
    _isReverse = isReverse;
  }

  @override
  Path getClip(Size size) {
    var path = Path();

    var _segment = _count * 2;

    double pieceOfWidth = size.width / _segment;
    double pieceOfHeight = size.height;

    if (_isReverse) {
      path.moveTo(0, 0);
    } else {
      path.moveTo(0, pieceOfHeight);
    }

    for (int i = 0; i < _segment; i++) {
      double y = 0.0;

      double left;
      double top;
      double right;
      double bottom;

      double startAngle;
      double sweepAngle;

      if (_isReverse) {
        if (i % 2 == 1) {
          y = 0;
          left = pieceOfWidth * i;
          top = y;
        } else {
          y = pieceOfHeight;
          left = pieceOfWidth * i;
          top = y;
        }
      } else {
        if (i % 2 == 1) {
          y = pieceOfHeight;
          left = pieceOfWidth * i;
          top = y;
          startAngle = 180;
          sweepAngle = -45;
        } else {
          y = 0;
          left = pieceOfWidth * i;
          top = y;
          startAngle = 180;
          sweepAngle = 45;
        }
      }
      Rect rect =
          Rect.fromLTRB(left, top, left + pieceOfWidth, top + pieceOfHeight);
      path.addOval(rect);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

• 3、裁剪圆弧形

import 'package:flutter/material.dart';

/// WaveArcClipper
///
/// 圆弧效果的
class WaveArcClipper extends CustomClipper<Path> {
  int _count;
  bool _isReverse;

  WaveArcClipper({
    int waveCount,
    bool isReverse = false,
  }) {
    _count = waveCount;
    _isReverse = isReverse;
  }

  @override
  Path getClip(Size size) {
    var path = Path();

    var _segment = _count * 2;

    double pieceOfWidth = size.width / _segment;
    double pieceOfHeight = size.height;

    if (_isReverse) {
      path.moveTo(0, 0);
    } else {
      path.moveTo(0, pieceOfHeight);
    }

    for (int i = 0; i < _segment; i++) {
      double y = 0.0;

      double left;
      double top;
      double right;
      double bottom;

      double startAngle;
      double sweepAngle;

      if (_isReverse) {
        if (i % 2 == 1) {
          y = 0;
          left = pieceOfWidth * i;
          top = y;
        } else {
          y = pieceOfHeight;
          left = pieceOfWidth * i;
          top = y;
        }
      } else {
        if (i % 2 == 1) {
          y = pieceOfHeight;
          left = pieceOfWidth * i;
          top = y;
          startAngle = 180;
          sweepAngle = -45;
        } else {
          y = 0;
          left = pieceOfWidth * i;
          top = y;
          startAngle = 180;
          sweepAngle = 45;
        }
      }
      Rect rect =
          Rect.fromLTRB(left, top, left + pieceOfWidth, top + pieceOfHeight);
      path.arcTo(rect, startAngle, sweepAngle, false);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

flutter开发者项目示例：

flutter_app_sample 帮助flutter开发者更快入门、精进，避免不必要的技术坑。
如果您觉得此项目对您有所帮助，也可以"star"一下，我们得到您的鼓励后会更有动力持续推出更多有益于您的技术示例

特征：

• 本项目是主打技术示例，所以涉及到的需求会比较少，涉及到的技术会比较多
• 本项目是为flutter开发者专门打造的“Api demo app”
• 本项目不仅包含flutter 各种widget组件，还包含开发包、插件，以及与各平台platforms交互、通信（Platform Channel）的技术示例。
• 移步查看更多特征......