我如何在 SingleChildscrollView 中使用 TabBar

Question

目前我有这个结构SingleChildScrollView -> Column ，我的 TabBar 在列内

这是我的脚本

SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TabBar(
                controller: _tabController,
                labelColor: Colors.black,
                unselectedLabelColor: Colors.black,
                indicatorColor: CustomColors.mainRed,
                tabs: [
                  Tab(text: 'Deskripsi Produk'),
                  Tab(text: 'Daftar isi'),
                ],
              ),
              TabBarView(
                controller: _tabController,
                children: <Widget>[
                  Html(
                    data: widget.product.description!,
                    style: {
                      // tables will have the below background color
                      "p": Style(padding: EdgeInsets.all(2.w)),
                    },
                  ),
                  GetBuilder<ProductDetailController>(
                    init: ProductDetailController(),
                    builder: (data) => ListView.builder(
                      shrinkWrap: true,
                      controller: scrollController,
                      padding: EdgeInsets.all(5.w),
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: data.videos.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          dense: true,
                          leading: Icon(
                            Icons.check,
                            color: CustomColors.mainRed,
                            size: 12.sp,
                          ),
                          title: Text(
                            data.videos[index].video!.title!.toString(),
                            style: TextStyle(
                              fontSize: 12.sp,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),

我收到了这个错误

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match
their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
vertical space in which to expand.

我没有设置高度，因为我的标签 1 和我的标签 2 将具有动态内容（因此，高度无法固定）并且在标签栏下方我也想添加其他内容。 我该如何解决这个问题？

Answer 1

试试这个，记得使用TabController和PageController 。

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children:[ 
   DefaultTabController(
    length: 2,
    initialIndex: 0,
    child: Column(
      children: [
        TabBar(
            controller: _tabController,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.black,
            indicatorColor: CustomColors.mainRed,
            tabs: [
              Tab(text: 'Deskripsi Produk'),
              Tab(text: 'Daftar isi'),
            ],
        ),
        ExpandablePageView(
          onScoll: (index) {
            controller.animateTo(index);
          },
          controller: _pageController,
          children: [
              Html(
                data: widget.product.description!,
                style: {
                  // tables will have the below background color
                  "p": Style(padding: EdgeInsets.all(2.w)),
                },
              ),
              GetBuilder<ProductDetailController>(
                init: ProductDetailController(),
                builder: (data) => ListView.builder(
                  shrinkWrap: true,
                  controller: scrollController,
                  padding: EdgeInsets.all(5.w),
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: data.videos.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      dense: true,
                      leading: Icon(
                        Icons.check,
                        color: CustomColors.mainRed,
                        size: 12.sp,
                      ),
                      title: Text(
                        data.videos[index].video!.title!.toString(),
                        style: TextStyle(
                          fontSize: 12.sp,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ],
      ),
     ),
   ],
 );