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, 
          ), 
        ), 
      ), 
    ); 
  } 
} 

以是行使要领为：

（编辑：河北网）

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