【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