Flutter - 导航栏按钮

这篇我们来介绍下app上方的导航栏按钮用法。
我们前面说过scaffold这个脚手架里面有个appBar这个widget。它便是app上面的组件，自然也包含了一些我们需要的按钮组件，我们来看下示例代码:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigreation',
            onPressed: () => debugPrint('Navigreation button is pressed'),
          ),
          title: Text('导航'),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: () => debugPrint('Search button is pressed'),
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: 'More',
              onPressed: () => debugPrint('More button is pressed'),
            )
          ],
        ),
        body: null);
  }
}

• leading
  它是顶部导航栏最左边的按钮,IconButton便是按钮组件，里面的icon就是按钮图标,Icons是内置的一些图标样式。tooltip是按钮说明，onPressed是按钮事件，我们通过debugPrint可以看到点击按钮后，在控制台输出对应的文字。
• actions
  它是顶部导航栏右方的一排组件。 上面代码我们定义了搜索和...两个按钮，分别设置了其对应的按钮事件。
  显示如下:
  
  button.png

完整代码如下:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigreation',
            onPressed: () => debugPrint('Navigreation button is pressed'),
          ),
          title: Text('导航'),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: () => debugPrint('Search button is pressed'),
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: 'More',
              onPressed: () => debugPrint('More button is pressed'),
            )
          ],
        ),
        body: null);
  }
}