Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

前言

对于flutter的学习始于2018年底，期间断断续续学了两次，但苦于没有实际项目应用，久而久之又忘得七七八八，所以这次将整个学习过程系统记录下来，以方便日后使用中可以及时查找到想要的知识点(即使现在chat-gpt可以很好查找到想要的，但也要知道提取关键词)。纵观现今移动端开发市场和flutter开发技术的成熟，大前端的趋势不可逆，这次系统学习完flutter的基础知识后会做一个企业级的项目，达到印象深刻的目的。

Flutter项目架构

1、跨平台模块

flutter是一种跨平台技术，所以它自然是使用统一的业务代码要构建对应不同平台的应用，其中不同平台的构建需要依赖其原生开发所需的idea。下面通过Android Studio新建一个flutter项目，其默认新建了6个平台的应用：android、ios、linux、macos、web及windows。

Flutter统一了在各平台的业务逻辑交互，Dart则提供了业务操作。Flutter本质上可以看作是一个可以运行在其他平台的类库，使用各平台开发的IDE可以单独运行相关平台项目。

2、lib文件夹

lib文件夹装载的都是dart文件，其就是flutter构建页面的代码，其中运用啦dart语言实现对页面逻辑的实现，项目默认的是main.dart.

3、pubspec.yaml文件

pubspec文件是用于项目配置的，如下：

uses-material-design: true就是使用谷歌的material-design风格，Android开发的同学对此应该非常熟悉了。

对于资源的引用：在项目新建一个assets文件夹：

在pubspec文件中引用进来：

这样就可以在项目中使用该图片资源。如果需要设置字体，也是在assets文件下新建一个fonts文件夹，通过在pubspec文件中引入。

综上就是一个flutter项目的基本结构。

用Flutter输出一个Hello Word

新建一个flutter项目，打开lib文件夹中的main.dart文件，我们看到该文件中有很多代码，这个是项目默认生产的，我们先把这些代码全部删除，从头开始做一个HelloWord的输出。

先导入material.dart

material是google推行的设计风格，flutter继承了material大部分风格。

添加运行的入口函数：main函数，并在其中触发runApp(Widget app)函数,我们看到它的参数是Widget，Widget代表一个小部件，flutter中界面显示都是Widget来组成的，Widget中又会包含其他Widget，或是自定义Widget，可以理解为android中的View。我们使用Center小部件实现居中显示Hello Word：

Text也是一个Widget，它是被Center包含的，所以需要使用child属性来表明它是一个子Widget，这里运行的macOs，如下：

设置字体的样式

在Text部件中有style属性，可以设置字体大小、字体熟悉及颜色，如下：

child: Text(
  'Hello Word',
  textDirection: TextDirection.ltr, //表示从左向右显示
  style: TextStyle( //设置字体样式
    fontSize: 48.0, 
    fontWeight: FontWeight.bold, //粗体字
    color: Colors.yellow
  ),

自定义小部件

要实现需要继承StatelessWidget或StatefulWidget，并覆写它的build方法:

在输出Hello Word的小节中，runApp中传递的就是Widget，那我们可以这样返回：

那runApp可以直接调用：

material风格组件和界面风格设置

flutter里面包含了大量的material风格的组件，我们使用它来定义应用的主体风格，代码如下：

// meterialApp风格定义
class CusMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //Scaffold小部件包含常用的material常用的小部件，如titlebar
        appBar: AppBar(
          title: const Text("Title"),
          elevation: 0.0,  //标题栏阴影的大小
        ),
        body: CustomApp(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow // 设置主题色
      ),
    );
  }
}

也是自定义一个小部件，使用的MaterialApp，home代表的是设置首页，Scaffold小部件包含常用的material常用的小部件，如顶部和底部的工具栏。

Flutter列表数据展示

准备数据

数据一般来自后端服务接口返回或是本地数据库，这里只是模拟一下数据的使用，在lib文件夹下新建一个model文件夹并新建一个data.dart文件：

根据ItemData实体类模拟一个列表items。

列表填充数据并展示

这里主要是修改MaterialApp中home的boby，所以自定义一个DataHome的Widget，在body中使用ListView小部件来展示数据：

body: ListView.builder(
  itemCount: items.length,
  itemBuilder: _itemBuilder,
),

_itemBuilder是处理列表每一项数据，熟悉安卓开发的话可以理解这个是Adapter中的convert方法处理，_itemBuilder处理如下：

Widget _itemBuilder(BuildContext context, int position){

  return Container( //相当于每个列表项的布局
    color: Colors.white,
    margin: const EdgeInsets.all(8.0), //设置整个Container的margin
    child: Column( //Container里面的垂直布局
      children: <Widget>[
        Image.network(items[position].imgUrl),
        const SizedBox(height: 16.0), //图片和文本的间隔空间
        Text(
          items[position].title,
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ],
    ),
  );
}

运行效果如下：

结尾

最后，把文中的HelloWord和LisView展示的案例封装成自定义的Widget，代码存放处：lib/widget。