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