从flutter中的另一个类的有状态小部件获取整数值

Question

学习扑动和我正在建立一个计数器，我想用一个车。我有一个问题检索我创建的计数器状态小部件的整数值，我想一个文本更新自己与计数器的值。

这是计数器的代码

import 'package:flutter/material.dart';
class TheCounter extends StatefulWidget {
int counter = 0;
int get counterValue => counter;
@override
_TheCounterState createState() => _TheCounterState();
}
class _TheCounterState extends State<TheCounter> {
void increaseCounter() {
setState(() {
if (widget.counter >= 0) {
widget.counter++;
}
});
}
void decreaseCounter() {
setState(() {
if (widget.counter > 0) {
widget.counter--;
}
});
}
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(icon: Icon(Icons.add), onPressed: increaseCounter),
Text('${widget.counter}'),
IconButton(icon: Icon(Icons.remove), onPressed: decreaseCounter)
],
);
}
}

这是主要的。飞镖文件

import 'package:counter/counter.dart';
import 'package:flutter/material.dart';
void main() {
runApp(Count());
}
class Count extends StatelessWidget {
@override
Widget build(BuildContext context) {
int counting = TheCounter().counterValue;
return MaterialApp(
title: 'Counter',
home: Scaffold(
appBar: AppBar(
title: Text('Counter Test'),
),
body: Column(
children: [
TheCounter(),
Text('$counting'),
TheCounter(),
TheCounter(),
],
),
),
);
}
}

我希望文本更新自己与计数器的值每当添加或删除按钮被点击。我该怎么做才能达到这个目标?

Answer 1

首先，我们需要决定在哪里进行更新。在本例中，需要更新Count小部件文本。因此，需要将其转换为StatefulWidget。

下一件事是我们如何从TheCounter小部件检索计数器。你可以使用回调方法，或者状态管理包，比如provider, riverpod, bloc等。你可以查看文档

这里我使用一个函数，当TheCounter小部件上的计数值发生变化时，该函数将获得Count上的更新值。

void main() {
runApp(MaterialApp(title: 'Counter', home: Count()));
}
class Count extends StatefulWidget {
const Count({Key? key}) : super(key: key);
@override
State<Count> createState() => _CountState();
}
class _CountState extends State<Count> {
int initNumberOfCounter = 4;
late List<int> countersValue = List.generate(initNumberOfCounter, (index) => 0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter Test'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
countersValue.add(0);
});
},
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: countersValue.length,
itemBuilder: (context, index) {
return Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TheCounter(
initCountValue: countersValue[index],
countValueCallback: (v) {
setState(() {
countersValue[index] = v;
});
},
),
const SizedBox(
width: 40,
),
Text("${countersValue[index]}"),
],
);
},
),
)
],
),
);
}
}
class TheCounter extends StatefulWidget {
final Function(int) countValueCallback;
final int initCountValue;
const TheCounter({
Key? key,
required this.countValueCallback,
this.initCountValue = 0,
}) : super(key: key);
@override
_TheCounterState createState() => _TheCounterState();
}
class _TheCounterState extends State<TheCounter> {
///this use within the current state
late int counter;
@override
void initState() {
super.initState();
///set counter value for the 1st time
counter = widget.initCountValue;
}
void increaseCounter() {
setState(() {
if (counter >= 0) {
counter++;
}
});
/// back to parent widget
widget.countValueCallback(counter);
}
void decreaseCounter() {
setState(() {
if (counter > 0) {
counter--;
}
});
widget.countValueCallback(counter);
}
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(icon: Icon(Icons.add), onPressed: increaseCounter),
Text('${counter}'),
IconButton(icon: Icon(Icons.remove), onPressed: decreaseCounter)
],
);
}
}