如何从 Flutter 中的另一个 Stateful Widget 更改一个 Stateful Widget 的状态？

Question

在此代码中，我想通过更改导航抽屉中的索引来显示索引小部件，即主MaterialApp 根据索引（widgetIndex）显示小部件。索引已更新，但小部件在我热重新加载之前不会更改。所以，我希望它从抽屉小部件中重新加载 MyApp 小部件。

ma​​in.dart：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:indexed/page1.dart';
import 'package:indexed/page2.dart';
import 'drawer.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  //set widgetIndex(int widgetIndex) {widgetIndex = DrawerS.widgetIndex;}
  int widgetIndex = SideDrawerState.widgetIndex;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      home: Container(
        child: IndexedStack(
          index: widgetIndex,
          children: <Widget>[
            Page1(), //A Scaffold wid.
            Page2(), //A Scaffold wid.
          ],
        ),
      ),
    );
  }
}

drawer.dart：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SideDrawer extends StatefulWidget {

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

class SideDrawerState extends State<SideDrawer> {

  static int widgetIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          ListTile(
            contentPadding: EdgeInsets.only(top: 50),
            title: Text('1'),
            onTap: () async {
              setState(() => widgetIndex = 0);

              Navigator.of(context).pop();
            },
          ),
          ListTile(
            title: Text('2'),
            onTap: (){
              setState(() => widgetIndex = 1);

              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以在 SideDrawer 中创建一个以 index 作为参数的函数字段。

调用在每个ListTile的onTap中传递适当参数的函数。

在您的 MyApp 中创建一个初始值为 0 的变量，然后在设置 SideDrawer 时添加 onTap 属性，然后更改在 setState

这样

class MyApp2 extends StatefulWidget {
  @override
  MyApp2State createState() => MyApp2State();
}
class MyApp2State extends State<MyApp2> {

  var widgetIndex = 0;
  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: SafeArea(
        child: Container(
          child: IndexedStack(
            index: widgetIndex,
            children: <Widget>[
              Text("djdhjhd"),
              Text("nonono")
            ],
          ),
        ),
      ),
      drawer: SideDrawer(
        onTap: (index){
          setState(() {
            widgetIndex = index;
          });
        },
      ),
    );
  }
}


class SideDrawer extends StatefulWidget {

  final Function(int index) onTap;
  SideDrawer({this.onTap});

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

class SideDrawerState extends State<SideDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          ListTile(
            contentPadding: EdgeInsets.only(top: 50),
            title: Text('1'),
            onTap: () async {
              widget.onTap(0);
              Navigator.of(context).pop();
            },
          ),
          ListTile(
            title: Text('2'),
            onTap: (){
              widget.onTap(1);
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

输出：

希望对你有帮助。