flutter - 将 CheckBox 中的选中项列表返回到 TabBar 主屏幕 Flutter
问题描述
我有一个带有两个标签的应用程序。一个用于“所有项目”列表,第二个用于“收藏/保存的项目”。第二个选项卡在小部件的FAB
内部有一个写有“在此处添加您最喜欢的项目”的文本。因此,当单击 时,Navigator.push() 工作并通过使用小部件触发第二个屏幕“选择最喜欢的项目” 。我制作了一个空列表(实际上是为了避免重复)来存储要选择的项目。在“选择最喜欢的项目屏幕”中还有一个,当点击它时, Navigator.pop() 有效并且应该返回列表children
Column
FAB
CheckBox
_saved
Set
FAB
_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);
},
),
);
}
}
解决方案
这是演示代码,您可以使用以下代码制作自定义代码
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),
);
},
),
);
}
}
推荐阅读
- node.js - 如何在 Loopback REST API 上实现 JWT 身份验证?
- javascript - 有没有办法将当前页面的路径名插入到 div 类参数值中?
- c# - 由于未解决对对象的引用,程序无法正常工作
- c# - 捕获并保存图片到特定路径
- struct - 无法将十六进制字符串转换为双精度
- ios - 尽管有条件绑定,但在隐式展开 Optional 值时意外发现 nil
- html - v-for循环仅显示唯一项目vue js
- prolog - Prolog告诉我一个过程似乎已定义时未定义
- pandas - 将 pandas 列中每个 1 的大小为 n(上、下)的窗口替换为 1
- c - 如何在 GTK 或 Cairo 中将纹理应用到四边形?