如何自动设置没有appbar高度的TabBarView

Question

我想制作没有 appbar 的 tabbar，它完成了，但有一件事搞砸了，它是 TabBarView 的高度我希望高度跟随选项卡内容但它导致错误。我已经尝试使用 Expanded，但无法正常工作。

如果你有空请帮忙:)我把我的完整代码放在我的仓库里 https://github.com/ccprogrammer/movies-app

这里是图片

这是我的构建代码

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Const.colorPrimary,
      body: ListView(
        children: [
          _buildHeaders(),
          _buildTitle(),
          _buildTabBar(),
        ],
      ),
    );
  }

这是我的标签栏代码

Widget _buildTabBar() {
    return Column(
      children: [
        Container(
          height: 48.h,
          margin: EdgeInsets.fromLTRB(18.w, 50.h, 18.w, 0),
          padding: EdgeInsets.fromLTRB(4.w, 4.h, 4.w, 4.h),
          decoration: BoxDecoration(
            border: Border.all(color: Const.colorIndicatorBorder),
            borderRadius: BorderRadius.circular(50.r),
          ),
          child: TabBar(
            controller: _tabBarController,
            indicator: ShapeDecoration(
              shape: StadiumBorder(),
              color: Const.colorIndicator,
            ),
            labelStyle: Const.textPrimary.copyWith(fontSize: 14.sp),
            tabs: [
              Tab(text: 'Detail'),
              Tab(text: 'Reviews'),
              Tab(text: 'Showtime'),
            ],
          ),
        ),
        Container(
          height: MediaQuery.of(context).size.height * 1.4,
          child: TabBarView(
            controller: _tabBarController,
            children: [
              DetailsTab(),
              DetailsTab(),
              DetailsTab(),
            ],
          ),
        ),
      ],
    );
  }

这是标签代码

 @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 32.h, 0, 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSynopsis(),
          _buildCast(),
          _buildPhotos(),
          _buildVideos(),
          _buildBlogs(),
        ],
      ),
    );
  }

Answer 1

您可以在 Tab 小部件中设置 height 参数：

Tab(text: 'Detail', height: 150,),

更新：这是我的自定义 tabBar 小部件：

class AppTabbedPage extends StatefulWidget {
final List<Object> pages;
final List<Tab> myTabs;

const AppTabbedPage({Key? key, required this.pages, required this.myTabs})
    : super(key: key);

@override
_AppTabbedPageState createState() => _AppTabbedPageState();
}

  class _AppTabbedPageState extends State<AppTabbedPage>
      with SingleTickerProviderStateMixin {
    late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(vsync: this, length: widget.myTabs.length);
}

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        color: Colors.white,
        child: TabBar(
          labelStyle: AppStyles.subTitle16Style,
          isScrollable: true,
          labelColor: AppColors.darkBlue,
          controller: _tabController,
          tabs: widget.myTabs,
          unselectedLabelColor: AppColors.darkGrey,
          indicatorColor: AppColors.darkBlue,
        ),
      ),
      Expanded(
        child: TabBarView(
          controller: _tabController,
          children: widget.pages.map((page) {
            return page as Widget;
          }).toList(),
        ),
      ),
    ],
  );
}


}

Answer 2

我找到的实现 Tabbar 的最佳方式之一。我总是使用它并实施超过 10 个应用程序。

如何自动设置没有appbar高度的TabBarView

How to set TabBarView without appbar height automatically

dart

flutter