仅在 iOS 模拟器- Flutter 中的 Syncfusion DataGrid 屏幕上时，cpu 温度和使用率飙升

Question

在此寻求帮助或想法。可能是我做错了什么，或者有人有想法可以提供帮助。

我终于弄清楚并成功实现了两个单独的 Syncfusion DataGrid。它们工作完美，完全按照我的需要和想要的方式工作，尽管与 DataTable 相比，它们的工作方式非常复杂。抱歉不得不把那个插头插在那里。无论如何，我将数据网格加载到屏幕中。当我转到该屏幕时，数据网格显示并且我的 cpu 温度和风扇速度飞速上升（每 2 秒 1 摄氏度）直到 85 度 + 我停止模拟器或导航到另一个屏幕。任何一项行动几乎都会立即减少 cpu 导航或停止后下降的温度。这就像时钟工作，导航到数据网格屏幕 - 温度上升，导航离开 - 温度下降。

罪魁祸首看起来是 activity 监视器 (macbook pro) 建议的“跑步者”，它开始使用 75% + cpu。

有人可以提出任何有用的想法吗？我不知道该尝试什么，没有输出或错误。此外，数据网格中几乎没有数据。我说的是 4 行和 5 个单元格的超级简单数据......没有理由会发生这种情况。拥有 50 倍数据量的 DataTable 甚至都没有出现 cpu...

还有问题，还有其他人对 Syncfusion DataGrid 有这个问题吗？

编辑：使用 Android Studio 或 VS Code 启动时出现同样的问题...

编辑 II：运行在物理 iphone 上不会产生相同的问题。

我的 DataGrid 代码：

//
///
/// Income data grid- Syncfusion version
import 'package:flutter/material.dart';
import 'package:fp_provider_demo_one/models/income/income.dart';
import 'package:fp_provider_demo_one/models/income/income_data.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

class IncomeDataGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<IncomeData>(
      builder: (context, incomeData, child) {
        var incomeDataSource =
            IncomeGridSource(incomeData: incomeData.getIncomeList());
        return Scaffold(
          body: SafeArea(
            child: SfDataGrid(
              source: incomeDataSource,
              columnWidthMode: ColumnWidthMode.fill,
              columns: <GridColumn>[
                GridTextColumn(
                  columnName: 'source',
                  label: Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(16.0),
                    alignment: Alignment.center,
                    child: Text(
                      'Source',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                GridTextColumn(
                  columnName: 'gross',
                  label: Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(8.0),
                    alignment: Alignment.center,
                    child: Text(
                      'Gross',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                GridTextColumn(
                  columnName: 'cgi',
                  label: Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(8.0),
                    alignment: Alignment.center,
                    child: Text(
                      'CGI',
                      style: TextStyle(color: Colors.white),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
                GridTextColumn(
                  columnName: 'incomeDate',
                  label: Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(8.0),
                    alignment: Alignment.center,
                    child: Text(
                      'Income Date',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                GridTextColumn(
                  columnName: 'dateAdded',
                  label: Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(8.0),
                    alignment: Alignment.center,
                    child: Text(
                      'Date Added',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class IncomeGridSource extends DataGridSource {
  /// Creates the income data source class with required details.
  IncomeGridSource({@required List<Income> incomeData}) {
    _incomeData = incomeData
        .map<DataGridRow>(
          (income) => DataGridRow(
            cells: [
              DataGridCell<String>(columnName: 'source', value: income.source),
              DataGridCell<double>(columnName: 'gross', value: income.gross),
              DataGridCell<double>(columnName: 'cgi', value: income.cgi),
              DataGridCell<String>(
                  columnName: 'incomeDate',
                  value: DateFormat.yMMMd().format(income.incomeDate)),
              DataGridCell<String>(
                  columnName: 'dateAdded',
                  value: DateFormat.yMMMd().format(income.dateAdded)),
            ],
          ),
        )
        .toList();
  }

  List<DataGridRow> _incomeData = [];

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

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    Color getRowBackgroundColor() {
      final int index = _incomeData.indexOf(row);
      if (index % 2 == 0) {
        return Colors.green.shade100;
      }
      return Colors.transparent;
    }

    return DataGridRowAdapter(
        color: getRowBackgroundColor(),
        cells: row.getCells().map<Widget>((e) {
          return Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(8.0),
            child: Text(e.value.toString()),
          );
        }).toList());
  }
}

Answer 1

这似乎是 macos 上的一个已知问题:

https://github.com/flutter/flutter/issues/59327

我认为它还没有解决方案，但在问题中他们提到了与动画相关的问题！

Answer 2

感谢您联系 Syncfusion 支持，

根据您提供的详细信息和代码段，我们分析了您报告的问题。我们尝试了相同的代码片段和我们的本地数据。我们没有遇到任何 CPU 增加的问题。我们在下面附上了代码片段、视频和系统配置详细信息。

此外，我们怀疑您正在创建 DataGridSource 和 getIncomeList 消费者本身。因此，可能是从提供者到消费者的连续调用可能导致了这个问题。因此，我们对获取数据做了一些修改，并在下面的代码片段中将 DataGridSource 分配给 SfDataGrid。

关于albeit in a very complex manner compared to DataTable，我们调整了从用户端获取小部件的分页数据表结构，并在我们的SfDataGrid中做了虚拟化概念。

代码片段：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
            create: (_) => EmployeeDataSource())
      ],
      child: MaterialApp(
        title: 'Syncfusion DataGrid Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: SkyRocketingIssue(),
      ),
    );
  }
}

class SkyRocketingIssue extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<EmployeeDataSource>(
      builder: (context, employeeDataSource, _) {
        return Scaffold(
          appBar: AppBar(
            title: Text('DataGrid Demo'),
          ),
          body: SfDataGrid(
            source: employeeDataSource,
            columnWidthMode: ColumnWidthMode.fill,
            selectionMode: SelectionMode.multiple,
            navigationMode: GridNavigationMode.cell,
            allowEditing: true,
            // controller: dataGridController,
            onQueryRowHeight: (details) {
              return details.rowHeight;
            },
            columns: <GridColumn>[
              GridTextColumn(
                  columnName: 'id',
                  label: Container(
                      padding: EdgeInsets.all(16.0),
                      alignment: Alignment.centerRight,
                      child: Text(
                        'ID',
                      ))),
              GridTextColumn(
                  columnName: 'name',
                  label: Container(
                      padding: EdgeInsets.all(16.0),
                      alignment: Alignment.centerLeft,
                      child: Text('Name'))),
              GridTextColumn(
                  columnName: 'designation',
                  width: 120,
                  label: Container(
                      padding: EdgeInsets.all(16.0),
                      alignment: Alignment.centerLeft,
                      child: Text('Designation'))),
              GridTextColumn(
                  columnName: 'salary',
                  label: Container(
                      padding: EdgeInsets.all(16.0),
                      alignment: Alignment.centerRight,
                      child: Text('Salary'))),
            ],
          ),
        );
      },
    );
  }
}

/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
  /// Creates the employee class with required details.
  Employee(this.id, this.name, this.designation, this.salary);

  /// Id of an employee.
  int id;

  /// Name of an employee.
  String name;

  /// Designation of an employee.
  String designation;

  /// Salary of an employee.
  int salary;
}

/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {
  /// Creates the employee data source class with required details.
  EmployeeDataSource(){
    employees = getEmployeeData();
    buildDataGridRow();
  }

  void buildDataGridRow() {
    dataGridRows = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(
                  columnName: 'designation', value: e.designation),
              DataGridCell<int>(columnName: 'salary', value: e.salary),
            ]))
        .toList();
  }

  List<Employee> employees = <Employee>[];

  List<DataGridRow> dataGridRows = [];

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

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((e) {
      return Container(
        alignment: (e.columnName == 'id' || e.columnName == 'salary')
            ? Alignment.centerRight
            : Alignment.centerLeft,
        padding: EdgeInsets.all(8.0),
        child: Text(e.value.toString()),
      );
    }).toList());
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(10010, 'Grimes', 'Developer', 15000),
      Employee(10010, 'Lane', 'Project Lead', 20000),
      Employee(10010, 'Doran', 'Developer', 15000),
      Employee(10010, 'Betts', 'Developer', 15000),
      Employee(10010, 'Tamer', 'Manager', 30000),
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(10010, 'Grimes', 'Developer', 15000),
      Employee(10010, 'Lane', 'Project Lead', 20000),
      Employee(10010, 'Doran', 'Developer', 15000),
      Employee(10010, 'Betts', 'Developer', 15000),
      Employee(10010, 'Tamer', 'Manager', 30000),
    ];
  }
}

配置详情：

我们已经通过以下配置测试了您报告的问题 mac machine

• MacOS 版本

• Flutter 频道版本

Flutter 2.0.3 • 通道稳定 • https://github.com/flutter/flutter.git 框架 • 修订版 4d7946a68d（3 周前） • 2021-03-18 17:24:33 -0700 引擎 • 修订版 3459eb2436 工具 • Dart 2.12.2*

• XCode -> 12.4

• 模拟器 iPhone 12 专业最大版本：iOS14.4

请告诉我们您结束的以下详细信息，

• macOS 版本 • XCode 版本 • 模拟器版本 • Flutter 频道版本

这将有助于我们分析报告的确切版本问题。

仅在 iOS 模拟器- Flutter 中的 Syncfusion DataGrid 屏幕上时，cpu 温度和使用率飙升

Skyrocketing cpu temps & usage only when on Syncfusion DataGrid screen in iOS emulator- Flutter

datagrid

syncfusion

cpu-usage

flutter