编写第一个Flutter App

最新推荐文章于 2023-03-30 17:30:15 发布

淮城一只猫 - iiong.com

最新推荐文章于 2023-03-30 17:30:15 发布

阅读量260

点赞数

本文来自于淮城一只猫 - https://iiong.com

本文链接：https://blog.csdn.net/JaxsonWang/article/details/100987705

版权

运行Demo

打开Android Studio菜单项选择Start a new Flutter project，进入选项选择默认即可。

进入项目把gradle配置镜像源，需要把google()和jcenter替换成：

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }

然后再进行gradle sync构建项目。

构建好可以在物理机或者虚拟机运行App了。

fltter project项目讲解

|flutter app
--|android/ # Android 环境源码
--|ios/ # iOS 环境源码
--|lib/ # 主要业务源码，我们重心在这开发
--|test/ # 测试环境
--|.gitignore # git上传忽略
--|.metadata # flutter元数据
--|.packages # 拉取依赖包信息
--|pubspec.lock # 依赖包锁
--|pubspec.yaml # 依赖说明

Hello World

删除lib/main.dart所有内容，并添加下面代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

如果要格式化代码在右键单击Dart代码，然后选择 Reformat Code with dartfmt。

从上述一段代码来看，风格倒是和现在主流编程风格差不多，都是面向对象编程过程。

void main() => runApp(MyApp());是程序进来第一步执行的函数，这个函数是MyApp()
MyApp()继承StatelessWidget方法并且注解解释重写该方法。
返回是MaterialApp widget组件方法信息。

在Flutter设计理念是：一切皆为组件，即widget。

最小组件

根据上面描述的代码完全可以精简成最少的代码运行App：

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
          textAlign:TextAlign.right,
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

理解实例

在Android Studio新建项目里面包含个简单的项目，来大概了解下项目运行过程：

// 导入 UI 包，Material是 Google Android 特色 UI 风格
import 'package:flutter/material.dart';
 
// 应用入口，Main方法 => 类似 es6 的箭头函数，方法同样可以写成下面一样
void main() => runApp(MyApp());
 
//void main() {
//  runApp(MyApp())
//}
 
/**
* 应用结构
* MyApp 继承 `StatelessWidget`这个类，并且重写相关方法
*/
class MyApp extends StatelessWidget {
  // 应用程序根节点
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是 Material库中提供的Flutter APP框架，
    // 通过它可以设置应用的名称、主题、语言、首页及路由列表等。
    // MaterialApp 也是一个 widget。
    return MaterialApp(
      // 应用名称
      title: 'Flutter Demo',
      // 程序风格 蓝色
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 程序首页 并且含有`title`参数
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
/**
* 首页页面
* 该组件为 状态管理组件，意味着包含状态值相关业务
*/
class MyHomePage extends StatefulWidget {
  // 接受参数
  MyHomePage({Key key, this.title}) : super(key: key);
 
  // 定义标题，并且未常量，不可再次赋值
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
/**
* MyHomePage 继承 StatefulWidget 其中的一个`State`状态类，该类用于程序监听状态来实现程序交互
*/
class _MyHomePageState extends State<MyHomePage> {
 
  // int 类型 的变量 `_counter` 初始化为 0
  int _counter = 0;
 
  // 叫`_incrementCounter`方法
  void _incrementCounter() {
    setState(() {
      // 如果触发`_incrementCounter`方法就自增`_counter`
      _counter++;
    });
  }
 
  // 构建 UI 界面
  @override
  Widget build(BuildContext context) {
    // Scaffold 是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton。
    return Scaffold(
      // 导航栏
      appBar: AppBar(
        // 导航栏标题 参数填入 上面`MyHomePage`带进来的参数
        title: Text(widget.title),
      ),
      // 程序正文，内容居中
      body: Center(
        // 布局组件 Column的作用是将其所有子widget沿屏幕垂直方向依次排列
        child: Column(
          // 控制主轴方向为居中
          mainAxisAlignment: MainAxisAlignment.center,
          // 子类组件，以 list 形式展示
          children: <Widget>[
            // 输出文本内容
            Text(
              'You have pushed the button this many times:',
            ),
            // 输出文本内容，`$+变量名`可以在字符串中显示，并且style定义输出字符串风格
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // 页面右下角圆形按钮
      floatingActionButton: FloatingActionButton(
        // 点击按钮触发
        onPressed: _incrementCounter,
        // 提示，长按按钮出现悬浮窗提示字段
        tooltip: 'Increment',
        // 渲染加号的图标
        child: Icon(Icons.add),
      ),
    );
  }
}

当右下角的floatingActionButton按钮被点击之后，会调用_incrementCounter，在_incrementCounter中，首先会自增_counter计数器（状态），然后setState会通知Flutter框架状态发生变化，接着，Flutter会调用build方法以新的状态重新构建UI，最终显示在设备屏幕上。