Flutter 在其他小部件中使用解析的 JSON 數據

Question

我是 Flutter 的新手，目前正在創建一個數據可視化/統計應用程序。 它使用 HTTP 請求並解析 JSON 數組，我遵循的在線指南已成功將數據解析為列表視圖。 但是，我希望在其他小部件（例如圖形和圖表）中使用這些數據。 我的代碼目前看起來像這樣。

import 'dart:async';
import 'dart:convert';
import 'dart:ffi';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Post>> fetchPosts(http.Client client) async {
  var url = "http://172.22.49.41:4998/androidconnect/Api.php";
  //var url = "http://192.168.1.220:4998/getEnv1.php?n=4";
  var client = new http.Client();
  var request = new http.Request('POST', Uri.parse(url));
  var body = {'type': 'getContacts'};
  request.bodyFields = body;

  var data = await http.post(url, body: {"type": "getContacts"});
  print(data.body);
  return await compute(parsePosts, data.body);
}

// A function that will convert a response body into a List<Photo>
List<Post> parsePosts(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<Post>((json) => Post.fromJson(json)).toList();
}
class Post {
  String time;
  dynamic sen1; // Sensor variables declared as dynamic as its values has the tendency to change between double and int
  dynamic sen2;
  dynamic sen3;
  dynamic sen4;
  dynamic sen5;
  dynamic sen6;

  Post({this.time, this.sen1, this.sen2, this.sen3, this.sen4, this.sen5, this.sen6});

  factory Post.fromJson(Map<String, dynamic> json) {
    return new Post(
      time: json['Date'] as String, // Parsed Date values are read as String
      sen1: json['Sen1'] as dynamic, // Parsed Sensor values are kept as double or int in database therefore use dynamic
      sen2: json['Sen2'] as dynamic,
      sen3: json['Sen3'] as dynamic,
      sen4: json['Sen4'] as dynamic, // **Sen4, Sen5, Sen6 values are currently hardcoded in database for testing purposes. Wait until actual data values are used or edit accordingly**
      sen5: json['Sen5'] as dynamic,
      sen6: json['Sen6'] as dynamic,
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Sensors';

    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FutureBuilder<List<Post>>(
        future: fetchPosts(http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) print(snapshot.error);

          return snapshot.hasData
              ? PhotosList(photos: snapshot.data)
              : Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

class PhotosList extends StatelessWidget {
  final List<Post> photos;

  PhotosList({Key key, this.photos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topCenter,
      child: ListView.builder(
        reverse: true, // Configs needed to update latest info at the top instead of bottom
        shrinkWrap: true,
        itemCount: photos == null ? 0 : photos.length,
        itemBuilder: (BuildContext context, i) {
          return new ListTile(
            contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
            title: new Text("Sen1: " + photos[i].sen1.toString() + "  Sen2: " + photos[i].sen2.toString() + "  Sen3: " + photos[i].sen3.toString() + "  \nSen4: " + photos[i].sen4.toString() + "  Sen5: " + photos[i].sen5.toString() + "  Sen6: " + photos[i].sen6.toString()),
            subtitle: new Text("Time recorded: " + photos[i].time.toString()),
          );
        }
    )
    );
  }
} 

在列表視圖中，使用 photos[i].sen1.toString() 打印值。 我如何在其他小部件/類中使用它？ 先感謝您。

Answer 1

...
 itemCount: photos == null ? 0 : photos.length,
        itemBuilder: (BuildContext context, i) {
          return ItemList(post: snapshot.data[i]);
        }

// the other class
class ItemList extends StatelessWidget {
     final Post post; // This post is Iterator of List<Post>

  const ItemList({Key key, this.post}) : super(key: key);
  return ListTile(
            contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
            title: new Text("Sen1: " + photos.sen1.toString() + "  Sen2: " + photos.sen2.toString() + "  Sen3: " + photos.sen3.toString() + "  \nSen4: " + photos.sen4.toString() + "  Sen5: " + photos.sen5.toString() + "  Sen6: " + photos.sen6.toString()),
            subtitle: new Text("Time recorded: " + photos.time.toString()),
          );
}

new 現在是可選的。