flutter学习七 flutter自定义顶部导航按钮

Flutter AppBar 自定义顶部按钮图标、颜色

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

return Scaffold(
      appBar: AppBar(
        title: Text('search page'),
//左侧图标
        // leading: IconButton(
        //   icon: Icon(Icons.menu),
        // ),
         //	右侧图标
        actions: [
          IconButton(
            icon: Icon(Icons.menu),
          )
        ],
      ),
    );

自定义 TabBar 实 现顶部 Tab 切换

属性	描述
tabs	显示的标签内容，一般使用 Tab 对象,也可以是其他 的 Widget controller TabController 对象
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 的 Style

return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('xxx'),
            bottom: TabBar(
              tabs: [
                Tab(text: '热门'),
                Tab(text: '推荐'),
              ],
            )
          ),
          body: TabBarView(
            children: [
              ListView(
                children: [
                  ListTile(title: Text('腾讯被骗，全网来嘲！')),
                  ListTile(title: Text('乘风破浪的姐姐')),
                ],
              ),
              ListView(
                children: [
                  ListTile(title: Text('印度又搞事')),
                ],
              )
            ],
          ),
        ),
      );

当点击需求发请求，事件监听的时候，另一种方法；

import 'package:flutter/material.dart';

class FromPage extends StatefulWidget {
  FromPage({Key key}):super(key: key);
  _FromPageState createState() => _FromPageState();
}

class _FromPageState extends State with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {//生命周期函数
    super.initState();
    _tabController = new TabController(length: 2, vsync: this);
    _tabController.addListener((){//事件监听
      print(_tabController.index);
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('title'),
        bottom: new TabBar(
          tabs: [
            new Tab(text: '推荐'),
            new Tab(text: '热卖')
          ],
          controller: _tabController,
        )
      ),
      body: new TabBarView(
        controller: _tabController,
        children: [
          new Center(child:Text('推荐')),
          new Center(child:Text('热卖')),
        ]
      ),
    );
  }
}