在Flutter中如何影响父屏幕状态?

时间:2018-09-13 11:09:37

标签: dart flutter

这是我想做的。选择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'),),
            ],
        ));
    }
}

enter image description here

1 个答案:

答案 0 :(得分: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(() {
                     ...
                   });
                },