Flutter中Text组件显示样式异常（存在多余间距/高度）

问题描述 #

在Flutter中使用Provider进行状态管理，JobDetailsScreen组件通过Provider展示文本内容时，文本可正常显示，但存在多余的垂直高度/内边距，导致文本间距过大，不符合预期的紧凑显示效果。

异常显示效果：标题与公司名称之间存在明显的多余垂直空隙，整体排版松散。
预期显示效果：文本紧凑排列，无多余垂直间距，排版简洁利落。

相关代码 #

class JobDetailsScreen extends HookWidget {
  const JobDetailsScreen({required this.id, Key? key}) : super(key: key);

  final String id;

  @override
  Widget build(BuildContext context) {
    final job = Provider.of<JobsNotifier>(context).currentJob;
    var loading = Provider.of<JobsNotifier>(context).isLoadingCurrentJob;
    useEffect(() {
      if (job == null) {
        Future.microtask(() async {
          await Provider.of<JobsNotifier>(context, listen: false)
              .getCurrentJob(id);
        });
      }
      return () => {};
    }, [id]);
    return Scaffold(
      appBar: const NavBarTop(
        title: 'Job Details',
        innerAppBar: true,
      ),
      body: loading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : SingleChildScrollView(
              child: Container(
                padding: const EdgeInsets.all(15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(job.title,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 24)),
                    Text(job.company,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18)),
                    ElevatedButton(
                      onPressed: () async {
                        try {
                          await openUrl(job.applyUrl!);
                        } on String catch (e) {
                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            content: Text(
                              e,
                              style: const TextStyle(color: Colors.white),
                            ),
                            backgroundColor: Colors.red,
                          ));
                        }
                      },
                      style: ButtonStyle(
                          minimumSize: MaterialStateProperty.all(
                              const Size(double.infinity, 50))),
                      child: const Text('Apply'),
                    ),
                  ],
                ),
              ),
            ),
    );
  }
}

解决方案 #

问题根源在于Flutter的Text组件默认带有额外的行高（height属性默认值大于1.0），导致文本上下存在多余空隙。可以通过以下方式解决：

方法1：强制设置Text的行高为1.0 #

在Text组件的style中添加height: 1.0，让行高与字体大小完全匹配，消除默认的额外空隙：

Text(job.title,
    style: const TextStyle(
        fontWeight: FontWeight.bold, fontSize: 24, height: 1.0)),
Text(job.company,
    style: const TextStyle(
        fontWeight: FontWeight.bold, fontSize: 18, height: 1.0)),

方法2：手动控制文本间距（可选） #

如果需要更精细地调整两个文本之间的距离，可以在两个Text之间添加SizedBox来指定精确间距，同时配合行高调整：

Text(job.title,
    style: const TextStyle(
        fontWeight: FontWeight.bold, fontSize: 24, height: 1.0)),
const SizedBox(height: 4), // 自定义文本间距
Text(job.company,
    style: const TextStyle(
        fontWeight: FontWeight.bold, fontSize: 18, height: 1.0)),

修改后即可实现文本紧凑排列的预期效果。

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