开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
1、构建第一个项目
书接上回，在认识Flutter的基础语法后，我们开始构建第一个项目，这里使用的是Android Studio IDE 进行开发。
首先，打开Android Studio ，选择New Flutter Project ——> 填写项目Project Name（名称仅小写字母、数字不含特殊字符）——>项目路径——>选择移动端使用的语言（如iOS使用OC或者Swift）——>选择平台（目前已支持web端）——>选择Finish
至此，一个新的Flutter 项目创建完成,下面是节目图
可以看到上面有iOS、android、web、lib等文件夹，对应的文件夹下管理对应平台的源码，lib 为Flutter的源码，开发通常在lib中编码。
2、初识系统自带界面
点击lib文件夹，可以看到里面已经有了一个main 文件，可以粗浅的理解为iOS中的APPDelegate 和 ViewController合集。当然，我们开发中肯定还是会将界面进行拆分和封装。 下面来看main.dart文件中的源码
入口函数
void main(){
//启动app
runApp(const MyApp());
}
应用结构
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'),
);
}
}
- 其中MyApp 代表的是Flutter 应用，继承于StatelessWidget类。
- Flutter中绝大多数的视图基本都是继承于Widget
- Flutter 在构建页面时，会调用组建的build方法，用户描述如何构建UI页面
- @override 代表重写父类函数
- BuildContext 为绘制上下文，所有界面的绘制都是基于这个上下文去绘制，也就是底层渲染。
- MaterialApp 是Flutter中提供的一个风格UI框架，MaterialApp表示使用安卓风格，但是实际上，在使用MaterialApp时Flutter也会根据系统去判断而显示不同的风格。Cupertino则是偏向于iOS风格，但是相对而言组件的成熟度，没有MaterialApp 高。所以使用者也少。
- title 为应用名称，如果在对应的页面没有设置title，则会显示这个title
- theme 主体风格，比如导航栏背景等等，后面再深入。
- home： 为Flutter的应用首页。也是一个widget。 当然，属性肯定远远不止这些，比如设置路由的routes，initialRoute，这些后面再慢慢理解深入。
3、初识 Widget
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
}
}
- MyHomePage 是应用的首页，继承自 StatefulWidget，表示一个有状态的widget。所以就有了下面的_MyHomePageState 这个是MyHomePage的状态管理。对比一下MyApp，就会发现：继承自StatelessWidget是没有状态的，也就是不可修改的。
- StatefulWidget 至少有两个组成：StatefulWidget 和 一个State类，StatefulWidget本身是不变的，但是State是可变的，通过改变State实现界面的动态变化。
- Widget 的Build函数也被放到 State，也表明UI的结构和内容也是可控可变的。
至此，大概了解了Flutter的一个最基础的结构，后面开始学习一些基础组件。
