Flutter获取的OverlayState来自哪里？

Posted 2023-04-27

参考技术A 当在flutter中做一个全局的Toast,loading,Alert的时候，会使用到OverlayEntry,只要通过OverlayState.insert()就能展示在界面上。如此好用那OverlayState又是从哪来的呢？

首先,获取OverlayState可以直接调用OverlayState overlayState = Overlay.of(context);直接就拿context去找了：OverlayState result = context.findAncestorStateOfType<OverlayState>(); 

能找到？怎么就找到了呢

那看下Overlay的注释：

尽管您可以直接创建一个[Overlay]，但最常见的是使用[WidgetsApp]或[MaterialApp]中的[Navigator]创建的。导航器使用其overlay来管理路由的视觉外观。

其中很关键的点在Navigator,那去找Navigator,顺便还找到了Route。

Navigator中一层结构就是Overlay。那看下Flutter中导航到底是怎么做的。

许多应用程序在其小部件层次结构的顶部附近都有一个导航器，以便使用[Overlay]来显示它们的逻辑历史，其中最近访问的页面可视化地位于较旧页面的顶部。通过使用此模式，导航器可以通过在覆盖图中移动小部件从一个页面可视地过渡到另一个页面。

既然Overlay从导航而来，那App中怎么就有导航呢？

Flutter创建的的时候,main里面的入口runApp(),在视图的最底层会写一个MaterialApp().

找到MaterialApp。

那就找在哪创建了Navigator。没找到，但是在return时用的是WidgetsApp，看下介绍。

WidgetsApp定义了基本的应用程序元素，但不依赖于Material库,也就是MaterialApp是对WidgetsApp的上层封装，为我们集成了Material元素。继续找WidgetsApp。

在build里面创建了Navigator。

那么流程就是：MaterialApp ——> WidgetsApp ——> Navigator。

Overlay.of(context)拿到了Navigator里面的OverlayState.

Flutter 从小部件中获取文本

【中文标题】Flutter 从小部件中获取文本

【英文标题】：Flutter get text from widgets

【发布时间】：2021-03-24 15:30:59

【问题描述】：

我来自 java，现在开始使用 Flutter。

在我的第一个应用程序中，我正在玩弄布局和按钮，但我在让按钮操作正常工作时遇到了困难，这可能是因为我来自 java。

在我的应用中，我有以下小部件：

  Widget _buttonOne = RaisedButton(
    onPressed: () ,
    child: Text('Button One', style: TextStyle(fontSize: 20)),
  );

  final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

 Container(
    padding: const EdgeInsets.all(8),
    child: _textContainer,
    color: Colors.teal[200],
 ),

现在我想打印容器的按钮和 textchild 的文本。我如何做到这一点？

 CupertinoButton.filled(
     child: Text('Button Two'),
     onPressed: () 
         print(_textContainer);   // how do I print the text of the text widget here? 
         print (_buttonOne. ....); // on java there is a getText() method .... how does this work in flutter? 
 ),

【问题讨论】：

以下两个答案可以解决您的问题，但这种方法并不能反映 Flutter 的模块化

@Yadu 能详细解释一下吗？

您是使用按钮文本作为值还是纯粹用于调试目的？ （如果是为了调试，那么下面的答案看起来不错），在知道你试图在更广泛的例子中实现什么后，可以给出详细的解释

感谢您的关注。我的目标是发现如何在实际应用程序中使用这样的值。目前我仍在弄清楚 Flutter 是如何处理事情的。

【参考方案1】：

您可以在下面复制粘贴运行完整代码 您可以使用as 进行类型转换，然后访问属性data 代码sn-p

CupertinoButton.filled(
                child: Text('Button Two'),
                onPressed: () 
                  print(_textContainer.data);
                  print(((_buttonOne as RaisedButton).child as Text).data);
                ),

输出

I/flutter (30756): Container One
I/flutter (30756): Button One

完整代码

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

void main() 
  runApp(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> 
  Widget _buttonOne = RaisedButton(
    onPressed: () ,
    child: Text('Button One', style: TextStyle(fontSize: 20)),
  );

  final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CupertinoButton.filled(
                child: Text('Button Two'),
                onPressed: () 
                  print(_textContainer
                      .data); // how do I print the text of the text widget here?
                  print(((_buttonOne as RaisedButton).child as Text).data);
                ),
          ],
        ),
      ),
    );
  

【讨论】：

非常感谢这个详细的回答......，非常有帮助

【参考方案2】：

您可以使用data 属性访问Text 小部件的text：

final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

@override
Widget build(BuildContext context) 
   return Scaffold(body: 
      Center(
         child: CupertinoButton.filled(
           child: Text('Button Two'),
           onPressed: () =>
                  print(_textContainer.data),
           )
        )
    );
 

以类似的方式，您可以访问RaisedButton child 的内容：

final _raisedButtonText = const Text('Button One', style: TextStyle(fontSize: 20));

Widget _buttonOne = RaisedButton(onPressed: () , child: _raisedButtonText);

final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

@override
Widget build(BuildContext context) 
   return Scaffold(body: 
      Center(
         child: CupertinoButton.filled(
           child: Text('Button Two'),
           onPressed: () 
                  print(_textContainer.data);
                  print(_raisedButtonText.data);
              
           )
        )
    );
 

【讨论】：

酷，非常感谢您的回复....它工作得很好