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

Question

我正在尝试实现一个水平可滚动值 select或者，与此类似：

用户向左或向右滚动 "tape" 到 select 值（显示在中间框中）。磁带有最大值和最小值，达到后将显示典型的过度滚动动画（在 Android 时发光；在 iOS 时反弹）。

Hixie 在 Gitter 上建议我可以只使用 GestureDetector + CustomPaint，但我觉得我必须自己实现滚动逻辑并且不会利用 Flutter 的优势滑动和滚动实现。

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

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

问题在于当前代码效率低下：整个磁带被绘制一次，滚动条只是在缓冲的位图中移动。这会导致非常大的问题 "tapes".

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

Answer 1

经过大量调查，我设法解决了这个问题。我很确定我的解决方案不是执行此操作的最佳方法，但它确实有效。如果有人可以对解决方案的质量以及如何改进它发表评论，我将不胜感激。

我将代码从 SliverBoxAdapter 复制到 return 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;

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

Flutter: How to create a custom scrollable widget

flutter