basic.dart

2018-07-19 本文已影响0人小山包

basic.dart

[TOC]

basic.dart这个文件按对子节点的影响大致分成了6种Widget。
按子节点的数量，可以分为SingleChildRenderObjectWidget和MultiChildRenderObjectWidget。也就是布局Widget与普通Widget的区别。相当于android中的ViewGroup和View吧。

PAINTING NODES

对子节点施加额外的painting的效果，透明度、阴影、边角剪裁等。

Opacity

改变子节点的不透明度，效果图： opacity

源码：

import 'package:flutter/material.dart';

class OpacityDemo extends StatefulWidget {
  @override
  _OpacityDemoState createState() {
    return _OpacityDemoState();
  }
}

class _OpacityDemoState extends State<OpacityDemo> {
  double _opacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OpacityDemo')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Slider(
            value: _opacity,
            onChanged: (value) => setState(() => _opacity = value),
          ),
          Opacity(
            // 只有一个不透明度的参数，动态设置即可实现动画
            opacity: _opacity,
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

Opacity的实现方式是先把子节点绘制到一个缓存中，然后把设置好的透明度与子节点混合（blend）。
当不透明度为0和1的时候，效率会高一些，因为没了把子节点绘制到缓存中的步骤。
跟动态添加或删除widget相比，设置不透明度（1或0）的效率要更高。
如果要做不透明度的动画，使用AnimatedOpacity的效率要高很多，因为动态设置Opacity的不透明度会触发每一帧的刷新，而AnimatedOpacity不会。

ShaderMask

用shader给子节点增加一个mask。效果图： ShaderMas

源码:

import 'package:flutter/material.dart';

class ShaderMaskDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ShaderMask(
        shaderCallback: (Rect bounds) {
          return RadialGradient(
            center: Alignment.topLeft,
            colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
            tileMode: TileMode.mirror,
          ).createShader(bounds);
        },
        child: Center(child: Text('I’m burning the memories')),
      ),
    );
  }
}

RadialGradient的createShader方法来自Gradient类，也就说只有Gradient的子类才能创建Shader？
这个Widget目前来看用的人还是比较少，github上相关的Issue也只有个位数。
看了下Gradient是继承了Shader类的。

BackdropFilter

主要的一个应用是ios风格的毛玻璃效果。效果图： BackdropFilter

源码：

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class BackdropFilterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ConstrainedBox(
              constraints: BoxConstraints.expand(), child: FlutterLogo()),
          BackdropFilter(
            filter: ui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Center(
              child: Text(
                'Frosted',
                style: Theme.of(context).textTheme.display3,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

BackdropFilter服务的对象应该是在它“后面”的那些Widget，而它的child只是借用了一下它的效果（让BackdropFilter以及child在“后面”的Widget基础之上产生毛玻璃效果）。
最终产生毛玻璃效果的区域是child的区域。
有一点搞不懂的是这里用的Text的毛玻璃的区域，为什么是不对称的？

CustomPaint

// TODO

ClipRect

把子节点的形状剪成矩形，不过一般的子节点都看不出来，因为大部分本身就是矩形的吧。效果图： ClipRect

源码：

import 'package:flutter/material.dart';

class ClipRectDemo extends StatefulWidget {
  @override
  _ClipRectDemoState createState() {
    return _ClipRectDemoState();
  }
}

class _ClipRectDemoState extends State<ClipRectDemo> {
  double _heightFactor = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ClipRectDemo')),
      body: Column(
        children: <Widget>[
          Slider(
            value: _heightFactor,
            onChanged: (value) => setState(() => _heightFactor = value),
          ),
          ClipRect(
            // Align设置了heightFactor, 那么Align的高度为Container的_heightFactor倍
            // ClipRect之后, Container的下半部分就被剪掉了
            child: Align(
              alignment: AlignmentDirectional.topCenter,
              heightFactor: _heightFactor,
              // Container的大小为整个body
              child: Container(
                height: 400.0,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

默认情况ClipRect会禁止子节点超出它本身，但是可以通过自定义clipper属性来实现超出ClipRect的情况。clipper可以移动要剪的位置和大小，也就是那个Rect。自定义clipper单独发篇文章好了。

ClipRRect

作用和ClipRect一样，只不过有一个borderRadius参数，可以控制矩形的圆角，效果图： ClipRRect
源码：

import 'package:flutter/material.dart';

class ClipRRectDemo extends StatefulWidget {
  @override
  _ClipRRectDemoState createState() {
    return _ClipRRectDemoState();
  }
}

class _ClipRRectDemoState extends State<ClipRRectDemo> {
  double _cornerRadius = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ClipRRectDemo')),
      body: Column(
        children: <Widget>[
          Slider(
            value: _cornerRadius,
            onChanged: (value) => setState(() => _cornerRadius = value),
          ),
          ClipRRect(
            // 控制圆角的角度
            borderRadius: BorderRadius.circular(_cornerRadius * 180),
            child: Container(
              height: 400.0,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

ClipOval

ClipOval就是ClipRRect的圆角成90°的情况
源码：

import 'package:flutter/material.dart';

class ClipOvalDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ClipOvalDemo')),
      body: ClipOval(
        child: Container(
          height: 400.0,
          color: Colors.red,
        ),
      ),
    );
  }
}

ClipPath

ClipPath默认的行为（clipper参数为空）与ClipRect一样，就是简单的矩形。那么也就可知Clip系列Widget就是ClipPath的特殊情况。
clipper放到proxy_box.dart再分析了。
效果图： ClipPath
源码：

import 'package:flutter/material.dart';

class ClipPathDemo extends StatefulWidget {
  @override
  _ClipPathDemoState createState() {
    return _ClipPathDemoState();
  }
}

class _ClipPathDemoState extends State<ClipPathDemo> {
  double _heightFactor = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ClipRectDemo')),
      body: Column(
        children: <Widget>[
          Slider(
            value: _heightFactor,
            onChanged: (value) => setState(() => _heightFactor = value),
          ),
          ClipPath(
            // Align设置了heightFactor, 那么Align的高度为Container的0.5倍
            // ClipRect之后, Container的下半部分就被剪掉了
            child: Align(
              alignment: AlignmentDirectional.topCenter,
              heightFactor: _heightFactor,
              // Container的大小为整个body
              child: Container(
                height: 400.0,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

PhysicalModel

PhysicalModel的一个主要作用就是给子节点添加阴影效果（由elevation指定），还可以指定阴影的颜色和子节点的形状，主要的功能就这几个。效果图： PhysicalModel
源码：

import 'package:flutter/material.dart';

class PhysicalModelDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PhysicalModelDemo')),
      body: PhysicalModel(
        color: Colors.red,
        shape: BoxShape.circle,
        shadowColor: Colors.blueAccent,
        elevation: 20.0,
        child: Container(),
      ),
    );
  }
}

PhysicalShape

PhysicalShape和PhysicalModel类似，只不过可以自定义path（即clipper参数）。

POSITIONING AND SIZING NODES

控制子节点的位置和大小

Transform

给子节点做一个变换，注意是静态的变换（也就是变换应用了之后再画出来），而不是动画！效果图： Transform

源码：

import 'package:flutter/material.dart';

class TransformDemo extends StatefulWidget {
  @override
  TransformDemoState createState() {
    return TransformDemoState();
  }
}

class TransformDemoState extends State<TransformDemo> {
  double _angle = 0.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text('TransformDemo')),
        body: Column(
          children: <Widget>[
            Slider(
              value: _angle,
              onChanged: (value) => setState(() => _angle = value),
            ),
            Transform.rotate(
              alignment: AlignmentDirectional.center,
              angle: _angle,
              child: Center(
                child: Container(
                  height: 200.0,
                  width: 200.0,
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CompositedTransformTarget

// TODO

CompositedTransformFollower

// TODO

FittedBox

提供了子节点在FittedBox中展示的几种策略，分别是fill（子节点长和宽都撑满父节点），contain（子节点包含在父节点中），cover（子节点覆盖住父节点所占的区域，但是不像fill那样拉伸，而是通过剪裁然后放大的方式实现覆盖），fitHeight（按子节点的高度撑满父节点，宽度不管它），fitWidth（按子节点的宽度撑满父节点，高度不管它），none（按原图显示），scaleDown（如果图片需要缩小的话，那么就跟contain效果一样，其他情况和none效果一样）。效果图： FittedBox
源码：

import 'package:flutter/material.dart';

class FittedBoxDemo extends StatefulWidget {
  @override
  FittedBoxDemoState createState() {
    return FittedBoxDemoState();
  }
}

class FittedBoxDemoState extends State<FittedBoxDemo> {
  BoxFit _fit = BoxFit.cover;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FittedBoxDemo')),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.fill);
                },
                child: Text('fill'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.contain);
                },
                child: Text('contain'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.cover);
                },
                child: Text('cover'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.fitWidth);
                },
                child: Text('fitWidth'),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.fitHeight);
                },
                child: Text('fitHeight'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.none);
                },
                child: Text('none'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() => _fit = BoxFit.scaleDown);
                },
                child: Text('scaleDown'),
              ),
            ],
          ),
          Center(
            child: Container(
              height: 200.0,
              width: 200.0,
              color: Colors.red,
              child: FittedBox(
                fit: _fit,
                child: Image.asset('assets/rabbit.png'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

FractionalTranslation

依据子节点自身的百分比来对子节点做出变换。效果图： FractionalTranslation

源码：

import 'package:flutter/material.dart';

class FractionalTranslationDemo extends StatefulWidget {
  @override
  FractionalTranslationDemoState createState() {
    return FractionalTranslationDemoState();
  }
}

class FractionalTranslationDemoState extends State<FractionalTranslationDemo> {
  double _offset = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FractionalTranslationDemo')),
      body: Column(
        children: <Widget>[
          Slider(
            value: _offset,
            onChanged: (value) => setState(() => _offset = value),
          ),
          Container(
            color: Colors.blueAccent,
            child: GestureDetector(
              onTap: () => print('tapped!!!!'),
              child: FractionalTranslation(
                transformHitTests: true,
                translation: Offset(_offset, _offset),
                child: Container(
                  height: 200.0,
                  width: 200.0,
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

有一点需要注意的是transformHitTests参数，这个参数表示接收hit test的区域是否也跟着Transition一起走。

RotatedBox

以90°为单位对子节点进行旋转。效果图： RotatedBox

源码：

import 'package:flutter/material.dart';

class RotatedBoxDemo extends StatefulWidget {
  @override
  RotatedBoxDemoState createState() {
    return new RotatedBoxDemoState();
  }
}

class RotatedBoxDemoState extends State<RotatedBoxDemo> {
  int turns = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RotatedBoxDemo')),
      body: GestureDetector(
        onTap: () {
          setState(() => ++turns);
        },
        child: RotatedBox(
          quarterTurns: turns,
          child: Center(
            child: Image.asset('assets/rabbit.png'),
          ),
        ),
      ),
    );
  }
}

quarterTurns可以一直累加，它自己会做判断。

Padding

给子节点增加（其实是外边距吧）padding。效果图： Padding

源码：

import 'package:flutter/material.dart';

class PaddingDemo extends StatefulWidget {
  @override
  PaddingDemoState createState() {
    return new PaddingDemoState();
  }
}

class PaddingDemoState extends State<PaddingDemo> {
  double _insets = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PaddingDemo')),
      body: Column(
        children: <Widget>[
          Slider(
            value: _insets,
            onChanged: (value) => setState(() => _insets = value),
          ),
          Container(
            color: Colors.blueAccent,
            child: Center(
              child: Padding(
                padding: EdgeInsets.all(_insets * 50.0),
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关于直接使用Padding和使用Container的padding属性来构造padding，实际上如果Container只设置了padding属性的话，那么构造出来的就是单纯的Padding。Container只是一个便利的控件而已。

Align

对子节点进行对齐的控件。效果图： Align

源码：

import 'package:flutter/material.dart';

class AlignDemo extends StatefulWidget {
  @override
  AlignDemoState createState() {
    return new AlignDemoState();
  }
}

class AlignDemoState extends State<AlignDemo> {
  AlignmentDirectional _directional = AlignmentDirectional.center;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AlignDemo')),
      body: Column(
        children: <Widget>[
          GridView.count(
            crossAxisCount: 3,
            shrinkWrap: true,
            childAspectRatio: 3.0,
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.topStart;
                  });
                },
                child: Text('topStart'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.topCenter;
                  });
                },
                child: Text('topCenter'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.topEnd;
                  });
                },
                child: Text('topEnd'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.centerStart;
                  });
                },
                child: Text('centerStart'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.center;
                  });
                },
                child: Text('center'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.centerEnd;
                  });
                },
                child: Text('centerEnd'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.bottomStart;
                  });
                },
                child: Text('bottomStart'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.bottomCenter;
                  });
                },
                child: Text('bottomCenter'),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _directional = AlignmentDirectional.bottomEnd;
                  });
                },
                child: Text('bottomEnd'),
              ),
            ],
          ),
          Expanded(
            child: Center(
              child: Align(
                alignment: _directional,
                child: Text(
                  'i am text',
                  style: Theme.of(context).textTheme.headline,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Align有个widthFactor和heightFactor，它们的作用是确定Align本身的大小，Align的大小（如果设置了*Factor）会是子节点的宽/高*factor，比如说如果子节点宽100，widthFactor为2.0的话，那么Align自身的宽度就为200.0，高度同理。
如果factor没有设置，且有约束（？什么意思）的话，那么Align会尽可能的大
如果没有约束，且factor为null的话，那么Align就是子节点的大小。

Center

Center没什么好讲的，算是最常用的几种Widget之一了，就是Align的一个特殊情况/别名，它本身也是继承了Align类，它的widthFactor和heightFactor和Align的一样。效果图： Center
源码：

import 'package:flutter/material.dart';

class CenterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CenterDemo')),
      body: Center(
        child: Text('i am in center'),
      ),
    );
  }
}

CustomSingleChildLayout

[SingleChildLayoutDelegate]没有对外开放的已实现的实现类, flutter内建的实现类(但是是private的)的有(包括但不限于): _ToolbarContainerLayout(这个appbar内部使用的)。也就是说要用[CustomSingleChildLayout]的话, 就需要自己去实现[SingleChildLayoutDelegate]这里暂时就不去搞了。

LayoutId

// TODO

CustomMultiChildLayout

// TODO

SizedBox

强制子节点拥有SizedBox指定的大小。效果图： SizedBox
源码：

import 'package:flutter/material.dart';

class SizedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SizedBoxDemo')),
      body: Center(
        child: SizedBox(
          width: 200.0,
          height: 200.0,
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

SizedBox有个expand命名构造函数，调用这个构造函数的时候，会生成一个撑满父节点的SizedBox。

ConstrainedBox

对子节点施加额外的约束，但是所谓的最大（小）宽（高）度，到底是以什么策略进行变换还是搞不清楚。之后涉及到BoxConstraint的时候再来细看吧。效果图： ConstrainedBox
源码：

import 'package:flutter/material.dart';

class ConstrainedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ConstrainedBoxDemo')),
      body: Column(
        children: <Widget>[
          Flexible(
            child: Container(
              color: Colors.blueAccent,
            ),
          ),
          ConstrainedBox(
            constraints: BoxConstraints(minHeight: 100.0, maxHeight: 200.0),
            child: Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}

UnconstrainedBox

// TODO

FractionallySizedBox

对子节点施加一个百分比，这个百分比是FractionallySizedBox的可用空间的百分比。比较适合那种一个按钮占据一行的场景，可以设置按钮以屏幕宽为基准进行百分比缩小，这样的话在不同尺寸的设备上适应性会比较好。效果图： FractionallySizedBox
源码：

import 'package:flutter/material.dart';

class FractionallySizedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FractionallySizedBoxDemo')),
      body: Container(
        color: Colors.blueAccent,
        constraints: BoxConstraints.expand(),
        child: Column(
          children: <Widget>[
            FractionallySizedBox(
              widthFactor: 0.5,
              child: RaisedButton(
                onPressed: () {},
                child: Text('child1'),
              ),
            ),
            SizedBox(height: 8.0),
            FractionallySizedBox(
              widthFactor: 0.8,
              child: RaisedButton(
                onPressed: () {},
                child: Text('child2'),
              ),
            ),
            SizedBox(height: 8.0),
            FractionallySizedBox(
              widthFactor: 0.6,
              child: RaisedButton(
                onPressed: () {},
                child: Text('child2'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

LimitedBox

// TODO

OverflowBox

// TODO

SizedOverflowBox

// TODO

Offstage

// TODO

_OffstageElement

// TODO

AspectRatio

// TODO

IntrinsicWidth

// TODO

IntrinsicHeight

// TODO

Baseline

// TODO

SLIVERS

SliverToBoxAdapter

// TODO

SliverPadding

// TODO

LAYOUT NODES

ListBody

// TODO

Stack

// TODO

IndexedStack

// TODO

Positioned

// TODO

PositionedDirectional

// TODO

Flex

// TODO

Row

// TODO

Column

// TODO

Flexible

// TODO

Expanded

// TODO

Wrap

// TODO

Flow

// TODO

RichText

// TODO

RawImage

// TODO

DefaultAssetBundle

// TODO

WidgetToRenderBoxAdapter

// TODO

EVENT HANDLING

Listener

// TODO

RepaintBoundary

// TODO

IgnorePointer

此节点以及其子节点都将忽略点击事件，用ignoring参数区分是否忽略。效果图： IgnorePointer
源码：

import 'package:flutter/material.dart';

class IgnorePointerDemo extends StatefulWidget {
  @override
  _IgnorePointerDemoState createState() {
    return _IgnorePointerDemoState();
  }
}

class _IgnorePointerDemoState extends State<IgnorePointerDemo> {
  bool _ignore = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('IgnorePointerDemo')),
      body: Container(
        color: Colors.red,
        alignment: AlignmentDirectional.center,
        child: Column(
          children: <Widget>[
            Switch(
              value: _ignore,
              onChanged: (value) {
                setState(() => _ignore = value);
              },
            ),
            IgnorePointer(
              ignoring: _ignore,
              child: RaisedButton(
                onPressed: () => print('clicked!!'),
                child: Text('ignore'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

switch开关控制了是否忽略点击事件。

AbsorbPointer

这个控件会absorb(吸收)掉点击事件，跟其他框架里的swallow(吞)是一个意思吧。这个控件和上个控件的区别在于，这个控件本身是能够响应点击事件的，它做的是阻止事件传播到它的子节点上去，而IgnorePointer本身也不再接收事件了。效果图： AbsorbPointer
源码：

import 'package:flutter/material.dart';

class AbsorbPointerDemo extends StatefulWidget {
  @override
  _AbsorbPointerDemo createState() {
    return _AbsorbPointerDemo();
  }
}

class _AbsorbPointerDemo extends State<AbsorbPointerDemo> {
  bool _absorb = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AbsorbPointerDemo')),
      body: Container(
        color: Colors.red,
        alignment: AlignmentDirectional.center,
        child: Column(
          children: <Widget>[
            Switch(
              value: _absorb,
              onChanged: (value) {
                setState(() => _absorb = value);
              },
            ),
            GestureDetector(
              onTap: () => print('tap in GestureDetector'),
              child: AbsorbPointer(
                absorbing: _absorb,
                child: RaisedButton(
                  onPressed: () => print('tap in RaisedButton'),
                  child: Text('absorb'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

GestureDetector的响应反映AbsorbPointer本身是可以接收事件的。

MetaData

// TODO

UTILITY NODES

Semantics

// TODO

MergeSemantics

// TODO

BlockSemantics

// TODO

ExcludeSemantics

// TODO

KeyedSubtree

// TODO

Builder

// TODO

StatefulBuilder

// TOD

basic.dart

basic.dart

PAINTING NODES

Opacity

ShaderMask

BackdropFilter

CustomPaint

ClipRect

ClipRRect

ClipOval

ClipPath

PhysicalModel

PhysicalShape

POSITIONING AND SIZING NODES

Transform

CompositedTransformTarget

CompositedTransformFollower

FittedBox

FractionalTranslation

RotatedBox

Padding

Align

Center

CustomSingleChildLayout

LayoutId

CustomMultiChildLayout

SizedBox

ConstrainedBox

UnconstrainedBox

FractionallySizedBox

LimitedBox

OverflowBox

SizedOverflowBox

Offstage

_OffstageElement

AspectRatio

IntrinsicWidth

IntrinsicHeight

Baseline

SLIVERS

SliverToBoxAdapter

SliverPadding

LAYOUT NODES

ListBody

Stack

IndexedStack

Positioned

PositionedDirectional

Flex

Row

Column

Flexible

Expanded

Wrap

Flow

RichText

RawImage

DefaultAssetBundle

WidgetToRenderBoxAdapter

EVENT HANDLING

Listener

RepaintBoundary

IgnorePointer

AbsorbPointer

MetaData

UTILITY NODES

Semantics

MergeSemantics

BlockSemantics

ExcludeSemantics

KeyedSubtree

Builder

StatefulBuilder

猜你喜欢

热点阅读