Flutter Stepper切换下一步时未从顶部显示问题求助

问题描述 #

使用水平Stepper组件时，完成第一步点击「继续」按钮切换到第二步后，页面不会自动回到顶部，而是停留在第二步的底部位置，需要手动向上滚动才能查看内容。

问题代码 #

当前使用的Stepper相关代码：

int currentStep = 0;

Stepper(
  type: StepperType.horizontal,
  steps: getSteps(),
  currentStep: currentStep,
  onStepContinue: () {
    final isLastStep = currentStep == getSteps().length - 1;
    if (isLastStep) {
      print("completed");
    } else {
      setState(() {
        currentStep += 1;
      });
    }
  },
  onStepCancel: () {
    setState(() {
      currentStep -= 1;
    });
  },
),

getSteps方法代码：

List<Step> getSteps() => [
  Step(
    isActive: currentStep >= 0, 
    title: Text("step1"), 
    content: Form1()
  ),
  Step(
    isActive: currentStep >= 1, 
    title: Text("step2"), 
    content: Form2()
  ),
];

其中Form1和Form2仅返回占位文本。

解决思路 #

水平Stepper切换步骤时，内容区域的滚动偏移不会自动重置。我们可以通过ScrollController来控制滚动位置，在切换步骤后主动将页面滚动到顶部。

修改后的代码 #

class _YourWidgetState extends State<YourWidget> {
  int currentStep = 0;
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: _scrollController,
      child: Stepper(
        type: StepperType.horizontal,
        steps: getSteps(),
        currentStep: currentStep,
        onStepContinue: () {
          final isLastStep = currentStep == getSteps().length - 1;
          if (isLastStep) {
            print("completed");
          } else {
            setState(() {
              currentStep += 1;
            });
            // 切换步骤后平滑滚动到顶部
            _scrollController.animateTo(
              0,
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
          }
        },
        onStepCancel: () {
          setState(() {
            currentStep -= 1;
          });
          // 返回上一步时也滚动到顶部
          _scrollController.animateTo(
            0,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
      ),
    );
  }

  List<Step> getSteps() => [
    Step(
      isActive: currentStep >= 0, 
      title: Text("step1"), 
      content: Form1()
    ),
    Step(
      isActive: currentStep >= 1, 
      title: Text("step2"), 
      content: Form2()
    ),
  ];
}

关键修改点 #

• 添加ScrollController实例，并在dispose方法中释放资源，避免内存泄漏
• 将Stepper包裹在SingleChildScrollView中，绑定控制器
• 在onStepContinue和onStepCancel的状态更新后，调用animateTo方法平滑滚动到顶部（若不需要动画，可替换为_scrollController.jumpTo(0)实现瞬间滚动）

内容的提问来源于stack exchange，提问作者Harshana