首页 > 解决方案 > CustomPaint 和 FittedBox

问题描述

如何使我的 CustomPaint 适合父小部件?

return new Container(
    color: Color(0xfffff4f0),
    child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new Expanded(
          flex: 6,
          child: FittedBox(
                  fit: BoxFit.contain,
                  child: widget CustomePaint() // Containers(),

          )),
          new Expanded(
              flex: 4,
          )
    )
)

适合: BoxFit.contain 适用于

    Container(
        height: 30,
        width: 10
    )

但不适用于我在画布矩形上绘制的 CustomePaint():

canvas.drawRect(new Rect.fromLTWH(0, 0, 10 , 30), new Paint()..color = 
Colors.red);

在此处输入图像描述

标签: dartflutterflutter-layout

解决方案


看来您只提供了所需的一部分代码。

我已经尝试了几乎你的代码,它工作得很好。我使用了另一种颜色并为 CustomPaint 添加了一个边框,以便更好地查看它的绘制位置。


Widget getRootView() {
  return Container(
      color: Colors.green,
      child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisSize: MainAxisSize.max, children: <Widget>[
        Expanded(
          flex: 2,
          child: CustomPaint(painter: Painter3()),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
            child: Center(child: Text("3")),
          ),
        )
      ]));
}

class Painter3 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Offset(10, 10) & Size(size.width - 20, size.height - 20), Paint()..color = Colors.blue);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

我在这里得到的是:上面代码的结果


推荐阅读