flutter - 使用 getOuterPath 和 ShapeBorder 在 Card 周围颤动裁剪

Question

在flutter我试图裁剪时Cart，这个动作可以轻松完成吗？我找不到任何文档或黑客想法

当我们用CustomPainter无法设置阴影创建这个小部件时，有没有人可以帮助我们解决这个问题？

提前致谢

标签： flutter

Answer 1

可能是这样的：

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Card(
              shape: DurmaShape(
                borderRadius: Radius.circular(20),
                holeSize: 40,
                offset: Offset(30, -30),
                side: BorderSide(
                  color: Colors.black.withOpacity(0.5),
                  width: 1.0,
                ),
              ),
              elevation: 7,
              child: Container(
                height: 200,
                width: 280,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DurmaShape extends ShapeBorder {
  DurmaShape({
    @required this.borderRadius,
    @required this.holeSize,
    this.offset = Offset.zero,
    this.side = BorderSide.none,
  });

  final Radius borderRadius;
  final Offset offset;
  final BorderSide side;

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    if (side != BorderSide.none) {
      canvas.drawPath(
        _getPath(rect),
        side.toPaint(),
      );
    }
  }

  Path _getPath(Rect rect) {
    return Path.combine(
      PathOperation.difference,
      Path()
        ..addRRect(RRect.fromRectAndRadius(rect, borderRadius))
        ..close(),
      Path()
        ..addOval(Rect.fromCircle(
          center: Offset(0, rect.height) + offset,
          radius: holeSize,
        ))
        ..close(),
    );
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  final double holeSize;

  @override
  ui.Path getOuterPath(ui.Rect rect, {ui.TextDirection textDirection}) =>
      _getPath(rect);

  @override
  ShapeBorder scale(double t) => this;
}