如何在 GridView flutter 中获取小部件的偏移量

Question

我正在尝试向 GridView 内的 Inkwell Widget 添加爆炸效果，但我需要找到它的偏移量，到目前为止我已经尝试过：

GridView.builder(
  itemCount: 10,
  itemBuilder: (ctx, ind) {
    return InkWell(
      onTap: () async {
        try {
          final RenderBox box = ctx.findRenderObject();
          Offset position = box.localToGlobal(Offset.zero,
            ancestor: context.findRenderObject()
          );
          double x = position.dx;
          double y = position.dy;
          double w = box.size.width;
          Future.delayed(Duration(milliseconds: 100)).then(
            (_) => _particleField.lineExplosion(x, y, w)
          );
        } catch (e) {
          print(e);
        }
      },
      child: Center(
        child: Text("${ind + 1},000,000")
      ),  
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, 
    childAspectRatio: 3
  ),
)

但我收到此错误：

“RenderSliv​​erGrid”类型不是“RenderBox”类型的子类型

Answer 1

这是你想要的？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: GridExample(),
      ),
    );
  }
}

class GridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 10,
      itemBuilder: (ctx, ind) {
        return _Item('${ind + 1},000,000');
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, childAspectRatio: 3),
    );
  }
}

class _Item extends StatelessWidget {
  _Item(this.title);
  String title;

  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      key: _globalKey,
      onTap: () async {
        final RenderBox referenceBox =
            _globalKey.currentContext.findRenderObject();

        final position = referenceBox.localToGlobal(Offset.zero);
        final x = position.dx;
        final y = position.dy;
        final w = referenceBox.size.width;
        Future.delayed(Duration(milliseconds: 100))
            .then((_) => _particleFieldLineExplosion(x, y, w));
      },
      child: Center(child: Text(title)),
    );
  }

  _particleFieldLineExplosion(x, y, w) {
    print(x);
    print(y);
    print(w);
  }
}