動態/列表/​​數組變量抖動上的setState

Question

我知道這有點混亂，而且我對flutter還是很陌生，我很了解狀態如何在react上表現出來，但是flutter上的狀態管理在數組變量上似乎表現出不同的方式。

當我嘗試使用其他方法設置狀態時，它給了我不同的錯誤消息。 我已經在這個特定的小部件上工作了一個星期，但仍然不知道我在哪里做錯了。

class SurveyCard extends StatefulWidget {
  final int argument;
  SurveyCard({Key key, this.argument}) : super(key: key);
  State<StatefulWidget> createState() {
    return _Survey(argument: argument);
  }
}

class _Survey extends State<SurveyCard> {
  List<int> _value1=[];
  int argument;
  _Survey({Key key, this.argument});
  int value0=0;
  List<File> _file=[];

  void choose(i) async {
    var file;
    file = await ImagePicker.pickImage(source: ImageSource.camera);
    // giving me error when i take a picture.NoSuchMethodError (NoSuchMethodError: The method '[]=' was called on null. Receiver: nullTried calling: []=(0, Instance of '_File'))
    setState(() => _file[i] = file);
  }
  //cond 1 i can't press the radio button
  void _setvalue1(int value, i) { 
    setState(() {
     _value1[i]=value; 
    });
    }
  // cond 2  doesn't work and giving me rangeerror invalid value
  // _setvalue1(int value, i) { 
  //   setState(() {
  //    _value1[i]=value; 
  //   });
  // } 

  Widget makeRadioTiles(data, index) {
    List<Widget> list = new List<Widget>();

    for (int i = 0; i < data.length; i++) {
      int id = data[i].answerID;
      list.add(new RadioListTile(
        value: id,
        groupValue: _value1,
        // cond1
        onChanged:(id) => _setvalue1(id, index),
        // cond 2
        // onChanged: _setvalue1(id, index), 
        activeColor: Colors.green,
        controlAffinity: ListTileControlAffinity.trailing,
        title: new Text('${data[i].answerName}'),
      ));
    }
    Column column = new Column(
      children: list,
    );
    return column;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BaseWidget<VesselScreenModel>(
        model: VesselScreenModel(api: Provider.of(context)),
        onModelReady: (model) => model.getQuestion(argument),
        builder: (context, model, child) => model.busy
            ? Center(child: new CircularProgressIndicator())
            : ListView.builder(
                padding: const EdgeInsets.all(32),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: model.questions.data.questions.length,
                itemBuilder: (context, i) {
                  var dataSnapshot = model.questions;
                  var snapshot = dataSnapshot.data.questions[i];
                  return Card(
                    color: Colors.white,
                    child: Column(
                      children: [
                        Center(
                          child: _file == null
                              ? Text('No image selected.')
                              : Image.file(_file[i]),
                        ),
                        ListTile(
                            title: Text('${snapshot.questionName}',
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    color: Colors.black))),
                        Column(
                          children: <Widget>[
                            makeRadioTiles(snapshot.answers, i)
                          ],
                        ),
                        Container(
                          padding: const EdgeInsets.only(left: 16, right: 16),
                          child: TextField(
                            decoration: InputDecoration(labelText: 'Comment'),
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: FlatButton(
                                color: Color.fromRGBO(105, 114, 100, 0),
                                //where i take a picture for image
                                onPressed: () => choose(i),
                                child: const Text('Upload Image',
                                    style: TextStyle(fontSize: 15))),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ));
  }
}

Answer 1

您正在使用固定大小的列表_value1和_file 。 一旦知道數組索引的上限，請考慮使用其大小初始化兩個列表。

我已經稍微修改了您的代碼以使其正常工作。

class SurveyCard extends StatefulWidget {
  final int argument;
  SurveyCard({Key key, this.argument}) : super(key: key);
  State<StatefulWidget> createState() {
    return _Survey(argument: argument);
  }
}

class _Survey extends State<SurveyCard> {
  //Instead of initialzing your lists here
  //initilize them inside itembuilder 
  List<int> _value1;
  int argument;
  _Survey({Key key, this.argument});
  int value0=0;
  List<File> _file;

  void choose(i) async {
    var file;
    file = await ImagePicker.pickImage(source: ImageSource.camera);
    // giving me error when i take a picture.NoSuchMethodError (NoSuchMethodError: The method '[]=' was called on null. Receiver: nullTried calling: []=(0, Instance of '_File'))
    setState(() => _file[i] = file);
  }
  //cond 1 i can't press the radio button
  void _setvalue1(int value, i) { 
    setState(() {
     _value1[i]=value; 
    });
    }
  // cond 2  doesn't work and giving me rangeerror invalid value
  // _setvalue1(int value, i) { 
  //   setState(() {
  //    _value1[i]=value; 
  //   });
  // } 

  Widget makeRadioTiles(data, index) {
    List<Widget> list = new List<Widget>();

    for (int i = 0; i < data.length; i++) {
      int id = data[i].answerID;
      list.add(new RadioListTile(
        value: id,
        groupValue: _value1,
        // cond1
        onChanged:(id) => _setvalue1(id, index),
        // cond 2
        // onChanged: _setvalue1(id, index), 
        activeColor: Colors.green,
        controlAffinity: ListTileControlAffinity.trailing,
        title: new Text('${data[i].answerName}'),
      ));
    }
    Column column = new Column(
      children: list,
    );
    return column;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BaseWidget<VesselScreenModel>(
        model: VesselScreenModel(api: Provider.of(context)),
        onModelReady: (model) => model.getQuestion(argument),
        builder: (context, model, child) => model.busy
            ? Center(child: new CircularProgressIndicator())
            : ListView.builder(
                padding: const EdgeInsets.all(32),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: model.questions.data.questions.length,
                itemBuilder: (context, i) {

                  //initialize your lists here 
                  _value1 = List<int>(i);
                  _file = List<File>(i);

                  var dataSnapshot = model.questions;
                  var snapshot = dataSnapshot.data.questions[i];
                  return Card(
                    color: Colors.white,
                    child: Column(
                      children: [
                        Center(
                          child: _file == null
                              ? Text('No image selected.')
                              : Image.file(_file[i]),
                        ),
                        ListTile(
                            title: Text('${snapshot.questionName}',
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    color: Colors.black))),
                        Column(
                          children: <Widget>[
                            makeRadioTiles(snapshot.answers, i)
                          ],
                        ),
                        Container(
                          padding: const EdgeInsets.only(left: 16, right: 16),
                          child: TextField(
                            decoration: InputDecoration(labelText: 'Comment'),
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: FlatButton(
                                color: Color.fromRGBO(105, 114, 100, 0),
                                //where i take a picture for image
                                onPressed: () => choose(i),
                                child: const Text('Upload Image',
                                    style: TextStyle(fontSize: 15))),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
           );
  }
}