♓️ 🤵 🎐 [بواسطة الاحواض] الرفرفة. الجزء 3. للمطورين رد فعل الأصلية 🗿 ◽️ 🗣️

نواصل التفسير الخاطئ للوثائق الرسمية للرفرفة في شكل سؤال وجواب. هذا هو الجزء الثالث ، وسيكون أكثر فائدة لمطوري React Native. في هذا التفسير ، يمكنك العثور على إجابات للأسئلة المتداولة ، وكذلك تحديد مقدار الجهد الذي تحتاج إلى القيام به من أجل التبديل من إطار عمل مشترك بين الأنظمة الأساسية وآخر.

إذا لم تكن هذه المعلومات كافية أو كانت لديك خبرة في التطوير المحلي لمنصة معينة ، فنوصيك بالبحث في أجزاء أخرى:

رفرفة. الجزء 1. لمطوري أندرويد
رفرفة. الجزء 2. لمطوري دائرة الرقابة الداخلية
رفرفة. الجزء 3. للمطورين رد فعل الأصلية
رفرفة. الجزء 4. لمطوري الويب
رفرفة. الجزء 5. ل Xamarin.Forms المطورين

المحتويات:

قليلا عن دارت

السؤال:

أين هي نقطة الدخول؟

الجواب هو:

الوظيفة main() .

الاختلافات:

لا يحتوي JavaScript على نقطة إدخال محددة مسبقًا ؛ يمكن أن تكون أي وظيفة محددة بواسطة المطور. في دارت ، هذا هو main() فقط main() .

السؤال:

كيفية الإخراج إلى وحدة التحكم؟

الجواب هو:

باستخدام وظيفة print() .

الاختلافات:

في JavaScript ، يتم إخراج وحدة التحكم باستخدام console.log() .

مثال:

 print('Hello world!');

السؤال:

كيفية إنشاء وتعيين المتغيرات / الحقول؟

الجواب هو:

دارت يدعم كل من الكتابة الديناميكية والقوية. لذلك ، يمكن إنشاء المتغيرات / الحقول في أي نوع من أنواع الطباعة يناسبك. الاحالة يحدث من خلال واحد =.

الاختلافات:

الكتابة القوية غير مدعومة في JavaScript.

معلومات اضافية:

مزيد من التفاصيل هنا.

مثال:

 String name = 'dart'; // Explicitly typed as a string. var otherName = 'Dart'; // Inferred string. // Both are acceptable in Dart.

السؤال:

ما هي القيمة الافتراضية للمتغير / الحقل؟

الجواب هو:

null

الاختلافات:

جافا سكريبت غير undefined بشكل افتراضي.

معلومات اضافية:

مزيد من التفاصيل هنا.

السؤال:

كيفية التحقق من قيمة null أو ل 0؟

الجواب هو:

باستخدام التحقق الصريح == .

الاختلافات:

في JavaScript ، كجزء من if check ، فإن الرقم 1 أو أي كائن non-null سيكون معادلاً لـ true . في دارت ، فقط true منطقية true ما يعادل true .

مثال:

 var myNull = null; if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); }

السؤال:

كيف تعلن الوظائف؟

الجواب هو:

في Dart ، يمكن أن تكون الوظائف ، مثل الحقول ، بالكتابة الديناميكية أو القوية لقيمة الإرجاع. يتم الإعلان عن الكتابة الديناميكية ببساطة عن طريق اسم الوظيفة واختيارياً حسب المعلمات ، في حين أن النوع المكتوب في البداية لا يزال لديه نوع إرجاع.

الاختلافات:

في JavaScript ، يتم الإعلان عن function باستخدام function الكلمة الأساسية ، متبوعةً بالاسم والمعلمات اختياريًا.

معلومات اضافية:

مزيد من التفاصيل هنا.

مثال:

 fn() { return true; } // can also be written as bool fn() { return true; }

السؤال:

ما هو ما يعادل الوعد ؟

الجواب هو:

مستقبل

معلومات اضافية:

دارت ، مثل جافا سكريبت ، تدعم التنفيذ المفرد. المستقبل في دارت له نفس معنى الوعد في رد الفعل الأصلي.
مزيد من التفاصيل هنا. .

مثال:

 import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() { final url = 'https://httpbin.org/ip'; return http.get(url).then((response) { String ip = jsonDecode(response.body)['origin']; return ip; }); } } main() { final example = new Example(); example ._getIPAddress() .then((ip) => print(ip)) .catchError((error) => print(error)); }

السؤال:

ما هو التماثل async await ؟

الجواب هو:

async await

الاختلافات:

في JavaScript ، ترجع وظائف async Promise ، في Dart ، فإنها تُرجع Future . تنتظر بشكل متزامن تتوقع نتيجة استدعاء وظيفة غير متزامن.

معلومات اضافية:

مزيد من التفاصيل هنا.

مثال:

 import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future<String> _getIPAddress() async { final url = 'https://httpbin.org/ip'; final response = await http.get(url); String ip = jsonDecode(response.body)['origin']; return ip; } } main() async { final example = new Example(); try { final ip = await example._getIPAddress(); print(ip); } catch (error) { print(error); } }

الأساسيات

السؤال:

كيفية إنشاء مشروع تطبيق على الرفرفة؟

الجواب هو:

باستخدام IDE مع تثبيت الإضافات Flutter و Dart.
باستخدام flutter create {projectname} .

الاختلافات:

لإنشاء مشروع في React Native ، استخدم الأمر create-react-native-app {projectname} .

معلومات اضافية:

مزيد من التفاصيل هنا.

السؤال:

كيف تبدأ التطبيق؟

الجواب هو:

استخدام وظيفة التشغيل في IDE مع تثبيت إضافات Flutter و Dart.
باستخدام قيادة flutter run .

الاختلافات:

يستخدم npm run Native npm run أو أوامر yarn run التطبيق.

السؤال:

كيفية استيراد الحاجيات؟

الجواب هو:

في Flutter ، يتم تقسيم جميع عناصر واجهة المستخدم إلى حزم ، وبالتالي فإن استيراد الحزمة يكفي لاستخدام عناصر واجهة المستخدم الخاصة بها.

الاختلافات:

في React Native ، تحتاج إلى استيراد كل عنصر واجهة مستخدم.

مثال:

 import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/my_widgets.dart';

السؤال:

كيفية استخدام الحاجيات والتداخل لبناء شجرة القطعة؟

الجواب هو:

في رفرفة ، كل شيء تقريبا هو الحاجيات. حتى كائن التطبيق هو القطعة. يمكن دمج كل عنصر واجهة مستخدم في الأصل. من خلال الجمع بين الحاجيات ، يمكنك إنشاء تسلسل هرمي يسمى شجرة القطعة. هي التي تتحول فيما بعد إلى شاشة على الشاشة.

مثال:

 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello world'), ), ), ); } }

السؤال:

كيفية إنشاء مكونات قابلة لإعادة الاستخدام؟

الجواب هو:

في Flutter ، يمكنك إنشاء فئة عنصر واجهة مستخدم وإعادة استخدامها. المعلمات المستخدمة هي حقول الصف.

الاختلافات:

في React Native ، لتغيير معلمات عنصر معاد استخدامه ، تحتاج إلى تمييزها كدعائم.

معلومات اضافية:

يمكن تعريف المعلمات في المُنشئ بطريقتين: عن طريق التعداد المنتظم والاختياري ، باستخدام الأقواس المتعرجة {} . تحدث الاختلافات عند استخدام المعلمات لاستدعاء المنشئ.
في التعداد المعتاد ، جميع المعلمات مطلوبة ، وعند استدعاء المنشئ ، لا يمكنك تحديد أي معلمة معينة يتم تمريرها ، لأن هم بسبب النظام.
باستخدام الخيار الاختياري ، يمكنك استخدام أي ترتيب يتم نقل المعلمات به ، ولكن يجب عليك تحديد المعلمة المحددة التي يتم إرسالها أو عدم إرسالها على الإطلاق. لوضع علامة على معلمة اختيارية كما هو مطلوب ، استخدم التعليق التوضيحي @required .

مثال:

 class CustomCard extends StatelessWidget { CustomCard({@required this.index, @required this.onPress}); final index; final Function onPress; @override Widget build(BuildContext context) { return Card( child: Column( children: <Widget>[ Text('Card $index'), FlatButton( child: const Text('Press'), onPressed: this.onPress, ), ], ) ); } } ... // Usage CustomCard( index: index, onPress: () { print('Card $index'); }, ) ...

هيكل المشروع والموارد

السؤال:

من أين تبدأ كتابة التعليمات البرمجية؟

الجواب هو:

في {projectname}/lib/main.dart .

السؤال:

ما هو هيكل الملف في مشروع الرفرفة؟

الجواب هو:

 ┬ └ projectname ┬ ├ android -   Android . ├ build - iOS  Android  . ├ ios -   iOS . ├ lib - Dart . ┬ └ src - Contains additional source files. └ main.dart -    . ├ test -  . └ pubspec.yaml -     .  package.json   React Native.

السؤال:

حيث لتخزين الموارد والأصول وكيفية استخدامها؟

الجواب هو:

يتم تخزين الروابط إلى الموارد وتبعيات المشروع في ملف pubspec.yaml . في الواقع ، يمكنك وضعها في أي مجلد داخل lib ، والأهم من ذلك ، تحديد المسار لهم في pubspec.yaml . يمكنك استخدامها في مشروع إما باستخدام تطبيقات مصغّرة ، على سبيل المثال AssetImage ، أو مباشرة باستخدام AssetBundle .

معلومات اضافية:

مزيد من التفاصيل هنا.

مثال:

إعلان الأصول في pubspec.yaml

 flutter: assets: - assets/my_icon.png - assets/background.png

استخدام في الرمز

 image: AssetImage('assets/background.png'),

السؤال:

كيفية تنزيل الصور من الشبكة؟

الجواب هو:

باستخدام Image.network .

مثال:

 body: Image.network( 'https://flutter.io/images/owl.jpg',

السؤال:

كيفية توصيل حزم الطرف الثالث والمكونات الإضافية؟

الجواب هو:

باستخدام dependencies في pubspec.yaml .

الاختلافات:

يستخدم React Native yarn add {package-name} أو npm install --save {package-name} لإضافة التبعيات.

معلومات اضافية:

باستخدام الحزم
حزمة وتطوير البرنامج المساعد
الإضافات الشعبية لرفرفة

مثال:

 dependencies: flutter: sdk: flutter google_sign_in: ^3.0.3

المشاهدات

السؤال:

ما هو ما يعادل حاوية عرض ؟

الجواب هو:

جميع الأدوات الأساسية للتخطيط ، على سبيل المثال الحاوية ، العمود ، الصف والمركز .

معلومات اضافية:

مزيد من التفاصيل هنا.

السؤال:

ما هو التماثلية لقائمة FlatList أو SelectionList ؟

الجواب هو:

ListView

مثال:

 var data = [ ... ]; ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return Text( data[index], ); }, )

السؤال:

كيفية استخدام قماش؟

الجواب هو:

باستخدام فصول CustomPaint و CustomPainter .

الاختلافات:

في React Native ، لا توجد وسيلة لرسم باستخدام Canvas خارج الصندوق. هناك مكونات إضافية خاصة بجهات خارجية ، على سبيل المثال react-native-canvas .

مثال:

 class MyCanvasPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint = Paint(); paint.color = Colors.amber; canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint); Paint paintRect = Paint(); paintRect.color = Colors.lightBlue; Rect rect = Rect.fromPoints(Offset(150.0, 300.0), Offset(300.0, 400.0)); canvas.drawRect(rect, paintRect); } bool shouldRepaint(MyCanvasPainter oldDelegate) => false; bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) => false; } class _MyCanvasState extends State<MyCanvas> { @override Widget build(BuildContext context) { return Scaffold( body: CustomPaint( painter: MyCanvasPainter(), ), ); } }

تخطيطات

السؤال:

كيفية استخدام الحاجيات لوصف خصائص التخطيط؟

الجواب هو:

يستخدم Flutter تطبيقات مصغّرة لخصائص التخطيط ، على سبيل المثال:
العمود ، الصف ، الحشو ، محاذاة ، المكدس .

الاختلافات:

في React Native ، يمكن في الغالب تعيين خصائص التخطيط باستخدام props .

معلومات اضافية:

قائمة كاملة من الحاجيات

السؤال:

كيفية وضع الحاجيات في التخطيط؟

الجواب هو:

لتحديد الموضع المطلق ، استخدم أداة Stack . لالنسبية - الحاجيات المختلفة ومجموعاتها ، والتي يمكن العثور عليها هنا .

مثال:

 Stack( alignment: const Alignment(0.6, 0.6), children: <Widget>[ CircleAvatar( backgroundImage: NetworkImage( 'https://avatars3.githubusercontent.com/u/14101776?v=4'), ), Container( decoration: BoxDecoration( color: Colors.black45, ), child: Text('Flutter'), ), ], )

أسلوب

السؤال:

كيفية أسلوب المكونات؟

الجواب هو:

في معظم الأحيان ، فإن الحاجيات لها خاصية style .

الاختلافات:

React Native يستخدم stylesheets.create للتصميم.

مثال:

 var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight: FontWeight.w600); ... Center( child: Column( children: <Widget>[ Text( 'Sample text', style: textStyle, ), Padding( padding: EdgeInsets.all(20.0), child: Icon(Icons.lightbulb_outline, size: 48.0, color: Colors.redAccent) ), ], ), )

السؤال:

كيفية استخدام الرموز والألوان؟

الجواب هو:

باستخدام فئات الأيقونات والألوان .

الاختلافات:

React Native لا يحتوي على دعم للأيقونات خارج الصندوق.

مثال:

الرموز

 Icon(Icons.lightbulb_outline, color: Colors.redAccent)

الألوان

 class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, textSelectionColor: Colors.red ), home: SampleAppPage(), ); } }

السؤال:

كيفية تخصيص السمة الأسلوبية للتطبيق؟

الجواب هو:

باستخدام فئة ThemeData .

الاختلافات:

في React Native ، يتم تكوين سمة شائعة من خلال stylesheets .

مثال:

 @override Widget build(BuildContext context) { return Theme( data: ThemeData( primaryColor: Colors.cyan, brightness: brightness, ), child: Scaffold( backgroundColor: Theme.of(context).primaryColor, ... ... ), ); }

إدارة الدولة

السؤال:

كيفية تحديث عرض الحاجيات؟

الجواب هو:

باستخدام StatefulWidget وحالتها . يحتوي Flutter على نوعين من الحاجيات: StatelessWidget و StatefulWidget . أنها تعمل بنفس الطريقة ، والفرق الوحيد هو في حالة التقديم.

الاختلافات:

StatelessWidget لديه حالة غير قابلة للتغيير. مناسب لعرض النص والشعار ، إلخ. أي إذا كان يجب عدم تغيير العنصر على الشاشة خلال وقت العرض بالكامل ، فهذا يناسبك. كما يمكن استخدامه كحاوية لعناصر واجهة المستخدم.

يحتوي StatefulWidget على حالة الولاية ، التي تخزّن معلومات حول الحالة الحالية. إذا كنت ترغب في تغيير عنصر على الشاشة عند إجراء بعض الإجراءات (جاءت استجابة من الخادم ، فقد نقر المستخدم على زر ، وما إلى ذلك) - هذا هو خيارك.

مثال:

1) StatelessWidget - النص

 Text( 'I like Flutter!', style: TextStyle(fontWeight: FontWeight.bold), );

2) StatefulWidget - عند النقر فوق الزر (FloatingActionButton) ، يتغير النص الموجود في عنصر واجهة تعامل النص من I Like Flutter إلى Flutter!

 import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { //     . @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, ), home: SampleAppPage(), ); } } class SampleAppPage extends StatefulWidget { SampleAppPage({Key key}) : super(key: key); @override _SampleAppPageState createState() => _SampleAppPageState(); } class _SampleAppPageState extends State<SampleAppPage> { //   String textToShow = "  Flutter"; void _updateText() { setState(() { //   textToShow = "Flutter !"; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: Center(child: Text(textToShow)), floatingActionButton: FloatingActionButton( onPressed: _updateText, tooltip: ' ', child: Icon(Icons.update), ), ); } }

التخزين المحلي

السؤال:

كيفية تخزين بيانات key-value في التطبيق؟

الجواب هو:

باستخدام البرنامج المساعد Shared_preferences .

الاختلافات:

React Native يستخدم AsyncStorage .

مثال:

اتصال اعتمادا

 dependencies: flutter: sdk: flutter shared_preferences: ^0.4.3

استخدام

 SharedPreferences prefs = await SharedPreferences.getInstance(); _counter = prefs.getInt('counter'); prefs.setInt('counter', ++_counter); setState(() { _counter = _counter; });

السؤال:

كيفية تخزين البيانات المعقدة؟

الجواب هو:

باستخدام مكونات قاعدة البيانات ، على سبيل المثال sqflite أو خلية .

ملاحة

السؤال:

كيفية التنقل بين الشاشات؟

الجواب هو:

للتنقل بين الشاشات ، يتم استخدام فئتي Navigator و Route .

الاختلافات:

يستخدم React Native StackNavigator و TabNavigator و DrawerNavigator .

لدى Flutter طريقتان للملاحة:

وصف الخريطة مع أسماء الطريق
انتقل مباشرة إلى الطريق .

يستطيع المستكشف القيام بالدفع () أو pop () إلى المسار الذي تحدده.

مثال:

 void main() { runApp(CupertinoApp( home: MyAppHome(), // becomes the route named '/' routes: <String, WidgetBuilder> { '/a': (BuildContext context) => MyPage(title: 'page A'), '/b': (BuildContext context) => MyPage(title: 'page B'), '/c': (BuildContext context) => MyPage(title: 'page C'), }, )); } Navigator.of(context).pushNamed('/b');

السؤال:

كيفية استخدام علامة التبويب التنقل؟

الجواب هو:

باستخدام الفئات: TabController و TabBar و Tab و TabBarView .

الاختلافات:

React Native يستخدم createBottomTabNavigator و TabNavigation .

معلومات اضافية:

TabController ينسق TabBar و TabBarView .
TabBar يعرض قائمة أفقية من علامات التبويب.
علامة التبويب يعرض علامة تبويب.
يعرض TabBarView محتوى علامة التبويب المحددة.

مزيد من التفاصيل هنا. .

مثال:

 class _NavigationHomePageState extends State<NavigationHomePage> with SingleTickerProviderStateMixin { TabController controller=TabController(length: 2, vsync: this); @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: Material ( child: TabBar( tabs: <Tab> [ Tab(icon: Icon(Icons.person),) Tab(icon: Icon(Icons.email),), ], controller: controller, ), color: Colors.blue, ), body: TabBarView( children: <Widget> [ home.homeScreen(), tabScreen.tabScreen() ], controller: controller, ) ); } }

السؤال:

كيفية استخدام الملاحة درج؟

الجواب هو:

باستخدام فئة الدرج .

الاختلافات:

React Native يستخدم createDrawerNavigator و DrawerNavigation .

مثال:

 @override Widget build(BuildContext context) { return Scaffold( drawer: Drawer( child: ListTile( leading: Icon(Icons.change_history), title: Text('Screen2'), onTap: () { Navigator.of(context).pushNamed('/b'); }, ), elevation: 20.0, ), appBar: AppBar( title: Text('Home'), ), body: Container(), ); }

الإيماءات والتعامل مع الحدث اللمس

السؤال:

كيفية التعامل مع نقرة؟

الجواب هو:

إذا كانت القطعة تدعم النقرات ، فحينها onPressed() . إذا لم يكن كذلك ، فاستخدم أداة GestureDetector .

الاختلافات:

React Native يستخدم PanResponder أو Touchable لهذا الغرض.

مثال:

 GestureDetector( child: Scaffold( appBar: AppBar( title: Text('Gestures'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Tap, Long Press, Swipe Horizontally or Vertically '), ], ) ), ), onTap: () { print('Tapped'); }, onLongPress: () { print('Long Pressed'); }, onVerticalDragEnd: (DragEndDetails value) { print('Swiped Vertically'); }, onHorizontalDragEnd: (DragEndDetails value) { print('Swiped Horizontally'); }, );

طلبات HTTP

السؤال:

كيفية الحصول على البيانات من طلبات API؟

الجواب هو:

باستخدام البرنامج المساعد المتشعب .

الاختلافات:

React Native يستخدم fetch API .

مثال:

اتصال البرنامج المساعد

 dependencies: flutter: sdk: flutter http: <latest_version>

استرجاع البيانات

 final url = Uri.https('httpbin.org', 'ip'); final httpClient = HttpClient(); _getIPAddress() async { var request = await httpClient.getUrl(url); var response = await request.close(); var responseBody = await response.transform(utf8.decoder).join(); String ip = jsonDecode(responseBody)['origin']; setState(() { _ipAddress = ip; }); }

شكل الإدخال

السؤال:

ما الحاجيات لاستخدامها في المدخلات؟

الجواب هو:

TextField بالاقتران مع TextEditingController أو TextFormField .

الاختلافات:

رد فعل الأصلية يستخدم TextInput .
يختلف TextFormField عن TextField في التحقق من الصحة ومنطق تخزين القيم في الحقول.

مثال:

الحقل النصي

 final TextEditingController _controller = TextEditingController(); ... TextField( controller: _controller, decoration: InputDecoration( hintText: 'Type something', labelText: 'Text Field ' ), ), RaisedButton( child: Text('Submit'), onPressed: () { showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('You typed ${_controller.text}'), ), ); }, ), )

TextFormField

 final formKey = GlobalKey<FormState>(); ... Form( key:formKey, child: Column( children: <Widget>[ TextFormField( validator: (value) => !value.contains('@') ? 'Not a valid email.' : null, onSaved: (val) => _email = val, decoration: const InputDecoration( hintText: 'Enter your email', labelText: 'Email', ), ), RaisedButton( onPressed: _submit, child: Text('Login'), ), ], ), ) void _submit() { final form = formKey.currentState; if (form.validate()) { form.save(); showDialog( context: context, child: AlertDialog( title: Text('Alert'), content: Text('Email: $_email, password: $_password'), ) ); } }

رمز النظام الأساسي المحدد

السؤال:

كيفية تحديد النظام الأساسي الذي يتم تشغيل الرمز عليه؟

الجواب هو:

باستخدام فئة حقل platform في سمة أو فئة النظام الأساسي .

مثال:

مجال المنصة

 if (Theme.of(context).platform == TargetPlatform.iOS) { return 'iOS'; } else if (Theme.of(context).platform == TargetPlatform.android) { return 'android'; } else if (Theme.of(context).platform == TargetPlatform.fuchsia) { return 'fuchsia'; } else { return 'not recognised '; }

منصة الفئة

 if (Platform.isIOS) { return 'iOS'; } else if (Platform.isAndroid) { return 'android'; } else if (Platform.isFuchsia) { return 'fuchsia'; } else { return 'not recognised '; }

السؤال:

كيفية استدعاء رمز النظام الأساسي الأصلي؟

الجواب هو:

عبر MethodChannel .

معلومات اضافية:

مزيد من التفاصيل هنا. .

التصحيح

السؤال:

ما هي أدوات تصحيح التطبيق؟

الجواب هو:

DevTools .

السؤال:

كيفية جعل hot reload ؟

الجواب هو:

إذا تم تشغيل التطبيق من IntelliJ IDE أو Android Studio ، فعندئذٍ ، يمكنك ⌘s/ctrl-s أو النقر على أيقونة ⌘s/ctrl-s . إذا بدأت من المحطة ، ثم بإدخال الحرف r .

الاختلافات:

يستخدم ⌘R/Ctrl+R Native ⌘R/Ctrl+R iOS ، مزدوج R لنظام Android.

السؤال:

كيفية الوصول إلى قائمة المطور في التطبيق؟

الجواب هو:

إذا كان الإطلاق من IDE ، فاستخدم أدوات IDE. إذا من وحدة التحكم ، ثم استخدم ح.

الاختلافات:

يستخدم ⌘D/Ctrl+D Native ⌘D/Ctrl+D ⌘M/Ctrl+M iOS و ⌘M/Ctrl+M لنظام Android.

معلومات اضافية:

قائمة كاملة بالفرق

تأثير	فريق في المحطة	وظائف وحقول
التسلسل الهرمي القطعة	ث	debugDumpApp ()
تجعل شجرة	تي	debugDumpRenderTree ()
مجموعة	L	debugDumpLayerTree ()
إمكانية الوصول	S (ترتيب اجتياز) أو U (ترتيب اختبار الدخول العكسي)	debugDumpSemantics ()
مفتش القطعة	أنا	WidgetsApp.showWidgetInspectorOverride
عرض خطوط البناء	ص	debugPaintSizeEnabled
محاكاة مختلفة OS	س	defaultTargetPlatform
أداء	P	WidgetsApp. showPerformanceOverlay
لقطة للشاشة flutter.png	الصورة
إغلاق التطبيق	ف

حيوية

السؤال:

ما يستخدم للرسوم المتحركة؟

الجواب هو:

الرسوم المتحركة و AnimationController .

الاختلافات:

React Native يستخدم Animation API .

معلومات اضافية:

مزيد من التفاصيل هنا.

السؤال:

كيفية إضافة الرسوم المتحركة fade-in بسيطة؟

الجواب هو:

باستخدام FadeTransition .

مثال:

 import 'package:flutter/material.dart'; void main() { runApp(Center(child: LogoFade())); } class LogoFade extends StatefulWidget { _LogoFadeState createState() => _LogoFadeState(); } class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin { Animation animation; AnimationController controller; initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 3000), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn); animation = Tween(begin: 0.0, end: 1.0).animate(curve); controller.forward(); } Widget build(BuildContext context) { return FadeTransition( opacity: animation, child: Container( height: 300.0, width: 300.0, child: FlutterLogo(), ), ); } dispose() { controller.dispose(); super.dispose(); } }

السؤال:

كيفية إضافة الرسوم المتحركة السريعة إلى عناصر القائمة؟

الجواب هو:

باستخدام مفهومة .

مثال:

 child: Dismissible( key: key, onDismissed: (DismissDirection dir) { cards.removeLast(); }, child: Container( ... ), ),

المكافئات المكونة

السؤال:

ما هي المكافئات من رفرفة مقارنة React Native؟

الجواب هو:

الإضافات الرفرفة

السؤال:

كيفية الوصول إلى GPS؟

الجواب هو:

باستخدام البرنامج المساعد geolocator .

السؤال:

كيفية الوصول إلى الكاميرا؟

الجواب هو:

باستخدام البرنامج المساعد image_picker .

السؤال:

كيفية تسجيل الدخول عبر Facebook؟

الجواب هو:

باستخدام البرنامج المساعد flutter_facebook_login .

السؤال:

كيفية استخدام firebase؟

الجواب هو:

يدعم Firebase إضافات الطرف الأول لـ Flutter :

firebase_admob لـ Firebase AdMob ؛
firebase_analytics for Firebase Analytics؛
firebase_auth لـ Firebase Auth؛
firebase_database لـ Firebase RTDB ؛
firebase_storage لتخزين Firebase Cloud ؛
firebase_messaging for Firebase Messaging (FCM) ؛
flutter_firebase_ui للتكامل السريع لـ Firebase Auth (Facebook و Google و Twitter والبريد الإلكتروني) ؛
cloud_firestore for Firebase Cloud Firestore.

فيما يلي إجابات الأسئلة الأساسية. آمل أن يكون تفسيري مفيدًا لك ، وإذا لم تكتب على Flutter بعد ، ففكر في الأمر على الأقل. هذا يعني أنه قد تكون هناك إضافة إلى رفرفة Flutter للمطورين ، وسنعمل معًا على جعل العالم مكانًا أفضل من خلال تطبيقات مريحة وسريعة مطورة! نعم رد فعل لن يكسر الأم!

الرد الأم	رفرفة
زر	RaisedButton
زر	FlatButton
ScrollView	ListView
FlatList	ListView.builder ()
صورة	صورة
شكلي	ModalRoute
ActivityIndicator	CircularProgressIndicator
ActivityIndicator	LinearProgressIndicator
RefreshControl	RefreshIndicator
رأي	حاوية
رأي	عمود
رأي	صف
رأي	مركز
رأي	حشوة
TouchableOpacity	GestureDetector
TextInput	TextInput
نص	نص
تحول	تحول
المتزلج	المتزلج