flutter 는 appbar 아래 옵션 전환 을 실현 합 니 다.

본 논문 의 사례 는 flutter 가 appbar 에서 옵션 카드 전환 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
TabBar,Tab,TabBarView 결합 실현

여기 서 이 루어 진 것 은 appbar 의 옵션 입 니 다.

import 'package:flutter/material.dart';

/**
 *    StatefulWidget
 *      StatefulWidget，   State   build        
 */
class TabBarAndTopTab extends StatefulWidget {
          
  TabBarAndTopTab();

  //       state
  @override
  _DemoStateWidgetState createState() => _DemoStateWidgetState();
}

/**
 *   State  ,        
 *   setState   ，         Widget       
 */
class _DemoStateWidgetState extends State<TabBarAndTopTab>
    with SingleTickerProviderStateMixin {
  _DemoStateWidgetState();

  List tabs = ["  ", "  ", "  ", "  "];

  //    /  Tab    
  //TabBar TabBarView       controller               。
  TabController tabController;

  @override
  void initState() {
    ///   ，               
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void didChangeDependencies() {
    /// initState    Called when a dependency of this [State] object changes.
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return buildTabScaffold();
  }

  //  “bottom”            tab   ，         ：
  Widget buildTabScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text('  '),
        //     
        bottom: buildTabBar(),
        //      
        centerTitle: true,
      ),
      //        page
      body: buildBodyView(),
    );
  }

  //     dispose ，       dispose ，    
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  buildBodyView() {
    //   TabBarView
    Widget tabBarBodyView = TabBarView(
      controller: tabController,
      //  Tab 
      children: tabs.map((e) {
        return Container(
          alignment: Alignment.center,
          child: Text(e, textScaleFactor: 1),
        );
      }).toList(),
    );
    return tabBarBodyView;
  }

  buildTabBar() {
    //   TabBar
    Widget tabBar = TabBar(
        //tabs           ，TabBar，     
        //   false tab      ， true tab        
        isScrollable: false,
        //  tab     
        labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        //  tab     
        labelColor: Colors.white,
        //  tab      
        unselectedLabelColor: Colors.white70,
        //     tab    ，CustomUnderlineTabIndicator
        //       ，     
        //indicatorColor        
        //indicatorWight        
        //indicatorPadding
        //indicatorSize             
        ///         ，TabBarIndicatorSize.label     ,TabBarIndicatorSize.tab   tab  
        indicatorSize: TabBarIndicatorSize.tab,
        //  Tab  
        controller: tabController,
        //  Tab  
        tabs: tabs.map((e) => Tab(text: e)).toList());

    return tabBar;
  }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.