Flutter SfDataGrid自动列宽不生效，内容截断求助

问题描述 #

已通读Syncfusion SfDataGrid列宽配置文档并参考官方示例，但DataGrid中email和phone number列内容仍出现截断（截图如下）：

已尝试以下操作：

• 确保列与单元格的padding匹配
• 移除所有固定宽度设置
• 全局禁用softWrap

问题原因分析 #

查看代码后发现核心问题：列的columnName与数据源中对应单元格的columnName不匹配，导致DataGrid无法正确计算列宽：

1. Phone列：页面代码中定义的列columnName为phoneNumber，但数据源AthleteDataSource中对应单元格的columnName为phone，两者不一致。DataGrid无法关联列与对应单元格数据，只能以列标题的宽度作为列宽，导致长手机号被截断。
2. Email列：代码中columnName匹配，若实际运行中仍有截断，需确认是否存在父容器宽度限制，或文本样式导致的宽度计算偏差（当前测试用硬编码长邮箱，若列宽计算正常应能适配）。

修复方案 #

1. 修正Phone列的columnName匹配 #

修改AthleteDataSource中Phone列的单元格定义，将columnName改为phoneNumber，与页面列定义一致：

DataGridCell<String>(
  columnName: 'phoneNumber', // 原为'phone'，改为与页面列一致的columnName
  value: dataGridRow.phoneNumber,
),

2. 验证所有列的columnName一致性 #

确保所有列的columnName与数据源中对应单元格的columnName完全相同，这是DataGrid正确关联数据和计算列宽的前提。

3. 可选：优化Avatar列布局对列宽的影响 #

Avatar列中使用了固定宽度的SizedBox(width:18)和Padding，若需更精准的自动宽度计算，可将这些内边距/外边距合并到列的autoFitPadding中，避免额外的固定宽度元素干扰列宽计算。

相关代码参考 #

页面代码 #

import 'package:flutter/material.dart';
import 'package:gt_elite/datasource/athlete_data_source.dart';
import 'package:gt_elite/helpers/colors.dart';
import 'package:gt_elite/helpers/constants.dart';
import 'package:gt_elite/helpers/gt_text_style.dart';
import 'package:gt_elite/models/team.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:easy_localization/easy_localization.dart';

class ManagementAdminScreen extends StatelessWidget {
  final Team team;
  ManagementAdminScreen({@required this.team});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Colors.white,
          child: SfDataGrid(
            source: AthleteDataSource(
              athletes: team.getAthletesForProfile(Profile.athlete),
            ),
            columnWidthMode: ColumnWidthMode.auto,
            columnWidthCalculationRange: ColumnWidthCalculationRange.allRows,
            frozenColumnsCount: 0,
            columns: [
              _buildColumn('avatar', 'profile.athlete'),
              _buildColumn('email', 'email'),
              _buildColumn('phoneNumber', 'phoneNumber'),
              _buildColumn('birthdate', 'birthdate'),
              _buildColumn('height', 'height'),
            ],
          )),
    );
  }

  GridColumn _buildColumn(String name, String lbl) {
    return GridColumn(
      autoFitPadding: EdgeInsets.symmetric(horizontal: 16.0),
      columnName: name,
      label: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          lbl.tr(),
          style: GTTextStyle.subtitle2.copyWith(
            color: GTColors.textGrey,
          ),
          softWrap: false,
        ),
      ),
    );
  }
}

修正后的AthleteDataSource代码（关键部分） #

// ... 其他代码不变
DataGridRow(
  cells: [
    DataGridCell<Athlete>(
      columnName: 'avatar',
      value: dataGridRow,
    ),
    DataGridCell<String>(
      columnName: 'email',
      value: dataGridRow.email,
    ),
    DataGridCell<String>(
      columnName: 'phoneNumber', // 修正此处的columnName
      value: dataGridRow.phoneNumber,
    ),
    // ... 其他单元格不变
  ],
),
// ... 其他代码不变

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