Flutter | Key的原理和使用（下）-阿里云开发者社区

栗子：

在切换屏幕方向的时候改变布局排列方式，并且保证状态不会重置

Center(
  child: MediaQuery.of(context).orientation == Orientation.portrait
      ? Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Counter(),
            Container(child: Counter(key: _globalKey)),
          ],
        )
      : Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Counter(),
            Container(child: Counter(key: _globalKey)),
          ],
        ),
)

上面是最开始写的代码，

通过上面的动图就会发现，第二个 Container 的状态是正确的，第一个则不对，因为第一个没有使用 GlobalKey，所以需要给第一个也加上 GlobalKey，如下：

Center(
        child: MediaQuery.of(context).orientation == Orientation.portrait
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Counter(key: _globalKey1),
                  Counter(key: _globalKey2)
                ],
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Counter(key: _globalKey1),
                  Container(child: Counter(key: _globalKey2))
                ],
              ),
      )

但是这样的写法确实有些 low，并且这种需求我们其实不需要 GlobalKey 也可以实现，代码如下：

Center(
  child: Flex(
    direction: MediaQuery.of(context).orientation == Orientation.portrait
        ? Axis.vertical
        : Axis.horizontal,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[Counter(), Counter()],
  ),
)

使用了 Flex 之后，在 build 的时候 Flex 没有发生改变，所以就会重新找到 Element，所以状态也就不会丢失了。

但是如果内部的 Container 在屏幕切换的过程中会重新嵌套，那还是需要使用 GlobalKey，原因就不需要多说了吧！

GlobalKey 的第二种用法

Flutter 属于声明式编程，如果页面中某个组件的需要更新，则会将更新的值提取到全局，在更新的时候修改全局的值，并进行 setState。这就是最推荐的做法。如果这个状态需要在两个 widget 中共同使用，就把状态向上提升，毫无疑问这也是正确的做法。

但是通过 GlobalKey 我们可以直接在别的地方进行更新，获取状态，widget中数据等操作。前提是我们需要拿到 GlobalKey 对象，其实就类似于 Android 中的 findViewById 拿到对应的控件，但是相比 GlobalKey，GlobalKey 可以获取到 State，Widget，RenderObject 等。

下面我们看一下栗子：

final _globalKey = GlobalKey();
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Flex(
        direction: MediaQuery.of(context).orientation == Orientation.portrait
            ? Axis.vertical
            : Axis.horizontal,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Counter(key: _globalKey),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );

和之前的例子差不多，现在只剩了一个 Counter 了。现在我们需要做的就是在点击 FloatingActionButton 按钮的时候，使这个 Counter 中的计数自动增加，并且获取到他的一些属性，代码如下：

floatingActionButton: FloatingActionButton(
    onPressed: () {
      final state = (_globalKey.currentState as _CounterState);
      state.setState(() => state._count++);
      final widget = (_globalKey.currentWidget as Counter);
      final context = _globalKey.currentContext;
      final render =
          (_globalKey.currentContext.findRenderObject() as RenderBox);
      ///宽高度  
      print(render.size);
      ///距离左上角的像素
      print(render.localToGlobal(Offset.zero));
    },
    child: Icon(Icons.add),
  ),
);

I/flutter (29222): Size(88.0, 82.0)
I/flutter (29222): Offset(152.4, 378.6)

可以看到上面代码中通过 _globakKey 获取到了三个属性，分别是 state，widget 和 context。

其中使用了 state 对 _count 进行了自增。

而 widget 则就是 Counter 了。

但是 context 又是什么呢，我们点进去源码看一下：

Element? get _currentElement => _registry[this];
BuildContext? get currentContext => _currentElement;

通过上面两句代码就可以看出来 context 其实就是 Element 对象，通过查看继承关系可知道，Element 是继承自 BuildContext 的。

通过这个 context 的 findRenderObject 方法可以获取到 RenderObject ，这个 RenderObject 就是最终显示到屏幕上的东西，通过 RenderObject 我们可以获取到一一些数据，例如 widget 的宽高度，距离屏幕左上角的位置等等。

RenderObject 有很多种类型，例如 RenderBox 等，不同的 Widget 用到的可能并不相同，这里需要注意一点

实例

这个例子我们写一个小游戏，一个列表中有很多不同颜色的小方块，通过拖动这些方块来进行颜色的重排序。

通过点击按钮来打乱顺序，然后长按方框拖动进行重新排序；

下面我们来写一下代码：

final boxes = [
  Box(Colors.red[100], key: UniqueKey()),
  Box(Colors.red[300], key: UniqueKey()),
  Box(Colors.red[500], key: UniqueKey()),
  Box(Colors.red[700], key: UniqueKey()),
  Box(Colors.red[900], key: UniqueKey()),
];
  _shuffle() {
    setState(() => boxes.shuffle());
  }
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        ///可重排序的列表
        child: Container(
          child: ReorderableListView(
              onReorder: (int oldIndex, newIndex) {
                if (newIndex > oldIndex) newIndex--;
                final box = boxes.removeAt(oldIndex);
                boxes.insert(newIndex, box);
              },
              children: boxes),
          width: 60,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _shuffle(),
        child: Icon(Icons.refresh),
      ),
    );
  }

ReorderableListView：可重排序的列表，支持拖动排序

onReorder：拖动后的回调，会给出新的 index 和旧的 index，通过这两个参数就可以对位置就行修改，如上所示

scrollDirection：指定横向或者竖向

还有一个需要注意的是 ReorderableListView 的 Item 必须需要一个 key，否则就会报错。

class Box extends StatelessWidget {
  final Color color;
  Box(this.color, {Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
        margin: EdgeInsets.all(5),
        width: 50,
        height: 50,
        decoration: BoxDecoration(
            color: color, borderRadius: BorderRadius.circular(10)),
      ),
    );
  }
}

上面是列表中 item 的 widget，需要注意的是里面使用到了 UnconstrainedBox，因为在 ReorderableListView 中可能使用到了尺寸限制，导致在 item 中设置的宽高无法生效，所以使用了 UnconstrainedBox。

体验了几次之后就发现了一些问题，

比如拖动的时候只能是一维的，只能上下或者左右，

拖动的时候是整个 item 拖动，并且会有一些阴影效果等，

必须是长按才能拖动

因为 ReorderableListView 没有提供属性去修改上面的这些问题，所以我们可以自己实现一个类似的效果。如下：

class _MyHomePageState extends State<MyHomePage> {
  final colors = [
    Colors.red[100],
    Colors.red[300],
    Colors.red[500],
    Colors.red[700],
    Colors.red[900],
  ];
  _shuffle() {
    setState(() => colors.shuffle());
  }
  int _slot;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (event) {
          //获取移动的位置
          final x = event.position.dx;
          //如果大于抬起位置的下一个，则互换
          if (x > (_slot + 1) * Box.width) {
            if (_slot == colors.length - 1) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot + 1];
              colors[_slot + 1] = temp;
              _slot++;
            });
          } else if (x < _slot * Box.width) {
            if (_slot == 0) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot - 1];
              colors[_slot - 1] = temp;
              _slot--;
            });
          }
        },
        child: Stack(
          children: List.generate(colors.length, (i) {
            return Box(
              colors[i],
              x: i * Box.width,
              y: 300,
              onDrag: (Color color) => _slot = colors.indexOf(color),
              key: ValueKey(colors[i]),
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _shuffle(),
        child: Icon(Icons.refresh),
      ),
    );
  }
}
class Box extends StatelessWidget {
  final Color color;
  final double x, y;
  static final width = 50.0;
  static final height = 50.0;
  static final margin = 2;
  final Function(Color) onDrag;
  Box(this.color, {this.x, this.y, this.onDrag, Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      child: Draggable(
        child: box(color),
        feedback: box(color),
        onDragStarted: () => onDrag(color),
        childWhenDragging: box(Colors.transparent),
      ),
      duration: Duration(milliseconds: 100),
      top: y,
      left: x,
    );
  }
  box(Color color) {
    return Container(
      width: width - margin * 2,
      height: height - margin * 2,
      decoration:
          BoxDecoration(color: color, borderRadius: BorderRadius.circular(10)),
    );
  }
}

可以看到上面我们将 ReorderableListView 直接改成了 Stack , 这是因为在 Stack 中我们可以再子元素中通过 Positioned 来自由的控制其位置。并且在 Stack 外面套了一层 Listener，这是用来监听移动的事件。

接着我们看 Box，Box 就是可以移动的小方块。在最外层使用了带动画的 Positioned，在 Positioned 的位置发生变化之后就会产生平移的动画效果。

接着看一下 Draggable组件，Draggable 是一个可拖拽组件，常用的属性如下：

feedback：跟随拖拽的组件

childWhenDragging：拖拽时 chilid 子组件显示的样式

onDargStarted：第一次按下的回调

上面的代码工作流程如下：

1，当手指按住 Box 之后，计算 Box 的 index 。

2，当手指开始移动时通过移动的位置和按下时的位置进行比较。

3，如果大于，则 index 和 index +1 进行互换，小于则 index 和 index-1互换。

4，进行判决处理，如果处于第一个或最后一个时直接 return。

需要注意的是上面并没有使用 UniqueKey，因为 UniqueKey 是惟一的，在重新 build 的时候因为 key 不相等，之前的状态就会丢失，导致 AnimatedPositioned 的动画无法执行，所以这里使用 ValueKey。这样就能保证不会出现状态丢失的问题。

当然也可以给每一个 Box 创建一个惟一的 UniqueKey 也可以。

由于是 gif 图，所以就会显得比较卡顿。

问题

其实在上面最终完成的例子中，还是有一些问题，例如只能是横向的，如果是竖着的，就需要重新修改代码。

并且 x 的坐标是从 0 开始计算的，如果在前面还有一些内容就会出现问题了。例如如果是竖着的，在最上面有一个 appbar，则就会出现问题。

修改代码如下所示：

class _MyHomePageState extends State<MyHomePage> {
 ///...
  int _slot;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (event) {
          //获取移动的位置
          final y = event.position.dy;
          //如果大于抬起位置的下一个，则互换
          if (y > (_slot + 1) * Box.height) {
            if (_slot == colors.length - 1) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot + 1];
              colors[_slot + 1] = temp;
              _slot++;
            });
          } else if (y < _slot * Box.height) {
            if (_slot == 0) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot - 1];
              colors[_slot - 1] = temp;
              _slot--;
            });
          }
        },
        child: Stack(
          children: List.generate(colors.length, (i) {
            return Box(
              colors[i],
              x: 300,
              y: i * Box.height,
              onDrag: (Color color) => _slot = colors.indexOf(color),
              key: ValueKey(colors[i]),
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _shuffle(),
        child: Icon(Icons.refresh),
      ),
    );
  }
}class _MyHomePageState extends State<MyHomePage> {
 ///...
  int _slot;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (event) {
          //获取移动的位置
          final y = event.position.dy;
          //如果大于抬起位置的下一个，则互换
          if (y > (_slot + 1) * Box.height) {
            if (_slot == colors.length - 1) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot + 1];
              colors[_slot + 1] = temp;
              _slot++;
            });
          } else if (y < _slot * Box.height) {
            if (_slot == 0) return;
            setState(() {
              final temp = colors[_slot];
              colors[_slot] = colors[_slot - 1];
              colors[_slot - 1] = temp;
              _slot--;
            });
          }
        },
        child: Stack(
          children: List.generate(colors.length, (i) {
            return Box(
              colors[i],
              x: 300,
              y: i * Box.height,
              onDrag: (Color color) => _slot = colors.indexOf(color),
              key: ValueKey(colors[i]),
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _shuffle(),
        child: Icon(Icons.refresh),
      ),
    );
  }
}

在上面代码中将原本横着的组件变成了竖着的，然后在拖动就会发现问题，如向上拖动的时候需要拖动两格才能移动，这就是因为y轴不是从0开始的，在最上面会有一个 appbar，我们没有将他的高度计算进去，所以就出现了这个问题。

这个时候我们就可以使用 GlobalKey 来解决这个问题：

final _globalKey = GlobalKey();
double _offset;
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Column(
      children: [
        SizedBox(height: 30),
        Text("WelCome", style: TextStyle(fontSize: 28, color: Colors.black)),
        SizedBox(height: 30),
        Expanded(
            child: Listener(
          onPointerMove: (event) {
            //获取移动的位置
            final y = event.position.dy - _offset;
            //如果大于抬起位置的下一个，则互换
            if (y > (_slot + 1) * Box.height) {
              if (_slot == colors.length - 1) return;
              setState(() {
                final temp = colors[_slot];
                colors[_slot] = colors[_slot + 1];
                colors[_slot + 1] = temp;
                _slot++;
              });
            } else if (y < _slot * Box.height) {
              if (_slot == 0) return;
              setState(() {
                final temp = colors[_slot];
                colors[_slot] = colors[_slot - 1];
                colors[_slot - 1] = temp;
                _slot--;
              });
            }
          },
          child: Stack(
            key: _globalKey,
            children: List.generate(colors.length, (i) {
              return Box(
                colors[i],
                x: 180,
                y: i * Box.height,
                onDrag: (Color color) {
                  _slot = colors.indexOf(color);
                  final renderBox = (_globalKey.currentContext
                      .findRenderObject() as RenderBox);
                  //获取距离顶部的距离
                  _offset = renderBox.localToGlobal(Offset.zero).dy;
                },
                key: ValueKey(colors[i]),
              );
            }),
          ),
        ))
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => _shuffle(),
      child: Icon(Icons.refresh),
    ),
  );
}

解决的思路非常简单，

通过 GlobalKey 获取到当前 Stack 距离顶部的位置，然后用dy减去这个位置即可。

优化细节

经过上面的操作，基本的功能都实现了，最后我们优化一下细节，如随机颜色，固定第一个颜色，添加游戏成功检测等。

最终代码如下：

class _MyHomePageState extends State<MyHomePage> {
  MaterialColor _color;
  List<Color> _colors;
  initState() {
    super.initState();
    _shuffle();
  }
  _shuffle() {
    _color = Colors.primaries[Random().nextInt(Colors.primaries.length)];
    _colors = List.generate(8, (index) => _color[(index + 1) * 100]);
    setState(() => _colors.shuffle());
  }
  int _slot;
  final _globalKey = GlobalKey();
  double _offset;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title), actions: [
        IconButton(
          onPressed: () => _shuffle(),
          icon: Icon(Icons.refresh, color: Colors.white),
        )
      ]),
      body: Column(
        children: [
          SizedBox(height: 30),
          Text("WelCome", style: TextStyle(fontSize: 28, color: Colors.black)),
          SizedBox(height: 30),
          Container(
            width: Box.width - Box.margin * 2,
            height: Box.height - Box.margin * 2,
            decoration: BoxDecoration(
                color: _color[900], borderRadius: BorderRadius.circular(10)),
            child: Icon(Icons.lock, color: Colors.white),
          ),
          SizedBox(height: Box.margin * 2.0),
          Expanded(
              child: Center(
            child: Listener(
              onPointerMove: event,
              child: SizedBox(
                width: Box.width,
                child: Stack(
                  key: _globalKey,
                  children: List.generate(_colors.length, (i) {
                    return Box(
                      _colors[i],
                      y: i * Box.height,
                      onDrag: (Color color) {
                        _slot = _colors.indexOf(color);
                        final renderBox = (_globalKey.currentContext
                            .findRenderObject() as RenderBox);
                        //获取距离顶部的距离
                        _offset = renderBox.localToGlobal(Offset.zero).dy;
                      },
                      onEnd: _checkWinCondition,
                    );
                  }),
                ),
              ),
            ),
          ))
        ],
      ),
    );
  }
  _checkWinCondition() {
    List<double> lum = _colors.map((e) => e.computeLuminance()).toList();
    bool success = true;
    for (int i = 0; i < lum.length - 1; i++) {
      if (lum[i] > lum[i + 1]) {
        success = false;
        break;
      }
    }
    print(success ? "成功" : "");
  }
  event(event) {
    //获取移动的位置
    final y = event.position.dy - _offset;
    //如果大于抬起位置的下一个，则互换
    if (y > (_slot + 1) * Box.height) {
      if (_slot == _colors.length - 1) return;
      setState(() {
        final temp = _colors[_slot];
        _colors[_slot] = _colors[_slot + 1];
        _colors[_slot + 1] = temp;
        _slot++;
      });
    } else if (y < _slot * Box.height) {
      if (_slot == 0) return;
      setState(() {
        final temp = _colors[_slot];
        _colors[_slot] = _colors[_slot - 1];
        _colors[_slot - 1] = temp;
        _slot--;
      });
    }
  }
}
class Box extends StatelessWidget {
  final double x, y;
  final Color color;
  static final width = 200.0;
  static final height = 50.0;
  static final margin = 2;
  final Function(Color) onDrag;
  final Function onEnd;
  Box(this.color, {this.x, this.y, this.onDrag, this.onEnd})
      : super(key: ValueKey(color));
  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      child: Draggable(
        child: box(color),
        feedback: box(color),
        onDragStarted: () => onDrag(color),
        onDragEnd: (drag) => onEnd(),
        childWhenDragging: box(Colors.transparent),
      ),
      duration: Duration(milliseconds: 100),
      top: y,
      left: x,
    );
  }
  box(Color color) {
    return Container(
      width: width - margin * 2,
      height: height - margin * 2,
      decoration:
          BoxDecoration(color: color, borderRadius: BorderRadius.circular(10)),
    );
  }
}

Flutter | Key的原理和使用（下）

实例

问题

优化细节

热门文章

最新文章

相关电子书