“A RenderFlex 在底部溢出 60 像素”颤动错误

Question

所以，我正在尝试制作像 this one 这样的页面，但现在我遇到了溢出错误：

我在网上看到有人用SingleChildScrollView解决了这个问题，但是上面的文章使用NestedScrollView来使用条子，所以我不知道该怎么做。

由于下面的错误，我还尝试将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: 属性，它告诉孩子应该消耗多少可用空间 如果这是可滚动的，只需将 Column 包装在 SingleChildScrollView

中