flutter 专题 九十六 Flutter开发之常用Widgets

上一篇，我们介绍了基础Widgets，接下来，我们看一下Flutter开发中一些比较常见的Widget。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改，类似于React/Vue中虚拟DOM的diff算法。

状态管理

响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”，无论是在React/Vue（两者都是支持响应式编程的Web开发框架）还是Flutter中，他们讨论的问题和解决的思想都是一致的。谈到管理状态，就不得不说以下几个常见的方法：

• Widget管理自己的状态。
• Widget管理子Widget状态。
• 混合管理（父Widget和子Widget都管理状态）。

那么，如何选择哪种状态管理方式呢？下面是官方给出的一些原则可以帮助你做出决定。

• 如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父Widget管理。
• 如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由Widget本身来管理。
• 如果某一个状态是不同Widget共享的则最好由它们共同的父Widget管理。

接下来，我们将通过创建三个简单示例TapboxA、TapboxB和TapboxC来说明管理状态的不同方式。
这些例子功能是相似的 ——创建一个盒子，当点击它时，盒子背景会在绿色与灰色之间切换。状态 _active确定颜色：绿色为true ，灰色为false，如下图所示。

管理自身状态

例如，有一个_TapboxAState类，该类主要实现了以下一些功能：

• 管理TapboxA的状态。
• 定义_active：确定盒子的当前颜色的布尔值。
• 定义_handleTap()函数，该函数在点击该盒子时更新_active，并调用setState()更新UI。
• 实现widget的所有交互式行为。

class TapboxA extends StatefulWidget {
  TapboxA({Key key}) : super(key: key);

  @override
  _TapboxAState createState() => new _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

布局Widget