flutter - 如何在颤动中将孩子定位在堆栈中？

Question

快速问题..如果我有一个包含 2Positioned个子小部件的堆栈，其中一个包含CircleAvatar小部件，另一个是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(...),
    ),
  ],
),

这回答了你的问题了吗？