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组件的拆分 新建一个 ...
随机推荐
- 360极速浏览器无法正确getHours
开发了一个显示时间的功能. 功能是这样的,首先从数据库中读取时间,然后显示到前端页面上. 数据库中:2017-08-10 14:25:35.867 前端显示:2017-08-10T14:25:35.8 ...
- unity3d对象的克隆
对象克隆,需要有一个预制对象. 首先创建一个预制对象,将其命名为earth,并将材质包附着上去,如下图所示: 然后点住“earth”拖入Assets>Prefabs文件夹,此时earth文字变成 ...
- andorid手机电脑操作
之前一直使用androidscreencast在pc上对手机进行操作,好久都没用了,前些天再次用的时候,提演示样例如以下: 决定还是自己写一个吧,由于7月份要做一个小分享,打算讲一些android的东 ...
- Java并发编程(六):Java里实现对象安全发布的四种方式
接上篇,首先要了解什么是对象的发布与逸出? Java里安全发布对象的四种方法1.单例(注意懒汉和饿汉的区别)2.静态属性,注意类里的静态域和静态代码块的顺序有要求3.枚举4.final
- GitHub的Fork 是什么意思
现在有这样一种情形: 有一个叫做Joe的程序猿写了一个游戏程序,而你可能要去改进它.并且Joe将他的代码放在了GitHub仓库上. 下面是你要做的事情 fork并且更新GitHub仓库的图表演示 Fo ...
- Vivado 自带IP仿真问题
可以新建一个测试工程,通过IP catalog直接生产IP核,在IP核上右键选择 Open IP Example Design 之后选择生成路径. 启动Run Simulation.
- 2018.5.2(7:20到的办公室开始早课 阮一峰的JS) 所有的默默努力都是为了让自己看起来毫不费力
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环. break语句用于跳出代码块或循环. 标签(label) JavaScript 语言允许,语句的前面有标签(label) ...
- CSS Sprites的概念、原理、适用范围和优缺点
CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
- c++的set_unexpected不起作用
代码是从:http://www.cplusplus.com/referen ... /?kw=set_unexpected找的 // set_unexpected example #include & ...
- jsp中 自定义 tag的几种方式
在jsp文件中,可以引用tag和tld文件. 1.对于tag文件,使用tagdir引用(这个直接是引用的后缀tag文件的jsp文件) <%@ taglib prefix="ui&quo ...