Flutter加载万条JSON句子列表的最优性能方案咨询

你的现有代码存在两个核心问题：一是每次页面build都会重复调用getSentencesList()，导致重复加载解析整个大JSON；二是一次性把1万条数据全部加载到内存，容易引发内存占用过高甚至崩溃。下面是针对性的优化方案：

1. 避免重复加载解析JSON #

把getSentencesList()的调用移到initState里，确保只在页面初始化时执行一次，避免重复开销：

class _PageLoadState extends State<PageLoadState> {
  late Future<BookModel> _sentencesFuture;

  @override
  void initState() {
    super.initState();
    // 仅初始化时加载一次JSON
    _sentencesFuture = getSentencesList();
  }

  Future<BookModel> getSentencesList() async {
    final response = await rootBundle.loadString('assets/books.json');
    var data = jsonDecode(response);
    return BookModel.fromJson(data);
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: FutureBuilder<BookModel>(
        future: _sentencesFuture, // 使用预初始化的Future，避免重复执行
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final sentence = snapshot.data![index].sentence;
                return Padding(
                  padding: const EdgeInsets.all(18.0), // 用const减少Widget重建
                  child: Text(sentence ?? ''), // 判空避免空指针异常
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 加载中状态
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

2. 流式解析JSON（核心优化，解决内存占用问题） #

如果JSON文件体积过大，一次性解析会把所有数据加载到内存，这时候用流式解析，边读文件边解析，只在需要时生成对应模型，无需缓存全部数据：

// 替换原getSentencesList，返回Stream流式输出句子模型
Stream<SentenceModel> streamSentences() async* {
  final fileBytes = await rootBundle.load('assets/books.json');
  final decoder = JsonDecoder();
  // 将文件字节转换为字符流，再转为JSON解析流
  final jsonStream = fileBytes.buffer.asUint8List()
      .transform(utf8.decoder)
      .transform(decoder.decoder);
  
  await for (final data in jsonStream) {
    // 假设JSON是数组结构，逐个解析句子对象
    if (data is List) {
      for (final item in data) {
        yield SentenceModel.fromJson(item);
      }
    }
  }
}

配合StreamBuilder或直接订阅流缓存已加载数据，结合列表懒加载：

class _PageLoadState extends State<PageLoadState> {
  late Stream<SentenceModel> _sentenceStream;
  final List<SentenceModel> _loadedSentences = [];
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _sentenceStream = streamSentences();
    // 订阅流，后台加载并缓存句子
    _sentenceStream.listen((sentence) {
      if (mounted) {
        setState(() {
          _loadedSentences.add(sentence);
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        itemCount: _loadedSentences.length + (_isLoading ? 1 : 0),
        itemBuilder: (context, index) {
          if (index == _loadedSentences.length) {
            return const Center(child: CircularProgressIndicator());
          }
          final sentence = _loadedSentences[index];
          return Padding(
            padding: const EdgeInsets.all(18.0),
            child: Text(sentence.sentence ?? ''),
          );
        },
        // 滚动到底部时的加载提示（可选）
        onScrollNotification: (notification) {
          if (notification is ScrollEndNotification && !_isLoading) {
            final metrics = notification.metrics;
            if (metrics.extentAfter < 500) {
              setState(() => _isLoading = true);
              Future.delayed(const Duration(milliseconds: 500), () {
                if (mounted) setState(() => _isLoading = false);
              });
            }
          }
          return false;
        },
      ),
    );
  }
}

3. 额外性能优化细节 #

• 句子模型类使用不可变设计（比如手动写const构造函数，或用freezed库），减少对象重建开销。
• 列表项中的静态Widget（如EdgeInsets）尽量用const修饰，避免每次build创建新实例。
• 若句子过长，可给Text添加maxLines和overflow属性，优化渲染性能。
• 可使用ListView.custom配合SliverChildBuilderDelegate，更精细地控制列表项的创建与回收。

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