android - Flutter - SingleScrollView 不在堆栈/列内滚动

Question

我有一个带有两个屏幕的 flutter 应用程序。Screen1:带 BottomNavigationBar 的 StatefulWidget。我将其用作我的“主”屏幕，并且我想在其中加载不同的小部件，具体取决于单击 BottomNavigationBar 中的哪个按钮(例如 Screen2)。

屏幕 2:多个 TextFields 和 Buttons 垂直列出(全部在 SingleScrollView 内)。不幸的是，ScrollView 没有滚动。

屏幕 1:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: new Stack(
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    stops: [0,0.4,1],
                    colors: [
                      Color(0xFF0A9B8A),
                      Color(0xFF0A9B8A),
                      Color(0xFF6FA7A1),
                    ]
                )
            ),
          ),
          new Column(
            children: <Widget>[
              new Container(
                alignment: Alignment.topCenter,
                padding: new EdgeInsets.only(top: 35, left: 50, right: 50),
                child: Image.asset('assets/images/123.png', fit: BoxFit.cover, height: 30.0,),
              ),
              _pages[_curIndex],
            ],
          )
        ],
      ),

屏幕 2:

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: new Column(
        children: <Widget>[
          Padding(padding: EdgeInsets.only(top: 75)),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                  child: Column(
                    children: <Widget>[
                      Image.asset("assets/images/abc.png", height: 100),
                      Text("Bild auswählen", style: TextStyle(color: Colors.white, fontSize: 18))
                    ],
                  )
              )
            ],
          ),
          Padding(padding: EdgeInsets.only(top: 40, left: 40, right: 40),
            child: TextField(
              textAlign: TextAlign.center,
              cursorColor: Colors.grey,
              decoration: new InputDecoration(
                enabledBorder: new UnderlineInputBorder(
                  borderSide: new BorderSide(
                      color: Colors.white
                  ),
                ),
                focusedBorder: new UnderlineInputBorder(
                  borderSide: new BorderSide(
                      color: Colors.white
                  ),
                ),
                hintText: 'Titel',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20, left: 40, right: 40),
            child: TextField(
              textAlign: TextAlign.center,
              cursorColor: Colors.grey,
              decoration: new InputDecoration(
                enabledBorder: new UnderlineInputBorder(
                  borderSide: new BorderSide(
                      color: Colors.white
                  ),
                ),
                focusedBorder: new UnderlineInputBorder(
                  borderSide: new BorderSide(
                      color: Colors.white
                  ),
                ),
                hintText: 'Beschreibung',
              ),
            ),
          ),

此屏幕仅由多个不同的 TextField 和 Button 组成。我没有在这里全部列出它们，因为我认为它们对于我的问题来说是不必要的。

所以我在 Screen2 中的 SingleScrollView 没有滚动，而且它对于我的屏幕来说太大了。我也收到以下错误:

I/flutter (21813): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (21813): The following message was thrown during layout:
I/flutter (21813): A RenderFlex overflowed by 61 pixels on the bottom.
I/flutter (21813): 
I/flutter (21813): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (21813): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (21813): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (21813): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (21813): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (21813): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (21813): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (21813): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (21813): like a ListView.
I/flutter (21813): The specific RenderFlex in question is:
I/flutter (21813):   RenderFlex#b781d relayoutBoundary=up2 OVERFLOWING
I/flutter (21813):   creator: Column ← Stack ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
I/flutter (21813):   AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#53b39 ink
I/flutter (21813):   renderer] ← NotificationListener<LayoutChangedNotification> ← PhysicalModel ←
I/flutter (21813):   AnimatedPhysicalModel ← ⋯

Answer 1

您应该使用 Expanded 包装您的 scrollView 小部件，这将使其大​​小完全适合屏幕的其余部分。在您的专栏中:

Column(
   children: Widget[
        child1,
        child2,
        Expanded(
        child: ScrollViewWidget()
           )
          ]
        )

这是最有可能停止滚动的原因。