dart - 如何从抽屉导航 flutter 中重置任何类的状态？

Question

我正在编写一个具有抽屉导航的应用程序每当我尝试从抽屉导航打开一个事件时，我的类第一次成功加载并给我所需的输出，因为我已经编写了从 initState 中的图库中选择图像的代码方法，它允许我第一次从图库中选择图像。但是，当我再次从抽屉导航中单击同一选项卡时，它不会重置此类的状态，每次再次单击抽屉导航中的同一选项卡时，我都需要访问图像选择代码。这是我的代码。

NavigationDrawer 类

  _getDrawerItemWidget(int pos, String title) {



switch (pos) {
  case 0:
    if(title.contains("From Gallery"))

          return new TextRobo();
    else
      return new TranslateLangue();

    break;
  case 1:
    return new BarCodeRobo();
  case 2:
    return new TranslateLangue();

  default:
    return new Text("Error");
}
}




return new Scaffold(
appBar: new AppBar(
  iconTheme: new IconThemeData(color: Colors.white),
  title: new Text("App title",
    style: new TextStyle(color: Colors.white),),
),

  drawer: new Drawer(
    child: new ListView(
      children: <Widget>[
        new Container( height: 140.0, color: Colors.orange,
        child: new Center(child:
          new Text('App title', style: new TextStyle(color: Colors.white,
          fontSize:25.0, fontWeight: FontWeight.bold),
          ),
        ),
        ),
        new Column(
            children: drawerOptions)
      ],
    ),

  ),
  body: _getDrawerItemWidget(_selectedDrawerIndex, fragment_class  ),
);
}
}

TextRobo 类

class TextRobo extends StatefulWidget {

TextRobo1()
{

  createState();
}
  @override
 _TextRoboState createState() => new _TextRoboState();
}

class _TextRoboState extends State<TextRobo> {



 File _imageFile;



 @override
 void initState() {
 // TODO: implement initState
  super.initState();
  _getAndScanImage();

  }

  Future<void> _getAndScanImage() async {
   setState(() {
    _imageFile = null;

  });

  final File imageFile =
  await ImagePicker.pickImage(source: ImageSource.gallery);


 setState(() {
   _imageFile = imageFile;
  });
}

}

Answer 1

您可以采取几种不同的方法来执行此操作。但首先 - 你关注了this tutorial ?它是......不太好。

主要问题是它没有使用 Flutter 的内置导航机制，而是更改了现有页面。这意味着你无法利用 Flutter 为你做的许多事情。

至于为什么initState只被调用一次，很可能是因为flutter智能为你缓存了widget。由于您的小部件表面上是“相同的”，即使您创建了一个新实例，它也不会费心重新制作状态，而是会以性能的名义使用现有的状态。

我的建议是重新编写和重构。

如果您的应用程序相对简单(即您可以在使用抽屉之间切换的一组页面)，则应该这样做:

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: pageName(Pages.red),
      routes: {
        pageName(Pages.red): (context) => PageBase(title: pageName(Pages.red), page: ColouredPage(color: Colors.red)),
        pageName(Pages.green): (context) =>
            PageBase(title: pageName(Pages.green), page: ColouredPage(color: Colors.green)),
        pageName(Pages.blue): (context) =>
            PageBase(title: pageName(Pages.blue), page: ColouredPage(color: Colors.blue)),
      },
      // not actually used, needed in case flutter started with intent specifying unsupported route
      home: Container(),
    );
  }
}

enum Pages { red, green, blue }

String pageName(Pages page) {
  switch (page) {
    case Pages.red:
      return "Red";
    case Pages.green:
      return "Green";
    case Pages.blue:
      return "Blue";
  }
}

class PageBase extends StatelessWidget {
  final String title;
  final Widget page;

  const PageBase({Key key, @required this.page, @required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: page,
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: Text(pageName(Pages.red)),
              onTap: () {
                Navigator.of(context).popAndPushNamed(pageName(Pages.red));
              },
            ),
            ListTile(
              title: Text(pageName(Pages.blue)),
              onTap: () {
                Navigator.of(context).popAndPushNamed(pageName(Pages.blue));
              },
            ),
            ListTile(
              title: Text(pageName(Pages.green)),
              onTap: () {
                Navigator.of(context).popAndPushNamed(pageName(Pages.green));
              },
            )
          ],
        ),
      ),
    );
  }
}

class ColouredPage extends StatefulWidget {
  final Color color;

  const ColouredPage({Key key, this.color}) : super(key: key);

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

class _ColouredPageState extends State<ColouredPage> {
  Color color;

  @override
  void initState() {
    super.initState();
    color = Colors.white;
    new Timer(Duration(seconds: 2), () {
      setState(() {
        color = widget.color;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
    );
  }
}

如果您将页面推送到现有页面之一的顶部，然后最终返回，您可以使用 Navigator.push()使用处理程序返回何时返回，然后重新触发您的函数。