通过使用列内的堆栈,底部被无限像素溢出

时间:2020-10-16 11:19:36

标签: flutter dart

我正在使用堆栈小部件在屏幕内显示动画。我只使用了70%的屏幕,其余的则不用。我想在那里显示其他内容。当我将堆栈窗口小部件包装在列中时,出现错误:无限像素底部溢出

我尝试使用Container和SizedBox添加自定义高度。还尝试使用SingleChildScrollView。还是一样的错误。

代码:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: whiteColor,
      body: Column(
        children: [
          Stack(
            children: <Widget>[
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.72,
                child: FlareActor(
                  'assets/videos/stars.flr',
                  alignment: Alignment.center,
                  fit: BoxFit.cover,
                  animation: 'Blink',
                  controller: _controller,
                ),
              ),
              Container(
                child: Transform.scale(
                  scale: 0.6,
                  child: FlareActor(
                    'assets/videos/talking-earth.flr',
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                    animation: 'activated',
                    controller: _controller,
                  ),
                ),
              ),

              Positioned(
                left: MediaQuery.of(context).size.width / 3.8,
                top: MediaQuery.of(context).size.width / 10,
                child: Text(
                  "Published",
                  style: GoogleFonts.ptSansNarrow(
                      color: whiteColor,
                      fontSize: ScreenUtil().setSp(50),
                      fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
          Text("Test"),
        ],
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

您需要先使用“容器”包装堆栈,并设置预定义的高度。这是因为堆栈大小取决于其父堆栈。

这是Stack上的官方文档:https://api.flutter.dev/flutter/widgets/Stack-class.html