首页 文章

Flutter：如何创建自定义可滚动窗口小部件

提问于
浏览 次
2

我正在尝试实现一个水平可滚动值选择器，类似于这个：

用户向左或向右滚动“磁带”以选择值（显示在中间框中） . 磁带具有最大值和最小值，一旦到达将显示典型的过卷动画（在Android上发光;在iOS上反弹） .

Hixie在Gitter上建议我可以使用 GestureDetector CustomPaint ，但我有一种感觉，我必须自己实现滚动逻辑，并且不会实施和过度滚动实现 .

EDIT: 经过进一步调查后，我改变了原来的方法，即使用低级小部件，如 Scrollable 和 Viewport .

我已经能够通过扩展 CustomPaint 并将其宽度设置为磁带的全长来创建磁带： _width = (_maxValue - _minValue) * _spacing;

然后我将自定义小部件放在CustomScrollView中：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(new MaterialApp(home: new Scaffold(
      appBar: new AppBar(title: new Text("Test"),),
      body: new CustomScrollView(
        scrollDirection: Axis.horizontal,
        slivers: <Widget>[
          new SliverToBoxAdapter(
            child: new Tape(),
          )
        ],
      )
  )));
}

const _width = (_maxValue - _minValue) * spacing;
const spacing = 20.0;
const _minValue = 0;
const _maxValue = 100;

class Tape extends CustomPaint {
  Tape() : super(
    size: new Size(_width, 60.0),
    painter: new _TapePainter(),
  );
}

class _TapePainter extends CustomPainter {
  Paint _tickPaint;

  _TapePainter() {
    _tickPaint = new Paint();
    _tickPaint.color = Colors.black;
    _tickPaint.strokeWidth = 1.0;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;

    var o1 = new Offset(0.0, 0.0);
    var o2 = new Offset(0.0, rect.height);

    while (o1.dx < size.width) {
      canvas.drawLine(o1, o2, _tickPaint);
      o1 = o1.translate(spacing, 0.0);
      o2 = o2.translate(spacing, 0.0);
    }
  }

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

这实现了我想要的效果：我现在能够左右滚动磁带，并免费获得过卷效果 .

问题是当前代码效率低下：整个磁带被绘制一次，滚动器只是通过缓冲的位图 . 这会导致非常大的“磁带”出现问题 .

相反，我正在寻找的是在每一帧上重新绘制小部件，以便只需要计算和绘制可见部分 . 这也允许我实现其他依赖于滚动的效果，例如当他们接近中心时动态地褪色数字 .

flutter

2 回答

  • 2

    经过相当多的调查，我设法解决了这个问题 . 我很确定我的解决方案不是最好的方法，但它确实有效 . 如果有人能评论解决方案的质量以及如何改进解决方案，我将不胜感激 .

    我从 SliverBoxAdapter 复制了代码以返回 RenderSliverToBoxAdapter 的自定义版本，该版本在每个布局过程中公开可见几何体（实际可见的小部件部分） . 我的 CustomPainter 然后使用此信息将绘图命令限制为仅显示在可见区域内的命令 .

    请注意，下面的代码旨在作为概念证明，因此很难看 . 我将把它扩展到一个完整的解决方案：https://github.com/cachapa/FlutterTapeSelector

    import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(new MaterialApp(
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Test"),
          ),
          body: new CustomScrollView(
            scrollDirection: Axis.horizontal,
            slivers: <Widget>[
              new CustomSliverToBoxAdapter(
                child: new Tape(),
              )
            ],
          ))));
}

const _width = (_maxValue - _minValue) * spacing;
const spacing = 20.0;
const _minValue = 0;
const _maxValue = 100;

class Tape extends CustomPaint {
  Tape()
      : super(
          size: new Size(_width, 60.0),
          painter: new _TapePainter(),
        );
}

class _TapePainter extends CustomPainter {
  Paint _tickPaint = new Paint();

  _TapePainter() {
    _tickPaint.color = Colors.black;
    _tickPaint.strokeWidth = 2.0;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;

    // Extend drawing window to compensate for element sizes - avoids lines at either end "popping" into existence
    var extend = _tickPaint.strokeWidth / 2.0;

    // Calculate from which Tick we should start drawing
    var tick = ((_visibleRect.left - extend) / spacing).ceil();

    var startOffset = tick * spacing;
    var o1 = new Offset(startOffset, 0.0);
    var o2 = new Offset(startOffset, rect.height);

    while (o1.dx < _visibleRect.right + extend) {
      canvas.drawLine(o1, o2, _tickPaint);
      o1 = o1.translate(spacing, 0.0);
      o2 = o2.translate(spacing, 0.0);
    }
  }

  @override
  bool shouldRepaint(_TapePainter oldDelegate) {
    return false;
  }
}

class CustomSliverToBoxAdapter extends SingleChildRenderObjectWidget {
  const CustomSliverToBoxAdapter({
    Key key,
    Widget child,
  })
      : super(key: key, child: child);

  @override
  CustomRenderSliverToBoxAdapter createRenderObject(BuildContext context) =>
      new CustomRenderSliverToBoxAdapter();
}

class CustomRenderSliverToBoxAdapter extends RenderSliverSingleBoxAdapter {
  CustomRenderSliverToBoxAdapter({
    RenderBox child,
  })
      : super(child: child);

  @override
  void performLayout() {
    if (child == null) {
      geometry = SliverGeometry.zero;
      return;
    }
    child.layout(constraints.asBoxConstraints(), parentUsesSize: true);
    double childExtent;
    switch (constraints.axis) {
      case Axis.horizontal:
        childExtent = child.size.width;
        break;
      case Axis.vertical:
        childExtent = child.size.height;
        break;
    }
    assert(childExtent != null);
    final double paintedChildSize =
        calculatePaintOffset(constraints, from: 0.0, to: childExtent);
    assert(paintedChildSize.isFinite);
    assert(paintedChildSize >= 0.0);
    geometry = new SliverGeometry(
      scrollExtent: childExtent,
      paintExtent: paintedChildSize,
      maxPaintExtent: childExtent,
      hitTestExtent: paintedChildSize,
      hasVisualOverflow: childExtent > constraints.remainingPaintExtent ||
          constraints.scrollOffset > 0.0,
    );
    setChildParentData(child, constraints, geometry);

    // Expose geometry
    _visibleRect = new Rect.fromLTWH(
        constraints.scrollOffset, 0.0, geometry.paintExtent, child.size.height);
  }
}

Rect _visibleRect = Rect.zero;
    回复于
  • 0

    说实话，我真的不明白你的问题，但最近我正在开发NumberPicker . 也许它会以某种方式帮助你 . https://github.com/MarcinusX/NumberPicker

    回复于

相关问题