如何在颤动中将孩子定位在堆栈中？答案

【问题标题】：How to position children in stack in flutter?如何在颤动中将孩子定位在堆栈中？
【发布时间】：2021-07-01 07:28:54
【问题描述】：

快速问题.. 如果我有一个堆栈包含 2 个 Positioned 子小部件，其中一个包含 CircleAvatar 小部件，另一个是 Column 小部件，其中包含两个 InkWell 小部件，所以当我添加位置 @ 987654327@ 例如整个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': 不正确。

【问题讨论】：

标签： flutter dart stack flutter-positioned

【解决方案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(...),
    ),
  ],
),

这能回答你的问题吗？

【讨论】：