如何從有狀態小部件內的有狀態小部件調用方法

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");
  }
}