如何根据内部定位的元素扩展 Stack Widget？

Question

我有一个 Stack And A text widget in a row widget，如下图所示。我怎样才能确保当我在堆栈中添加一个项目时，它会相应地扩展而不是中断？

这是我的代码

 Widget build(BuildContext context) {
    return Row(children: [
      Stack(
        fit: StackFit.expand,
        children: [
          
          Positioned(
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            left: 14,
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
          Positioned(
            left: 28,
            child: Image(
              image: AssetImage('assets/images/profile.jpg'),
              width: 28,
              height: 28,
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
      Expanded(child: Text("4 people"))
    ]);
  }

我收到这个错误

The following RenderObject was being processed when the exception was fired: RenderStack#1dfc2 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: Stack ← Row ← TaggedPeople ← Column ← Expanded ← Row ← Column ← DecoratedBox ← Container ←
    Padding ← _BodyBuilder ← MediaQuery ← ⋯
  parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  alignment: AlignmentDirectional.topStart
  textDirection:
...

Answer 1

这可能更接近您的想法。

Widget build(BuildContext context) {
    return Row(
      children: [
        Stack(
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 14),
              child: Container(
                width: 100,
                height: 100,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.blue,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 28),
              child: Container(
                width: 100,
                height: 100,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.pink,
                ),
              ),
            ),
          ],
        ),
        Text("4 people"),
      ],
    );
  }

使用 Padding 而不是 Positioned 来偏移小部件。 Stack 只会获取所需的 space，您不会收到任何错误。

如何根据内部定位的元素扩展 Stack Widget？

How do I expand a Stack Widget depending on positioned elements inside?

user-interface

android

dart

flutter