如何反映从父组件到子组件的变化

Question

I want to now how can I change a Boolean value from parent to child. On parent page i have a button on AppBar , and on body i have a child witch contains an 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
 }

So what I what is that when I click on app bar I what that change to reflect on child page. Thank you

Answer 1

I found some syntax mistakes in your code when I copied it over. But otherwise it works like you want it to. I'll post the full code. The Text toggles from true to false and back again.

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
  }
}