RichText小部件在文本中内置了垂直填充

Question

我有一个RichText小部件，它显示一个类似“5:21”的时间，其中分钟以粗体显示，秒不以粗体显示。

我正在使用小部件检查工具来观察文本的边界。

RichText小部件的区域在文本的上方和下方都有大量的填充（如10dp的顶部和底部）。在水平方向上，根本没有衬垫，该区域紧贴字体边缘。使用RichText时，如何使区域紧贴字体的顶部和底部？

return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RichText(
          textAlign: TextAlign.center,
          text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                text: "$minutes:",
                style: textStyle,
              ),
              TextSpan(
                text: "$seconds".padLeft(2, '0'),
                style: textStyle.copyWith(fontWeight: FontWeight.w100),
              ),
            ],
          ),
        ),
        Text(
          "time",
        ),
      ],
    );

Answer 1

试试这个

Container(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                  children: <TextSpan>[
                    TextSpan(
                      text: "$minutes:",
                      style: textStyle,
                    ),
                    TextSpan(
                      text: "$seconds".padLeft(2, '0'),
                      style: textStyle.copyWith(fontWeight: FontWeight.w100),
                    ),
                  ],
                ),
              ),
            ),
            Text(
              "time",
            ),