首页 > 解决方案 > 将 CheckBox 中的选中项列表返回到 TabBar 主屏幕 Flutter

问题描述

我有一个带有两个标签的应用程序。一个用于“所有项目”列表,第二个用于“收藏/保存的项目”。第二个选项卡在小部件的FAB内部有一个写有“在此处添加您最喜欢的项目”的文本。因此,当单击 时,Navigator.push() 工作并通过使用小部件触发第二个屏幕“选择最喜欢的项目” 。我制作了一个空列表(实际上是为了避免重复)来存储要选择的项目。在“选择最喜欢的项目屏幕”中还有一个,当点击它时, Navigator.pop() 有效并且应该返回列表childrenColumnFABCheckBox_savedSetFAB_saved. 这是我面临的唯一问题。我只是无法实现它。同样正如我上面提到的,一些文本写在“保存的项目”选项卡中,我想构建类似“如果选择项目,只显示项目而不是(前面提到的)文本!如果没有选择任何东西,只返回文本。”

你们可以在这里查看整个代码。我遇到问题的代码:

class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
 }

class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
    Text(
      'Add Your Favorite Sites Here!❤',
      style: TextStyle(color: Colors.white),
    ),
    Container(
      child: Icon(Icons.favorite, size: 150, color: Colors.blue[100]),
    ),
    SizedBox(height: 250),
    FloatingActionButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => FavoriteList(),
          ),
        );
      },
      child: Icon(Icons.add),
      foregroundColor: Colors.blue,
    ),
  ],
);
   }
  }

//The Favorite List Code:
final Set _saved = Set();

class FavoriteList extends StatefulWidget {
@override
_FavoriteListState createState() => _FavoriteListState();
 }

class _FavoriteListState extends State<FavoriteList> {

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Add to Favorites!'),
      centerTitle: true,
      backgroundColor: Colors.red),
  // backgroundColor: Colors.indigo,
  body: SafeArea(
    child: ListView.builder(
      itemCount: 53,
      itemBuilder: (context, index) {
        return CheckboxListTile(
          activeColor: Colors.red,
          checkColor: Colors.white,
          // value: _saved.contains(context), // changed
          value: _saved.contains(index),
          onChanged: (val) {
            setState(() {
              // isChecked = val;           // changed
              // if(val == true){           // changed
              //   _saved.add(context);     // changed
              // } else{                    // changed
              //   _saved.remove(context);  // changed
              // }                          // changed
              if (val == true) {
                _saved.add(index);
              } else {
                _saved.remove(index);
              }
            });
          },
          title: Row(
            children: <Widget>[
              Image.asset('lib/images/${images[index]}'),
              SizedBox(
                width: 10,
              ),
              Text(nameOfSite[index]),
            ],
          ),
        );
      },
    ),
  ),
  floatingActionButton: FloatingActionButton(
    foregroundColor: Colors.red,
    child: Icon(Icons.check),
    onPressed: () {
      Navigator.pop(context, _saved);
    },
  ),
);
  }
   }

标签: flutterdart

解决方案


这是演示代码,您可以使用以下代码制作自定义代码

class checkModel{
  String nameOfSite;
  bool isCheck;

  checkModel(this.nameOfSite, this.isCheck);

}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<checkModel> _list = new List();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _list.add(checkModel("title1", false));
    _list.add(checkModel("title2", false));
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body:  ListView.builder(
        itemCount: _list.length,
        itemBuilder: (context, index) {


          return CheckboxListTile(
            activeColor: Colors.red,
            checkColor: Colors.white,
            // value: _saved.contains(context), // changed
            value: _list[index].isCheck,
            onChanged: (val) {
              print("object  ${val}");
              setState(() {
                _list[index].isCheck = val;
              });
            },
            title: Text(_list[index].nameOfSite),
          );
        },
      ),
    );
  }
} 

推荐阅读