Flutter Widget -AppBar

Flutter Widgets

Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

1.材料设计根控件 MaterialApp
2.页面基础布局 Scaffold
3.页面标题 AppBar

一、概览图

二、AppBar是什么？

AppBar 页面的标题设置，一个App应该有统一的标题设置。

三、详细

import 'package:flutter/material.dart';

/// 我的页面
/// @author: dingwen
/// @date: 2021/5/9
class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          // 标题
          title: Text('我的'),

          // 标题是否居中
          centerTitle: true,

          // 背景颜色
          backgroundColor: Colors.blue,

          // 阴影
          elevation: 20.0,

          // 左边 widget
          leading: BackButton(),

          // 后边选项
          actions: <Widget>[
            IconButton(icon: Icon(Icons.search), onPressed: () => print("搜索")),
            PopupMenuButton<String>(
              itemBuilder: (context) => _getPopupMenu(context),
              onSelected: (String value) => print(value),
            )
          ],

          // appBar 底部选择Tab

          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.add),text: '添加',),
              Tab(icon: Icon(Icons.home),text: "首页",),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Text('add'),
            Text('home page'),
          ],
        ),
      ),
    );
  }

  /// 构建弹出菜单项
  _getPopupMenu(BuildContext context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem(
        value: 'qq',
        child: Text('qq'),
      ),
      PopupMenuItem(
        value: "wechat",
        child: Text('wechat'),
      )
    ];
  }
}