时间戳

首页 > 解决方案 > 如何将“定位”置于特定坐标的中心？

flutter - 如何将“定位”置于特定坐标的中心？

问题描述

我想Positioned用来自由地将小部件放在Stack. 默认情况下，它似乎Positioned只提供使用left、right、top或放置其子级bottom。这具有将边界之一与给定坐标对齐的行为。我想要实现的是将孩子放在某个x/y坐标上，但以它为中心。

一个例子：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Some App",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: Stack(children: [
          Positioned(
            left: 100,
            top: 100,
            child: SomeChild(text: "Some child"),
          ),
          Positioned(
            left: 100,
            top: 100,
            child: Container(width: 5, height: 5, color: Colors.red.shade900),
          ),
          Positioned(
            left: 100,
            top: 150,
            child: SomeChild(text: "Some child with longer text"),
          ),
          Positioned(
            left: 100,
            top: 150,
            child: Container(width: 5, height: 5, color: Colors.red.shade900),
          ),
        ]),
      ),
    );
  }
}

class SomeChild extends StatelessWidget {
  final String text;
  const SomeChild({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

结果是：

在此处输入图像描述

Dartpad 上的示例

基本上我希望孩子们以小型调试小玩意为中心。

注意：我将SomeChild其用作我既不知道也不明确控制的任意孩子的占位符。

天真的尝试解决使用 aCenter包裹孩子的问题，但这没有效果。我还尝试将它们移动Positioned到孩子身上，在孩子本身内部进行一些手动尺寸确定，这样他们就可以将它们的尺寸top和right坐标移动一半。但这不仅很尴尬，而且必须为每个孩子手动实现，我也遇到了让它工作的问题，因为Stack抱怨它的孩子不再是Positioned/ Aligned/ Container。

有没有一种优雅的方法可以使孩子的中心居中Positioned？

我认为这个问题与那个问题不同，因为目标是让孩子Stack自己居中，而不是某个坐标。

标签： flutter

解决方案

如果我理解正确，您需要FractionalTranslation

在此处输入图像描述

import "package:flutter/material.dart";

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Some App",
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: Stack(children: [
          Positioned(
            left: 100,
            top: 100,
            child: FractionalTranslation(
              translation: Offset(-0.5, -0.5),
              child: SomeChild(text: "Some child"),
            ),
          ),
          Positioned(
            left: 100,
            top: 100,
            child: Container(width: 5, height: 5, color: Colors.red.shade900),
          ),
          Positioned(
            left: 100,
            top: 150,
            child: FractionalTranslation(
              translation: Offset(-0.5, -0.5),
              child: SomeChild(text: "Some child with longer text"),
            ),
          ),
          Positioned(
            left: 100,
            top: 150,
            child: Container(width: 5, height: 5, color: Colors.red.shade900),
          ),
        ]),
      ),
    );
  }
}

class SomeChild extends StatelessWidget {
  final String text;

  const SomeChild({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

推荐阅读