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

Question

我有一个带有 Scaffold 的 flutter 应用程序，我在其中放置了以下容器。这个容器包含计时器的分和秒，以及两个按钮。我试图避免 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

发生这种情况是因为您使用的字体。

您使用的字体没有负数space。尝试使用一些调整了负 space 的字体。 I Roboto Mono 是一种负数 space.

的字体

上图中的字符相等space。

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了解更多关于字体和底片的信息space。

默认字体

单色space字体

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

Flutter: Avoid Text Widget re-centering when Timer is active

user-interface

android

timer

dart

flutter