Flutter AppBar自定义顶部导航按钮，图片，颜色，以及

 

Flutter AppBar

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

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

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,//设置AppBar背景颜色
        title: Text("Flutter AppBar"),//设置标题
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: "Search",
          onPressed: (){
            print("menu pressed");
          },
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "Search",
            onPressed: (){
              print("Search Pressed");
            },
          ),
          IconButton(
            icon: Icon(Icons.more_horiz),
            tooltip: "more_horiz",
            onPressed: (){
              print("more_horiz Pressed");
            },
          )
        ],
      ),
      body: Center(
        child: Text("center Text..."),
      ),
    );
  }
}

Flutter AppBar中自定义TabBar实现顶部Tab切换

TabBar常见属性:

属性	描述
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的Style

coding

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ScaffoldPage(),
    );
  }
}

class ScaffoldPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,//设置AppBar背景颜色
          title: Text("Flutter AppBar"),//设置标题
          bottom: TabBar(
            tabs: [ //设置选项
              Tab(text: "热门",),
              Tab(text: "推荐",),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ListView(
              children: [
                ListTile(title: Text("这是第一个Tab"),),
                ListTile(title: Text("这是第一个Tab"),),
                ListTile(title: Text("这是第一个Tab"),)
              ],
            ),
            ListView(
              children: [
                ListTile(title: Text("这是第二个Tab"),),
                ListTile(title: Text("这是第二个Tab"),),
                ListTile(title: Text("这是第二个Tab"),)
              ],
            )
          ],
        ),
      ),
    );
  }
}