Flutter:当孩子溢出时更改堆栈的大小

Flutter:当孩子溢出时更改堆栈的大小

我有一个可拖动的小部件(来自https://medium.com/flutter-community/create-a-draggable-widget-in-flutter-50b61f12635d),其容器中的堆栈(红色)由可移动的子代组成。这是小部件树:

Flutter:当孩子溢出时更改堆栈的大小

我想添加一个Gesture Transformations作为FormBuilder(https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/transformations/transformations_demo.dart)以变换矩阵,如在GIF中所看到的,主要是放大/缩小和变换x / y。

class _HomeViewState extends State<HomeView> {
  final _stackKey;
  _HomeViewState(this._stackKey);
  List<Widget> movableItems = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('SynApp'),actions: <Widget>[
          IconButton(
            onpressed: () {
              x = 200.0;
              y = 200.0;
              setState(() {
                movableItems.add(
                  MoveableStackItem(_stackKey),);
              });
            },icon: Icon(Icons.add),),],body: LayoutBuilder(
          builder: (BuildContext context,BoxConstraints constraints) {
        // Draw the scene as big as is available,but allow the user to
        // translate beyond that to a visibleSize that's a bit bigger.
        final Size size = Size(constraints.maxWidth,constraints.maxHeight);
        final Size visibleSize = Size(size.width * 3,size.height * 2);
        return GestureTransformable(
          reset: _reset,onResetEnd: () {
            setState(() {
              _reset = false;
            });
          },child: new Container(
            color: Colors.red,child: Stack(
                key: _stackKey,overflow: Overflow.visible,fit: StackFit.expand,children: movableItems),boundaryRect: Rect.fromLTWH(
            -visibleSize.width / 2,-visibleSize.height / 2,visibleSize.width,visibleSize.height,initialTranslation: Offset(size.width,size.height),size: size,);
      }),);
  }
}

问题是:

a)堆栈的大小等于初始屏幕。

b)当我将项目移出屏幕时,pe手势检测停止,这些项目不再可移动。

我想要什么: 我想根据物品的移动位置动态调整堆栈(红色框)的大小。

我能够找到堆栈小部件的位置和大小。


  Size stackSize;
  Offset stackPosition;
  _MoveableStackItemState(this._stackKey);


  getSizeAndPosition() {
    RenderStack _stackStack = _stackKey.currentContext.findRenderObject();
    stackSize = _stackStack.size;
    stackPosition = _stackStack.localToGlobal(Offset.zero);
    print('stackSize $stackSize');
    print('stackPosition $stackPosition');
  }

但是我开始迷失于面向UI对象的高级状态小部件操纵。

pengfei1 回答:Flutter:当孩子溢出时更改堆栈的大小

您可以用AnimatedContainer包装红色堆栈。

LayoutBuilder(
          builder: (BuildContext context,BoxConstraints constraints) {
        // Draw the scene as big as is available,but allow the user to
        // translate beyond that to a visibleSize that's a bit bigger.
        final Size size = Size(constraints.maxWidth,constraints.maxHeight);
        final Size visibleSize = Size(size.width * 3,size.height * 2);
        return GestureTransformable(
          reset: _reset,onResetEnd: () {
            setState(() {
              _reset = false;
            });
          },child: new AnimatedContainer(
            color: Colors.red,duration: Duration(milliseconds: 200),width: _stackWidth,height: _stackHeight,child: Stack(
                key: _stackKey,overflow: Overflow.visible,fit: StackFit.expand,children: movableItems),),boundaryRect: Rect.fromLTWH(
            -visibleSize.width / 2,-visibleSize.height / 2,visibleSize.width,visibleSize.height,initialTranslation: Offset(size.width,size.height),size: size,);
      }),

尝试收听以下GestureTransformable事件

onPanUpdate: (DragUpdateDetails details){
  var deltaX = details.delta.dx;
  var deltaY = details.delta.dy;
}

DragUpdateDetails对象让您知道增量

  

指针在事件的坐标空间中移动的数量   自上次更新以来的接收者

在x和y轴上。

在“ onPanUpdate”内部,您可以更新与手势增量相关的动画容器的宽度和高度。

setState((){
  _stackHeight = /* ... */
  _stackWidth = /* ... */
});
本文链接:https://www.f2er.com/3149929.html

大家都在问