Flutter AppBar顶部导航组件以及自定义顶部按钮图标、颜色

发布于 25 天前 作者 phonegap100 34 次浏览 来自 分享

Flutter AppBar组件不仅可以自定义顶部导航,我们还可以自定义AppBar顶部按钮图标以及颜色

Flutter AppBar组件中的常见属性:

属性 描述
leading 在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
title 标题,通常显示为当前界面的标题文字,可以放组件
actions 通常使用 IconButton 来表示,可以放按钮组
bottom 通常放tabBar,标题下面显示一个 Tab 导航栏
backgroundColor 导航背景颜色
iconTheme 图标样式
textTheme 文字样式
centerTitle 标题是否居中显示
import 'package:flutter/material.dart';
class AppBardemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(     
      appBar: AppBar(
            backgroundColor:Colors.red,
            leading:IconButton(
                icon: Icon(Icons.menu),
                tooltip: "Search",
                onPressed: (){
                  print('menu Pressed');
                }
            ),
            title: Text('FlutterDemo'),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search),
                tooltip: "Search",
                onPressed: (){
                  print('Search Pressed');
                }
              ) ,
              IconButton(
                icon: Icon(Icons.more_horiz),
                tooltip: "more_horiz",
                onPressed: (){
                  print('more_horiz Pressed');
                }
              )            
            ],
      ),
      body: Text('这是Appbar'),
    );
  }
}
回到顶部