1.Stack
| 属性 |
类型 |
可选? |
作用 |
| alignment |
AlignmentDirectional |
命名可选 |
修改Stack内部子组件的布局参照点 |
| fit |
StackFit(枚举) |
命名可选 |
设定Stack内部的子组件的拉伸方式 |
| overflow |
Overflow(枚举) |
命名可选 |
设置Stack的子组件越界时是否显示 |
2.Positioned
| 属性 |
类型 |
可选? |
作用 |
| left, |
double |
命名可选 |
类似于Masonry框架的left约束距离 |
| top, |
double |
命名可选 |
类似于Masonry框架的top约束距离 |
| right, |
double |
命名可选 |
类似于Masonry框架的right约束距离 |
| bottom, |
double |
命名可选 |
类似于Masonry框架的bottom约束距离 |
| width, |
double |
命名可选 |
类似于Masonry框架的width约束 |
| height, |
double |
命名可选 |
类似于Masonry框架的height约束 |
class Stack_Positioned extends StatelessWidget {
const Stack_Positioned({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
/*Stack
* Stack 默认的大小是包裹内容
*
* alignment: 设置布局参照点,center->中心点,topCenter->顶部中心点
* fit : expand 将子元素拉伸到尽可能大
* */
//设置布局参照点
alignment: AlignmentDirectional.topCenter,
fit: StackFit.passthrough,
// overflow: Overflow.visible, // 越界部分可见
overflow: Overflow.clip, //不可见
children: [
Text(
'韩悦小朋友',
style: TextStyle(backgroundColor: Colors.lightBlueAccent),
),
Image.asset(
'assets/images/WechatIMG231.jpeg',
width: 300,
),
Positioned(
child: Container(
width: 150,
height: 150,
color: Colors.red,
),
//让 Container 相对于Stack left相对距离是10
left: 10,
//让 Container 相对于Stack top相对距离是10
top: 10,
//让 Container 相对于Stack right相对距离是10
right: 10,
width: 80,
//注意:
//如果同事设置了left 和 right.那么Container的width就无效了
//如果Positioned 同事给left right width都做约束,则会产生约束冲突
),
],
);
}
}
网友评论