项目设置

项目设置

app 是如何运行的？

对于 Xamarin.Forms 里的每个平台，你可以调用 LoadApplication 方法，创建一个新应用并运行你的 app 。

LoadApplication(new App());

在 Flutter 中，加载 Flutter app 的默认主入口点是 main。

void main() {
  runApp(new MyApp());
}

在 Xamarin.Forms 中，你分配一个 Page 到 Application 类中的 MainPage 属性。

public class App: Application
{
    public App()
    {
      MainPage = new ContentPage()
                 {
                   new Label()
                   {
                     Text="Hello World",
                     HorizontalOptions = LayoutOptions.Center,
                     VerticalOptions = LayoutOptions.Center
                   }
                 };
    }
}

在 Flutter 中，“万物皆 widget”，甚至连应用本身也是。接下来的示例展示了 MyApp ,一个简单的应用 Widget。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: Text("Hello World!", textDirection: TextDirection.ltr));
  }
}

如何创建一个页面？

Xamarin.Forms 拥有一些不同类型的页面；ContentPage 是最为通用的。在 Flutter 中，指定一个应用程序 widget 来控制你的根页面。你可以使用一个MaterialApp widget，它支持 Material Design，或者你也可以使用 CupertinoApp widget，它能用来创建 ios 风格的应用，或者你也可以使用等级较低的WidgetsApp，可供你随心所欲地定制。

接下来的代码定义了一个主页，一个有状态的 widget。在 Flutter 中，除了以下两个类型的 widget 外，其它 widget 都是不可变的：有状态和无状态 widget。无状态 widget 的示例都是标题、图标或图片。

下面的示例使用 MaterialApp，它在 home 属性中控制它的根页面。

class MyApp extends StatelessWidget {
  // This widget is the root of your application(这个 widget 是你的应用程序的根 widget)。

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

从这里开始，真正的首页是另一个你在里面创建了状态的 widget。

一个有状态 widget，例如下面的 MyHomePage，包含两个部分。第一部分，是它自身不变的，创建一个状态对象（State object）来管控对象的状态。状态对象持续存在于 widget 的整个生命周期中。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

状态对象实现了有状态 widget 中的构建方法。

当 widget 树的状态发生了改变，将会调用 setState() 触发 widget 当中该部分UI的构建。确保只在需要时调用 setState() ，并且在只有部分 widget 树发生变化时调用，否则会造成糟糕的UI性能表现。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        // Take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set the appbar title.
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          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),
      ),
    );
  }
}

在 Flutter 中的UI（也就是这里所说的 widget 树）是不可变的，意思是说它一旦被构建，你就无法再改变他的状态。当你修改状态 类中的字段，就要再次调用 setState 来重新构建整个 widget 树。

这个生成UI的方式不同于 Xamarin.Forms，但是这种方法却有很多益处。