Flutter自定义分数步进器开发求助：每主步骤含3个问题，步长0.3

核心实现思路 #

通过组合主步骤指示器与细分进度组件，结合问题完成状态跟踪来实现需求：

• 用变量记录已完成的问题总数，通过整除、取余运算分别计算当前主步骤数和主步骤内的细分进度
• 自定义UI结构，分别渲染主步骤标识、细分进度条、问题内容区域
• 每完成一个问题就更新计数，触发UI重绘同步进度状态

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<FractionalStepper> createState() => _FractionalStepperState();
}

class _FractionalStepperState extends State<FractionalStepper> {
  // 已完成的问题总数
  int _completedQuestions = 0;
  // 每个主步骤包含的问题数
  final int _questionsPerStep = 3;

  // 当前主步骤编号（从1开始）
  int get _currentMainStep => (_completedQuestions ~/ _questionsPerStep) + 1;
  // 当前主步骤内的细分进度（0-0.9）
  double get _subProgress => (_completedQuestions % _questionsPerStep) * 0.3;
  // 直观的总进度值
  double get _totalProgress => _currentMainStep - 1 + _subProgress;

  // 模拟完成当前问题的操作
  void _finishCurrentQuestion() {
    setState(() {
      _completedQuestions++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分数式步进器示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 步进器指示器区域
            Row(
              children: [
                // 主步骤圆形标识
                Container(
                  width: 42,
                  height: 42,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blueAccent,
                  ),
                  child: Center(
                    child: Text(
                      '$_currentMainStep',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                // 细分进度条
                Expanded(
                  child: LinearProgressIndicator(
                    value: _subProgress,
                    backgroundColor: Colors.grey.shade200,
                    color: Colors.blueAccent,
                  ),
                ),
                const SizedBox(width: 16),
                // 进度文本提示
                Text(
                  '进度: ${_totalProgress.toStringAsFixed(1)}',
                  style: const TextStyle(fontSize: 16),
                ),
              ],
            ),
            const SizedBox(height: 32),
            // 当前问题展示区域
            Card(
              elevation: 2,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '当前问题：${(_completedQuestions % _questionsPerStep) + 1}/$_questionsPerStep（主步骤$_currentMainStep）',
                      style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                    ),
                    const SizedBox(height: 16),
                    const Text('这里替换为实际问题内容'),
                    const SizedBox(height: 24),
                    ElevatedButton(
                      onPressed: _finishCurrentQuestion,
                      child: const Text('完成此问题'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 程序入口
void main() {
  runApp(const MaterialApp(home: FractionalStepper()));
}

关键逻辑说明 #

1. 进度计算规则：

   • _currentMainStep：通过整除运算得到已完成的主步骤数，加1后得到当前处于第几个主步骤
   • _subProgress：用取余运算得到当前主步骤内已完成的问题数，乘以0.3得到细分进度值
   • _totalProgress：将已完成的主步骤数（_currentMainStep-1）加上细分进度，得到直观的进度数值

2. UI自定义要点：

   • 主步骤标识用圆形容器实现，可根据需求替换为图标或其他样式
   • 细分进度使用LinearProgressIndicator，也可替换为自定义绘制的进度指示器
   • 问题区域可根据实际业务逻辑修改，比如添加选项、输入框等交互组件

3. 扩展性调整：

   • 若需修改每个主步骤的问题数量，只需调整_questionsPerStep变量即可
   • 可添加主步骤切换的动画效果，或根据进度状态改变组件样式

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