我尝试添加一个无法覆盖整个屏幕的 PageView
。
为此,我将PageView放在 Column
内:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Column(
children: <Widget>[
new SizedBox(height: 100.0, child: new Center(child: new Text("sticky header"))),
new Expanded(
child: new PageView(
children: <Widget>[
new Container(
color: Colors.red,
child: new Padding(
padding: const EdgeInsets.all(50.0),
child: new _Painter(),
),
),
new Container(
color: Colors.green,
child: new Padding(
padding: const EdgeInsets.all(50.0),
child: new _Painter(),
),
),
],
),
),
],
),
);
}
}
到目前为止,该方法有效。
每个
PageView
都有一个 _Painter
,其中有一个 RenderBox
可以画一些东西。这是我的问题:我使用
handleEvent
方法检测拖动事件,但y
位置错误。您会看到绘制的线不在我触摸屏幕的位置(透明气泡)。我怎样才能解决这个问题?我必须自己计算正确的
y
位置吗?您可以找到full source here。
更新
globalToLocal
修复了问题的一半,但是我仍然必须在计算中包括填充。有没有办法获得小部件的填充?void _handleDragUpdate(DragUpdateDetails details) {
final pos = globalToLocal(details.globalPosition);
_currentPath?.lineTo(pos.dx + 50.0, pos.dy + 50.0);
markNeedsPaint();
}
奖励积分
当我左右拖动
PageView
时,我的_PainterRenderBox
会忘记绘制的线条。记住这条线的最佳地点在哪里?将它们存储在_Painter
还是_MyHomePageState
中? 最佳答案
您缺少的是相对于globalPosition
将localPosition
转换为RenderBox
。你可以像这样实现
// onDragUpdate with the Painting Context
RenderBox referenceBox = context.findRenderObject();
Offset localPosition = referenceBox.globalToLocal(details.globalPosition);
// then use the localPosition to draw
用例的用法示例,如here所示:
class _PainterRenderBox extends RenderBox {
final _lines = new List<Path>();
PanGestureRecognizer _drag;
Path _currentPath;
// variable to store padding
Offset padding;
_PainterRenderBox() {
final GestureArenaTeam team = new GestureArenaTeam();
_drag = new PanGestureRecognizer()
..team = team
..onStart = _handleDragStart
..onUpdate = _handleDragUpdate
..onEnd = _handleDragEnd;
}
@override
bool get sizedByParent => true;
@override
bool hitTestSelf(Offset position) => true;
@override
handleEvent(PointerEvent event, BoxHitTestEntry entry) {
assert(debugHandleEvent(event, entry));
if (event is PointerDownEvent) {
_drag.addPointer(event);
}
}
@override
paint(PaintingContext context, Offset offset) {
final Canvas canvas = context.canvas;
// update padding
padding = offset;
final Paint paintBorder = new Paint()
..strokeWidth = 1.0
..style = PaintingStyle.stroke
..color = Colors.white.withAlpha(128);
canvas.drawRect(offset & size, paintBorder);
final Paint paintPath = new Paint()
..strokeWidth = 5.0
..style = PaintingStyle.stroke
..color = Colors.white;
_lines.forEach((path) {
canvas.drawPath(path, paintPath);
});
}
// check if the point lies inside drawable area
bool _canDraw(Offset offset){
return (padding & size).contains(offset);
}
void _handleDragStart(DragStartDetails details) {
_currentPath = new Path();
Offset point = globalToLocal(details.globalPosition); // convert globalPosition to localPosition
point = padding + point; // add the padding to localPosition if any
// check if point lies inside drawable area and then markNeedsPaint
if(_canDraw(point)){
_currentPath?.moveTo(point.dx, point.dy);
_lines.add(_currentPath);
markNeedsPaint();
}
}
void _handleDragUpdate(DragUpdateDetails details) {
Offset point = globalToLocal(details.globalPosition); // convert globalPosition to localPosition
point = padding + point; // add the padding to localPosition if any
// check if point lies inside drawable area and then markNeedsPaint
if(_canDraw(point)){
_currentPath?.lineTo(point.dx, point.dy);
markNeedsPaint();
}
}
void _handleDragEnd(DragEndDetails details) {
_currentPath = null;
markNeedsPaint();
}
}
存在一个具有类似用例的问题,该问题使用户可以在屏幕上签名。希望可以帮助您了解如何跟踪路径。您可以看看here。
希望有帮助!
关于dart - 在Flutter中增加大小的PageView的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49320015/