學而不思則罔，思而不學則殆，學而不用則廢。

???? Flutter學習之一 環(huán)境搭建

前言

依稀記得早年學習OC的時候，是從基本數(shù)據(jù)類型學起的。如果有原生開發(fā)經(jīng)驗的話，學習flutter直接從listView搞起。

正文

一、創(chuàng)建一個app

1、IDE創(chuàng)建項目

1、啟動 VS Code
2、調(diào)用 View>Command Palette…
3、輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
4、輸入 Project 名稱 (如myapp), 然后按回車鍵
5、指定放置項目的位置，然后按藍色的確定按鈕
6、等待項目創(chuàng)建繼續(xù)，并顯示main.dart文件

創(chuàng)建好之后，程序代碼就是在lib/main.dart里面。

2、運行應用程序

1、確保在VS Code的右下角選擇了目標設備
2、按 F5 鍵或調(diào)用Debug>Start Debugging
3、等待應用程序啟動
4、如果一切正常，在應用程序建成功后，您應該在您的設備或模擬器上看到應用程序:

1.png

隨便改一下文案，然后command + s，體驗一下熱重載。

快捷鍵：

• F5：debug模式運行，本地資源加載不出來，網(wǎng)絡圖片加載不出來，就會斷點，需要手動點執(zhí)行。
• contr + F5：非debug模式運行，上面的問題不會有。
• command + shift + F5：重新debug模式運行。

二、編寫app

1、使用外部包

• 可以 在pub.dartlang.org上找到許多開源軟件包，該網(wǎng)址建議收藏。

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

  2.png
  
  2、為了更加容易理解頁面是啥，建議創(chuàng)建一個新的文件home_page.dart
  注意：flutter命名規(guī)則是：文件名全小寫，單詞用下劃線_分開。文件內(nèi)，類名用駝峰命名，首字母大寫
  鍵入如下代碼：

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

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

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

class _HomePageState extends State<HomePage> {
  //定義一個list
  List<int> 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('隨機數(shù)'),
      ),
      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行，數(shù)字是：$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分開。
實現(xiàn)的效果為，一個列表里面放了20個隨機數(shù)。
3、代碼簡單解析

• Scaffold：現(xiàn)在可以簡單理解為一個vc，里面可以設置appBar，tabbar，body。body就是頁面內(nèi)容，可簡單理解為view，在沒有設置任何邊距的時候，默認是頂滿屏幕的。
• listView：列表。itemCount：列表item總個數(shù)。itemBuilder：構(gòu)建item方法，返回值是Widget。

后記

從oc角度來看，一個tableView就這么完成了，好像還是很簡單的。然而并不是，接下來就開始學習什么是Widget？StatefulWidget和StateLessWidget又是啥？

???? Flutter學習之三 Widget