Flutter中如何实现按百分比填充的页面指示器？

1. 自定义单个进度指示器组件 #

实现一个可显示填充进度和对应百分比的基础组件，通过Stack叠加背景条、进度条和文本：

class ProgressIndicatorItem extends StatelessWidget {
  final double progress; // 取值范围 0.0 ~ 1.0
  final String label;

  const ProgressIndicatorItem({
    super.key,
    required this.progress,
    required this.label,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            // 灰色背景条
            Container(
              height: 12,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(6),
              ),
            ),
            // 彩色进度填充条
            Container(
              height: 12,
              width: double.infinity * progress,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(6),
              ),
            ),
            // 百分比文本
            Text(
              '${(progress * 100).toInt()}%',
              style: const TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        Text(label),
      ],
    );
  }
}

2. 多页面对应单个指示器的进度计算 #

针对多个页面对应一个指示器的场景，通过已完成页面数与总页面数的比值计算填充进度：

// 计算进度的工具方法
double calculateProgress(int completedPages, int totalPages) {
  if (totalPages == 0) return 0.0;
  return completedPages / totalPages;
}

// 示例：定义章节（指示器）与页面的映射关系
final List<Map<String, dynamic>> indicatorGroups = [
  {
    'label': '基础设置',
    'totalPages': 3,
    'completedPages': 2,
  },
  {
    'label': '内容配置',
    'totalPages': 2,
    'completedPages': 1,
  },
  {
    'label': '预览发布',
    'totalPages': 4,
    'completedPages': 4,
  },
];

3. 页面中整合使用 #

在页面里遍历指示器分组，生成对应的进度组件：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('页面进度指示器')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
        child: Column(
          children: indicatorGroups.map((group) {
            final progress = calculateProgress(
              group['completedPages'],
              group['totalPages'],
            );
            return Padding(
              padding: const EdgeInsets.only(bottom: 20),
              child: ProgressIndicatorItem(
                progress: progress,
                label: group['label'],
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

4. 动态更新进度 #

如果需要随页面切换实时更新进度，使用StatefulWidget维护状态：

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

  @override
  State<DynamicIndicatorPage> createState() => _DynamicIndicatorPageState();
}

class _DynamicIndicatorPageState extends State<DynamicIndicatorPage> {
  List<Map<String, dynamic>> indicatorGroups = [
    {'label': '基础设置', 'totalPages': 3, 'completedPages': 0},
    {'label': '内容配置', 'totalPages': 2, 'completedPages': 0},
  ];

  // 更新指定章节的完成页面数
  void updateIndicatorProgress(int index, int completed) {
    setState(() {
      indicatorGroups[index]['completedPages'] = completed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('动态进度更新')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
        child: Column(
          children: [
            ...indicatorGroups.map((group) {
              final progress = calculateProgress(
                group['completedPages'],
                group['totalPages'],
              );
              return Padding(
                padding: const EdgeInsets.only(bottom: 20),
                child: ProgressIndicatorItem(
                  progress: progress,
                  label: group['label'],
                ),
              );
            }).toList(),
            ElevatedButton(
              onPressed: () => updateIndicatorProgress(0, 2),
              child: const Text('完成基础设置2个页面'),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () => updateIndicatorProgress(1, 2),
              child: const Text('完成内容配置所有页面'),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Sreerekha K V