Flutter 劝退计划——Flutter中的坑

本栏目由“Flutter真TM坑!”特别赞助

啊哈哈哈 开头皮一下， 进入正题，首先说一下，这个Flutter中的问题是真的多啊，不光插件很难搞，连自己的Widget都问题一堆，从今天开始，我将会在这个文章中记录一下我遇到的所有Flutter Widget 的问题，好，进入高潮(●￣(ｴ)￣●)

配置问题

沉浸式状态栏：

void main(){
	// 沉浸式状态栏
   if (Platform.isAndroid) {
    // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，
    // 是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }

  runApp(MyApp());
}

TextField问题

光标总是跑到最前面的问题：

问题描述：
每当输入内容的时候，光标总是跑到开头，正常来说，应该是一直保持在末尾的
解决办法：
_phone是我controller控制器的值，设置一下selection，就可以解决这个问题了

onChanged:(value){
      _phone.text = value;
       _phone.selection = TextSelection.fromPosition(
        TextPosition(offset: _phone.text.length)
      );
    },

表单提交时内容溢出问题

问题截图：

解决办法：
SingleChildScrollView控件
该控件是用来支持小部件滚动的，类似于Android中的ScrollView，只需将我们的内容外面嵌套个SingleChildScrollView就可以了， 注意一点的是， 不能嵌套超出内容很多的内容，官方文档是这样解释的

需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。

生命周期问题

问题描述：
关于Flutter中声明周期的问题，真的是把我坑坏了，由于本人是前端出身，在Vue的生命周期的灌溉下，一度以为原理都差不多。Flutter的 initState 生命周期，是每一次浏览当前控件时，都会调用一次。举个简单的例子，大多数的APP都会有一个轮播图控件，开发人员会将轮播组件单独提出来，是肯定需要获取后台 给的轮播图的路径的，我一开始的做法是，在initState中调用Dio请求，获取数据。问题就出现在这里，假如我下滑后查看别的，再次滑到轮播图组件哪里，就会出现卡顿的问题，就像轮播图突然出现了一样，这就是因为我在initState当中获取数据的问题，每一次页面渲染，都会去调用initState方法，每一次都相当于从新获取了一遍数据
解决办法
在父组件获取数据，序列化数据后，或者转为List格式后，再传值给子组件，这样就避免了每次调用都会卡顿的问题

Flutter修改沉浸式状态栏的问题

沉浸式状态栏

 if (Platform.isAndroid) {
    // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，
    // 是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }

修改状态栏的主题色,有dark和light两种

@override
  Widget build(BuildContext context) {

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(child:Scaffold(),),);
  }