我使用了 3 个由堆栈封装的容器来获得类似这样的布局，现在我想让页面能够滚动？

Question

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

 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),
                        )
                      ],
                    ),
                  )),
            ],
          )));
});

}

错误如下：

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.

Answer 1

这个怎么样？

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),
                      )
                    ],
                  ),
                ),
              ],
            )),
      ),

我使用了 3 个由堆栈封装的容器来获得类似这样的布局，现在我想让页面能够滚动？

I used 3 containers encapsulated by a stack to get layout something similar like this, now I want to make the page scroll able?

flutter

flutter-layout

flutter-animation