import'package:flutter/material.dart';
//定义一个Main方法。Main方法中用简单RunApp就可以执行我们定义的Widgetvoid main() => runApp(new MyApp());
/*
Flutter写成的都是UI主键。主要分 StatelessWidget 和 StageWidge
整体的入口可以写成 StatelessWidget
*/classMyAppextendsStatelessWidget{
//这个Widget就是我们App的最基层的Widget了//传入BuildContext给我们使用。@override
Widget build(BuildContext context) {
//这样就可以直接使用Flutter为我们封装好的MaterialApp这个主题的了.从源码可以看到这个是个StatefulWidget//[home], [routes], [onGenerateRoute], or [builder] 这个主题下的这些方法不能都为空!!returnnew MaterialApp(
title: 'Flutter Demo',
//定义主题
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//statefulWidget ,因为Widget都是无状态的,所以如果需要有状态的话,`state`这个类来进行维持classMyHomePageextendsStatefulWidget{
MyHomePage({Key key, this.title}) : super(key: key);
finalString title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
//flutter中状态的持有类class_MyHomePageStateextendsState<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
//这点和小程序很类似。调用setState进行状态同步和刷新。如果不调用这个方法,只是改变值,界面不会发生变化
setState(() {
_counter++;
});
}
//state中的`build`方法,会自动在`setState`方法后调用。@override
Widget build(BuildContext context) {
//Scaffold可以理解程相当于一个html 它的body就是主要的内容。//同时它其实是满足MD的。所以它还能提供对应的组件//比如 AppBar .Drawer floatingButton等等returnnew Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.
title: new Text(widget.title),
),
//这里可以初步的看到,如果想要布局居中显示,可以先包裹一层`Center`
body: new Center(
//因为是竖直的布局,所以再次包裹一层Column
child: new Column(
//使用这个属性,让居中竖直排列
mainAxisAlignment: MainAxisAlignment.center,
//children中传入其他组件
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}