Flutter学習記録の取得を開始しました

2020年初頭の新しい冠状肺炎は今なお世界中で猛威を振るい、世界に濃い影を落としており、まもなく流行が終わり、皆が静かな生活に戻ってくれることを願っています。

2019年に5Gが登場し、新しいクラウン肺炎が起こったことで、私たちは急速な発展と劇的な変化の時代にあることを思い出しました。この時代に見捨てられないためには、時代に歩調を合わせるしかありません。近年、私は将来の携帯端末のあり方を考えています。2019年の米中貿易戦争は、不正な国で不正な行動があり、Huaweiが一部のGoogleサービスを継続して使用できないことを示しています。セット。これらは私たちから遠く離れているように見えますが、Huaweiが本当にAndroidを使用できず、HuaweiがAndroid市場でこのような大きなシェアを獲得した場合、間違いなく独自の開発プラットフォームとシステムが生まれます。これにより、最前線の開発者は将来の方向性をさらに理解できなくなります。しかし、人生は継続する必要があり、ペースは止まらないので、先に進みましょう。


前の章の最初から続ける

Flutterの概要

これは本からの紹介です:

Flutterは、Googleとオープンソースによって立ち上げられたモバイルアプリケーション開発フレームワークであり、クロスプラットフォーム、高忠実度、高パフォーマンスに焦点を当てています。開発者はDart言語を介してアプリを開発でき、一連のコードはiOSおよびAndroidプラットフォームの両方で実行されます。Flutterは豊富なコンポーネントとインターフェースを提供し、開発者はFlutterにネイティブ拡張をすばやく追加できます。同時に、Flutterはネイティブエンジンを使用してビューをレンダリングするため、間違いなくユーザーに優れたエクスペリエンスを提供できます。

開発時間:

2017年のGoogle I / Oカンファレンスで、Googleはクロスプラットフォームの高性能モバイルアプリケーションFlutterを作成するための新しいフレームワークを立ち上げました。
Flutterは2018年2月に最初のベータ版をリリースし、同年5月に2018年のGoogle I / O会議でFlutterがベータ3バージョンに更新されました。
2018年6月にFlutterが最初のプレビューバージョンをリリースしました。つまり、Flutterは公式バージョン(1.0)がリリースされる前に最終段階に入りました。

これまで、Github上のFlutterのスターは90kを超えており、その人気を示しています。そのようないくつかの特徴もあります:クロスプラットフォームの自己描画エンジン、高効率、これらは本から得ることができるので、ここでは繰り返さないことにします。Flutterは初めてなので、いくつかの概念についてはあまり明確ではありませんが、先に進んで下に行くことができると思います。学校に行って振り返ると、これらの概念の意味を理解できるはずです。 。

Flutterのフレーム構造を見てください。
フラッターフレーム構造

これは純粋なDart実装SDKです。これは一連の基本的なライブラリを実装します。下から上に向かって簡単に紹介しましょう。
下の2つのレイヤー(FoundationとAnimation、Painting、Gestures)は、一部のGoogleビデオのdartにマージされますUIレイヤーはFlutterのdart:uiパッケージに対応しています。これは、Flutterエンジンによって公開される基本的なUIライブラリであり、アニメーション、ジェスチャー、描画機能を提供します。
レンダリングレイヤー。このレイヤーは抽象レイアウトレイヤーであり、dart UIレイヤーに依存します。レンダリングレイヤーはUIツリーを構築し、UIツリーが変更されると、変更された部分を計算してから、UIツリーを更新し、最後にUIを更新しますツリーが画面に描画されます。このプロセスは、Reactの仮想DOMに似ています。レンダリングレイヤーは、Flutter UIフレームワークのコアパーツと言えます。各UI要素の位置とサイズを決定するだけでなく、座標変換と描画(基になるdart:uiを呼び出す)も実行する必要があります。
Widgetsレイヤーは、Flutterが提供する一連の基本コンポーネントライブラリです。基本コンポーネントライブラリに加えて、Flutterは、MaterialとCupertinoの2つのビジュアルスタイルコンポーネントライブラリも提供します。Flutterによって開発されたほとんどのシーンは、これら2つのレイヤーのみを扱います。

上記は、Flutterの全体的な印象を与えるためのものであり、Flutterの予備的な印象を持っていると思います。FlutterはDart言語で開発されているため、Dart言語の基本的な理解も必要です。
Dartは強く型付けされた言語であり、JavaとJavaScriptの経験を利用しています。これら2つの言語に慣れている場合は、Dartを使い始めるのは非常に簡単です。Dart言語の基本的な使い方を見てみましょう。

1.変数宣言

var
は任意のタイプの変数を受け入れることができますが、いったん変数に割り当てられると、別のタイプに変更することはできません。
例:
var s;
s = "hello world";
このコードに問題はありません。次の行を追加すると、エラーが発生します。
s = 1000;
変数 "s"は文字列型に割り当てられているため、再びint型に割り当てられた場合は正しくありません。

ダイナミックオブジェクトとオブジェクト
オブジェクトはすべてのオブジェクトの基本クラスであり、すべてのタイプはオブジェクトのサブクラスであるため、どのタイプのデータでもオブジェクトに割り当てることができます。変数を宣言するキーワードとしてダイナミックとオブジェクトを使用すると、エラーなしで変数を自由に変更できます。例:
dynamic x;
ocject y;
x = "hello world";
y = 1000;
上記は、2つの変数に値を割り当てる最初の例です。以下では、2つの変数のタイプを変更することもできます。
x = 1000;
y = "hello world";
動的とオブジェクトの違いは、動的に宣言されたオブジェクトコンパイラがすべての可能な組み合わせを提供し、オブジェクトによって宣言されたオブジェクトはオブジェクトのプロパティとメソッドのみを使用できることです。
この場所の本の執筆はまだ明確ではないので、後で理解できるかどうかを確認するために後で学習します。

finalおよびconst
変数の値を変更する予定がない場合は、finalおよびconstを使用して宣言します。これら2つのキーワードを使用して変数を宣言する場合、変数のタイプを省略できます。例:
final str1 = "hello";
final str2 = "world";
これら2つの違いは私の理解です:finalはプログラムが初めて実行されるときに初期化され、constは使用されるときに初期化されます。

2.機能

関数宣言

Dartは真のオブジェクト指向言語であるため、関数でさえオブジェクトであり、関数型を持っています。これは、関数を変数に割り当てたり、パラメータとして他の関数に渡したりできることを意味します。これは、関数型プログラミングの典型的な機能です。

基本的な関数宣言:
戻り値がboolで名前がisNullの関数を宣言して、渡されたデータがnullかどうかを判別します

 bool isNull(String data){
    return data == null;
  }

関数に戻り値がない場合、デフォルトは動的処理です。
式が1つだけ含まれる関数の場合、次のように省略できます。

printData(String data) => printData(data);

関数は変数として使用され、本のコードはここに引用されています。

var say = (str){
  print(str);
};
say("hi world");

関数はパラメーターとして渡され、本のコードはここに引用されています。

void execute(var callback) {
    callback();
}
execute(() => print("xxx"))

オプションの定位置パラメーター。これは非常にシンプルで、オプションの定位置パラメーターとして[]でマークされ、パラメーターリストの最後に配置され、このパラメーターを渡すことができるかどうかを示します。次の本の例を参照してください。

String say(String from, String msg, [String device]) {
  var result = '$from says $msg';
  if (device != null) {
    result = '$result with a $device';
  }
  return result;
}

2つの呼び出しの結果:

say('Bob', 'Howdy'); //结果是: Bob says Howdy
say('Bob', 'Howdy', 'smoke signal'); //结果是:Bob says Howdy with a smoke signal

オプションの名前付きパラメーター。関数を定義するとき、{}を使用してパラメーターをラップし、パラメーターリストの最後に置きます。これは、名前付きパラメーターを指定するために使用されます。パラメーターは、1つまたは2つを選択的に渡すことができます。例を参照してください:

void setBG({Colors colors,bool hidden}){
    //TODO 省略代码
  }
setBG(Colors.red);

オプションの名前付きパラメーターはFlutterでよく使用され、コンポーネント定義で一般的に使用されます。

3.非同期サポート

Dartライブラリには、FutureオブジェクトまたはStreamオブジェクトを返す多くの関数があります。これらの関数は非同期関数と呼ばれ、IO操作などの時間のかかる操作を設定した後でのみ戻ります。この操作が完了するまで待機する代わりに。
asyncおよびawaitキーワードは非同期プログラミングをサポートしており、同期コードと同様に非同期コードを記述できます。
Future
は非同期操作の最終的な完了(成功または失敗を含む)を表し、Future APIの戻り値はすべてFutureオブジェクトであり、チェーンされた呼び出しに便利です。一般的に使用されるAPIは次のとおりです。

Future.then:非同期操作の受信結果を示します。コードを参照してください:

Future.delayed(new Duration(seconds: 2),(){
   return "hi world!";
}).then((data){
   print(data);
});

Future.catchErrorまたはFuture.onError:非同期で発生するエラーの受信を示します。コードを参照してください:

Future.delayed(new Duration(seconds: 2),(){
   //return "hi world!";
   throw AssertionError("Error");  
}).then((data){
   //执行成功会走到这里  
   print("success");
}).catchError((e){
   //执行失败会走到这里  
   print(e);
});

Future.delayed(new Duration(seconds: 2), () {
    //return "hi world!";
    throw AssertionError("Error");
}).then((data) {
    print("success");
}, onError: (e) {
    print(e);
});

Future.whenComplete:成功または失敗に関係なく実行されることを示します。コードを参照してください:

Future.delayed(new Duration(seconds: 2),(){
   //return "hi world!";
   throw AssertionError("Error");
}).then((data){
   //执行成功会走到这里 
   print(data);
}).catchError((e){
   //执行失败会走到这里   
   print(e);
}).whenComplete((){
   //无论成功或失败都会走到这里
});

Future.wait:配列内のすべての非同期タスクを実行するために使用されるFuture配列を受け取ります。その後、すべてのタスクが正常に実行された後に、そのコールバックが実行されます。それ以外の場合、別の非同期タスクが失敗するとすぐに、catchErrorコールバックが実行されます。

Future.wait([
  // 2秒后返回结果  
  Future.delayed(new Duration(seconds: 2), () {
    return "hello";
  }),
  // 4秒后返回结果  
  Future.delayed(new Duration(seconds: 4), () {
    return " world";
  })
]).then((results){
  print(results[0]+results[1]);
}).catchError((e){
  print(e);
});

非同期/待機:コールバック地獄を解決するために使用されます。使用方法はJavaScriptとまったく同じです。
以前のJavaコードでは、コールバックがコールバック地獄であるコールバックに適用される状況があります。Async / await
はこの問題を解決するために登場しました。比較コードを見てみましょう:
これは、コールバックがコールバックに適用されるケースです。コードの可読性は非常に低く、維持することが非常に困難です。

login("alice","******").then((id){
 //登录成功后通过,id获取用户信息    
 getUserInfo(id).then((userInfo){
    //获取用户信息后保存 
    saveUserInfo(userInfo).then((){
       //保存用户信息,接下来执行其它操作
        ...
    });
  });
})

以下は、Async / awaitで解決した後のコードです。

task() async {
   try{
    String id = await login("alice","******");
    String userInfo = await getUserInfo(id);
    await saveUserInfo(userInfo);
    //执行接下来的操作   
   } catch(e){
    //错误处理   
    print(e);   
   }  
}

Asyncは、関数が非同期であることを示すために使用されます。定義された関数はFutureオブジェクトを返します。thenメソッドを使用して、コールバック関数を追加できます。
Awaitの後にはFutureが続きます。これは、非同期タスクが完了することを示し、非同期タスクが完了するまでダウンしないことを示します。awaitはasync関数内に表示される必要があります。
Stream
は非同期イベントのデータを受信するために使用されます。Futureとは異なり、Futureはタスクの実行後にのみデータを持ち、Streamは複数の非同期タスクの結果を受信できます。トリガーされたタスクの成功または失敗。主にネットワークのダウンロードとファイルの読み書きに使用されます。例を参照してください:

Stream.fromFutures([
  // 1秒后返回结果
  Future.delayed(new Duration(seconds: 1), () {
    return "hello 1";
  }),
  // 抛出一个异常
  Future.delayed(new Duration(seconds: 2),(){
    throw AssertionError("Error");
  }),
  // 3秒后返回结果
  Future.delayed(new Duration(seconds: 3), () {
    return "hello 3";
  })
]).listen((data){
   print(data);
}, onError: (e){
   print(e.message);
},onDone: (){

});

上記のコードは順番に出力されます:

I/flutter (17666): hello 1
I/flutter (17666): Error
I/flutter (17666): hello 3

上記はFlutterの簡単な紹介とDart言語の簡単な紹介です。私はこれを簡単に理解しています。多くの知識はあまり明確ではありません。この知識を徐々に認識し、習得するためにフォローアップする必要があります。
次の章ではFlutterの環境設定について学びますが、これは難しいことではありません。結局のところ、それはツールを使用するスキルにすぎません。

元の記事を6件公開しました 受信しました1 再生回数442

おすすめ

転載: blog.csdn.net/qq_35809004/article/details/105557005