Android 开发者的 Flutter（一） —— Flutter 中的 View 及更新

2023年2月4日 229次阅读 来源: 贝维斯

声明：阅读该文章请确保你有 Android 开发的相关知识
如果不知道如何搭建 Flutter 安装环境的请到这篇文章：
Flutter —— Windows 平台下的环境搭建及问题

Flutter 中的 View

在 Android 开发中，View是屏幕上显示的所有内容的基础。Buttons，Toolbars 以及 Inputs，一切都是 View。在 Flutte r中，Widget 相当于一个 View。然而，与 View 相比，Widget 有一些差异。首先，Widget 仅存在一帧，并且在每个新帧上，Flutter 的框架都会创建一个新的 Widget 实例树。相比之下，Android View 只绘制一次，直到调用 invalidate 时才会重绘。

不同于 Android Fromwork 中可变的 View，在 Flutter 中的 Widget 是不可变的。这使得 Flutter Widget 非常轻便。

该如何更新 Widgets

在 Android 中，您可以通过直接更改 View 来更新 View。但是，在 Flutter 中，Widgets 是不可变的，不会直接更新，而是必须使用 Widget 的状态。

这就是 StatefulWidget 和 StatelessWidget 概念的来源。StatelessWidget 就是一个没有状态信息的 Widget。

StatelessWidgets 当您所描述的用户界面部分不依赖于对象中的配置信息以外的任何其他部分时非常有用。

例如，在 Android 中，您将使用 ImageView 来存放 logo。而在 Flutter 中，logo 在运行期间不会更改，因为您将 logo 放入了 StatelessWidget 中。

如果您想要在进行 HTTP 调用或用户交互后根据收到的数据动态更改用户界面，那么您必须使用 StatefulWidget 告知 Fromwork 层该 Widget 的 State 已发生改变，以便更新该 Widget。

这里要注意的重要一点是无状态和有状态的 Widget 的核心特性是相同的。他们重建每一帧，不同之处在于 StatefulWidget 有一个 State 对象存储跨帧的状态数据并恢复它。

如果你有疑问，那么总要记住这个规则：如果一个 Widget 发生了变化（例如，由于用户交互），它是有状态的。但是，如果 Widget 对更改作出反应，则包含的父 Widget 如果本身不会对更改做出反应，则该 Widget 仍可能是无状态的。

让我们来看看你将如何使用 StatelessWidget。一个常见 StatelessWidget 的 Text Widget。如果你看一下这个 Text Widget 的实现， 你会发现它是一个子类 StatelessWidget。

new Text(
  'I like Flutter!',
  style: new TextStyle(fontWeight: FontWeight.bold),
);

正如你所看到的，Text Widget 没有与之关联的状态信息，它呈现了构造函数中传递的内容，仅此而已。

但是，如果你想让 “I like Flutter!” 动态变化，例如点击一个 FloatingActionButton？

这可以通过将 Text Widget 封装在一个 StatefulWidget 并在单击按钮时实现更新。

例如：

import 'package:flutter/material.dart';

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
  String textToShow = "I Like Flutter";

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(child: new Text(textToShow)),
      floatingActionButton: new FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }
}
    原文作者：贝维斯
    原文地址: https://blog.csdn.net/pd_wang/article/details/80117572
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞