A demo
I, on the Dart language
Before looking at the code, first of all we have to understand at Dart language, Flutter use Dart developed in the application layer, and the support it is developed in C ++ engine
Dart's design draws on a comprehensive Java and JavaScript, and Java syntax similar to the static aspects, such as the type definitions and function declarations such as generics, such as functional characteristics, asynchronous support on the dynamic characteristics.
- Dart is an object-oriented language
- Dart is a strongly typed language
- Dart has a GC mechanism
- Dart will first run before parsing code
- Dart in, Object class is the foundation class for all objects
- Dart asynchronous support "Future returns the results" and "JS is based on similar
asyncmethods andawaitexpression." - Dart no scope keyword, if the identifier indicates the beginning _ kind of private property or method
- Dart is single-threaded
Second, on the Widget
Flutter Widget modern response frame building, the central idea is to build your UI with widget.
Widget can be translated components and the like, in the form described in the current view to show the current configuration and state, when the state is changed Widget, the UI will be reconstituted, Flutter will compare different before and after the change, to render tree to determine the bottom transition from one state to the minimum required to change a state of the next; and this idea has some similarities React.
Based on the above, then there are two parent classes, stateless and stateful StatelessWidget StatefulWidget, direct integration of the Widget class from these two abstract classes, daily use of the more commonly used.
-
StatelessWidgetA scenario does not require maintenance state, stateless component immutable, page constructed by build method; -
StatefulWidget for stateful scene change,
createState()for creating a subclass inherits State class with Stateful widget corresponding call build method build page classes in the State
Third, Code: demo
Main.dart //
Import 'Package: Flutter / material.dart'; // Material introducing a UI component library, from Google, making more vivid display
Import 'home.dart';
void main () => RunApp (the MyApp () ); // entry procedures, call RunApp () to start the program "=>" is a shorthand method for single-line
class the extends StatelessWidget the MyApp {
// inherited the MyApp is a stateless class statelessWidget
@override
the Widget Build (BuildContext context) { // call the build method build UI interface
application return MaterialApp (// represents the Material design style, but also a Widget, define the application name, topic, Home
title: application name 'Flutter Demo mfw', // display the task Manager window
theme: ThemeData (// application color theme
primarySwatch: Colors.blue,
),
Home: Home (title: 'Flutter Demo Home Page'), // the default application to show the interface
);
}
}
// Home.dart: a counter, jumps three routes
Home the extends StatefulWidget {class
Home ({Key Key, this.title}): Super (Key: Key);
Final String title;
@override
_HomeState createState () => _HomeState ();
}
class _HomeState the extends State <Home> {
int = 0 _counter;
void _incrementCounter () {// increase the numerical buttons monitoring method
setState (() {// state change notification framework Flutter, Flutter frame after receiving the notification, executes the rebuild method build interface
_counter ++;
});
}
@override
the Widget Build (BuildContext context) {
return the Scaffold (
appbar: the appBar (
title: the Text (widget.title),
),
body: Center (
Child: the Column (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have clicked the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
FlatButton(
child: Text("open new case1"),
textColor: Colors.blue,
onPressed: (){
Navigator.push( context,
MaterialPageRoute(builder: (context){
return NewRoute();
}));
},
),
FlatButton(
child: Text("open new case2"),
textColor: Colors.blue,
onPressed: (){
Navigator.push( context,
MaterialPageRoute(builder: (context){
return NewRoute1();
}));
},
),
FlatButton(
child: Text("open new case3"),
textColor: Colors.blue,
onPressed: (){
Navigator.push( context,
MaterialPageRoute(builder: (context){
return Route3();
}));
},
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
|
A summary
One of the problems that may be encountered during the test
1, Widget nest of problems that may lead to
2, due to the single-threaded mechanism, Flutter itself does not lead to crash, will Caton
3, UI overflow error, suggesting overflow
4, due to the somewhat cumbersome state management, to achieve animation effects need attention
5, each jump between native and flutter should be noted that, if there are problems getting the native rights
Second, a brief summary of aspects of the code
// 每个widget继承自StatelessWidget或者StatefuleWidegt
// statelessWidget状态变化不大，statefulWidget分成两个，一个有build构建方法，一个继承自state类
// 一个标准statelessWidget的Widget构建过程如下
class TestWidget extends StatelessWidegt{
@override
Widget build(BuildContext context){// build页面
return 控件名（
xxxx(child：内嵌其他控件
),
.....
）
}
}；
// 那么一个statefulWidget的构建过程
class Test extends StatefulWideget{
Route3({Key key}) : super(key: key);
@override
_TestState createState() => _TestState(); //新建state类
}
class _Route3State extends State（Test）{
@override
Widget build(BuildContext context)// 在state类里build页面
....
} |
三、讲解问题记录
1、flutter实现跨平台的原理是什么
Flutter跨平台最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter不使用浏览器技术，也不使用Native的原生控件，它使用自己的渲染引擎来绘制widget。
对于Android平台，Flutter引擎的C/C++代码是由NDK编译，在iOS平台，则是由LLVM编译，两个平台的Dart代码都是AOT编译为本地代码，Flutter应用程序使用本机指令集运行。
Flutter正是是通过使用相同的渲染器、框架和一组widget，来同时构建iOS和Android应用，而无需维护两套独立的代码库。
2、flutter的性能如何
通过资料查询，原生在内存和CPU资源等性能方面，原生是要优于flutter的，flutter本身最大特点还是在于跨平台
参考：