Flutter 组件小记

2020/2/5 posted in  跨平台开发

Offstage组件

控制child是否显示。

offstagetrue,控件隐藏; 当offstagefalse,显示。

Offstage不可见的时候,如果child有动画等,需要手动停掉,Offstage并不会停掉动画等操作。

WillPopScope组件

双击返回与界面退出提示

onWillPop 就表示当前页面将退出。 值类型是一个函数 typedef Future<bool> WillPopCallback();返回 Future.value(false); 表示不退出.返回 Future.value(true); 表示退出.

SafeArea组件

大部分情况下,使用SafeArea能很好的解决刘海,不规则屏幕的显示问题。

InkWell组件

产生水波纹效果。

使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它的颜色和形状。

AutomaticKeepAliveClientMixin组件

AutomaticKeepAliveClientMixin 这个 Mixin 是 Flutter 为了保持页面设置的。哪个页面需要保持页面状态,就在这个页面进行混入。

不过使用使用这个 Mixin 是有几个先决条件的:

使用的页面必须是 StatefulWidget,如果是 StatelessWidget 是没办法办法使用的。
其实只有两个前置组件才能保持页面状态:PageView 和 IndexedStack。
重写 wantKeepAlive 方法,如果不重写也是实现不了的。

PageView 相当于ViewPager

  • PageView - 创建一个可滚动列表。
  • PageView.builder - 创建一个滚动列表,指定数量。
  • PageView.custom - 创建一个可滚动的列表,自定义子项。

常用属性:

  • childrenDelegate → SliverChildDelegate - 子项列表。
  • controller → PageController - 控制器。
  • onPageChanged → ValueChanged - 索引改变时触发。
  • pageSnapping → bool - 设置为 false 以禁用页面捕捉,对自定义滚动行为很有用。
  • physics → ScrollPhysics - 页面视图如何响应用户输入,即滚动的动画表现。
  • reverse → bool - 是否反方向。
  • scrollDirection → Axis - 视图滚动的方向。

MediaQuery.removePadding

可以移除元素的pandding,需要注意要指定移除哪个方向的padding。

MediaQuery.removePadding(
            removeTop: true,
            context: context,
            child: ,
)

ValueListenableBuilder

配合ValueNotifier使用,修改状态可以不用setState()。

SearchDelegate 系统的搜索界面

继承SearchDelegate<String>之后需要重写一些方法,这里给定的String类型是指搜索query的类型为String

class searchBarDelegate extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }


  @override
  ThemeData appBarTheme(BuildContext context) {
    // TODO: implement appBarTheme
    return super.appBarTheme(context);
  }
}
  • List<Widget> buildActions(BuildContext context):这个方法返回一个控件列表,显示为搜索框右边的图标按钮,这里设置为一个清除按钮,并且在搜索内容为空的时候显示建议搜索内容,使用的是showSuggestions(context)方法。
  • showSuggestions(context):这个方法显示建议的搜索内容,也就是Widget buildSuggestions(BuildContext context)方法的的调用。
  • Widget buildLeading(BuildContext context):这个方法返回一个控件,显示为搜索框左侧的按钮,一般设置为返回,这里返回一个具有动态效果的返回按钮。
  • Widget buildSuggestions(BuildContext context):这个方法返回一个控件,显示为搜索内容区域的建议内容。
  • Widget buildResults(BuildContext context):这个方法返回一个控件,显示为搜索内容区域的搜索结果内容。
  • ThemeData appBarTheme(BuildContext context):这个方法返回一个主题,也就是可以自定义搜索界面的主题样式。
  • 调用showSearch(context: context, delegate: searchBarDelegate())方法跳转到搜索界面

SizedBox

  • 一般的SizeBox()构造方法:传width、height、child,SizedBox会强制设置它的孩子的宽度或者高度为指定值
  • SizeBox.expand():可以使SizedBox的大小充满parent的布局,相当于设置了SizedBox的宽度和高度为double.infinity(无穷大)。
  • SizedBox.shrink(): 创建一个尽可能小的SizedBox。
  • SizeBox.fromSize():创建一个指定Size的SizedBox
  • FractionallySizedBox():可以用百分比来控制sizebox的大小。 widthFactor,heightFactor参数就是相对于父控件的比例。 alignment:可以设置sizebox在父控件里面的相对位置。
  • SizedOverflowBox():通过设置Size,允许它的child控件,溢出它的父控件,进行绘制,不会报OverFlow的错误。
  • OverflowBox():通过设置最大最小的宽高,OverflowBox允许它的child控件,溢出它的父控件,进行绘制,不会报OverFlow的错误。
  • LimtedBox():一个可以限制子控件的最大宽高的控件,child只能在这区域内进行绘制

CustomScrollView

可以使用各种sliver来实现各种酷炫的滚动效果,它的slivers属性里可以放置各种sliver组件。

SliverToBoxAdapter

child属性可以加载普通widget组件

SliverPadding

可以设置padding,子widget为sliver

SliverGrid

SliverGrid 可以设置固定一行显示几个SliverGridDelegateWithFixedCrossAxisCount,也可以SliverGridDelegateWithMaxCrossAxisExtent设置子元素最大宽度,让flutter决定一行几个。count和extent就是封装方法。

  • SliverGrid.count() 指定了一行展示多少个item,下面的例子表示一行展示4个
  • SliverGrid.extent() 可以指定item的最大宽度,然后让Flutter自己决定一行展示多少个item
  • SliverGrid() 则是需要指定一个gridDelegate,它提供给了 程序员 一个自定义Delegate的入口,你可以自己决定每一个item怎么排列

SliverList

类似ListView,他有两种表现形式:SliverChildBuilderDelegate和SliverChildListDelegate,两者区别在于SliverChildBuilderDelegate可以加载不确定数量的列表,而SliverChildListDelegate只能加载固定已知数量。

SliverFixedExtentList

SliverFixedExtentList与SliverList类似,唯一区别是SliverFixedExtentList可以设置固定高度。

SliverPersistentHeader

有点类似SliverAppBar,同样可以收起和展开,可以放置到slivers任何一个位置。

  • floating: 为 true 时,与SliverAppBar用法一致
  • pinned:与SliverAppBar用法一致,且与floating不能同时为true
  • delegate: 构建一个SliverPersistentHeader需要传入一个delegate,这个delegateSliverPersistentHeaderDelegate类型的,而SliverPersistentHeaderDelegate是一个abstract类,我们不能直接new一个SliverPersistentHeaderDelegate出来,因此,我们需要自定义一个delegate来实现SliverPersistentHeaderDelegate

写一个自定义SliverPersistentHeaderDelegate很简单,只需重写build()get maxExtentget minExtentshouldRebuild()这四个方法,上面就是一个最简单的SliverPersistentHeaderDelegate的实现。其中,maxExtent表示header完全展开时的高度,minExtent表示header在收起时的最小高度。因此,对于我们上面的那个自定义Delegate,如果将minHeightmaxHeight的值设置为相同时,header就不会收缩了,这样的Header跟我们平常理解的Header更像。

SliverAppBar

可伸缩的头部,可以实现上拉收起,下拉展开效果

  • expandedHeight: 最大扩展高度
  • flexibleSpace: 扩展内容区域
  • floating: 为true则在滚动时优先滚动,有下拉动作先appbarflexibleSpace,反之亦然
  • snap: 为true时没有变化,正在查证
  • pinned:为trueappbar不消失,在下拉时会多划出一段距离SliverAppBar才开始滚动

FlexibleSpaceBar 可折叠的应用栏