flutter widget组件Tips

长按拖拽组件 - LongPressDraggable

设置拖拽手势响应时间属性 delay

/// The duration that a user has to press down before a long press is registered.
 ///
 /// Defaults to [kLongPressTimeout]. 
/// const Duration kLongPressTimeout = Duration(milliseconds: 500);

 final Duration delay;

系统介绍 delay 控制长按响应时间，默认为kLongPressTimeout 500毫秒。默认时间有点长，长按显得不灵敏。通过修改delay后拖拽体验更流畅

LongPressDraggable(
      child: Container(),
      feedback: Container(),
      delay: Duration(milliseconds: 100), // 设置长按响应时间为100毫秒
    );

固定宽高比的组件 - AspectRatio

AspectRatio组件是固定宽高比的组件，如果组件的宽度固定，希望高是宽的1/2，可以用AspectRatio实现此效果，用法如下

AspectRatio(
      aspectRatio: 2 / 1 ,
      child: Container(color: Colors.black),
    )

aspectRatio参数是宽高比，可以直接写成分数的形式，也可以写成小数的形式，但建议写成分数的形式，可读性更高

尺寸相对父组件尺寸比例组件 - FractionallySizedBox

当我们需要一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的50%，可以使用FractionallySizedBox来实现此效果。

使用FractionallySizedBox包裹子控件，设置widthFactor宽度系数或者heightFactor高度系数，系数值的范围是0-1，0.5表示占父组件的50%，用法如下：

FractionallySizedBox(
      widthFactor: .5,
      child: Container(color: Colors.red),
    )

约束子组件的最大宽高和最小宽高 - ConstrainedBox

ConstrainedBox组件子组件的最大宽高和最小宽高，假如一个组件宽高都是300，包裹在ConstrainedBox中，并给ConstrainedBox添加最大宽高约束，用法如下：

ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
      child: Container(height: 300, width: 300, color: Colors.yellow),
    );

其中Container 也有constraints 属性，控制最大、小宽高

Container(
      constraints: BoxConstraints(
        maxWidth: 100,
        minWidth: 50,
        maxHeight: 100,
        minHeight: 100,
      ),
      child: Text('123'),
    );

指定顺序stack布局组件 - IndexedStack

IndexedStack是Stack的子类，Stack是将所有的子组件叠加显示，而IndexedStack只显示指定的子组件，用法如下：

IndexedStack(
      index: _index,
      children: [
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.yellow,
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.red,
          ),
        ),
        Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.blueGrey,
          ),
        ),
      ],
    );

通过修改_index 来改变显示哪个UI组件

LayoutBuilder组件

通过 LayoutBuilder，我们可以在布局过程中拿到父组件传递的约束信息，然后我们可以根据约束信息动态的构建不同的布局。

比如我们实现一个响应式的组件 ResponsiveColumn，它的功能是当当前可用的宽度小于 200 时，将子组件显示为一列，否则显示为两列。简单来实现一下：

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 200) {
          // 最大宽度小于200，显示单列
          return Column(children: children, mainAxisSize: MainAxisSize.min);
        } else {
          // 大于200，显示双列
          var _children = [];
          for (var i = 0; i < children.length; i += 2) {
            if (i + 1 < children.length) {
              _children.add(Row(
                children: [children[i], children[i + 1]],
                mainAxisSize: MainAxisSize.min,
              ));
            } else {
              _children.add(children[i]);
            }
          }
          return Column(children: _children, mainAxisSize: MainAxisSize.min);
        }
      },
    )