FlChart中旋转文本的X轴底部标题布局问题

问题描述 #

我使用fl_chart 0.70.2版本（通过flutter pub add fl_chart安装）时，发现X轴底部的旋转标题超出了轴范围：

已观察到的现象：

• 问题与90度旋转（Transform.rotate(...)）直接相关，实际场景中需要显示日期时间格式（"y-MM-dd hh:mm"），必须进行旋转处理。
• 移除reservedSize: 60参数后，标题的X轴位置恢复正常，但文本会与轴重叠：
  

最小复现代码：

import 'dart:math' as math;

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const AxesDemo());
  }
}

class AxesDemo extends StatelessWidget {
  const AxesDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FLChart Axis Demo")),
      body: SizedBox(
        height: 300,
        width: double.infinity,
        child: LineChart(
          LineChartData(
            lineBarsData: [
              LineChartBarData(spots: [FlSpot(0, 2), FlSpot(1, 3), FlSpot(2, 5), FlSpot(3, 3)]),
            ],
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 60,
                  getTitlesWidget: (value, meta) => Transform.rotate(angle: -math.pi / 2, child: Text("oops")),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

解决方案 #

方法一：使用FLChart内置的旋转参数（推荐） #

FLChart的SideTitles类提供了angle参数，专门用于旋转标签，布局系统会自动计算旋转后的尺寸，完美适配reservedSize，无需手动处理Transform。

修改后的代码片段：

titlesData: FlTitlesData(
  bottomTitles: AxisTitles(
    sideTitles: SideTitles(
      showTitles: true,
      reservedSize: 60,
      angle: -90, // 直接设置旋转角度（单位：度）
      getTitlesWidget: (value, meta) => Text("oops"), // 移除Transform.rotate
    ),
  ),
),

方法二：手动调整Transform的对齐与偏移 #

如果必须使用Transform.rotate，需要通过设置对齐方式和偏移，让标签在预留区域内正确显示：

getTitlesWidget: (value, meta) => Transform.rotate(
  angle: -math.pi / 2,
  alignment: Alignment.centerRight, // 调整对齐方式，让标签向右侧对齐
  child: Padding(
    padding: const EdgeInsets.only(bottom: 8.0), // 按需添加垂直偏移，避免重叠
    child: Text("oops"),
  ),
),

同时注意reservedSize的值需要足够容纳旋转后的文本高度（即原文本的宽度），可以根据实际日期时间文本的宽度调整该值。

内容的提问来源于stack exchange，提问作者Thomas W.