Flutter：响应式定位在堆栈中

Question

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

使用 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实现这样的逻辑，我找不到任何可靠的例子。

Answer 1

使用LayoutBuilder。您可以使用它获得 parent 的约束。所以，例如：

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：响应式定位在堆栈中

Flutter: responsive Positioned in Stack

responsive-design

flutter

flutter-layout

flutter-positioned