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

问题描述

如何在上下左右各有一个曲线角

像使用剪辑路径或任何其他小部件附加的文件一样颤动？我试图用一个叫做剪辑路径的孩子来弯曲容器小部件中的角落。请任何人都可以指导我。还有其他小部件可以弯曲拐角吗？这不能通过框装饰中的边框半径来完成。

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;
}

解决方法

您可以尝试进行一些更改，我认为您可能会明白：

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,),],);
  }
}

如果您正在使用图像并尝试弯曲边框然后也在 BoxDecoration() 中使用 DecorationImage() 和 fit 参数。

如果您不使用图像，则为父容器和子容器颜色使用不同的颜色，否则您会认为边框半径没有影响。

如果您不使用 fit 属性，加载的图像将根据原始图像纵横比调整大小。

例如

Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(imageUrl),fit: BoxFit.fill),borderRadius: BorderRadius.circular(8)),

flutter-clippath flutter-layout