flutter - 使用flutter bloc的flutter_bloc库递增递减按钮
问题描述
我对flutter_bloc库还很陌生,我正在尝试制作增量减量按钮的组件,但是当我尝试复制该组件时,我遇到了问题,当我按下第二个增量按钮组件时,第一个组件也像这个结果一样更新了. 我希望他们有分离的结果。我该如何解决?
这是我的集团代码:
import 'package:bloc/bloc.dart';
abstract class QtyEvent{}
class Increment extends QtyEvent {}
class Decrement extends QtyEvent {}
class QtyBloc extends Bloc<QtyEvent, int> {
QtyBloc() : super(0) {
on<Increment>((event, emit) =>
emit(state+1));
on<Decrement>((event, emit) =>
emit(state-1));
}
}
这是我的组件代码:
class _QtyState extends State<Qty> {
int _n = 0;
@override
void add() {
setState(() {
_n++;
});
context.read<QtyBloc>().add(Increment());
}
void minus() {
setState(() {
if (_n != 0) _n--;
});
context.read<QtyBloc>().add(Decrement());
}
QtyBloc qtybloc = QtyBloc();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),),
body: Column(
children: [
Row(
children: [
GestureDetector(
onTap: minus,
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: Icon(Icons.remove),
),
),
Text(
context.watch<QtyBloc>().state.toString(),
style: TextStyle(fontSize: 20),
),
GestureDetector(
onTap: add,
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: Icon(Icons.add),
),
),
],
),
],
),
);
}
}
解决方案
你的代码完全按照它的设计目的做。
如果我理解正确,您想使用同一个 Bloc 来拥有两组&increment
按钮decrement
吗?
由于您是emitting
单身state
,当您在一个地方更新它时,它会在所有地方更新!
此外,您不需要调用setState
,因为它会重新呈现 UI,这可以通过 bloc it self 来实现。
而且,在您提到的标题中您使用flutter_bloc
但在您的代码中,您正在使用bloc
.
以下是如何实现它flutter_bloc
,
logic.dart
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterEvent {
const CounterEvent();
}
class Increment extends CounterEvent {
final int value1, value2;
const Increment({this.value1 = 1, this.value2 = 1});
}
class Decrement extends CounterEvent {
final int value1, value2;
const Decrement({this.value1 = 1, this.value2 = 1});
}
class Reset extends CounterEvent {
final int value;
const Reset({this.value = 0});
}
class CounterState {
final int s1, s2; // Just maintain 2 values!
const CounterState({required this.s1, required this.s2});
}
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc(CounterState initialState) : super(initialState);
@override
Stream<CounterState> mapEventToState(CounterEvent event) async* {
if (event is Increment) {
yield CounterState(
s1: state.s1 + event.value1, s2: state.s2 + event.value2);
} else if (event is Decrement) {
yield CounterState(
s1: state.s1 - event.value1, s2: state.s2 - event.value2);
} else if (event is Reset) {
yield CounterState(s1: event.value, s2: event.value);
}
}
}
component_page.dart
class Component extends StatelessWidget {
const Component({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter'),
),
body: BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Column(
children: [
Row(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<CounterBloc>(context)
.add(const Decrement(value1: 1, value2: 0));
},
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: const Icon(Icons.remove),
),
),
Text(
state.s1.toString(),
style: const TextStyle(fontSize: 20, color: Colors.white),
),
GestureDetector(
onTap: () {
BlocProvider.of<CounterBloc>(context)
.add(const Increment(value1: 1, value2: 0));
},
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: const Icon(Icons.add),
),
),
],
),
Row(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<CounterBloc>(context)
.add(const Decrement(value1: 0, value2: 1));
},
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: const Icon(Icons.remove),
),
),
Text(
state.s2.toString(),
style: const TextStyle(fontSize: 20, color: Colors.white),
),
GestureDetector(
onTap: () {
BlocProvider.of<CounterBloc>(context)
.add(const Increment(value1: 0, value2: 1));
},
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: const Icon(Icons.add),
),
),
],
),
Row(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<CounterBloc>(context)
.add(const Reset(value: 0));
},
child: Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red),
child: const Icon(Icons.refresh),
),
),
],
),
],
);
},
),
);
}
}
笔记
- 这段代码是用空安全编写的
- 请记住
BlocProvider
在您的应用程序周围添加,如下所示:
main.dart
void main() async {
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return BlocProvider<CounterBloc>(
create: (_) => CounterBloc(const CounterState(s1: 0, s2: 0)),
child: const MaterialApp(
debugShowCheckedModeBanner: false,
home: Component(),
),
);
}
}
推荐阅读
- c# - 如何在构造函数中正确实例化静态 HttpClient
- coq - 无法找到变量 x 的实例,即使显式实例化也是如此
- coldfusion - 您能解释一下在coldfusion 中对cfproperty 标签使用inverse="true" 的原因吗?
- jpa - 接口中的 JPA @PrePersist @PreUpdate
- css - PrimeNG Dropdown:覆盖样式以隐藏输入和标签元素
- git - 从 git 同步本地项目文件夹
- compilation - 无法编译 VHDL 包 - Modelsim 错误:(vcom-1576)期待 END
- .net - linux上的IdentityServer4 HTTPS/SSL
- scala - 使用动画计时器绘制图像时,ScalaFX 画布性能不佳
- javascript - TypeError:store.getState 不是函数。(在 'store.getState()' 中,'store.getState' 未定义