Flutter更新widget

一 Android和Flutter 更新View对比

  1. 在Android中,您可以通过直接对view进行改变来更新视图。
  2. 在Flutter中Widget是不可变的,不会直接更新,而必须使用Widget的状态。

二 StatelessWidgets 和 StatelessWidget

  1. 这是Stateful和Stateless widget的概念的来源。一个Stateless Widget就像它的名字,是一个没有状态信息的widget。
  2. 当您所需要的用户界面不依赖于对象配置信息以外的其他任何内容时,StatelessWidgets非常有用。
    例如,在Android中,这与将logo图标放在ImageView中很相似。logo在运行时不会更改,因此您可以在Flutter中使用StatelessWidget。
  3. 如果您希望通过HTTP动态请求的数据更改用户界面,则必须使用StatefulWidget,并告诉Flutter框架该widget的状态已更新,以便可以更新该widget。
  4. 这里要注意的重要一点是无状态和有状态 widget的核心特性是相同的。每一帧它们都会重新构建,不同之处在于StatefulWidget有一个State对象,它可以跨帧存储状态数据并恢复它。
  5. 如果你有疑问,那么要记住这个规则:如果一个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 数字会不断增加。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值