如何在 Flutter 中获取屏幕的中心偏移量？答案

【问题标题】：How can I get center offsets of a screen in Flutter?如何在 Flutter 中获取屏幕的中心偏移量？
【发布时间】：2022-12-31 22:26:17
【问题描述】：

我正在使用堆栈平移文本Offset和Positioned小部件。我想获得中心的偏移量。我试过

offset = Offset(screenWidth/2, screenHeight/2);

但这是行不通的。还有另一种方法可以获得中心坐标/偏移量吗？

【问题讨论】：

使用LayoutBuilder作为父母-它在您可以使用的builder中传递BoxConstraints constraints参数
做这个会帮助你raywenderlich.com/25237210-building-a-drawing-app-in-flutter

标签： flutter flutter-dependencies

【解决方案1】：

作为pskink commented，使用 LayoutBuilder 作为父级; Jared Anderton's answer 很好，但它会计算脚手架身体，不考虑其他属性，比如应用栏.另外 Hrvoje Čukman's answer 满足您的要求。

另一件事只需使用Stack(alignment: Alignment.center 即可完成。它将对齐未对齐的孩子。

父小部件是LayoutBuilder。

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      Offset centerOffset =
          Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
      return Scaffold(

另一种选择是从dart:ui 获取windowSize。

final Size windowSize = MediaQueryData.fromWindow(window).size;
late Offset screenOffset =
   Offset(windowSize.width / 2, windowSize.height / 2);

class CenterOffset extends StatelessWidget {
  const CenterOffset({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Size windowSize = MediaQueryData.fromWindow(window).size;
    late Offset screenOffset =
        Offset(windowSize.width / 2, windowSize.height / 2);
    return LayoutBuilder(
      builder: (context, constraints) {
        Offset centerOffset =
            Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
        return Scaffold(
            appBar: AppBar(),
            body: LayoutBuilder(
              builder: (context, chConstraints) {
                Offset bodyBasedCenter = Offset(
                    chConstraints.maxWidth / 2, chConstraints.maxHeight / 2);
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("window based center $screenOffset"),
                      Text("Parent based center $centerOffset"),
                      Text("body   based center $bodyBasedCenter"),
                    ],
                  ),
                );
              },
            ));
      },
    );
  }
}

【讨论】：

MediaQuery 正是我想要的。我只需要小部件的中心而不是屏幕的中心，所以我使用了final Size windowSize = MediaQuery.of(context).size;
第一个代码 sn-p 似乎不完整。
@PeterMortensen 第一部分的第二部分就是可以用来解决问题的部分，最后一部分是测试小部件，我已经包含了这两个部分

【解决方案2】：

如果您的目标是使小部件居中，则更简单的方法是使用 Align 小部件而不是 Positioned 小部件

Align(
  alignment: Alignment.center,
  child: Container(),
);

【讨论】：

【解决方案3】：

这是 LayoutBuilder 的示例实现

Scaffold(
  appBar: AppBar(title: Text("Center Coords")),
  body: LayoutBuilder(builder: (context, BoxConstraints constraints) =>
      Center(child:
        Column(
          children: [
            Text("center width: ${constraints.maxWidth/2}"),
            Text("center height: ${constraints.maxHeight/2}"),
          ],
        ),
      ),
    ),
  );

【讨论】：