[Flutter Key]Key的学习笔记

KEY

创建类，方法里面的key

class Box extends StatefulWidget {  //构建一个Box类
  const Box({Key key, this.color}) : super(key: key); //方法
    //Box本身没有key，方法里创建一个key，并调用父类的key()
  final Color color;
  @override
  _BoxState createState() => _BoxState();
}

//引用key来区分
Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Box(color: Colors.blue, key: ValueKey('1')),
              Box(color: Colors.orange, key: ValueKey('2')),
              Box(color: Colors.green, key: ValueKey('3')),
            ],
          ),
        ),

Widget（）与Element（state）

import 'package:flutter/material.dart';
//这里是widget（蓝图）
class Detail extends StatefulWidget {
  final Color color;
  Detail(this.color, {Key key}) : super(key: key);

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

//这里是state（状态）
class _DetailState extends State<Detail> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 200,
        color: widget.color,//state里调用widget
      ),
    );
  }
}

局部键Local Key

ValueKey 数值key

//可以用任何数据类型作为key
Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Box(color: Colors.blue, key: ValueKey('1')),
        Box(color: Colors.orange, key: ValueKey('2')),
        Box(color: Colors.green, key: ValueKey('3')),
    ],
),

UniqueKey 唯一key

//唯一key，每次都要new一个key，所以用完state会马上被销毁
Box(color: Colors.blue, key: UniqueKey()),

ObjectKey

//ObjectKey使用index值进行区分
Box(color: Colors.blue, key: ObjectKey('name')),

全局键GlobalKey

//widget改变级别时可以保留状态
final _globalKey2 = GlobalKey();
//像JavaScript里面getElementById那样查找某个元素并得到它的各种信息
//https://www.bilibili.com/video/BV1Hf4y1R7Pf

实例

01

class _MyHomePageState extends State<MyHomePage> {
  final boxes = [
    Box(Colors.blue[100], UniqueKey()),
    Box(Colors.blue[300], UniqueKey()),
    Box(Colors.blue[500], UniqueKey()),
    Box(Colors.blue[700], UniqueKey()),
    Box(Colors.blue[900], UniqueKey()),
  ];
  _shuffle() {
    setState(() {
      boxes.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ReorderableListView(
          children: boxes,
          onReorder: (oldIndex, newIndex) {
            if (newIndex > oldIndex) newIndex--;
            print("$oldIndex move to $newIndex");
            final box = boxes.removeAt(oldIndex);
            boxes.insert(newIndex, box);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _shuffle,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

class Box extends StatelessWidget {
  final Color _color;
  Box(this._color, Key key) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: this._color,
    );
  }
}