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

Question

我正在尝试实现一个水平可滚动的值选择器，类似于这个： 用户滚动“胶带”左右以选择值（显示在中间框中）。胶带具有最大和最小值，到达时会显示Typical Overscroll Animation（Android上的发光；iOS上的弹跳）。

Hixie在Gitter上建议我可以使用GestureDetector+CustomPaint，但我感觉我需要自己实现滚动逻辑，并且无法利用Flutter的fling和overscroll实现。

编辑：经过进一步调查，我改变了原来的方法，使用低级别的小部件，例如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;
  }
}

这样做达到了我想要的效果：现在我可以左右滚动磁带，并且免费获得过度滚动效果。

问题在于当前代码效率低下：整个磁带只绘制一次，而滚动条只是通过移动缓冲位图实现。这对于非常大的“磁带”会造成问题。

相反，我正在寻找的是在每帧重新绘制小部件，以便只需计算和绘制可见部分。这也将使我能够实现其他滚动相关效果，例如随着数字靠近中心动态淡入。

- Cachapa

---

您的 FlutterTapeSelector 代码库似乎是空的。 - Ensei Tankado

Answer 1

经过一番调查，我成功解决了这个问题。虽然我相信我的解决方案并不是最好的，但它可以工作。如果有人能够评论一下解决方案的质量以及如何改进它，我将不胜感激。

我复制了代码从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;

- Cachapa