QQ图片20200828114434.png
本来想着写几个字，后面想想还是代码
class technicianDetail extends StatefulWidget{
String id;
technicianDetail(this.id);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _technicianDetail();
}
}
class _technicianDetail extends State<technicianDetail> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("订单详情",
style: TextStyle(
color: Colors.white,
)),
centerTitle: true,
backgroundColor: Color(0xff276FA0)),
body: Container(
color: Color(0xffF6F8FA),
alignment: Alignment.topLeft,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
child: Column(
children: [
_headview,
],
),
),
),
);
}
get _headview => Column(
children: [
Container(
color: Colors.redAccent,
height: 200,
),
Container(
color: Colors.cyan,
height: 200,
child: Stack(
overflow: Overflow.visible,
children: [
Positioned(
top: -50,
left: 20,
child: Container(
width: 100,
height: 100,
color: Colors.amber,
),
)
],
),
),
],
);
}
Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置
Positioned 4个方向都是能设置负值的 ，Stack的 overflow设置为Overflow.visible 就能实现效果
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List children =const [],
}) :super(key: key, children: children);
alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子组件。所谓部分定位，在这里特指只在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
textDirection：和Row、Wrap的textDirection功能一样，都用于确定alignment对齐的参考系，即：textDirection的值为TextDirection.ltr，那么alignment的start则代表左，end就是代表右，即从左往右的顺序；如果textDirection的值为TextDirection.rtl，那么alignment的start则代表右，end就是代表左，即从右往左的顺序。
fit：此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loose代表使用子组件的大小，StackFit.expand表示扩伸到Stack大小。
overflow：此属性决定如何显示超出Stack显示空间的子组件；overflow的值为Overflow.clip时，超出部分会被裁剪，overflow的值为Overflow.visible时则不会。
网友评论