web-dev-qa-db-ja.com

Flutterで動的リストを作成する方法は？

このウィジェットをScaffold本文に添付しています。ウィジェットは、jsonオブジェクトを返すasyncメソッドを取得します。

そのjsonオブジェクトから動的にリストを作成したいと思います。問題は、画面が空であるということです。何らかの理由で、このウィジェットは、リストの準備ができたとき、またはそのようなものになったときに自分自身を更新する必要があります。

何か案は？

class TestList extends StatelessWidget {
  final quiz;

  TestList({this.quiz});

  @override
  Widget build(BuildContext context) {
    var listArray = [];

    this.quiz.then((List value) {   // this is a json object

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

      }
    });

    return new Container(
        child: new ListView(
      children: listArray     // add the list here.
    ));
  }
}
listviewasynchronousflutter
10
Patrioticcow

setStateを使用してUIを再構築できます。

例：

class TestList extends StatefulWidget {

  final Future<List> quiz;

  TestList({this.quiz});

  @override
  _TestListState createState() => new _TestListState();

}

class _TestListState extends State<TestList> {

  bool loading = true;

  _TestListState(){
    widget.quiz.then((List value) {

      // loop through the json object
      for (var i = 0; i < value.length; i++) {

        // add the ListTile to an array
        listArray.add(new ListTile(title: new Text(value[i].name));

        }

            //use setState to refresh UI
            setState((){
          loading = false;
        });

    });
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> listArray = [];

    return new Container(
        child: new ListView(
            children: loading?[]:listArray     // when the state of loading changes from true to false, it'll force this widget to reload
        ));

  }

}
11
Hemanth Raj

FutureBuilderを使用して、ウィジェットの状態を支援できます。

new FutureBuilder<List>(
  future: widget.quiz,
  builder:
      (BuildContext context, AsyncSnapshot<List> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return new Text('Waiting to start');
      case ConnectionState.waiting:
        return new Text('Loading...');
      default:
        if (snapshot.hasError) {
          return new Text('Error: ${snapshot.error}');
        } else {
          return new ListView.builder(
              itemBuilder: (context, index) =>
                  new Text(snapshot.data[index].name),
              itemCount: snapshot.data.length);
        }
    }
  },
)

基本的に、将来の状態に応じてビルダーで指定されたメソッドに通知します。 Futureが値を受け取ってエラーにならない場合、ListView.builderを使用してリストを作成できます。これは、すべてのアイテムが同じタイプである場合にリストを作成する便利な方法です。

詳細は https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html

4
Sergi and Replace