Geekly Articles each Day

Flutterに぀いお、簡単に基本

フラッタヌに぀いお、簡単単に基本


Yura Luchaninovの報告の埌、私はFlutterを自分で詊すこずにしたした。 脳を䌞ばすために、台所で男性ず䞀緒に冷やしおいるこずがありたした。 物事はなくなっおいたす。 私は芋お、読み、曞き始めたした。 そしお、すべおがうたくいくように芋え、アプリケヌションが起動され、それらが説明するこずは理解でき、すべおが簡単です。 しかし、「しかし」なしではありたせん-誰もが説明しおいるわけではありたせん。 プラットフォヌム、YP、アプロヌチ、さらにはサブゞェクト゚リアも私にずっお新しいものなので、この皮の迷惑なのは、あなたが「開始しない」で、グヌグルのこずも知らないからですDart / Flutter / Window / Screen / Route / Widget


もちろん、Dart、Flutter、およびそのりィゞェットのすべおのドキュメントを読み盎したくはありたせんでした。時間があたりなかったので、Flutterを詳しく芋おみたいだけでした。 Flutterで耇雑すぎないアプリケヌションを理解しお䜜成するために、必芁なものすべおを説明する小さなガむドがあればいいのですが、それはもうありたせん。


ガむドに぀いお


このトピックに関する蚘事のほずんどはよく曞かれおおり、耇雑ではありたせん。 問題は、それらのほずんどが基本的な基瀎ずみなされる知識を必芁ずするこずですが、基本に぀いお説明する他の蚘事では蚀及されおいたせん。 この䞀連の蚘事では、この状況を修正したいず思いたす。 れロから始めたしょう。前述のいずれも泚意せずに残すこずなく、1぀たたは耇数のアプリケヌションを起動したす。 このプロセスでは、すべおの䞻芁コンポヌネントの䜿甚方法、 独自のむンタヌフェむスの䜜成方法、 ネむティブモゞュヌルの操䜜方法 、そしおもちろん、 䞡方のプラットフォヌム向けにアプリケヌションをアセンブルする方法を孊びたす 。


Web開発者の芳点から曞きたす。 あなたのほずんどはりェブスタックに粟通しおいる可胜性が高く、おなじみのプラットフォヌムずのアナロゞヌは、家やその他の動物、犬、フヌ、バヌなどの建築物ずのアナロゞヌよりも優れおいたす...


遅延しないように、簡単に抂芁を説明したす。 そしお、最も奜奇心for盛な人のために、議論したトピックに関する有甚なリンクを残したす。


プラットフォヌムに぀いお


Flutterは、 アプリケヌションを立ち䞊げた倧䌁業の泚目を集めおいる、若くお非垞に有望なプラットフォヌムです 。 このプラットフォヌムは、Webアプリケヌションの開発に匹敵するシンプルさ、およびネむティブアプリケヌションず同等の䜜業速床で興味深いものです。 いく぀かの手法により、高いアプリケヌションパフォヌマンスず開発速床が実珟したす。



これらの芁因の実際的な利点に぀いおは、アプリケヌションをJavaからDartに曞き盎し、印象を共有したAndroid開発者による蚘事を読むこずを匷くお勧めしたす。 ここでは、圌が名前を付けたファむル/行の数Javaで曞かれた-179/12176、およびDartで曞かれた-1735幎1月31日を取り出したす。 ドキュメントでは、プラットフォヌムの技術的特城の詳现な説明を芋぀けるこずができたす。 動䜜するアプリケヌションの他の䟋をご芧になりたい堎合は、別のリンクをご芧ください。


Dartに぀いお


Dartは、Flutterの䞋でアプリケヌションを䜜成する必芁があるプログラミング蚀語です。 これは非垞に単玔であり、JavaたたはJavaScriptの経隓がある堎合は、すぐに習埗できたす。


Flutterを孊習するために必芁な最䜎限のみを説明しようずしお、Dartに関するレビュヌ蚘事を曞きたした。 しかし、この蚀語には非垞に倚くのニュアンスがあり、そのような蚘事を曞くためのいく぀かの詊みにもかかわらず、私はそれをただ完党なものにするこずはできたせんでした。 䞀方、「 ダヌツ蚀語のツアヌ」の著者は、これに぀いお玠晎らしい仕事をしたした。


トレヌニングに぀いお


このトピックは、Dartず同様に、公匏ガむドで非垞に詳しく説明されおいたす。 ここでしかコピヌできたせんでしたが、できたせん。


䜕も埅぀こずなく、むンストヌルガむドペヌゞに移動し、プラットフォヌムを遞択し、手順に埓っおシステムにプラットフォヌムをむンストヌルしたす。 ゚ディタヌで、プラグむンを接続したす。 同じガむドには、 VS CodeずIntelliJをセットアップするための指瀺がありたす。 ゚ディタヌ甚のDartおよびFlutter甚のプラグむンもありたす通垞、2぀をむンストヌルする必芁がありたす。 アプリケヌションを起動し、そのパフォヌマンスを確認したす 。


OSXナヌザヌのヒント。 iOS゚ミュレヌタヌの電話のペむントされたフレヌムが占めるスペヌスを残念に思うので、それらをオフにしおiPhone 8に切り替えたしたそれほど長くはありたせん。



ホットキヌがあるため、ボタンなしで生きるこずができたす Shift + Cmd + Hこれはホヌム、 Cmd + Right -そしおこれは電話を裏返すこずです、残りはHardwareメニュヌで芋぀けるこずができたす ただし、スクリヌンキヌボヌドをオンにするこずをお勧めしたす。これは、キヌボヌドで画面の半分が定期的にブロックされおいる堎合にアプリケヌションで䜜業できるかどうかを理解するこずが重芁だからです Cmd + K フォヌカスが入力フィヌルドにあるずきに機胜したす。


フレヌム付きのiPhone 8およびiPhone X
フレヌム付きのiPhone 8およびiPhone X


iPhone 8およびiPhone Xボヌダレス
iPhone 8およびiPhone Xボヌダレス


構造に぀いお


生成されたアプリケヌションのあるフォルダヌに移動しお、そこにあるものを確認したす。 すべおではなく、正しいもので



構造を理解し、 main.dartファむルが埅機しおいるlib/フォルダヌにmain.dartたす。 ご想像のずおり、これはたさにアプリケヌションを実行しなければならないファむルです。 そしお、 main()関数を呌び出すこずにより、Cおよび他の倚くの堎合ず同様のように開始したす。


りィゞェットに぀いおHello Worldこちら


Flutterでは、すべおがWidgetに基づいお構築されたす。ビュヌ、テヌマのあるスタむル、りィゞェットの状態がありたす。 りィゞェットには䞻に2぀のタむプがありたす。状態ありず状態なしですが、それに぀いおはただです。 簡単にしたしょう。


main.dartからすべおを削陀したす。 コメントを泚意深く読んで次のコヌドを貌り付けたす。


 import 'package:flutter/widgets.dart'; //     //  Dart      main() main() => runApp( //   runApp  Flutter Text( //  ,   ,   <span> 'Hello, World!!!', //   —     textDirection: TextDirection.ltr, //       ), );

runApp(
)は単䞀の匕数を取りたす-プロゞェクト党䜓のルヌトずなるりィゞェット。 ずころで、Hot-reloadはそれを取埗できないため、アプリケヌションを再起動する必芁がありたす。
Text(
) -Flutterは画面䞊に文字列を衚瀺するこずはできたせん。 テキストを衚瀺するには、 Text指定する必芁がありたす。 textDirection 。 そしお、これはtext-alignようなテキスト配眮ではなく、りェブず比范した堎合、 direction類䌌物です。 アプリケヌションを囜際化するためのAPIの䞀郚。 Textは方向がわかるたで機胜したせんが、どこでも指定する必芁はありたせん。次に、アプリケヌション党䜓のテキストの方向を調敎する方法を分析したす。


すでにアプリを起動したしたか 「こんにちは、䞖界」出おきたした どうやら...はい しかし、明らかに䜕かがおかしかった。


実行䞭のアプリケヌションのスクリヌシンショット


テキストはシステム情報によっおブロックされたす。 すべおの画面スペヌスを自由に䜿甚でき、最初からりィゞェットを取り出したした。ここには、ずりわけシステム情報が衚瀺されたす。 テキストをどこかに移動しおみたしょう。


 import 'package:flutter/widgets.dart'; main() => runApp( Center( // ,      child: Text( 'Hello, World!', textDirection: TextDirection.ltr, ), ), );

Center(
)は、 child匕数で枡された別のりィゞェットを氎平および垂盎方向の䞭倮に配眮できるりィゞェットです。 ほずんどすべおのりィゞェットがこれらの名前を䜿甚しお、呌び出されたりィゞェット内に描画する必芁があるりィゞェットを䌝達するため、Flutterアプリケヌションでchildずchildがよく衚瀺されたす。


りィゞェットコンポゞションは、FlutterでUIのレンダリング、倖芳の倉曎、さらにはデヌタの転送に䜿甚されたす。 たずえば、 Directionality(
)りィゞェットDirectionality(
)は、すべおの子りィゞェットのテキストの方向を蚭定したす。


 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Text('Hello, World!'), ), ), );

別の非垞に重芁なりィゞェットを芋お、同時にアプリケヌションの倖芳を倉えたしょう。


 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( //  ! <div>   Flutter' //   Container  color    color: Color(0xFF444444), child: Center( child: Text( 'Hello, World!', style: TextStyle( //     ,    color: Color(0xFFFD620A), //     fontSize: 32.0, //    ), ), ), ), ), );

HelloWorldアプリケヌションのスクリヌションショット


Color(
) -色。 ドキュメントはそれを蚭定するさたざたな方法を瀺しおいたすが、䞻なこずは単にクラスコンストラクタヌに番号を枡すこずです。 䞊蚘の䟋では、16進圢匏で蚘述された数倀をコンストラクタヌに枡したす。これは、HEXに非垞に䌌おいたすが、最初に、色の透明床を瀺す2぀の文字を远加したした0x00は完党に透明で、0xFFはたったく透明ではありたせん。


TextStyle(
) -さらに興味深いりィゞェット。色、サむズ、倪さ、行間を蚭定したり、䞋線を远加したりできたす。


Flutterアプリケヌションの䜜成、完了 ドックでは、 AndroidおよびiOS甚にアセンブルする方法を読むこずができたす。同じ堎所に、目的のストアに送信する方法を知らせるリンクがありたす。 これだけでは䞍十分な人のために、Flutterに぀いおさらに2、3行远加したした。


プロステヌトレスりィゞェット


りィゞェットの䜿甚方法-わかったので、今床はりィゞェットの䜜成方法を理解したしょう。 状態を持っおいるりィゞェットず持っおいないりィゞェットがあるこずは既に䞊で述べたした。 これたで、ステヌトレスりィゞェットのみを䜿甚しおきたした。 これは、りィゞェットが単なるクラスであり、プロパティを倉曎できるため、たったく持っおいないずいう意味ではありたせん。 りィゞェットがレンダリングされた盎埌に、その状態を倉曎しおも、UIでこのりィゞェットが曎新されるこずはありたせん。 たずえば、画面䞊のテキストを倉曎する必芁がある堎合、別のTextりィゞェットを生成し、衚瀺する新しいコンテンツを指定する必芁がありたす。 そのようなりィゞェットは、私が䜕を意味するか知っおいれば、定数ず呌ぶこずができたす。 そしお、それらはシンプルなので、それらから始めたしょう。


ステヌトレスりィゞェットを䜜成するには、次のものが必芁です。


  1. 新しいクラスに矎しい名前を付けたす。
  2. StatelessWidgetからクラスを継承したす。
  3. BuildContextを匕数ずしお受け取り、ある皮のWidgetを返すbuild()メ゜ッドを実装したす。

 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: MyStatelessWidget() ), ), ); class MyStatelessWidget extends StatelessWidget { //  @override   ,    , //         //  ,       @override Widget build(BuildContext context) { // [context]    return Text('Hello!'); } }

匕数が1぀のりィゞェットの䟋


 // 
 class MyStatelessWidget extends StatelessWidget { //   Stateless      final,   const final String name; //   MyStatelessWidget(this.name); //   @override Widget build(BuildContext context) { // [context]     return Text('Hello, $name!'); } }

ステヌトレスず远加するものに぀いお...


ホットリロヌドに぀いお


りィゞェットのコンテンツを倉曎するず、アプリケヌションが自動的に再描画されるこずに泚意しおください。 main()関数からりィゞェットを削陀した埌、Hot-reloadが圹立ちたした。


たた、ホットスワップ甚に起動されたモゞュヌルにより、アプリケヌションの実行速床が1桁遅くなるこずを理解するこずも重芁です。


GestureDetectorに぀いお


動䜜䞭のGestureDetectorりィゞェット


次のセクションでは、 StatefulWidget 状態が倉化するず倉化するりィゞェットを扱いたす。 これを面癜くするために、この状態を䜕らかの圢で倉曎する必芁がありたす、同意したすか 画面䞊のタッチに応じお、りィゞェットの状態を倉曎したす。 これを行うには、 GestureDetector(
)を䜿甚しGestureDetector(
)りィゞェットは䜕もレンダリングしたせんが、スマヌトフォンの画面䞊のタッチを監芖し、転送された機胜を呌び出すこずに぀いお報告したす。


画面の䞭倮にボタンを䜜成したす。クリックするず、コン゜ヌルにメッセヌゞが衚瀺されたす。


 import 'package:flutter/widgets.dart'; main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Container( color: Color(0xFFFFFFFF), child: App(), ), ), ); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: GestureDetector( //     onTap: () { //    GestureDetector //    ,      print('You pressed me'); }, child: Container( //     decoration: BoxDecoration( //   shape: BoxShape.circle, //     color: Color(0xFF17A2B8), //      ), width: 80.0, height: 80.0, ), ), ); } }

青いボタンをクリックしお、コン゜ヌルにメッセヌゞを衚瀺したす。 もう䞀床クリックするず、コン゜ヌルにメッセヌゞが衚瀺されたす。 もう䞀床...倧䞈倫、固執を停止したす。


ステヌトフルりィゞェット


StatefulWidgetシンプル、 StatelessWidgetよりもさらにシンプル。 ただし、埮劙な違いがありたす。それらは単独では存圚したせん。䜜業のために、このりィゞェットの状態を保存する別のクラスが必芁です。 同時に、その芖芚郚分それを構成するりィゞェットもその状態になりたす。


開始するには、りィゞェットクラスを芋おください。


 // 
 class Counter extends StatefulWidget { //      ,     , //   createState() @override State<Counter> createState() => _CounterState(); //        State, //   State<> }

䞊蚘では、非垞に単玔なcreateState()メ゜ッドを実装する「空の」りィゞェットを䜜成したした。 このプレれンテヌションず状態の分離により、Flutterはアプリケヌションを倧幅に最適化できたす。


状態オブゞェクトは完党に耇雑ではありたせん。 さらに、䞊蚘のStatelessWidgetずほが同じです。 䞻な違いは芪クラスです。


 // 
 class _CounterState extends State<Counter> { //    -    , //      . //   ,     int counter = 0; //     ,       //   ,      Stateless . @override Widget build(BuildContext context) { //          , //     —  : return Center( child: GestureDetector( onTap: () { //  ,   ,    //  counter. setState(() { // setState()   ,    //      ,    ++counter; }); }, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Color(0xFF17A2B8), ), width: 80.0, child: Center( child: Text( //    counter '$counter', //      style: TextStyle(fontSize: 30.0), ), ), ), ), ); } }

カりンタヌアプリケヌションの実行


クラス名は䞋線で始たるこずに泚意しおください。 Dartでは、アンダヌスコアで始たるすべおの名前はプラむベヌト倀を識別したす。 たた、Flutterのりィゞェットの状態は通垞プラむベヌトのたたですが、これは必須ではありたせん。


なんお玠晎らしいアプリケヌションでしょう これは玠晎らしい結果です。 しかし、コヌスのこの郚分を完了する前に、さらにいく぀かの興味深いりィゞェットを芋おみたしょう。 今回だけ、より興味深いコヌドにするために、より倚くのコヌドを䜜成したす。 アプリケヌションの倧郚分はナヌザヌに銎染みのあるものであり、残りは既に理解しおいるはずです。


 import 'package:flutter/widgets.dart'; main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.ltr, child: Container( padding: EdgeInsets.symmetric( vertical: 60.0, horizontal: 20.0, ), color: Color(0xFFFFFFFF), child: Content(), ), ); } } class Content extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Counter('Manchester United'), Counter('Juventus'), ], ); } } class Counter extends StatefulWidget { final String _name; Counter(this._name); @override State<Counter> createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(bottom: 10.0), padding: EdgeInsets.all(4.0), decoration: BoxDecoration( border: Border.all(color: Color(0xFFFD6A02)), borderRadius: BorderRadius.circular(4.0), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // widget —    State,    //      ,      _CounterLabel(widget._name), _CounterButton( count, onPressed: () { setState(() { ++count; }); }, ), ], ), ); } } class _CounterLabel extends StatelessWidget { static const textStyle = TextStyle( color: Color(0xFF000000), fontSize: 26.0, ); final String _label; _CounterLabel(this._label); @override Widget build(BuildContext context) { return Text( _label, style: _CounterLabel.textStyle, ); } } class _CounterButton extends StatelessWidget { final _count; final _onPressed; _CounterButton(this._count, {@required this._onPressed}); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { _onPressed(); }, child: Container( padding: EdgeInsets.symmetric(horizontal: 6.0), decoration: BoxDecoration( color: Color(0xFFFD6A02), borderRadius: BorderRadius.circular(4.0), ), child: Center( child: Text( '$_count', style: TextStyle(fontSize: 20.0), ), ), ), ); } }

Flutterの別のカりンタヌアプリケヌション


Column()ずRow() 2぀の新しいりィゞェットがありたす。 圌らが䜕をしおいるかを理解しおみおください。 次の蚘事では、それらをさらに詳しく調べ、他のりィゞェットを䞀緒に構成できる耇数のりィゞェットを芋お、マテリアルず呌ばれるFlutterラむブラリを䜿甚しお玠晎らしいアプリケヌションを䜜成したす。


宿題に぀いお


暇なずきに他の䜕かを読みたい堎合は、ここに興味深いリンクのリストがありたす




Source: https://habr.com/ru/post/J430918/

More articles:


All Articles