【Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    小菜在学习过程中，想实现一行半遮挡的用户头像的功能，横向展示过程中，具体包括 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"右侧头像逐个半遮挡左侧头像","attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"左侧头像逐个半遮挡右侧头像","attrs":{}},{"type":"text","text":" 两种展示；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可展示本地图或网络图；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可自定义末尾图标；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可自定义边框样式；","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    整个自定义过程主要是通过基础的 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Stack","attrs":{}},{"type":"text","text":" 层级和 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Positioned","attrs":{}},{"type":"text","text":" 设置偏移量来完成，小菜仅记录一下在测试过程中遇到的小问题；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/13/134336a85fdf5812ab18692dddee1293.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"SeriesCircleProfile","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. 左右半遮挡","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    小菜预想的核心功能，是实现不同方向的叠加遮挡效果；其中合适准备采用 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Stack","attrs":{}},{"type":"text","text":" 小组件作为头像的层级展示，在通过 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Positioned","attrs":{}},{"type":"text","text":" 设置偏移量来设置半遮挡效果；其中 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Stack","attrs":{}},{"type":"text","text":" 中的子 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Widget","attrs":{}},{"type":"text","text":" 是以栈的方式存储的，即数组后面的元素会覆盖前面的元素；因此左右半遮挡效果主要通过 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Positioned","attrs":{}},{"type":"text","text":" 设置偏移量来完成；小菜通过定义 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"isCoverUp","attrs":{}},{"type":"text","text":" 来判断半遮挡顺序；","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1.1 右侧半遮挡左侧","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    右侧半遮挡左侧相对较容易，仅需将数组中元素向右侧偏移固定偏移量即可；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"List _listWid = [Container(height: size)];\nfor (int i = 0; i < urlList.length; i++) {\n _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));\n}\nreturn Stack(children: _listWid);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/88/8877b5b0194ec01f8b4cdb55665cb0af.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1.2 左侧半遮挡右侧","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    左侧半遮挡右侧，小菜通过数组倒序方式，然后再将数组向右侧设置固定偏移量；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"List _listWid = [Container(height: size)];\nfor (int i = urlList.length - 1; i >= 0; i--) {\n _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));\n}\nreturn Stack(children: _listWid);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a7/a74ed5bb609019d84876fd58bcd3d121.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. 本地图 & 网络图","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    小菜在自定义传递头像 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"URL","attrs":{}},{"type":"text","text":" 时考虑到，可能是网络图也可能是本地图，甚至是两者混合展示的；主要分为两类：","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2.1 纯本地图 & 纯网络图","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    小菜设置 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"isAsset","attrs":{}},{"type":"text","text":" 为 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"urlList","attrs":{}},{"type":"text","text":" 中公共的图片属性，本地图或网络图；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"if (isCoverUp ?? true) {\n if (urlList != null) {\n for (int i = urlList.length - 1; i >= 0; i--) {\n _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));\n }\n }\n} else {\n if (urlList != null) {\n for (int i = 0; i < urlList.length; i++) {\n _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));\n }\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/14/1424cc0f960ad00e6ed8211e542e94c1.webp","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2.2 本地图片 + 网络图混合","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    小菜设置一个 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"List