Flutter入门之无状态组件
Flutter核心理念
flutter组件采用函数式响应框架构建,它的灵感来自于React。它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组件的状态发生改变,组件会重构它的配置和状态(这些配置和状态是在组件外部重构的,内部的配置和状态都不可变的)。然后底层框架会将最新的配置和状态与先前的做对比,由此产生一个最小的差值,并由此差值来决定底层渲染树从旧状态过度到新状态。
Hello World
首先我们先来写一个最基本的flutter应用吧。
1.在适当的目录执行:
flutter init -o my_hello_world_app
2.替换my_hello_world_app/lib/main.dart文件中的内容:
import 'package:flutter/material.dart';
void main() => runApp(new Center(child: new Text('Hello, world!')));
3.在my_hello_world_app目录下执行:
flutter start
4.你将会在手机上看到:
如果你能一切顺利的来到这里,那么恭喜你,你已经成功使用flutter开发了一个android的应用,虽然这个应用看上去比较单一。
main方法是这个应用的入口,要运行一个应用的话需要使用runApp方法,它接收一个Widget控件作为参数,并且把这个控件作为控件树的根节点。在我们这个例子里,控件树里有两个控件,Center
控件和它的子节点Text
。通常情况下框架会强制将根控件充满整个屏幕,所以相对的Text控件就以屏幕为中心了。
重要概念:
在编写flutter应用的时候,通常情况下需要自定义组件,这些组件继承自StatelessComponent
或StatefulComponent
,选择要继承哪一个取决于这个组件是否需要管理状态和配置。一个组件的主要工作就是实现build
方法,这个方法用来反应该组件在其他组件中的表现形式。最后底层框架会统一从上到下调用build方法直至渲染树的最底层。
基本控件
flutter提供了一套完备的基本控件,最常用的有如下几个:
- Text :Text提供了一个用来显示文本的一次性控件(即无状态)。
- Row, Column:这两个控件用来显示水平或垂直方向上的多个组件,并且是可伸缩的。
- Stack:可以将多个组件以一定的顺序排列,可以使用
Positioned
控件来指定组件在Stack中的顺序。 - Container: 是一个可视化的矩形控件,它可以使用
BoxDecoration
来进行外观装饰,装饰内容可以是背景,边框和阴影等。Container也有外边距,内边距等属性,也可以约束自身的大小,另外值得一提的是Container还可以利用矩阵在三维控件内做转换。
下面结合一些基本的控件来自定义我们的组件并构建应用:
修改main.dart代码如下
import 'package:flutter/material.dart';
class MyToolBar extends StatelessComponent { //(3)
MyToolBar({ this.title });
final Widget title; //(6)
Widget build(BuildContext context) {
return new Container(
height: 56.0,
padding: const EdgeDims.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
backgroundColor: Colors.blue[500]
),
child: new Row([
new IconButton(icon: 'navigation/menu'),
new Flexible(child: title),
new IconButton(icon: 'action/search'),
])
);
}
}
class MyScaffold extends StatelessComponent { //(4)
Widget build(BuildContext context) {
return new Material(
child: new Column([
new MyToolBar(
title: new Text('Example title', style: Typography.white.title)
),
new Flexible(
child: new Center(
child: new Text('Hello, world!')
)
)
])
);
}
}
void main() {
runApp(new MaterialApp( //(1)
title: 'My app',
routes: <String, RouteBuilder>{ //(2)
'/': (RouteArguments args) => new MyScaffold() //(5)
}
));
}
同时确保flutter.yaml
文件内容如下:
name: my_app
material-design-icons:
- name: action/search
- name: navigation/menu
我们先来运行一下这个应用:
恭喜你,顺利存活。
代码解释如下:
- (1)处的
MaterialApp
是整个应用的主题控件,一般我们自定义的组件要写在它里面才会有Material的主题风格 - (2)处的
routes
的作用是页面导航作用,/
表示应用打开的第一个页面。 - (3)处的
MyToolBar
是我们自定义的一个无状态组件,通过build方法,我们可以看出其最外层是一个Container
控件,控件高为56dp,左右内边距8dp,它由一个BoxDecoration
做修饰,修饰内容是将背景颜色改为Colors.blue[500]
这种颜色。Container的内部是一个Row
,Row的两端分别是一个图标按钮,中间是另一个控件Flexible
,它的作用是填充掉Row的剩余部分。在Flexible中传入的是title
这个内部字段。 - (4)处的
MyScaffold
组件将其子节点用垂直的方式组织起来,在Column
的第一个位置是我们自定义的MyToolBar
,在构造MyToolBar的时候将一个Text
控件作为它的命名可选参数title的值传递进去。在Column的第二个位置是一个Flexible
用来填充剩余的空间,在Flexible里面放置了一个Center
组件,Center组件里则是一个Text用来显示“Hello,World”。 - (5)处表示这个应用的第一个见面就是
MyScaffold
。
这种flutter这种层层包裹的感觉就是前面提到的组件外构建UI一小部分含义,眼尖的同学可能已经看到(6)处的title使用的是final修饰符,这里要说明一下继承自StatelessComponent的组件,如内部有配置,属性或状态的统一需要使用final修饰符,表示这个组件本身自己是无状态的,需要依赖它外部的其他组件。这也是'组件外构建UI'最重要的含义所在。
Material应用
上面那个应用我们使用自己的组件进行应用开发,发现应用整体美观度不高。是因为flutter中应用界面会撑满整个屏幕,所以有一部分内容可能会被状态栏挡住。其实flutter提供了一系列的控件供开发人员开发Material风格的应用,这之中就有MaterialApp
,Scaffold
,ToolBar
和FloatingActionButton
等。下面看一个使用了这些控件的例子:
修改main.dart内容如下:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
routes: {'/': (RouteArguments args) => new TutorialHome()}));
}
class TutorialHome extends StatelessComponent {
Widget build(BuildContext context) {
return new Scaffold(
toolBar: new ToolBar(
left: new IconButton(icon: 'navigation/menu'),
center: new Text('Example title'),
right: [new IconButton(icon: 'action/search')]),
body: new Center(child: new Text('Hello, world!')),
floatingActionButton:
new FloatingActionButton(child: new Icon(icon: 'content/add')));
}
}
修改flutter.yaml
文件内容如下:
name: my_app
material-design-icons:
- name: action/search
- name: content/add
- name: navigation/menu
运行结果如下:
现在我们的应用看起来是不是更像是一个Material Design
的应用了?我们使用的Scaffold
和ToolBar
让ToolBar自带了阴影并且字体风格有有了调整。另外还加上了FloatingActionButton
。
总结
本文主要讲解flutter种的无状态组件,即继承自StatelessComponent
的组件。它们的特点就是自己内部的配置属性都使用final修饰符,强制其自身无法修改自身状态。下一节将讲解StatefulComponent
。
Flutter入门之无状态组件的更多相关文章
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
- StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据
一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...
- React系列文章:无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- react的redux无状态组件
Provider功能主要为以下两点: 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connec ...
- React: 无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...
- 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!
状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...
- 15. react UI组件和容器组件的拆分 及 无状态组件
1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件 进行逻辑操作 UI组件的拆分 新建一个 ...
随机推荐
- instanceof 与typeof的用法
通常来讲,使用 instanceof 就是判断一个实例是否属于某种类型.例如: var oStringObject = new String("hello world"); con ...
- atitit.atiHtmlUi web组件化方案与规范v1
atitit.atiHtmlUi web组件化方案与规范v1 1. 如何在现有html 标签基础上定义自己的组件1 2. 组件的构成与定义1 3. 组件的加载1 4. 组件css的加载2 5. 操作组 ...
- Django--ORM基础
ORM(映射关系) 映射关系: 表名 <-------> 类名 字段 <-------> 属性 表记录 <------->类实例对象 创建表(建立模型) 在Djan ...
- iOS图片上传及压缩
提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. 使用UIImagePickerContr ...
- CCNA2.0笔记_安全管理设备
设备安全 配置Console密码 Switch(config)#line console 0 Switch(config-line)#login Switch(config-line)#passwor ...
- 文件IO之——阻塞和非阻塞及perror函数
读常规文件是不会阻塞的,不管读多少字节,read一定会在有限的时间内返回.从终端设备或网络读则不一定,如果从终端输入的数据没有换行符,调用read读终端设备就会阻塞,如果网络上没有接收到数据包,调用r ...
- winform播放音乐
string sound = Application.StartupPath +@"\song\123.wav"; //Application.StartupPath:程序exe所 ...
- gcc 遇到过的语法问题
1.在ubuntu 12.04 环境下,在/etc/ld.so.conf.d/目录里添加某个so库的配置路径,比如 /home/myself/abc/lib/ 执行 sudo ldconfig
- 使用Data URL将图片嵌入到网页中
早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...
- TCP编程,Socket通讯
网络编程分两种,一种是TCP编程,还有一种是UDP编程(点击打开链接).而本文先讲述简单的TCP编程,Socket套接字连接通讯,实现简单的client与server之间的信息传输. 以下是clien ...