如何在Flutter中实现如图所示的自定义文本样式？

作为Flutter新手，你想要实现图中所示的大字体搭配小字体的对齐文本样式，当前代码存在两处核心问题导致效果不符合预期：

1. Positioned组件必须嵌套在Stack内部使用，直接放在Expanded中无法生效
2. Row内的两个文本默认对齐方式不对，导致小字体文本位置偏移

以下是修正后的代码：

Stack(
  children: [
    // 占位容器，确保Stack有足够布局空间
    Expanded(child: Container()),
    Positioned(
      top: 300,
      left: 165,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "预算",
            style: GoogleFonts.aBeeZee(
              fontSize: 18,
              color: const Color.fromARGB(255, 1, 36, 65),
            ),
          ),
          Row(
            // 基于基线对齐两个文本，保证视觉协调
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: [
              Text(
                "1234",
                style: GoogleFonts.aBeeZee(
                  fontSize: 36,
                  color: const Color.fromARGB(255, 1, 36, 65),
                ),
              ),
              Text(
                ".56",
                style: GoogleFonts.aBeeZee(
                  fontSize: 22,
                  color: const Color.fromARGB(255, 1, 36, 65),
                ),
              ),
            ],
          )
        ],
      ),
    ),
  ],
)

关键修改说明： #

• 用Stack包裹Positioned，让定位组件正常工作
• 给Row添加基线对齐配置，让不同字号的文本保持视觉上的对齐感
• 替换示例文本为更贴合预算场景的数字内容，便于直观测试

内容的提问来源于stack exchange，提问作者Nalin Kariyawasam