Flutter網(wǎng)絡(luò)請(qǐng)求庫(kù)Dio的封裝（單例、動(dòng)態(tài)baseUrl、攔截器、日志、請(qǐng)求loading）

Flutter中Widget分為StatefulWidget和StatelessWidget，分別為動(dòng)態(tài)視圖和靜態(tài)視圖，視圖的更新需要調(diào)用StatefulWidget的setState方法，這會(huì)遍歷調(diào)用子Widget的build方法。當(dāng)一個(gè)主頁(yè)面比較復(fù)雜時(shí)，會(huì)包含多個(gè)widget，如果直接調(diào)用setState，會(huì)遍歷所有子Widget的build，這是非常不必要的性能開銷，有沒有單獨(dú)刷新指定Widget的方式呢？這個(gè)時(shí)候就要用到GlobalKey了。

常規(guī)刷新Widget的方法

一個(gè)StatefulWidget包含一個(gè)Button，一個(gè)Text，通過(guò)點(diǎn)擊Button調(diào)用主Widget的setState方法，刷新Text，示例如下：

3041564298371_.pic_hd.jpg

import 'package:flutter/material.dart';

class TestWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestWidgetState();
  }
}

class _TestWidgetState extends State<TestWidget> {
  int _count;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text((_count++).toString()),
          RaisedButton(
            onPressed: () {
              setState(() {
                _count++;
              });
            },
          )
        ],
      ),
    );
  }
}

通過(guò)GlobalKey局部刷新

同樣一個(gè)StatefulWidget包含一個(gè)多個(gè)Text和Button，點(diǎn)擊Button我們只需要刷新指定的Text，通過(guò)GlobalKey的方式，實(shí)現(xiàn)如下：

3051564298949_.pic_hd.jpg

主Widget，包含一個(gè)需要更新的TextWidget和一個(gè)不需要更新的Text

import 'package:cell_input/globalkey/button.dart';
import 'package:cell_input/globalkey/text.dart';
import 'package:flutter/material.dart';

class TestWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestWidgetState();
  }
}
class _TestWidgetState extends State<TestWidget> {
  int _count=0;
  GlobalKey<TextWidgetState> textKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextWidget(textKey),///需要更新的Text
          SizedBox(height: 20,),

          Text(_count.toString(),style: TextStyle(fontSize: 20),), ///這個(gè)Text不會(huì)刷新，只會(huì)刷新上面的TextWidget
         SizedBox(height: 20,),
          ButtonWidget(
            onPressed: () {
              ///點(diǎn)擊button，調(diào)用TextWidget的onPressed方法
              ///在TextWidget的onPressed中單獨(dú)調(diào)用TextWidget的setState，
              _count++;
              textKey.currentState.onPressed(_count);
            },
          )
        ],
      ),
    );
  }
}

需要單獨(dú)更新的Widget

import 'package:flutter/material.dart';

class TextWidget extends StatefulWidget {
  TextWidget(Key key) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return TextWidgetState();
  }
}

class TextWidgetState extends State<TextWidget> {
  String _text="0";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: TextStyle(fontSize: 20),),
    );
  }

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

傳遞事件的Button

import 'package:cell_input/globalkey/text.dart';
import 'package:flutter/material.dart';

typedef OnPressed();

class ButtonWidget extends StatefulWidget {
  OnPressed onPressed;

  ButtonWidget({this.onPressed});

  @override
  State<StatefulWidget> createState() {
    return _ButtonWidgetState(onPressed);
  }
}

class _ButtonWidgetState extends State<ButtonWidget> {
  OnPressed _onPressed;

  _ButtonWidgetState(this._onPressed);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('count++',style: TextStyle(fontSize: 20),),
        onPressed: _onPressed,
      ),
    );
  }
}

這樣點(diǎn)擊Button就只會(huì)更新指定的TextWidget了，效果如下：

gifhome_320x640_7s.gif

這只是一個(gè)簡(jiǎn)單的例子，在實(shí)際開發(fā)中為了頁(yè)面刷新的高效率，模塊化封裝非常重要。很多情況下都只需要局部刷新，而不是重構(gòu)整個(gè)視圖。所以Globalkey的運(yùn)用在項(xiàng)目中需要熟練掌握
demo地址：https://github.com/po1arbear/cell_input-flutter/tree/master/lib/globalkey