【发布时间】:2022-07-17 12:10:13
【问题描述】:
在 CustomPainter 的绘制方法中,如果我们使用 canvas.paint,绘制会意外超出包含视图的边界。
在下面的示例中,我希望 Container 的 pinkAccent 在文本视图所在的列的下半部分可见......但是,来自相邻自定义画家的绿色超出了其边界扩展区域并绘制到文本视图的扩展框中,实际上是整个屏幕。
如果这两个小部件是堆栈的一部分,我会预料到这一点,但它们在列中。
需要进行哪些更改才能获得预期的行为?
主要:
import 'package:flutter/material.dart';
import 'my_custom_painter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.pinkAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: CustomPaint(painter: MyCustomPainter(), size: Size.infinite)),
Expanded(
child: Container(child: Text("hello")),
),
],
),
);
}
}
自定义画家:
import 'package:flutter/material.dart';
class MyCustomPainter extends CustomPainter {
Paint boxPaint = Paint();
@override
void paint(Canvas canvas, Size size) {
boxPaint.style = PaintingStyle.stroke;
boxPaint.strokeWidth = 10;
boxPaint.color = Colors.black;
// Unexpectedly paints entire screen, NOT restricted to bounds of this view
canvas.drawPaint(Paint()..color = Colors.green);
// Proves that the bounds of this view are correct
canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height), boxPaint);
}
@override
bool shouldRepaint(covariant MyCustomPainter oldDelegate) {
return true;
}
}
【问题讨论】:
-
自定义painter nedd边界,尝试用contrainer或stack包裹它
标签: flutter dart flutter-canvas flutter-custompainter