Flutter 视图的精准定位 —— Positioned

1. Flutter Positioned

Flutter Stack
Positioned widget 用于定位 Stack 的子 widget。

Positioned 仅用作 Stack 的直接(或后代)子部件。在 Positioned 到 Stack 的路径上，它只包含 StatelessWidget 或 StatefulWidget 小部件，不允许使用其他小部件(例如 RenderObjectWidget)。

Positioned的构造函数如下 -

const Positioned(
    {Key key,
    double left,
    double top,
    double right,
    double bottom,
    double width,
    double height,
    @required Widget child}
)

示例代码：

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
           left: 100,
          top: 70,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.green,
          ),
        )
      ],
    )
)

Positioned及其子对象的大小始终相同。运行上面示例代码，得到以下结果：

下面再来看一个示例：具有非空顶部和底部的 Positioned 会强制子小部件的高度发生变化以适应该约束。

示例代码：

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
          top: 100,
          bottom: 70,
          child: Container (
            width: 200,
            height: 30, // !!
            color: Colors.green,
          ),
        )
      ],
    )
)

运行上面示例代码，得到以下结果：

如果 left、right、width 三个参数都为 null，则 Stack.alignment 属性将用于水平定位子窗口小部件。同样，如果所有三个参数 top、bottom 和 height 都为 null，则 Stack.alignment 属性将用于垂直定位子窗口小部件。

2. Positioned.directional构造函数

Positioned.directional构造函数用于创建基于文本方向的 Positioned。

Positioned.directional构造函数

Positioned.directional(
  {Key key,
  @required TextDirection textDirection,
  double start,
  double top,
  double end,
  double bottom,
  double width,
  double height,
  @required Widget child}
)

textDirection 参数是必需的，并且不为 null。它接受值 TextDirection.ltr(从左到右)或 TextDirection.rtl(从右到左)。
如果 textDirection 为 TextDirection.ltr，则参数 (start, end) 将对应 (left, right)。否则 (start, end) 将对应 (right, left)。

3. Positioned.fill构造函数

Positioned.fill是一个构造函数，其参数：left、right、top 和 bottom 的默认值为 0。

Positioned.fill构造函数

const Positioned.fill(
  {Key key,
  double left: 0.0,
  double top: 0.0,
  double right: 0.0,
  double bottom: 0.0,
  @required Widget child}
)

4. Positioned.fromRect构造函数

Positioned.fromRect 使用 Rect 对象给定的值创建一个 Positioned 对象。

Positioned.fromRect构造函数 -

Positioned.fromRect(
  {Key key,
  Rect rect,
  @required Widget child}
)

5. Positioned.fromRelativeRect构造函数

Positioned.fromRelativeRect构造函数代码如下 -

Positioned.fromRelativeRect(
  {Key key,
  RelativeRect rect,
  @required Widget child}
)

参考链接：
https://www.yiibai.com/flutter/flutter-stack.html
https://juejin.cn/post/6844904056217944071