Flutter学习(Tab顶部导航栏)

Flutter学习（Tab）

AppBar

属性	描述
leading	在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
title	标题，通常显示为当前界面的标题文字，可以放组件
actions	通常使用 IconButton 来表示，可以放按钮组
bottom	通常放 tabBar，标题下面显示一个 Tab 导航栏
backgroundColor	导航背景颜色
iconTheme	图标样式
textTheme	文字样式
centerTitle	标题是否居中显示

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBarPage"),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
          },  
        ),
        actions: [
          IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.search)
          ),
          IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.settings))
        ],
        backgroundColor: Colors.red,
      ),
    );
  }
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/263e75c5302a4d41bf7dbf8e6d055a9a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1
可以看到右上角框出的内容，想要隐藏此标签的话可以在MaterialApp中加

MaterialApp(
      debugShowCheckedModeBanner: false,
    )

顶部导航Tab

属性

属性	描述
tabs	显示的标签内容，一般使用 Tab 对象,也可以是其他的 Widget controller TabController 对象
isScrollable	是否可滚动
indicatorColor 指示器颜色
indicatorWeight	指示器高度
indicatorPadding	底部指示器的 Padding
indicator	指示器 decoration，例如边框等
indicatorSize	指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor	选中 label 颜色
labelStyle	选中 label 的 Style
labelPadding	每个 label 的 padding 值
unselectedLabelColor	未选中 label 颜色
unselectedLabelStyle	未选中 label

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Tab页面"),
          bottom: TabBar(
            tabs: [
              Tab(text: "热门"),
              Tab(text: "切换")
            ],
          ),
        ),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(), //禁止TabNarView滑动
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个Tab"),
                ),
                ListTile(
                  title: Text("第二个Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

在这里插入图片描述

底部导航嵌套顶部导航

使用方法和上面基本一致，区别在于TabBar()不能写在bottom中，因为Tabs()已经有了Scaffold在其内部页面 CategoryPage又嵌套了一个Scaffold，因此会出现两个上部标题栏，这时我们直接将TabBar写在title中

CategoryPage.dart

// ignore_for_file: prefer_const_constructors_in_immutables, avoid_unnecessary_containers, prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Row(
            children: [
              Expanded(child: TabBar(tabs: [         
              Tab(text: "热门"),
              Tab(text: "切换")
              ],))
            ],
            ),
          // bottom: TabBar(
          //   tabs: [
          //     Tab(text: "热门"),
          //     Tab(text: "切换")
          //   ],
          // ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个Tab"),
                ),
                ListTile(
                  title: Text("第二个Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

EmailPage

// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors, prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';

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

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

class _EmailPageState extends State<EmailPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("这是邮件页面"),
    );
  }
}

HomePage

// ignore_for_file: prefer_const_constructors_in_immutables, prefer_const_constructors

import 'package:flutter/material.dart';

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: (){
        Navigator.pushNamed(context, '/appbar');
      }, 
      child: Text("点击转跳"),
      );
  }
}

SettingPage

// ignore_for_file: prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          title: Text("我是设置页面"),
        )
      ],
    );
  }
}

Tabs

// ignore_for_file: prefer_final_fields, deprecated_member_use, prefer_const_literals_to_create_immutables, prefer_const_constructors

import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';

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

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

class _TabsState extends State<Tabs> {
  int currentIndex = 0;
  List _pageList = [HomePage(), CategoryPage(), SettingPage(), EmailPage()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: _pageList[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail), label: "邮件"),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: "设置"),
        ],
      ),
    );
  }
}

AppbarPage

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Tab页面"),
          bottom: TabBar(
            tabs: [
              Tab(text: "热门"),
              Tab(text: "切换")
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(
                  title: Text("第一个Tab"),
                ),
                ListTile(
                  title: Text("第一个Tab"),
                )
              ],
            ),
            ListView(
              children: [
                ListTile(
                  title: Text("第二个Tab"),
                ),
                ListTile(
                  title: Text("第二个Tab"),
                )
              ],
            )
          ],
          
          ),
      ),
    );
  }
}

Routes

// ignore_for_file: prefer_function_declarations_over_variables

import 'package:flutter/material.dart';
import 'package:flutterapp/pages/Tabs.dart';

import '../pages/AppBarDemo.dart';

  final routes = {

    '/appbar':(context)=>AppbarPage(),
    '/':(context)=>Tabs(),  
  };

   var onGenerateRoute=(RouteSettings settings) {
          // 统一处理
        final String? name = settings.name;
        final Function? pageContentBuilder = routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
      };

在这里插入图片描述

原文链接：https://blog.csdn.net/m0_46527751/article/details/122527814