如何从另一个页面调用flutter中的函数

Posted 2023-03-07

【中文标题】如何从另一个页面调用flutter中的函数

【英文标题】：how to call a function in flutter from another page

【发布时间】：2020-10-11 16:04:41

【问题描述】：

我是 Flutter 的新手，我正在做一个小型 poc 项目。我想要的只是使用按钮单击从我的第一页调用第二页中的函数。这是我所做的，

第一页

class Mainpage extends StatefulWidget 

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


class _MainpageState extends State<Mainpage> 


 @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
         backgroundColor: Colors.white,
        leading: Padding(
          padding: EdgeInsets.only(left: 12),
          child: IconButton(
            icon: Icon(Icons.menu,
              color: Colors.grey[500],
            size: 30,),
            onPressed: () 
              print('Click leading');
            ,
          ),
        ),
        title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children:<Widget>[
              Text('Basic AppBar'),
            ]
        ),
        actions: <Widget>[

          IconButton(
            icon: Icon(Icons.notifications,
            color: Colors.grey[500],
            size: 30,),
            onPressed: () 
              Navigator.pushNamed(context, '/notifications');
            ,
          ),
        ],

      ),
      body:
          Container(
            padding: EdgeInsets.fromLTRB(10,10,10,0),

            child: Column(
                children:<Widget>[
       Row(
            children:<Widget>[
      
    ]),
                  SizedBox(height: 60),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                      children:<Widget>[
                        GestureDetector(
                           child: Image.asset('assets/cam.png',
                               height:90),
                          onTap: () 
                           
                            showDialog(
                              context: context,
                              builder: (context) 
                                return Dialog(
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                                  elevation: 16,
                                  child: Container(
                                    height: 180.0,
                                    width: 330.0,
                                    child: ListView(
                                      children: <Widget>[
                                        SizedBox(height: 20),
                                        //Center(
                                           Padding(
                                             padding: const EdgeInsets.only(left:15.0),
                                             child: Text(
                                              "Add a Receipt",

                                              textAlign: TextAlign.left,
                                              style: TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.bold),
                                          ),
                                           ),
                                       // ),
                                        SizedBox(height: 20),
                                        FlatButton(
                                          child: Text(
                                            'Take a photo..',
                                            textAlign: TextAlign.left,
                                            style: TextStyle(fontSize: 20),
                                          ),

                                          onPressed: () 
                                            
                                            );
                                           

我不知道要不要在上面代码末尾的onpressed函数中给出

第二页如下

class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => _MyHomePageState();



class _MyHomePageState extends State<MyHomePage> 


  File _selectedFile;
  bool _inProcess = false;
  Map data = ;




  Widget getImageWidget() 
    if (_selectedFile != null) 
      return Image.file(
        _selectedFile,
        width: 350,
        height: 650,
        fit: BoxFit.cover,
      );
     else 
      return Image.asset(
        "assets/splashlogo.png",
        width: 350,
        height: 650,
        fit: BoxFit.cover,
      );
    
  

  getImage(ImageSource source) async 
    this.setState(()
      _inProcess = true;
    );
    File image = await ImagePicker.pickImage(source: source);
    if(image != null)
      File cropped = await ImageCropper.cropImage(
          sourcePath: image.path,
          maxWidth: 1080,
          maxHeight: 1080,

          compressFormat: ImageCompressFormat.jpg,
          androidUiSettings: AndroidUiSettings(
              toolbarColor: Colors.black,
              toolbarWidgetColor: Colors.white,
              //toolbarTitle: "RPS Cropper",
              statusBarColor: Colors.deepOrange.shade900,
              backgroundColor: Colors.black,
              initAspectRatio: CropAspectRatioPreset.original,
              lockAspectRatio: false
          ),
          iosUiSettings: IOSUiSettings(
            minimumAspectRatio: 1.0,
          )
      );

      this.setState(()
        _selectedFile = cropped;
        _inProcess = false;
      );
     else 
      this.setState(()
        _inProcess = false;
      );
    
  
  

我需要在第一页的我的 onpress 函数中调用 getImage(ImageSource.camera);，它指向第二页的 getimage 函数。

谁能帮帮我..？

【参考方案1】：

在此处将其添加到 onpressed 的第一页

                                            Navigator.pushReplacementNamed(context,'/2ndpage',arguments: 
                                              'pickerCode': "0",
                                            );

然后在第二页上做

@override
  void initState() 
    super.initState();

    Future.delayed(Duration.zero, () 
      data = ModalRoute.of(context).settings.arguments;
      print(data);
      if(data['pickerCode']=="0")
        getImage(ImageSource.camera);
      
      
    );
  

这是一件棘手的事情，但我认为它会对你有所帮助。

【参考方案2】：

使用全局密钥。

GlobalKey<_MyHomePageState> globalImageKey = GlobalKey();

改变这个：

class MyHomePage extends StatefulWidget 
  MyHomePage(Key key): super(key:key) 
  @override
  _MyHomePageState createState() => _MyHomePageState();

使用MyHomePage时：

MyHomePage(key: globalImageKey)

呼叫：

globalImageKey.currentState.getImage(ImageSource.camera);

【讨论】：

你能告诉它在我的代码中在哪里实现吗，..？