Question

我想再裁剪右上角，但要增加边框半径。它不超过容器的中心点。谁能告诉我如何获得如图所示的设计。

我的代码：-

Material(
            clipBehavior: Clip.antiAlias,
            color: Colors.blue,
            shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                topRight: Radius.elliptical(40,90),
              ),
            ),
            child: Container(
              height: 100,
              width: 180,
            ),
          ),

预期：-

当前一：-

Answer 1

对于自定义形状，您可以定义 CustomClipper（您不需要任何包）：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: ShapeClipper(),
            child: Container(color: Colors.red, width: 300, height: 200),
          ),
        ),
      ),
    );
  }
}

class ShapeClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width - 100, 0.0)
      ..close();
  }

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

这应该涵盖您的情况，只需使用特定值调整 ShapeClipper。

Answer 2

如果其他人想要这个，我找到了方法。您可以使用 this 插件并将代码修改为：-

Diagonal(
            clipHeight: 40,
            axis: Axis.vertical,
            position: DiagonalPosition.BOTTOM_RIGHT,
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 180,
            ),
          ),

如何增加颤振中的边界半径限制？

2 个答案: