分析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
当子Container被Stack嵌套时,不嵌套Position 或 嵌套Position但top: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
当子Container被Stack嵌套时,嵌套Position且top ≠ null为时:
1、当子Container宽高小于等于父Container宽高时,和分析1一样,移动offset至出界,子Container会渲染到父Container的上层上。
2、当子Container宽高大于父Container宽高时,不会把溢出的部分切除掉,移动offset至出界,子Container会渲染到父Container的下层上。
分析5
当子Container被Stack嵌套时,嵌套Position且移动offset改变top和left为时,无论子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,
),
),
),
],
),
);
}