如何从中心顶部剪裁容器答案

【问题标题】：How to cliping container from center top如何从中心顶部剪裁容器
【发布时间】：2021-10-05 18:59:07
【问题描述】：

大家好，我想从中心顶部剪辑容器。我尝试使用自定义裁剪器但没有成功。任何人都请帮助我如何绘制如下图所示的容器。

我的代码

ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                height: 120,
                color: Colors.red,
              ),
            ),

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var firstControlPoint = Offset(size.width / 2.5, 50.0);
    var firstEndPoint = Offset(size.width / 2, 10.0);
    var secondControlPoint = Offset(size.width - (size.width / 2.5), 50);
    var secondEndPoint = Offset(size.width, 50);
    var path = Path()
      ..lineTo(0, 50)
      ..lineTo(0, 70)
      ..cubicTo(0, 70, 0, 50, 20, 50)
      ..quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
          firstEndPoint.dx, firstEndPoint.dy)
      ..quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
          secondEndPoint.dx, secondEndPoint.dy)
      ..lineTo(size.width - 20, 50)
      ..cubicTo(size.width - 20, 50, size.width, 50, size.width, 70)
      ..lineTo(size.width, size.height)
      ..lineTo(0.0, size.height)
      ..close();

    return path;
  }

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

输出：

【问题讨论】：

你可以添加你的 cide
这个question 可能会帮助你。你只需要改变剪辑的方向

标签： flutter

【解决方案1】：

我想你错过了path.moveTo(0.0, size.height);

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple.shade300,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.white)),
                width: 130,
                height: 40,
              ),
            ),
            Container(
              width: 400,
              height: 100,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(40),
                  border: Border.all(color: Colors.white, width: 0)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () {},
                    child: Icon(
                      Icons.home_outlined,
                      color: Colors.deepPurpleAccent,
                    ),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: Icon(
                      Icons.person_outline_outlined,
                      color: Colors.deepPurpleAccent,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    path.moveTo(0.0, size.height);

    path.lineTo(size.width * .5, 0);

    //we dont need this
    // path.lineTo(size.width, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

【讨论】：