可以在 flutter 中反转容器 BorderRadius

Question

我正在尝试这样布局

我需要另一边的右下角..

我试过了，但没用

 Container(
                  width: 200
                    height: 200
                    decoration: BoxDecoration(
                        borderRadius: const BorderRadius.only(bottomRight: 
                        Radius.circular(40),),),
                      color:  Colors.deepPurple[900]!,
                    ),

                  ),

在 flutter 框架中是否可行？

Answer 1

你可以关注这个ClipPath

左角

class CustomCornerClipPath extends CustomClipper<Path> {
  final double cornerR;
  const CustomCornerClipPath({this.cornerR = 16.0});

  @override
  Path getClip(Size size) => Path()
    ..lineTo(size.width, 0)
    ..lineTo(
      size.width,
      size.height - cornerR,
    )
    ..arcToPoint(
      Offset(
        size.width - cornerR,
        size.height,
      ),
      radius: Radius.circular(cornerR),
      clockwise: false,
    )
    ..lineTo(0, size.height);

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

并使用

ClipPath(
  clipper: const CustomCornerClipPath(),
  child: Container(
    height: 100, //based on your need
    width: 100,
    color: Colors.cyanAccent,
  ),
),

右角，路径为

@override
Path getClip(Size size) => Path()
  ..lineTo(size.width, 0)
  ..lineTo(size.width, size.height)
  ..lineTo(cornerR, size.height)
  ..arcToPoint(
    Offset(
      0,
      size.height - cornerR,
    ),
    radius: Radius.circular(cornerR),
    clockwise: false,
  );

我会推荐访问cliprrect-clippath-in-flutter

可以在 flutter 中反转容器 BorderRadius

it is possible to reverse the container BorderRadius in flutter

containers

dart

flutter