開發技巧之 (Flutter) Dart擴展方法的使用

#Tips （Flutter）Dart擴展方法的應用

在kotlin中，我們可以通過編寫自己的擴展方法，來複用一些常用的方法調用，這樣能夠快速的進行迭代開發，並且用起來也舒服，在Dart中有沒有這樣的方法可以操作呢，答案當然是有咯 ，但是這也只有在dart2.7版本才能夠使用。

如果大家用Flutter開發， 可以看看自己的dart版本是否能夠支持擴展方法呢。

flutter --version

參考鏈接：extension-methods

例1-字符串打印

比如我們要打印日誌之類的方法，我們傳統的方法就是這樣

print("this is log");

但是有了擴展方法以後 我們能怎麼做呢，

"this is log".print();

相當於就是

字符串.print()

這樣做是不是很方便呢。 接下來我們就看下具體怎麼實現的。

是不是很簡單呢，想要實現這樣的擴展 只需要用這麼用就行了

extension [可選參數  （填入你的名稱） ] on 目標擴展類 

再來看一個類似的擴展String方法的 比如我們要把單詞的第一個字符大寫，那麼我們就可以寫這樣一個擴展方法

例2-將字符串的第一個字符大寫

完整代碼如下

void main() {
  print("this is log");
  
    "this is log".log();
    
    "xiaxiayige".toUpperCasForFirst().log();
  
  

  
}


extension  costom_string on String{
  
  void log(){
    print("log---> $this ");
  }
  
  
  String toUpperCasForFirst(){
    
    return "${this[0].toUpperCase()}${this.substring(1)}" ;
  }
  
}

打印結果

this is log
log---> this is log 
log---> Xiaxiayige 

在線驗證：

https://dartpad.dev/

Flutter 例子-居中顯示

接下來我們來寫一個Flutter的例子，在Flutter中我們經常會用到的一個控件就是Center，必須包裹在上層，那麼我們現在可以通過這種擴展方法，來實現居中的一個擴展方法了。

我們想要的效果

控件.center() / Widget.center()

看看我們原來的使用

class FilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      child: Center(child: Text("text")),

    );
  }
}

現在的使用，首先添加擴展方法

extension costom_widget on Widget{
  Widget center(){
    return Center(
      child: this,
    );
  }
}

然後使用

class FilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("text").center(),
    );
  }
}

通過這種方式 我們不但可以減少層級的顯示，使用起來更方便。

結束

怎麼樣，這種擴展方法是不是很喜歡呢，如果你通過flutter --version 發現你的dart版本低於2.7 那麼可以試試使用flutter upgrade升級你的版本試試。
更多的使用大家可以去自行擴展哦。

注意

擴展雖好，但是不要濫用哦，如果有很多地方重複的寫法，建議使用擴展方法來減少重複代碼的編寫。