在 Nylo中，您可以构建使用状态管理的组件。
在本节中，我们将了解 NyState 类，我们还将深入研究一些示例。
我们先来了解一下状态管理
Flutter 中的所有内容都是一个组件，它们只是 UI 的一小部分，您可以将它们组合成一个完整的应用程序。
当您开始构建复杂的页面时，您将需要管理组件的状态。这意味着当某些内容发生变化时，例如数据，您可以更新该组件，而无需重新构建整个页面。
这很重要的原因有很多，但主要原因是性能。如果你有一个不断变化的小部件，你不希望每次都改变时重建整个页面。
这就是状态管理的用武之地，它允许您管理应用程序中小部件的状态。
何时使用状态管理
当您有一个需要更新的组件而不重新构建整个页面时，您应该使用状态管理。
例如，假设您创建了一个电子商务应用程序。您已经构建了一个组件来显示用户购物车中的商品总数。我们称这个组件为 Cart() 。
Nylo 中的状态管理 Cart 组件如下所示。
/// Cart组件
class Cart extends StatefulWidget {
Cart({Key? key}) : super(key: key);
static String state = "cart";
@override
_CartState createState() => _CartState();
}
/// Cart组件状态类
class _CartState extends NyState<Cart> {
String? _cartValue;
_CartState() {
stateName = Cart.state;
}
@override
boot() async {
_cartValue = await getCartValue();
}
@override
void stateUpdated(data) {
reboot(); // Reboot the widget
}
@override
Widget build(BuildContext context) {
return afterLoad(child: () => Badge(
child: Icon(Icons.shopping_cart),
label: Text(_cartValue ?? "1"),
));
}
}
/// 获取cart值
Future<String?> getCartValue() async {
return (await NyStorage.read<String>(StorageKey.cart));
}
/// 设置cart值
Future setCartValue(int value) async {
await NyStorage.store(StorageKey.cart, value.toString());
updateState(Cart.state);
}
让我们来分析一下。
Cart小部件是一个StatefulWidget._CartState扩展NyState<Cart>.- 您需要为 定义
state一个名称，该名称用于标识状态。 - 首次加载组件时调用
boot()方法。 - 这些
stateUpdate()方法处理更新状态时发生的情况。
如果您想在 Nylo 项目中尝试此示例，请创建一个 Cart 组件.
dart run nylo_framework:main make:stateful_widget cart
然后，您可以复制上面的示例并在您的项目中尝试。
现在，要更新购物车，您可以调用以下命令。
_updateCart() async {
String count = (await getCartValue() ?? "1");
String countIncremented = (int.parse(count) + 1).toString();
await NyStorage.store(StorageKey.cart, countIncremented);
updateState(Cart.state);
}
生命周期
NyState 组件的生命周期如下：
init()- 该方法在初始化状态时调用。stateUpdated(data)- 当状态更新时调用该方法。
如果调用 updateState(MyStateName.state, data: "The Data") ，它将触发 stateUpdated（data） 被调用。
首次初始化状态后，需要实现管理状态的方式。
更新状态
可以通过调用 updateState() 方法来更新状态。
updateState(MyStateName.state);
// 或者使用数据
updateState(MyStateName.state, data: "The Data");
这可以在应用程序中的任何位置调用。
构建您的第一个组件
在 Nylo 项目中，运行以下命令以创建一个新的组件。
dart run nylo_framework:main make:stateful_widget todo_list
这将创建一个名为 TodoList 的新 NyState 组件。
