时间戳

首页 > 解决方案 > 如何在flutter中调用另一个类的方法

android - 如何在flutter中调用另一个类的方法

问题描述

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

请帮助解决问题。

提前致谢

我的代码：

主要飞镖：

    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,
                  ));
                },
              ),
            ),
          ],
        ),
      ),
     );
     }
     }

标签： androidflutterflutter-layout

解决方案

好吧，我认为学习面向对象编程、飞镖以及 Flutter 的工作原理可能对你有好处。最初，我需要告诉你，你根本无法做你想做的事情，在类中插入小部件，使用单独的函数，并尝试在有状态的情况下实例化它。

小部件不能被实例化，如果你想组件化一些东西，你必须使用有状态或无状态的类，而不是普通的类。

您的 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,
                          ));
                        },
                      );

好吧，我不应该回答这个问题，因为它属于一般性问题，但是由于您是初学者，所以我回答是为了帮助您，详细。我希望您能尽快了解基础知识，并有朝一日成为一名出色的开发人员。欢迎来到颤振！

推荐阅读