需求
要求兩個(gè)布局的widget有重疊的部分另凌。
flutter-support-negative-margin
思路
剛開(kāi)始想,通過(guò)設(shè)置margin為負(fù)值批旺,就可以解決(這是android 布局思維)销睁。但是很遺憾供璧,flutter中的padding及margin都不能設(shè)置負(fù)值(negative)。
通過(guò)查閱資料榄攀,得知通過(guò)設(shè)置 transform
屬性可以達(dá)到效果嗜傅。在此記錄下,方便以后查詢檩赢。
實(shí)現(xiàn)代碼
關(guān)鍵代碼
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Container(
color: Colors.blue,
width: Size.infinite.width,
height: 200,
child: const Align(
child: Text(
"This is top widget",
style: TextStyle(fontSize: 20, color: Colors.white),
)),
),
Container(
color: Colors.red,
height: 200,
width: 200,
transform: Matrix4.translationValues(0,-20,0),
)
],
),
);
}
}
參考
https://stackoverflow.com/questions/48086486/does-flutter-support-negative-margin