如何实现垂直显示分钟和秒的计时器小部件

How to implement a Timer widget where minutes and seconds are vertically displayed

提问人:Haider Nawaz 提问时间:11/10/2023 最后编辑:Haider Nawaz 更新时间:11/11/2023 访问量:27

问:

enter image description here

我想在颤动中实现上述风格。

到目前为止,我实现了什么:enter image description here

为什么文本之间有不必要的空格。

我做了一些调试:enter image description here

怎么可能。我从两个文本中删除了垂直填充。

我的代码:

return SizedBox(
      height: 300,
      width: 300,
      child: CircleProgressBar(
        foregroundColor: Colors.blue,
        backgroundColor: Colors.black12,
        value: 0.0,
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "30",
                style: clockStyle,
              ),
              Align(
                child: Text(
                  "26",
                  style: clockStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );

时钟样式:


TextStyle clockStyle = GoogleFonts.alfaSlabOne(
  fontSize: 100,
);
振定时器 颤振-动画 时钟 移动-开发

评论

0赞 Md. Kamrul Amin 11/10/2023
添加循环进度条形码。从您的代码中可以看出,空间是因为您有一个给定高度的盒子。因此,两个小部件占用的空间相等。这就是为什么你会看到不需要的空间。
0赞 Haider Nawaz 11/10/2023
圆形 Progess Bar 是 pub.dev 的第三方套餐。这个小部件需要一个孩子,所以我给了它一个包含两个文本的列。我没有在任何地方添加任何尺寸的盒子。
0赞 jmatth 11/10/2023
请包括 的定义。clockStyle
0赞 Haider Nawaz 11/11/2023
@jmatth添加了它。

答:

0赞 jmatth 11/11/2023 #1

呈现的文本会根据其大小添加额外的垂直空间,称为行距。将字体高度设置为将其删除:1

TextStyle clockStyle = GoogleFonts.alfaSlabOne(
  fontSize: 100,
  height: 1,
);

评论

0赞 Randal Schwartz 11/11/2023
也可能有一些上升者和下降者的空间。类型很棘手。:)