Flutter:SfDataGrid 自动宽度列似乎无法按照文档工作

Question

遵循此处的示例并彻底阅读 documentation here ，我根本不明白为什么我的专栏没有显示所有内容。

参见此屏幕截图，但电子邮件和电话号码列被截断:

我试图注意的事情:

• 确保列和单元格构建器上的内边距匹配
• 删除任何固定宽度
• 尽可能禁用 softWrap

任何帮助解释为什么会发生这种情况的帮助将不胜感激，谢谢。

页面:

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,
        ),
      ),
    );
  }
}

运动员数据源

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:gt_elite/helpers/gt_text_style.dart';
import 'package:gt_elite/helpers/string.dart';
import 'package:gt_elite/models/athlete.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:url_launcher/url_launcher.dart';

class AthleteDataSource extends DataGridSource {
  final _dateFormatter = DateFormat.yMd();

  AthleteDataSource({List<Athlete> athletes}) {
    dataGridRows = athletes
        .map<DataGridRow>(
          (dataGridRow) => DataGridRow(
            cells: [
              DataGridCell<Athlete>(
                columnName: 'avatar',
                value: dataGridRow,
              ),
              DataGridCell<String>(
                columnName: 'email',
                value: dataGridRow.email,
              ),
              DataGridCell<String>(
                columnName: 'phone',
                value: dataGridRow.phoneNumber,
              ),
              DataGridCell<DateTime>(
                columnName: 'birthdate',
                value: dataGridRow.birthdate,
              ),
              DataGridCell<double>(
                columnName: 'height',
                value: dataGridRow.height,
              ),
            ],
          ),
        )
        .toList();
  }

  List<DataGridRow> dataGridRows = [];

  @override
  List<DataGridRow> get rows => dataGridRows;

  @override
  bool shouldRecalculateColumnWidths() {
    return true;
  }

  void _launchCaller(String url) async {
    final uri = Uri.parse(url);
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri);
    } else {
      throw 'Could not launch $uri';
    }
  }

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      // Avatar cell
      if (dataGridCell.columnName == 'avatar') {
        if (dataGridCell.value.getAvatarUrl() != null) {
          return Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  width: 18,
                ),
                if (dataGridCell.value.getAvatarUrl() != null)
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: Container(
                      width: 30,
                      height: 30,
                      // decoration: getBoxDecoration(),
                      child: ClipOval(
                        child: CachedNetworkImage(
                          height: 30,
                          width: 30,
                          imageUrl: dataGridCell.value.getAvatarUrl(),
                          placeholder: (context, url) =>
                              CircularProgressIndicator(),
                          errorWidget: (context, url, error) =>
                              Icon(Icons.error),
                        ),
                      ),
                    ),
                  ),
                if (dataGridCell.value.getAvatarUrl() == null)
                  SizedBox(
                    width: 30,
                  ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        "${StringHelper.shortName(dataGridCell.value.lastName, nameLimit: 15)}",
                        textAlign: TextAlign.left,
                        style: GTTextStyle.subtitle2,
                      ),
                    ),
                    FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        "${StringHelper.shortName(dataGridCell.value.firstName, nameLimit: 15)}",
                        textAlign: TextAlign.left,
                        style: GTTextStyle.body,
                      ),
                    ),
                  ],
                )
              ]);
        }
      }
      if (dataGridCell.columnName == 'birthdate') {
        if (dataGridCell.value == null) return Container();
        return Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              _dateFormatter.format(dataGridCell.value),
              // overflow: TextOverflow.ellipsis,
              style: GTTextStyle.body,
              softWrap: false,
            ));
      }

      if (dataGridCell.columnName == 'phone') {
        if (dataGridCell.value == null) return Container();
        return InkWell(
          onTap: () {
            String phoneNumber = dataGridCell.value;
            phoneNumber = phoneNumber.replaceAll(" ", "").replaceAll(".", "");
            _launchCaller('tel:${phoneNumber}');
          },
          child: Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                dataGridCell.value.toString(),
                // overflow: TextOverflow.ellipsis,
                style: GTTextStyle.body,
                softWrap: false,
              )),
        );
      }

      if (dataGridCell.columnName == 'email') {
        if (dataGridCell.value == null) return Container();
        return InkWell(
          onTap: () {
            String val = dataGridCell.value;
            val = val.replaceAll(" ", "");
            _launchCaller('mailto:${val}');
          },
          child: Container(
              alignment: Alignment.centerLeft,
              // The autoFitPadding and the cell padding value should be same.
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                // dataGridCell.value.toString(),
                "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9989b9addc1c0dac0dac8dbccc8c5c5d0c5c6c7ceccc4c8c0c5e9c5c6c7ceccc4c8c0c5cdc6c4c8c0c787cac6c4" rel="noreferrer noopener nofollow">[email protected]</a>",
                // overflow: TextOverflow.ellipsis,
                style: GTTextStyle.body,
                softWrap: false,
              )),
        );
      }

      if (dataGridCell.columnName == 'height') {
        if (dataGridCell.value == null) return Container();
        return Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              dataGridCell.value.toString(),
              // overflow: TextOverflow.ellipsis,
              style: GTTextStyle.body,
              softWrap: false,
            ));
      }

      return Container();
    }).toList());
  }
}

Answer 1

您正在为单元格小部件使用不同的文本样式。默认情况下，单元格宽度是根据默认文本样式计算的。要根据不同的 TextStyle 计算单元格宽度，只需重写标题的 computeHeaderCellWidth 方法和单元格的 computeCellWidth 方法，并返回具有所需 TextStyle 的 super 方法。请检查以下示例和代码片段。

在数据网格中:

  final CustomColumnSizer _customColumnSizer = CustomColumnSizer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter SfDataGrid'),
      ),
      body: SfDataGrid(
          source: _employeeDataSource,
          columns: getColumns,
          columnSizer: _customColumnSizer,
          columnWidthMode: ColumnWidthMode.auto),
    );
  }

class EmployeeDataSource extends DataGridSource {

…

  @override
  DataGridRowAdapter? buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Text(
            dataGridCell.value.toString(),
            style: const TextStyle(fontWeight: FontWeight.bold),
            softWrap: false,
          ));
    }).toList());
  }
}

在 ColumnSizer 中:

class CustomColumnSizer extends ColumnSizer {
  @override
  double computeHeaderCellWidth(GridColumn column, TextStyle style) {
    style = const TextStyle(fontWeight: FontWeight.bold);

    return super.computeHeaderCellWidth(column, style);
  }

  @override
  double computeCellWidth(GridColumn column, DataGridRow row, Object? cellValue,
      TextStyle textStyle) {
    textStyle = const TextStyle(fontWeight: FontWeight.bold);

    return super.computeCellWidth(column, row, cellValue, textStyle);
  }
}

示例链接:https://www.syncfusion.com/downloads/support/directtrac/general/ze/main-621685425

此外，我们已经在 UG 文档中提供了示例。请仔细检查一下，

UG 文档:https://help.syncfusion.com/flutter/datagrid/columns-sizing?cs-save-lang=1&cs-lang=dart#autofit-calculation-based-on-different-textstyle

我们希望这会有所帮助。如果您需要任何进一步的帮助，请告诉我们。