Question

我创建了一个字符串列表并应用了一个复选框，当单击该复选框时，字符串列表将显示在下一个屏幕上，但出现范围错误。请帮忙。

var _suggestions = <String>['this is me1','this is me2','this is me3' ];
final _saved = <String>['this is me1','this is me2','this is me3' ];
final _biggerFont = TextStyle(fontSize: 18.0);

这是我定义的字符串。

void _pushSaved(){
Navigator.of(context).push(
  MaterialPageRoute<void>(
    // NEW lines from here...
    builder: (BuildContext context) {
      final tiles = _saved.map(
            (String pair) {
          return ListTile(
            title: Text(
              pair,
              style: _biggerFont,
            ),
          );
        },
      );
      final divided = ListTile.divideTiles(
        context: context,
        tiles: tiles,
      ).toList();

      return Scaffold(
        appBar: AppBar(
          title: Text('Saved Suggestions'),
        ),
        body: ListView(children: divided),
      );
    }, // ...to here.
  ),
);
}

这是一些页面路由

 Widget _buildSuggestions() {
return ListView.builder(
    padding: EdgeInsets.all(16.0),
    itemBuilder: /*1*/ (context, i) {
      if (i.isOdd) return Divider(); /*2*/
      final index = i ~/ 2; /*3*/
      _suggestions = <String>['this is me1','this is me2','this is me3'];
     
      return _buildRow(_suggestions[index]);
    });
    }

在下一个屏幕中显示选中的复选框数据没有问题，但我不知道为什么显示范围错误。

Widget _buildRow(String pair) {
final alreadySaved = _saved.contains(pair);
return Container(
  decoration: new BoxDecoration (
      color: HexColor('#F2FFFF'),
    border: Border.all(color: HexColor('#09B9B6')),
    borderRadius: BorderRadius.all(Radius.circular(20)),
  ),
  child: ListTile(
    title: Text(
      pair,
      style: _biggerFont,
    ),
    trailing: Icon(
      alreadySaved ? Icons.check_box : Icons.check_box_outline_blank_outlined,
      color: alreadySaved ? HexColor('#09B9B6') :null,
    ),
    onTap: (){
      setState(() {
        if (alreadySaved){
          _saved.remove(pair);
        }
        else{
          _saved.add(pair);
        }
      });
    },
  ),
);
  }

这是构建行函数

Answer 1

我们也可以使用 ListView.separated

ListView.separated(
padding: EdgeInsets.all(16.0),
itemBuilder: (context, index) {
  return _buildRow(_suggestions[index]);
},
separatorBuilder: (_, __) => Divider(),
itemCount: _suggestions.length);

如何消除在颤振中运行的范围错误？

1 个答案: