如何反映从父项到子项的变化

Posted 2021-04-08

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

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

class ParentState extends State<Parent> with SingleTickerProviderStateMixin  {
 final List<Map<String, Object>> _pages = [
   {'page': Child(isSelected: true), '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
 }

所以，当我单击应用程序栏时，我的意思是要反映在子页面上的更改。谢谢

答案

复制后，您在代码中发现了一些语法错误。但是，否则它会像您希望的那样工作。我将发布完整代码。文本从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
  }
}