Flutter学习之二 第一个App

学而不思则罔，思而不学则殆，学而不用则废。

Flutter学习之一 环境搭建

前言

依稀记得早年学习OC的时候，是从基本数据类型学起的。如果有原生开发经验的话，学习flutter直接从listView搞起。

正文

一、创建一个app

1、IDE创建项目

1、启动 VS Code
2、调用 View>Command Palette…
3、输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4、输入 Project 名称 (如myapp), 然后按回车键
5、指定放置项目的位置，然后按蓝色的确定按钮
6、等待项目创建继续，并显示main.dart文件

创建好之后，程序代码就是在lib/main.dart里面。

2、运行应用程序

1、确保在VS Code的右下角选择了目标设备
2、按 F5 键或调用Debug>Start Debugging
3、等待应用程序启动
4、如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

1.png

随便改一下文案，然后command + s，体验一下热重载。

快捷键：

• F5：debug模式运行，本地资源加载不出来，网络图片加载不出来，就会断点，需要手动点执行。
• contr + F5：非debug模式运行，上面的问题不会有。
• command + shift + F5：重新debug模式运行。

二、编写app

1、使用外部包

• 可以 在pub.dartlang.org上找到许多开源软件包，该网址建议收藏。

• pubspec文件管理Flutter应用程序的assets(资源，如图片、package等)。 在pubspec.yaml中，
  

  2.png
  
  2、为了更加容易理解页面是啥，建议创建一个新的文件home_page.dart
  注意：flutter命名规则是：文件名全小写，单词用下划线_分开。文件内，类名用驼峰命名，首字母大写
  键入如下代码：

import 'dart:math';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State {
  //定义一个list
  List list = [];
  @override
  Widget build(BuildContext context) {
    list.clear();
    for (var i = 0; i < 20; i++) {
      list.add(Random().nextInt(100));
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text('随机数'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return _getRow(index);
        },
        itemCount: list.length,
      ),
    );
  }

  Widget _getRow(int index) {
    String num = list[index].toString();
    return Container(
      margin: const EdgeInsets.all(20),
      child: Text('第$index行，数字是：$num'),
    );
  }
}

main.dart里面改成如下代码：

import 'package:flutter/material.dart';
import 'package:flutter_application_1/widgets/home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

改成之后，这样可以简单的理解为，App入口main和页面HomePage分开。
实现的效果为，一个列表里面放了20个随机数。
3、代码简单解析

• Scaffold：现在可以简单理解为一个vc，里面可以设置appBar，tabbar，body。body就是页面内容，可简单理解为view，在没有设置任何边距的时候，默认是顶满屏幕的。
• listView：列表。itemCount：列表item总个数。itemBuilder：构建item方法，返回值是Widget。

后记

从oc角度来看，一个tableView就这么完成了，好像还是很简单的。然而并不是，接下来就开始学习什么是Widget？StatefulWidget和StateLessWidget又是啥？

Flutter学习之三 Widget