Flutter bloc 展示列表

Flutter BLoC（Business Logic Component）是一种使用单向数据流来管理状态的设计模式。下面是使用Flutter BLoC展示列表的基本步骤：

1.定义Bloc类：定义一个Bloc类来管理应用程序的状态，并处理业务逻辑。该类应该包含一个StreamController来发布状态更改和一个Stream来监听状态变化。

class ListBloc {
  final _listController = StreamController<List<String>>.broadcast();
  Stream<List<String>> get listStream => _listController.stream;

  List<String> _list = [];

  void addToList(String item) {
    _list.add(item);
    _listController.sink.add(_list);
  }

  void removeFromList(String item) {
    _list.remove(item);
    _listController.sink.add(_list);
  }

  void dispose() {
    _listController.close();
  }
}

2.创建BlocProvider：使用BlocProvider来将Bloc注入到Widget树中，以便在任何地方都可以访问它。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BLoC Demo',
      home: BlocProvider<ListBloc>(
        create: (context) => ListBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

3.使用BlocBuilder来展示列表：BlocBuilder是Flutter BLoC提供的一个Widget，它会监听Bloc的状态变化，并在状态发生变化时自动重构应用程序UI。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listBloc = BlocProvider.of<ListBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BLoC Demo'),
      ),
      body: BlocBuilder<ListBloc, List<String>>(
        builder: (context, list) {
          return ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(list[index]),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    listBloc.removeFromList(list[index]);
                  },
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          listBloc.addToList('New Item');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

这样就可以使用Flutter BLoC展示列表了，当添加或删除列表项时，UI会自动更新。