Flutter 制作一个简单的 Ticket 小部件

Question

在颤振中，我想剪辑

Container

的可选部分来制作这个小部件：

剪切小部件，使其顶部和底部有两个半圆。

对于这个剪辑小部件的某些功能，我想要一些可选功能，例如：

剪裁该选项的顶部、底部以及右侧的空间。我如何使用可选功能剪辑

Container

？

Answer 1

您可以使用自定义 Clipper + arcToPoint 路径方法来创建干净的弧线。

像这样：

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as v_math;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
      ClipPath(
        clipper: DolDurmaClipper(right: 40, holeRadius: 20),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(15),
            ),
            color: Colors.blueAccent,
          ),
          width: 300,
          height: 95,
          padding: EdgeInsets.all(15),
          child: Text('first example'),
        ),
      ),
      SizedBox(
        height: 20,
      ),
      ClipPath(
        clipper: DolDurmaClipper(right: 100, holeRadius: 40),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(15),
            ),
            color: Colors.amber,
          ),
          width: 200,
          height: 250,
          padding: EdgeInsets.all(35),
          child: Text('second example'),
        ),
      ),
    ]);
  }
}

class DolDurmaClipper extends CustomClipper<Path> {
  DolDurmaClipper({@required this.right, @required this.holeRadius});

  final double right;
  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width - right - holeRadius, 0.0)
      ..arcToPoint(
        Offset(size.width - right, 0),
        clockwise: false,
        radius: Radius.circular(1),
      )
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width - right, size.height)
      ..arcToPoint(
        Offset(size.width - right - holeRadius, size.height),
        clockwise: false,
        radius: Radius.circular(1),
      );

    path.lineTo(0.0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(DolDurmaClipper oldClipper) => true;
}

Answer 2

要为容器的左侧和右侧创建相同的形状，您可以使用它。

class DolDurmaClipper extends CustomClipper<Path> {
  final double holeRadius;
  final double bottom;

  DolDurmaClipper({required this.holeRadius, required this.bottom});

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0.0, size.height - bottom - holeRadius)
      ..arcToPoint(
        Offset(0, size.height - bottom),
        clockwise: true,
        radius: Radius.circular(1),
      )
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height - bottom)
      ..arcToPoint(
        Offset(size.width, size.height - bottom - holeRadius),
        clockwise: true,
        radius: Radius.circular(1),
      );

    path.lineTo(size.width, 0.0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(DolDurmaClipper oldClipper) => true;
}

Answer 3

要在每一侧添加多个半圆，我们需要做的就是添加 lineTo 和 arcPoint 所需数量的圆。

所以更新后的getClip函数将如下所示

@override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
//For left side shape of container
      ..lineTo(0.0, size.height - 100 - holeRadius)
      ..arcToPoint(
        Offset(0, size.height - 100),
        clockwise: true,
        radius: Radius.circular(1),
      )
      ..lineTo(0.0, size.height - 50 - holeRadius)
      ..arcToPoint(
        Offset(0, size.height - 50),
        clockwise: true,
        radius: Radius.circular(1),
      )
//For Right side shape of container
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height - 100)
      ..arcToPoint(
        Offset(size.width, size.height - 100 - holeRadius),
        clockwise: true,
        radius: Radius.circular(1),
      )
      ..lineTo(size.width, size.height - 50)
      ..arcToPoint(
        Offset(size.width, size.height - 50 - holeRadius),
        clockwise: true,
        radius: Radius.circular(1),
      );

    path.lineTo(size.width, 0.0);

    path.close();
    return path;
  }

Answer 4

你知道如何给剪刀上色吗？谢谢！ – 瓦尔莎萨布拉尼