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