具有动态标题的列表视图复选框颤动[关闭]

Question

所以我想构建一个带有复选框的列表视图，并且数据应该是使用模型动态的。任何帮助将不胜感激。

Answer 1

您可以像这样使用StatefulWidget、FutureBuilder、ListView.builder 和CheckboxListTile 来做到这一点..

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  
  List<String> listOfItems;
  List<bool> itemCheckedState = [];
  
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: fetchListOfItems(),
      builder: (context, snapshot){
        if(!snapshot.hasData){
          return const CircularProgressIndicator();
        }
        else {
          listOfItems = snapshot.data;
          for(int i = 0; i < listOfItems.length; i++){
            itemCheckedState.add(false);
          }
          return ListView.builder(
            itemCount: listOfItems.length,
            itemBuilder: (context, index){
              return CheckboxListTile(
                title: Text(listOfItems[index]),
                value: itemCheckedState[index],
                onChanged: (newValue){
                  setState((){
                    itemCheckedState[index] = newValue;
                  });
                },
              );
            }
          );
        }
      }
    );
  }
  
  
  Future<List<String>> fetchListOfItems() async {
    
    //for demo purpose lets just return a list after 2 seconds
    //here you can code for fetching your dynamic data instead
    
    List<String> list = ['abc', 'def', 'xyz'];
    await Future.delayed(Duration(seconds: 2), (){});
    return list;
  }
  
}