[英]How to draw a custom rectangle with border radius in Flutter?
My UI draw like this picture:我的 UI 绘制如下图:
So I write some code by using CodePainter in Flutter.所以我在 Flutter 中使用 CodePainter 编写了一些代码。 Here's my code:这是我的代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BackgroundShape extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint();
paint.color = Colors.black;
var smallRect = Alignment.bottomCenter.inscribe(Size(100, 50), Rect.fromLTWH(size.width/2 -35, size.height-40, 40, 30));
var path = Path();
path.fillType = PathFillType.evenOdd;
path.addRRect(RRect.fromRectAndCorners(Rect.fromLTWH(0, 0, size.width, size.height), bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)));
path.addRRect(RRect.fromRectAndCorners(smallRect, topLeft: Radius.circular(10), topRight: Radius.circular(10)));
path.lineTo(0, size.height);
path.lineTo(size.width/2 - 35, size.height);
path.lineTo(size.width/2 - 35, size.height-40);
path.lineTo(size.width/2 + 35, size.height-40);
path.lineTo(size.width/2 + 35, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
How to add border radius?如何添加边框半径? please help me:D thanks!请帮助我:D 谢谢!
For some reason, I'm not able to run completely the code you've provided, but taking consideration your current requirements and from the comments.出于某种原因,我无法完全运行您提供的代码,但考虑到您当前的要求和评论。 I've created the following samples for your references:我创建了以下示例供您参考:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
width: 200,
height: 200,
child: CustomPaint(
painter: PainterTwo(),
),
),
),
);
}
}
class PainterOne extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
double w = size.width;
double h = size.height;
double r = 15;
var paint1 = Paint()
..color = Color(0xff888888)
..style = PaintingStyle.fill;
RRect fullRect = RRect.fromRectAndRadius(
Rect.fromCenter(center: Offset(w / 2, h / 2), width: w, height: h),
Radius.circular(r),
);
canvas.drawRRect(fullRect, paint1);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class PainterTwo extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
Path path = Path();
path.addRRect(RRect.fromRectAndRadius(
Rect.fromLTWH(
size.width / 2, size.height / 2, size.width / 4, size.height / 4),
Radius.circular(15)));
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Output of PainterOne(): PainterOne() 的 Output:
Output of PainterTwo(): PainterTwo() 的 Output:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.