在 Flutter 中如何影响父屏幕状态？答案

【问题标题】：In Flutter how to effect parent screen state?在 Flutter 中如何影响父屏幕状态？
【发布时间】：2018-09-13 11:09:36
【问题描述】：

这是我想做的。当 MenuScreen 的 checkboxListTile 被选中时，父屏导航按钮改变状态来切换一些文本。

多选，无导航弹回。

没有异步功能，InheritedWidget 似乎没有任何更新事件。

我从来没有找到全局变量 onChange Listener，也许我应该知道。

import 'package:flutter/material.dart';

class SandBoxScreen extends StatefulWidget {
    @override
    SandBoxState createState() => SandBoxState();
}

class SandBoxState extends State<SandBoxScreen> with TickerProviderStateMixin {
    @override
    void initState() {
        super.initState();
    }
    bool isSelected = false;
    @override
    Widget build(BuildContext context) {
        String nextText = isSelected ? 'next' : 'plz select';
        return new Scaffold(
            appBar: AppBar(),
            body: new Container(
                child:Column(children: <Widget>[
                    _MenuSelection(),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                            RaisedButton(child:Text('prev')),
                            RaisedButton(child:Text(nextText)),
                        ],
                    )
                ],)
            )
        );
    }
}


class _MenuSelection extends StatefulWidget{
    @override
    _MenuState createState() => _MenuState();
}
class _MenuState extends State<_MenuSelection>{
    List<bool> selection = [false,false,false,false];
    @override
    Widget build(BuildContext context) {
        return Container(child:Column(
            children: <Widget>[
                CheckboxListTile(value: selection[0], onChanged: (a){setState(() { selection[0] = a; });} , title: Text('item1'),),
                CheckboxListTile(value: selection[1], onChanged: (a){setState(() { selection[1] = a; });} , title: Text('item2'),),
                CheckboxListTile(value: selection[2], onChanged: (a){setState(() { selection[2] = a; });} , title: Text('item3'),),
                CheckboxListTile(value: selection[3], onChanged: (a){setState(() { selection[3] = a; });} , title: Text('item4'),),
            ],
        ));
    }
}

【问题讨论】：

标签： dart flutter

【解决方案1】：

处理此用例的最简单方法是将回调函数传递给您的子小部件。这样你就可以告诉父母使用 setState() 重建

class _MenuSelection extends StatefulWidget {
  final Function onSelect;

  _MenuSelection(this.onSelect);
}

// child
CheckboxListTile(value: selection[0], onChanged: (a) {
    setState(() { 
      selection[0] = a;
      onSelect(0, a);
    });
} , title: Text('item1'),),

// SandBoxState         
Column(children: <Widget>[
                _MenuSelection((index, value) {
                   // rebuild SandBoxState
                   setState(() {
                     ...
                   });
                },

【讨论】：

你能给出更具体的代码吗？我只是尝试了几次回调函数，setState() 似乎无法正常工作
对不起，我终于明白了。

【解决方案2】：

我只留下完整的代码。

import 'package:flutter/material.dart';

class SandBoxScreen extends StatefulWidget {
  @override
  SandBoxState createState() => SandBoxState();
}

class SandBoxState extends State<SandBoxScreen> with TickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  bool isSelected = false;

  List<bool> selection = [false, false, false, false];
  @override
  Widget build(BuildContext context) {
    String nextText = isSelected ? 'next' : 'plz select';
    return new Scaffold(
        appBar: AppBar(),
        body: new Container(
            child: Column(
          children: <Widget>[
            _MenuSelection(selection,(index, value){
              setState(() {
                selection[index] = value;
                if(selection.contains(true)){
                  isSelected = true;
                }else{
                  isSelected = false;
                }
              });
            }),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                RaisedButton(child: Text('prev')),
                RaisedButton(child: Text(nextText)),
              ],
            )
          ],
        )));
  }
}

class _MenuSelection extends StatefulWidget {
  final Function onSelect;
  final List selection;
  _MenuSelection(this.selection, this.onSelect);

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

class _MenuState extends State<_MenuSelection> {

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        CheckboxListTile(
          value: widget.selection[0],
          onChanged: (a) {
            setState(() {
              widget.selection[0] = a;
              widget.onSelect(0,a);
            });
          },
          title: Text('item1'),
        ),
      ],
    ));
  }
}

【讨论】：