【问题标题】:Canvas.drawPaint in Flutter Custom Painter has no boundariesFlutter Custom Painter中的Canvas.drawPaint没有边界
【发布时间】: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


【解决方案1】:

来自CustomPaint 文档:

画家应该在一个矩形内绘制,该矩形从原点开始并包含给定大小的区域。 (如果画家在这些边界之外进行绘制,则分配的内存可能不足以对绘制命令进行光栅化,并且由此产生的行为是未定义的。)要在这些边界内强制绘制,请考虑使用 ClipRect 小部件包装此 CustomPaint

【讨论】:

    猜你喜欢
    • 2020-11-15
    • 1970-01-01
    • 2023-01-12
    • 1970-01-01
    • 1970-01-01
    • 2012-11-13
    • 1970-01-01
    • 2021-08-18
    • 1970-01-01
    相关资源
    最近更新 更多