AppBar组件的常用属性如下:

属性 描述
leading
在标题前面显示的一个控件,在首页通常显示应用的 logo;在其他界面通常显示为返回按钮
title
标题,通常显示为当前界面的标题文字,可以放组件
actions
通常使用 IconButton 来表示,可以放按钮组
bottom
通常放 tabBar,标题下面显示一个 Tab 导航栏
backgroundColor
导航背景颜色
iconTheme
图标样式
textTheme
文字样式
centerTitle
标题是否居中显示

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "AppBarWidget",
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
title: Text("AppBarDemo"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
)
],
),
body: Center(
child: Text("TTTTTTTTTTT"),
),
),
));
}

Flutter——AppBar组件(顶部导航组件)的更多相关文章

  1. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

  2. AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当 ...

  3. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  4. Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController

    如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar.TabBarView.DefaultTabController 上一篇我们说了BottmNavigationBar底部导航 ...

  5. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  6. 微信小程序自定义顶部导航

    注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...

  7. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  8. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  9. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

随机推荐

  1. 【c# 学习笔记】c#中的语句

    1.条件语句: if语句: bool condition = true; if (condition) { } else if (condition) { } else { } switch语句: b ...

  2. NASA HEG tool安装心得

    自从NASA对MRT工具停止支持后,这个工具的官网也随之打不开无法下载.处理数据当然还是需要官方的工具好一些. 现在NASA推荐使用HEG工具来处理MODIS系列产品,除此之外工具对ASTER, MI ...

  3. 【miscellaneous】MPEG2、MPEG4、H264的差异

    MPEG2.MPEG4.H264的差异 MPEG-2简介 MPEG-2制定于1994年,设计目标是高级工业标准的图象质量以及更高的传输率.MPEG-2所能提供的传输率在3-10Mbits/sec间,其 ...

  4. go项目部署到linxu

    环境: 在mac上编译, 编译后上传到linux, 然后运行代码 go项目打包 一.直接部署到linux 1. 在mac上, 进入到项目目录, 执行以下命令, 进行编译: CGO_ENABLED=0 ...

  5. 最新 网易java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易.京东.去哪儿等10家互联网公司的校招Offer,因为某些自身原因最终选择了网易.6.7月主要是做系统复习.项目复盘.LeetCode与牛客刷题 ...

  6. XMemcached的基本使用

    XMemcached是memcached的一个java客户端,基于java nio,支持memcached的所有协议.本文简要介绍XMemcached的基本使用. 一.添加依赖 <depende ...

  7. sas(Serial Attached SCSI)技术详解

    1.什么是SAS 即串行SCSI技术,是一种磁盘连接技术,它综合了并行SCSI和串行连接技术(FC,SSA,IEEE1394)的优势,以串行通讯协议为协议基础架构,采用SCSI-3扩展指令集,并兼容S ...

  8. 在Settings.db数据库中添加一项新的设置(Settings默认设置)

    Settiings的数据默认存放在com.android.providers.settings/database/settings.db中 数据库中的默认数据在frameworks/base/pack ...

  9. 【51nod】1407 与与与与

    [51nod]1407 与与与与 设\(f(x)\) 为\(A_{i} \& x == x\)的\(A_{i}\)的个数 设\(g(x)\)为\(x\)里1的个数 \(\sum_{i = 0} ...

  10. LeetCode_#1_两数之和 Two Sum_C++题解

    1. 两数之和 Two Sum 题目描述 Given an array of integers, return indices of the two numbers such that they ad ...