Bre*_*eds 8 provider widget dart flutter
我正在使用Provider Package来管理我的 Flutter 应用程序中的状态。当我开始嵌套对象时遇到了问题。
一个非常简单的例子：父 A 有 B 类型的孩子，有 C 类型的孩子，有 D 类型的孩子。在孩子 D 中，我想管理一个颜色属性。下面的代码示例：
import 'package:flutter/material.dart';
class A with ChangeNotifier
{
A() {_b = B();}
B _b;
B get b => _b;
set b(B value)
{
_b = value;
notifyListeners();
}
}
class B with ChangeNotifier
{
B() {_c = C();}
C _c;
C get c => _c;
set c(C value)
{
_c = value;
notifyListeners();
}
}
class C with ChangeNotifier
{
C() {_d = D();}
D _d;
D get d => _d;
set d(D value)
{
_d = value;
notifyListeners();
}
}
class D with ChangeNotifier
{
int _ColorIndex = 0;
final List<Color> _ColorList = [
Colors.black,
Colors.blue,
Colors.green,
Colors.purpleAccent
];
D()
{
_color = Colors.red;
}
void ChangeColor()
{
if(_ColorIndex < _ColorList.length - 1)
{
_ColorIndex++;
}
else
{
_ColorIndex = 0;
}
color = _ColorList[_ColorIndex];
}
Color _color;
Color get color => _color;
set color(Color value)
{
_color = value;
notifyListeners();
}
}
现在我的main.dart（管理我的Placeholder()小部件）包含以下内容：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_example/NestedObjects.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
home: ChangeNotifierProvider<A>(
builder: (context) => A(),
child: MyHomePage()
),
);
}
}
class MyHomePage extends StatefulWidget
{
@override
State createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>
{
@override
Widget build(BuildContext context)
{
A a = Provider.of<A>(context);
B b = a.b;
C c = b.c;
D d = c.d;
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Text(
'Current selected Color',
),
Placeholder(color: d.color,),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => ButtonPressed(context),
tooltip: 'Increment',
child: Icon(Icons.arrow_forward),
),
);
}
void ButtonPressed(BuildContext aContext)
{
A a = Provider.of<A>(context);
B b = a.b;
C c = b.c;
D d = c.d;
d.ChangeColor();
}
}
由上述可知，该占位符窗口小部件的颜色属性被限定d类的颜色属性“ (A -> B -> C -> D.color)。上面的代码非常简化，但它确实显示了我遇到的问题。
回到正题：我如何将子 D的颜色属性分配给小部件，以便在更新子 D的属性时，它也会自动更新小部件（使用notifyListeners()，而不是setState()）。
我使用了Stateless、Stateful、Provider.of和Consumer，所有这些都给了我相同的结果。重申一下，对象不能解耦，它必须有父子关系。
编辑
更复杂的例子：
import 'dart:ui';
enum Manufacturer
{
Airbus, Boeing, Embraer;
}
class Fleet
{
List<Aircraft> Aircrafts;
}
class Aircraft
{
Manufacturer AircraftManufacturer;
double EmptyWeight;
double Length;
List<Seat> Seats;
Map<int,CrewMember> CrewMembers;
}
class CrewMember
{
String Name;
String Surname;
}
class Seat
{
int Row;
Color SeatColor;
}
上面的代码是现实世界示例的简化版本。可以想象，兔子洞会越来越深。所以，我所说的A直通D示例的意思是试图简化情况的卷积。
例如，假设您想在小部件中显示和/或更改机组成员的姓名。在该应用本身您通常选择Aircraft从Fleet（通过传递对窗口小部件List的索引），然后选择CrewMember从Aircraft（由传递Map密钥），然后显示/改变Name的CrewMember。
最后，您的小部件将能够通过使用传入的Aircrafts索引和CrewMembers键来查看您所指的船员姓名。
我绝对愿意接受更好的架构和设计。
编辑：对更新问题的回答，原文如下
不清楚A, B,C和D在您的原始问题中代表什么。原来那些是模型。
我目前的想法是，用MultiProvider/包装您的应用程序 ProxyProvider以提供服务，而不是模型。
不确定您如何加载数据（如果有的话），但我假设有一个服务可以异步获取您的车队。如果您的数据由部件/模型通过不同的服务加载（而不是一次全部加载），您可以将它们添加到 ，MultiProvider并在需要加载更多数据时将它们注入适当的小部件中。
下面的示例功能齐全。为了简单起见，并且由于您以更新name为例询问了更新，因此我只制作了该属性 setter notifyListeners()。
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
main() {
runApp(
MultiProvider(
providers: [Provider.value(value: Service())],
child: MyApp()
)
);
}
class MyApp extends StatelessWidget {
@override
Widget build(context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Consumer<Service>(
builder: (context, service, _) {
return FutureBuilder<Fleet>(
future: service.getFleet(), // might want to memoize this future
builder: (context, snapshot) {
if (snapshot.hasData) {
final member = snapshot.data.aircrafts[0].crewMembers[1];
return ShowCrewWidget(member);
} else {
return CircularProgressIndicator();
}
}
);
}
),
),
),
);
}
}
class ShowCrewWidget extends StatelessWidget {
ShowCrewWidget(this._member);
final CrewMember _member;
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<CrewMember>(
create: (_) => _member,
child: Consumer<CrewMember>(
builder: (_, model, __) {
return GestureDetector(
onDoubleTap: () => model.name = 'Peter',
child: Text(model.name)
);
},
),
);
}
}
enum Manufacturer {
Airbus, Boeing, Embraer
}
class Fleet extends ChangeNotifier {
List<Aircraft> aircrafts = [];
}
class Aircraft extends ChangeNotifier {
Manufacturer aircraftManufacturer;
double emptyWeight;
double length;
List<Seat> seats;
Map<int,CrewMember> crewMembers;
}
class CrewMember extends ChangeNotifier {
CrewMember(this._name);
String _name;
String surname;
String get name => _name;
set name(String value) {
_name = value;
notifyListeners();
}
}
class Seat extends ChangeNotifier {
int row;
Color seatColor;
}
class Service {
Future<Fleet> getFleet() {
final c1 = CrewMember('Mary');
final c2 = CrewMember('John');
final a1 = Aircraft()..crewMembers = { 0: c1, 1: c2 };
final f1 = Fleet()..aircrafts.add(a1);
return Future.delayed(Duration(seconds: 2), () => f1);
}
}
运行应用程序，等待 2 秒钟以加载数据，您应该会在该地图中看到“John”，它是 id=1 的机组成员。然后双击文本，它应该更新为“彼得”。
正如您所注意到的，我使用的是服务的顶级注册 ( Provider.value(value: Service())) 和模型的本地级注册 ( ChangeNotifierProvider<CrewMember>(create: ...))。
我认为这种架构（具有合理数量的模型）应该是可行的。
关于本地级别的提供程序，我觉得它有点冗长，但可能有办法让它更短。此外，为带有 setter 的模型提供一些代码生成库来通知更改会很棒。
（你有 C# 背景吗？我修复了你的类以符合 Dart 语法。）
让我知道这是否适合您。
如果要使用 Provider，则必须使用 Provider 构建依赖关系图。
（您可以选择构造函数注入，而不是 setter 注入）
这有效：
main() {
runApp(MultiProvider(
providers: [
ChangeNotifierProvider<D>(create: (_) => D()),
ChangeNotifierProxyProvider<D, C>(
create: (_) => C(),
update: (_, d, c) => c..d=d
),
ChangeNotifierProxyProvider<C, B>(
create: (_) => B(),
update: (_, c, b) => b..c=c
),
ChangeNotifierProxyProvider<B, A>(
create: (_) => A(),
update: (_, b, a) => a..b=b
),
],
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(context) {
return MaterialApp(
title: 'My Flutter App',
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Current selected Color',
),
Consumer<D>(
builder: (context, d, _) => Placeholder(color: d.color)
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => Provider.of<D>(context, listen: false).color = Colors.black,
tooltip: 'Increment',
child: Icon(Icons.arrow_forward),
),
),
);
}
}
此应用可根据您A，B，C和D类。
您的示例不使用代理，因为它只使用D没有依赖项的代理。但是您可以看到 Provider 已通过此示例正确连接了依赖项：
Consumer<A>(
builder: (context, a, _) => Text(a.b.c.d.runtimeType.toString())
),
它将打印出“D”。
ChangeColor()没有工作，因为它没有调用notifyListeners()。
无需在此之上使用有状态小部件。
正如我之前所表达的，您的设置似乎过于复杂。模型类的每个实例都是一个ChangeNotifier，因此负责维护自身。这是一个架构问题，将导致后续的扩展和维护问题。
几乎所有现有的软件架构都有一些共同点——将状态与控制器分开。数据应该只是数据。它不需要关心程序其余部分的操作。同时，控制器（块、视图模型、管理器、服务或任何你想调用它的东西）为程序的其余部分提供接口来访问或修改数据。通过这种方式，我们保持了关注点分离并减少了服务之间交互点的数量，从而大大减少了依赖关系（这对保持程序的简单性和可维护性大有帮助）。
在这种情况下，一个很好的选择可能是不可变状态方法。在这种方法中，模型类就是这样 - 不可变的。如果您想更改模型中的某些内容，而不是更新字段，您可以换出整个模型类实例。这可能看起来很浪费，但它实际上通过设计在您的状态管理中创建了几个属性：
这是一个示例，说明您的模型类可能如何由不可变状态管理表示：
main() {
runApp(
ChangeNotifierProvider(
create: FleetManager(),
child: MyApp(),
),
);
}
...
class FleetManager extends ChangeNotifier {
final _fleet = <String, Aircraft>{};
Map<String, Aircraft> get fleet => Map.unmodifiable(_fleet);
void updateAircraft(String id, Aircraft aircraft) {
_fleet[id] = aircraft;
notifyListeners();
}
void removeAircraft(String id) {
_fleet.remove(id);
notifyListeners();
}
}
class Aircraft {
Aircraft({
this.aircraftManufacturer,
this.emptyWeight,
this.length,
this.seats = const {},
this.crewMembers = const {},
});
final String aircraftManufacturer;
final double emptyWeight;
final double length;
final Map<int, Seat> seats;
final Map<int, CrewMember> crewMembers;
Aircraft copyWith({
String aircraftManufacturer,
double emptyWeight,
double length,
Map<int, Seat> seats,
Map<int, CrewMember> crewMembers,
}) => Aircraft(
aircraftManufacturer: aircraftManufacturer ?? this.aircraftManufacturer,
emptyWeight: emptyWeight ?? this.emptyWeight,
length: length ?? this.length,
seats: seats ?? this.seats,
crewMembers: crewMembers ?? this.crewMembers,
);
Aircraft withSeat(int id, Seat seat) {
return Aircraft.copyWith(seats: {
...this.seats,
id: seat,
});
}
Aircraft withCrewMember(int id, CrewMember crewMember) {
return Aircraft.copyWith(seats: {
...this.crewMembers,
id: crewMember,
});
}
}
class CrewMember {
CrewMember({
this.firstName,
this.lastName,
});
final String firstName;
final String lastName;
CrewMember copyWith({
String firstName,
String lastName,
}) => CrewMember(
firstName: firstName ?? this.firstName,
lastName: lastName ?? this.lastName,
);
}
class Seat {
Seat({
this.row,
this.seatColor,
});
final int row;
final Color seatColor;
Seat copyWith({
String row,
String seatColor,
}) => Seat(
row: row ?? this.row,
seatColor: seatColor ?? this.seatColor,
);
}
每当您想从机队中添加、修改或移除飞机时，您需要查看FleetManager，而不是单个模型。例如，如果我有一名机组人员并且我想更改他们的名字，我会这样做：
final oldCrewMember = oldAircraft.crewMembers[selectedCrewMemberId];
final newCrewMember = oldCrewMember.copyWith(firstName: 'Jane');
final newAircraft = oldAircraft.withCrewMember(selectedCrewMemberId, newCrewMember);
fleetManager.updateAircraft(aircraftId, newAircraft);
当然，它比 简单一些crewMember.firstName = 'Jane';，但请考虑这里的架构优势。通过这种方法，我们不会有一个庞大的相互依赖网络，其中任何地方的更改都可能对其他许多地方产生影响，其中一些可能是无意的。只有一种状态，所以只有一个地方可能会发生变化。任何其他监听这个变化的东西都必须经过FleetManager，所以只需要担心一个接口点 - 一个点故障而不是潜在的几十个。有了所有这些体系结构的安全性和简单性，代码中多一点冗长是值得的。
这是一个简单的例子，虽然肯定有改进它的方法，但无论如何都有一些包可以为我们处理这类事情。为了更健壮地执行不可变状态管理，我建议查看flutter_bloc或redux包。redux 包本质上是 Redux 在 React to Flutter 中的直接移植，所以如果你有 React 经验，你会感到宾至如归。flutter_bloc 包对不可变状态采用了稍微不那么严格的方法，并且还结合了有限状态机模式，这进一步降低了在任何给定时间如何判断应用程序处于什么状态的复杂性。
（还要注意，在这个例子中，我将Manufacturer枚举更改为Airline类中的一个字符串字段。这是因为世界上有太多的航空公司制造商，要跟上他们的步伐将是一件苦差事，任何不是由枚举表示的制造商不能存储在车队模型中。将它作为字符串只是您需要积极维护的一件事情。）
| 归档时间： |
|
| 查看次数： |
7565 次 |
| 最近记录： |