flutter - 如何反映从父组件到子组件的更改

Question

我现在想如何将布尔值从父级更改为子级。在父页面上我有一个按钮AppBar，在身体上我有一个孩子女巫包含一个ListView。

class Parent extends StatefulWidget {
  @override
  ParentState createState() => ParentState ();
}

class ParentState extends State<Parent> with SingleTickerProviderStateMixin  {
List<Map<String, Object>> _pages = [
   {'page': Child(isSelected: isSelect), 'title': 'Child'},
   {'page': Child2(), 'title': 'Child2'},
 ];
 bool isSelect= false;
 int _selectedPageIndex = 0;
 Widget _page;

 @override
void initState() {
  _page = _pages[_selectedPageIndex]['page'];
  // TODO: implement initState
  super.initState();
  }

 void _selectPage(int index) {
  setState(() {
    _selectedPageIndex = index;
    _page = _pages[index]['page'];
  });
 }

  toggleSelect(){
    setState(() {
      isSelect= !isSelect;
    });
  }

 Widget build(BuildContext context) {
   child: new Scaffold(
      appBar: AppBar(
      title: FlatButton(
         onPressed: toggleSelect,
         Column(
                children: <Widget>[
                     Icon(Icons.message, color: isSelect ? Colors.blue : Colors.grey),
                     Text("Select", style: TextStyle(fontSize: 14, color: isSelect? Colors.blue : Colors.grey),)
                 ],
             ),
      ),
      body: _page,
      bottomNavigationBar: BottomNavigationBar(
          onTap: _selectPage,
          backgroundColor: Theme.of(context).primaryColor,
          unselectedItemColor: Colors.grey,
          selectedItemColor: Colors.blue,
          currentIndex: _selectedPageIndex,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('Child')),
            BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('Child2')),
          ]),
 }
}

class Child extends StatefulWidget {
 bool isSelect;
 Child({this.isSelect});

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

class ChildState extends State<Child> with SingleTickerProviderStateMixin  {
  @override
  Widget build(BuildContext context) {
  return Text(widget.isSelect)  // here is a listView but i have done like this just for example
 }

那么我是什么，当我点击应用栏时，我会在子页面上反映什么变化。谢谢

标签： flutterdart

Answer 1

当我复制你的代码时，我在你的代码中发现了一些语法错误。但否则它会像你想要的那样工作。我会发布完整的代码。文本从 true 切换到 false 并再次返回。

class Parent extends StatefulWidget {
  @override
  ParentState createState() => ParentState();
}

class ParentState extends State<Parent> with SingleTickerProviderStateMixin {
  bool isSelect = false;

  toggleSelect() {
    setState(() {
      isSelect = !isSelect;
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: FlatButton(
            onPressed: toggleSelect,
            child: Column(
              children: <Widget>[
                Icon(Icons.message,
                    color: isSelect ? Colors.blue : Colors.grey),
                Text(
                  "Select",
                  style: TextStyle(
                      fontSize: 14,
                      color: isSelect ? Colors.blue : Colors.grey),
                )
              ],
            ),
          ),
        ),
        body: Child(isSelect: isSelect));
  }
}

class Child extends StatefulWidget {
  bool isSelect;
  Child({this.isSelect});

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

class ChildState extends State<Child> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Text(widget.isSelect
        .toString()); // here is a listView but i have done like this just for example
  }
}