Mobile 在小部件之间传递数据?
我有两个有状态的小部件,第一个名为MyApp,它在ListView构建器中显示员工列表。第二个有状态小部件名为ActionButton,它也是一个有状态小部件 ActionButton小部件返回一个警报对话框。在警报对话框中,我可以通过输入员工姓名和工资来添加新员工 问题是,为了显示新添加的员工,我必须热加载应用程序。是否有方法通知MyApp小部件已添加新员工,然后在ListView生成器中显示新添加的员工 下面是MyApp小部件的代码:Mobile 在小部件之间传递数据?,mobile,dart,flutter,Mobile,Dart,Flutter,我有两个有状态的小部件,第一个名为MyApp,它在ListView构建器中显示员工列表。第二个有状态小部件名为ActionButton,它也是一个有状态小部件 ActionButton小部件返回一个警报对话框。在警报对话框中,我可以通过输入员工姓名和工资来添加新员工 问题是,为了显示新添加的员工,我必须热加载应用程序。是否有方法通知MyApp小部件已添加新员工,然后在ListView生成器中显示新添加的员工 下面是MyApp小部件的代码: import 'pa
import 'package:flutter/material.dart';
import './database_helper.dart';
import './floating_action_button.dart';
void main() async {
DatabaseHelper databaseHelper = new DatabaseHelper();
List employees = [];
employees = await databaseHelper.getAllEmployees();
runApp(MyApp(employees));
}
class MyApp extends StatefulWidget {
final List employees;
MyApp(this.employees);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List employees = [];
@override
void initState() {
super.initState();
employees = widget.employees;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Employees"),
),
body: Container(
child: ListView.builder(
itemCount: employees.length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: ListTile(
title: Text(employees[index]["empName"]),
subtitle: Text(
employees[index]["empSalary"].toString()),
trailing: RaisedButton(
onPressed: () {
removeEmployee(
employees[index]["id"], index);
},
child: Icon(
Icons.remove,
color: Colors.white,
),
shape: CircleBorder(),
color: Theme.of(context).primaryColor,
),
),
);
},
),
),
floatingActionButton: ActionButton(),
),
);
}
Future<int> removeEmployee(int id, int index) async {
DatabaseHelper databaseHelper = new DatabaseHelper();
var result = await databaseHelper.deleteEmployee(id);
if (result == 1) {
setState(() {
employees.removeAt(index);
});
}
return result;
}
}
导入“包装:颤振/材料.省道”;
导入“./database_helper.dart”;
导入“./floating_action_button.dart”;
void main()异步{
DatabaseHelper DatabaseHelper=新的DatabaseHelper();
列出员工=[];
employees=await databaseHelper.getAllEmployees();
runApp(MyApp(员工));
}
类MyApp扩展了StatefulWidget{
最终员工名单;
MyApp(此为员工);
@凌驾
_MyAppState createState()=>\u MyAppState();
}
类MyAppState扩展了状态{
列出员工=[];
@凌驾
void initState(){
super.initState();
employees=widget.employees;
}
@凌驾
小部件构建(构建上下文){
返回材料PP(
家:脚手架(
appBar:appBar(
标题:文本(“员工”),
),
主体:容器(
子项:ListView.builder(
itemCount:employees.length,
itemBuilder:(构建上下文,int索引){
归还新卡(
孩子:ListTile(
标题:文本(员工[索引][“empName”]),
字幕:文本(
员工[索引][“empSalary”].toString()),
拖尾:升起按钮(
已按下:(){
解雇员工(
员工[索引][“id”],索引);
},
子:图标(
图标。删除,
颜色:颜色,白色,
),
形状:CircleBorder(),
颜色:主题。背景。原色,
),
),
);
},
),
),
floatingActionButton:ActionButton(),
),
);
}
未来removeEmployee(int-id,int-index)异步{
DatabaseHelper DatabaseHelper=新的DatabaseHelper();
var result=等待databaseHelper.deleteEmployee(id);
如果(结果==1){
设置状态(){
员工移除(索引);
});
}
返回结果;
}
}
最后但并非最不重要的是,ActionButton代码:
import 'package:employees/database_helper.dart';
import 'package:employees/employee.dart';
import 'package:flutter/material.dart';
class ActionButton extends StatefulWidget {
@override
_ActionButtonState createState() => _ActionButtonState();
}
class _ActionButtonState extends State<ActionButton> {
var _employeeNameController = new TextEditingController();
var _employeeSalaryController = new TextEditingController();
@override
Widget build(BuildContext context) {
return FloatingActionButton(
child: Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("Add New Employees"),
content: Column(
children: <Widget>[
TextField(
controller: _employeeNameController,
),
TextField(
controller: _employeeSalaryController,
),
],
),
actions: <Widget>[
RaisedButton(
onPressed: () {
setState(
() {
addNewEmployee();
},
);
},
child: Text("Add Employee"),
),
],
);
},
);
},
);
}
void addNewEmployee() async {
DatabaseHelper databaseHelper = new DatabaseHelper();
Employee employee = new Employee(
_employeeNameController.text,
int.parse(_employeeSalaryController.text));
await databaseHelper.insertEmployee(employee);
}
}
import'包:employees/database_helper.dart';
导入“包:employee/employee.dart”;
进口“包装:颤振/材料.省道”;
类ActionButton扩展StatefulWidget{
@凌驾
_ActionButtonState createState()=>\u ActionButtonState();
}
类_ActionButtonState扩展状态{
var_employeeNameController=新文本编辑控制器();
var_employeeSalaryController=新文本编辑控制器();
@凌驾
小部件构建(构建上下文){
返回浮动操作按钮(
子:图标(
Icons.add,
颜色:颜色,白色,
),
已按下:(){
显示对话框(
上下文:上下文,
建筑商:(){
返回警报对话框(
标题:文本(“添加新员工”),
内容:专栏(
儿童:[
文本字段(
控制器:_employeeNameController,
),
文本字段(
控制员:_employeeSalaryController,
),
],
),
行动:[
升起的按钮(
已按下:(){
设定状态(
() {
addNewEmployee();
},
);
},
子项:文本(“添加员工”),
),
],
);
},
);
},
);
}
void addNewEmployee()异步{
DatabaseHelper DatabaseHelper=新的DatabaseHelper();
雇员=新雇员(
_employeeNameController.text,
int.parse(_employeeSalaryController.text));
等待databaseHelper.insertEmployee(员工);
}
}
谢谢你的帮助。
致以最诚挚的问候看看这个
目前有三种管理状态的方法:SetState()、InheritedWidget和BLoC
根据我的经验,如果你想要的是一个重新绘制的小部件,BLoC是最好的。这是最简单的方法
定义集团和提供者:
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:rxdart/rxdart.dart';
class EmployeeProvider extends InheritedWidget {
final employeeBloc=EmployeeBloc();
EmployeeProvider({Key key, @required Widget child,})
: assert(child != null),
super(key: key, child: child);
static EmployeeBloc of(BuildContext context) {
return (context.inheritFromWidgetOfExactType(EmployeeProvider) as EmployeeProvider).employeeBloc;
}
@override
bool updateShouldNotify(EmployeeProvider old)=>true;
}
class EmployeeBloc{
//This is the output interface of Bloc
ValueObservable<List<Employee>> get list => _list.stream;//seedValue: '/'
final _list = BehaviorSubject<List<Employee>>();//seedValue: '/'
// This is the input interface of Bloc
Sink<List<Employee>> get listChange => _listChangeController.sink;
final _listChangeController = StreamController<List<Employee>>();
EmployeeBloc(){
_listChangeController.stream.listen(_handleListChange);
}
// This is the logic handling input
void _handleListChange(List<Employee> newList){
_list.add(newList);
}
}
EmployeeProvider.of(context).listChange.add(NewEmployeeList);