Flutter 在父 Widget 呼叫子 Widget State Function


#Flutter#Dart#Widget

使用一些套件時發現必須呼叫套件底層的 Function,這時候就要利用 GlobalKey。

宣告一個 GlobalKey

final GlobalKey<MyState> _myKey = GlobalKey();

加入到需要呼叫的 Widget

MyWidget(
    key: _myKey,
),

Widget State 內的 Function 必須是 Public

class MyState extends State<MyWidget> {
    foo() {
        // some code
    }
}

呼叫

_myKey.currentState!.foo();

範例


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey<MyState> _myKey = GlobalKey(); // add

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(
            key: _myKey,// add
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _myKey.currentState!.changeText();// add
          },
          child: const Icon(Icons.navigate_next),
        ),
      ),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State<MyWidget> {
  String _text = 'Hello, World!';

  // add
  changeText() {
    setState(() {
      _text = '8787';
    });
  }

  @override
  Widget build(BuildContext context) => Text(_text);
}

試一試吧:https://dartpad.dev/?id=eef25debf488e003de9b94eaf45744c6


參考:
https://stackoverflow.com/questions/51029655
https://api.flutter.dev/flutter/widgets/GlobalKey/currentState.html