flutter 边框_Flutter系列 --- widget

Flutter系列 --- widget

其他系列传送门如下

Flutter系列 --- 环境配置
Flutter系列 --- 第一个FlutterAPP

配合 Dart系列食用更佳

Dart (一) 语法预览
Dart (二) 语法预览
Dart (三) 语法预览

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

---

Hello world

创建项目请参考Flutter系列 --- 第一个FlutterAPP

修改yourpath/lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

当前runApp函数接受给定的widget并使其成为widget树的根(框架强制根widget覆盖整个屏幕)。我们当前的由两个widget组成: Center和Text。故而上述代码最终在我们的APP中显示:屏幕居中的一句hello world。 widget主要分为有状态的(StatefulWidget)和无状态的(StatelessWidget)。当然，具体要使用哪一种还是要取决于你当前widget的一个逻辑需要。widget主要是实现一个build函数，用于构建自身。通常一个widget是由多个级别较低的widget来共同组成的。而Flutter则依次构建这些widget,直到构建到最底层的widget(这些最底层的widget被称为RenderObject,用于计算并描述widget的几何形状。)

基础Widget

Flutter有一套丰富、强大的基础widget(你可以理解为类似rn提供的一套无差别的基础组件)。以下为一些常用的: Text: 创建一个带格式的文本 Row、Column: 这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。 Stack: 线性布局，Stack允许子widget堆叠， 你可以使用Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。 Container: Container可让您创建矩形视觉元素。container可以装饰为一个BoxDecoration, 如background、一个边框、或者一个阴影。Container也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外，Container可以使用矩阵在三维空间中对其进行变换。
举个栗子:

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Widget子类中的字段往往都会定义为"final"

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // 单位是逻辑上的像素（并非真实的像素，类似于浏览器中的像素）
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row 是水平方向的线性布局（linear layout）
      child: new Row(
        //列表项的类型是 <Widget>
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null 会禁用 button
          ),
          // Expanded expands its child to fill the available space.（这里有点flex:1的感觉，大家可以多做实验可以找到规律。）Expanded可以拥有多个children,通过flex来分配他们的大小。
          new Expanded(
            child: title,
          ),
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material 是UI呈现的“一张纸”
    return new Material(
      // Column is 垂直方向的线性布局.
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text( // 这个地方将Text这个Widget作为参数传递给了MyAppBar这个widget共同制作出了title。有点类似前端框架里面高阶组件中wrapper的写法。
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          new Expanded(
            child: new Center(
              child: new Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: new MyScaffold(),
  ));
}

上述代码中我们使用了一些Material icons,需要在pubspec.yaml做如下配置:

name: my_app
flutter:
  uses-material-design: true

为了继承主题，widget需要位于MaterialApp内才能正常显示。故而有:

....
void main() {
  runApp(new MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: new MyScaffold(),
  ));
}

---

使用Material组件

上面有讲到，Material由MaterialApp widget开始。该widget在应用程序的根部创建一些有用的widget。 我们这里说一下Navigator： 它是用来管理由字符串标识组成的widget栈(即页面路由栈)。用以帮助我们的让页面在APP中平滑的过渡。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Flutter Tutorial',
    home: new TutorialHome(),
  ));
}

// 这里创建的为一个无状态的widget
class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: new Text('Example title'),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      //body占屏幕的大部分
      body: new Center(
        child: new Text('Hello, world!'),
      ),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: new Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

吐槽一下，写 Flutter真的是会 new哭。

---

处理手势

(:зゝ∠) 手势算APP交互里最常见的一种了。我们在构建交互式应用程序的第一步是检测输入手势。让我们通过创建一个简单的按钮来了解它的工作原理：

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector( // 本身GestureDetector是不具备显示效果的，只是用来检测用户的手势的。
      onTap: () {
        print('MyButton was tapped!');
      },
      child: new Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: new BoxDecoration(
          borderRadius: new BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: new Center(
          child: new Text('Engage'),
        ),
      ),
    );
  }
}
// 整个代码解读: 当用户点击container时，GestureDetector会调用onTap回调并调用print在控制台打印一行字符串。很多widget都会使用GestureDetector为其提供一些方法。比如上述示例中button的onPress这些方法。

---

根据用户输入更改widget（StatefulWidget）

无状态的widget（StatelessWidget）: 主要是从他们的父widget接收参数并存储到final类型的成员变量中。当其要求被创建时，则使用存储的这些成员变量用于构建。
有状态的widget（StatefulWidget）: 他知道如何生成state对象，并使用它保存状态。

// 下方的RaisedButton是Material中提供的一个Button widget
class Counter extends StatefulWidget {
  // This class is the configuration for the state. It holds the
  // values (in this nothing) provided by the parent and used by the build
  // method of the State. Fields in a Widget subclass are always marked "final".

  @override
  // 温习一下: _ 开头的变量都会自动变为私有类型。
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      // This call to setState tells the Flutter framework that
      // something has changed in this State, which causes it to rerun
      // the build method below so that the display can reflect the
      // updated values. If we changed _counter without calling
      // setState(), then the build method would not be called again,
      // and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance
    // as done by the _increment method above.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $_counter'),
      ],
    );
  }
}

由于具有不同的生命周期，state和statefulWidget是单独的两个对象: widget是临时对象，用于构建当前状态下的应用程序。 state则在多次build()保持不变，用于记录状态。
上述例子中，用户通过点击Button来使_counter递增，并在其build方法中使用了当前变量_couter。这里，我们可以确定: 父组件(_CounterState)，子组件为widget，父组件拥有state即当前的_couter，而子组件通过方法_increment来和父组件通信用于达到更改_counter的效果，当state更改的同时，子组件的引用_counter也会更新，进而视图也会更新。这里的通信方式和单向数据流的React类似: 父组件和子组件进行通进行是通过state（父组件拥有的state）。而子组件和父组件通信则通过事件。

敲黑板: 在 Flutter中，事件流是“向上”传递的，而状态流是“向下”传递的

我们看一个复杂的栗子:

class CounterDisplay extends StatelessWidget {
  CounterDisplay({this.count});

  final int count;

  @override
  Widget build(BuildContext context) {
    return new Text('Count: $count');
  }
}

class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(
      onPressed: onPressed,
      child: new Text('Increment'),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return new Row(children: <Widget>[
      new CounterIncrementor(onPressed: _increment),
      new CounterDisplay(count: _counter),
    ]);
  }
}

上述的栗子是对上上一个栗子的封装版，将一些业务逻辑封装到了两个无状态的widget，用于简化父项。让逻辑更加清晰，这也是面向对象编程的一个特点。

---

整合上述

我们来维护一个简单的购物车:

ShoppingListItem

class Product {
  const Product({this.name});
  final String name;
}

typedef void CartChangedCallback(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({Product product, this.inCart, this.onCartChanged})
      : product = product,
        super(key: new ObjectKey(product));

  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    // The theme depends on the BuildContext because different parts of the tree
    // can have different themes.  The BuildContext indicates where the build is
    // taking place and therefore which theme to use.

    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context) {
    // inCart 主要用来控制商品项的主题色，存在则为主色，不存在则为灰色。
    if (!inCart) return null;

    return new TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap: () { // 当用户点击列表项时，`widget`不会直接更改当前项的`inCart`值，而是通过onCartChanged`回调来和父类通信。当父类接收到会更新内部状态而创建一个新的实例，由于`Flutter`的`diff`算法，开销其实很小。
        onCartChanged(product, !inCart);
      },
      leading: new CircleAvatar(
        backgroundColor: _getColor(context),
        child: new Text(product.name[0]),
      ),
      title: new Text(product.name, style: _getTextStyle(context)),
    );
  }
}

敲黑板: 上述子类点击按钮通过事件和父类通信更改状态这种行为，可让您在widget层次结构中存储更高的状态，从而使状态持续更长的时间。在极端情况下，存储传给runApp应用程序的widget的状态将在的整个生命周期中持续存在。

看父类:

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // The framework calls createState the first time a widget appears at a given
  // location in the tree. If the parent rebuilds and uses the same type of
  // widget (with the same key), the framework will re-use the State object
  // instead of creating a new State object.

  @override
  // 首次构建时，会通过createState创建一个_ShoppingListState与其树相应位置进行关联。当重建时，父级会重用当前_ShoppingListState来构建实例。
  _ShoppingListState createState() => new _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = new Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    // 此方法即为传递给子类的onCartChanged。通过调用setState来更新父类的state进而达到更新界面的效果。
    setState(() {
      // When user changes what is in the cart, we need to change _shoppingCart
      // inside a setState call to trigger a rebuild. The framework then calls
      // build, below, which updates the visual appearance of the app.

      if (inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Shopping List'),
      ),
      body: new ListView(
        padding: new EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return new ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    title: 'Shopping App',
    home: new ShoppingList(
      products: <Product>[
        new Product(name: 'Eggs'),
        new Product(name: 'Flour'),
        new Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

---

生命周期

有状态的widget(StatefulWidget)在调用createState之后 => 框架插入新的状态对象插入树中 => 调用initState(子类化state可以重写initState。注意: 需调用super.initState) => 当对象不再需要时,调用dispose (典型实现调用super.dispose)

---

Key

key是用来来控制框架将在widget重建时与哪些其他widget匹配
默认情况下，框架根据它们的runtimeType和它们的显示顺序来匹配
使用Key时，框架要求两个widget具有相同的key和runtimeType。
简言之: Key的作用类似于区分每一个widget，在区分的基础上并能提高diff的效率。这一点就和大多数前端框架的最小代价渲染很像了。
还有一个全局Key，这个是用来标识唯一子widget的。

---

你也可以关注我的公众号