我已经尝试过这个superellipse_shape
包:https://pub.dev/packages/superellipse_shape
class SuperellipseDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
color: Colors.blueAccent[400],
shape: SuperellipseShape(
borderRadius: BorderRadius.circular(28),
), // SuperellipseShape
child: Container(
width: 100.0,
height: 100.0,
), // Container
); // Material
}
}
但是侧面必须弯曲而不是拐角,有没有更简单的方法可以在没有自定义形状的情况下实现此目的?
最佳答案
试试这个代码。
import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomPaint(
painter: MyRectangle(),
child: Container(
width: 300,
height: 300,
),
),
),
);
}
}
class MyRectangle extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
Path path = Path();
paint.color = Colors.red;
path.lineTo(size.width * 0.4, size.height);
path.cubicTo(size.width * 0.29, size.height, size.width * 0.16, size.height * 0.98, size.width * 0.09, size.height * 0.97);
path.cubicTo(size.width * 0.06, size.height * 0.97, size.width * 0.06, size.height * 0.96, size.width * 0.05, size.height * 0.96);
path.cubicTo(size.width * 0.04, size.height * 0.95, size.width * 0.04, size.height * 0.94, size.width * 0.03, size.height * 0.91);
path.cubicTo(size.width * 0.01, size.height * 0.77, 0, size.height * 0.61, 0, size.height * 0.44);
path.cubicTo(size.width * 0.01, size.height * 0.32, size.width * 0.02, size.height / 5, size.width * 0.03, size.height * 0.11);
path.cubicTo(size.width * 0.04, size.height * 0.07, size.width * 0.04, size.height * 0.06, size.width * 0.05, size.height * 0.05);
path.cubicTo(size.width * 0.06, size.height * 0.04, size.width * 0.07, size.height * 0.04, size.width * 0.11, size.height * 0.03);
path.cubicTo(size.width * 0.34, -0.01, size.width * 0.66, -0.01, size.width * 0.89, size.height * 0.03);
path.cubicTo(size.width * 0.94, size.height * 0.04, size.width * 0.95, size.height * 0.04, size.width * 0.96, size.height * 0.05);
path.cubicTo(size.width * 0.96, size.height * 0.06, size.width * 0.97, size.height * 0.07, size.width * 0.97, size.height * 0.1);
path.cubicTo(size.width, size.height * 0.32, size.width, size.height * 0.63, size.width * 0.98, size.height * 0.86);
path.cubicTo(size.width * 0.97, size.height * 0.94, size.width * 0.96, size.height * 0.95, size.width * 0.95, size.height * 0.96);
path.cubicTo(size.width * 0.92, size.height * 0.97, size.width * 0.77, size.height, size.width * 0.65, size.height);
path.cubicTo(size.width * 0.59, size.height, size.width * 0.46, size.height, size.width * 0.4, size.height);
path.cubicTo(size.width * 0.4, size.height, size.width * 0.4, size.height, size.width * 0.4, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
我的输出是:关于flutter - 如何在 flutter 中达到这种形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64219432/