如何在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！

Answer 2

您需要为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 3

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