Flutter——AppBar组件(顶部导航组件)
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组件(顶部导航组件)的更多相关文章
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...
- AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
一.Flutter AppBar 自定义顶部按钮图标.颜色 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当 ...
- 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)
Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...
- Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController
如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar.TabBarView.DefaultTabController 上一篇我们说了BottmNavigationBar底部导航 ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- 微信小程序自定义顶部导航
注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...
- Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
随机推荐
- php 常用正则表达 邮箱 手机号啥的
class RegexConst { const REGEX_MOBLIE_86 = '/^1(3|4|5|7|8)\d{9}$/';//中国手机号 const REGEX_MOBLIE_852 = ...
- linux环境启动rocketmq服务 报connect to <10.4.86.6:10909> failed异常
解决方式: 需要给Producer和Consumer的DefaultMQPushConsumer对象set这个参数,生产者和消费者都需要,否则不能正常消费消息: 这个问题解决后可能还会出现: conn ...
- [ReferenceError: __insane_exports is not defined] [monaco-editor@0.18.0] [vue] [typescript]
npm install monaco-editor@ 安装上面的命令,安装0.17.0版本.
- [转帖]如何保护你的 Python 代码 (一)—— 现有加密方案
如何保护你的 Python 代码 (一)—— 现有加密方案 Prodesire Python猫 1周前
- MVC-初识
RAZOR视图介绍 一个cshtml,主体是一个html文本,里面可以写前台和后台代码,混合编写(个人认为不太好,应该分离),这个文件最后会被会被编译为一个类(所以他可以像类一样写一些方法,其他的地方 ...
- (二)javaweb开发的常见概念总结(来自那些年的笔记)
目录 WEB开发相关知识 WEB服务器 Tomcat服务器 WEB应用程序 配置WEB应用 配置缺省的WEB应用 Web设置首页 web.xml文件 配置虚拟主机 配置https连接器 为我们的网站, ...
- Verilog整理
1.两种实例化 2.运算符//逻辑运算+按位运算//拼接运算符 3.reg默认为1位 4.{16{1}}与{16{1'b1}}不同 5.[1023:0] in ha[3:0]=(in>>( ...
- windows安装memcache并为php添加memcache扩展
第一步:安装包下载 1.4.5 版本之前用作为一个服务安装,1.4.5 版本之后用任务计划中启用一个普通进程来使用 具体内容如以下链接:http://www.runoob.com/memcached/ ...
- web服务器/HTTP协议基础
1.http协议:一种规范和约定,实现客户端和服务器的通信2.http请求格式:请求行+请求头+请求体 请求行:method + request-URI + http-version 方法+请求的资源 ...
- PAT(B)1003 我要通过!(Java)
1003 我要通过! 题目 判断字符串是否符合给定的规则.更多内容点击标题. 参考博客 ValarMorghulis的博客 分析 规律:num_a * num_b = num_c.字符串a中字 ...