Flutter 中一个屏幕中的两个 TabBar

Question

我在一个屏幕上有两个 TabBars，当它们的 TabBarViews 显示在屏幕的一半时（第一个标签栏的视图显示屏幕的上半部分，seconf 标签栏视图显示屏幕的下半部分）但我想显示一个 TabBarView全屏显示。我将如何实现这一目标？

这是 TabBar 和 TabBarViews 所在屏幕的代码：

import 'package:betting_app/ui/betslip/betslip_active.dart';
import 'package:betting_app/ui/betslip/betslip_settled.dart';
import 'package:betting_app/ui/betslip/parlay_tab_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../core/constants/colors.dart';
import 'betslip_bottomsheet.dart';


class BetSlipTabBarView extends StatefulWidget {
  const BetSlipTabBarView({Key? key}) : super(key: key);

  @override
  State<BetSlipTabBarView> createState() => _BetSlipTabBarViewState();
}

class _BetSlipTabBarViewState extends State<BetSlipTabBarView> with TickerProviderStateMixin {

  final List<Tab> myTabs = const <Tab>[
    Tab(
      child: Center(
        child: Text(
          'Working', style: TextStyle(fontWeight: FontWeight.bold),

        ),
      ),
    ),
    Tab(
      child: Center(
        child: Text(
          'Active', style: TextStyle(fontWeight: FontWeight.bold)

        ),
      ),
    ),

    Tab(
      child: Center(
        child: Text(
          'Settled',
          style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ];

  final List<Tab> mySecondTabs = <Tab>[
    Tab(
      child: Center(
        child: Text(
          'Standard', style: TextStyle(fontWeight: FontWeight.bold),

        ),
      ),
    ),
    Tab(
      child: Center(
        child: Text(
            'Parlay', style: TextStyle(fontWeight: FontWeight.bold)

        ),
      ),
    ),

    Tab(
      child: Center(
        child: Text(
          'Teaser',
          style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ];

  late TabController _tabController;
  late TabController _secondTabbarController;
  int _selectedIndex = 0;
  int _otherSelectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
        vsync: this, length: myTabs.length, initialIndex: _selectedIndex);
            // Second TabBar Controller
    _secondTabbarController = TabController(
        vsync: this, length: mySecondTabs.length, initialIndex: _otherSelectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(

          children: [
            SizedBox(height: 5,),
            Row(
                children: [

                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 2,
                          blurRadius: 5,
                          offset: const Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    height: MediaQuery.of(context).size.height * 0.06,
                    width: MediaQuery.of(context).size.width,
                    child: Row(

                        children:  [

                          const Padding(
                            padding: EdgeInsets.only(left: 13),
                            child: AspectRatio(
                              aspectRatio: 4 / 7,
                              child: CircleAvatar(
                                backgroundColor: AppColors.blueColor,
                                child: Text(
                                  "2",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ),
                          ),
                          const Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Text(
                              "Betslip",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, color: AppColors.blueColor),
                            ),
                          ),

                          Padding(
                            padding: EdgeInsets.only(left: 200.0),
                            child: GestureDetector(

                              child: const Text("Close", style: TextStyle(color: AppColors.blueColor),),onTap: (){},),
                          )
                        ]),
                  ),
                ]),

            Container(

              margin: const EdgeInsets.only(top: 50),
              height: MediaQuery.of(context).size.height * 0.04,
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                color: Colors.grey.shade300,
                border: Border.all(width: .2, color: Colors.grey),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: const Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              child: Center(
                child: TabBar(
                  onTap: (int index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  controller: _tabController,
                  tabs: myTabs,
                  isScrollable: true,
                  labelColor: AppColors.black,
                  unselectedLabelColor: AppColors.tabBarColorUnselected,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorColor: Colors.transparent,

                ),
              ),
            ),

            SizedBox(height: 20,),

            Padding(
              padding: const EdgeInsets.only(right: 100.0),
              child: TabBar(
                onTap: (int index) {
                  setState(() {
                    _otherSelectedIndex = index;
                  });
                },
                controller: _secondTabbarController,
                tabs: mySecondTabs,
                isScrollable: true,
                labelColor: AppColors.black,
                unselectedLabelColor: AppColors.tabBarColorUnselected,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: Colors.transparent,

              ),
            ),

            ///////// Tab Bar View





             Expanded(
               child: TabBarView(
                  controller: _tabController,
                  children: const [
                    BetSlipBottomSheet(),
                    BetSlipActive(),
                    BetSlipSettled(),

                  ],
                ),
             ),


            Expanded(

                child: TabBarView(
                  controller: _secondTabbarController,
                  children:  [


                    Text(""),
                    ParlayTabView(),
                    SizedBox(),


                  ],
                ),

            ),

    ]),

        ),
      );
  }
}

Answer 1

试试下面的代码希望对你有帮助，上半部分是第一个标签栏输出，下半部分是第二个标签栏输出。

参考我的答案here tabbar

参考Tabbar官方文档

class TwoTabBar extends StatefulWidget {
  const TwoTabBar({Key key}) : super(key: key);

  @override
  State<TwoTabBar> createState() => _TwoTabBarState();
}

class _TwoTabBarState extends State<TwoTabBar> with TickerProviderStateMixin {
  TabController _tabController;
  TabController _tabController2;

  @override
  void initState() {
    _tabController = new TabController(length: 4, vsync: this);
    _tabController2 = new TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Widget'),
        bottom: TabBar(
          controller: _tabController2,
          tabs: const <Widget>[
            Tab(
              icon: Icon(Icons.cloud_outlined),
            ),
            Tab(
              icon: Icon(Icons.beach_access_sharp),
            ),
            Tab(
              icon: Icon(Icons.brightness_5_sharp),
            ),
          ],
        ),
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  icon: Icon(Icons.person),
                ),
                Tab(
                  icon: Icon(
                    Icons.add,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.deck,
                  ),
                ),
                Tab(
                  icon: Icon(
                    Icons.child_care,
                  ),
                ),
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController2,
                children: const <Widget>[
                  Center(
                    child: Text("It's cloudy here"),
                  ),
                  Center(
                    child: Text("It's rainy here"),
                  ),
                  Center(
                    child: Text("It's sunny here"),
                  ),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                children: [
                  Center(
                    child: Text(
                      'Screen 1',
                    ),
       

       ),
              Center(
                child: Text(
                  'Screen 2',
                ),
              ),
              Center(
                child: Text(
                  'Screen 3',
                ),
              ),
              Center(
                child: Text(
                  'Screen 4',
                ),
              ),
            ],
            controller: _tabController,
          ),
        ),
      ],
    ),
  ),
);

} }

结果屏幕->

Answer 2

根据 Flutter 3.10，Flutter 3.10 的新功能

Flutter 现在允许您创建第二层选项卡式内容。要区分这第二个 TabBar，请使用 TabBar.secondary.

这是它的文档TabBar.secondary