有没有办法在颤动上创建像可编辑网格一样的电子表格？答案

【问题标题】：Is there a way to create a spreadsheet like editable grid on flutter?有没有办法在颤动上创建像可编辑网格一样的电子表格？
【发布时间】：2020-01-13 00:08:00
【问题描述】：

如果没有可用的 dart 包怎么办

【问题讨论】：

标签： flutter spreadsheet

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以使用包https://pub.dev/packages/table_sticky_headers

代码sn-p

StickyHeadersTable(
          columnsLength: titleColumn.length,
          rowsLength: titleRow.length,
          columnsTitleBuilder: (i) => Text(titleColumn[i]),
          rowsTitleBuilder: (i) => Text(titleRow[i]),
          contentCellBuilder: (i, j) =>
              Container(height: 50, width: 50, child: TextField()),
          legendCell: Text('Sticky Legend'),
        ),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:table_sticky_headers/table_sticky_headers.dart';

void main() {
  final columns = 10;
  final rows = 20;

  List<List<String>> _makeData() {
    final List<List<String>> output = [];
    for (int i = 0; i < columns; i++) {
      final List<String> row = [];
      for (int j = 0; j < rows; j++) {
        row.add('T$i : L$j');
      }
      output.add(row);
    }
    return output;
  }

  /// Simple generator for column title
  List<String> _makeTitleColumn() => List.generate(columns, (i) => 'Top $i');

  /// Simple generator for row title
  List<String> _makeTitleRow() => List.generate(rows, (i) => 'Left $i');

  runApp(
    TableSimple(
      titleColumn: _makeTitleColumn(),
      titleRow: _makeTitleRow(),
      data: _makeData(),
    ),
  );
}

class TableSimple extends StatelessWidget {
  TableSimple(
      {@required this.data,
      @required this.titleColumn,
      @required this.titleRow});

  final List<List<String>> data;
  final List<String> titleColumn;
  final List<String> titleRow;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sticky Headers Two-Dimension  Table'),
          backgroundColor: Colors.amber,
        ),
        body: StickyHeadersTable(
          columnsLength: titleColumn.length,
          rowsLength: titleRow.length,
          columnsTitleBuilder: (i) => Text(titleColumn[i]),
          rowsTitleBuilder: (i) => Text(titleRow[i]),
          contentCellBuilder: (i, j) =>
              Container(height: 50, width: 50, child: TextField()),
          legendCell: Text('Sticky Legend'),
        ),
      ),
    );
  }
}

【讨论】：

这会在 TAB 按键上启用焦点更改吗？顺便说一句，你在那里使用什么版本的 table_sticky_headers？
table_sticky_headers 版本，我指定任何
制表键工作正常。我用安卓模拟器测试过
Tranks，它对我有用，但是库是错误的......你说“你可以使用包 pub.dev/packages/flutter_sticky_header”，但是你必须导入的库是 不是flutter_sticky_header，而是table_sticky_headers。我用过 table_sticky_headers: ^1.1.2 并且工作得很好:)
不客气，感谢您的阅读和更新...以及解决方案:)

【解决方案2】：

您可以使用Editable Package 完美地做到这一点！

List rows = [
    {
      "name": 'James Joe',
      "date": '23/09/2020',
      "month": 'June',
      "status": 'completed'
    },
    {
      "name": 'Daniel Paul',
      "month": 'March',
      "status": 'new',
      "date": '12/4/2020',
    },
    {
      "month": 'May',
      "name": 'Mark Zuckerberg',
      "date": '09/4/1993',
      "status": 'expert'
    },
    {
      "name": 'Jack',
      "status": 'legend',
      "date": '01/7/1820',
      "month": 'December',
    },
  ];
  List cols = [
    {"title": 'Name', 'index': 1, 'key': 'name'},
    {"title": 'Date', 'index': 2, 'key': 'date'},
    {"title": 'Month', 'index': 3, 'key': 'month'},
    {"title": 'Status', 'index': 4, 'key': 'status'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Editable(
        columns: cols,
        rows: rows,
        zebraStripe: true,
        stripeColor2: Colors.grey[200],
        onRowSaved: (value) {
          print(value);
        },
        onSubmitted: (value) {
          print(value);
        },
        borderColor: Colors.blueGrey,
        showSaveIcon: true,
        saveIconColor: Colors.black,
        showCreateButton: true,
      ),
    );
  }

【讨论】：

很好，内容丰富的答案，感谢您使用我们希望看到您回答更多问题