当前,我正在尝试学习块模式的工作原理,但是我有一些问题。我正在尝试在flutter计数器应用程序上使用BLOC模式,这是flutter项目的默认应用程序。这是我的主要(布局)代码:
import 'package:flutter/material.dart';
import 'package:suaybtest/my-home-page-state.dart';
import 'my-home-page-bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final MyHomePageBloc _bloc = MyHomePageBloc();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: BlocBuilder<MyHomePageEvent, MyHomePageState>(
bloc: _bloc,
builder: (context, MyHomePageState state) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${state.counter}',
style: Theme.of(context).textTheme.display1,
),
],
),
);
}),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: () {
_bloc.dispatch(MyHomePageEvent.increment);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
FloatingActionButton(
onPressed: () {
_bloc.dispatch(MyHomePageEvent.decrement);
},
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
));
}
@override
void dispose() {
super.dispose();
}
}
集团页面是这个:
import 'package:bloc/bloc.dart';
import 'package:suaybtest/my-home-page-state.dart';
enum MyHomePageEvent {
increment,
decrement,
}
class MyHomePageBloc extends Bloc<MyHomePageEvent, MyHomePageState> {
@override
MyHomePageState get initialState => MyHomePageState.initial();
@override
Stream<MyHomePageState> mapEventToState(MyHomePageEvent event) async* {
MyHomePageState state = currentState;
switch (event) {
case MyHomePageEvent.increment:
state.counter++;
yield state;
break;
case MyHomePageEvent.decrement:
state.counter--;
yield state;
break;
}
}
}
最后这是我的状态
class MyHomePageState {
int counter;
MyHomePageState._();
factory MyHomePageState.initial(){
return MyHomePageState._()..counter = 0;
}
}
我知道不需要使用这样的状态类,因为我只有一个变量。但是,这是实际应用程序中最接近的示例。
这里的问题是,当我单击按钮时它会反作用,您可以在调试模式下显示它,但不会重新加载blocbuilder的构建功能。
我使用这个图书馆
dependencies:
flutter_bloc: ^0.11.1