新建项目-5.png

Stack个人感觉就是iOS中的 x,y,left,right …
StackPositioned配合使用,可以用于从left top bottom right等方面指定子widget的位置

  1. Stack({
  2. Key key,
  3. this.alignment = AlignmentDirectional.topStart, //对齐方式,9个位置.
  4. this.textDirection, //对齐方向
  5. this.fit = StackFit.loose, //此参数用于决定 non-positioned子Widget 如何去适应Stack的大小
  6. this.overflow = Overflow.clip, //决定如何显示超出 Stack显示空间的 子widget
  7. List<Widget> children = const <Widget>[], //
  8. }) : super(key: key, children: children);
  1. Stack(
  2. children: <Widget>[
  3. //因为默认对齐方式是 topStart 所以右上角开始
  4. Image.network(
  5. "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586249335016&di=3e3b2783d09385b45eb65293f8101352&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F12%2F20180512104335_ka4UX.thumb.700_0.jpeg",
  6. width: 200,
  7. height: 200,
  8. ),
  9. Text(
  10. "嗨,大长腿",
  11. style: TextStyle(
  12. fontSize: 30,
  13. color: Colors.white
  14. ),
  15. ),
  16. ],
  17. ),

image.png

1. alignment、textDirection 略过其他文章里有

2. fit: non-positioned子Widget 如何去适应Stack的大小

  1. fit: StackFit.expand, //子Widget 扩伸到Stack的大小

image.png

  1. StackFit.loose // 使用 子Widget 自身的大小

image.png

  1. StackFit.passthrough //Stack的父Widget 的约束无修改的传递给 Stack的子Widget

image.png

3. overflow 决定如何显示超出 Stack显示空间的widget

Overflow.visible 超出部分仍能看见
Overflow.clip 超出部分会被剪裁

Positioned

  1. child: Stack(
  2. alignment: AlignmentDirectional.centerStart,
  3. children: <Widget>[
  4. Positioned(
  5. left: 10,
  6. top: 10,
  7. child: Text(
  8. "Positioned",style: TextStyle(backgroundColor: Colors.orange),
  9. ),
  10. ),
  11. Positioned(
  12. right: 10,
  13. top: 10,
  14. child: Text(
  15. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  16. ),
  17. ),
  18. Positioned(
  19. right: 10,
  20. child: Text(
  21. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  22. ),
  23. ),
  24. Positioned(
  25. bottom: 10,
  26. left: 10,
  27. child: Text(
  28. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  29. ),
  30. ),
  31. Positioned(
  32. bottom: 10,
  33. right: 10,
  34. child: Text(
  35. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  36. ),
  37. ),
  38. Positioned(
  39. right: 10,
  40. child: Text(
  41. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  42. ),
  43. ),
  44. Positioned(
  45. //当Stack 设置 alignment: AlignmentDirectional.centerStart 时 不设置上下间距默认是居中,其他同理
  46. left: 10,
  47. child: Text(
  48. "Positioned",style: TextStyle(backgroundColor: Colors.blue),
  49. ),
  50. ),
  51. ],
  52. ),

Positioned 和iOS的UIView布局感觉很多都一样.就不在记录了

image.png