记录自学flutter点点滴滴

Flutter 学习之旅(八) 基础控件 AppBar

2020-08-12  本文已影响0人  Tsm_2020

AppBar 作为每个app几乎都会用到的东西,他的属性同样也非常重要,这里就分析一下


AppBar({

Key key,

//appbar左侧位置,在首页通常为app的icon或者用户头像,其他页面通常为 返回按钮  ,
//如果在Scaffold中设置了drawer 抽屉匣,也没有设置leading  ,则leading 变为了 抽屉匣的三个横线
///的图标,并且点击后打开drawer

  this.leading,

///是否显示leading   如果在appbar中设置了leading ,则这个值不起作用,如果没有设置,当他为true
///的时候时候显示 leading ,false则不显示

  this.automaticallyImplyLeading =true,

///头部控件  Widget 自定义样式

  this.title,

  this.actions,///右侧按钮,Widget[] 这样的lsit

////从网上看到是在  title下方的内容  ,但是我设置的时候显示和状态栏平行了,大部分人都说通常使
///用在SliverAppBar 中使用,我会在介绍CustomScrollView 这个控件中介绍的

  this.flexibleSpace,

//// 类似爱奇艺顶部的滑动tabbar ,他的Widget 必须实现PreferredSizeWidget 这个widget

  this.bottom,

////z轴高度,这个没什么好说的,android中经常用到

  this.elevation,

///形状和阴影, 当z轴高度大于0的时候才会显示阴影

  this.shape,

  this.backgroundColor,

////状态栏颜色    如果不设置默认使用theme中的颜色, 手动设置可以用
///Brightness.light  Brightness.dark

  this.brightness,

。通常是用于应用程序栏图标的颜色、不透明度和大小

  this.iconTheme,

///右侧action图标的theme  

  this.actionsIconTheme,

///Appbar 上的文字样式    我尝试创建了一个TextTheme  里面一大堆 1 -6的命名  
///介绍也是用large  ,verylarge ,very  very large ,

///简直没法看
///但是我在里面找到了title这个废弃的变量,看了一下替代它的变量是headline6   ,
///改变这个style 可以改变标题的状态

  this.textTheme,

////高度是否从状态栏下面开始计算

  this.primary =true,

/////这个很关键,现在国内app的风格基本都是 title在屏幕最中间,给true就实现了,

  this.centerTitle,

////貌似看了一下网上的用力,这个表示是否将头部的文本解析成图片,
///如果解析成类似talkback什么的辅助软件是不能阅读的

  this.excludeHeaderSemantics =false,

////title 的间距

  this.titleSpacing = NavigationToolbar.kMiddleSpacing,

///toolbar 透明度

  this.toolbarOpacity =1.0,

///bottom透明度

  this.bottomOpacity =1.0,

})

从网上找了一个他的结构图,

image

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter

上一篇 下一篇

猜你喜欢

热点阅读