flutter - 改变状态在另一个类中颤动
问题描述
我正在尝试制作一个待办事项列表应用程序,该应用程序将在我单击加号按钮时显示一个待办事项任务,并在我单击任务上的删除图标时消失。此代码执行此操作,但更改不是实时完成的。仅当我保存代码并运行它时,单击脉冲按钮后才会添加一个任务,而不是在我按下它时添加。
import 'package:flutter/material.dart';
import 'package:my_app/main.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
List TodoList = [];
callback(varTodoList) {
setState(() {
TodoList = varTodoList;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: TodoList.length,
itemBuilder: (context, index) {
return TodoTasks(TodoList: TodoList, index: index, callback: callback);
}
),
),
Expanded(
flex: 1,
child:
AddButton(TodoList: TodoList, callback: callback)
)
],
)
)
);
}
}
class TodoTasks extends StatelessWidget {
List TodoList;
int index;
Function callback;
TodoTasks({required this.TodoList, required this.index, required this.callback});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 300,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(30),
boxShadow: [BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
]
),
child:
Row( children: [
Expanded(
flex: 11,
child:
Center(child: Text(TodoList[index], style: TextStyle(fontSize: 30))),
),
Expanded(
flex: 1,
child:
GestureDetector(
onTap: () {
callback(TodoList.remove(TodoList[index]));
},
child:
Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(30)
),
child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
),
)
)
])
);
}
}
class AddButton extends StatelessWidget {
List TodoList = [];
Function callback;
AddButton({required this.TodoList, required this.callback});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
callback(TodoList.add('toDo: '+ (TodoList.length + 1).toString()));
},
child: Container(
height: 80,
width: 80,
margin: EdgeInsets.all(30),
child: Icon(Icons.add,size: 50),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15,
spreadRadius: 1
),
]
),
),
);
}
}
解决方案
我会更好地将 dataType 包含在列表中。检查代码片段,你会明白的。
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
List<String> todoList = [];
callback(varTodoList) {
setState(() {
todoList = varTodoList;
});
print(varTodoList.length);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: todoList.length,
itemBuilder: (context, index) {
return TodoTasks(
todoList: todoList,
index: index,
callback: (v) {
print(v.toString());
callback(v);
},
);
},
),
),
Expanded(
flex: 1,
child: AddButton(
todoList: todoList,
callback: (v) {
callback(v);
print("OnAdd BTN: ${v.toString()}");
}),
),
],
),
),
);
}
}
class TodoTasks extends StatelessWidget {
final List todoList;
final int index;
final Function callback;
const TodoTasks({
Key? key,
required this.todoList,
required this.index,
required this.callback,
});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 300,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
]),
child: Row(children: [
Expanded(
flex: 11,
child: Center(
child: Text(todoList[index], style: TextStyle(fontSize: 30))),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
callback(
todoList
..remove(
todoList[index],
),
);
},
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(30)),
child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
),
))
]));
}
}
class AddButton extends StatelessWidget {
final List<String> todoList;
final Function(List<String>) callback;
AddButton({
Key? key,
required this.todoList,
required this.callback,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("ONPressed : ${todoList.length}");
callback(
// passing new list with including one
todoList
..add(
'toDo: ' + (todoList.length + 1).toString(),
),
);
},
child: Container(
height: 80,
width: 80,
margin: EdgeInsets.all(30),
child: Icon(Icons.add, size: 50),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15,
spreadRadius: 1),
]),
),
);
}
}
推荐阅读
- python - 如何将格式错误的 excel 文件放入 pandas 数据帧
- r - 使用 purrr 设置新创建的嵌套列表的名称
- c++ - 在 C++ 中按地址传递向量
- sql - 如何从 SQL Server 中由二进制文字组成的字符串变量设置二进制值?
- java - 检测Android中特定变量中的值何时发生变化
- python - Doc2Vec:从 ConcatenatedDocvecs 推断出最相似的向量
- ruby-on-rails - 连接表中的 Factory Bot HABTM nil 值
- html - 如何以渐变样式为我的列表制作带有自定义项目符号的边框?
- python - 返回每组具有最高值的列表
- android - 我可以将 material-components-android 与 React-Native 一起使用吗?