【Flutter】入门03-appBar

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, //去掉右上角的debug 图标
        theme: ThemeData(primaryColor: Colors.redAccent),
        home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Gecer'),
          elevation: 0, //阴影大小
          leading: IconButton(
            icon: Icon(Icons.bookmark_border),
            tooltip: '添加收藏', //提示信息
            onPressed: () {
              debugPrint('iconButton:添加收藏');
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.arrow_back_ios),
              tooltip: '上一章', //提示信息
              onPressed: () {
                debugPrint('iconButton:上一章');
              },
            ),
             IconButton(
              icon: Icon(Icons.arrow_forward_ios),
              tooltip: '下一章', //提示信息
              onPressed: () {
                debugPrint('iconButton:下一章');
              },
            )
          ],
        ),
        body: null);
  }
}

1. appBar是顶部的导航栏；

2. leading是左侧显示的部件，actions是右侧显示的部件集合（右侧可以显示多个部件）；

3. IconButton是图标按钮。其中icon属性为图标样式，本文使用的material自带的图标。tooltip为提示信息长按按钮则会显示要提示的文字。onPressed是处理事件，本文在控制台打印了一段话。