flutter 获取组件坐标

程序猿唐

于 2023-12-08 18:18:56 发布

阅读量458

点赞数 1

分类专栏： Flutter 文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/u012401513/article/details/134884938

版权

Flutter 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

获取居于屏幕中的坐标

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey globalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFFF5F9FA),
        appBar: AppBar(
          title: const Text('获取组件坐标'),
        ),
        body: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  RenderBox? renderBox = globalKey.currentContext!
                      .findRenderObject() as RenderBox?;
                  print('组件宽和高={"width":${renderBox!.size.width},"height":${renderBox.size.height}}');
                  Offset topLeft = renderBox!.localToGlobal(Offset.zero); //组件左上坐标
                  print('组件左上坐标=$topLeft');
                  Offset bottomRight = topLeft.translate(renderBox.size.width, renderBox.size.height); //组件右下坐标
                  print('组件右下坐标=$bottomRight');
                },
                child: const Text('获取坐标')),
            SizedBox(
              key: globalKey,
              width: 200,
              height: 300
            ),
          ],
        ));
  }
}