Flutter - 使包含 DefaultTabController 的页面可滚动

Question

我正在开发一个应用程序，我有一个页面，其中显示了一个数据块，在该页面下方显示了包含附加数据的 tabBars 和 TabBarView。我正在努力解决的问题是，如果我尝试用“SingleChildScrollView”包装小部件“DefaultTabController”，它会引发错误并且页面无法工作。

我需要找到一种方法在页面底部显示 tabBars 和 TabBarView 并使整个页面可滚动

我放代码：

在构建方法中，我在列内放置了 4 个小部件

• _showEventHeader 显示带有标题的单个图像
• _showUserAndEventData 显示纯文本
• _showTabs 显示选项卡标题
• _showTabsContent 显示选项卡的内容（图像和 cmets）

@override
  Widget build(BuildContext context) {
        return DefaultTabController(
        length: 2,
        child: Scaffold(
            backgroundColor: Theme.of(context).primaryColor,
            body: Column(
              children: [
                ..._showEventHeader(),
                Container(
                    padding: EdgeInsets.all(15),
                    child: _showUserAndEventData()),
                _showTabs(),
                _showTabsContent(),
              ],
            )

                
            ));
  }
  
  
  List<Widget> _showEventHeader() {
    return [
      SizedBox(
        height: 20,
      ),
      GestureDetector(
        onTap: () {
          if (Val.valStr(widget.evento.bannerUrl).isNotEmpty) {
            Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
              return FlypperFullImage(
                imgURL: widget.evento.bannerUrl,
              );
            }));
          }
        },
        child: Stack(
          alignment: Alignment.bottomRight,
          children: [
            FlypperCustomImageNetWork(
              imageURL: widget.evento.bannerUrl,
              height: 200,
              width: 200,
              showAsRectangle: true,
              fillWidth: true,
            ),
            Container(
              child: FlypperQrImage(
                qrData: widget.evento.code,
                size: 65,
              ),
            )
          ],
        ),
      ),
      SizedBox(
        height: 20,
      ),
      !_ticketsAvailable
          ? Text('$_noTicketAvailableMessage',
              style: Theme.of(context).textTheme.headline2)
          : SizedBox(
              height: 1,
            ),
      Card(
        color: Theme.of(context).primaryColor,
        elevation: 5,
        child: Padding(
          padding: const EdgeInsets.all(5),
          child: Text(
              Val.valStr(widget.evento.name).isNotEmpty
                  ? Val.valStr(widget.evento.name)
                  : 'Sin nombre',
              textAlign: TextAlign.justify,
              style: Theme.of(context)
                  .textTheme
                  .headline1 /*FlypperStyleHelper.eventTitle(context)*/),
        ),
      ),
      SizedBox(
        height: 10,
      ),
    ];
  }
  
  
  
  Widget _showUserAndEventData() {
    return SingleChildScrollView(
      child: Container(
        color: Theme.of(context).primaryColor,
        child: Column(
          children: [
            SizedBox(height: 10),
            Row(mainAxisAlignment: MainAxisAlignment.start, children: [
              this.user != null
                  ? /*FlypperCustomImageBase64(
                            imageBase64: this.user.profileImageUrl)*/
                  FlypperCustomImageNetWork(
                      imageURL: this.user.profileImageUrl,
                      keepImageCached: true,
                      height: 65,
                      width: 65,
                    )
                  : SizedBox(height: 1),
              SizedBox(
                height: 10,
              ),
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      this.user != null
                          ? this.user.userName.isEmpty
                              ? this.user.email
                              : this.user.userName
                          : '',
                      style: Theme.of(context).textTheme.headline1,
                      /* FlypperStyleHelper.eventUserData(context, 18),*/
                    ),
                    Text(
                        this.user != null
                            ? Val.valInt(this.user.followers).toString() +
                                ' seguidores'
                            : '',
                        style: Theme.of(context).textTheme.bodyText1
                        /*FlypperStyleHelper.eventUserData(context, 15),*/
                        )
                  ],
                ),
              )
            ]),
            _getEventDetailInfo(),
            SizedBox(
              height: 20,
            ),
            _showBuyButton(),
            SizedBox(
              height: 10,
            ),
            FlypperIconButton(
              icon: Icons.location_on,
              width: 150,
              handlerFunction: () => _openMapWithCalculatedRoute(context),
            ),
            Divider(
              color: Colors.grey,
              thickness: 2,
            )
          ],
        ),
      ),
    );
  }
  
  Widget _showTabs() {
    return TabBar(
      isScrollable: true,
      labelStyle: Theme.of(context).textTheme.headline2,
      tabs: [
        Tab(
          text: 'Fotos, videos...',
          /*icon: Icon(Icons.event, color: Theme.of(context).buttonColor)*/
        ),
        Tab(
          text: 'Comentarios',
          /*icon: Icon(Icons.attach_file, color: Theme.of(context).buttonColor),*/
        ),
      ],
    );
  }

  Widget _showTabsContent() {
    return Flexible(
      child: TabBarView(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  color: Theme.of(context).primaryColor,
                  child: Column(children: [_getDetailImage()]),
                ),
              ],
            ),
          ),
          Container(child: Text('Comments section')) //comentarios, pendiente

          // SingleChildScrollView(
          //   child: Container(
          //     color: Theme.of(context).primaryColor,
          //     child: Column(children: [_getDetailImage()]),
          //   ),
          // ),
          // Container(child: Text('Comments section')) //comentarios, pendiente
        ],
      ),
    );
  }

我还附上了截图，以便您更好地理解我在说什么

Answer 1

试试这个我有一个例子并编辑它一些值：-

标签栏(

isScrollable: true,

unselectedLabelColor: Colors.white.withOpacity(0.3),

indicatorColor：Colors.white，

tabs: [

       Tab(

       child: Text('Tab 1'),

       ),

       Tab(

       child: Text('Investment'),

       ),

       Tab(

       child: Text('Your Earning'),

       ),

]),

所有 Widget vale 都在列表视图中调用如下：-

_showEventHeader() {

返回新容器（

  height: 20,

  child: ListView(

    shrinkWrap: true,

    scrollDirection: Axis.vertical,

      Column(

        children: [])));}