Flutter中AppBar自定义顶部导航按钮图标、颜色及TabBar定义顶部Tab切换

AppBarDemo.dart

import 'package:flutter/material.dart';

class AppBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //标题居中
        centerTitle: true,
        title: Text("AppBarDemo"),
        //背景颜色
        backgroundColor: Colors.red,
        //设置前面显示图片
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {},
        ),

        //后面放置图标
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {},
          ),
        ],
      ),
      body: Text("AppBarDemo页面内容区域"),
    );
  }
}

 

显示效果:

 

AppBarDemo.dart

import 'package:flutter/material.dart';

class AppBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      //顶部tab切换的数量
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          //标题居中
          centerTitle: true,
          title: Text("AppBarDemo"),
          //背景颜色
          backgroundColor: Colors.red,
          //设置前面显示图片
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),

          //后面放置图标
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.help),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            ),
          ],

          bottom: TabBar(
            //是否可以滚动
            isScrollable: false,
            //选中的颜色
            indicatorColor: Colors.blue,
            //未选中的颜色
            unselectedLabelColor:Colors.black, 
            //文字颜色
            labelColor: Colors.white,
            tabs: <Widget>[
              Tab(
                text: "热门",
              ),
              Tab(
                text: "推荐",
              ),
              Tab(
                text: "优选",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第一个tab"),
                ),
                ListTile(
                  title: Text("第一个tab"),
                ),
                ListTile(
                  title: Text("第一个tab"),
                ),
                ListTile(
                  title: Text("第一个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第二个tab"),
                ),
                ListTile(
                  title: Text("第二个tab"),
                ),
                ListTile(
                  title: Text("第二个tab"),
                ),
                ListTile(
                  title: Text("第二个tab"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text("第三个tab"),
                ),
                ListTile(
                  title: Text("第三个tab"),
                ),
                ListTile(
                  title: Text("第三个tab"),
                ),
                ListTile(
                  title: Text("第三个tab"),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 Routes.dart

import 'package:flutter/material.dart';

import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/AppBarDemo.dart';
import '../pages/Search.dart';
import '../pages/user/Login.dart';
import '../pages/user/RegistFirst.dart';
import '../pages/user/RegistSecond.dart';
import '../pages/user/RegistThird.dart';

final routes = {
  '/': (context) => Tabs(),
  //表单界面
  '/form': (context, {arguments}) => FormPage(arguments: arguments),
  //搜索界面
  '/search': (context, {arguments}) => SearchPage(arguments: arguments),
  //登录界面
  '/login': (context) => LoginPage(),
  //注册的第一个界面
  '/registfirst': (context) => RegistFirstPage(),
  //注册第二个界面
  '/registsecond': (context) => RegistSecondPage(),
  //注册第三个界面
  '/registthird': (context) => RegistThirdPage(),
  //AppBar 界面
  '/appbardemo': (context) => AppBarPage(),
};

//固定写法
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;
    }
  }
};

 

main.dart

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
import 'routes/Routes.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
//StatelessWidget:无状态组件,状态不可变的widget
//StatefulWidget:有状态组件,状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        //是否显示debug图标
        debugShowCheckedModeBanner: false,
        //initialRoute: '/', //初始化的时候加载的路由
        initialRoute: '/appbardemo', //初始化的时候加载的路由
        onGenerateRoute: onGenerateRoute);
  }
}

其他代码,上一篇博客有

显示效果:

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页