Flutter：SfDataGrid 自动宽度列似乎无法按照文档工作
Dav*_*ave 2 datatables syncfusion dart flutter syncfusion-chart
按照此处的示例并彻底阅读此处的文档后，我根本不明白为什么我的专栏没有显示所有内容。
请参阅此屏幕截图，但电子邮件和电话号码列被截断：
我试图注意的事情：
- 确保列和单元构建器上的填充匹配
- 删除任何固定宽度
- 尽可能禁用 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(),
"123thisisareallylongemail@longemaildomain.com",
// 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());
}
}
您正在为单元格小部件使用不同的文本样式。默认情况下，单元格宽度是根据默认文本样式计算的。要根据不同的 TextStyle 计算单元格宽度，只需重写标题的computeHeaderCellWidth方法和单元格的computeCellWidth方法，并返回具有所需TextStyle 的super 方法。请检查以下示例和代码片段。
\n在数据网格中：
\n\n final CustomColumnSizer _customColumnSizer = CustomColumnSizer();\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: const Text(\'Flutter SfDataGrid\'),\n ),\n body: SfDataGrid(\n source: _employeeDataSource,\n columns: getColumns,\n columnSizer: _customColumnSizer,\n columnWidthMode: ColumnWidthMode.auto),\n );\n }\n\n\nclass EmployeeDataSource extends DataGridSource {\n\n\xe2\x80\xa6\n\n @override\n DataGridRowAdapter? buildRow(DataGridRow row) {\n return DataGridRowAdapter(\n cells: row.getCells().map<Widget>((dataGridCell) {\n return Container(\n alignment: Alignment.center,\n padding: const EdgeInsets.symmetric(horizontal: 16.0),\n child: Text(\n dataGridCell.value.toString(),\n style: const TextStyle(fontWeight: FontWeight.bold),\n softWrap: false,\n ));\n }).toList());\n }\n}\n\n在 ColumnSizer 中：
\nclass CustomColumnSizer extends ColumnSizer {\n @override\n double computeHeaderCellWidth(GridColumn column, TextStyle style) {\n style = const TextStyle(fontWeight: FontWeight.bold);\n\n return super.computeHeaderCellWidth(column, style);\n }\n\n @override\n double computeCellWidth(GridColumn column, DataGridRow row, Object? cellValue,\n TextStyle textStyle) {\n textStyle = const TextStyle(fontWeight: FontWeight.bold);\n\n return super.computeCellWidth(column, row, cellValue, textStyle);\n }\n}\n\n示例链接： https://www.syncfusion.com/downloads/support/directtrac/general/ze/main-621685425
\n此外，我们已经在 UG 文档中提供了示例。请经历这个，
\n\n我们希望这会有所帮助。如果您需要任何进一步的帮助，请告诉我们。
\n| 归档时间： |
|
| 查看次数： |
2618 次 |
| 最近记录： |