如何在 Flutter 步進器中滾動到 position？

Question

我正在使用垂直類型的步進器，我有多個步驟（超過 20 個），我希望帶有 isActive 屬性的步驟出現在開頭，但我仍然可以向上滾動以查看前面的步驟。

Stepper(
                  key: key_1,
                  physics: ClampingScrollPhysics(),
                  onStepTapped: (step) => goTo(step),
                  currentStep: currentStep,
                  controlsBuilder: (BuildContext context,
                      {VoidCallback onStepContinue,
                        VoidCallback onStepCancel}) {
                    return Row(
                      children: <Widget>[
                        Container(
                          child: null,
                        ),
                        Container(
                          child: null,
                        ),
                      ],
                    );
                  },
                  steps: steps)

示例：如果第 2 步處於活動狀態，我希望它出現在開頭，並且在上面滾動時可以看到第 1 步，但在視覺上，開頭的那個是第 2 步在此處輸入圖像描述

Answer 1

就我而言，我所做的是在Stepper小部件中進行了修改。

聲明scrollController變量，如下：

const Stepper({
    Key key,
    @required this.steps,
    this.physics,
    this.scrollController, //Declarate ScrollController
    this.type = StepperType.vertical,
    this.currentStep = 0,
    this.onStepTapped,
    this.onStepContinue,
    this.onStepCancel,
    this.controlsBuilder,
  })  : assert(steps != null),
        assert(type != null),
        assert(currentStep != null),
        assert(0 <= currentStep && currentStep < steps.length),
        super(key: key);
  final ScrollController scrollController;

聲明變量后，在 ListView 中繼續添加滾動控制器，如下所示：

  Widget _buildVertical() {
    return ListView(
      shrinkWrap: true,
      physics: widget.physics,
      controller: widget.scrollController,//Add ScrollController here
      children: <Widget>[
        for (int i = 0; i < widget.steps.length; i += 1)
          Column(
            key: _keys[i],
            children: <Widget>[
              InkWell(
                onTap: widget.steps[i].state != StepState.disabled
                    ? () {
                        // In the vertical case we need to scroll to the newly tapped
                        // step.
                        Scrollable.ensureVisible(
                          _keys[i].currentContext,
                          curve: Curves.fastOutSlowIn,
                          duration: kThemeAnimationDuration,
                        );

                        if (widget.onStepTapped != null) widget.onStepTapped(i);
                      }
                    : null,
                canRequestFocus: widget.steps[i].state != StepState.disabled,
                child: _buildVerticalHeader(i),
              ),
              _buildVerticalBody(i),
            ],
          ),
      ],
    );
  }

完成后，您將控制 Stepper class，只需在文檔中將最終變量聲明為 scrollController，如下所示：

final _controller = new ScrollController();

將 controller 連接到步進器。

當您按下 onStepContinue 時，將 animation 移動到 controller 中您想要的 position。 我在下面留下我的詳細示例：

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

class MyStepper extends StatefulWidget {
  @override
  _MyStepperState createState() => _MyStepperState();
}

class _MyStepperState extends State<MyStepper> {
  int _currentStape = 0;
  final _controller = new ScrollController();
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stepper(
          currentStep: _currentStape,
          scrollController: _controller,
          physics: ClampingScrollPhysics(),
          onStepContinue: () {
            _currentStape++;
            _controller.animateTo(
              0,
              duration: Duration(milliseconds: 100),
              curve: Curves.bounceIn,
            );
            setState(() {});
          },
          onStepTapped: (value) {
            _currentStape = value;
          },
          steps: [
            Step(
              title: FaIcon(
                FontAwesomeIcons.dog,
              ),
              subtitle: Text('Ingresa la información de tu mascota'),
              content: Container(
                height: 500,
              ),
            ),
            Step(
              title: FaIcon(
                FontAwesomeIcons.userAlt,
              ),
              subtitle: Text('Ingresa tú información personal'),
              content: Container(
                height: 500,
              ),
            ),
            Step(
              title: FaIcon(
                FontAwesomeIcons.image,
              ),
              subtitle: Text('Agrega algunas imágenes'),
              content: Text('Contenido'),
            ),
          ],
        ),
      ),
    );
  }
}

我正在使用 Flutter 1.17.3