上一章我们简单的实现了一个hello world的小案例 ,其中我们知道项,启动会执行main方法,main方法调用了 runApp方法,其中runApp方法参数就是一个Widget对象,从这里我们得知如要写一个页面就需要一个Widget对象
那么Widget对象到底是个什么玩意呢
我们看看官方是如何解释的:
上面我们说了Widget可以扩充成元素(Elements),而管理元素(Elements)是用树进行呈现管理,那么也就是说Elements是树的一个节点,创建Widget是会对应创建一个Element,然后将该元素(Element)插入树中,如之后Widget发生了什么变化,只会将其与旧的Widget进行比较,并且相应的进行更新元素(Element),重要的是Widget发生变化,Element是不会重建,只会更新,这里我们不做深究,知道这些就足够了.
StatelessWidget用于不需要维护状态的场景,它通常在build方法中通过嵌套其它Widget来构建UI,在构建过程中会递归的构建其嵌套的Widget。我们看一个简单的例子:
class Demo extends StatelessWidget {
Demo(
{Key key,
@required this.text,
this.color,
this.textDirection: TextDirection.ltr})
: super(key: key);
final String text;
final Color color;
final TextDirection textDirection;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: color,
child: Text(
text,
textDirection: textDirection,
),
),
);
}
}
上面的代码,实现了一个显示字符串的Demo组件(Widget)
然后我们可以通过如下方式使用它:
class DemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Demo(text: "test demo");
}
}
void main() => runApp(DemoPage());
和Stateless Widget一样,Stateful Widget也是继承Widget类,并重写了createElement()方法,不同的是返回的Element对象并不相同;另外
Stateful Widget类中添加了一个新的接口createState(),我们看一个简单的例子:
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State {
@override
Widget build(BuildContext context) {
return Demo(text: "test demo");
}
}
void main() => runApp(DemoPage());
一个Stateful Widget类会对应一个State类,State表示与其对应的Stateful Widget要维护的状态,State中的保存的状态信息可以:
initialize(初始化)
initState->didChangeDependencies->build
heavy load(热重载)
reassemble->didUpdateWidget->build
remove(移除)组件
reassemble->deactive->dispose
我们看看回调函数:
点击链接加入群聊零基础学Flutter
下一篇:零基础学Flutter之Widget基础组件Text