Question

我有一个带有两个屏幕的Flutter应用程序。屏幕1：带有BottomNavigationBar的StatefulWidget。我将其用作“主”屏幕，并且要在其中加载不同的小部件，具体取决于单击了BottomNavigationBar中的哪个按钮（例如Screen2）。

Screen2：垂直列出多个TextFields和Buttons（均在SingleScrollView内部）。不幸的是，ScrollView没有滚动。

Screen1：

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

Screen2：

@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()
           )
          ]
        )

最有可能停止滚动。

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

1 个答案: