颤动时出现"A RenderFlex overflowed by 60 pixels on the bottom“错误

Question

所以，我试着创建一个像this one这样的页面，但是现在我得到了一个关于overflow的错误：

​

​

我在网上看到一些人使用SingleChildScrollView修复了这个问题，但上面的文章使用NestedScrollView来使用slivers，所以我不确定该怎么做。

由于下面的错误，我还尝试将Extended放在所有地方，但都不起作用。

​

代码是这样的：(完整的代码可以在my github上找到)

return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Color(0x00ffffff),
        title: Text('Account'),
      ),
      body: DefaultTabController(
        length: 2,
        child: RefreshIndicator(
          onRefresh: getArtistImage,
          key: _refreshIndicatorKey,
          child: NestedScrollView(
            headerSliverBuilder: (context, _) {
              return [
                SliverList(
                  delegate: SliverChildListDelegate([
                    Column(
                      children: <Widget>[
                        !loaded
                            ? SafeArea(
                          top: true,
                          child: Column(
                            children: <Widget>[
                              Container(
                                child: LinearProgressIndicator(
                                  backgroundColor: whiteLoadingBackground,
                                  valueColor: AlwaysStoppedAnimation(
                                      Colors.white60),
                                ),
                                height: 3,
                              ),
                              UserProfile(widget.user, recentTracks)
                            ],
                          ),
                        )
                            : Container(
                            child: Stack(
                              children: <Widget>[
                                Container(
                                  height: MediaQuery
                                      .of(context)
                                      .size
                                      .width,
                                  decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        colors: [
                                          Color(0x56000000),
                                          Color(0x88000000),
                                          Color(0xff000000)
                                        ],
                                        begin: FractionalOffset.topCenter,
                                        end: AlignmentDirectional.bottomCenter,
                                      )),
                                ),
                                PageModel(
                                    title: 'My Account',
                                    children: UserProfile(
                                        widget.user, recentTracks))
                              ],
                            ),
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(artistImage),
                                  alignment: Alignment.topCenter,
                                  fit: BoxFit.fitWidth),
                            ))
                      ],
                    ),
                  ]),
                )
              ];
            },
            physics:
            AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
            body: Column(
              children: <Widget>[
                TabBar(
                  tabs: <Widget>[
                    Tab(
                      text: 'Last Scrobbles',
                      icon: Icon(Icons.queue_music),
                    ),
                    Tab(
                      text: 'Charts',
                      icon: Icon(Icons.show_chart),
                    )
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    children: <Widget>[
                      recentTracks != null
                          ? Container(
                        child: UserBottomInformation(
                            widget.user, recentTracks),
                      )
                          : Text('ue'),
                      Text('pag 2')
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );

Answer 1

在显示TabBar和TabBarView的列中，您只需要用Expanded包装TabBarView，而您应该做的是用Expanded包装这两个孩子，并为每个孩子指定一个弹性系数(弹性系数将决定每个孩子将占用多少空间)：

 Column(
      children: <Widget>[
        Expanded(
          flex: ,//some value here
          child: TabBar(
            tabs: <Widget>[
              Tab(
                text: 'Last Scrobbles',
                icon: Icon(Icons.queue_music),
              ),
              Tab(
                text: 'Charts',
                icon: Icon(Icons.show_chart),
              )
            ],
          ),
        ),
        Expanded(
          flex: ,//some value here
          child: TabBarView(
            children: <Widget>[
              recentTracks != null
                  ? Container(
                child: UserBottomInformation(
                    widget.user, recentTracks),
              )
                  : Text('ue'),
              Text('pag 2')
            ],
          ),
        )
      ],
    );

Answer 2

Column(
 children:<Widget>[
  Flexible(child:put your child here),
  Flexible(child:put your child here),
  Flexible(child:put your child here),
  ..,
 ]
)

考虑使用Flexible小部件的flex:属性，该属性告诉子级应该占用可用空间的哪一部分(如果这是可滚动的)，只需将列包装在SingleChildScrollView中