开发者社区> 岛上码农> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

第一个 Flutter 应用之旅

简介: 轻松带你了解 Flutter 开发的步骤,代码结构和应用开发流程。
+关注继续查看

参考本人之前的开发环境配置文章(分 Mac和 Windows 10),配置好开发环境即可进行 Flutter 开发了,当然开发前还是有必要了解一下 Dart 这门语言的,接下来涉及到与其他开发语言不太相同的地方会在文章里提出来。

创建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

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

  • android:安卓原生工程配置相关文件,包括应用图标,原生资源,权限配置等。
  • 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
点击切换按钮图片和文字会随之变化。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter打包发布
Flutter打包发布
32 0
Flutter测试
单元测试是针对一个函数或者类进行测试
18 0
Flutter 环境配置
Flutter 环境配置
22 0
Flutter全面屏适配
Flutter全面屏适配
33 0
flutter开发小技巧
粘性标题效果 带有粘性标题的每个部分都应该是带有 SliverPinnedHeader 和 SliverList 的多条。然后将 pushPinnedChildren 设置为 true 应该会提供您正在寻找的粘性标题效果。
47 0
flutter开发小技巧
flutter - URL出现在网站名称的位置 从Android Studio运行时:
28 0
Flutter框架优缺点
Flutter框架优缺点
78 0
Flutter实现倒计时功能
在Flutter开发中,可通过Timer的periodic函数开启一个循环执行的任务
637 0
+关注
岛上码农
Flutter爱好者,公众号:岛上码农
32
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载