Flutter视图绑定插件view_bind_adapter的使用

Flutter视图绑定插件view_bind_adapter的使用

获取开始

本项目是一个新的Flutter项目，旨在演示如何使用view_bind_adapter插件来简化视图绑定。

示例代码

以下是一个简单的示例，展示了如何使用view_bind_adapter插件。该插件允许你在构建视图时更加灵活地处理数据源，并且可以动态添加或移除视图绑定器。

import 'package:example/bind/a_view_binder.dart';
import 'package:example/bind/b_view_binder.dart';
import 'package:example/bind/c_view_binder.dart';
import 'package:flutter/material.dart';
import 'package:view_bind_adapter/view_bind_adapter.dart';

import 'model/models.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试使用"flutter run"运行你的应用。你会看到应用有一个蓝色工具栏。然后，在不退出应用的情况下，尝试将primarySwatch更改为Colors.green并触发"热重载"（在你运行"flutter run"的控制台中按"r"键，或者直接保存更改以触发"热重载"）。请注意，计数器不会重置回零；应用不会重新启动。
        primarySwatch: Colors.blue,
        // 这使视觉密度适应你运行应用的平台。对于桌面平台，控件会比移动平台上的更小、更紧凑（更密集）。
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  // 这个小部件是你的应用的主页。它是有状态的，这意味着它有一个包含影响其外观字段的状态对象（定义在下面）。
  // 这个类是状态的配置。它保留了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题）并用于State的build方法。Widget子类中的字段总是标记为"final"。

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  late ViewBindAdapter _bindAdapter;

  [@override](/user/override)
  void initState() {
    _bindAdapter = ViewBindAdapter();
    _bindAdapter.register(AViewBinder());
    _bindAdapter.register(BViewBinder());
    _bindAdapter.register(CViewBinder());

    super.initState();
  }

  void _incrementCounter() {
    _counter++;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState都会被重新运行，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架已经被优化为快速重新运行build方法，因此你可以重建任何需要更新的东西，而不是逐个改变小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemBuilder: (ctx, index) => _bindAdapter.bind(ctx, index),
        itemCount: _bindAdapter.dataSource.length,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _incrementCounter();
          if (_counter % 2 == 0) {
            _bindAdapter.add(AModel());
          } else if (_counter % 3 == 0) {
            _bindAdapter.add(BModel());
          } else {
            _bindAdapter.add(CModel());
          }
          setState(() {});
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化更好看。
    );
  }
}

解释

1. 导入必要的包:

   import 'package:example/bind/a_view_binder.dart';
   import 'package:example/bind/b_view_binder.dart';
   import 'package:example/bind/c_view_binder.dart';
   import 'package:flutter/material.dart';
   import 'package:view_bind_adapter/view_bind_adapter.dart';
   

2. 初始化视图绑定适配器:

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
     
     late ViewBindAdapter _bindAdapter;
     
     [@override](/user/override)
     void initState() {
       _bindAdapter = ViewBindAdapter();
       _bindAdapter.register(AViewBinder());
       _bindAdapter.register(BViewBinder());
       _bindAdapter.register(CViewBinder());
       
       super.initState();
     }
   

   在initState方法中，我们初始化_bindAdapter并注册不同的视图绑定器。

3. 使用视图绑定适配器构建列表项:

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: ListView.builder(
         itemBuilder: (ctx, index) => _bindAdapter.bind(ctx, index),
         itemCount: _bindAdapter.dataSource.length,
       ),
   

   在ListView.builder中，我们使用_bindAdapter.bind方法来动态生成列表项。

4. 添加新数据项:

   floatingActionButton: FloatingActionButton(
     onPressed: () {
       _incrementCounter();
       if (_counter % 2 == 0) {
         _bindAdapter.add(AModel());
       } else if (_counter % 3 == 0) {
         _bindAdapter.add(BModel());
       } else {
         _bindAdapter.add(CModel());
       }
       setState(() {});
     },