Flutter入门与实战(一):我的第一个 Flutter 应用之旅

14,348 阅读5分钟

参考官网的的开始使用,配置好开发环境即可进行 Flutter 开发了,当然开发前还是有必要了解一下 Dart 这门语言的,接下来涉及到与其他开发语言不太相同的地方会在文章里提出来。本教程使用的 flutter 版本为稳定版本 v2.0.6。

创建Flutter 工程

推荐使用命令行的方式新建工程(使用 IDE 创建的过程会比较慢),命令如下:

flutter create hello_world

Flutter 会默认创建一个示例工程,然后使用命令 打开工程(code 命令是 vscode 的一个别名,需要在.zshrc配置别名:alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'

code hello_word

项目目录结构如下图所示: image.png 各个目录或文件说明如下:

  • android:安卓原生工程配置相关文件,包括应用图标,原生资源,权限配置等,可以参考之前的关于安卓打包发布的文章:Flutter 如何发布安卓应用?
  • ios:iOS 原生工程配置相关文件,熟悉 iOS 开发的会知道具体的用途,其中 最主要的是 Runner 下,设置到原生的配置,如最关键的 InfoPlist 文件,以及权限相关的配置,这些配置建议在 Xcode 中配置会更为直观。
  • build:打包输出文件,主要是安卓打包文件,iOS 打包需要通过 Xcode 完成。
  • lib:最重要的目录,所有源码都在这个目录,其中 main.dart 是入口文件,而 main 方法是入口方法。
  • test:测试相关文件
  • web:Flutter 2.0引入的,支持三端统一的 web 端文件
  • pubspec.yaml:这个文件十分重要,所有的第三方依赖,以及文件依赖都通过这个文件管理,类似与苹果的 podfile 和安卓的 gradle 文件。

运行应用

如果要在安卓模拟器运行,则需要安装安卓 Studio,并配置好模拟器,至于安卓真机调试与安卓应用开发类似。苹果也一样,需要安装 Xcode并启动模拟器。真机调试苹果相对比较麻烦,需要有开发者账号,将真机的 identifier(设备唯一标识符)加入到对应应用的开发设备中,这个可以自行百度搜索如何配置。

完成配置后,选择要运行的设备或模拟器(右下角会显示当前选定的设备,如果没选则是 No Device,如下图),命令行运行 flutter run皆可完成编译和进入代码调试。 image.png Flutter 应用在调试过程中是支持热重载的(pub依赖改变了需要重新编译),因此尽量使用热重载,毕竟编译一次时间停长的。

开发设备配置

如果是要运行模拟器,对开发的设备要求还是挺高的,推荐使用 Mac Pro(16GB 内存)进行开发。Windows 电脑的话至少也需要16GB 内存,模拟器一旦运行起来那“呼呼”的风扇声让人听了感觉电脑干活挺累的!

来点小修改

运行起来 demo 了,不动手改改代码过过瘾都没什么太大感觉,我们来实现在屏幕中间显示 Logo,点击后切换图片的简单修改。

使用图片资源需要两个步骤,第一建立一个图片文件夹存放图片资源,第二是需要在 pubspec文件中指定依赖的资源目录。新建一个 images 文件夹存放图片文件,将图片文件(avatar.jpg 和qrcode.jpg)放到images 目录下。在 pubspec.yaml 文件中设置 assets 属性:

	flutter:

		uses-material-design: true
		assets:
    	- images/avatar.jpg
    	- images/qrcode.jpg
    
    # 其他配置

注意放置的位置不要弄错了,在 pubspec.yaml 中有相应的注释。配置完成后需要运行 flutter pub get命令更新一下依赖的资源。

主要代码如下所示:

class _MyHomePageState extends State<MyHomePage> {
  List _imageNames = [
    {'image': 'images/avatar.jpg', 'text': '岛上码农'},
    {'image': 'images/qrcode.jpg', 'text': '扫码关注'}
  ];
  int _index = 0;

  void _onSiwtch() {
    setState(() {
      _index = (++_index) % _imageNames.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          child: Column(
            children: [
              Container(
                width: 128,
                height: 128,
                margin: EdgeInsets.only(top: 10, bottom: 10),
                child: Image.asset(
                  _imageNames[_index]['image'],
                  fit: BoxFit.cover,
                ),
              ),
              Text(
                _imageNames[_index]['text'],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onSiwtch,
        tooltip: '切换',
        child: Icon(Icons.swap_horizontal_circle_outlined),
      ), 
    );
  }
}

代码逻辑如下: _MyHomePageState类是 MyHomePage 的 一个有状态组件,Flutter 的组件和 React 的类似,分为无状态和有状态,无状态组件无法进行数据更新,有状态组件有自己的数据状态,根据数据状态更新界面。

下划线_代表这个类、方法或成员变量是私有的,在类的外部无法访问。在_MyHomePageState 中定义了一个 Map <String, String>类型的数组(List)_imageNames 以及一个状态变量数组控制下标_index。当切换按钮点击时,会在_onSwitch 方法中通过 setState更改状态变量_index 的值,从而引起界面的自动刷新。

页面组件的元素和层级如下:

  • appBar:导航栏
  • body:主界面
    • Center:居中组件
      • Container:页面元素容器,类似 html 的 div,通过这个 Container 指定界面中的尺寸和边距
        • Column:纵向布局,即元素按纵向一次排布。
          • 图片容器:用于限定图片的显示大小,边距等
            • 图片:使用本地资源展示图片
          • 文本:显示图片底下的文字
  • floatingActionButton:悬浮按钮

可以看到整个页面的层次和 HTML 很像,实际上 Dart 最开始的设计就是想替换 Javascript 的,而 Flutter 本身很多理念仿照了 React。从代码也可以看到,界面的嵌套层级很多,这被很多人吐槽,实际只要我们将组件抽离,就可以有效减少嵌套层级(界面的写法也有点类似 JSX,只是Flutter 内置了很多布局组件,简化了开发)。

最终效果

helloworld.jpg 点击切换按钮图片和文字会随之变化