Flutter文本行高设置方法及Material Design引导页32sp行高实现咨询

嘿，这个问题问到点子上了——Material Design引导页里要求的32sp行高（标题文本底部到副标题文本基线的距离），真没法只靠Padding来凑。因为Padding是给整个文本块加外部间距，根本没法精准控制字体的基线对齐，毕竟不同字体本身有自己的排版参数（比如 ascent、descent），随便加Padding只会让实际间距偏离规范。我来给你拆解精准实现的思路和方法：

为什么Padding不足以满足要求？ #

Padding是给Text组件的外部添加间距，而每个字体自带的排版属性（比如字体的上下留白、行高）会影响文本的实际位置。比如你给标题和副标题之间加了20sp的Padding，实际的标题底部到副标题基线的距离可能会因为字体差异、文本行高设置而偏离32sp的要求，完全做不到精准对齐。

精准实现的两种方法 #

方法1：用Baseline组件手动控制对齐 #

Baseline组件可以让子组件的基线对齐到指定位置，结合TextPainter计算字体的排版参数，就能精准控制32sp的间距：

import 'package:flutter/material.dart';

class OnboardingText extends StatelessWidget {
  final String title;
  final String subtitle;

  const OnboardingText({super.key, required this.title, required this.subtitle});

  @override
  Widget build(BuildContext context) {
    // 定义标题和副标题的样式
    final titleStyle = TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
      color: Colors.black,
    );
    final subtitleStyle = TextStyle(
      fontSize: 14,
      color: Colors.grey[600],
    );

    // 计算标题文本的descent（标题底部到自身基线的距离）
    final titlePainter = TextPainter(
      text: TextSpan(text: title, style: titleStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    final titleDescent = titlePainter.descent;

    // 目标间距：标题底部到副标题基线的距离是32sp
    const targetGap = 32.0;

    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title, style: titleStyle),
        // 副标题基线定位：标题descent + 目标间距
        Baseline(
          baseline: titleDescent + targetGap,
          baselineType: TextBaseline.alphabetic,
          child: Text(subtitle, style: subtitleStyle),
        ),
      ],
    );
  }
}

这个方法的核心是通过TextPainter拿到标题字体的descent值，再用Baseline把副标题的基线精准定位到「标题descent + 32sp」的位置，完全符合Material Design的规范要求。

方法2：用CustomMultiChildLayout自定义布局 #

如果需要更灵活的排版控制（比如多组文本块的基线对齐），可以用CustomMultiChildLayout实现完全自定义的布局逻辑：

import 'package:flutter/material.dart';

class OnboardingLayout extends StatelessWidget {
  final String title;
  final String subtitle;

  const OnboardingLayout({super.key, required this.title, required this.subtitle});

  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(
      delegate: _OnboardingTextDelegate(
        title: title,
        titleStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        subtitle: subtitle,
        subtitleStyle: TextStyle(fontSize: 14),
        targetGap: 32.0,
      ),
      children: [
        LayoutId(id: 'title', child: Text(title)),
        LayoutId(id: 'subtitle', child: Text(subtitle)),
      ],
    );
  }
}

class _OnboardingTextDelegate extends MultiChildLayoutDelegate {
  final String title;
  final TextStyle titleStyle;
  final String subtitle;
  final TextStyle subtitleStyle;
  final double targetGap;

  _OnboardingTextDelegate({
    required this.title,
    required this.titleStyle,
    required this.subtitle,
    required this.subtitleStyle,
    required this.targetGap,
  });

  @override
  void performLayout(Size size) {
    // 计算标题的尺寸和descent值
    final titlePainter = TextPainter(
      text: TextSpan(text: title, style: titleStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    final titleSize = titlePainter.size;
    final titleDescent = titlePainter.descent;

    // 计算副标题的尺寸和基线位置
    final subtitlePainter = TextPainter(
      text: TextSpan(text: subtitle, style: subtitleStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    final subtitleSize = subtitlePainter.size;

    // 布局标题：左上角对齐
    layoutChild('title', BoxConstraints.loose(titleSize));
    positionChild('title', Offset(0, 0));

    // 布局副标题：精准控制基线间距
    layoutChild('subtitle', BoxConstraints.loose(subtitleSize));
    final subtitleBaselineY = titleDescent + targetGap;
    final subtitleY = subtitleBaselineY - subtitlePainter.baseline;
    positionChild('subtitle', Offset(0, subtitleY));
  }

  @override
  bool shouldRelayout(_OnboardingTextDelegate oldDelegate) {
    return oldDelegate.title != title ||
        oldDelegate.subtitle != subtitle ||
        oldDelegate.targetGap != targetGap;
  }
}

这种方法适合复杂的排版场景，完全自定义文本的位置，确保间距精准到像素级别。

总结 #

• 仅用Padding无法精准实现Material Design的32sp基线间距要求，字体自带的排版参数会干扰实际间距。
• 推荐用Baseline组件配合TextPainter的方式，简单直接且精准；复杂场景可以用CustomMultiChildLayout实现完全自定义布局。

内容的提问来源于stack exchange，提问作者Archie G. Quiñones