Flutter——Key

• key的介绍

  key不能重复，一般作为唯一标识，组件更新的时候，其状态的保存主要是通过判断组件的类型或key值是否一致。当各组件的类型不同的时候，类型已经足够用来区分不同的组件了，此时我们可以不用key。当组件存在多个相同的类型的时候，此时就要用用key来区分。

    局部key:
        ValueKey("1")\UniqueKey()\ObjectKey()\LocalKey()
    全局key:
        GlobalKey(key)\GlobalObjectKey(value)
        当组件类型不一致，想要保存组件状态时，可以使用全局key

• 通过全局key 可以获得子组件属性方法

通过final GlobalKey _globalKey = GlobalKey();设置全局key，将key写入子Widget,child: Box(key: _globalKey, color: Colors.red)，即可

获取属性和方法：var boxState = _globalKey.currentState as _BoxState; setState(() { boxState._count++; }); boxState.run();

//获取子widget： var boxWidget = _globalKey.currentWidget as Box;

//获取渲染属性： var renderBox = _globalKey.currentContext!.findRenderObject() as RenderBox;

//父Widget
class HomePage extends StatefulWidget {
  HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //获取属性和方法
          var boxState = _globalKey.currentState as _BoxState;
          setState(() {
            boxState._count++;
          });
          boxState.run();
          //获取子widget
          var boxWidget = _globalKey.currentWidget as Box;
          //获取渲染属性
          var renderBox =
              _globalKey.currentContext!.findRenderObject() as RenderBox;
          print('------------------------------${renderBox.size}');
        },
        child: const Icon(Icons.add),
      ),
      appBar: AppBar(
        title: const Text("T"),
      ),
      body: Center(
        child: Box(key: _globalKey, color: Colors.red),
      ),
    );
  }
}

//子Widget
class Box extends StatefulWidget {
  final Color color;
  const Box({Key? key, required this.color}) : super(key: key);

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  int _count = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  void run() {
    print("=========================");
  }

  @override
  Widget build(BuildContext context) {
    // print(MediaQuery.of(context).orientation);
    return Container(
      height: 100,
      width: 100,
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(widget.color)),
        onPressed: () {
          setState(() {
            _count++;
          });
        },
        child: Text(
          "$_count",
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

• MediaQuery.of(context).orientation 获取设备横屏还是竖屏