Flutter系列 --- widget
其他系列传送门如下
Flutter系列 --- 环境配置
Flutter系列 --- 第一个FlutterAPP
配合
Dart
系列食用更佳
Dart (一) 语法预览
Dart (二) 语法预览
Dart (三) 语法预览
Flutter
的中心思想就是用widget
构建你的UI
。Widget
描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget
的状态发生变化时,widget
会重新构建UI
,Flutter
会对比前后变化的不同, 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改(译者语:类似于React/Vue
中虚拟DOM
的diff
算法)。
Hello world
创建项目请参考Flutter系列 --- 第一个FlutterAPP
修改yourpath/lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
当前runApp
函数接受给定的widget
并使其成为widget
树的根(框架强制根widget
覆盖整个屏幕)。我们当前的由两个widget
组成: Center
和Text
。故而上述代码最终在我们的APP中显示:屏幕居中的一句hello world
。 widget
主要分为有状态的(StatefulWidget
)和无状态的(StatelessWidget
)。当然,具体要使用哪一种还是要取决于你当前widget
的一个逻辑需要。widget
主要是实现一个build
函数,用于构建自身。通常一个widget
是由多个级别较低的widget
来共同组成的。而Flutter
则依次构建这些widget
,直到构建到最底层的widget
(这些最底层的widget
被称为RenderObject
,用于计算并描述widget
的几何形状。)
基础Widget
Flutter
有一套丰富、强大的基础widget
(你可以理解为类似rn
提供的一套无差别的基础组件)。以下为一些常用的: Text
: 创建一个带格式的文本 Row
、Column
: 这些具有弹性空间的布局类Widget可让您在水平(Row
)和垂直(Column
)方向上创建灵活的布局。其设计是基于web
开发中的Flexbox
布局模型。 Stack
: 线性布局,Stack
允许子widget
堆叠, 你可以使用Positioned
来定位他们相对于Stack
的上下左右四条边的位置。Stacks
是基于Web
开发中的绝度定位(absolute positioning
)布局模型设计的。 Container
: Container
可让您创建矩形视觉元素。container
可以装饰为一个BoxDecoration
, 如background
、一个边框、或者一个阴影。Container
也可以具有边距(margins
)、填充(padding
)和应用于其大小的约束(constraints
)。另外,Container
可以使用矩阵在三维空间中对其进行变换。
举个栗子:
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
MyAppBar({this.title});
// Widget子类中的字段往往都会定义为"final"
final Widget title;
@override
Widget build(BuildContext context) {
return new Container(
height: 56.0, // 单位是逻辑上的像素(并非真实的像素,类似于浏览器中的像素)
padding: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(color: Colors.blue[500]),
// Row 是水平方向的线性布局(linear layout)
child: new Row(
//列表项的类型是 <Widget>
children: <Widget>[
new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null, // null 会禁用 button
),
// Expanded expands its child to fill the available space.(这里有点flex:1的感觉,大家可以多做实验可以找到规律。)Expanded可以拥有多个children,通过flex来分配他们的大小。
new Expanded(
child: title,
),
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
);
}
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Material 是UI呈现的“一张纸”
return new Material(
// Column is 垂直方向的线性布局.
child: new Column(
children: <Widget>[
new MyAppBar(
title: new Text( // 这个地方将Text这个Widget作为参数传递给了MyAppBar这个widget共同制作出了title。有点类似前端框架里面高阶组件中wrapper的写法。
'Example title',
style: Theme.of(context).primaryTextTheme.title,
),
),
new Expanded(
child: new Center(
child: new Text('Hello, world!'),
),
),
],
),
);
}
}
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyScaffold(),
));
}
上述代码中我们使用了一些Material icons
,需要在pubspec.yaml
做如下配置:
name: my_app
flutter:
uses-material-design: true
为了继承主题,widget
需要位于MaterialApp
内才能正常显示。故而有:
....
void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyScaffold(),
));
}
使用Material
组件
上面有讲到,Material
由MaterialApp widget
开始。该widget
在应用程序的根部创建一些有用的widget
。 我们这里说一下Navigator
: 它是用来管理由字符串标识组成的widget
栈(即页面路由栈)。用以帮助我们的让页面在APP中平滑的过渡。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
home: new TutorialHome(),
));
}
// 这里创建的为一个无状态的widget
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Scaffold是Material中主要的布局组件.
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: new Text('Example title'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
//body占屏幕的大部分
body: new Center(
child: new Text('Hello, world!'),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: new Icon(Icons.add),
onPressed: null,
),
);
}
}
吐槽一下,写Flutter
真的是会new
哭。
处理手势
(:зゝ∠) 手势算APP交互里最常见的一种了。我们在构建交互式应用程序的第一步是检测输入手势。让我们通过创建一个简单的按钮来了解它的工作原理:
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new GestureDetector( // 本身GestureDetector是不具备显示效果的,只是用来检测用户的手势的。
onTap: () {
print('MyButton was tapped!');
},
child: new Container(
height: 36.0,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(5.0),
color: Colors.lightGreen[500],
),
child: new Center(
child: new Text('Engage'),
),
),
);
}
}
// 整个代码解读: 当用户点击container时,GestureDetector会调用onTap回调并调用print在控制台打印一行字符串。很多widget都会使用GestureDetector为其提供一些方法。比如上述示例中button的onPress这些方法。
根据用户输入更改widget
(StatefulWidget
)
无状态的widget
(StatelessWidget
): 主要是从他们的父widget
接收参数并存储到final
类型的成员变量中。当其要求被创建时,则使用存储的这些成员变量用于构建。
有状态的widget
(StatefulWidget
): 他知道如何生成state
对象,并使用它保存状态。
// 下方的RaisedButton是Material中提供的一个Button widget
class Counter extends StatefulWidget {
// This class is the configuration for the state. It holds the
// values (in this nothing) provided by the parent and used by the build
// method of the State. Fields in a Widget subclass are always marked "final".
@override
// 温习一下: _ 开头的变量都会自动变为私有类型。
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _increment() {
setState(() {
// This call to setState tells the Flutter framework that
// something has changed in this State, which causes it to rerun
// the build method below so that the display can reflect the
// updated values. If we changed _counter without calling
// setState(), then the build method would not be called again,
// and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance
// as done by the _increment method above.
// The Flutter framework has been optimized to make rerunning
// build methods fast, so that you can just rebuild anything that
// needs updating rather than having to individually change
// instances of widgets.
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: _increment,
child: new Text('Increment'),
),
new Text('Count: $_counter'),
],
);
}
}
由于具有不同的生命周期,state
和statefulWidget
是单独的两个对象: widget
是临时对象,用于构建当前状态下的应用程序。 state
则在多次build()
保持不变,用于记录状态。
上述例子中,用户通过点击Button
来使_counter
递增,并在其build
方法中使用了当前变量_couter
。这里,我们可以确定: 父组件(_CounterState
),子组件为widget
,父组件拥有state
即当前的_couter
,而子组件通过方法_increment
来和父组件通信用于达到更改_counter
的效果,当state
更改的同时,子组件的引用_counter
也会更新,进而视图也会更新。这里的通信方式和单向数据流的React
类似: 父组件和子组件进行通进行是通过state
(父组件拥有的state)。而子组件和父组件通信则通过事件。
敲黑板: 在
Flutter
中,事件流是“向上”传递的,而状态流是“向下”传递的
我们看一个复杂的栗子:
class CounterDisplay extends StatelessWidget {
CounterDisplay({this.count});
final int count;
@override
Widget build(BuildContext context) {
return new Text('Count: $count');
}
}
class CounterIncrementor extends StatelessWidget {
CounterIncrementor({this.onPressed});
final VoidCallback onPressed;
@override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: onPressed,
child: new Text('Increment'),
);
}
}
class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
int _counter = 0;
void _increment() {
setState(() {
++_counter;
});
}
@override
Widget build(BuildContext context) {
return new Row(children: <Widget>[
new CounterIncrementor(onPressed: _increment),
new CounterDisplay(count: _counter),
]);
}
}
上述的栗子是对上上一个栗子的封装版,将一些业务逻辑封装到了两个无状态的widget
,用于简化父项。让逻辑更加清晰,这也是面向对象编程的一个特点。
整合上述
我们来维护一个简单的购物车:
ShoppingListItem
class Product {
const Product({this.name});
final String name;
}
typedef void CartChangedCallback(Product product, bool inCart);
class ShoppingListItem extends StatelessWidget {
ShoppingListItem({Product product, this.inCart, this.onCartChanged})
: product = product,
super(key: new ObjectKey(product));
final Product product;
final bool inCart;
final CartChangedCallback onCartChanged;
Color _getColor(BuildContext context) {
// The theme depends on the BuildContext because different parts of the tree
// can have different themes. The BuildContext indicates where the build is
// taking place and therefore which theme to use.
return inCart ? Colors.black54 : Theme.of(context).primaryColor;
}
TextStyle _getTextStyle(BuildContext context) {
// inCart 主要用来控制商品项的主题色,存在则为主色,不存在则为灰色。
if (!inCart) return null;
return new TextStyle(
color: Colors.black54,
decoration: TextDecoration.lineThrough,
);
}
@override
Widget build(BuildContext context) {
return new ListTile(
onTap: () { // 当用户点击列表项时,`widget`不会直接更改当前项的`inCart`值,而是通过onCartChanged`回调来和父类通信。当父类接收到会更新内部状态而创建一个新的实例,由于`Flutter`的`diff`算法,开销其实很小。
onCartChanged(product, !inCart);
},
leading: new CircleAvatar(
backgroundColor: _getColor(context),
child: new Text(product.name[0]),
),
title: new Text(product.name, style: _getTextStyle(context)),
);
}
}
敲黑板: 上述子类点击按钮通过事件和父类通信更改状态这种行为,可让您在widget层次结构中存储更高的状态,从而使状态持续更长的时间。在极端情况下,存储传给runApp应用程序的widget的状态将在的整个生命周期中持续存在。
看父类:
class ShoppingList extends StatefulWidget {
ShoppingList({Key key, this.products}) : super(key: key);
final List<Product> products;
// The framework calls createState the first time a widget appears at a given
// location in the tree. If the parent rebuilds and uses the same type of
// widget (with the same key), the framework will re-use the State object
// instead of creating a new State object.
@override
// 首次构建时,会通过createState创建一个_ShoppingListState与其树相应位置进行关联。当重建时,父级会重用当前_ShoppingListState来构建实例。
_ShoppingListState createState() => new _ShoppingListState();
}
class _ShoppingListState extends State<ShoppingList> {
Set<Product> _shoppingCart = new Set<Product>();
void _handleCartChanged(Product product, bool inCart) {
// 此方法即为传递给子类的onCartChanged。通过调用setState来更新父类的state进而达到更新界面的效果。
setState(() {
// When user changes what is in the cart, we need to change _shoppingCart
// inside a setState call to trigger a rebuild. The framework then calls
// build, below, which updates the visual appearance of the app.
if (inCart)
_shoppingCart.add(product);
else
_shoppingCart.remove(product);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Shopping List'),
),
body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: widget.products.map((Product product) {
return new ShoppingListItem(
product: product,
inCart: _shoppingCart.contains(product),
onCartChanged: _handleCartChanged,
);
}).toList(),
),
);
}
}
void main() {
runApp(new MaterialApp(
title: 'Shopping App',
home: new ShoppingList(
products: <Product>[
new Product(name: 'Eggs'),
new Product(name: 'Flour'),
new Product(name: 'Chocolate chips'),
],
),
));
}
生命周期
有状态的widget
(StatefulWidget
)在调用createState
之后 => 框架插入新的状态对象插入树中 => 调用initState
(子类化state
可以重写initState
。注意: 需调用super.initState
) => 当对象不再需要时,调用dispose
(典型实现调用super.dispose
)
Key
key
是用来来控制框架将在widget
重建时与哪些其他widget
匹配
默认情况下,框架根据它们的runtimeType
和它们的显示顺序来匹配
使用Key
时,框架要求两个widget
具有相同的key
和runtimeType
。
简言之: Key
的作用类似于区分每一个widget
,在区分的基础上并能提高diff
的效率。这一点就和大多数前端框架的最小代价渲染很像了。
还有一个全局Key
,这个是用来标识唯一子widget
的。
你也可以关注我的公众号