带孩子放大堆栈

时间:2019-12-22 01:20:09

标签: flutter

您知道是否以及如何使Stack缩放-使用可拖动小部件之类的项目。

我看过使用matrix_gesture_detector中的矩阵变换,但是无法使其在堆栈中工作。问题在于,是堆栈扩展,而不是堆栈中的项目?

import 'package:flutter/material.dart';
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  Matrix4 matrix = Matrix4.identity();

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: MatrixGestureDetector(
        onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
          setState(() {
            matrix = m;
          });
        },
        child: Transform(
          transform: matrix,
          child: Container(
            color: Colors.grey,
            child: myStack()),
        ),
      )

      );
  }

    Widget myStack() {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 100.0,
          top: 150.0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
        Positioned(
          left: 100.0,
          top: 300.0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}

enter image description here

0 个答案:

没有答案