flutter - 获取数据时出现 RangeError(无效索引)

Question

我在显示来自本地 json 的数据时收到 RangeError (index): Invalid value: Valid value range is empty: 0。我正在尝试使用 simple coverflow 显示来自本地 json 的三个选项的问题插件，但如前所述出现错误。我被这个错误困住了一段时间，正在寻求解决它的帮助。代码如下:

class _AS extends State<A> {
  int cI = 0;

  List<Container> d = [
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container(),
    Container()
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/bkg.png'), fit: BoxFit.cover)),
            child: new CoverFlow(
              dismissedCallback: dsps,
              currentItemChangedCallback: (int i) {
                setState(() {
                  cI = i;
                });
              },
              height: 400,
              itemCount: d.length,
              itemBuilder: (BuildContext c, int i) {
                return I(i, cI);
              },
            )));
  }

  dsps(int i, DismissDirection dir) {
    d.removeAt(i % d.length);
  }
}

class I extends StatefulWidget {
  final int i;
  final int cI;

  I(this.i, this.cI);

  @override
  _IS createState() => _IS(i, cI);
}

class _IS extends State<I> {
  final int i;
  final int cI;

  bool _s = false;
  bool _c = false;
  bool _w = false;
  bool _wr = false;

  _IS(this.i, this.cI);

  List<Q> l = List();

  F() async {
    l = new List<Q>();
    String j = await rootBundle.loadString('assets/acronym.json');
    Map m = json.decode(j);
    var p = m['data'] as List;
    for (int i = 0; i < p.length; i++) {
      l.add(new Q.fromJson(p[i]));
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Card(
        color: Colors.transparent.withOpacity(0.3),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              l[i].t,   <===== Error here
              style: TextStyle(fontSize: 21.0, color: Colors.white),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _c ? Colors.lightGreen : Colors.white.withOpacity(0.1),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(l[i].c,
                            style:
                                TextStyle(fontSize: 19.0, color: Colors.white),
                            textAlign: TextAlign.center))),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = true;
                      _c = true;
                      _w = false;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _w ? Colors.redAccent : Colors.white.withOpacity(0.1),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      l[i].w,
                      style: TextStyle(fontSize: 19.0, color: Colors.white),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = true;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _wr ? Colors.redAccent : Colors.white.withOpacity(0.1),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        l[i].wr,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 19.0, color: Colors.white),
                      ),
                    )),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = false;
                      _wr = true;
                    });
                  }
                },
              )),
        ]),
      ),
    );
  }
}

这是模态类:

class Q {
  String t;
  String c;
  String w;
  String wr;

  Q({this.t, this.c, this.w, this.wr});

  factory Q.fromJson(Map<String, dynamic> r) {
    return Q(t: r['t'], c: r['c'], w: r['w'], wr: r['wr']);
  }
}

Answer 1

您必须等待异步函数完成。一种方法是这样的:

@override
  Widget build(BuildContext context) {
    return l.length >0 ?Container(
      child: Card(
        color: Colors.transparent.withOpacity(0.3),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              l[i].t,   <===== Error here
              style: TextStyle(fontSize: 21.0, color: Colors.white),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _c ? Colors.lightGreen : Colors.white.withOpacity(0.1),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(l[i].c,
                            style:
                                TextStyle(fontSize: 19.0, color: Colors.white),
                            textAlign: TextAlign.center))),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = true;
                      _c = true;
                      _w = false;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _w ? Colors.redAccent : Colors.white.withOpacity(0.1),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      l[i].w,
                      style: TextStyle(fontSize: 19.0, color: Colors.white),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = true;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color:
                        _wr ? Colors.redAccent : Colors.white.withOpacity(0.1),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        l[i].wr,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 19.0, color: Colors.white),
                      ),
                    )),
                onTap: () {
                  if (i == cI) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = false;
                      _wr = true;
                    });
                  }
                },
              )),
        ]),
      ),
    ): CircularProgressIndicator();
  }

并将您的 F() 更改为:

F() async {
    l = new List<Q>();
    String j = await rootBundle.loadString('assets/acronym.json');
    Map m = json.decode(j);
    var p = m['data'] as List;
    for (int i = 0; i < p.length; i++) {
      l.add(new Q.fromJson(p[i]));
    }
    setState((){});
  }