flutter - Dart/Flutter尝试从另一个小部件更改小部件的变量

Question

我有一个Die StatefulWidget，以及_DieState内部的roll函数。

class Die extends StatefulWidget {
  @override
  _DieState createState() => _DieState();
}

class _DieState extends State<Die> {

  Random rand = Random();
  double size;
  bool hold = false;
  int num;

  @override
  Widget build(BuildContext context) {

    void roll() {
      setState(() {
        if (!hold) {
          num = rand.nextInt(6) + 1;
        }
      });
    }

    size = min(MediaQuery.of(context).size.width * 0.15, MediaQuery.of(context).size.height * 0.15);

    return /**boring visual stuff here*/;
  }
}

在我的Home StatefulWidget上，有一个“roll”按钮，上面包裹着一个GestureDetector和5个Die小部件。我不知道要在onTap里面放入什么，以便在每个GestureDetector内调用roll()方法的_DieState。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    List<Die> dice = [Die(),Die(),Die(),Die(),Die()];
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: dice,
          ),
          GestureDetector(
            onTap: () {/**somehow call roll() for each Die*/},
          ),
        ],
      ),
    );
  }
}

任何帮助，将不胜感激。谢谢。

Answer 1

试试这个，用全局键来做

import 'package:flutter/material.dart';
import 'dart:math';

void main(){
  runApp(MaterialApp(home:Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final GlobalKey<DieState> _callRollKey0 = GlobalKey<DieState>();
  final GlobalKey<DieState> _callRollKey1 = GlobalKey<DieState>();
  final GlobalKey<DieState> _callRollKey2 = GlobalKey<DieState>();
  final GlobalKey<DieState> _callRollKey3 = GlobalKey<DieState>();
  final GlobalKey<DieState> _callRollKey4 = GlobalKey<DieState>();
  @override
  Widget build(BuildContext context) {
    List<Die> dice = [Die(key: _callRollKey0,), Die(key: _callRollKey1), Die(key: _callRollKey2), Die(key: _callRollKey3), Die(key: _callRollKey4)];
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: dice,
          ),
          GestureDetector(
            child: Container(
              margin: EdgeInsets.all(20),
              height: 50,
              width: 50,
              color: Colors.red,
              child: Center(child: Text('tap')),
            ),
            onTap: () {
              _callRollKey0.currentState.roll();
              _callRollKey1.currentState.roll();
              _callRollKey2.currentState.roll();
              _callRollKey3.currentState.roll();
              _callRollKey4.currentState.roll();

            },
          ),
        ],
      ),
    );
  }

}

class Die extends StatefulWidget {
  Die({Key key}):super(key:key);
  @override
  DieState createState() => DieState();
}

class DieState extends State<Die> {

  Random rand = Random();
  double size;
  bool hold = false;
  int num= 1;

  void roll() {
    setState(() {
      if (!hold) {
        num = rand.nextInt(6) + 1;
      }
    });
  }
  @override
  Widget build(BuildContext context) {



    size = min(MediaQuery.of(context).size.width * 0.15, MediaQuery.of(context).size.height * 0.15);

    return Container(
      color: Colors.green,
      width: size,
      height: 50,
      child: Center(
        child:Text(
          '$num',
        ),
      ),
    );
  }
}

希望这可以帮助