Flutter开发中的一些Tips

边查边写,也借鉴了许多Github上优秀的Flutter项目。现在记录下来,方便自己查阅及供大家交流学习。分享一下自己在此项目中遇到的问题及心得,希望对你有所帮助!

1.部件溢出

A RenderFlex overflowed by 22 pixels on the bottom.

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

解决的方法有两种:

  • 包一层 SingleChildScrollView,让你的页面可以滑动起来,如果不需要滑动,加上 physics: new NeverScrollableScrollPhysics() 属性。

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

2.保持页面状态

比如点击导航栏来回切换页面,默认情况下会丢失原页面状态,也就是每次切换都会重新初始化页面。这种情况解决方法就是PageView与BottomNavigationBar结合使用,同时子页面State中继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true。代码大致如下:

@override
bool get wantKeepAlive => true;
	
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container();
  }

😘 Enjoy~