Flutter Stepper组件步骤过多致溢出，如何仅显示4个步骤？

当使用Flutter的水平Stepper组件时，若步骤数量过多会出现界面溢出问题，以下提供两种解决方式：

方案一：让步骤区域可横向滚动 #

将Stepper组件包裹在SingleChildScrollView中，并设置滚动方向为水平方向，即可实现步骤区域的横向滚动，避免溢出。

修改后的核心代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      backgroundColor: Colors.green,
      title: const Text(
        'test',
        style: TextStyle(color: Colors.white),
      ),
    ),
    body: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: MediaQuery.of(context).size.width * 1.8, // 可根据步骤数量调整宽度，也可直接包裹Stepper
        child: Stepper(
          type: StepperType.horizontal,
          steps: stepList(),
        ),
      ),
    ),
  );
}

注：用SizedBox给Stepper设置足够宽度，确保所有步骤能完整展示在滚动区域内，宽度值可根据实际情况调整。

方案二：每次仅显示4个步骤 #

通过状态管理控制显示的步骤范围，只在屏幕上展示当前4个步骤，并添加切换按钮查看其他步骤。需要将MyHomePage改为StatefulWidget，实现步骤分页切换逻辑。

完整代码示例：

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Step> _allSteps = [
        const Step(
            title: Text('step 1'),
            content: Center(
              child: Text('step 1'),
            )),
        const Step(
            title: Text('step 2'),
            content: Center(
              child: Text('step 2'),
            )),
        const Step(
            title: Text('step 3'),
            content: Center(
              child: Text('step 3'),
            )),
        const Step(
            title: Text('step 4'),
            content: Center(
              child: Text('step 4'),
            )),
        const Step(
            title: Text('step 5'),
            content: Center(
              child: Text('step 5'),
            )),
        const Step(
            title: Text('step 6'),
            content: Center(
              child: Text('step 6'),
            )),
        const Step(
            title: Text('step 7'),
            content: Center(
              child: Text('step 7'),
            )),
        const Step(
            title: Text('step 8'),
            content: Center(
              child: Text('step 8'),
            )),
        const Step(
            title: Text('step 9'),
            content: Center(
              child: Text('step 9'),
            )),
      ];
  int _currentStartIndex = 0;
  final int _stepsPerPage = 4;

  List<Step> get _currentSteps {
    final endIndex = (_currentStartIndex + _stepsPerPage).clamp(0, _allSteps.length);
    return _allSteps.sublist(_currentStartIndex, endIndex);
  }

  void _previousPage() {
    if (_currentStartIndex > 0) {
      setState(() {
        _currentStartIndex -= _stepsPerPage;
      });
    }
  }

  void _nextPage() {
    if (_currentStartIndex + _stepsPerPage < _allSteps.length) {
      setState(() {
        _currentStartIndex += _stepsPerPage;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.green,
        title: const Text(
          'test',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                onPressed: _currentStartIndex > 0 ? _previousPage : null,
                icon: const Icon(Icons.arrow_back_ios),
              ),
              IconButton(
                onPressed: _currentStartIndex + _stepsPerPage < _allSteps.length ? _nextPage : null,
                icon: const Icon(Icons.arrow_forward_ios),
              ),
            ],
          ),
          Expanded(
            child: Stepper(
              type: StepperType.horizontal,
              steps: _currentSteps,
            ),
          ),
        ],
      ),
    );
  }
}

注：通过_currentStartIndex控制当前显示的起始步骤，_stepsPerPage设置每页显示的步骤数，切换按钮会根据当前可切换状态自动启用或禁用。

问题截图 #

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