Flutter：响应式定位在堆栈中

Posted 2023-02-23

【中文标题】Flutter：响应式定位在堆栈中

【英文标题】：Flutter: responsive Positioned in Stack

【发布时间】：2021-05-05 20:01:40

【问题描述】：

我想将图标放在父级边界之外并使其具有响应性（相对于父级的高度）。

使用Stack 和Positioned 小部件将图标放置在父边界之外没有问题。

但是让它响应有问题。

所以，如果容器高度减小，那么图标大小也应该减小。

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Color(0xff2577ff),
      width: 5.0,
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(15.0),
    ),
  ),
  width: 200.0,
  height: 80.0,
  child: Stack(
    clipBehavior: Clip.none,
    children: [
      Center(
        child: Text('Text'),
      ),
      Positioned( // <-- doesn't work
        top: -20.0, // <-- how to make it also relative to parent's height parameter?
        right: -20.0, // <-- how to make it also relative to parent's height parameter?
        child: FractionallySizedBox( // <-- doesn't work
          heightFactor: 0.5,
          child: Image.network('https://i.stack.imgur.com/dOkkG.png'),
        )
      )
    ],
  ),
)

我尝试制作一些样本，但没有成功。我真的不知道如何用 Flutter 实现这样的逻辑，我找不到任何可靠的例子。

【参考方案1】：

使用LayoutBuilder。您可以使用它来获取父级的约束。所以，例如：

Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: Color(0xff2577ff),
            width: 5.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(15.0),
          ),
        ),
        width: 200.0,
        height: 160.0,
        child: LayoutBuilder(builder: (context, constraint) 
          return Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                // <-- doesn't work
                top: -(constraint.maxHeight /
                    4), // relative to parent's height
                right: -(constraint.maxHeight /
                    4), // relative to parent's height
                child: Container(
                    height: constraint.maxHeight / 2, // relative to parent's height
                    width: constraint.maxHeight / 2, // relative to parent's height
                    child:
                        Image.network('https://i.stack.imgur.com/dOkkG.png')),
              ),
              Container(
                child: Center(
                  child: Text('Text'),
                ),
              )
            ],
          );
        ));

【讨论】：

非常感谢，它解决了这个问题。但是，如果 Flutter 在核心中添加类似 FractionallyPositioned 的小部件会很好。