Flutter -- Stack & AspectRatio
2021-11-01 本文已影响0人
木扬音
Stack
-
Stack:
叠加布局Z -- 外- 子Widget按照主轴方向(从里-->外)重叠排列
- 一般结合
Positioned
来使用
Positioned 位置Widget
Positioned大小是根据父Widget走的
const Positioned({
Key? key,
this.left,//左边距离父Widget左边距离
this.top,,//顶部距离父Widget顶部距离
this.right,//右边距离父Widget右边距离
this.bottom,//底部距离父Widget底部距离
this.width,//宽度
this.height,//高度
required Widget child,
})
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
alignment: const Alignment(0, -1),
child: Stack(
children: [
Positioned(
child: Container(
color: Colors.white,
width: 200,
height: 200,
child: const Icon(Icons.add),
),
),
Positioned(
child: Container(
color: Colors.red,
width: 100,
height: 100,
child: const Icon(Icons.search_off),
),
left: 0,
),
Positioned(
child: Container(
color: Colors.blue,
width: 50,
height: 50,
child: const Icon(Icons.search),
),
right: 0,
// right: 20,
),
],
),
);
}
}
image.png
AspectRatio
宽高比组件,影响父Widget,只需要设置父Widget的Width或者Height值,如果两个都设置就会导致aspectRatio
失效
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
color: Colors.yellow,
width: 300,
height: 300,
alignment: const Alignment(0, 0),
child: Container(
//属性:child
color: Colors.blue,
height: 150,
child: const AspectRatio(
aspectRatio: 1 / 1,
),
),
);
}
}