Flutter GlobalKey

83 阅读 0 评论 55 点赞

我是靠谱客的博主无语野狼，最近开发中收集的这篇文章主要介绍Flutter GlobalKey，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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方法改变状态了。

4人点赞

Flutter

作者：想要个李大仁
链接：https://www.jianshu.com/p/d37f97a926a8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。