如何在 flutter 中将子元素放置在 Stack 中？

Question

如果我有一个

Stack

包含 2 个

Positioned

子小部件，其中一个包含

CircleAvatar

小部件，另一个是

Column

小部件。

Column

小部件包含两个

InkWell

小部件，但是当我添加位置（例如“left：10，”）时，小部件

CircleAvatar

和

Column

消失了，我不明白为什么 代码如下：

Stack(
  overflow: Overflow.visible,
  children: [
    Positioned(
      right: 100,
      child: CircleAvatar(
        maxRadius: 75,
        backgroundColor: Colors.white,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              balance.toString(),
              style: TextStyle(
                fontSize: 23,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
            Text(
              'EGP',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
                color: Color(0xffa80f14),
              ),
            )
          ],
        ),
      ),
    ),
    Positioned(
      // left:10,
      child: Column(
        children: [
          SizedBox(
            height: 18,
          ),
          InkWell(
            onTap: () {
              //Navigator.popAndPushNamed(context, 'Recharge');
            },
            child: Container(
              width: 170,
              height: 50,
              decoration: BoxDecoration(
                color: Color(0xffa80f14),
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white,
                    offset: Offset(0, 1),
                    spreadRadius: -2,
                    blurRadius: 6,
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  "Recharge",
                  style: TextStyle(
                    color: Color(0xFFFFFFFF),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          InkWell(
            onTap: () {
              //Navigator.pushNamed(context, 'MyTickets');
            },
            child: Container(
              width: 170,
              height: 50,
              decoration: BoxDecoration(
                color: Color(0xffa80f14),
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white,
                    offset: Offset(0, 1),
                    spreadRadius: -2,
                    blurRadius: 6,
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  "My Tickets",
                  style: TextStyle(
                    color: Color(0xFFFFFFFF),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ],
),

视觉上：

因此，如果我取消注释 "left:10,"

Stack

的内容就会消失并出现此错误

在performLayout()期间抛出以下断言： 'package:flutter/src/rendering/stack.dart': 断言失败：第 588 行 pos 12：“size.isFinite”：不正确。

Answer 1

如果您希望 CircleAvatar 位于 Column 前面，则需要将其放在传递给

Stack.children

的列表中的最后一个位置。

Stack(
  overflow: Overflow.visible,
  children: [
    Positioned(
      left: 10,
      child: Column(
        children: [...],
      ),
    ),
    // --- mind the swapped position of CircleAvatar and Column ---
    Positioned(
      right: 100,
      child: CircleAvatar(...),
    ),
  ],
),

这能回答你的问题吗？