Flutter平台绑定插件binding的功能介绍
数据绑定 #
一个用于Flutter的数据绑定状态管理包。该包受.NET INotifyPropertyChanged接口的启发,并应为那些在WPF/Xamarin中使用过.NET应用程序的.NET开发人员所熟悉。
简介 #
最近我在Medium上读了一篇关于Flutter状态管理的文章:Flutter #OneYearChallenge; Scoped Model vs BloC Pattern vs States Rebuilder
这篇文章讨论了各种不同的状态管理技术,并包含了一个挑战,作者使用自己开发的状态管理包States_rebuilder解决了该挑战。
目前,Flutter团队推荐的状态管理解决方案是Provider包。因此,我尝试使用Provider包来解决文章中的挑战。我的尝试及后续未能使用Provider包解决挑战的情况可以在这里查看。
然而,这激发了我对Flutter状态管理的好奇心,所以我决定不使用现有的包,而是从零开始创建一个状态管理解决方案来解决这个挑战。由于我的背景是.NET和C#开发,我试图利用这些技术的经验。
这个包是我为了完成挑战而创建的状态管理框架。挑战的解决方案位于示例文件夹中。
开始使用 #
要使用数据绑定包是一个简单的三步过程:
步骤1 - 创建一个继承自NotifyPropertyChanged的数据模型,并在模型的属性被更改时调用propertyChanged方法。
// CounterModel类继承自NotifyPropertyChanged,并在属性变化时触发事件
class CounterModel extends NotifyPropertyChanged {
  // 定义每个属性的常量名称(可选,但建议这样做)
  static const countPropertyName = 'count';
// 私有属性,并通过getter暴露,确保不能直接修改
int _count = 0;
int get count => _count;
// 方法,用于增加计数
void incrementCount() {
_count++;
// 每次属性改变时,调用propertyChanged方法通知监听者
propertyChanged(propertyName: countPropertyName);
}
}
步骤2 - 在应用程序的根部添加一个BindingProvider小部件。
// 应用程序的根小部件
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Counter Example',
      // 步骤2:在应用的根部添加一个BindingProvider
      // 注意:应用中只能有一个BindingProvider
      home: BindingProvider(
        // 可选:使用BindingSource使模型实例对所有子小部件可用
        // 或者,模型也可以作为小部件的属性,在构造函数中传递给其子组件
        child: BindingSource<CounterModel>(
          instance: CounterModel(),
          child: MyHomePage(),
        ),
      ),
    );
  }
}
步骤3 - 使用Binding小部件将模型实例附加到树中,并告诉它何时应该重建。
// 主页面小部件
class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Counter Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            // 步骤3:使用Binding小部件将模型实例绑定到小部件树,并告知其何时应该重建
            Binding<CounterModel>(
              source: BindingSource.of<CounterModel>(context),
              path: CounterModel.countPropertyName,
              builder: (_, model) => Text(
                '${model.count}',
                style: Theme.of(context).textTheme.display1,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: BindingSource.of<CounterModel>(context).incrementCount,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
现在每次调用CounterModel实例上的incrementCount方法时,都会触发propertyChanged事件。该事件会向上冒泡到全局的BindingProvider,再向下传播到所有注册接收该特定事件的Binding小部件,从而导致它们重建。
更多关于Flutter平台绑定插件binding的功能介绍的实战教程也可以访问 https://www.itying.com/category-92-b0.html
 
        
       
             
             
            


