跳到主要内容

快速入门

直接查看：https://flutter.cn/docs/get-started

lib/main.dart：

// https://book.flutterchina.club/chapter2/first_flutter_app.html
import 'package:flutter/material.dart'; // 导入包

void main() => runApp(new MyApp()); // 应用入口

// MyApp类代表Flutter应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo', //应用名称
      theme: new ThemeData(
        primarySwatch: Colors.blue, //蓝色主题
      ),
      initialRoute: "/", //名为"/"的路由作为应用的home(首页)
      //注册路由表
      routes:{
      "new_page": (context) => NewRoute(),
      "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
      },
      // home: new MyHomePage(title: 'Flutter Demo Home Page'), //应用首页路由
    );
  }
}

// MyHomePage 是Flutter应用的首页，它继承自StatefulWidget类，表示它是一个有状态的组件（Stateful widget）。
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; //用于记录按钮点击的总次数
  // 设置状态的自增函数
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // 构建UI界面的逻辑在build方法中
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
  • MyApp 类代表 Flutter 应用，它继承了 StatelessWidget 类，这也就意味着应用本身也是一个 widget。
  • 在 Flutter 中，大多数东西都是 widget（后同“组件”或“部件”），包括对齐(alignment)、填充(padding)和布局(layout)等，它们都是以 widget 的形式提供。
  • Flutter 在构建页面时，会调用组件的 build 方法，widget 的主要工作是提供一个 build()方法来描述如何构建 UI 界面（通常是通过组合、拼装其它基础 widget）。
  • MaterialApp 是 Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp 也是一个 widget。
  • home 为 Flutter 应用的首页，它也是一个 widget。
  • Scaffold 是 Material 库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕 widget 树（后同“组件树”或“部件树”）的 body 属性，组件树可以很复杂。本书后面示例中，路由默认都是通过 Scaffold 创建。
  • body 的组件树中包含了一个 Center 组件，Center 可以将其子组件树对齐到屏幕中心。此例中， Center 子组件是一个 Column 组件，Column 的作用是将其所有子组件沿屏幕垂直方向依次排列； 此例中 Column 子组件是两个 Text，第一个 Text 显示固定文本 “You have pushed the button this many times:”，第二个 Text 显示_counter 状态的数值。
  • floatingActionButton 是页面右下角的带“+”的悬浮按钮，它的 onPressed 属性接受一个回调函数，代表它被点击后的处理器，本例中直接将_incrementCounter 方法作为其处理函数。
最后于 更新