Question

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

用户向左或向右滚动“磁带”以选择值（显示在中间框中）。磁带具有最大值和最小值，一旦到达将显示典型的过度滚动动画（在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;
  }
}

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

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

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

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;

Answer 2

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

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

2 个答案: