Question

我尝试添加一个不会填满整个屏幕的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？

中

Answer 1

您缺少的是将<ul> <li><a class="active">Dashboard</a></li> <li><a>Reports</a></li> <li><a>Map</a></li> </ul>转换为globalPosition相对于localPosition。你可以像

那样实现它

RenderBox

用例的用法示例，如here：

// onDragUpdate with the Painting Context
RenderBox referenceBox = context.findRenderObject();
Offset localPosition = referenceBox.globalToLocal(details.globalPosition);
// then use the localPosition to draw

有一个类似用例的问题，允许用户在屏幕上签名。希望这可以帮助您了解如何跟踪路径。您可以查看它here。

希望有所帮助！

在Flutter中添加大小的PageView的正确方法是什么？

1 个答案: