如何使json中的文本数据直接显示在页面中？

我一直在尝试将json中的数据直接显示在一个页面中，比如一个段落，但我没有做到，我用一个按钮成功地拉动了它，但我只想在我直接进入这个页面后显示数据。 我错过了什么？ 非常感谢你的帮助

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

class Page1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return Page1State();
  }

  Future<List> getData() async {
    String myURL = 'https://jsonplaceholder.typicode.com/users';
    http.Response response = await http.get(myURL);
    print(getData());
    return json.decode(response.body);
  }
}

class Page1State extends State<Page1> {
  var page = Page1();
  List data;
  List myTextData;


   void getMyData() async {
    data = await (page.getData());
    print(data);
    setState(() {
      myTextData = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page1'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: new SingleChildScrollView(
                child: Text(
                  '$getMyData',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

试试看

保持getdata方法处于您的状态

不要在显示为字符串时执行json.decode

试试这个

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

class Page1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
        return Page1State();
      }
    }
 @override
  void initState() { 
    super.initState();
    getMyData();
  }

class Page1State extends State<Page1> {
  String data;   

  void getMyData() async {
    String myURL = 'https://jsonplaceholder.typicode.com/users';
    http.Response response = await http.get(myURL);
    setState((){
      data = response.body; //do not decode as you want to show as  string
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page1'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: new SingleChildScrollView(
                child: data == null ? CircularProgressIndicator() : Text(
                  '$data',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“dart:async”；
导入“dart:convert”；
将“package:http/http.dart”导入为http；
类Page1扩展了StatefulWidget{
@凌驾
状态createState（）{
//TODO:实现createState
返回Page1State（）；
}
}
@凌驾
void initState（）{
super.initState（）；
getMyData（）；
}
类Page1State扩展状态{
字符串数据；
void getMyData（）异步{
字符串myURL=https://jsonplaceholder.typicode.com/users';
http.Response-Response=wait-http.get（myURL）；
设置状态（）{
data=response.body；//不要按照您希望显示为字符串的方式进行解码
});
}
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
返回脚手架(
appBar:appBar(
标题：文本（“第1页”），
),
主体：容器(
子：列(
儿童：[
扩大(
子：新的SingleChildScrollView(
child:data==null？CircularProgressIndicator（）：Text(
“$data”，
样式：TextStyle（字体大小：30），
),
),
),
],
),
),
);
}
}

您还可以使用

FutureBuilder

，这将允许您将小部件设置为无状态。FututeBuilder的

builder

中的快照还有两个有用的字段，如

connectionState

，可以让您轻松实现所有状态（等待、完成、出错）

更多信息请点击此处：

因为您的输出是JSON，所以我还提供了一个如何从中简单提取数据的示例

class Page1 extends StatelessWidget {
  Future<List> getData() async {
    String myURL = 'https://jsonplaceholder.typicode.com/users';
    http.Response response = await http.get(myURL);
    return json.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page1'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
                child: new SingleChildScrollView(
              child: FutureBuilder<List>(
                  future: getData(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(
                        snapshot.data
                            .map((user) => user['name'] as String)
                            .join('\n'),
                        style: TextStyle(fontSize: 30),
                      );
                    } else {
                      return Text('Waiting');
                    }
                  }),
            )),
          ],
        ),
      ),
    );
  }
}

class Page1扩展了无状态小部件{
Future getData（）异步{
字符串myURL=https://jsonplaceholder.typicode.com/users';
http.Response-Response=wait-http.get（myURL）；
返回json.decode（response.body）；
}
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
返回脚手架(
appBar:appBar(
标题：文本（“第1页”），
),
主体：容器(
子：列(
儿童：[
扩大(
子：新的SingleChildScrollView(
孩子：未来建设者(
future:getData（），
生成器：（上下文，快照）{
if（snapshot.hasData）{
返回文本(
快照数据
.map（（用户）=>user['name']作为字符串）
.join（'\n'），
样式：TextStyle（字体大小：30），
);
}否则{
返回文本（“等待”）；
}
}),
)),
],
),
),
);
}
}

因为

getMyData

是一个无效的方法，所以你不会得到任何东西。它给我空值，这是我首先遇到的问题。我必须保留列表myTextData而不是字符串。它给我NoSuchMethodError:getter'length'是在空值上调用的。检查我更新的答案！我忘了初始化列表（）；在这种情况下，CircularProgressIndicator保持循环，并且没有使用异步库，这正常吗？很抱歉，我的错误，异步不再需要了，我忘记了gall getmydata，我们应该在initstate中这样做，已经做了修改。请查收

 void getMyData() async {
    data = await (page.getData());
    print(data);
    setState(() {
      mList.addAll(data);
    });
  }

ListView.builder
  (
    itemCount: mList.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return new Text(mList[index]);
    }
  )

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

class Page1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
        return Page1State();
      }
    }
 @override
  void initState() { 
    super.initState();
    getMyData();
  }

class Page1State extends State<Page1> {
  String data;   

  void getMyData() async {
    String myURL = 'https://jsonplaceholder.typicode.com/users';
    http.Response response = await http.get(myURL);
    setState((){
      data = response.body; //do not decode as you want to show as  string
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page1'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              child: new SingleChildScrollView(
                child: data == null ? CircularProgressIndicator() : Text(
                  '$data',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  Future<List> getData() async {
    String myURL = 'https://jsonplaceholder.typicode.com/users';
    http.Response response = await http.get(myURL);
    return json.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Page1'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded(
                child: new SingleChildScrollView(
              child: FutureBuilder<List>(
                  future: getData(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(
                        snapshot.data
                            .map((user) => user['name'] as String)
                            .join('\n'),
                        style: TextStyle(fontSize: 30),
                      );
                    } else {
                      return Text('Waiting');
                    }
                  }),
            )),
          ],
        ),
      ),
    );
  }
}