Flutter - 自定义计时器避免移动数字？

Question

我正在努力解决 gif 中显示的以下问题。我正在用这个包作为计时器。而且我不知道如何避免倒数计时器在倒计时时移动。由于每个数字的宽度不同，它\xe2\x80\x99 会移动。

\n

动图：

通过 GIPHY

\n

代码：

\n

Consumer<RunSettingsModel>(\n            builder: (context, settings, _) => CustomTimer(\n              from: Duration(seconds: settings.runDuration),\n              to: Duration(seconds: 0),\n              controller: _runController,\n              builder: (CustomTimerRemainingTime remaining) {\n                final double percent = 1 -\n                    remaining.duration.inSeconds.toDouble() /\n                        settings.runDuration;\n                settings.remainingTime = remaining.duration.inSeconds;\n                return  Column(\n                    children: [\n                      Container(\n                        child: Text(\n                          "${remaining.hours}:${remaining.minutes}:${remaining.seconds}",\n                          style: Theme.of(context).textTheme.headline3,\n                        ),\n                      ),\n

\n

Answer 1

你可以导入 'dart:ui';

然后在您的文本小部件中使用 TextStyle
fontFeatures: [FontFeature.tabularFigures()]，

像这样：

Text("${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
  style: TextStyle(fontSize: 30.0, fontFeatures: [FontFeature.tabularFigures()]),
 );