Flutter基础组件-AppBar

效果图

效果图

AppBar属性列表

属性	类型	说明
leading	Widget	显示在左上角的view
automaticallyImplyLeading	bool	如果leading为null，是否自动实现默认的leading按钮
title	Widget	//显示在title位置的view
flexibleSpace	Widget	做折叠效果使用，通常在SliverAppBar中使用
elevation	double	控制阴影大小 ，没有默认ThemeData.appBarTheme.elevation属性，属性也没有默认4
shape	ShapeBorder	设置各种形状的背景，常用 BeveledRectangleBorder,BoxBorder,CircleBorder,ContinuousRectangleBorder,InputBorder,RoundedRectangleBorder,StadiumBorder
backgroundColor	Color	背景色
brightness	Brightness	状态栏模式。有深色和浅色两种主题，
iconTheme	IconThemeData	定义图标的颜色，不透明度和大小。
textTheme	TextTheme	设置文字样式
primary	bool	如果为false，会沉浸在状态栏下centerTitle
centerTitle	bool	标题是否居中显示
titleSpacing	double	标题左右间距,默认NavigationToolbar.kMiddleSpacing，设置为0 占用所有可用空间
toolbarOpacity	double	工具栏透明度，值为1.0完全不透明，值为0.0完全透明。
bottomOpacity	double	bottom透明度，值为1.0完全不透明，值为0.0完全透明
bottom	PreferredSizeWidget	设置底部view，需要CupertinoTabBar,ObstructingPreferredSizeWidget,PreferredSize,TabBar包裹
actions	List	功能按钮，PopupMenuButton添加扩展按钮

AppBar使用示例代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State with SingleTickerProviderStateMixin{

  final List myTabs = [
    Tab(text: '页签1'),
    Tab(text: '页签2'),
  ];

  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync:this,length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: new Icon(Icons.arrow_back_ios),//显示在左上角的view
        automaticallyImplyLeading: true,//
        title: Text("标题",style: TextStyle(color: Colors.white),),//显示在title位置的view
        flexibleSpace: FlexibleSpaceBar(),//做折叠效果使用
        elevation: 4,//控制阴影大小 ，没有默认ThemeData.appBarTheme.elevation属性，属性也没有默认4
        shape: RoundedRectangleBorder(),//设置各种形状的边框 BeveledRectangleBorder,BoxBorder,CircleBorder,ContinuousRectangleBorder,InputBorder,RoundedRectangleBorder,StadiumBorder
        backgroundColor: Colors.blue,//背景色
        brightness: Brightness.light,//设置状态栏模式。有深色和浅色两种主题，
        iconTheme: IconThemeData(color: Colors.white),//定义图标的颜色，不透明度和大小。
        textTheme: Theme.of(context).textTheme,//设置文字样式
        primary: true,//如果为false，会沉浸在状态栏下
        centerTitle: false,//标题是否居中显示
        titleSpacing: NavigationToolbar.kMiddleSpacing,//标题左右间距,默认NavigationToolbar.kMiddleSpacing，设置为0 占用所有可用空间
        toolbarOpacity: 1.0,//工具栏透明度，值为1.0完全不透明，值为0.0完全透明。
        bottomOpacity: 1.0,//bottom透明度，值为1.0完全不透明，值为0.0完全透明。

        bottom:  TabBar(//设置底部view，需要CupertinoTabBar,ObstructingPreferredSizeWidget,PreferredSize,TabBar包裹
          controller: _tabController,
          isScrollable: true,
          tabs: myTabs,
        ),

        actions: [//功能按钮，PopupMenuButton添加扩展按钮
          new Icon(Icons.add_circle),
          new Icon(Icons.ac_unit),
          PopupMenuButton(
            itemBuilder: (BuildContext context) =>
            >[
              PopupMenuItem(child: Text("扩展按钮1"), value: "1",),
              PopupMenuItem(child: Text("扩展按钮2"), value: "2",),
            ],
            onSelected: (String action) {
              switch (action) {
                case "1":
                  print("扩展按钮1");
                  break;
                case "2":
                  print("扩展按钮2");
                  break;
              }
            },
            onCanceled: () {
              print("onCanceled");
            },
          )
        ],
      ),
      body: TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          final String label = tab.text.toLowerCase();
          return Center(
            child: Text(
              '这是 $label ',
              style: const TextStyle(fontSize: 36),
            ),
          );
        }).toList(),
      ),
    );
  }
}