如何从有状态小部件内的有状态小部件调用方法

Question

我正在尝试清理我的代码，并希望将我的一个方法从一个有状态小部件放在另一个类中，该类也是一个有状态小部件，但是每当我尝试调用该方法时，它都无法识别它，除非我所在的类将其称为无状态小部件。 我想知道在不改变课程的情况下解决这个问题的最佳方法是什么？

这是我的问题的一个简单示例，我试图在MyHomePage内部调用MyHomePage exampleStatefulWidget.testWidget() ，这是一个有状态的小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
ExampleStatefulWidget exampleStatefulWidget = ExampleStatefulWidget();
ExampleStatelessWidget exampleStatelessWidget = ExampleStatelessWidget();

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
        exampleStatefulWidget.testWidget(), // Can not call method that is inside of a stateful widget
        exampleStatelessWidget.testWidget(); // Will call method but only if inside of a stateless widget
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class ExampleStatefulWidget extends StatefulWidget {
  const ExampleStatefulWidget({Key? key}) : super(key: key);

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

class _ExampleStatefulWidgetState extends State<ExampleStatefulWidget> {
  MyHomePage myHomePage = MyHomePage();

  Widget testWidget() {
    return Container(); // Do Something
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class ExampleStatelessWidget extends StatelessWidget {
  const ExampleStatelessWidget({ Key? key }) : super(key: key);

  Widget testWidget() {
    return Container(); // Do Something
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Answer 1

ExampleStatefulWidget和_ExampleStatefulWidgetState是不同的类，您可以创建_ExampleStatefulWidgetState实例来代替。 并使用方法。

_ExampleStatefulWidgetState exampleStatefulWidget =
    _ExampleStatefulWidgetState();

在这种情况下，用途将类似于

_MyHomePageState

class _MyHomePageState extends State<MyHomePage> {
  Widget? widgetFromMethod;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (widgetFromMethod != null) widgetFromMethod!,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          exampleStatelessWidget
              .testWidget(); // Will call method but only if inside of a stateless widget
          final gotWidget = exampleStatefulWidget.testWidget();

          setState(() {
            widgetFromMethod = gotWidget;
          });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

_ExampleStatefulWidgetState

class _ExampleStatefulWidgetState extends State<ExampleStatefulWidget> {
  MyHomePage myHomePage = MyHomePage();

  Widget testWidget() {
    return Container(
      color: Colors.purple,
      width: 100,
      height: 100,
      child: Text("generated method from statefull"),
    ); // Do Something
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

如果_ExampleStatefulWidgetState位于单独的文件中，请公开删除_ 。 它将是ExampleStatefulWidgetState

Answer 2

从 FirstWidget(Parent) 调用 SecondWidget (Child) 的 printLog 方法

注意：不推荐这样做。 使用任何状态管理库来实现这一点（flutter_bloc、提供者等）

import 'package:flutter/material.dart';

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {
  final key = GlobalKey<_SecondWidgetState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () {
                  key.currentState?.printLog();
                },
                child: Text("Click"),
              ),
              SecondWidget(key)
            ],
          ),
        ),
      ),
    );
  }
}

class SecondWidget extends StatefulWidget {
  SecondWidget(Key key) : super(key: key);

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

class _SecondWidgetState extends State<SecondWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(padding: EdgeInsets.all(20), child: Container());
  }

  void printLog() {
    print("I am called");
  }
}