Flutter 中的自定义形状容器

问题描述 投票:0回答:1

有人可以帮我在 flutter 中画这种自定义形状吗?或者向我提供相关资源,以澄清我与 flutter 中的自定义形状相关的查询。

一些代码或提示将指导我。

flutter user-interface
1个回答
0
投票

尝试以下方法:

class MyHomePage extends StatelessWidget {
 MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return  Scaffold(

      body: SafeArea(
        child: ClipPath(
          clipper: Clippy(),
          child: Container(
            margin: EdgeInsets.all(20),
          width: 500,
          height:500 ,
          decoration: BoxDecoration(
            color: Colors.purple,
            borderRadius: BorderRadius.circular(30),
          ),
        ),
      ),
        )
    );
  }
}

这是剪刀

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

    double w = size.width;
    double h = size.height;

    path.lineTo(0,0.55*h);
    path.quadraticBezierTo(7, (0.75*h)+20 ,60 ,(0.75*h)+30);
    path.lineTo(w+50 , h);
    path.lineTo(w,0);
    return path;
  }

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

希望对您有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.