Flutter 常用功能介紹

one_cup發表於2018-03-08
Flutter

Flutter 常用功能介紹

Json序列化和反序列化

首先，預設的JSON.decode是將一個json格式的string 轉化成一個Map<String,dynamic>型別的Map， 是無法直接換成Object的。這點在官方的文件中都有說明，並且由於Flutter中是禁止使用反射的，dart:mirrors這個庫也無法使用(雖然我也沒用過)。

官方推薦的使用Json的方式：

  1. 直接使用Map,不轉換成Object。 這一點對於一些小型專案，資料量不大的情況下是可以使用的，原生預設支援。
  2. 通過新增額外的方法來轉換成Object。這裡所說的額外的方法是指，給你需要轉換的類新增formJson(Map<String,dynamic> map)和Map<String,dynamic> toJson()這兩個方法。
  3. 使用json_serializable 進行轉換。這裡簡單說一下使用方式，官方文件中都有的。
    1. 建立一個基本的User類: class User { String name; int age; bool genader; User(bool genader,{this.name,this.age}); }
    2. 引入json_serializable相關的庫
dependencies:
# Your other regular dependencies here
json_annotation: ^0.2.2
dev_dependencies:
# Your other dev_dependencies here
build_runner: ^0.7.6
json_serializable: ^0.3.2
複製程式碼
  1. 修改之前的User類:
import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';
@JsonSerializable()
class User  extends Object with _$UserSerializerMixin{
String name;
int age;
bool genader;
User(bool genader,{this.name,this.age});
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}
複製程式碼

這裡額外新增的部分直接寫，雖然是有報錯，先不管，建議直接copy。

  1. 開啟命令列：執行一下兩個命令：

    1. flutter packages pub run build_runner build 這個命令會一次當前的所有被標記的註解的對應的檔案。

    2. flutter packages pub run build_runner watch 這個命令會持續的監聽所有被註解標記的檔案並生成對應的檔案。

    3. 執行完上面任意一個命令之後，沒有異常的話會對應目錄中生成對應的檔案。之前的報紅，就都應該正常了。

以上三種方式，官方文件上的都有相關的說明和示例。

這裡說一下泛型的問題，常見的需要序列化的是Http請求的回撥，通常需要將一個json型別的string,序列化成Response<T>的型別。由於在Android中是可以是用反射進行直接轉化的，Flutter中是不允許反射的，所以在遇到泛型類進行序列化的時候是不行的。（可以自己嘗試一下，如果能夠實現的請務必留言，謝謝。），不能自己轉換就只能自己在遇到使用泛型的地方手動住轉換一下了。

下拉重新整理

通用功能，列表的下拉重新整理，使用RefreshIndicator 使用方式：

final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      new GlobalKey<RefreshIndicatorState>();
      
Future<Null> _handleRefresh() async {
    print('refresh');
    datas.clear();
    setState(() {

      pageIndex=1;
    });
    return null;
}
  
new RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _handleRefresh,
        child: new ListView.builder(
          itemCount: datas.length,
          padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
          itemBuilder: (BuildContext context, int index) {
            return new Column(
              children: <Widget>[
                new ListTile(
                  title: new Text(datas[index].desc),
                  leading: new CircleAvatar(
                    child: new Text('${index+1}')
                  )
                ),
                new Divider(
                  height: 2.0,
                )
              ],
            );
          },
        ),
      ),
複製程式碼

簡單的示例就是這樣，其中_handleRefresh就是下拉重新整理是呼叫的方法。

載入更多

通用功能，列表的載入更多，使用NotificationListener

使用方式:

bool _onNotifycation<Notification>(Notification notify) {
    if (notify is! OverscrollNotification) {
      return true;
    }
    setState(() {
      pageIndex++;
    });
    return true;
  }


new NotificationListener(
      onNotification: _onNotifycation,
      child: ,
      )
複製程式碼

其中_onNotifycation為各種的事件監聽回撥，這裡關注的是OverscrollNotification，監聽滾動超出的情況，目前寫的應該還是有問題。列表會在快速滑動的時候出現異常。

參考地址

Json 序列化: 官方json介紹地址

下拉重新整理和載入更多: flutter github issues

當前專案的地址: github

相關文章