如何优化自定义JSON转换Widget 提升Flutter列表交互流畅度

核心卡顿原因 #

你当前代码的性能损耗主要来自四个重复冗余操作：

1. build方法内重复初始化数据，每次重绘都重新生成全量数据和数据源实例
2. JsonWidget每次build都往全局列表追加Tooltip，导致Widget数量无限累加
3. 每次构建JsonWidget都重复解析JSON字符串，产生多余的计算开销
4. 用Row放多个标签容易触发布局溢出，同时PaginatedDataTable一次性渲染全量数据，没有利用懒加载能力

优化实现步骤 #

1. 把数据初始化移到initState，避免重复生成数据 #

原代码把getData()放在build方法中，每次页面重绘都会重新生成50条数据、重新实例化数据源，属于完全不必要的开销：

class _MyTableWidgetState extends State<MyTableWidget> {
  MyDataTableSource _data = MyDataTableSource([]);
  List<MyObject> list = [];

  @override
  void initState() {
    super.initState();
    getData(); // 仅在组件初始化时执行一次
  }

  getData() {
    for (int i = 0; i < 50; i++) {
      list.add(MyObject(i));
    }
    _data = MyDataTableSource(list);
  }

  @override
  Widget build(BuildContext context) {
    // 删掉此处的getData()调用
    return Scaffold(
      // 原有布局代码不变
    );
  }
}

2. 提前解析JSON，避免运行时重复计算 #

在MyObject构造时就把JSON解析为标签列表，不要每次构建Widget时才解析字符串：

class MyObject {
  int id;
  String jsonStr =
      '{"year":1850,"1 name":"Zuzanna","names":"Stefania","surname":"Zabłocka","sex":"W","city":"Warsaw","date":"1850.01.02","father":"Piotr","mothers_anme":"Józefa","mothers_surname":"Wojnicz","info":"Szlachetni"}';
  // 提前解析好的标签列表
  late List<MapEntry<String, dynamic>> tags;

  MyObject(this.id) {
    // 构造时一次性解析完成
    final data = json.decode(jsonStr) as Map<String, dynamic>;
    tags = data.entries.toList(growable: false);
  }
}

3. 重写JsonWidget消除冗余逻辑 #

原JsonWidget的全局containers列表不会自动清空，每次build都会追加新的Tooltip，导致Widget数量指数级上升，同时用Row布局容易出现溢出错误：

class JsonWidget extends StatelessWidget {
  // 直接传入提前解析好的标签
  final List<MapEntry<String, dynamic>> tags;
  // const构造函数提升Widget复用率
  const JsonWidget({Key? key, required this.tags}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 用Wrap代替Row，超出宽度自动换行，减少布局异常和计算开销
    return Wrap(
      spacing: 3, // 水平标签间距
      runSpacing: 3, // 垂直行间距
      children: tags.map((entry) {
        return Tooltip(
          message: entry.key,
          textStyle: const TextStyle(color: Colors.white),
          child: Container(
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent, width: 0.7),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Text(entry.value.toString()),
          ),
        );
      }).toList(growable: false), // 固定长度列表性能更好
    );
  }
}

4. 调整数据源调用与分页配置 #

修改MyDataTableSource中的JsonWidget调用，同时开启分页懒加载：

class MyDataTableSource extends DataTableSource {
  final List<MyObject> _data;
  MyDataTableSource(this._data);

  @override
  bool get isRowCountApproximate => false;
  @override
  int get rowCount => _data.length;
  @override
  int get selectedRowCount => 0;

  @override
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text(_data[index].id.toString())),
      DataCell(
        JsonWidget(tags: _data[index].tags), // 直接传提前解析好的标签
        onTap: () => {},
      ),
    ]);
  }
}

// 分页组件配置调整，开启懒加载
PaginatedDataTable(
  source: _data,
  rowsPerPage: 10, // 每页只渲染10条，超出部分滚动时再渲染
  columns: [
    DataColumn(label: Text("ID")),
    DataColumn(label: Text("标签")),
  ],
  // 其余配置不变
)

额外优化建议 #

• 给所有静态不变的Widget加const修饰，进一步减少重建开销
• 如果不需要Tooltip的默认动画效果，可以自定义简单的hover提示组件，降低动画带来的性能消耗
• 开启Flutter性能模式验证帧率，确认优化效果

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