![在此处输入图像描述](https://i.stack.imgur.com/VqhQS.png)
要在 Flutter 中绘画,请使用CustomPaint
小部件。小CustomPaint
部件将CustomPainter
对象作为参数。在该类中,您必须重写该paint
方法,该方法为您提供了一个可以在其上绘画的画布。这是在上图中绘制文本的代码。
@override
void paint(Canvas canvas, Size size) {
final textStyle = TextStyle(
color: Colors.black,
fontSize: 30,
);
final textSpan = TextSpan(
text: 'Hello, world.',
style: textStyle,
);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.layout(
minWidth: 0,
maxWidth: size.width,
);
final xCenter = (size.width - textPainter.width) / 2;
final yCenter = (size.height - textPainter.height) / 2;
final offset = Offset(xCenter, yCenter);
textPainter.paint(canvas, offset);
}
笔记:
- 如果您使用白色背景,请确保将文本颜色设置为除白色以外的其他颜色,这是默认颜色。
- Flutter 努力不假设文本方向,因此您需要明确设置它。缩写
ltr
代表从左到右,英语等语言使用。另一个选项是rtl
(从右到左),使用阿拉伯语和希伯来语等语言。当代码在开发人员没有考虑过的语言环境中使用时,这有助于减少错误。
语境
这是main.dart代码,以便您可以在上下文中查看它。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: HomeWidget(),
),
);
}
}
class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint( // <-- CustomPaint widget
size: Size(300, 300),
painter: MyPainter(),
),
);
}
}
class MyPainter extends CustomPainter { // <-- CustomPainter class
@override
void paint(Canvas canvas, Size size) {
// <-- Insert your painting code here.
}
@override
bool shouldRepaint(CustomPainter old) {
return false;
}
}
也可以看看
有关我更完整的答案,请参阅本文。