Flutter Web中如何用excel包展示Excel的A1:A20及A列数据？

步骤1：获取目标工作表 #

先从解析后的Excel对象中获取目标工作表（这里以第一个工作表为例，你也可以通过指定sheetName精准获取）：

// 获取第一个工作表（或用excel.tables['Sheet1']指定工作表）
var targetSheet = excel.tables.values.first;

步骤2：提取A1:A20区域数据 #

excel包中列索引从0开始（A列对应索引0），行索引从0开始（Excel的第1行对应索引0）。A1到A20对应行索引0到19，遍历这些行并提取每行的第0个元素即可：

List<dynamic?> a1ToA20Data = [];
for (int i = 0; i < 20; i++) {
  if (targetSheet.rows.length > i) {
    var row = targetSheet.rows[i];
    // 避免行内无数据导致越界，空单元格返回null
    a1ToA20Data.add(row.length > 0 ? row[0]?.value : null);
  } else {
    // 工作表行数不足20时补空值
    a1ToA20Data.add(null);
  }
}

步骤3：提取A列全部数据 #

遍历工作表所有行，提取每行的第0个元素（A列）：

List<dynamic?> fullColumnAData = [];
for (var row in targetSheet.rows) {
  fullColumnAData.add(row.length > 0 ? row[0]?.value : null);
}

步骤4：整合代码并实现界面展示 #

将上述逻辑整合到代码中，使用StatefulWidget存储数据并刷新UI展示：

完整示例代码：

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:excel/excel.dart';

class ExcelReaderPage extends StatefulWidget {
  const ExcelReaderPage({super.key});

  @override
  State<ExcelReaderPage> createState() => _ExcelReaderPageState();
}

class _ExcelReaderPageState extends State<ExcelReaderPage> {
  List<dynamic?>? _a1ToA20Data;
  List<dynamic?>? _fullColumnAData;

  void _giveExcel() async {
    FilePickerResult? excelFile = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['xlsx'],
      allowMultiple: false,
    );
    if (excelFile != null) {
      var bytes = excelFile.files.single.bytes;
      var excel = Excel.decodeBytes(bytes as List<int>);
      
      // 获取第一个工作表并打印名称
      var targetSheet = excel.tables.values.first;
      print('当前工作表：${targetSheet.sheetName}');

      // 提取A1:A20数据
      List<dynamic?> a1ToA20Data = [];
      for (int i = 0; i < 20; i++) {
        if (targetSheet.rows.length > i) {
          var row = targetSheet.rows[i];
          a1ToA20Data.add(row.length > 0 ? row[0]?.value : null);
        } else {
          a1ToA20Data.add(null);
        }
      }

      // 提取A列全部数据
      List<dynamic?> fullColumnAData = [];
      for (var row in targetSheet.rows) {
        fullColumnAData.add(row.length > 0 ? row[0]?.value : null);
      }

      // 更新状态刷新UI
      setState(() {
        _a1ToA20Data = a1ToA20Data;
        _fullColumnAData = fullColumnAData;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Excel数据读取')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ElevatedButton(
              onPressed: _giveExcel,
              child: const Text('选择Excel文件'),
            ),
            const SizedBox(height: 20),
            if (_a1ToA20Data != null)
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'A1:A20区域数据',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 10),
                    Expanded(
                      child: ListView.builder(
                        itemCount: _a1ToA20Data!.length,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.symmetric(vertical: 4.0),
                            child: Text('A${index+1}: ${_a1ToA20Data![index] ?? '空'}'),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            const SizedBox(height: 20),
            if (_fullColumnAData != null)
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'A列全部数据',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 10),
                    Expanded(
                      child: ListView.builder(
                        itemCount: _fullColumnAData!.length,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.symmetric(vertical: 4.0),
                            child: Text('A${index+1}: ${_fullColumnAData![index] ?? '空'}'),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• excel包中rows是行数据列表，行索引0对应Excel第1行，列索引0对应Excel的A列；
• 使用row[0]?.value获取单元格实际值，避免空指针异常；
• 通过setState更新状态，触发UI自动刷新展示数据。

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