flutter - 在小部件的表中显示数据

Question

我有下面的代码，该代码从url中获取数据，并将其显示在Widget中，这是一个csv数据，如何将其作为表放置？

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
 // print(rowsAsListOfValues);
  return rowsAsListOfValues;
}

class _MyHomePageState extends State<MyHomePage> {
  var rowsAsListOfValues;

  @override
  void initState() {
    super.initState();
    rowsAsListOfValues = "Loading data...";
  }

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    rowsAsListOfValues = await fetchUserData();
    super.setState(() {}); // to update widget data
    print(rowsAsListOfValues);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$rowsAsListOfValues',
            ),
          ],
        ),
      ),
    );
  }
}

我知道有 DataTable小部件，但不知道如何将其与动态数据连接。

对于静态数据，代码将类似于:

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

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

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues =
        const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  var rowsAsListOfValues;

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    rowsAsListOfValues = await fetchUserData();
    super.setState(() {}); // to update widget data
    /// new
    print(rowsAsListOfValues);
  }

  @override
  void initState() {
    super.initState();
    rowsAsListOfValues = "Loading data...";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$rowsAsListOfValues',
            ),
            DataTable(
              columns: const <DataColumn>[
                DataColumn(
                  label: Text(
                    'City',
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),
                ),
                DataColumn(
                  label: Text(
                    'Branches',
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),
                ),
              ],
              rows: const <DataRow>[
                DataRow(
                  cells: <DataCell>[
                    DataCell(Text('Dammam')),
                    DataCell(Text('2')),
                  ],
                ),
                DataRow(
                  cells: <DataCell>[
                    DataCell(Text('Khobar')),
                    DataCell(Text('3')),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用List.generate(rowsAsListOfValues.length - 1避免标题
程式码片段

List<List<dynamic>> rowsAsListOfValues;
...
rowsAsListOfValues == null
                ? CircularProgressIndicator()
                : DataTable(
                    ...
                    rows: List.generate(rowsAsListOfValues.length - 1, (index) {
                      return DataRow(
                        cells: <DataCell>[
                          DataCell(Text('${rowsAsListOfValues[index + 1][0]}')),
                          DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),
                        ],
                      );
                    })),

工作演示

完整的代码

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

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

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues = const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  List<List<dynamic>> rowsAsListOfValues;

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    rowsAsListOfValues = await fetchUserData();
    super.setState(() {}); // to update widget data
    /// new
    print(rowsAsListOfValues);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            rowsAsListOfValues == null
                ? Text("Loading data...")
                : Text(
                    '$rowsAsListOfValues',
                  ),
            rowsAsListOfValues == null
                ? CircularProgressIndicator()
                : DataTable(
                    columns: const <DataColumn>[
                        DataColumn(
                          label: Text(
                            'City',
                            style: TextStyle(fontStyle: FontStyle.italic),
                          ),
                        ),
                        DataColumn(
                          label: Text(
                            'Branches',
                            style: TextStyle(fontStyle: FontStyle.italic),
                          ),
                        ),
                      ],
                    rows: List.generate(rowsAsListOfValues.length - 1, (index) {
                      return DataRow(
                        cells: <DataCell>[
                          DataCell(Text('${rowsAsListOfValues[index + 1][0]}')),
                          DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),
                        ],
                      );
                    })),
          ],
        ),
      ),
    );
  }
}