如何在flutter中从另一个类中调用方法

Question

我是编码的初学者。我已经在flutter中创建了一个图像选择器，我想在许多不同的页面中使用该图像选择器，因此我创建了一个单独的类，但是当我在其他页面中调用该方法时，它只是打开图库，但是没有选择从图库中显示的图像并显示拾取的图像。没有任何错误。

请帮助解决问题。

提前感谢

我的代码：

main.dart：

    import 'package:flutter/material.dart';
    import 'package:project1test/healthscreen_expat.dart';
    import 'package:project1test/forms/parkings.dart';

class accomodationform extends StatefulWidget {
  String text;
  accomodationform(String name) {
    text = name;
  }
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState(text);
  }
}

class MyAppState extends State<accomodationform> {
  Mod1 mod11 = new Mod1();

  String labels;
  MyAppState([String label]) {
    labels = label;
  }
  Image1 im = Image1();
  final scaffoldkey = new GlobalKey<ScaffoldState>();
  final formkey = new GlobalKey<FormState>();

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: new Padding(
          padding: EdgeInsets.only(left: 20.0, right: 20.0, top: 20),
          child: new Form(
              key: formkey,
              child: ListView(children: <Widget>[
                mod11.user(),
              ]))),
    );
  }
}

imagepick.dart

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

class Mod1 {
  var images1accom;

  user() {
    List<dynamic> img = List();
    return Container(
      margin: EdgeInsets.only(top: 20, right: 20, left: 20),
      padding: EdgeInsets.only(top: 20.0),
      width: double.infinity,
      height: 150.0,
      color: Colors.white70,
      child: Center(
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
                onPressed: () async {
                  images1accom =
                      await ImagePicker.pickImage(source: ImageSource.gallery);

                  img.add(images1accom);
                },
                child: Row(children: <Widget>[
                  Icon(Icons.camera_alt),
                  Text(
                    "Choose File",
                    style: TextStyle(fontSize: 12.0),
                    textAlign: TextAlign.end,
                  )
                ]),
                borderSide: BorderSide(color: Colors.pink),
                textColor: Colors.pinkAccent,
                padding: EdgeInsets.all(10.0),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10.0),
                )),
            Expanded(
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: img.length,
                itemBuilder: (BuildContext c, int position) {
                  return (Image.file(
                    img[position],
                    fit: BoxFit.cover,
                    repeat: ImageRepeat.noRepeat,
                  ));
                },
              ),
            ),
          ],
        ),
      ),
     );
     }
     }

Answer 1

嗯，我认为研究面向对象的程序设计，飞镖以及Flutter的工作方式可能对您有益。最初，我需要告诉您，您根本无法做您想做的事情，无法将类中的小部件插入具有单独功能的类中，并试图在Stateful中实例化它。

不得实例化窗口小部件，如果要对某些组件进行组件化，则必须使用有状态或无状态的类（而不是普通的类）来进行。

您的Mod类应该看起来像这样：

class ChoosePic extends StatefulWidget {
  ChoosePic({Key key}) : super(key: key);

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

class _ChoosePicState extends State<ChoosePic> {
  List<dynamic> img = List();
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20, right: 20, left: 20),
      padding: EdgeInsets.only(top: 20.0),
      width: double.infinity,
      height: 150.0,
      color: Colors.white70,
      child: Center(
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
                onPressed: () async {
                  File images1accom =
                      await ImagePicker.pickImage(source: ImageSource.gallery);
                  img.add(images1accom);
                  setState(() {});
                },
                child: Row(children: <Widget>[
                  Icon(Icons.camera_alt),
                  Text(
                    "Choose File",
                    style: TextStyle(fontSize: 12.0),
                    textAlign: TextAlign.end,
                  )
                ]),
                borderSide: BorderSide(color: Colors.pink),
                textColor: Colors.pinkAccent,
                padding: EdgeInsets.all(10.0),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10.0),
                )),
            Expanded(
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: img.length,
                itemBuilder: (BuildContext c, int position) {
                  return (Image.file(
                    img[position],
                    fit: BoxFit.cover,
                    repeat: ImageRepeat.noRepeat,
                  ));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
您可以与]一起使用>
child: ChoosePic()
我不知道为什么您要在主类中使用列表视图，但是如果确实有必要，您可以这样做：
ListView(children: <Widget>[
                ChoosePic(),
              ])
如果需要img的值，则需要一个状态管理器：
使用Get（将此包添加到pubspec）：https://pub.dev/packages/get

创建具有共享状态的类：

class Controller extends GetController {
  static Controller get to => Get.find();

  List<dynamic> img = List();
  takeImage() {
    File images1accom =
        await ImagePicker.pickImage(source: ImageSource.gallery);
    img.add(images1accom);
    update(this);
  }
}
// use it:
class ChoosePic extends StatefulWidget {
  ChoosePic({Key key}) : super(key: key);

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

class _ChoosePicState extends State<ChoosePic> {

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20, right: 20, left: 20),
      padding: EdgeInsets.only(top: 20.0),
      width: double.infinity,
      height: 150.0,
      color: Colors.white70,
      child: Center(
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
                onPressed: () async {
                  Controller.to.takeImage();
                },
                child: Row(children: <Widget>[
                  Icon(Icons.camera_alt),
                  Text(
                    "Choose File",
                    style: TextStyle(fontSize: 12.0),
                    textAlign: TextAlign.end,
                  )
                ]),
                borderSide: BorderSide(color: Colors.pink),
                textColor: Colors.pinkAccent,
                padding: EdgeInsets.all(10.0),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10.0),
                )),
            Expanded(
              child: GetBuilder<Controller>(
                init: Controller(),
                builder: (controller) {
                  return ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: controller.img.length,
                    itemBuilder: (BuildContext c, int position) {
                      return (Image.file(
                        controller.img[position],
                        fit: BoxFit.cover,
                        repeat: ImageRepeat.noRepeat,
                      ));
                    },
                  );
                }
              ),
            ),
          ],
        ),
      ),
    );
  }
}
现在您可以使用以下代码从代码中的任何位置获取图像列表：
关于小部件三个controller.img;

GetBuilder<Controller>(
                init: Controller(),
                builder: (controller) {
示例：
GetBuilder<Controller>(
                init: Controller(),
                builder: (controller) {
                  return ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: controller.img.length,
                    itemBuilder: (BuildContext c, int position) {
                      return (Image.file(
                        controller.img[position],
                        fit: BoxFit.cover,
                        repeat: ImageRepeat.noRepeat,
                      ));
                    },
                  );
并使用以下命令将其从小部件树中移出：
Controller.to.img
注意：init: Controller()只能使用一次，如果您在其他地方需要GetBuilder，请不要使用它。使用例如：
GetBuilder<Controller>(
                    builder: (controller) {
                      return ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: controller.img.length,
                        itemBuilder: (BuildContext c, int position) {
                          return (Image.file(
                            controller.img[position],
                            fit: BoxFit.cover,
                            repeat: ImageRepeat.noRepeat,
                          ));
                        },
                      );
[嗯，我不应该回答这个问题，因为它可以看作是一个一般性问题，但是由于您是初学者，因此我会详细地帮助您。希望您能尽快了解基础知识，并有一天成为一名出色的开发人员。欢迎来到Flutter！

您需要为Mod1类创建一个单独的小部件。

MyAppState

Widget build(BuildContext context) {
    return Scaffold(
      body: new Padding(
          padding: EdgeInsets.only(left: 20.0, right: 20.0, top: 20),
          child: new Form(key: formkey, child: Mod1())),
    );
  }
Mod1小部件
class Mod1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => Mod1State();
}

class Mod1State extends State<Mod1> {
  var images1accom;
  List<dynamic> img = List();

  @override
  Widget build(BuildContext context) {

    return Container(
      margin: EdgeInsets.only(top: 20, right: 20, left: 20),
      padding: EdgeInsets.only(top: 20.0),
      width: double.infinity,
      height: 150.0,
      color: Colors.white70,
      child: Center(
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
                onPressed: () async {
                  images1accom =
                      await ImagePicker.pickImage(source: ImageSource.gallery);
                  setState(() {
                    img.add(images1accom);
                  });

                },
                child: Row(children: <Widget>[
                  Icon(Icons.camera_alt),
                  Text(
                    "Choose File",
                    style: TextStyle(fontSize: 12.0),
                    textAlign: TextAlign.end,
                  )
                ]),
                borderSide: BorderSide(color: Colors.pink),
                textColor: Colors.pinkAccent,
                padding: EdgeInsets.all(10.0),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10.0),
                )),
            Expanded(
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: img.length,
                itemBuilder: (BuildContext c, int position) {
                  return (Image.file(
                    img[position],
                    fit: BoxFit.cover,
                    repeat: ImageRepeat.noRepeat,
                  ));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如果要在其他页面中使用方法，则可以使用提供程序

Answer 2

您需要为Mod1类创建一个单独的小部件。

Answer 3

如果要在其他页面中使用方法，则可以使用提供程序