美文网首页Flutter
Flutter--> 何时使用GlobalKey?

Flutter--> 何时使用GlobalKey?

作者: 谢尔顿 | 来源:发表于2019-04-09 16:23 被阅读0次

GlobalKey能够跨Widget访问状态。


上图中的开关控件是单独的一个小控件,要求点击右下角的切换,也可以改变开关的状态,这时我们就需要用到GlobalKey。

切换控件的代码如下图所示:

import 'package:flutter/material.dart';

class SwitcherWidget extends StatefulWidget {
  SwitcherWidget({Key key}):super(key:key);
  @override
  SwitcherWidgetState createState() => SwitcherWidgetState();
}

class SwitcherWidgetState extends State<SwitcherWidget> {
  bool isActive = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Switch.adaptive(
            value: isActive,
            activeColor: Colors.blueAccent,
            onChanged: (bool currentStatus) {
              isActive = currentStatus;
              setState(() {});
            }),
      ),
    );
  }

  changeState() {
    isActive = !isActive;
    setState(() {});
  }
}

如上所示,开关控件是一个单独的控件,如果我们要想在外部该变改控件的状态,我们就需要使用GlobalKey。

主页面的代码如下所示:

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

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<SwitcherWidgetState> key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SwitcherWidget(
        key: key,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          key.currentState.changeState();
        },
        child: Text('切换'),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

在上面代码中我们通过定义了一个GlobalKey并传递给SwitcherWidget,然后我们便可以通过这个key拿到它所绑定的SwitcherWidgetState并在外部调用SwitcherWidgetState的changeState方法改变状态了。

相关文章

网友评论

    本文标题:Flutter--> 何时使用GlobalKey?

    本文链接:https://www.haomeiwen.com/subject/dffiiqtx.html