运行第一个Flutter App

文本是在 AndroidStudio 开发工具中开发 Flutter 的。

个人博客

运行第一个Flutter App

1：启动AndroidStudio，选择Start a new Flutter project。

first_flutter_app_1.png

2：选择Flutter Application。

first_flutter_app_2.png

3：配置信息。

first_flutter_app_3.png

4：设置包名。

first_flutter_app_4.png

5：运行flutter_hello_world App。

first_flutter_app_5.png

分析lib/main.dart

1： Flutter程序入口。

Flutter程序入口是一个main()函数：

void main() => runApp(MyApp());

在main()函数中调用runApp()函数，传入一个MyApp()widget的参数。

2：创建一个无状态的部件（Stateless widget）

有状态的部件和无状态部件的区别主要在于状态的改变：

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的。
Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
1. 一个 StatefulWidget类。
2. 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在。

MyApp()是一个无状态的部件，所有的界面UI都是在build()函数中处理，如下面代码所示

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

在build()函数中引用了MaterialApp()widget，主要实现了Material风格的相关部件，包括标题、主题、主界面。

2：创建一个有状态的部件（Stateful widget）

MyHomePage()是一个有状态的部件，除了创建State类之外几乎没有其他任何东西，如下面代码所示

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

  final String title;

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

3：创建_MyHomePageState()类

该类持有MyHomePage() widget的状态，并且该应用程序的大部分代码都在该类中。界面主要展示标题栏、居中展示两行文本以及悬浮按钮，如下面代码所示

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}

4：添加交互

与有状态的部件进行交互，主要是通过setState()函数，当调用该函数时，会触发build()函数刷新，如下面代码所示

setState(() {
});

用户可以通过点击悬浮按钮，来刷新点击的次数，如下面代码所示

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

这部分内容就不深究了，简单了解一下就行

最后编辑于：2019.06.13 19:26:48