Flutter 开发中的一些 Tips

学习Flutter也有一阵子了。闲着没事，用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了，所以都是些死数据，实现效果可以说是很完美了(得到了设计的认可。。。)。当然自己也是边查边写，也借鉴了许多Github上优秀的Flutter项目。现在开源出来(附带设计图)，供大家交流学习。希望多多Star、Fork支持，有问题可以Issue。附上链接：github.com/simplezhli/…

本篇主要分享一下自己在此项目中遇到的问题及心得，希望对你有所帮助!

1.部件溢出

异常大致如下：

A RenderFlex overflowed by 22 pixels on the bottom. 

导致的原因就是在水平或者垂直方向上的内容超过了父部件的大小。一般来说我们的页面不存在这样的问题，因为根据页面的设计，事先可以预料到是否超出。不过要注意到有输入法弹出的页面。比如我下面的这个例子：

可以看到底部溢出了22个像素，可能在18：9的手机以上不太会出现这种问题，因为屏幕的高度足够。但是这种16：9的手机可能会暴露出来。解决的方法有两种：

包一层SingleChildScrollView，让你的页面可以滑动起来。

在Scaffold中设置resizeToAvoidBottomInset为false。默认为ture，防止部件被遮挡。如果使用了这个方法，如果底部有输入框，则会造成遮挡。

大家可以根据实际需求选择。

2.输入框的遮挡

页面如下：

底部有输入框，同时“提交”的按钮固定在底部。一开始觉得既然固定在底部，那就使用Stack配合Positioned来实现，然而就导致输入法弹出时，发生遮挡。

上图中，我选中了最后一个输入框，但因为输入法默认都是在输入框的下方弹出，然而上面盖着这个“提交”按钮，发生了遮挡。

最终我的解决方法就是使用Column配合Expanded来实现。修复后如下：

3.SafeArea

一旦有部件固定在顶部或者底部(严谨点的话可以说是在屏幕的四边)。那我我们最好使用SafeArea来包一下。因为Android 和 IOS都有状态栏，甚至IOS还有叫做“HomeIndicator”的横条。所以一不留神就会出现适配问题。

我们在Flutter中常使用的BottomNavigationBar 和 AppBar 其实就在内部处理了此类问题。以 AppBar源码为例：

class _AppBarState extends State { 
 
  @override 
  Widget build(BuildContext context) { 
     
    if (widget.primary) { 
      appBar = SafeArea(  // <--- 1 
        top: true, 
        child: appBar, 
      ); 
    } 
     
    return Semantics( 
      container: true, 
      child: AnnotatedRegion( 
        value: overlayStyle, 
        child: Material( // <--- 2 
          color: widget.backgroundColor 
            ?? appBarTheme.color 
            ?? themeData.primaryColor, 
          child: Semantics( 
            explicitChildNodes: true, 
            child: appBar, 
          ), 
        ), 
      ), 
    ); 
  } 
} 

所以使用方法为：

（编辑：青岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!