Flutter：当 Timer 处于活动状态时，避免 Text Widget 重新居中

Question

我有一个带有Scaffold 的颤振应用程序，我在其中放置了以下容器。 此容器包含计时器的分钟和秒，以及两个按钮。 我试图避免Text 小部件在计时器处于活动状态时重新居中。这似乎是因为 Text 小部件在显示不同的数字时会改变大小。

我尝试用Expanded 小部件包装Text 小部件，但它没有解决问题。我该如何解决这个问题？

Container(
                      height: size.height * 0.40,
                      width: size.width * 0.80,
                      decoration: BoxDecoration(
                          color: Color(0xFFf4f6fa),
                          borderRadius: BorderRadius.circular(29.5)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Text(
                                  "${f.format(_minutes)}:${f.format(_seconds)}",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 80,
                                    color: Color(0xff7165E3),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              // STOP BUTTON
 
                              Container(
                                decoration: BoxDecoration(
                                  color: Colors.grey[800],
                                  shape: BoxShape.circle,
                                ),
                                height: 90,
                                width: 90,
                                child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.grey[800]),
                                    shape: MaterialStateProperty.all(
                                        CircleBorder()),
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _stopTimer();
                                    });
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      "Annulla",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
 
                              // START BUTTON 
 
                              Container(
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                ),
                                height: 90,
                                width: 90,
                                child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xff7165E3)),
                                    shape: MaterialStateProperty.all(
                                        CircleBorder()),
                                  ),
                                  onPressed: () {
                                    _startTimer();
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      "Avvia",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),

Answer 1

这是因为您使用的字体。

您使用的字体没有负空格。尝试使用一些调整了负空间的字体。 I Roboto Mono 是一种有负空间的字体。

在上图中，字符占据相等的空间。

pubspec.yaml

google_fonts: ^2.1.0

sport_screen.dart

Text(
  "${f.format(_minutes)}:${f.format(_seconds)}",
  textAlign: TextAlign.center,
  style: GoogleFonts.robotoMono(
    fontSize: 80.0,
    color: const Color(0xff7165E3),
  ),
)

请参阅here 了解有关字体和负空间的更多信息。

默认字体

等宽字体