使用 Theme 小部件设置 CircularProgressIndicator 的 backgroundColor

Posted 2023-02-23

【中文标题】使用 Theme 小部件设置 CircularProgressIndicator 的 backgroundColor

【英文标题】：Set backgroundColor of CircularProgressIndicator using Theme widget

【发布时间】：2021-06-06 18:14:00

【问题描述】：

如何使用 Flutter Theme 小部件设置 CircularProgressIndicator 的 backgroundColor

我可以在创建 CircularProgressIndicator 时将 backgroundColor 作为参数传递，但我想在围绕 Scaffold 小部件的主题中执行此操作。 ThemeData 中的哪个值用于确定此小部件的背景颜色？

【参考方案1】：

如果要设置背景颜色和进度圈颜色，我建议使用以下：

circularProgress<Widget>() 
  return Container(
    color: Colors.white,
    alignment: Alignment.center,
    padding: EdgeInsets.only(top: 12.0),
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.redAccent),
    ),
  );

【参考方案2】：

由于 Flutter 中的错误，您似乎无法使用 Flutter ThemeData 更改 CircularProgressIndicator 的 backgroundColor。

我在 GitHub 上打开了一个问题：https://github.com/flutter/flutter/issues/77647

---

根据文档 (https://api.flutter.dev/flutter/material/ProgressIndicator/backgroundColor.html)，默认情况下，CircularProgressIndicator 的 backgroundColor 应该是当前主题的 ThemeData.backgroundColor。

虽然valueColor（默认为ThemeData.accentColor）是这种情况，但它不适用于backgroundColor。

我认为问题出在 _buildMaterialIndicator 方法中，因为 backgroundColor 设置为 widget.backgroundColor 而不是 _getBackgroundColor(context)。

  Widget _buildMaterialIndicator(BuildContext context, double headValue, double tailValue, double offsetValue, double rotationValue) 
    return widget._buildSemanticsWrapper(
      context: context,
      child: Container(
        constraints: const BoxConstraints(
          minWidth: _kMinCircularProgressIndicatorSize,
          minHeight: _kMinCircularProgressIndicatorSize,
        ),
        child: CustomPaint(
          painter: _CircularProgressIndicatorPainter(
            backgroundColor: widget.backgroundColor,
            valueColor: widget._getValueColor(context),
            value: widget.value, // may be null
            headValue: headValue, // remaining arguments are ignored if widget.value is not null
            tailValue: tailValue,
            offsetValue: offsetValue,
            rotationValue: rotationValue,
            strokeWidth: widget.strokeWidth,
          ),
        ),
      ),
    );
  

重现问题的完整源代码：

import 'package:flutter/material.dart';

void main() 
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );


class HomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('DEFAULT:'),
            CircularProgressIndicator(),
            const SizedBox(height: 16.0),
            Text('BACKGROUND COLOR:'),
            CircularProgressIndicator(
              backgroundColor: Colors.amber.shade300,
            ),
            const SizedBox(height: 16.0),
            Text('THEME:'),
            Theme(
              data: Theme.of(context).copyWith(
                accentColor: Colors.green.shade300,
                canvasColor: Colors.red.shade300,
                backgroundColor: Colors.amber.shade300,
              ),
              child: CircularProgressIndicator(backgroundColor: null),
            ),
          ],
        ),
      ),
    );
  

【讨论】：

非常感谢。我尝试在 ThemeData 中更改这么多值，但它从未奏效。我希望它会在以后的版本中得到修复。这将为我节省大量体力劳动并保持代码可读