Flutter(Widget)-顶部TabController

截屏2022-07-15 11.05.28.png

1.DefaultTabController  TabBarView actions centerTitle   TabController

截屏2022-07-14 22.25.32.png 截屏2022-07-14 22.28.01.png 截屏2022-07-14 22.28.51.png 截屏2022-07-14 22.28.51.png

import 'package:flutter/material.dart';
class TopNavigationBarPage extends StatefulWidget {
  @override
  _TopNavigationBarPageState createState() => _TopNavigationBarPageState();
}

class _TopNavigationBarPageState extends State<TopNavigationBarPage> {
  @override
  Widget build(BuildContext context) {
    return tabController1();
  }

  tabController1(){
    return DefaultTabController(length: 3, child: Scaffold(
      body: TabBarView(children: [
        Text('热门页面'),
        Text('推荐页面'),
        Text('推荐页面1')
      ]),
      appBar: AppBar(
        title: TabBar(
          tabs: [
            Tab(text: "热门",),
            Tab(text: "推荐",),
            Tab(text: "推荐",),
          ],
        ),
      ),
    ));
  }

  tabController(){
    return DefaultTabController(length: 2, child: Scaffold(
      body: TabBarView(children: [
        Text('热门页面'),
        Text('推荐页面')
      ]),
      appBar: AppBar(
        bottom: TabBar(
          tabs: [
            Tab(text: "热门",),
            Tab(text: "推荐",),
          ],
        ),
        leading: IconButton(
          icon: Icon(Icons.account_balance_rounded),
          onPressed: (){

          },
        ),
        centerTitle:true,
        title: Text('导航条'),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: (){

          }),
          IconButton(icon: Icon(Icons.settings), onPressed: (){

          }),
        ],
      ),
    ));
  }
}

import 'package:flutter/material.dart';

/// FileName zfl_top_TabController_page.dart
///
/// @Author zhangfanglin
/// @Date 7/14/22 9:41 PM
///
/// @Description TODO

class ZFLTabControllerPage extends StatefulWidget {
  @override
  _ZFLTabControllerPageState createState() => _ZFLTabControllerPageState();
}

class _ZFLTabControllerPageState extends State<ZFLTabControllerPage> with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: TabBar(
          isScrollable: true,
          indicatorColor: Colors.yellow,
          labelColor: Colors.yellow,
          unselectedLabelColor: Colors.white,
          controller: _tabController,
          indicatorSize: TabBarIndicatorSize.label,
          tabs: [
            Tab(text: '热销',),
            Tab(text: '推荐',),

            Tab(text: '热销',),
            Tab(text: '推荐',),

            Tab(text: '热销',),
            Tab(text: '推荐',),

            Tab(text: '热销',),
            Tab(text: '推荐',),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('热销yemain '),),
          Center(child: Text('推荐yemain'),),

          Center(child: Text('热销yemain '),),
          Center(child: Text('推荐yemain'),),

          Center(child: Text('热销yemain '),),
          Center(child: Text('推荐yemain'),),

          Center(child: Text('热销yemain '),),
          Center(child: Text('推荐yemain'),),
        ],
      ),
    );
  }
}