Flutter 学习：基础文档

Views
在flutter中，什么相当于一个View呢？
在安卓中，View时显示在屏幕上最基础的部分，包括Buttons,toolbars, and inputs, 这些都是一个View的子控件。而在flutter中，Widget相当于View。Widgets虽然跟Android里的Views不完全一样，本质上是一样的。
但是，这些与View有一些区别。首先，小部件具有不同的生命周期：它们是不可变的，只有在需要更改时才存在。每当窗口小部件或其状态发生变化时，Flutter的框架都会创建一个新的窗口小部件实例树。相比之下，Android视图被绘制一次，并且在调用invalidate之前不会重绘    

Flutter的小部件很轻巧，部分原因在于它们的不变性。因为它们本身不是视图，并且不是直接绘制任何东西，而是对UI及其语义的描述，这些描述被“夸大”到引擎盖下的实际视图对象中。

这些是实现Material Design准则的小部件。 Material Design是一个灵活的设计系统，适用于所有平台，包括iOS。

怎样刷新Widgets的显示？

在Android中，您可以通过直接更改视图来更新视图。但是，在Flutter中，窗口小部件是不可变的，不会直接更新，而是必须使用窗口小部件的状态。

这就是有状态和无状态小部件的概念来源。 StatelessWidget听起来就像是一个没有状态信息的小部件。

当您描述的用户界面部分不依赖于对象中的配置信息时，StatelessWidgets非常有用。

例如，在Android中，这类似于将带有徽标的ImageView放置。徽标在运行时不会改变，因此请在Flutter中使用StatelessWidget。

如果要根据在进行HTTP调用或用户交互后收到的数据动态更改UI，则必须使用StatefulWidget并告诉Flutter框架该窗口小部件的状态已更新，以便它可以更新该窗口小部件。

这里需要注意的重要一点是，无状态和有状态小部件的行为都是相同的。它们重建每一帧，区别在于StatefulWidget有一个State对象，它跨帧存储状态数据并恢复它。

如果您有疑问，那么请始终记住此规则：如果窗口小部件发生更改（例如，由于用户交互），则它是有状态的。但是，如果窗口小部件对更改做出反应，则包含父窗口小部件仍然可以是无状态的，如果它本身不会对更改做出反应。

以下示例显示如何使用StatelessWidget。常见的StatelessWidget是Text小部件。如果你看一下Text小部件的实现，你会发现它是StatelessWidget的子类。

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

正如您所看到的，Text Widget没有与之关联的状态信息，它呈现了在其构造函数中传递的内容，仅此而已。

但是，如果你想让“I Like Flutter”动态变化，例如点击FloatingActionButton会怎样？

要实现此目的，请将Text小部件包装在StatefulWidget中，并在用户单击按钮时更新它。
import 'package:flutter/material.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @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> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

我们应该怎样放置 widgets? Where is my XML layout file?

在之前Android开发，你一般是以XML的形式来定义布局，但是在flutter里是以widget tree的形式
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Sample App"),
    ),
    body: Center(
      child: MaterialButton(
        onPressed: () {},
        child: Text('Hello'),
        padding: EdgeInsets.only(left: 10.0, right: 10.0),
      ),
    ),
  );
}

如何自定义小部件Widget

在Android中，我们一般使用的控件都是View的子类，或使用预先存在的视图来覆盖和实现实现所需行为的方法。

在Flutter中，通过组合较小的小部件（而不是扩展它们）来构建自定义小部件。 它有点类似于在Android中实现自定义ViewGroup，其中所有构建块都已存在，但您提供了不同的行为 - 例如，自定义布局逻辑。

例如，如何构建一个在构造函数中采用标签的CustomButton？ 创建一个CustomButton，它使用标签组成RaisedButton，而不是通过扩展RaisedButton
class CustomButton extends StatelessWidget {
  final String label;

  CustomButton(this.label);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: () {}, child: Text(label));
  }
}

在FLutter中有类似Intents的东东吗？

在Android中，Intents有两个主要用例：在Activities之间导航，以及与组件通信。另一方面，Flutter没有意图的概念，尽管你仍然可以通过本机集成（使用插件）启动意图。

在FLutter里面没有直接的Activity和Fragment;相反，在Flutter中，您可以使用导航器和路径在屏幕之间导航，所有这些都在同一个Activity中。

路径是应用程序的“屏幕”或“页面”的抽象，导航器是管理路径的窗口小部件。路线粗略地映射到活动，但它没有相同的含义。导航器可以推送和弹出路径以在屏幕之间移动。导航器的工作方式类似于堆栈，您可以在其上推送（）要导航到的新路由，并且当您想要“返回”时可以从中弹出（）路由。

在Android中，您在应用程序的AndroidManifest.xml中声明您的活动。

在Flutter中，您有几个选项可以在页面之间导航：

指定路径名称的映射。 （MaterialApp）
直接导航到路线。 （WidgetApp）
以下示例构建一个Map

void main() {
  runApp(MaterialApp(
    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'),
    },
  ));
}