时间戳

首页 > 解决方案 > 如何使曲线角像使用剪辑路径或任何其他小部件附加的文件一样颤动？

flutter - 如何使曲线角像使用剪辑路径或任何其他小部件附加的文件一样颤动？

问题描述

如何在顶部和左右有一个曲线角

1

像使用剪辑路径或任何其他小部件附加的文件一样颤动？我正在尝试使用一个名为 clip-path 的子项来弯曲容器小部件中的角。请任何人都可以指导我。是否有任何其他小部件可以弯曲角落？这不能通过框装饰中的边界半径来完成。

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

    path.moveTo(size.width / 2, 0);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height);
    path.lineTo(size.width, size.height);

    path.lineTo(0, size.height);

    path.close();
    return path;
  }

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

标签： flutterflutter-layoutflutter-clippath

解决方案

您可以尝试进行一些更改，我认为您可能会得到它：

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Center(
            child: Container(
              height: 400,
              width: 400,
              child: Transform.rotate(
                angle: 3.14 / 4,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: ColoredBox(
                    color: Colors.blueAccent,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

推荐阅读