Flutter入门三部曲(2) - 界面开发基础 | 掘金技术征文

时间  2019-11-29
标签 flutter 入门 三部曲 界面 开发 基础 技术 征文 繁體版
原文   原文链接

image.png

上一节咱们熟悉了初始化后的flutter的界面。这一节，咱们就来重点了解一下这部分的内容。html

StatelessWidgets and StatefulWidgets

  • Flutter中的Widget都必须从Flutter库中继承。 你将使用的两个几乎老是StatelessWidget和StatefulWidget。顾名思义，咱们只要若是是不须要根据状态变化的组件，咱们能够直接继承StatelessWidget.若是和状态有关系的组件就必须继承StatefulWidget。
  • Flutter中的Widget都是不可变的状态。 可是实际上，总要根据对应的状态，视图发生变化，因此就有了state。用它来保持咱们的状态。 这样，一个Stateful Widget，其实是两个类：状态对象state和Widget组成的。 以下代码
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
复制代码
  • setState & build _MyHomePageState继承于State.一方面须要管理本身的状态_counter，一方面须要build来构造组件。 改变状态后，须要经过setState来从新构建widget，就是会从新调用build方法，来获得状态同步。

最多见的Widget

接着先看看一些经常使用的组件，这些是随时可用的小部件，开箱即用，你会很是满意：算法

  • Text - 用于简单地在屏幕上显示文本的小部件。
  • Image - 用于显示图像。
  • Icon - 用于显示Flutter的内置Material和Cupertino图标。
  • Container - 在Flutter中，至关于div。容许在其中进行添加填充，对齐，背景，力大小以及其余东西的加载。空的时候也会占用0px的空间，这很方便。
  • TextInput - 处理用户反馈。
  • Row, Column- 这些小部件显示水平或垂直方向的子项列表。
  • Stack - 堆栈显示一个孩子的列表。这个功能很像CSS中的'position'属性。
  • Scaffold - 为应用提供基本的布局结构。它能够轻松实现底部导航，appBars，后退按钮等。

更多的能够看目录。segmentfault

**注意：**若是您熟悉基于组件的框架（如React或Vue），则可能不须要阅读此内容。Widget就是组件。bash

封装组件

这样的话，实际开发中，也是经过不断对组件的封装，来提升工做效率。 好比简单的封装一个原型的图片组件(实际上，应该这个width和height均可以封装进去的。)网络

class CircleImage extends StatelessWidget {
  final String renderUrl;

  CircleImage(this.renderUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.0,
      height: 100.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
          fit: BoxFit.cover,
          image: NetworkImage(renderUrl ?? ''),
        ),
      ),
    );
  }
}

//直接使用
new CircleImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533638174553&di=6913961a358faf638b6233e5d3dcc2b2&imgtype=0&src=http%3A%2F%2Fimage.9game.cn%2F2015%2F3%2F5%2F10301938.png')

复制代码

运行效果(中间皮卡丘)app

image.png

Stateful Widget 的生命周期

如今让咱们深刻一点， 先来思考一下 - 为何Stateful Widget会将State和Widget分开呢？框架

  • 答案就只有一个：性能。
  • State管理着状态，它是常驻的。然而，Widget是不可变的，当配置发生变化，它会立马发生重建。因此这样的重建的成本是极低的。 由于State在每次重建时都没有抛弃，因此能够维护它而且没必要每次重建某些东西时都要进行昂贵的计算以得到状态属性。
  • 此外，这是容许Flutter动画存在的缘由。由于State没有丢弃，它能够不断重建它的Widget以响应数据变化。

1. createState()

当建立一个StatefulWidget时。当即调用。一般都是以下，这样简单的操做。less

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

复制代码

2. mounted is true

当这个Widget调用createState 后, 会将buildContext 传入。 BuildContext 内有本身在widget tree上相关的信息。异步

全部的widgets 都有 bool this.mounted 这个属性. 当BuildContext传入时，它将会被标记成 true。若是这个属性不是true的话，调用setState会报错。ide

注意：你能够在调用setState前，检查一下这个变量。

if (mounted) {...` to make sure the State exists before calling `setState()
复制代码

3 . initState()

这个方法只会调用一次，在这个Widget被建立以后。它必须调用super.initState(). 在这里能够作：

  1. 初始化根据对应BuildContext的状态
  2. 初始化根据在树上的父节点的属性肯定的值
  3. 注册Streams ChangeNotifiers或者其余会改变的数据的监听。
@override
initState() {
  super.initState();
  // Add listeners to this class
  cartItemStream.listen((data) {
    _updateWidget(data);
  });
}

复制代码

4. didChangeDependencies()

它是在initState 方法后，就会调用。 当Widget依赖的一些数据(好比说是InheritedWidget,后面会介绍)更新时，它会当即被调用。 同时build方法，会自动调用。 须要注意的是，你须要经过调用BuildContext.inheritFromWidgetOfExactType，手动去注册InheritedWidget的监听后，这个方法才会起做用。

文档还建议，当InheritedWidget更新时，若是须要进行网络调用（或任何其余昂贵的操做），它可能会颇有用。

5.build()

这个方法会常常被调用。

6. didUpdateWidget(Widget oldWidget)

若是父组件发生变化，并且必须去重建widget时，并且被相同的runtimeType重建时，这个方法会被调用。

由于Flutter是复用state的。因此，你可能须要从新初始化状态。 若是你的Widget是须要根据监听的数据，发生变化的，那么你就须要从旧的对象中反注册，而后注册新的对象。

注意：若是您但愿重建与此状态关联的Widget，则此方法基本上是'initState'的替代！

这个方法，会自动调用build,因此不须要去调用setState

@override
void didUpdateWidget(Widget oldWidget) {
  if (oldWidget.importantProperty != widget.importantProperty) {
    _init();
  }
}

复制代码

7. setState()

这个方法会被framework和开发者不断调用。用来通知组件刷新。

这个方法的不能有异步的回调。其余，就能够随便使用。

void updateProfile(String name) {
 setState(() => this.name = name);
}

复制代码

8. deactivate()

（这个状态暂时不是很理解） State从树中删除时会调用Deactivate，但可能会在当前帧更改完成以前从新插入。此方法的存在主要是由于State对象能够从树中的一个点移动到另外一个点。

这不多使用。

9. dispose()

State删除对象时调用Dispose ，这是永久性的。 在此方法取消订阅并取消全部动画，流等

10. mounted is false

state对象被移除了，若是调用setState，会抛出的错误。

一些疑问

BuildContext

- 1. 每一个widget都有本身的context。这个context是父组件经过build方法给他返回的。

首先，先看下面代码。咱们将在四个地方打印context的hashCode,来看看有什么不一样

//...
 _MyHomePageState() {
   //1. constructor
    print('constructor context hashcode = ${context.hashCode}');
  }

  void _incrementCounter() {
     //2. member method
    print('_incrementCounter context hashcode = ${context.hashCode}');
    setState(() {
      _counter++;
    });
  }

@override
  void initState() {
    super.initState();
    //3. initState
    print('initState context hashcode = ${context.hashCode}');
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
     //...
      floatingActionButton: new FloatingActionButton(
       onPressed: () {
          //4.floattingbutton
          print(
              'FloatingActionButton onPressed context hashcode = ${context.hashCode}');
          _incrementCounter();
        },
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
复制代码

image.png

很明显能够看到，咱们在initState方法时，已经分配拿到了父组件的BuildContext.接下来的直接使用context，也都是同一个。

咱们知道能够经过Scaffold的context来弹出一个SnackBar。这里想经过点击弹出这个。 修改代码以下：

//...
floatingActionButton: new FloatingActionButton(
        onPressed: () {
          print(
              'FloatingActionButton onPressed context hashcode = ${context.hashCode}');
          Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('I am context from Scaffold'),
              ));
        },
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
复制代码

运行，可是运行报错信息以下：

image.png

很明显。经过上面的测试，咱们知道这里的context,确实不是Scaffold。那咱们要如何在这里拿到Scaffold的context呢？

2. 经过builder方法

修改代码以下，经过Builder方法，获得这个context.

//...
floatingActionButton: new Builder(
        builder: (context) {
          return new FloatingActionButton(
            onPressed: () {
              print(
                  'FloatingActionButton onPressed context hashcode = ${context.hashCode}');
              Scaffold.of(context).showSnackBar(SnackBar(
                    content: Text('I am context from Scaffold'),
                  ));
              _incrementCounter();
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        },
      )
复制代码

运行结果

image.png

咱们能够看到，咱们确实拿到了Scaffold分配的Context,并且弹出了SnackBar.

后续过程当中，必定要注意这个Context的使用。

注意：这里其实还有另一个方法，来获得这个BuildContext。就是将FloatingActionButton分离出来，写成另一个组件，就能经过build方法拿到了。

方法以下：

  • 添加类
class ScaffoldButton extends StatelessWidget {
  ScaffoldButton({this.onPressedButton});

  final VoidCallback onPressedButton;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        print(
            'FloatingActionButton onPressed context hashcode = ${context.hashCode}');
        Scaffold.of(context).showSnackBar(
            SnackBar(content: Text('I am context from Scaffold')));
        onPressedButton();
      },
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    );
  }
}
复制代码

再将floatingActionButton修改为这个类

//...
        floatingActionButton: ScaffoldButton(
          onPressedButton: () {
            _incrementCounter();
          },
        ));

复制代码

不知所云的构造参数 Key

随意点开一个Widget,就会发现，能够传递一个参数Key.那这个Key究竟是干啥子，有什么用呢？

image.png

Flutter是受React启发的，因此Virtual Dom的diff算法也参考过来了（应该是略有修改），在diff的过程当中若是节点有Key来比较的话，可以最大程度重用已有的节点（特别在列表的场景），除了这一点这个Key也用在不少其余的地方这个之后会总结一下。总之，这里咱们能够知道key可以提升性能，因此每一个Widget都会构建方法都会有一个key的参数可选，贯穿着整个框架。

一般状况下，咱们不须要去传递这个Key。由于framework会在内部自处理它，来区分不一样的widgets 下面有几种状况，咱们可使用它

- 使用ObjectKey和ValueKey来对组件进行区分。

能够看PageStorageKey, 和另一个例子，这个例子是deletion: flutter.io/cookbook/ge….

简单的来讲，当咱们使用Row或者Column时，想要执行一个remove的动画

new AnimatedList(
  children: [
    new Card(child: new Text("foo")),
    new Card(child: new Text("bar")),
    new Card(child: new Text("42")),
  ]
)
复制代码

当咱们移除"bar"后

new AnimatedList(
  children: [
    new Card(child: new Text("foo")),
    new Card(child: new Text("42")),
  ]
)
复制代码

由于咱们没有定义Key,因此可能flutter并不知道，咱们那个item发生了改变，因此可能发生在位置1上的动画，可能发生在其余位置。 正确的修改以下：

new AnimatedList(
  children: [
    new Card(key: new ObjectKey("foo"), child: new Text("foo")),
    new Card(key: new ObjectKey("bar"), child: new Text("bar")),
    new Card(key: new ObjectKey("42"), child: new Text("42")),
  ]
)
复制代码

这样当咱们移除"bar"的时候，flutter就能准确的区别到正确的位置上。 Key虽然不是Index,可是对于每个元素来讲，是独一无二的。

- 使用GlobalKey
  1. 使用GlobalKey的场景是,从父控件和跨子Widget来传递状态时。 须要注意的是：不要滥用GlobalKey，若是有更好的方式的，请使用其余方式来传递状态。

这里有一个例子是 经过给Scaffold添加GolbalKey。而后通widget.GolbalKey.state来调用showSnackBar

class _MyHomePageState extends State<MyHomePage> {
  final globalKey =
      new GlobalKey<ScaffoldState>();

  void _incrementCounter() {
    globalKey.currentState
        .showSnackBar(SnackBar(content: Text('I am context from Scaffold')));
  }

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
        key: globalKey,
      //...
      )
}
}
复制代码

这样就能够直接从父控件调用子Widget的状态。

  1. 还有一个场景是，过渡动画，当两个页面都是相同的Widget时，也可使用GlobalKey。

总结

这边文章，咱们对StateFulWidget有了升入的认识。

  • 认识了通用的控件
  • 了解了StatefulWidget的生命周期
  • 对BuildContext 了解。
  • 对Key的场景进行了了解。获得了使用GlobalKey来跨子组件传递状态的方式。

下一遍文章:咱们将更加深刻的对Flutter的界面开发的一些原理

参考文章

Flutter Widgets

Flutter中的Key，LocalKey，GlobalKey... And More

what-are-keys-used-for-in-flutter-framework

从 0 到 1：个人 Flutter 技术实践 | 掘金技术征文，征文活动正在进行中

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程