一 Android和Flutter 更新View对比
- 在Android中,您可以通过直接对view进行改变来更新视图。
- 在Flutter中Widget是不可变的,不会直接更新,而必须使用Widget的状态。
二 StatelessWidgets 和 StatelessWidget
- 这是Stateful和Stateless widget的概念的来源。一个Stateless Widget就像它的名字,是一个没有状态信息的widget。
- 当您所需要的用户界面不依赖于对象配置信息以外的其他任何内容时,StatelessWidgets非常有用。
例如,在Android中,这与将logo图标放在ImageView中很相似。logo在运行时不会更改,因此您可以在Flutter中使用StatelessWidget。 - 如果您希望通过HTTP动态请求的数据更改用户界面,则必须使用StatefulWidget,并告诉Flutter框架该widget的状态已更新,以便可以更新该widget。
- 这里要注意的重要一点是无状态和有状态 widget的核心特性是相同的。每一帧它们都会重新构建,不同之处在于StatefulWidget有一个State对象,它可以跨帧存储状态数据并恢复它。
- 如果你有疑问,那么要记住这个规则:如果一个widget发生了变化(例如用户与它交互),它就是有状态的。但是,如果一个子widget对变化做出反应,而其父widget对变化没有反应,那么包含的父widget仍然可以是无状态的widget。
三 如何使用一个StatelessWidget
我们来看看你如何使用一个StatelessWidget。一个常见的StatelessWidget是Text。如果你看看Text Widget的实现,你会发现它是一个StatelessWidget的子类:
new Text(
'I like Flutter!',
style: new TextStyle(fontWeight: FontWeight.bold),
);
正如你所看到的,Text 没有与之关联的状态信息,它呈现了构造函数中传递的内容,仅此而已。
但是,如果你想让“I Like Flutter”动态变化,例如点击一个FloatingActionButton?这可以通过将Text包装在StatefulWidget中并在点击按钮时更新它来实现,如:
void main() {
runApp(new SampleApp());
}
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Sample App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SampleAppPage(),
);
}
}
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
@override
_SampleAppPageState createState() => new _SampleAppPageState();
}
class _SampleAppPageState extends State<SampleAppPage> {
// Default placeholder text
int count = 0;
void _updateText() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Sample App"),
),
body: new Center(child: new Text("$count")),
floatingActionButton: new FloatingActionButton(
onPressed: _updateText,
tooltip: 'Update Text',
child: new Icon(Icons.update),
),
);
}
}
点击一个FloatingActionButton 数字会不断增加。