Flutter-HelloWorld

前言

上一篇已经讲完如何安装Flutter SDK，本篇文章就讲一下如何跑起来第一个HelloWorld，并进行调试。

HelloWorld

如果你在AndroidStudio里面安装了Flutter插件，可以通过File>New>New Flutter Project>Flutter Application新建一个Flutter项目。填好项目名称和sdk目录等相关信息即可。新建完成以后就是一个默认的工程

项目目录

目录如图，我们主要再lib下的.dart文件里面写代码。另外可以再pubspec.yaml配置依赖，和本地图片资源。

运行与调试

左边可以选择调试设备，安卓机开启usb调试，右边有一些调试用的工具，可以检查视图和性能，而且点击以后能快速定位代码。点击绿色的三角形运行到手机即可。

结果：

结果如图，点击加号可以增加次数。

代码解析

要记得万物皆对象，要显示一个文字，就要new一个Text对象，需要设置字体样式就要传入一个TextStyle对象，需要设置颜色，就要传入一个Color对象。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { 
//StatelessWidget 无状态，不需要维护状态
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, 
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget { 
//StatelessWidget对象，可以管理状态，本例中可以维护count这个数
  const MyHomePage({Key? key, required this.title}) : super(key: key);
//可以用required  标识必须传的参数
  final String title;
  //留意一下const和final的区别。

  @override
  State<MyHomePage> createState() => _MyHomePageState();//相当于绑定一个State类
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  //dart没有private字段
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text( //文字展示，文字对象
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), //这是加号按钮，点击以后会回调_incrementCounter这个函数
    );
  }
}