Flutter 在 initState 方法中获取上下文

Posted 2023-02-19

【中文标题】Flutter 在 initState 方法中获取上下文

【英文标题】：Flutter get context in initState method

【发布时间】：2018-09-02 14:32:45

【问题描述】：

我不确定initState 是否适合此功能。 我想要实现的是检查页面何时呈现以执行一些检查，并基于它们打开AlertDialog 以在需要时进行一些设置。

我有一个有状态的页面。 它的initState 函数如下所示：

@override
void initState() 
    super.initState();
    if (!_checkConfiguration()) 
        _showConfiguration(context);
    

_showConfiguration 是这样的：

void _showConfiguration(BuildContext context) 
    AlertDialog dialog = new AlertDialog(
        content: new Column(
            children: <Widget>[
                new Text('@todo')
            ],
        ),
        actions: <Widget>[
            new FlatButton(onPressed: ()
                Navigator.pop(context);
            , child: new Text('OK')),
        ],
    );

    showDialog(context: context, child: dialog);

如果有更好的方法来进行此检查并且如果需要调用模态，请指出正确的方向，我正在寻找 onState 或 onRender 函数，或者我可以分配给 @ 的回调987654330@ 函数要在渲染时调用，但找不到。

---

编辑：这里接缝他们有类似的问题：Flutter Redirect to a page on initState

【参考方案1】：

initState 期间可以访问成员变量 context，但不能用于所有内容。这是来自initState 文档的颤振：

你不能从这里使用[BuildContext.inheritFromWidgetOfExactType] 方法。但是，[didChangeDependencies] 将立即被调用 按照这个方法，和[BuildContext.inheritFromWidgetOfExactType] 可以在那里使用。

您可以将初始化逻辑移至didChangeDependencies，但这可能不是您想要的，因为didChangeDependencies 可以在小部件的生命周期中被多次调用。

如果您改为进行异步调用，该调用将您的调用委托给小部件初始化后，您就可以按照您的意愿使用上下文。

一个简单的方法是使用未来。

Future.delayed(Duration.zero,() 
  ... showDialog(context, ....)

另一种可能更“正确”的方法是使用flutter的调度程序添加帧后回调：

SchedulerBinding.instance.addPostFrameCallback((_) 
  ... showDialog(context, ....)
);

最后，我喜欢在 initState 函数中使用异步调用的一个小技巧：

() async 
  await Future.delayed(Duration.zero);
  ... showDialog(context, ...)      
();

这是一个使用简单 Future.delayed 的完整示例：

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;

  bool _checkConfiguration() => true;

  void initState() 
    super.initState();
    if (_checkConfiguration()) 
      Future.delayed(Duration.zero,() 
        showDialog(context: context, builder: (context) => AlertDialog(
          content: Column(
            children: <Widget>[
              Text('@todo')
            ],
          ),
          actions: <Widget>[
            FlatButton(onPressed: ()
              Navigator.pop(context);
            , child: Text('OK')),
          ],
        ));
      );
    
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  

---

借助 cmets 中提供的 OP 的更多上下文，我可以为他们的具体问题提供更好的解决方案。根据应用程序的不同，您实际上可能希望根据是否是第一次打开应用程序来决定显示哪个页面，即将home 设置为不同的值。对话框不一定是移动设备上最好的 UI 元素；最好显示一个完整的页面，其中包含他们需要添加的设置和一个下一步按钮。

【讨论】：

有问题的页面是第一页，它通过MaterialApp 的home 属性调用。所以我并没有真正推动那里。你能给我一个例子如何在build函数中做到这一点吗？目前它只返回一个带有appBar、drawer、body和floatingActionButton的新Scaffold

这很糟糕。您可以访问上下文的第一个位置是 didChangeDependencies 方法

@wawa - 我稍微修正了这个例子。我实际上忘记了context实际上是状态=D的成员变量。所以你不需要布尔值，你可以直接在你的initstate中使用Future.delayed。尽管如此，这仍然是必需的 - 如果没有它，您将在推送时尝试推送时遇到断言错误。

在我的例子中，它在 initState 中显示“未定义的名称上下文”

@rmtmckenzie 函数 Future.delayed(Duration.zero,() 是否总是在 build() 之后运行？如果您在initState() ？你知道任何陷阱吗？我实现了你的例子，到目前为止它运行良好。

【参考方案2】：

用Future包装

  @override
  void initState() 
    super.initState();
    _store = Store();
    new Future.delayed(Duration.zero,() 
      _store.fetchContent(context);
    );
  

【参考方案3】：

====== 已更新 ======

就像Lucas Rueda 指出的那样（感谢他:)，当我们需要在initState() 中获取context 以使用“Provider”时，我们应该将参数listen 设置为=false。这是有道理的，因为我们不应该听initState() 阶段。因此，例如，它应该是：

final settingData = Provider.of<SettingProvider>(context, listen: false);

=========== 旧答案 =======

此线程中initState() 的大多数示例可能适用于“UI”事物，例如“对话框”，这是该线程的根本问题中的情况。

但不幸的是，当应用它为“Provider”获取context 时，它对我不起作用。

因此，我选择didChangeDependencies() 方法。正如在接受的答案中提到的，它有一个警告，即它可以在小部件的生命周期中被多次调用。但是，它很容易处理。只需使用单个辅助变量 bool 即可防止在 didChangeDependencies() 内进行多次调用。这是_BookListState 类的示例用法，变量_isInitialized 作为“多次调用”的主要“停止器”：

class _BookListState extends State<BookList> 
  List<BookListModel> _bookList;
  String _apiHost;
  bool _isInitialized; //This is the key
  bool _isFetching;

  @override
  void didChangeDependencies() 
    final settingData = Provider.of<SettingProvider>(context);
    this._apiHost = settingData.setting.apiHost;
    final bookListData = Provider.of<BookListProvider>(context);
    this._bookList = bookListData.list;
    this._isFetching = bookListData.isFetching;

    if (this._isInitialized == null || !this._isInitialized) // Only execute once
      bookListData.fetchList(context);
      this._isInitialized = true; // Set this to true to prevent next execution using "if()" at this root block
    

    super.didChangeDependencies();
  

...

这是我尝试使用initState() 方法时的错误日志：

E/flutter ( 3556): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: 'package:provider/src/provider.dart': Failed assertion: line 242 pos 7: 'context.owner.debugBuilding ||
E/flutter ( 3556):           listen == false ||
E/flutter ( 3556):           debugIsInInheritedProviderUpdate': Tried to listen to a value exposed with provider, from outside of the widget tree.
E/flutter ( 3556):
E/flutter ( 3556): This is likely caused by an event handler (like a button's onPressed) that called
E/flutter ( 3556): Provider.of without passing `listen: false`.
E/flutter ( 3556):
E/flutter ( 3556): To fix, write:
E/flutter ( 3556): Provider.of<SettingProvider>(context, listen: false);
E/flutter ( 3556):
E/flutter ( 3556): It is unsupported because may pointlessly rebuild the widget associated to the
E/flutter ( 3556): event handler, when the widget tree doesn't care about the value.
E/flutter ( 3556):
E/flutter ( 3556): The context used was: BookList(dependencies: [_InheritedProviderScope<BookListProvider>], state: _BookListState#1008f)
E/flutter ( 3556):
E/flutter ( 3556): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
E/flutter ( 3556): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter ( 3556): #2      Provider.of
package:provider/src/provider.dart:242
E/flutter ( 3556): #3      _BookListState.initState.<anonymous closure>
package:perpus/…/home/book-list.dart:24
E/flutter ( 3556): #4      new Future.delayed.<anonymous closure> (dart:async/future.dart:326:39)
E/flutter ( 3556): #5      _rootRun (dart:async/zone.dart:1182:47)
E/flutter ( 3556): #6      _CustomZone.run (dart:async/zone.dart:1093:19)
E/flutter ( 3556): #7      _CustomZone.runGuarded (dart:async/zone.dart:997:7)
E/flutter ( 3556): #8      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1037:23)
E/flutter ( 3556): #9      _rootRun (dart:async/zone.dart:1190:13)
E/flutter ( 3556): #10     _CustomZone.run (dart:async/zone.dart:1093:19)
E/flutter ( 3556): #11     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1021:23)
E/flutter ( 3556): #12     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15)
E/flutter ( 3556): #13     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:397:19)
E/flutter ( 3556): #14     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:428:5)
E/flutter ( 3556): #15     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)
E/flutter ( 3556):

【讨论】：

你有这个错误，因为你没有使用“listen: false”参数。提供程序检测到没有从小部件树（在“构建”方法中）调用。

感谢您指出@LucasRueda，看起来我做了“listen: false”或context.read()，但在我的 VSCode 上执行“热重新加载”而不是“重新启动”。收到您的消息后，我真的在向我的提供商应用“listen: false”后尝试“重新启动”。我确认它确实是由“listen: true”或context.watch()引起的。很快就会更新我的答案。

【参考方案4】：

简单使用Timer.run()

@override
void initState() 
  super.initState();
  Timer.run(() 
    // you have a valid context here
  );

【讨论】：

@Kamlesh 这个问题与您的其他问题没有任何关系。我个人认为您的问题在我的最终无法重现。

我认为您以前对我提出的问题有任何经验，这就是我问您的原因。谢谢亲爱的。

@Kamlesh 我理解，但您写了“您的解决方案有效”，然后分享了一个问题的链接；我认为这篇文章与您的新帖子有些相关，但事实并非如此。无论如何，我无法制作你的新帖子。如果您可以共享最小的可重现代码会更好。谢谢

【参考方案5】：

我们可以使用全局键：

class _ContactUsScreenState extends State<ContactUsScreen> 

    //Declare Global Key
      final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

    //key
    Widget build(BuildContext context) 
        return  Scaffold(
            key: _scaffoldKey,
            appBar: AppBar(
              title: Text('Contact Us'),
            ),
            body:
       

    //use
      Future<void> send() async 
        final Email email = Email(
          body: _bodyController.text,
          subject: _subjectController.text,
          recipients: [_recipientController.text],
          attachmentPaths: attachments,
          ishtml: isHTML,
        );

        String platformResponse;

        try 
          await FlutterEmailSender.send(email);
          platformResponse = 'success';
         catch (error) 
          platformResponse = error.toString();
        

        if (!mounted) return;

        _scaffoldKey.currentState.showSnackBar(SnackBar(
          content: Text(platformResponse),
        ));
      

【参考方案6】：

这项工作使用方法构建小部件中的键。

首先创建密钥：

  final GlobalKey<NavigatorState> key =
  new GlobalKey<NavigatorState>();

与我们的小部件绑定后：

  @override
  Widget build(BuildContext context) 
    return Scaffold(key:key);
  

最后我们使用key调用.currentContext参数。

    @override
      void initState() 
        super.initState();
        SchedulerBinding.instance.addPostFrameCallback((_) 
            // your method where use the context
            // Example navigate:
            Navigator.push(key.currentContext,"SiestaPage"); 
        );
   

编码愉快。