Flutter 组件化编程

2023年12月22日 135次阅读 来源: iwakevin

组件化编程就像是搭积木一样的开发。把整个应用拆分成许多部分，每部分各自管理自己的组件以及数据状态，这样达到一个更好的可维护性，可扩展性。

对于组件来说，大致会分为几个类型的组件：

  • 展示组件：展示型组件并不维护数据状态，它更多的作用是用来展示效果与数据。
  • 容器组件：容器组件并不涉及 UI 方面，而是负责处理数据与状态。
  • 布局组件：特定的布局方式，建议是把它们封装成一个布局组件。
  • 页面组件：页面组件负责当前页面的组件结构。因为一个页面是由很多组件组成的，它们的数据关系如何？布局如何？都是在页面组件上处理。

状态（State）

前面说了 Flutter 借鉴 React，定义出了一套 Widget。因此在 Widget 里也有 State 的概念。

在 React 里的 State 的作用同样也适用与 Flutter。

class StateWrap extends StatefulWidget {
    @override
    createState() => new MyComponent();
}

class MyComponent extends State<StateWrap> {
    String text = 'Hello, world!';

    @override
    Widget build(BuildContext context) {
        return new Center(
            child: new Text(this.text),
        );
    }
}

有一点需要注意的，首先需要一个编写一个包装类，它继承至 StatefulWidget，实现 createState 方法。

在 Dart 里，带下划线开头的变量是私有变量，一般会把 State 设置为私有变量。其外在类的属性是可以不使用 this 的。对于 State 的更新，Flutter 也是使用 setState。不同的是，setState 接受的不是对象，而是一个回调函数，在这个回调函数里对 State 的更改会直接响应式的影响 UI。

class StateWrap extends StatefulWidget {
    @override
    createState() => new MyComponent();
}

class MyComponent extends State<StateWrap> {
    String _text = 'Hello, world!';

    void update() {
        // 更新 State
        this.setState(() {
            _text = 'Hello';
        });
    }

    @override
    Widget build(BuildContext context) {
        return new Center(
            child: new Text(_text),
        );
    }
}

属性（Props）

在 React 里有 Props 的概念，同样的在 Flutter 也有 Props 的概念。State 与 Props 是可以共存的，因为 State 需要使用一个 StatefulWidget 包装，因此会比较麻烦。

Props 的定义在 StatefulWidget 里定义，并且在 createState 里传递。在 State 里通过 widget.xxx 获取值。

class StateWrap extends StatefulWidget {
    final String title;
    final Function onPress;
    StateWrap({this.title, this.onPress});

    @override
    createState() => new MyComponent(title: title, onPress: onPress);
}

class MyComponent extends State<StateWrap> {
    // props 从 widget.xxx 获取
    @override
    Widget build(BuildContext context) => new Center(
        child: new Column(
            children: <Widget>[
                new Text(widget.title),
                new FlatButton(child: const Text('Press'), onPressed: widget.onPress),
            ],
        ),
    );
}

使用的时候，也非常的简单。

new MyComponent(title: 'abc', onPress: () {
    // ...
})

在 React 里，遍历数组的时候，通常会有一些上下文信息传递给事件，同样在 Flutter 也是如此类似。

onPressed: () => this.onPress(this.title)
    原文作者：iwakevin
    原文地址: https://www.jianshu.com/p/1c7b80f354cc
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞