当前位置:   article > 正文

Flutter:使用Overlay展示浮动的widget_flutter 文字悬浮效果

flutter 文字悬浮效果

本文是一篇翻译文章,翻译自
原文地址:Flutter: Using Overlay to display floating widgets
作者:AbdulRahman AlHamali

 

想象一下:你编写出的迷人表单页面

你把它发给产品经理,他看了一眼说:“我一定要完整的输入国家名称吗,当我输入文字时难道你就不能给我展示些建议吗?”,你想了想:“好吧,他是对的”,因此,你决定开发一个‘自动补全‘的’预先输入’功能,随便你怎么称呼它:一个文本展示框TextField,当用户输入文字的时候展示一些建议选项。开始工作了..你知道怎么拿到建议数据,你知道怎么写逻辑,你知道所有要做的事情..除了不知道怎么将建议选项浮动展示在widgets之上。

 

你想了想:打算重新设计代码结构,为了实现悬浮效果,决定将整个页面包装进一个Stack组件中,你需要准确的计算每个widget显示的位置,非常侵入性、必须要严谨、容易出错,并且直觉告诉你这么做可能是错误的,有其他的实现方式吗?

方案就是:你可以使用Flutter已经提供好的StackOverlay

在这片文章中,我将会介绍如何使用Overlay,来创建悬浮在其他widget之上的widgets,并且并不需要重构你的整个页面。

你可以使用Overlay来展示自动匹配的建议选项,小提示,或着基本上所有的浮动的东西。

Overlay是什么?

官方文档这样定义

 

  1. A Stack of entries that can be managed independently.
  2. // 一个可以独立管理的Stack子类
  3. Overlays let independent child widgets “float” visual elements on top of other widgets by inserting them into the overlay’s Stack.
  4. // 通过将可独立管理的子节点widgets加入到`overlay`的栈中,Overlays可以将这些widgets浮动展示到显现的elements节点的顶部,

这看起来就是我们正在寻找的内容,当我们创建MaterialApp的时候,它会自动创建一个NavigatorNavigator则又会创建一个Overlay:一个navigator用来管理所展示的views视图的Stack组件

接下来,让我们一起看看怎么使用Overlay来解决我们的问题吧。

注意:这篇文章的核心是介绍如何显示浮动widgets,因此不会涉及太多如何实现自动补全文本输入框textfield的细节,如果你对一个编写良好、可高度自定义的自动补全widget感兴趣的话,可以来看我写的package flutter_typeahead

初始代码

我们以最初的代码开始吧:

 

  1. Scaffold(
  2. body: Padding(
  3. padding: const EdgeInsets.all(50.0),
  4. child: Form(
  5. child: ListView(
  6. children: <Widget>[
  7. TextFormField(
  8. decoration: InputDecoration(
  9. labelText: 'Address'
  10. ),
  11. ),
  12. SizedBox(height: 16.0,),
  13. TextFormField(
  14. decoration: InputDecoration(
  15. labelText: 'City'
  16. ),
  17. ),
  18. SizedBox(height: 16.0,),
  19. TextFormField(
  20. decoration: InputDecoration(
  21. labelText: 'Address'
  22. ),
  23. ),
  24. SizedBox(height: 16.0,),
  25. RaisedButton(
  26. child: Text('SUBMIT'),
  27. onPressed: () {
  28. // submit the form
  29. },
  30. )
  31. ],
  32. ),
  33. ),
  34. ),
  35. )

*一个简单页面,包含了三个文本输入框:country、city、address。

然后我们就以country 文本输入框为例吧,将它封装成一个我们自己的statefull widget,命名为CountriesField

 

  1. class CountriesField extends StatefulWidget {
  2. @override
  3. _CountriesFieldState createState() => _CountriesFieldState();
  4. }
  5. class _CountriesFieldState extends State<CountriesField> {
  6. @override
  7. Widget build(BuildContext context) {
  8. return TextFormField(
  9. decoration: InputDecoration(
  10. labelText: 'Country'
  11. ),
  12. );
  13. }
  14. }

接下来我们将要做的是,每次当选中文本输入框获取焦点Focus的时候,将一个浮动的list列表展示出来。当失去焦点Focus的时候,再将它隐藏起来,当然你可以按照自己需求来决定如何实现,你可能需要在用户输入了一些文字后展示它,或者当用户点击Enter按钮的时候再隐藏。无论怎样,让我们先看看如何展示这个悬浮的widget吧:

 

  1. class CountriesField extends StatefulWidget {
  2. @override
  3. _CountriesFieldState createState() => _CountriesFieldState();
  4. }
  5. class _CountriesFieldState extends State<CountriesField> {
  6. final FocusNode _focusNode = FocusNode();
  7. OverlayEntry _overlayEntry;
  8. @override
  9. void initState() {
  10. _focusNode.addListener(() {
  11. if (_focusNode.hasFocus) {
  12. this._overlayEntry = this._createOverlayEntry();
  13. Overlay.of(context).insert(this._overlayEntry);
  14. } else {
  15. this._overlayEntry.remove();
  16. }
  17. });
  18. }
  19. OverlayEntry _createOverlayEntry() {
  20. RenderBox renderBox = context.findRenderObject();
  21. var size = renderBox.size;
  22. var offset = renderBox.localToGlobal(Offset.zero);
  23. return OverlayEntry(
  24. builder: (context) => Positioned(
  25. left: offset.dx,
  26. top: offset.dy + size.height + 5.0,
  27. width: size.width,
  28. child: Material(
  29. elevation: 4.0,
  30. child: ListView(
  31. padding: EdgeInsets.zero,
  32. shrinkWrap: true,
  33. children: <Widget>[
  34. ListTile(
  35. title: Text('Syria'),
  36. ),
  37. ListTile(
  38. title: Text('Lebanon'),
  39. )
  40. ],
  41. ),
  42. ),
  43. )
  44. );
  45. }
  46. @override
  47. Widget build(BuildContext context) {
  48. return TextFormField(
  49. focusNode: this._focusNode,
  50. decoration: InputDecoration(
  51. labelText: 'Country'
  52. ),
  53. );
  54. }
  55. }
  • 我们给TextFormField绑定了一个FocusNode,并且在initState里面给FocusNode添加了一个监听事件,通过监听事件来获取什么时候获得/失去焦点focus。
  • 每次当我们获取焦点 (_focusNode.hasFocus == true)的时候, 我们通过_createOverlayEntry创建一个OverlayEntry实例对象,然后通过使用Overlay.of(context).insert,将它插入到最邻近的Overlaywidget中去。
  • 每次当我们失去焦点(_focusNode.hasFocus == false)的时候,我们通过使用_overlayEntry.remove来移除刚才添加的overlay实例。
  • _createOverlayEntry通过使用context.findRenderObject来获取我们的widget所在的渲染对象RenderBox,渲染对象里包含位置position、大小size、和一些其他关于渲染的信息,有了这些信息能够帮助我们计算在哪里展示我们的悬浮列表。
  • _createOverlayEntry通过渲染信息来获取当前widget的大小,也可以使用renderBox.localToGlobal来获取当前widget在屏幕上的坐标。我们将localToGlobal设置为Offset.zero 这意味着我们将在渲染对象中使用(0,0)坐标,并且将他们转换为屏幕上相对应的坐标。
  • 接着我们创建了OverlayEntry,这时一个用来将widgets展示到Overlay中的widget。
  • 当前创建的OverlayEntry的是一个Positionedwidget。请牢记Positioned widgets 只能被插入到Stack中,当然Overlay其实也是一个Stack
  • 我们设置Positionedwidget的坐标,给它和TextField相同的X轴坐标,相同的宽度,相同的Y轴坐标,当然为了不遮挡到TextField,在底部进行了一些偏移。
  • Positioned内部,我们设置了一个展示建议选项的ListView(里面默写了例子中的一些国家)。注意到我把所有的内容都包在了Material中,关于这样写有两个原因:Overlay默认不包含Materialwidget,并且很多widgets如果没有有Material祖先节点的话不能展示,除此之外Material还提供了elevation属性,可以让我们给widget设置隐形效果,看起来就像真正浮在上面一样。

以上,我们的建议选择项可以浮在所有widget之上了!

彩蛋:跟随widget滑动!

在我们离开之前,让我们在多学喜一点吧!假如我们的页面是可以滚动,我们可能注意到如下现象:

建议选择列表固定在了屏幕上!在某些场景下你可能的确需要固定的,但是在当前场景中,我们不想要它固定,我们想要它跟随我们的TextField一起滚动!

关键词滚动,Flutter给我们提供了两个widget:CompositedTransformFollowerCompositedTransformTarget,简单介绍就是,如果我们关联起一个follower和一个target,那么无论target滚动到哪里,这个follower将跟随它一起滚动!为了关联起一个follower和一个target,我们需要给他们设置相同的LayerLink.

因此我们需要将建议选择列表用CompositedTransformFollower包起来,将TextFieldCompositedTransformTarget包起来。然后我们将他们使用想用的LayerLink关联起来,这样就可以是建议选择列表跟随TextField一起滑动了:

 

  1. class CountriesField extends StatefulWidget {
  2. @override
  3. _CountriesFieldState createState() => _CountriesFieldState();
  4. }
  5. class _CountriesFieldState extends State<CountriesField> {
  6. final FocusNode _focusNode = FocusNode();
  7. OverlayEntry _overlayEntry;
  8. final LayerLink _layerLink = LayerLink();
  9. @override
  10. void initState() {
  11. _focusNode.addListener(() {
  12. if (_focusNode.hasFocus) {
  13. this._overlayEntry = this._createOverlayEntry();
  14. Overlay.of(context).insert(this._overlayEntry);
  15. } else {
  16. this._overlayEntry.remove();
  17. }
  18. });
  19. }
  20. OverlayEntry _createOverlayEntry() {
  21. RenderBox renderBox = context.findRenderObject();
  22. var size = renderBox.size;
  23. return OverlayEntry(
  24. builder: (context) => Positioned(
  25. width: size.width,
  26. child: CompositedTransformFollower(
  27. link: this._layerLink,
  28. showWhenUnlinked: false,
  29. offset: Offset(0.0, size.height + 5.0),
  30. child: Material(
  31. elevation: 4.0,
  32. child: ListView(
  33. padding: EdgeInsets.zero,
  34. shrinkWrap: true,
  35. children: <Widget>[
  36. ListTile(
  37. title: Text('Syria'),
  38. onTap: () {
  39. print('Syria Tapped');
  40. },
  41. ),
  42. ListTile(
  43. title: Text('Lebanon'),
  44. onTap: () {
  45. print('Lebanon Tapped');
  46. },
  47. )
  48. ],
  49. ),
  50. ),
  51. ),
  52. )
  53. );
  54. }
  55. @override
  56. Widget build(BuildContext context) {
  57. return CompositedTransformTarget(
  58. link: this._layerLink,
  59. child: TextFormField(
  60. focusNode: this._focusNode,
  61. decoration: InputDecoration(
  62. labelText: 'Country'
  63. ),
  64. ),
  65. );
  66. }
  67. }
  • 我们将我们的Material widget用CompositedTransformFollower包裹进OverlayEntry中,将TextFormField包裹进CompositedTransformTarget中。
  • 我们使用相同的LayerLink示例,来关联followertarget,这样followertarget将会在相同的坐标系中,高效的跟随target而动。
  • Positionedwidget中移除了topleft属性,因为默认followertarget有相同的坐标,因此不在需要。然而我们保留了width属性,因为如果不设置的话,follower将会无限的延伸。
  • 为了不遮挡TextFormField,我们给CompositedTransformFollower设置了一个offset(和之前一样的原因)。
  • 最后,我们将showWhenUnlinked属性设置为false,当TextFormField在屏幕上不可见时,用来隐藏OverlayEntry(比如我们滑动出屏幕底部很远的时候)。

经过这些操作,我们的OverlayEntry现在可以跟随我们的TextField一起滚动啦!

重要提示:CompositedTransformFollower仍然有一点小bug,当target不可见时,即使follower已经从屏幕上隐藏了,这个follower仍然会响应点击事件,我已经给Flutter Team提了issue,此issue已经关闭,标记为解决。

Overlay是一个强大的widget,它给我们提供了一个简单易用的的用来展示浮动widget的的Stack组件。我用它成功的创建了flutter_typeahead,我确定你也能在多样化的需求中使用到它。

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号