Question

我有一个有状态的小部件，有条件地在堆栈中渲染两个孩子，我想更改第三个孩子的出借条件。有什么主意吗？

父代码：

  class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Body()
    );
  }
}

class Body extends StatefulWidget { 
  final String showScreen;
  
  const Body({
    Key key, 
    this.showScreen="post",
  }) : super(key:key);

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

class _BodyState extends State<Body> {
  
  
  Widget _conditionedWidget(){
  if(this.widget.showScreen=="map"){
   return MapScreen();
 }else if(this.widget.showScreen == "post"){
   return PostScreen();
 }
}

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
      DrawerScreen(),
      _conditionedWidget(),
      ],
    );
  }
}

子代码

class DrawerScreen extends StatefulWidget {
  @override
  _DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      color:kPrimaryColor,
      padding:EdgeInsets.only(top:70),  
      child:Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              SizedBox(width:20.0),
              CircleAvatar(),
              SizedBox(width:10.0),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('Biswas Sampad',style:TextStyle(
                    color:Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  )),
                  Text('@biswassampad',style:TextStyle(
                    color:Colors.grey[200],
                    fontSize: 15.0,
                  ))
                ],
              )
            ],
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 20,vertical:20),
            margin: EdgeInsets.symmetric(vertical:30),
            child: Column(
              children: <Widget>[
                MenuButton(icon:Icons.style, name:'Explore',action:(){
                      print('showing maop');
                }),
                MenuButton(icon:Icons.tag_faces, name:'Profile',action:(){
                      print('showing profile');
                }),
                MenuButton(icon:Icons.people, name:'People',action:(){
                      print('showing People');
                }),
                MenuButton(icon:Icons.speaker_notes, name:'Messages',action:(){
                      print('showing messages');
                }),
                MenuButton(icon:Icons.notifications, name:'Notifications',action:(){
                      print('showing Notifications');
                }),
                MenuButton(icon:Icons.satellite,name:'Settings',action:(){
                      print('showing settings');
                })
              ],
            ),
          ),
          LogoutSection()
        ],
      )
    );
  }
}

所以基本上我想从DrawerScreen> MenuButton> action更改父窗口小部件的showScreen值？

任何想法怎么做！预先感谢。

Answer 1

您可以像这样在“ DrawerScreen”小部件中使用 Function ：

将此代码写到类的标题中：

final Function onChangeState = Function();
DrawerScreen({@rquired onChangeState});

并在MenuButton中调用 onChangeState 函数，如下所示：

 MenuButton(icon:Icons.satellite,name:'Settings',action:(){
                      widget.onChangeState("Settings");
                })

并将 Body 小部件中的旧代码更改为：

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
      DrawerScreen(onChangeState : (newState){
       setState(){
          this.widget.showScreen = newState;
         };
       }),
      _conditionedWidget(),
      ],
    );
  }

如何在颤抖中将一个有状态的小部件的状态从另一个状态更改为其他状态？

1 个答案: