Question

在此代码中，我想通过更改导航抽屉中的索引来显示已索引的窗口小部件，即主要MaterialApp根据索引（widgetIndex）显示窗口小部件。索引已更新，但是直到我热重新加载它为止，窗口小部件才会更改。因此，我希望它从抽屉小部件中重新加载MyApp小部件。

// main.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.
          ],
        ),
      ),
    );
  }
}

//抽屉.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();
            },
          ),
        ],
      ),
    );
  }
}

输出：

希望对您有帮助。

如何在Flutter中将一个小部件（statefull）的状态从另一个statefull小部件更改？

1 个答案: