Flutter如何实现应用启动时自动加载CSV生成数据表无需手动触发

你只需要在State的初始化生命周期方法initState中触发loadAsset调用即可，initState会在当前组件首次挂载时自动执行，无需手动触发。

修改步骤 #

• 第一步：在_TableLayoutState类中新增重写initState方法：

@override
void initState() {
  super.initState();
  // 组件初始化时自动调用CSV加载逻辑
  loadAsset();
}

• 第二步（可选）：如果不需要手动刷新功能，可以直接删除Scaffold中floatingActionButton相关的所有代码。

修改后完整代码 #

import 'package:flutter/material.dart';
import 'package:csv/csv.dart';
import 'package:flutter/services.dart' show rootBundle;


class TableLayout extends StatefulWidget {
  const TableLayout({Key? key}) : super(key: key);

  @override
  _TableLayoutState createState() => _TableLayoutState();
}

class _TableLayoutState extends State<TableLayout> {
  List<List<dynamic>> data = [];

  @override
  void initState() {
    super.initState();
    loadAsset();
  }

  loadAsset() async {
    final myData = await rootBundle.loadString("assets/routes.csv");
    List<List<dynamic>> csvTable = const CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 不需要按钮可以直接删掉下面两行floatingActionButton相关配置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.refresh),
          onPressed: () async {
            await loadAsset();
          }),
      appBar: AppBar(
        title: const Text("Bus Routes"),
      ),

      body: SingleChildScrollView(
        child: Table(
          border: TableBorder.all(width: 1.0),
          children: data.map((item) {
            return TableRow(
                children: item.map((row) {
                  return Container(
                    color: Colors.blueGrey,
                    child: Padding(
                      padding: const EdgeInsets.all(1.0),
                      child: Text(
                        row.toString(),
                        style: const TextStyle(fontSize: 20.0),
                      ),
                    ),
                  );
                }).toList());
          }).toList(),
        ),
      ),
    );
  }
}

可选提前加载方案 #

如果你需要在整个应用启动时就完成CSV加载，不需要等TableLayout组件挂载，可以在main函数中提前加载：

void main() async {
  // 确保Flutter框架初始化完成
  WidgetsFlutterBinding.ensureInitialized();
  // 提前加载CSV数据，可存入全局变量、单例类中供全局调用
  final myData = await rootBundle.loadString("assets/routes.csv");
  final csvTable = const CsvToListConverter().convert(myData);
  // 此处可以把csvTable赋值给全局存储对象
  runApp(const MyApp());
}

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