區域性重新整理

我們在做專案的時候，都需要單獨的去重新整理一個值，而不是把整個介面都重繪。大家都知道setState是進行重繪的一個方法，他會執行生命週期的一個build，這將會使得整個介面來進行重繪。當然我們也會說把他進行狀態管理，因為我個人不是很喜歡用provider進行狀態管理，而是使用steam和event_bus進行傳值和管理，當然自然的程式碼就會多了，所以我現在也在尋找provider更簡單的方法，當然這裡就不說了，在跟其他人聊的時候，都說好久沒有更新了。那是因為有點忙，也變得懶了。現在剛好趁著過年這一段時間，把一些對於在進行Flutter開發中的一些技巧就給大家舉個小例子。

Flutter狀態類

相信進行過flutter開發甚至瞭解過flutter進行過小demo編寫的人，都知道最基本的有兩種狀態。一種是StatelessWidget；另一種是StatefulWidget。

• StatelessWidget是指沒有狀態的類，他在頁面進行編寫的時候就已經固定了，不能更改，所以就是沒有相應的setState方法。
• StatefulWidget是指有狀態的類，當狀態改變的時候，我們可以呼叫setState進行頁面的重新build來進行頁面狀態的更新。

自然我們呼叫setState進行頁面重新整理重新build的時候，那麼setState方法自然ju會遍歷我們在build下面所寫的每個Widget

普通的重新整理方式

class _MyHomePageState extends State<MyHomePage> {
 int count = 0;
 
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('Demo'),),body: Container(
    alignment: Alignment.center,child: Column(
     children: <Widget>[
      Text('$count'),FlatButton(
       color: Theme.of(context).accentColor,onPressed: () {
        count++; 
        setState(() {});
       },child: new Text('按鈕 $count'),],);
 }
}

可以看出我們進行重新整理的時候，這count值全部發生變化了。這樣我們需要上面的Text變化，下面的按鈕不進行頁面的重繪怎麼辦呢？

使用GlobalKey區域性重新整理方式

我們還是用上面的方式去實現，但是我們事先封裝好一個widget，使用GlobalKey的方式來進行區域性重新整理Text。

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int count = 0;

 GlobalKey<_TextWidgetState> textKey = GlobalKey();

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('Demo'),child: Column(
     children: <Widget>[
      TextWidget(textKey),//需要更新的Text
      FlatButton(
       child: new Text('按鈕 $count'),color: Theme.of(context).accentColor,onPressed: () {
        count++; // 這裡我們只給他值變動，狀態重新整理交給下面的Key事件
        textKey.currentState.onPressed(count); //其實這個count值已經改變了 但是沒有重繪所以我們看到的只是我們定義的初始值
       },);
 }
}

//封裝的widget
class TextWidget extends StatefulWidget {
 final Key key;

 const TextWidget(this.key);

 @override
 _TextWidgetState createState() => _TextWidgetState();
}

class _TextWidgetState extends State<TextWidget> {
 String text = "0";

 void onPressed(int count) {
  setState((){
   text = count.toString();
  });
 }

 @override
 Widget build(BuildContext context) {
  return new Text(text);
 }
}

效果：
可以看出按鈕的count值沒有發生變化，但是需要更新的元件已經進行了區域性重新整理。

實現原理

textKey是通過一個GlobalKey使用currentState方法呼叫封裝的widget裡面的onPressed方法，剛好onPressed方法裡面有setState用來重新整理區域性的widget狀態。

到此這篇關於flutter區域性重新整理的實現示例的文章就介紹到這了,更多相關flutter 區域性重新整理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！