Flutter 初学之路<1>

作者: CodexBai | 来源:发表于2019-04-24 07:09 被阅读2次

Flutter是最新的跨平台开发技术,可以横跨Android、iOS、MacOS、Windows、Linux等多个系统。Flutter采用了更为彻底的跨平台方案,即自己实现了一套UI框架,然后直接在GPU上渲染UI页面。

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

Flutter的特点:跨平台、丝滑般的体验、响应式框架、支持插件、60fps超高性能。
Flutter的核心:组件、构建、状态、框架等。

在Java编程时,我们将一切看作对象。而使用Flutter时,我们将一切视为组件(Widget)。组件是Flutter应用程序用户界面的基本构建块。

Widget具有丰富的属性及方法,属性通常用来改变组件的状态(颜色、大小等)及回调方法的处理(单击事件回调、手势事件回调等);方法主要是提供一些组件的功能扩展。

我们可以使用Flutter的组件嵌套来实现复杂度高的UI。最基础的组件类是Widget,其他所有的组件都是继承Widget的。

Flutter Widget分为:有状态组件(Stateful Widget)及无状态组件(Stateless Widget)。

构建Widget
我们可以重写Widget的build方法来构建一个组件。

@protected Widget build(BuildContext context);

处理用户交互

父Widget可以自由地创造子Widget的新实例且不会失去子Widget的状态,而不是通过持有子Widget来维持其状态。

State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据

分层的框架

Material层通常组合来自Widget层的基本Widget
Widget层通过较低级对象渲染层来构建。

//新建flutter-app,修改main.dart文件如下:
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World!',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Fultter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

参考资料:亢少军老师的《Flutter技术入门与实战》

相关文章

  • Flutter 初学之路<1>

    Flutter是最新的跨平台开发技术,可以横跨Android、iOS、MacOS、Windows、Linux等多个...

  • Flutter初学之路<2>

    Flutter 是 Dart 语言的移动应用框架,runApp 函数就是Flutter框架的入口。 使用runAp...

  • Flutter初学之路<3>—`Container`

    Flutter 所有元素都是由组件组成,因此其核心理念是一切皆为组件。 Container (容器组件)一个简便的...

  • <1>

    2018.5 首都机场 夜晚的首都也是那么彻夜通明,没有白天黑夜之分,机场更是人来人往,行色匆匆,接打电话专注自己...

  • Flutter初学之路—`Image` (图片组件)

    Image(图片组件)用来显示图像的组件,提供了多个构造函数: new Image:从ImageProvider获...

  • Flutter初学之路—`Icon` (图标组件)

    Icon(图标组件)为展示图标的组件。其提供了一种构造器。 图标是不能做交互的,若需要交互式图标,请使用mater...

  • 星河<1>

    街边高大的梧桐,舒展开嫩绿的手掌。阳光欢快地跳过,轻轻着陆。在这样的日子里…… “啊啊啊啊!” 高中开...

  • Flutter各种API使用

    将Flutter各种Widget各种API都实现一次。 用于给初学者提供Flutter可视化Widget,方便初学...

  • Flutter 带你快速入门

    带你高效入门 Flutter 本文面向 Flutter 初学者,旨在用易懂的方式带大家入门。除了 Flutter ...

  • flutter doctor检查出现多个Android Stud

    初学Flutter开发,在配置Flutter环境的时候使用flutter doctor命令检查,发现有多个Andr...

网友评论

    本文标题:Flutter 初学之路<1>

    本文链接:https://www.haomeiwen.com/subject/cfyigqtx.html