Flutter Stepper组件切换后展开内容超出可视区域问题求助

问题描述 #

使用Flutter的Stepper组件时，切换到当前步骤之后的项时，系统会自动滚动到目标步骤，但新步骤展开后，内容会跑到可视区域之外，未滚动到屏幕底部时这个问题尤为明显。

问题原因 #

Stepper默认的滚动逻辑是在切换步骤时立即计算滚动位置，但此时新步骤的内容还未展开，布局高度尚未更新。等内容展开后整体布局高度变化，就会导致目标步骤被挤到可视区域外。

解决方案 #

通过WidgetsBinding.instance.addPostFrameCallback在UI布局更新完成后，重新调整滚动位置，确保目标步骤的内容完全处于可视区域内。具体实现步骤如下：

• 为每个Step组件添加GlobalKey，用于获取对应步骤的BuildContext
• 在切换步骤后，通过addPostFrameCallback等待布局更新完成
• 调用Scrollable.ensureVisible将目标步骤滚动到可视区域内

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreen()
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  var _selected = 0;
  // 为每个Step生成唯一的GlobalKey
  final List<GlobalKey> _stepKeys = List.generate(50, (_) => GlobalKey());

  // 根据索引获取对应Step的BuildContext
  BuildContext? _getStepContext(int index) {
    return _stepKeys[index].currentContext;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Stepper(
        currentStep: _selected,
        onStepTapped: (step) {
          setState(() {
            _selected = step;
          });
          // 等待UI布局更新完成后调整滚动位置
          WidgetsBinding.instance.addPostFrameCallback((_) {
            final stepContext = _getStepContext(step);
            if (stepContext != null) {
              Scrollable.ensureVisible(
                stepContext,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
                alignment: 0.5, // 让步骤居中显示，可根据需求调整为0（顶部）或1（底部）
              );
            }
          });
        },
        steps: List<Step>.generate(50, (i) => Step(
          key: _stepKeys[i],
          title: Text('Step $i'),
          content: const Text('Hi')
        ))
      )
    );
  }
}

效果说明 #

修改后切换到后续步骤时，会先完成新步骤内容的展开布局，再将目标步骤滚动到可视区域的指定位置（示例中为居中），确保步骤内容不会超出可视范围。

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