Appelez un setState d'un widget statefull à partir du widget sans état

2020-06-29 flutter widget setstate joystick statefulwidget

J'ai une classe de widget sans état qui a un widget dont les mouvements doivent être suivis. Je ne peux pas conserver ce widget dans les widgets avec état car je ne veux pas que l'état de ce widget soit actualisé.

J'ai le code suivant.

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    home: new MyHomePage(),
   );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Expanded(
            child: JoystickView(
              onDirectionChanged: (degree, direction) {
                //Change the state here.
              },
            ),
          ),
          Expanded(
            child: MyStateFull(),
          ),
        ],
      ),
    );
  }
}

class MyStateFull extends StatefulWidget {
  @override
  _MyStateFullState createState() => _MyStateFullState();
}

class _MyStateFullState extends State<MyStateFull> {
  double degree = 10;
  double direction = 10;

  //Call this from the stateless Widget
  void changedDirection(degree, direction) {
    setState(() {
      this.degree = degree;
      this.direction = direction;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        "The degree Moved is $degree and the direction is $direction",
        style: TextStyle(fontSize: 25, color: Colors.black),
      ),
    );
  }
}

Ce code produit la sortie suivante. entrez la description de l'image ici

Je souhaite que les valeurs de direction et de degré soient modifiées lors du déplacement du joystick.

Merci.

Answers

Je l'ai essayé moi-même et j'ai trouvé la solution. Cela peut être fait en utilisant des flux. Je publierai le code au cas où quelqu'un en aurait besoin à l'avenir.

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

class MyStateLess extends StatelessWidget {
  StreamController<List<double>> _controller = StreamController<List<double>>();

  GlobalKey<_MyStateFullState> statefulKey = new GlobalKey<_MyStateFullState>();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        JoystickView(
          onDirectionChanged: (degree, direction) {
            List<double> temp = new List<double>();
            temp.add(degree);
            temp.add(direction);
            _controller.add(temp);
          },
        ),
        MyStateFull(stream: _controller.stream, key: statefulKey),
      ],
    );
  }
}

class MyStateFull extends StatefulWidget {
  final Stream<List<double>> stream;
  MyStateFull({Key key, @required this.stream}) : super(key: key);

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

class _MyStateFullState extends State<MyStateFull> {
  double _degree = 0.0;
  double _direction = 0.0;

  @override
  void initState() {
    super.initState();
    widget.stream.listen((event) {
      setState(() {
        _degree = event[0];
        _direction = event[1];
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("$_degree, $_direction"),
    );
  }
}

Related