如何根據內部定位的元素擴展StackWidget？

我在一行小部件中有一個 Stack And A 文本小部件，如下圖所示。我怎樣才能確保當我在堆疊中添加一個專案時，它會相應地擴展而不是破壞？

這是我的代碼

 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:
...

uj5u.com熱心網友回復：

這可能更接近您的想法。

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只需要所需的空間，你不會得到任何錯誤。

uj5u.com熱心網友回復：

將堆疊小部件包裝在擴展小部件中。這將解決你的問題，

Row(
 children:[
 Expanded(child: Stack()),
    Expanded(child: Text()),
         ]
      ),

標籤：

上一篇：在每次活動啟動和結果時執行代碼

下一篇：使用OpenCV將多個影像調整為正方形大小而不進行填充