如何更改状态窗口小部件中的布尔值？

问题描述 投票：0回答：3

我是Flutter的新手。

我正在尝试按下按钮打开一个面板，然后按下该面板上的按钮关闭它。

我已经设法通过在同一页面中编写代码来完成它。

我不能做的是拆分代码并保持一切正常。

我实际上正在做的是在一个小部件的状态中调用一个变量，该小部件初始化为False，然后使用我正在调用的if语句：或者一个空容器或我想要的面板。

当我按下按钮时，我调用SetState（）{}并且变量变为true以让面板出现，然后在面板中出现相反的按钮。

假设我正在做的事情是正确的。如何使用在新页面中重构的面板继续这样做？

关于流和继承的小部件我有点红，但我还没有完全理解

flutter widget state setstate
3个回答
0
投票

如果我理解正确，你想从另一个StatefullWidget通知StatefullWidget。这个有几种方法，但既然你已经提到过Streams，我会尝试发布一个例子并解释一下这种情况。

所以基本上，您可以将流视为一端连接到水龙头的管道，另一端将其添加到杯子中（末端可以分成多个末端并放入多个杯子中，“广播流”）。

现在，杯子是听众（订户）并等待水从管道中掉落。

水龙头是发射器，当水龙头打开时会发出水滴。

当另一端放入杯中时，可以打开水龙头，这是一个带有一些冷传感器的智能水龙头（当“检测到”用户时，发射器将开始发射事件）。

液滴是应用程序中发生的实际事件。

此外，您必须记得关闭水龙头，以避免从您的杯子大量泄漏到厨房地板。 （当您完成处理事件以避免泄漏时，您必须取消订阅者）。

现在，对于您的特定情况，这里的代码片段说明了上述隐喻：

class ThePannel extends StatefulWidget { // this is the cup
  final Stream<bool> closeMeStream; // this is the pipe 

  const ThePannel({Key key, this.closeMeStream}) : super(key: key);

  @override
  _ThePannelState createState() => _ThePannelState(closeMeStream);
}

class _ThePannelState extends State<ThePannel> {
  bool _closeMe = false;
  final Stream<bool> closeMeStream;
  StreamSubscription _streamSubscription;

  _ThePannelState(this.closeMeStream);

  @override
  void initState() {
    super.initState();
    _streamSubscription = closeMeStream.listen((shouldClose) { // here we listen for new events coming down the pipe
      setState(() {
        _closeMe = shouldClose; // we got a new "droplet" 
      });
    });
  }

  @override
  void dispose() {
    _streamSubscription.cancel(); // THIS IS QUITE IMPORTANT, we have to close the faucet 
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        SomeWidgetHere(shouldClose: _closeMe), 
        RaisedButton(
          onPressed: () {
            setState(() {
              _closeMe = true;
            });
          },
        )
      ],
    );
  }
}

class SomeWidgetThatUseThePreviousOne extends StatefulWidget { // this one is the faucet, it will emit droplets 
  @override
  _SomeWidgetThatUseThePreviousOneState createState() =>
      _SomeWidgetThatUseThePreviousOneState();
}

class _SomeWidgetThatUseThePreviousOneState
    extends State<SomeWidgetThatUseThePreviousOne> {
  final StreamController<bool> thisStreamWillEmitEvents = StreamController(); // this is the end of the pipe linked to the faucet

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        ThePannel(closeMeStream: thisStreamWillEmitEvents.stream), // we send the other end of the pipe to the cup
        RaisedButton(
          child: Text("THIS SHOULD CLOSE THE PANNEL"),
          onPressed: () {
            thisStreamWillEmitEvents.add(true); // we will emit one droplet here
          },
        ),
        RaisedButton(
          child: Text("THIS SHOULD OPEN THE PANNEL"),
          onPressed: () {
            thisStreamWillEmitEvents.add(false); // we will emit another droplet here
          },
        )
      ],
    );
  }

  @override
  void dispose() {
     thisStreamWillEmitEvents.close(); // close the faucet from this end.
     super.dispose();
  }
}

我希望我的比喻能帮助你理解一下溪流的概念。

0
投票

如果要打开一个对话框（而不是所谓的“面板”），只需再次关闭对话框即可返回所选数据。你可以在这里找到一个很好的教程：https://medium.com/@nils.backe/flutter-alert-dialogs-9b0bb9b01d28

0
投票

你可以导航并从另一个屏幕返回数据：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Returning Data',
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Returning Data Demo'),
      ),
      body: Center(child: SelectionButton()),
    );
  }
}

class SelectionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Text('Pick an option, any option!'),
    );
  }

  // A method that launches the SelectionScreen and awaits the result from
  // Navigator.pop!
  _navigateAndDisplaySelection(BuildContext context) async {
    // Navigator.push returns a Future that will complete after we call
    // Navigator.pop on the Selection Screen!
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SelectionScreen()),
    );

    // After the Selection Screen returns a result, hide any previous snackbars
    // and show the new result!
    Scaffold.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text("$result")));
  }
}

class SelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pick an option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  // Close the screen and return "Yep!" as the result
                  Navigator.pop(context, 'Yep!');
                },
                child: Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  // Close the screen and return "Nope!" as the result
                  Navigator.pop(context, 'Nope.');
                },
                child: Text('Nope.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

有关导航的更多详细信息：https://flutter.dev/docs/cookbook/navigation/returning-data

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.