Flutter 应用按钮组件

Flutter 应用按钮组件(AppBar)，应用按钮组件有AppBar和SliverAppBar。它们是Material设计中的AppBar，也就是Android中的Toolbar。

AppBar和SliverAppBar都继承自StatefulWidget类，代表Toolbar，两者的区别在于AppBar的位置是固定在应用最上面的，而SliverAppBar是可以跟随内容滚动的。AppBar及SliverAppBar组件常见属性见表:

AppBar可以显示顶部leading、title和actions等内容。底部通常为选项卡TabBar。flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果，不过该属性通常在SliverAppBar中使用。具体布局如图所示:

接下来是一个示例代码，在上端左侧显示标题，右侧添加两个按钮，示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
title: 'AppBar应用按钮示例',
home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Scaffold(
  // 应用按钮
  appBar: AppBar(
    // 左侧图标
    leading: Icon(Icons.home),
    // 标题
    title: Text('AppBar应用按钮示例'),
    // 操作按钮集
    actions: <Widget>[
      // 图标按钮
      IconButton(
          icon: Icon(Icons.search),
          tooltip: '搜索',
          onPressed: (){},
      ),
      IconButton(
          icon: Icon(Icons.add),
          tooltip: '添加',
          onPressed: (){},
      ),
    ],
  ),
);
  }
}

上述示例代码的视图展现大致如图所示:

酷客教程相关文章：

• Flutter 脚手架组件(Scaffold)
• Flutter 应用组件(MaterialApp)
• Flutter 表单组件
• Flutter 列表组件