列内堆栈的抖动裁剪问题

Question

我有以下代码：

body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(color: AppColors.LIGHT_BLUE, height: 75),
              Positioned(
                  top: 50,
                  left: 0,
                  right: 0,
                  child: Center(
                      child: _buildAvatar(
                    Provider.of<AuthService>(context).getLoggedInUser(),
                  ))),
            ],
          ),
          Text(user.displayName, style: TextStyle(fontSize: 20))
        ],
      )

这会导致定位化身被裁剪：

我在这里做错了什么？像这样将Stack放在Column中是否不正确？或者，我是否需要将堆栈包装在其他东西中？

Answer 1

我认为原因是您将图片放入了定位小部件中。要将小部件放在小部件前面时，可以使用堆栈小部件。

所以我认为必须是这样

body: Column(
    children: <Widget>[
    Container(
      Stack(
        children: <Widget>[
          Image.network(url); // Image here
          Positioned(
              top: 50,
              left: 0,
              right: 0,
              child: Center(
                  child: //Some widget front image (may be Text)
            ),
        ],
      ),
      ),
      Text(user.displayName, style: TextStyle(fontSize: 20))
    ],
  )

我建议您在列中使用带有flex的Expended窗口小部件，以便将其分为多个部分，而部分的高度取决于flex。