假设我们有一个背景图像:
我想渲染几个具有共享背景的视图:
我想我可以使用CustomPainter并绘制由画布偏移量转换的背景图像,但我不知道如何在paint函数中获取该属性:
class PanelBackgroundPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var rect = Offset.zero & size;
canvas.clipRect(rect);
canvas.drawImage(image, new Offset(-canvasOffsetX, -canvasOffsetY), new Paint());
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
如何计算canvasOffsetX和canvasOffsetY?
我使用行和列来布局面板:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new Column(
children: <Widget>[
new Expanded(
child: new Container(
color: new Color.fromARGB(255, 128, 128, 128),
),
flex: 100,
),
new Container(height: 10.0),
new Container(
color: new Color.fromARGB(255, 128, 128, 128),
height: 120.0,
),
new Container(height: 10.0),
new Expanded(
child: new Container(
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
color: new Color.fromARGB(255, 128, 128, 128),
),
flex: 50,
),
new Container(width: 10.0),
new Expanded(
child: new Container(
color: new Color.fromARGB(255, 128, 128, 128),
),
flex: 50,
),
],
),
),
flex: 200,
),
],
),
);
}
}
2条答案
按热度按时间vjhs03f71#
虽然我不知道这一定是个好主意,但这是可能的。最好的解释可能就是看看下面的代码:
当我浏览它时,我意识到它需要比我最初想象的更复杂-你必须处理将图像缩放到容器的大小等。这一切现在,虽然我还没有测试它超级广泛。
还要注意的是,这并没有考虑到性能--几乎可以肯定,这是一个糟糕的性能。
eaf3rand2#
我知道这是一个老问题,它已经有了答案,但我只是有同样的问题,并希望分享我的解决方案。
如果我们创建一个自定义的
RenderObject
,这可以很容易地解决: