Flutter技术问题：如何在SizedBox中适配折线图与百分比指示器

问题核心原因 #

你的代码存在几个关键问题导致宽度溢出和布局适配失败：

• 外层Container固定宽度100远不足以容纳包含12个月份的折线图，直接引发宽度溢出
• 折线图使用DateTimeAxis但X轴数据是字符串类型的月份名称，类型不匹配导致渲染异常
• 未将Circular组件加入Row子项，无法实现预期的左右布局
• 折线图内部冗余的Center和Container额外增加布局约束，加剧适配问题

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class Data5 extends StatelessWidget {
  const Data5({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        // 改用自适应宽度，避免固定值限制
        width: MediaQuery.of(context).size.width * 0.95,
        height: 270,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Circular(),
            // 用Expanded让折线图填充剩余空间
            Expanded(child: Linechart()),
          ],
        ),
      ),
    );
  }
}

class Circular extends StatelessWidget {
  const Circular({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      // 缩小半径避免超出容器高度
      child: CircularPercentIndicator(
        radius: 80,
        lineWidth: 15.0,
        percent: 1.00,
        center: const Text(
          "TF",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32),
        ),
        progressColor: Color.fromRGBO(37, 150, 190, 1),
      ),
    );
  }
}

class Linechart extends StatelessWidget {
  const Linechart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<SalesData> chartData = [
      SalesData("Jan", 0),
      SalesData("Feb", 0),
      SalesData("Mar", 0),
      SalesData("Apr", 0),
      SalesData("May", 3),
      SalesData("June", 10),
      SalesData("Jul", 85),
      SalesData("Aug", 25),
      SalesData("Sept", 5),
      SalesData("Oct", 2),
      SalesData("Nov", 0),
      SalesData("Dec", 0)
    ];

    return Padding(
      padding: const EdgeInsets.all(8.0),
      // 移除冗余嵌套组件，直接返回图表
      child: SfCartesianChart(
        // 替换为CategoryAxis匹配字符串类型X轴数据
        primaryXAxis: CategoryAxis(
          labelRotation: 45, // 旋转标签避免重叠
          labelStyle: const TextStyle(fontSize: 10), // 缩小标签字体
        ),
        series: <ChartSeries>[
          LineSeries<SalesData, String>(
            dataSource: chartData,
            xValueMapper: (SalesData sales, _) => sales.month,
            yValueMapper: (SalesData sales, _) => sales.sales,
          )
        ],
      ),
    );
  }
}

class SalesData {
  SalesData(this.month, this.sales);
  final String month; // 修正变量名符合Dart命名规范
  final int sales;
}

关键修改点说明 #

1. 自适应布局：使用MediaQuery让外层容器自适应屏幕宽度，替代不合理的固定宽度
2. 布局结构优化：在Row中加入Circular组件，并用Expanded让折线图自动填充剩余空间
3. 图表轴修正：将DateTimeAxis替换为CategoryAxis匹配字符串类型数据，同时调整标签样式避免重叠
4. 尺寸适配：缩小圆形指示器的半径和字体，确保在容器高度内正常显示
5. 代码精简：移除冗余嵌套组件，修正变量命名符合规范

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