首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我用堆栈封装的3个容器来得到类似这样的布局,现在我想让页面可以滚动吗?

我用堆栈封装的3个容器来得到类似这样的布局,现在我想让页面可以滚动吗?
EN

Stack Overflow用户
提问于 2019-07-02 21:00:54
回答 1查看 200关注 0票数 2

每当我使用任何可滚动的小部件,比如单个子滚动视图时,它都会抛出renderflex溢出错误。在下面的代码中,我尝试使用布局构建器来获得滚动视图。任何其他建议,我如何才能获得滚动视图?我不想要任何动画,而滚动现在我想要appbar,我只想要正常的滚动选项。

代码语言:javascript
复制
 Widget build(BuildContext context) {
final article args = ModalRoute.of(context).settings.arguments;
return new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
  return SingleChildScrollView(
      child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.minHeight,
          ),
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.green,
              ),
              Container(
                height: 300.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                  image: AssetImage("images/image.jpg"),
                  fit: BoxFit.cover,
                )),
              ),
              Positioned(
                  left: 40.0,
                  right: 40.0,
                  top: 240.0,
                  bottom: 40.0,
                  child: Container(
                    height: 500.0,
                    width: 300.0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10.0),
                      color: Colors.pink,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          child: Text(
                            "Title",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontFamily: 'Roboto',
                              color: Colors.black,
                            ),
                          ),
                        ),
                        SizedBox(height: 100),
                        Text(
                          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                          style: TextStyle(
                              fontSize: 20.0, color: Colors.black),
                        )
                      ],
                    ),
                  )),
            ],
          )));
});

}

错误如下:

代码语言:javascript
复制
I/flutter ( 8759): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY

 ╞═════════════════════════════════════════════════════════
I/flutter ( 8759): The following message was thrown during layout:

I/flutter ( 8759): A RenderFlex overflowed by 134 pixels on the bottom.

I/flutter ( 8759): 

I/flutter ( 8759): The overflowing RenderFlex has an orientation of 
Axis.vertical.
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-02 21:35:27

这个怎么样?

代码语言:javascript
复制
Container(
        color: Colors.red,
        child: ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 500.0,
              maxWidth: 300.0
            ),
            child: Stack(
              children: <Widget>[
                SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: Text(
                          "Title",
                          style: TextStyle(
                            fontSize: 20.0,
                            fontFamily: 'Roboto',
                            color: Colors.black,
                          ),
                        ),
                      ),
                      SizedBox(height: 100),
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                        style: TextStyle(
                            fontSize: 20.0, color: Colors.black),
                      )
                    ],
                  ),
                ),
              ],
            )),
      ),
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56853087

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档