需要帮助以从自定义小部件中获取各自的价值

Question

我是一个步履蹒跚的菜鸟，我需要这个方面的帮助。因此，我制作了这个计数器小部件，您可以在其中使用按钮增加和减少计数器值，并在我的根小部件中两次调用了该小部件。现在，我想每次调用计数器小部件时分别获取这些计数器小部件的各自计数器值。我该如何实现。

这是我的main.dart文件

class _MyHomePageState extends State<MyHomePage> {
  int count;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            CounterContainer(count, ValueKey(1)),
            Text('first counter : ${CounterContainer(count, ValueKey(1)).count}'),
            CounterContainer(count, ValueKey(2)),
            Text('second counter : ${CounterContainer(count, ValueKey(2)).count}'),
          ],
        ),
      ),
    );
  }
} 

这是我的Counter_widget

class CounterContainer extends StatefulWidget {
  int count;

  CounterContainer(this.count, ValueKey<int> valueKey);

  @override
  _CounterContainerState createState() => _CounterContainerState();
}

class _CounterContainerState extends State<CounterContainer> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      widget.count = ++_counter;

      print('------------>${widget.count}');
    });
  }

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) {
        widget.count = --_counter;
        print('------------>${widget.count}');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        FlatButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
        Text('$_counter'),

        FlatButton(
          onPressed: _decrementCounter,
          child: Icon(Icons.remove),
        ),
      ],
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
您可以定义两个计数器counter1和counter2并传递callback进行刷新

工作演示

代码段

  void _incrementCounter() {
    setState(() {
      ...
    });
    widget.callback();
  }

  void _decrementCounter() {
    setState(() {
     ...
    });
    widget.callback();
  }
  ...
  CounterContainer counter1;
  CounterContainer counter2;

  void refresh() {
    print("refresh");
    setState(() {});
  }

  @override
  void initState() {
    counter1 = CounterContainer(count, ValueKey(1), refresh);
    counter2 = CounterContainer(count, ValueKey(2), refresh);
    super.initState();
  }
  ...
  children: <Widget>[
            counter1,
            Text('first counter : ${counter1.count}'),
            counter2,
            Text('second counter : ${counter2.count}'),
          ],

完整代码

import 'package:flutter/material.dart';

class CounterContainer extends StatefulWidget {
  int count;
  VoidCallback callback;

  CounterContainer(this.count, ValueKey<int> valueKey, this.callback);

  @override
  _CounterContainerState createState() => _CounterContainerState();
}

class _CounterContainerState extends State<CounterContainer> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      widget.count = ++_counter;

      print('------------>${widget.count}');
    });
    widget.callback();
  }

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) {
        widget.count = --_counter;
        print('------------>${widget.count}');
      }
    });
    widget.callback();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        FlatButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
        Text('$_counter'),
        FlatButton(
          onPressed: _decrementCounter,
          child: Icon(Icons.remove),
        ),
      ],
    );
  }
}

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

class MyApp extends StatelessWidget {
  @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> {
  int count;
  CounterContainer counter1;
  CounterContainer counter2;

  void refresh() {
    print("refresh");
    setState(() {});
  }

  @override
  void initState() {
    counter1 = CounterContainer(count, ValueKey(1), refresh);
    counter2 = CounterContainer(count, ValueKey(2), refresh);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('${counter1.count}');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            counter1,
            Text('first counter : ${counter1.count}'),
            counter2,
            Text('second counter : ${counter2.count}'),
          ],
        ),
      ),
    );
  }
}