Flutter中Stack和Transform变换之间的关系

321 阅读1分钟

分析1:

当子Container宽高小于等于Container宽高时,移动offset至出界,子Container会渲染到父Container上层上。


import 'package:flutter/material.dart';

class MyTest extends StatefulWidget {
  @override
  _MyTestState createState() => _MyTestState();
}

class _MyTestState extends State<MyTest> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onScaleStart: (details) {
            lastLocalFocalPoint = details.localFocalPoint;
          },
          onScaleUpdate: (details) {
            Offset deltaLFP = details.localFocalPoint - lastLocalFocalPoint;
            offset += deltaLFP;
            lastLocalFocalPoint = details.localFocalPoint;
            setState(() {});
          },
          child: _body(),
        ),
      ),
    );
  }

  var offset = Offset.zero;
  var lastLocalFocalPoint = Offset.zero;

  Widget _body() {
    return Container(
      alignment: Alignment.center,
      color: Colors.green,
      width: 300,
      height: 300,
      child: Transform.translate(
        offset: offset,
        child: Container(
          color: Colors.red,
          width: 200,
          height: 200,
        ),
      ),
    );
  }

分析2

当子Container宽高大于Container宽高时,会把溢出的部分切除掉,移动offset至出界,子Container会渲染到父Container上层上。


  Widget _body() {
    return Container(
      alignment: Alignment.center,
      color: Colors.green,
      width: 300,
      height: 300,
      child: Transform.translate(
        offset: offset,
        child: Container(
          color: Colors.red,
          width: 500,
          height: 500,
        ),
      ),
    );
  }

分析3

当子ContainerStack嵌套时,不嵌套Position 或 嵌套Positiontop:null 时,结论和分析1分析2一样。


Widget _body() {
    return Container(
      alignment: Alignment.center,
      color: Colors.green,
      width: 300,
      height: 300,
      child: Stack(
        children: [
          Positioned(
            child: Transform.translate(
              offset: offset,
              child: Container(
                color: Colors.red,
                width: 200,
                height: 200,
              ),
            ),
          ),
        ],
      ),
    );
  }

分析4

当子ContainerStack嵌套时,嵌套Positiontop ≠ null为时:

1、当子Container宽高小于等于Container宽高时,和分析1一样,移动offset至出界,子Container会渲染到父Container上层上。

2、当子Container宽高大于Container宽高时,不会把溢出的部分切除掉,移动offset至出界,子Container会渲染到父Container下层上。

分析5

当子ContainerStack嵌套时,嵌套Position且移动offset改变topleft为时,无论子Container宽高是否大于父Container宽高,子Container都会渲染到父Container下层


  Widget _body() {
    return Container(
      alignment: Alignment.center,
      color: Colors.green,
      width: 300,
      height: 300,
      child: Stack(
        children: [
          Positioned(
            top: offset.dy,
            left: offset.dx,
            child: Transform.translate(
              offset: Offset.zero,
              child: Container(
                color: Colors.red,
                width: 200,
                height: 200,
              ),
            ),
          ),
        ],
      ),
    );
  }