在可滚动列的内容之间插入 TabBarView/TabBar

Question

我正在尝试在页面中间添加一个带有 TabBarView 的 tabBar，选项卡的内容具有动态高度（某些选项卡比其他选项卡长），我尝试修改 该方法，但它最终使开始和最终内容固定在页面的顶部和底部，所以我使用了一个外部包AutoScaleTabBarView，它基本上做了我想要的，但有一个错误

在我构建 apk 并在手机上运行它之后，有时 TabBarView 的高度明显高于所需的高度，直到我更改选项卡一次。

这是错误的视频

Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            //  Some widgets above the Tabs
            Container(
              height: 500,
              color: Colors.red,
            ),
            DefaultTabController(
              initialIndex: 0,
              length: 3,
              child: Column(
                children: [
                  const TabBar(
                    labelPadding: EdgeInsets.symmetric(horizontal: 23),
                    isScrollable: true,
                    indicatorColor: Color.fromARGB(255, 227, 6, 19),
                    indicatorWeight: 4,
                    indicatorSize: TabBarIndicatorSize.label,
                    tabs: [
                      Tab(
                        child: Text("1"),
                      ),
                      Tab(
                        child: Text("2"),
                      ),
                      Tab(
                        child: Text("2"),
                      ),
                    ],
                  ),
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        AutoScaleTabBarView(children: [
                          Text(
                            "Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,",
                          ),
                          Text(
                              "Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,"),
                          Text(
                            "Some Text",
                          ),
                        ]),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            // More Widgets under the Tabs
            Container(
              height: 500,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );

提前致谢

Answer 1

我找到了使用 SliveList 和 CustomScrollView 的解决方案

    class Details extends StatelessWidget {
  Details({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: CustomScrollView(
          slivers: [
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  //Widgets above tabs
                  Container(
                    height: 500,
                    color: Colors.red,
                  ),
                  DefaultTabController(
                    initialIndex: 0,
                    length: 3,
                    child: Column(
                      children: [
                        const TabBar(
                          labelPadding: EdgeInsets.symmetric(horizontal: 23),
                          isScrollable: true,
                          indicatorColor: Color.fromARGB(255, 227, 6, 19),
                          indicatorWeight: 4,
                          indicatorSize: TabBarIndicatorSize.label,
                          tabs: [
                            Tab(
                              child: Text(
                                "1",
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                            Tab(
                              child: Text(
                                "1",
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                            Tab(
                              child: Text(
                                "1",
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                          ],
                        ),
                        Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              AutoScaleTabBarView(children: [
                                Text(
                                  "Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,",
                                ),
                                Text(
                                    "Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,"),
                                Text(
                                  "Some Text",
                                ),
                              ]),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  // More Widgets under the Tabs
                  Container(
                    height: 500,
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}