Question

假设我想将一个小部件放在Stack内但是有一个堆栈位置的百分比而不是固定大小。如何在颤抖中做到这一点？

我希望使用0到1之间的浮点数来构造Positionned.fromRelativeRect构造函数。但似乎没有。

Align允许以百分比定位窗口小部件。但是heightFactor和widthFactor会更改Align大小而不是子大小。这不是我想要的。

Answer 1

使用 FractionalOffset & FractionallySizedBox 对比起来很简单

没有像 Positioned.fill 那样不必要的代码
没有像 Alignment 那样的额外计算

...
 Container(
   color: Colors.blue[200],
   alignment: FractionalOffset(0.7, 0.6),
   child: FractionallySizedBox(
     widthFactor: 0.1,
     heightFactor: 1/3,
     child: Container(color: Colors.red[900])
   ),
 ),
...

https://perlmonks.org/?node=References+quick+reference

Answer 2

您可以合并Positioned.fill和LayoutBuilder来实现此类结果。

    new Stack(
    children: <Widget>[
      new Positioned.fill(
        child: new LayoutBuilder(
          builder: (context, constraints) {
            return new Padding(
              padding: new EdgeInsets.only(top: constraints.biggest.height * .59, bottom: constraints.biggest.height * .31),
              child: new Text("toto", textAlign: TextAlign.center,),
            );
          },
        ),
      )
    ],
  ),

Answer 3

我不久前发现的一件事是，您可以在Alignment.lerp(x,y,z)函数的帮助下使用容器的对齐参数将容器放置在屏幕上

//the widget will be placed in the center of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 0), 

//the widget will be placed in the bottom of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 1), 

//the widget will be placed in the bottom quarter of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 0.5), 

//the widget will be placed in the top quarter of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, -0.5),

Answer 4

如果您想使用 LayoutBuilder 则不要使用 Positioned.fill，如下所示：您需要一个 LayoutBuilder，无需翻转每个元素并使用 Transform.translate 而不是 Padding。

  new LayoutBuilder(
    builder: (context, constraints) {
      return Stack(
        children: <Widget>[
          Transform.translate(
            offset: Offset(
              constraints.biggest.width * left,
              constraints.biggest.height * top),         
            child: new Text("toto", textAlign: TextAlign.center,),
          ),
          ...
        ],
      );
    }
  )

将小部件置于堆栈中，以百分比

4 个答案: