From 9163a9d8bc526016ac4969c5614f7eff45d12066 Mon Sep 17 00:00:00 2001 From: GitLqr Date: Sun, 24 Nov 2024 11:55:40 +0000 Subject: [PATCH] Auto deploy from Github Actions --- 404.html | 33 + about/GitLqr/index.html | 142 ++++ about/LinXunFeng/index.html | 183 +++++ ads.txt | 1 + app-ads.txt | 1 + archives/index.html | 238 ++++++ assets/css/0.styles.04d17316.css | 1 + assets/img/search.83621669.svg | 1 + assets/js/10.2e163faf.js | 1 + assets/js/100.1cf85e72.js | 1 + assets/js/101.759f1e68.js | 1 + assets/js/102.f29f33d0.js | 1 + assets/js/103.b2054ba5.js | 1 + assets/js/104.39135eea.js | 1 + assets/js/105.ca4fa7b6.js | 1 + assets/js/106.8c051068.js | 1 + assets/js/107.22e9b792.js | 1 + assets/js/108.e6886aa2.js | 1 + assets/js/109.8781cedc.js | 1 + assets/js/11.ffe2eaf9.js | 1 + assets/js/110.613e113e.js | 1 + assets/js/111.7fd7cfa3.js | 1 + assets/js/112.bb1a4000.js | 1 + assets/js/113.cd6a977f.js | 1 + assets/js/114.b8d81000.js | 1 + assets/js/115.223ca2dc.js | 1 + assets/js/116.b0e467c1.js | 1 + assets/js/117.6abf027e.js | 1 + assets/js/118.e4a5a34b.js | 1 + assets/js/119.b182a7f1.js | 1 + assets/js/12.89984f36.js | 1 + assets/js/120.25fc9579.js | 1 + assets/js/121.59c401c2.js | 1 + assets/js/122.a614ad50.js | 1 + assets/js/123.974d2b31.js | 1 + assets/js/124.a05e534b.js | 1 + assets/js/125.e4548c74.js | 1 + assets/js/126.1e1189eb.js | 1 + assets/js/127.424510cd.js | 1 + assets/js/128.1f4a8e34.js | 1 + assets/js/129.4184d277.js | 1 + assets/js/13.eedcba36.js | 1 + assets/js/130.8e072106.js | 1 + assets/js/131.520de181.js | 1 + assets/js/132.dc8a7c55.js | 1 + assets/js/133.60bee8f1.js | 1 + assets/js/134.7add7b52.js | 1 + assets/js/135.a0916b00.js | 1 + assets/js/136.af28838b.js | 1 + assets/js/137.b1bc3b13.js | 1 + assets/js/138.55aa341a.js | 1 + assets/js/139.03b5f7bf.js | 1 + assets/js/14.7a93d753.js | 1 + assets/js/140.690c1340.js | 1 + assets/js/141.c35f2fa7.js | 1 + assets/js/142.1068f32d.js | 1 + assets/js/143.e2755ea1.js | 1 + assets/js/144.c651a81e.js | 1 + assets/js/145.78366984.js | 1 + assets/js/146.83151f64.js | 1 + assets/js/147.1860c9e8.js | 1 + assets/js/148.2ecc958b.js | 1 + assets/js/149.e70ed96c.js | 1 + assets/js/15.79ec5c92.js | 1 + assets/js/150.7ec4fd25.js | 1 + assets/js/151.446a607d.js | 1 + assets/js/152.0f4a4be0.js | 1 + assets/js/153.a28139ca.js | 1 + assets/js/154.3c61161f.js | 1 + assets/js/155.e5a0a813.js | 1 + assets/js/156.0645ddd6.js | 1 + assets/js/157.db1e3600.js | 1 + assets/js/158.6ff6c7e6.js | 1 + assets/js/159.aa9a6060.js | 1 + assets/js/16.c7aca3d6.js | 1 + assets/js/160.d2fb14cc.js | 1 + assets/js/161.b6666dfb.js | 1 + assets/js/162.27c5c10b.js | 1 + assets/js/163.232931dd.js | 1 + assets/js/164.56b7f317.js | 1 + assets/js/165.bbdc2b3e.js | 1 + assets/js/166.fc335c52.js | 1 + assets/js/167.c5f00fd4.js | 1 + assets/js/168.f4318621.js | 1 + assets/js/169.c01698c7.js | 1 + assets/js/17.5e3fdba7.js | 1 + assets/js/170.10d00236.js | 1 + assets/js/171.892e1c2e.js | 1 + assets/js/172.45732853.js | 1 + assets/js/173.11da543c.js | 1 + assets/js/174.60e4735d.js | 1 + assets/js/175.2d233a35.js | 1 + assets/js/176.a0e95eb7.js | 1 + assets/js/177.d5e9c00d.js | 1 + assets/js/178.25d11ac1.js | 1 + assets/js/179.58d91280.js | 1 + assets/js/18.1aeeb629.js | 1 + assets/js/180.217b957f.js | 1 + assets/js/181.00aef73f.js | 1 + assets/js/182.6fc1acd7.js | 1 + assets/js/183.9ddb84bf.js | 1 + assets/js/184.9d36e7b7.js | 1 + assets/js/185.4c4ff0f7.js | 1 + assets/js/186.d27e90cc.js | 1 + assets/js/187.370c4521.js | 1 + assets/js/188.6adebd65.js | 1 + assets/js/189.c31e68f0.js | 1 + assets/js/19.dbbc028c.js | 1 + assets/js/190.e6de55b5.js | 1 + assets/js/191.ebeb5f3c.js | 1 + assets/js/192.0a2e1878.js | 1 + assets/js/193.f2cbc95a.js | 1 + assets/js/194.7c308691.js | 1 + assets/js/195.84ea7a43.js | 1 + assets/js/196.25d77c5b.js | 1 + assets/js/197.ba70366d.js | 1 + assets/js/198.28164993.js | 1 + assets/js/199.6789d794.js | 1 + assets/js/2.7c3035d6.js | 14 + assets/js/20.51a5de06.js | 1 + assets/js/200.3740c1b6.js | 1 + assets/js/201.910e87e4.js | 1 + assets/js/202.08a3177b.js | 1 + assets/js/203.666f84f3.js | 1 + assets/js/204.58c40329.js | 1 + assets/js/205.baa51e23.js | 1 + assets/js/206.9a22d5bc.js | 1 + assets/js/207.01362188.js | 1 + assets/js/208.894af82a.js | 1 + assets/js/209.c50fd8dc.js | 1 + assets/js/21.e70f704e.js | 1 + assets/js/210.c1146abf.js | 1 + assets/js/211.80f01a3c.js | 1 + assets/js/212.de95cc7a.js | 1 + assets/js/213.3833bdd2.js | 1 + assets/js/214.a3caeb18.js | 1 + assets/js/215.8b814346.js | 1 + assets/js/216.9d845eb4.js | 1 + assets/js/217.3b682a08.js | 1 + assets/js/218.83a8b5bb.js | 1 + assets/js/219.72d6deb2.js | 1 + assets/js/22.fa737e62.js | 1 + assets/js/220.a7a89f33.js | 1 + assets/js/221.8718d7db.js | 1 + assets/js/222.c859e346.js | 1 + assets/js/223.99876210.js | 1 + assets/js/224.ed9ece7c.js | 1 + assets/js/225.7c556c11.js | 1 + assets/js/226.5c67edf9.js | 1 + assets/js/227.34a7feef.js | 1 + assets/js/228.011d4aca.js | 1 + assets/js/229.d3053748.js | 1 + assets/js/23.fbd56855.js | 1 + assets/js/230.2a22a9cf.js | 1 + assets/js/231.60cb37b0.js | 1 + assets/js/232.61191ceb.js | 1 + assets/js/233.2546795e.js | 1 + assets/js/234.12542c69.js | 1 + assets/js/235.d34ec453.js | 1 + assets/js/236.1fb6af46.js | 1 + assets/js/237.256e19cc.js | 1 + assets/js/238.94cf2742.js | 1 + assets/js/239.7a086973.js | 1 + assets/js/24.49933827.js | 1 + assets/js/240.81114559.js | 1 + assets/js/241.403ed641.js | 1 + assets/js/242.07a8e132.js | 1 + assets/js/243.14d8abdb.js | 1 + assets/js/244.73f952ea.js | 1 + assets/js/245.10bd6e1b.js | 1 + assets/js/246.caa4c426.js | 1 + assets/js/247.c8a8d8c0.js | 1 + assets/js/248.a9d7c601.js | 1 + assets/js/25.95bc3d96.js | 1 + assets/js/26.51e88060.js | 1 + assets/js/27.93ceaf69.js | 1 + assets/js/28.98658fad.js | 1 + assets/js/29.6ddd6c75.js | 1 + assets/js/3.13893726.js | 1 + assets/js/30.71d9e7d6.js | 1 + assets/js/31.87f45f94.js | 1 + assets/js/32.97670466.js | 1 + assets/js/33.8f0fc1ed.js | 1 + assets/js/34.9e5ceb82.js | 1 + assets/js/35.428722ad.js | 1 + assets/js/36.41b51f6c.js | 1 + assets/js/37.f4dd9d75.js | 1 + assets/js/38.4223fc2b.js | 1 + assets/js/39.ba33be6d.js | 1 + assets/js/4.f7dc433c.js | 1 + assets/js/40.a962946c.js | 1 + assets/js/41.7f0bcd0a.js | 1 + assets/js/42.0ec42041.js | 1 + assets/js/43.c92942e7.js | 1 + assets/js/44.76befdc6.js | 1 + assets/js/45.88b7d335.js | 1 + assets/js/46.84feaafc.js | 1 + assets/js/47.a8d57446.js | 1 + assets/js/48.82a19dc5.js | 1 + assets/js/49.d8a23ee2.js | 1 + assets/js/5.807af604.js | 1 + assets/js/50.91efb7df.js | 1 + assets/js/51.b9ba18f7.js | 1 + assets/js/52.3e719ec9.js | 1 + assets/js/53.d6676ab3.js | 1 + assets/js/54.f053b9cf.js | 1 + assets/js/55.ca58a222.js | 1 + assets/js/56.7cd797c3.js | 1 + assets/js/57.0bb67c6d.js | 1 + assets/js/58.70914d63.js | 1 + assets/js/59.0e552c49.js | 1 + assets/js/6.a31fcaa5.js | 1 + assets/js/60.1b2d473d.js | 1 + assets/js/61.53817796.js | 1 + assets/js/62.e0e2273f.js | 1 + assets/js/63.b8232360.js | 1 + assets/js/64.eeb341aa.js | 1 + assets/js/65.b25b1872.js | 1 + assets/js/66.66efeaff.js | 1 + assets/js/67.4a4333dc.js | 1 + assets/js/68.c2ae221f.js | 1 + assets/js/69.584cb961.js | 1 + assets/js/7.1c0d71a7.js | 1 + assets/js/70.34ed8bd2.js | 1 + assets/js/71.3da4de48.js | 1 + assets/js/72.b80f8705.js | 1 + assets/js/73.41558958.js | 1 + assets/js/74.ca5b7745.js | 1 + assets/js/75.4d50614e.js | 1 + assets/js/76.082046b5.js | 1 + assets/js/77.5a0d31b9.js | 1 + assets/js/78.af5fc05d.js | 1 + assets/js/79.2021a1c1.js | 1 + assets/js/8.60caa592.js | 1 + assets/js/80.58702890.js | 1 + assets/js/81.98257fc5.js | 1 + assets/js/82.d2ec4f43.js | 1 + assets/js/83.b328c416.js | 1 + assets/js/84.7531b4d2.js | 1 + assets/js/85.a0b1fb20.js | 1 + assets/js/86.d0757050.js | 1 + assets/js/87.8928e569.js | 1 + assets/js/88.e1e59ac9.js | 1 + assets/js/89.9aea3b85.js | 1 + assets/js/9.f7f01d43.js | 1 + assets/js/90.ba53a640.js | 1 + assets/js/91.01546d35.js | 1 + assets/js/92.45e72a27.js | 1 + assets/js/93.43478922.js | 1 + assets/js/94.9b9c5ef0.js | 1 + assets/js/95.30d4967d.js | 1 + assets/js/96.40a9f32b.js | 1 + assets/js/97.b6388c82.js | 1 + assets/js/98.8cc038d2.js | 1 + assets/js/99.2f47800e.js | 1 + assets/js/app.686005d4.js | 10 + backend/index.html | 113 +++ categories/index.html | 454 ++++++++++++ img/favicon.ico | Bin 0 -> 16958 bytes index.html | 115 +++ js/global.js | 7 + mobile/index.html | 288 ++++++++ more/index.html | 98 +++ note/designpattern/index.html | 106 +++ note/flutter/index.html | 92 +++ note/flutter/lxf/review/index.html | 87 +++ note/kotlin/index.html | 118 +++ pages/00e6eb/index.html | 110 +++ pages/022231/index.html | 141 ++++ pages/030ff5/index.html | 398 ++++++++++ pages/0422cb/index.html | 160 ++++ pages/04a87c/index.html | 281 +++++++ pages/05278d/index.html | 163 +++++ pages/0790a0/index.html | 170 +++++ pages/07f268/index.html | 289 ++++++++ pages/084bc4/index.html | 252 +++++++ pages/084bf9/index.html | 127 ++++ pages/087ea3/index.html | 558 ++++++++++++++ pages/0909a3/index.html | 142 ++++ pages/091864/index.html | 252 +++++++ pages/0c1879/index.html | 278 +++++++ pages/0d47a0/index.html | 233 ++++++ pages/0d4d47/index.html | 131 ++++ pages/0e461d/index.html | 143 ++++ pages/0ee6a4/index.html | 167 +++++ pages/0f2500/index.html | 352 +++++++++ pages/0f3155/index.html | 501 +++++++++++++ pages/0fcdc8/index.html | 245 +++++++ pages/10277d/index.html | 349 +++++++++ pages/1084c4/index.html | 106 +++ pages/117e5d/index.html | 148 ++++ pages/1195b1/index.html | 294 ++++++++ pages/13365e/index.html | 202 +++++ pages/13bf45/index.html | 270 +++++++ pages/13fb2b/index.html | 151 ++++ pages/15960b/index.html | 148 ++++ pages/15d73d/index.html | 377 ++++++++++ pages/1751fb/index.html | 192 +++++ pages/17d6bb/index.html | 139 ++++ pages/19fce1/index.html | 452 ++++++++++++ pages/1af1e6/index.html | 203 ++++++ pages/1cb0c1/index.html | 116 +++ pages/1d7592/index.html | 156 ++++ pages/2069ac/index.html | 158 ++++ pages/21e20f/index.html | 428 +++++++++++ pages/23e976/index.html | 220 ++++++ pages/242c2b/index.html | 127 ++++ pages/253dac/index.html | 203 ++++++ pages/26b199/index.html | 303 ++++++++ pages/29287b/index.html | 193 +++++ pages/294865/index.html | 277 +++++++ pages/2a27e8/index.html | 197 +++++ pages/2afdff/index.html | 137 ++++ pages/2c5ae4/index.html | 548 ++++++++++++++ pages/2ed5f7/index.html | 175 +++++ pages/2ffb7f/index.html | 116 +++ pages/326c98/index.html | 199 +++++ pages/328069/index.html | 124 ++++ pages/32a06e/index.html | 142 ++++ pages/334ef0/index.html | 132 ++++ pages/337d0f/index.html | 106 +++ pages/3420a3/index.html | 148 ++++ pages/34334d/index.html | 156 ++++ pages/34e11b/index.html | 121 +++ pages/37adf1/index.html | 131 ++++ pages/39525c/index.html | 221 ++++++ pages/398f01/index.html | 183 +++++ pages/399558/index.html | 91 +++ pages/3a12b8/index.html | 275 +++++++ pages/3b59d7/index.html | 227 ++++++ pages/41ce5a/index.html | 190 +++++ pages/42026f/index.html | 184 +++++ pages/43645f/index.html | 90 +++ pages/443e18/index.html | 118 +++ pages/4517cb/index.html | 855 ++++++++++++++++++++++ pages/46b6cc/index.html | 220 ++++++ pages/4784fc/index.html | 154 ++++ pages/48f6d3/index.html | 157 ++++ pages/4b18ae/index.html | 219 ++++++ pages/4bbcbf/index.html | 385 ++++++++++ pages/4c1e21/index.html | 93 +++ pages/4d2b48/index.html | 472 ++++++++++++ pages/4e6b65/index.html | 165 +++++ pages/500d17/index.html | 269 +++++++ pages/526c58/index.html | 405 ++++++++++ pages/531d2b/index.html | 300 ++++++++ pages/541c9c/index.html | 817 +++++++++++++++++++++ pages/56dd3d/index.html | 234 ++++++ pages/577e7c/index.html | 224 ++++++ pages/58ae6a/index.html | 276 +++++++ pages/5944f7/index.html | 183 +++++ pages/5a5158/index.html | 128 ++++ pages/5c4b50/index.html | 375 ++++++++++ pages/5c8459/index.html | 410 +++++++++++ pages/5f806d/index.html | 90 +++ pages/5f9bf6/index.html | 187 +++++ pages/614119/index.html | 266 +++++++ pages/614da2/index.html | 333 +++++++++ pages/61cc74/index.html | 272 +++++++ pages/61d6a8/index.html | 218 ++++++ pages/63c550/index.html | 175 +++++ pages/650506/index.html | 804 ++++++++++++++++++++ pages/661407/index.html | 112 +++ pages/67358d/index.html | 172 +++++ pages/683c07/index.html | 152 ++++ pages/688a6b/index.html | 275 +++++++ pages/6caa6f/index.html | 181 +++++ pages/6d35fc/index.html | 331 +++++++++ pages/6f1cc2/index.html | 144 ++++ pages/70f890/index.html | 92 +++ pages/7776d6/index.html | 382 ++++++++++ pages/77efcc/index.html | 254 +++++++ pages/78c482/index.html | 191 +++++ pages/79a470/index.html | 91 +++ pages/79e15e/index.html | 294 ++++++++ pages/79e7e5/index.html | 311 ++++++++ pages/79efd2/index.html | 213 ++++++ pages/7b4815/index.html | 112 +++ pages/7b7220/index.html | 123 ++++ pages/7b86ec/index.html | 227 ++++++ pages/7bacc4/index.html | 116 +++ pages/7cd064/index.html | 148 ++++ pages/7e1f42/index.html | 179 +++++ pages/7f9fec/index.html | 195 +++++ pages/804129/index.html | 226 ++++++ pages/8102b2/index.html | 175 +++++ pages/810563/index.html | 112 +++ pages/814d28/index.html | 134 ++++ pages/8155cd/index.html | 182 +++++ pages/81ea4e/index.html | 227 ++++++ pages/832f44/index.html | 103 +++ pages/84a12e/index.html | 294 ++++++++ pages/861244/index.html | 138 ++++ pages/867207/index.html | 113 +++ pages/87435a/index.html | 163 +++++ pages/88eee8/index.html | 212 ++++++ pages/89a4c2/index.html | 134 ++++ pages/89ebcc/index.html | 193 +++++ pages/8ad3be/index.html | 250 +++++++ pages/8cf0b6/index.html | 293 ++++++++ pages/8e3184/index.html | 434 +++++++++++ pages/901745/index.html | 186 +++++ pages/997f68/index.html | 133 ++++ pages/9a078b/index.html | 296 ++++++++ pages/9a084c/index.html | 207 ++++++ pages/9b40a4/index.html | 256 +++++++ pages/9c63e1/index.html | 197 +++++ pages/9e247e/index.html | 155 ++++ pages/9f1d21/index.html | 125 ++++ pages/a03fed/index.html | 224 ++++++ pages/a0ceba/index.html | 121 +++ pages/a0e176/index.html | 220 ++++++ pages/a16954/index.html | 169 +++++ pages/a3228e/index.html | 298 ++++++++ pages/a39d04/index.html | 446 +++++++++++ pages/a52cff/index.html | 127 ++++ pages/a59099/index.html | 135 ++++ pages/a5eb80/index.html | 287 ++++++++ pages/a8e073/index.html | 184 +++++ pages/a90e8e/index.html | 210 ++++++ pages/a9e62e/index.html | 148 ++++ pages/ab3077/index.html | 228 ++++++ pages/ac13fc/index.html | 381 ++++++++++ pages/ad0098/index.html | 102 +++ pages/b0e486/index.html | 318 ++++++++ pages/b1aa38/index.html | 99 +++ pages/b1db2f/index.html | 198 +++++ pages/b2d210/index.html | 155 ++++ pages/b3bc49/index.html | 198 +++++ pages/b46b7a/index.html | 91 +++ pages/b576c8/index.html | 505 +++++++++++++ pages/b5d9a7/index.html | 140 ++++ pages/b7cd59/index.html | 223 ++++++ pages/b960c3/index.html | 268 +++++++ pages/ba99fe/index.html | 519 +++++++++++++ pages/bbc079/index.html | 492 +++++++++++++ pages/bea8f9/index.html | 160 ++++ pages/beb840/index.html | 226 ++++++ pages/bfa843/index.html | 132 ++++ pages/bfc897/index.html | 203 ++++++ pages/c243aa/index.html | 112 +++ pages/c2b035/index.html | 295 ++++++++ pages/c53d80/index.html | 183 +++++ pages/c5b883/index.html | 164 +++++ pages/c7c2c0/index.html | 230 ++++++ pages/c7d38a/index.html | 314 ++++++++ pages/cb27eb/index.html | 132 ++++ pages/cc54c3/index.html | 90 +++ pages/ccf9c0/index.html | 107 +++ pages/cd4aeb/index.html | 570 +++++++++++++++ pages/cd4fd1/index.html | 134 ++++ pages/d09c0b/index.html | 201 +++++ pages/d0a26b/index.html | 194 +++++ pages/d18561/index.html | 176 +++++ pages/d45f5d/index.html | 380 ++++++++++ pages/d4ac48/index.html | 136 ++++ pages/d85c7a/index.html | 719 ++++++++++++++++++ pages/daa62e/index.html | 184 +++++ pages/db2b0b/index.html | 641 ++++++++++++++++ pages/dd574d/index.html | 279 +++++++ pages/defa2f/index.html | 219 ++++++ pages/df8033/index.html | 181 +++++ pages/dfd4b7/index.html | 109 +++ pages/e06ece/index.html | 311 ++++++++ pages/e13e4e/index.html | 217 ++++++ pages/e18f51/index.html | 126 ++++ pages/e3339e/index.html | 280 +++++++ pages/e3a33a/index.html | 91 +++ pages/e3a5cf/index.html | 144 ++++ pages/e3acb4/index.html | 132 ++++ pages/e3eb8a/index.html | 271 +++++++ pages/e4ed73/index.html | 1095 ++++++++++++++++++++++++++++ pages/e6f2c4/index.html | 205 ++++++ pages/e87d2b/index.html | 213 ++++++ pages/e987b9/index.html | 266 +++++++ pages/e9d226/index.html | 201 +++++ pages/ea0f4e/index.html | 635 ++++++++++++++++ pages/ea5b48/index.html | 96 +++ pages/ea91be/index.html | 151 ++++ pages/ee17d1/index.html | 193 +++++ pages/f2b19d/index.html | 332 +++++++++ pages/f2ddfa/index.html | 147 ++++ pages/f63a8b/index.html | 159 ++++ pages/f66719/index.html | 221 ++++++ pages/f6869d/index.html | 431 +++++++++++ pages/f6bde9/index.html | 104 +++ pages/f6d976/index.html | 243 ++++++ pages/f81235/index.html | 122 ++++ pages/f81fb5/index.html | 112 +++ pages/f98f41/index.html | 162 ++++ pages/fb0480/index.html | 137 ++++ pages/fc665a/index.html | 671 +++++++++++++++++ pages/fc879e/index.html | 246 +++++++ pages/fcfa28/index.html | 223 ++++++ pages/fe4c94/index.html | 164 +++++ pages/feeb2d/index.html | 216 ++++++ power/index.html | 89 +++ tags/index.html | 82 +++ web/index.html | 103 +++ 499 files changed, 56131 insertions(+) create mode 100644 404.html create mode 100644 about/GitLqr/index.html create mode 100644 about/LinXunFeng/index.html create mode 100644 ads.txt create mode 100644 app-ads.txt create mode 100644 archives/index.html create mode 100644 assets/css/0.styles.04d17316.css create mode 100644 assets/img/search.83621669.svg create mode 100644 assets/js/10.2e163faf.js create mode 100644 assets/js/100.1cf85e72.js create mode 100644 assets/js/101.759f1e68.js create mode 100644 assets/js/102.f29f33d0.js create mode 100644 assets/js/103.b2054ba5.js create mode 100644 assets/js/104.39135eea.js create mode 100644 assets/js/105.ca4fa7b6.js create mode 100644 assets/js/106.8c051068.js create mode 100644 assets/js/107.22e9b792.js create mode 100644 assets/js/108.e6886aa2.js create mode 100644 assets/js/109.8781cedc.js create mode 100644 assets/js/11.ffe2eaf9.js create mode 100644 assets/js/110.613e113e.js create mode 100644 assets/js/111.7fd7cfa3.js create mode 100644 assets/js/112.bb1a4000.js create mode 100644 assets/js/113.cd6a977f.js create mode 100644 assets/js/114.b8d81000.js create mode 100644 assets/js/115.223ca2dc.js create mode 100644 assets/js/116.b0e467c1.js create mode 100644 assets/js/117.6abf027e.js create mode 100644 assets/js/118.e4a5a34b.js create mode 100644 assets/js/119.b182a7f1.js create mode 100644 assets/js/12.89984f36.js create mode 100644 assets/js/120.25fc9579.js create mode 100644 assets/js/121.59c401c2.js create mode 100644 assets/js/122.a614ad50.js create mode 100644 assets/js/123.974d2b31.js create mode 100644 assets/js/124.a05e534b.js create mode 100644 assets/js/125.e4548c74.js create mode 100644 assets/js/126.1e1189eb.js create mode 100644 assets/js/127.424510cd.js create mode 100644 assets/js/128.1f4a8e34.js create mode 100644 assets/js/129.4184d277.js create mode 100644 assets/js/13.eedcba36.js create mode 100644 assets/js/130.8e072106.js create mode 100644 assets/js/131.520de181.js create mode 100644 assets/js/132.dc8a7c55.js create mode 100644 assets/js/133.60bee8f1.js create mode 100644 assets/js/134.7add7b52.js create mode 100644 assets/js/135.a0916b00.js create mode 100644 assets/js/136.af28838b.js create mode 100644 assets/js/137.b1bc3b13.js create mode 100644 assets/js/138.55aa341a.js create mode 100644 assets/js/139.03b5f7bf.js create mode 100644 assets/js/14.7a93d753.js create mode 100644 assets/js/140.690c1340.js create mode 100644 assets/js/141.c35f2fa7.js create mode 100644 assets/js/142.1068f32d.js create mode 100644 assets/js/143.e2755ea1.js create mode 100644 assets/js/144.c651a81e.js create mode 100644 assets/js/145.78366984.js create mode 100644 assets/js/146.83151f64.js create mode 100644 assets/js/147.1860c9e8.js create mode 100644 assets/js/148.2ecc958b.js create mode 100644 assets/js/149.e70ed96c.js create mode 100644 assets/js/15.79ec5c92.js create mode 100644 assets/js/150.7ec4fd25.js create mode 100644 assets/js/151.446a607d.js create mode 100644 assets/js/152.0f4a4be0.js create mode 100644 assets/js/153.a28139ca.js create mode 100644 assets/js/154.3c61161f.js create mode 100644 assets/js/155.e5a0a813.js create mode 100644 assets/js/156.0645ddd6.js create mode 100644 assets/js/157.db1e3600.js create mode 100644 assets/js/158.6ff6c7e6.js create mode 100644 assets/js/159.aa9a6060.js create mode 100644 assets/js/16.c7aca3d6.js create mode 100644 assets/js/160.d2fb14cc.js create mode 100644 assets/js/161.b6666dfb.js create mode 100644 assets/js/162.27c5c10b.js create mode 100644 assets/js/163.232931dd.js create mode 100644 assets/js/164.56b7f317.js create mode 100644 assets/js/165.bbdc2b3e.js create mode 100644 assets/js/166.fc335c52.js create mode 100644 assets/js/167.c5f00fd4.js create mode 100644 assets/js/168.f4318621.js create mode 100644 assets/js/169.c01698c7.js create mode 100644 assets/js/17.5e3fdba7.js create mode 100644 assets/js/170.10d00236.js create mode 100644 assets/js/171.892e1c2e.js create mode 100644 assets/js/172.45732853.js create mode 100644 assets/js/173.11da543c.js create mode 100644 assets/js/174.60e4735d.js create mode 100644 assets/js/175.2d233a35.js create mode 100644 assets/js/176.a0e95eb7.js create mode 100644 assets/js/177.d5e9c00d.js create mode 100644 assets/js/178.25d11ac1.js create mode 100644 assets/js/179.58d91280.js create mode 100644 assets/js/18.1aeeb629.js create mode 100644 assets/js/180.217b957f.js create mode 100644 assets/js/181.00aef73f.js create mode 100644 assets/js/182.6fc1acd7.js create mode 100644 assets/js/183.9ddb84bf.js create mode 100644 assets/js/184.9d36e7b7.js create mode 100644 assets/js/185.4c4ff0f7.js create mode 100644 assets/js/186.d27e90cc.js create mode 100644 assets/js/187.370c4521.js create mode 100644 assets/js/188.6adebd65.js create mode 100644 assets/js/189.c31e68f0.js create mode 100644 assets/js/19.dbbc028c.js create mode 100644 assets/js/190.e6de55b5.js create mode 100644 assets/js/191.ebeb5f3c.js create mode 100644 assets/js/192.0a2e1878.js create mode 100644 assets/js/193.f2cbc95a.js create mode 100644 assets/js/194.7c308691.js create mode 100644 assets/js/195.84ea7a43.js create mode 100644 assets/js/196.25d77c5b.js create mode 100644 assets/js/197.ba70366d.js create mode 100644 assets/js/198.28164993.js create mode 100644 assets/js/199.6789d794.js create mode 100644 assets/js/2.7c3035d6.js create mode 100644 assets/js/20.51a5de06.js create mode 100644 assets/js/200.3740c1b6.js create mode 100644 assets/js/201.910e87e4.js create mode 100644 assets/js/202.08a3177b.js create mode 100644 assets/js/203.666f84f3.js create mode 100644 assets/js/204.58c40329.js create mode 100644 assets/js/205.baa51e23.js create mode 100644 assets/js/206.9a22d5bc.js create mode 100644 assets/js/207.01362188.js create mode 100644 assets/js/208.894af82a.js create mode 100644 assets/js/209.c50fd8dc.js create mode 100644 assets/js/21.e70f704e.js create mode 100644 assets/js/210.c1146abf.js create mode 100644 assets/js/211.80f01a3c.js create mode 100644 assets/js/212.de95cc7a.js create mode 100644 assets/js/213.3833bdd2.js create mode 100644 assets/js/214.a3caeb18.js create mode 100644 assets/js/215.8b814346.js create mode 100644 assets/js/216.9d845eb4.js create mode 100644 assets/js/217.3b682a08.js create mode 100644 assets/js/218.83a8b5bb.js create mode 100644 assets/js/219.72d6deb2.js create mode 100644 assets/js/22.fa737e62.js create mode 100644 assets/js/220.a7a89f33.js create mode 100644 assets/js/221.8718d7db.js create mode 100644 assets/js/222.c859e346.js create mode 100644 assets/js/223.99876210.js create mode 100644 assets/js/224.ed9ece7c.js create mode 100644 assets/js/225.7c556c11.js create mode 100644 assets/js/226.5c67edf9.js create mode 100644 assets/js/227.34a7feef.js create mode 100644 assets/js/228.011d4aca.js create mode 100644 assets/js/229.d3053748.js create mode 100644 assets/js/23.fbd56855.js create mode 100644 assets/js/230.2a22a9cf.js create mode 100644 assets/js/231.60cb37b0.js create mode 100644 assets/js/232.61191ceb.js create mode 100644 assets/js/233.2546795e.js create mode 100644 assets/js/234.12542c69.js create mode 100644 assets/js/235.d34ec453.js create mode 100644 assets/js/236.1fb6af46.js create mode 100644 assets/js/237.256e19cc.js create mode 100644 assets/js/238.94cf2742.js create mode 100644 assets/js/239.7a086973.js create mode 100644 assets/js/24.49933827.js create mode 100644 assets/js/240.81114559.js create mode 100644 assets/js/241.403ed641.js create mode 100644 assets/js/242.07a8e132.js create mode 100644 assets/js/243.14d8abdb.js create mode 100644 assets/js/244.73f952ea.js create mode 100644 assets/js/245.10bd6e1b.js create mode 100644 assets/js/246.caa4c426.js create mode 100644 assets/js/247.c8a8d8c0.js create mode 100644 assets/js/248.a9d7c601.js create mode 100644 assets/js/25.95bc3d96.js create mode 100644 assets/js/26.51e88060.js create mode 100644 assets/js/27.93ceaf69.js create mode 100644 assets/js/28.98658fad.js create mode 100644 assets/js/29.6ddd6c75.js create mode 100644 assets/js/3.13893726.js create mode 100644 assets/js/30.71d9e7d6.js create mode 100644 assets/js/31.87f45f94.js create mode 100644 assets/js/32.97670466.js create mode 100644 assets/js/33.8f0fc1ed.js create mode 100644 assets/js/34.9e5ceb82.js create mode 100644 assets/js/35.428722ad.js create mode 100644 assets/js/36.41b51f6c.js create mode 100644 assets/js/37.f4dd9d75.js create mode 100644 assets/js/38.4223fc2b.js create mode 100644 assets/js/39.ba33be6d.js create mode 100644 assets/js/4.f7dc433c.js create mode 100644 assets/js/40.a962946c.js create mode 100644 assets/js/41.7f0bcd0a.js create mode 100644 assets/js/42.0ec42041.js create mode 100644 assets/js/43.c92942e7.js create mode 100644 assets/js/44.76befdc6.js create mode 100644 assets/js/45.88b7d335.js create mode 100644 assets/js/46.84feaafc.js create mode 100644 assets/js/47.a8d57446.js create mode 100644 assets/js/48.82a19dc5.js create mode 100644 assets/js/49.d8a23ee2.js create mode 100644 assets/js/5.807af604.js create mode 100644 assets/js/50.91efb7df.js create mode 100644 assets/js/51.b9ba18f7.js create mode 100644 assets/js/52.3e719ec9.js create mode 100644 assets/js/53.d6676ab3.js create mode 100644 assets/js/54.f053b9cf.js create mode 100644 assets/js/55.ca58a222.js create mode 100644 assets/js/56.7cd797c3.js create mode 100644 assets/js/57.0bb67c6d.js create mode 100644 assets/js/58.70914d63.js create mode 100644 assets/js/59.0e552c49.js create mode 100644 assets/js/6.a31fcaa5.js create mode 100644 assets/js/60.1b2d473d.js create mode 100644 assets/js/61.53817796.js create mode 100644 assets/js/62.e0e2273f.js create mode 100644 assets/js/63.b8232360.js create mode 100644 assets/js/64.eeb341aa.js create mode 100644 assets/js/65.b25b1872.js create mode 100644 assets/js/66.66efeaff.js create mode 100644 assets/js/67.4a4333dc.js create mode 100644 assets/js/68.c2ae221f.js create mode 100644 assets/js/69.584cb961.js create mode 100644 assets/js/7.1c0d71a7.js create mode 100644 assets/js/70.34ed8bd2.js create mode 100644 assets/js/71.3da4de48.js create mode 100644 assets/js/72.b80f8705.js create mode 100644 assets/js/73.41558958.js create mode 100644 assets/js/74.ca5b7745.js create mode 100644 assets/js/75.4d50614e.js create mode 100644 assets/js/76.082046b5.js create mode 100644 assets/js/77.5a0d31b9.js create mode 100644 assets/js/78.af5fc05d.js create mode 100644 assets/js/79.2021a1c1.js create mode 100644 assets/js/8.60caa592.js create mode 100644 assets/js/80.58702890.js create mode 100644 assets/js/81.98257fc5.js create mode 100644 assets/js/82.d2ec4f43.js create mode 100644 assets/js/83.b328c416.js create mode 100644 assets/js/84.7531b4d2.js create mode 100644 assets/js/85.a0b1fb20.js create mode 100644 assets/js/86.d0757050.js create mode 100644 assets/js/87.8928e569.js create mode 100644 assets/js/88.e1e59ac9.js create mode 100644 assets/js/89.9aea3b85.js create mode 100644 assets/js/9.f7f01d43.js create mode 100644 assets/js/90.ba53a640.js create mode 100644 assets/js/91.01546d35.js create mode 100644 assets/js/92.45e72a27.js create mode 100644 assets/js/93.43478922.js create mode 100644 assets/js/94.9b9c5ef0.js create mode 100644 assets/js/95.30d4967d.js create mode 100644 assets/js/96.40a9f32b.js create mode 100644 assets/js/97.b6388c82.js create mode 100644 assets/js/98.8cc038d2.js create mode 100644 assets/js/99.2f47800e.js create mode 100644 assets/js/app.686005d4.js create mode 100644 backend/index.html create mode 100644 categories/index.html create mode 100644 img/favicon.ico create mode 100644 index.html create mode 100644 js/global.js create mode 100644 mobile/index.html create mode 100644 more/index.html create mode 100644 note/designpattern/index.html create mode 100644 note/flutter/index.html create mode 100644 note/flutter/lxf/review/index.html create mode 100644 note/kotlin/index.html create mode 100644 pages/00e6eb/index.html create mode 100644 pages/022231/index.html create mode 100644 pages/030ff5/index.html create mode 100644 pages/0422cb/index.html create mode 100644 pages/04a87c/index.html create mode 100644 pages/05278d/index.html create mode 100644 pages/0790a0/index.html create mode 100644 pages/07f268/index.html create mode 100644 pages/084bc4/index.html create mode 100644 pages/084bf9/index.html create mode 100644 pages/087ea3/index.html create mode 100644 pages/0909a3/index.html create mode 100644 pages/091864/index.html create mode 100644 pages/0c1879/index.html create mode 100644 pages/0d47a0/index.html create mode 100644 pages/0d4d47/index.html create mode 100644 pages/0e461d/index.html create mode 100644 pages/0ee6a4/index.html create mode 100644 pages/0f2500/index.html create mode 100644 pages/0f3155/index.html create mode 100644 pages/0fcdc8/index.html create mode 100644 pages/10277d/index.html create mode 100644 pages/1084c4/index.html create mode 100644 pages/117e5d/index.html create mode 100644 pages/1195b1/index.html create mode 100644 pages/13365e/index.html create mode 100644 pages/13bf45/index.html create mode 100644 pages/13fb2b/index.html create mode 100644 pages/15960b/index.html create mode 100644 pages/15d73d/index.html create mode 100644 pages/1751fb/index.html create mode 100644 pages/17d6bb/index.html create mode 100644 pages/19fce1/index.html create mode 100644 pages/1af1e6/index.html create mode 100644 pages/1cb0c1/index.html create mode 100644 pages/1d7592/index.html create mode 100644 pages/2069ac/index.html create mode 100644 pages/21e20f/index.html create mode 100644 pages/23e976/index.html create mode 100644 pages/242c2b/index.html create mode 100644 pages/253dac/index.html create mode 100644 pages/26b199/index.html create mode 100644 pages/29287b/index.html create mode 100644 pages/294865/index.html create mode 100644 pages/2a27e8/index.html create mode 100644 pages/2afdff/index.html create mode 100644 pages/2c5ae4/index.html create mode 100644 pages/2ed5f7/index.html create mode 100644 pages/2ffb7f/index.html create mode 100644 pages/326c98/index.html create mode 100644 pages/328069/index.html create mode 100644 pages/32a06e/index.html create mode 100644 pages/334ef0/index.html create mode 100644 pages/337d0f/index.html create mode 100644 pages/3420a3/index.html create mode 100644 pages/34334d/index.html create mode 100644 pages/34e11b/index.html create mode 100644 pages/37adf1/index.html create mode 100644 pages/39525c/index.html create mode 100644 pages/398f01/index.html create mode 100644 pages/399558/index.html create mode 100644 pages/3a12b8/index.html create mode 100644 pages/3b59d7/index.html create mode 100644 pages/41ce5a/index.html create mode 100644 pages/42026f/index.html create mode 100644 pages/43645f/index.html create mode 100644 pages/443e18/index.html create mode 100644 pages/4517cb/index.html create mode 100644 pages/46b6cc/index.html create mode 100644 pages/4784fc/index.html create mode 100644 pages/48f6d3/index.html create mode 100644 pages/4b18ae/index.html create mode 100644 pages/4bbcbf/index.html create mode 100644 pages/4c1e21/index.html create mode 100644 pages/4d2b48/index.html create mode 100644 pages/4e6b65/index.html create mode 100644 pages/500d17/index.html create mode 100644 pages/526c58/index.html create mode 100644 pages/531d2b/index.html create mode 100644 pages/541c9c/index.html create mode 100644 pages/56dd3d/index.html create mode 100644 pages/577e7c/index.html create mode 100644 pages/58ae6a/index.html create mode 100644 pages/5944f7/index.html create mode 100644 pages/5a5158/index.html create mode 100644 pages/5c4b50/index.html create mode 100644 pages/5c8459/index.html create mode 100644 pages/5f806d/index.html create mode 100644 pages/5f9bf6/index.html create mode 100644 pages/614119/index.html create mode 100644 pages/614da2/index.html create mode 100644 pages/61cc74/index.html create mode 100644 pages/61d6a8/index.html create mode 100644 pages/63c550/index.html create mode 100644 pages/650506/index.html create mode 100644 pages/661407/index.html create mode 100644 pages/67358d/index.html create mode 100644 pages/683c07/index.html create mode 100644 pages/688a6b/index.html create mode 100644 pages/6caa6f/index.html create mode 100644 pages/6d35fc/index.html create mode 100644 pages/6f1cc2/index.html create mode 100644 pages/70f890/index.html create mode 100644 pages/7776d6/index.html create mode 100644 pages/77efcc/index.html create mode 100644 pages/78c482/index.html create mode 100644 pages/79a470/index.html create mode 100644 pages/79e15e/index.html create mode 100644 pages/79e7e5/index.html create mode 100644 pages/79efd2/index.html create mode 100644 pages/7b4815/index.html create mode 100644 pages/7b7220/index.html create mode 100644 pages/7b86ec/index.html create mode 100644 pages/7bacc4/index.html create mode 100644 pages/7cd064/index.html create mode 100644 pages/7e1f42/index.html create mode 100644 pages/7f9fec/index.html create mode 100644 pages/804129/index.html create mode 100644 pages/8102b2/index.html create mode 100644 pages/810563/index.html create mode 100644 pages/814d28/index.html create mode 100644 pages/8155cd/index.html create mode 100644 pages/81ea4e/index.html create mode 100644 pages/832f44/index.html create mode 100644 pages/84a12e/index.html create mode 100644 pages/861244/index.html create mode 100644 pages/867207/index.html create mode 100644 pages/87435a/index.html create mode 100644 pages/88eee8/index.html create mode 100644 pages/89a4c2/index.html create mode 100644 pages/89ebcc/index.html create mode 100644 pages/8ad3be/index.html create mode 100644 pages/8cf0b6/index.html create mode 100644 pages/8e3184/index.html create mode 100644 pages/901745/index.html create mode 100644 pages/997f68/index.html create mode 100644 pages/9a078b/index.html create mode 100644 pages/9a084c/index.html create mode 100644 pages/9b40a4/index.html create mode 100644 pages/9c63e1/index.html create mode 100644 pages/9e247e/index.html create mode 100644 pages/9f1d21/index.html create mode 100644 pages/a03fed/index.html create mode 100644 pages/a0ceba/index.html create mode 100644 pages/a0e176/index.html create mode 100644 pages/a16954/index.html create mode 100644 pages/a3228e/index.html create mode 100644 pages/a39d04/index.html create mode 100644 pages/a52cff/index.html create mode 100644 pages/a59099/index.html create mode 100644 pages/a5eb80/index.html create mode 100644 pages/a8e073/index.html create mode 100644 pages/a90e8e/index.html create mode 100644 pages/a9e62e/index.html create mode 100644 pages/ab3077/index.html create mode 100644 pages/ac13fc/index.html create mode 100644 pages/ad0098/index.html create mode 100644 pages/b0e486/index.html create mode 100644 pages/b1aa38/index.html create mode 100644 pages/b1db2f/index.html create mode 100644 pages/b2d210/index.html create mode 100644 pages/b3bc49/index.html create mode 100644 pages/b46b7a/index.html create mode 100644 pages/b576c8/index.html create mode 100644 pages/b5d9a7/index.html create mode 100644 pages/b7cd59/index.html create mode 100644 pages/b960c3/index.html create mode 100644 pages/ba99fe/index.html create mode 100644 pages/bbc079/index.html create mode 100644 pages/bea8f9/index.html create mode 100644 pages/beb840/index.html create mode 100644 pages/bfa843/index.html create mode 100644 pages/bfc897/index.html create mode 100644 pages/c243aa/index.html create mode 100644 pages/c2b035/index.html create mode 100644 pages/c53d80/index.html create mode 100644 pages/c5b883/index.html create mode 100644 pages/c7c2c0/index.html create mode 100644 pages/c7d38a/index.html create mode 100644 pages/cb27eb/index.html create mode 100644 pages/cc54c3/index.html create mode 100644 pages/ccf9c0/index.html create mode 100644 pages/cd4aeb/index.html create mode 100644 pages/cd4fd1/index.html create mode 100644 pages/d09c0b/index.html create mode 100644 pages/d0a26b/index.html create mode 100644 pages/d18561/index.html create mode 100644 pages/d45f5d/index.html create mode 100644 pages/d4ac48/index.html create mode 100644 pages/d85c7a/index.html create mode 100644 pages/daa62e/index.html create mode 100644 pages/db2b0b/index.html create mode 100644 pages/dd574d/index.html create mode 100644 pages/defa2f/index.html create mode 100644 pages/df8033/index.html create mode 100644 pages/dfd4b7/index.html create mode 100644 pages/e06ece/index.html create mode 100644 pages/e13e4e/index.html create mode 100644 pages/e18f51/index.html create mode 100644 pages/e3339e/index.html create mode 100644 pages/e3a33a/index.html create mode 100644 pages/e3a5cf/index.html create mode 100644 pages/e3acb4/index.html create mode 100644 pages/e3eb8a/index.html create mode 100644 pages/e4ed73/index.html create mode 100644 pages/e6f2c4/index.html create mode 100644 pages/e87d2b/index.html create mode 100644 pages/e987b9/index.html create mode 100644 pages/e9d226/index.html create mode 100644 pages/ea0f4e/index.html create mode 100644 pages/ea5b48/index.html create mode 100644 pages/ea91be/index.html create mode 100644 pages/ee17d1/index.html create mode 100644 pages/f2b19d/index.html create mode 100644 pages/f2ddfa/index.html create mode 100644 pages/f63a8b/index.html create mode 100644 pages/f66719/index.html create mode 100644 pages/f6869d/index.html create mode 100644 pages/f6bde9/index.html create mode 100644 pages/f6d976/index.html create mode 100644 pages/f81235/index.html create mode 100644 pages/f81fb5/index.html create mode 100644 pages/f98f41/index.html create mode 100644 pages/fb0480/index.html create mode 100644 pages/fc665a/index.html create mode 100644 pages/fc879e/index.html create mode 100644 pages/fcfa28/index.html create mode 100644 pages/fe4c94/index.html create mode 100644 pages/feeb2d/index.html create mode 100644 power/index.html create mode 100644 tags/index.html create mode 100644 web/index.html diff --git a/404.html b/404.html new file mode 100644 index 000000000..895bdd366 --- /dev/null +++ b/404.html @@ -0,0 +1,33 @@ + + + + + + FSA全栈行动 + + + + + + + + + + + + + + + +
404
我是谁？我在哪？
返回首页
+ + + diff --git a/about/GitLqr/index.html b/about/GitLqr/index.html new file mode 100644 index 000000000..fab0fbf14 --- /dev/null +++ b/about/GitLqr/index.html @@ -0,0 +1,142 @@ + + + + + + 关于GitLqr | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动

关于GitLqr

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 个人信息

GitLqr(林洽锐)

很努力的未来全栈工程师

- name: GitLqr(林洽锐)
+  desc: 很努力的未来全栈工程师
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 可选
+  link: https://github.com/GitLqr # 可选
+  bgColor: "#FCDBA0" # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
+  textColor: "#A05F2C" # 可选，默认var(--textColor)
+

联系方式

# 项目信息

RePluginX

🔥 Supports AndroidX and Android-Support

GitLqr

vite-plugin-variant

vite-plugin-variant is a vite plugin for managing multi-channel differentiated source code

GitLqr

vue-legacy-project

兼容低版本浏览器的vue工程示例

GitLqr

LQRWeChat

本项目仿最新版微信6.5.7（除图片选择器外），基于融云SDK，使用目前较火的 Rxjava+Retrofit+MVP+Glide 技术开发。相比上个版本，加入发送位置消息，红包消息等功能。

GitLqr

LQREmojiLibrary

一个超级牛逼的表情库，可使用表情及贴图功能，方便好用，抽离图片加载接口，图片加载工具可让开发者自己选择。

GitLqr

LQRAudioRecord

集成录音与播音功能，使用简单方便

GitLqr

LQRLibyuv

对libyuv进行封装，用于处理摄像头yuv图像数据

GitLqr

LQRLibrtmp

基于librtmp搭建的RTMP推流器

GitLqr
- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112101539434.png
+  link: https://github.com/GitLqr/RePluginX
+  name: RePluginX
+  desc: 🔥 Supports AndroidX and Android-Support
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/GitLqr/vite-plugin-variant
+  name: vite-plugin-variant
+  desc: vite-plugin-variant is a vite plugin for managing multi-channel differentiated source code
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/GitLqr/vue-legacy-project
+  name: vue-legacy-project
+  desc: 兼容低版本浏览器的vue工程示例
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/GitLqr/LQRWeChat/screenshots/1.gif
+  link: https://github.com/GitLqr/LQRWeChat
+  name: LQRWeChat
+  desc: 本项目仿最新版微信6.5.7（除图片选择器外），基于融云SDK，使用目前较火的 Rxjava+Retrofit+MVP+Glide 技术开发。相比上个版本，加入发送位置消息，红包消息等功能。
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/GitLqr/LQREmojiLibrary/screenshots/1.gif
+  link: https://github.com/GitLqr/LQREmojiLibrary
+  name: LQREmojiLibrary
+  desc: 一个超级牛逼的表情库，可使用表情及贴图功能，方便好用，抽离图片加载接口，图片加载工具可让开发者自己选择。
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/GitLqr/LQRAudioRecord/screenshots/1.gif
+  link: https://github.com/GitLqr/LQRAudioRecord
+  name: LQRAudioRecord
+  desc: 集成录音与播音功能，使用简单方便
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/20210105222154.gif
+  link: https://github.com/GitLqr/LQRLibyuv
+  name: LQRLibyuv
+  desc: 对libyuv进行封装，用于处理摄像头yuv图像数据
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选.
+- img: https://cdn.jsdelivr.net/gh/GitLqr/LQRLibrtmp/imgs/2_video_audio.png
+  link: https://github.com/GitLqr/LQRLibrtmp
+  name: LQRLibrtmp
+  desc: 基于librtmp搭建的RTMP推流器
+  author: GitLqr # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233219.jpeg # 头像，可选
+
+ +
+
关于LinXunFeng

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/about/LinXunFeng/index.html b/about/LinXunFeng/index.html new file mode 100644 index 000000000..6387b0140 --- /dev/null +++ b/about/LinXunFeng/index.html @@ -0,0 +1,183 @@ + + + + + + 关于LinXunFeng | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动

关于LinXunFeng

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 个人信息

LinXunFeng(林洵锋)

一枚生活在深圳的编程小萌新
🔥 Flutter、FlutterCandies 组织成员

- name: LinXunFeng(林洵锋)
+  desc: 一枚生活在深圳的编程小萌新<br>🔥 Flutter、FlutterCandies 组织成员
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 可选
+  link: https://github.com/LinXunFeng # 可选
+  bgColor: "#FFFDE4" # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
+  textColor: "#291542" # 可选，默认var(--textColor)
+

联系方式

# 项目信息

flutter_scrollview_observer

pub.dev/packages/scrollview_observer

LinXunFeng

SwiftyFitsize

📱 Swifty screen adaptation solution (Support Objective-C and Swift)

LinXunFeng

MoyaMapper

快速解析模型工具，支持RxSwift。同时支持缓存功能

LinXunFeng

transporter_fix

修复transporter一直卡在正在验证不动的问题，也适用于fastlane脚本上传ipa的方式

LinXunFeng

alog

Flutter打印工具

LinXunFeng

SwiftyTraceableValue

优雅的可比较类型

LinXunFeng

script_box

脚本工具箱

LinXunFeng

lxf_cycript

逆向 - Cycript工具集

LinXunFeng

LXFUpdatePodTool

自动化更新私有库工具

LinXunFeng

LXFProtocolTool

由Swift中协议方式实现功能的实用工具库【Refreshable、EmptyDataSetable 支持 Rx 】

LinXunFeng

LXFPhotoHelper

一行代码实现调用系统相机与相册，可配置导航栏背景与字体颜色

LinXunFeng

LXFDrawBoard

多功能小画板

LinXunFeng

RxSwiftDemo

RxSwift 项目实战记录

LinXunFeng

LXFFM

高仿喜马拉雅FM

LinXunFeng

LXFWeChat

Swift 3.0 WeChat

LinXunFeng
- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202210092241966.gif
+  link: https://github.com/LinXunFeng/flutter_scrollview_observer
+  name: flutter_scrollview_observer
+  desc: pub.dev/packages/scrollview_observer
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/LinXunFeng/SwiftyFitsize/Screenshots/exhibition.png
+  link: https://github.com/LinXunFeng/SwiftyFitsize
+  name: SwiftyFitsize
+  desc: 📱 Swifty screen adaptation solution (Support Objective-C and Swift)
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/LinXunFeng/MoyaMapper/Screenshots/MoyaMapper.png
+  link: https://github.com/MoyaMapper/MoyaMapper
+  name: MoyaMapper
+  desc: 快速解析模型工具，支持RxSwift。同时支持缓存功能 # 描述，可选
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/LinXunFeng/transporter_fix/screenshots/3.png
+  link: https://github.com/LinXunFeng/transporter_fix
+  name: transporter_fix
+  desc: 修复transporter一直卡在正在验证不动的问题，也适用于fastlane脚本上传ipa的方式
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220824.png
+  link: https://github.com/LinXunFeng/alog
+  name: alog
+  desc: Flutter打印工具
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/LinXunFeng/SwiftyTraceableValue
+  name: SwiftyTraceableValue
+  desc: 优雅的可比较类型
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/LinXunFeng/script_box
+  name: script_box
+  desc: 脚本工具箱
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/LinXunFeng/lxf_cycript
+  name: lxf_cycript
+  desc: 逆向 - Cycript工具集
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png
+  link: https://github.com/LinXunFeng/LXFUpdatePodTool
+  name: LXFUpdatePodTool
+  desc: 自动化更新私有库工具
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/LinXunFeng/LXFProtocolTool/Screenshots/lxf_Refreshable.gif
+  link: https://github.com/LinXunFeng/LXFProtocolTool
+  name: LXFProtocolTool
+  desc: 由Swift中协议方式实现功能的实用工具库【Refreshable、EmptyDataSetable 支持 Rx 】
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://github.com/LinXunFeng/LXFPhotoHelper/raw/master/Screenshots/1.png
+  link: https://github.com/LinXunFeng/LXFPhotoHelper
+  name: LXFPhotoHelper
+  desc: 一行代码实现调用系统相机与相册，可配置导航栏背景与字体颜色
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://github.com/LinXunFeng/LXFDrawBoard/raw/master/Screenshots/%E6%92%A4%E9%94%80%E4%B8%8E%E5%8F%8D%E6%92%A4%E9%94%80.gif
+  link: https://github.com/LinXunFeng/LXFDrawBoard
+  name: LXFDrawBoard
+  desc: 多功能小画板
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://github.com/LinXunFeng/RxSwiftDemo/raw/master/Screenshots/1.gif
+  link: https://github.com/LinXunFeng/RxSwiftDemo
+  name: RxSwiftDemo
+  desc: RxSwift 项目实战记录
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/1.gif
+  link: https://github.com/LinXunFeng/LXFFM
+  name: LXFFM
+  desc: 高仿喜马拉雅FM
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+- img: https://cdn.jsdelivr.net/gh/LinXunFeng/LXFWeChat/Screenshots/8.gif
+  link: https://github.com/LinXunFeng/LXFWeChat
+  name: LXFWeChat
+  desc: Swift 3.0 WeChat
+  author: LinXunFeng # 作者，可选
+  avatar: https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210109233340.jpeg # 头像，可选
+
+ +
+
关于GitLqr

关于GitLqr→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/ads.txt b/ads.txt new file mode 100644 index 000000000..e8a7498b8 --- /dev/null +++ b/ads.txt @@ -0,0 +1 @@ +google.com, pub-3568502583266202, DIRECT, f08c47fec0942fa0 \ No newline at end of file diff --git a/app-ads.txt b/app-ads.txt new file mode 100644 index 000000000..e8a7498b8 --- /dev/null +++ b/app-ads.txt @@ -0,0 +1 @@ +google.com, pub-3568502583266202, DIRECT, f08c47fec0942fa0 \ No newline at end of file diff --git a/archives/index.html b/archives/index.html new file mode 100644 index 000000000..e073473c1 --- /dev/null +++ b/archives/index.html @@ -0,0 +1,238 @@ + + + + + + 归档 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动

+ 归档 +

+ 总共 229 篇文章 +
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/assets/css/0.styles.04d17316.css b/assets/css/0.styles.04d17316.css new file mode 100644 index 000000000..26253c7eb --- /dev/null +++ b/assets/css/0.styles.04d17316.css @@ -0,0 +1 @@ +@import url(//at.alicdn.com/t/font_1678482_4tbhmh589x.css);.code-copy{color:#aaa;fill:#aaa;font-size:14px;display:inline-block;cursor:pointer}div[class*=aside-code] aside .code-copy,div[class*=language-] pre .code-copy{position:absolute;z-index:1000;top:7px;right:35px;opacity:0;font-size:16px}div[class*=aside-code] aside:hover .code-copy,div[class*=language-] pre:hover .code-copy{opacity:1}.content pre,.content pre[class*=language-]{overflow-y:hidden}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{position:static!important}div[class~=language-text]:before{content:"text"}div[class~=language-yml]:before{content:"yml"}div[class*=language-] pre{-webkit-user-select:text;-moz-user-select:text;user-select:text}p code{-webkit-user-select:all;-moz-user-select:all;user-select:all}@keyframes message-move-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}#message-container .message.move-in{animation:message-move-in .3s ease-in-out}@keyframes message-move-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}#message-container .message.move-out{animation:message-move-out .3s ease-in-out;animation-fill-mode:forwards}#message-container .message{background:#fff;margin:10px 0;padding:0 10px;height:40px;box-shadow:0 0 10px 0 #ccc;font-size:14px;border-radius:3px;display:flex;align-items:center;transition:height .2s ease-in-out,margin .2s ease-in-out}#message-container{position:fixed;left:0;top:100px;right:0;display:flex;flex-direction:column;align-items:center}#message-container .message .text{color:#333;padding:0 20px 0 5px}.theme-code-block[data-v-4f1e9d0c]{display:none}.theme-code-block__active[data-v-4f1e9d0c]{display:block}.theme-code-block>pre[data-v-4f1e9d0c]{background-color:orange}@media (max-width:419px){.theme-code-group div[class*=language-][data-v-4f1e9d0c]{margin:0}}.theme-mode-light[data-v-2f5f1757]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-2f5f1757],.theme-mode-light pre[class*=language-][data-v-2f5f1757]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-2f5f1757]::-moz-selection,.theme-mode-light code[class*=language-][data-v-2f5f1757] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-2f5f1757]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-2f5f1757] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-2f5f1757]::selection,.theme-mode-light code[class*=language-][data-v-2f5f1757] ::selection,.theme-mode-light pre[class*=language-][data-v-2f5f1757]::selection,.theme-mode-light pre[class*=language-][data-v-2f5f1757] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-2f5f1757],.theme-mode-light pre[class*=language-][data-v-2f5f1757]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-2f5f1757]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-2f5f1757],.theme-mode-light pre[class*=language-][data-v-2f5f1757]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-2f5f1757]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-2f5f1757],.theme-mode-light .token.comment[data-v-2f5f1757],.theme-mode-light .token.doctype[data-v-2f5f1757],.theme-mode-light .token.prolog[data-v-2f5f1757]{color:#708090}.theme-mode-light .token.punctuation[data-v-2f5f1757]{color:#999}.theme-mode-light .namespace[data-v-2f5f1757]{opacity:.7}.theme-mode-light .token.boolean[data-v-2f5f1757],.theme-mode-light .token.constant[data-v-2f5f1757],.theme-mode-light .token.deleted[data-v-2f5f1757],.theme-mode-light .token.number[data-v-2f5f1757],.theme-mode-light .token.property[data-v-2f5f1757],.theme-mode-light .token.symbol[data-v-2f5f1757],.theme-mode-light .token.tag[data-v-2f5f1757]{color:#905}.theme-mode-light .token.attr-name[data-v-2f5f1757],.theme-mode-light .token.builtin[data-v-2f5f1757],.theme-mode-light .token.char[data-v-2f5f1757],.theme-mode-light .token.inserted[data-v-2f5f1757],.theme-mode-light .token.selector[data-v-2f5f1757],.theme-mode-light .token.string[data-v-2f5f1757]{color:#690}.theme-mode-light .language-css .token.string[data-v-2f5f1757],.theme-mode-light .style .token.string[data-v-2f5f1757],.theme-mode-light .token.entity[data-v-2f5f1757],.theme-mode-light .token.operator[data-v-2f5f1757],.theme-mode-light .token.url[data-v-2f5f1757]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-2f5f1757],.theme-mode-light .token.attr-value[data-v-2f5f1757],.theme-mode-light .token.keyword[data-v-2f5f1757]{color:#07a}.theme-mode-light .token.class-name[data-v-2f5f1757],.theme-mode-light .token.function[data-v-2f5f1757]{color:#dd4a68}.theme-mode-light .token.important[data-v-2f5f1757],.theme-mode-light .token.regex[data-v-2f5f1757],.theme-mode-light .token.variable[data-v-2f5f1757]{color:#e90}.theme-mode-light .token.bold[data-v-2f5f1757],.theme-mode-light .token.important[data-v-2f5f1757]{font-weight:700}.theme-mode-light .token.italic[data-v-2f5f1757]{font-style:italic}.theme-mode-light .token.entity[data-v-2f5f1757]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-2f5f1757],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-2f5f1757]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-2f5f1757]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-2f5f1757],.theme-mode-dark pre[class*=language-][data-v-2f5f1757]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-2f5f1757]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-2f5f1757],.theme-mode-dark pre[class*=language-][data-v-2f5f1757]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-2f5f1757]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-2f5f1757],.theme-mode-dark .token.cdata[data-v-2f5f1757],.theme-mode-dark .token.comment[data-v-2f5f1757],.theme-mode-dark .token.doctype[data-v-2f5f1757],.theme-mode-dark .token.prolog[data-v-2f5f1757]{color:#999}.theme-mode-dark .token.punctuation[data-v-2f5f1757]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-2f5f1757],.theme-mode-dark .token.deleted[data-v-2f5f1757],.theme-mode-dark .token.namespace[data-v-2f5f1757],.theme-mode-dark .token.tag[data-v-2f5f1757]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-2f5f1757]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-2f5f1757],.theme-mode-dark .token.function[data-v-2f5f1757],.theme-mode-dark .token.number[data-v-2f5f1757]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-2f5f1757],.theme-mode-dark .token.constant[data-v-2f5f1757],.theme-mode-dark .token.property[data-v-2f5f1757],.theme-mode-dark .token.symbol[data-v-2f5f1757]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-2f5f1757],.theme-mode-dark .token.builtin[data-v-2f5f1757],.theme-mode-dark .token.important[data-v-2f5f1757],.theme-mode-dark .token.keyword[data-v-2f5f1757],.theme-mode-dark .token.selector[data-v-2f5f1757]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-2f5f1757],.theme-mode-dark .token.char[data-v-2f5f1757],.theme-mode-dark .token.regex[data-v-2f5f1757],.theme-mode-dark .token.string[data-v-2f5f1757],.theme-mode-dark .token.variable[data-v-2f5f1757]{color:#7ec699}.theme-mode-dark .token.entity[data-v-2f5f1757],.theme-mode-dark .token.operator[data-v-2f5f1757],.theme-mode-dark .token.url[data-v-2f5f1757]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-2f5f1757],.theme-mode-dark .style .token.string[data-v-2f5f1757],.theme-mode-dark .token.entity[data-v-2f5f1757],.theme-mode-dark .token.operator[data-v-2f5f1757],.theme-mode-dark .token.url[data-v-2f5f1757]{background:none}.theme-mode-dark .token.bold[data-v-2f5f1757],.theme-mode-dark .token.important[data-v-2f5f1757]{font-weight:700}.theme-mode-dark .token.italic[data-v-2f5f1757]{font-style:italic}.theme-mode-dark .token.entity[data-v-2f5f1757]{cursor:help}.theme-mode-dark .token.inserted[data-v-2f5f1757]{color:green}.theme-mode-read[data-v-2f5f1757]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-2f5f1757],.theme-mode-read pre[class*=language-][data-v-2f5f1757]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-2f5f1757]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-2f5f1757],.theme-mode-read pre[class*=language-][data-v-2f5f1757]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-2f5f1757]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-2f5f1757],.theme-mode-read .token.cdata[data-v-2f5f1757],.theme-mode-read .token.comment[data-v-2f5f1757],.theme-mode-read .token.doctype[data-v-2f5f1757],.theme-mode-read .token.prolog[data-v-2f5f1757]{color:#999}.theme-mode-read .token.punctuation[data-v-2f5f1757]{color:#ccc}.theme-mode-read .token.attr-name[data-v-2f5f1757],.theme-mode-read .token.deleted[data-v-2f5f1757],.theme-mode-read .token.namespace[data-v-2f5f1757],.theme-mode-read .token.tag[data-v-2f5f1757]{color:#e2777a}.theme-mode-read .token.function-name[data-v-2f5f1757]{color:#6196cc}.theme-mode-read .token.boolean[data-v-2f5f1757],.theme-mode-read .token.function[data-v-2f5f1757],.theme-mode-read .token.number[data-v-2f5f1757]{color:#f08d49}.theme-mode-read .token.class-name[data-v-2f5f1757],.theme-mode-read .token.constant[data-v-2f5f1757],.theme-mode-read .token.property[data-v-2f5f1757],.theme-mode-read .token.symbol[data-v-2f5f1757]{color:#f8c555}.theme-mode-read .token.atrule[data-v-2f5f1757],.theme-mode-read .token.builtin[data-v-2f5f1757],.theme-mode-read .token.important[data-v-2f5f1757],.theme-mode-read .token.keyword[data-v-2f5f1757],.theme-mode-read .token.selector[data-v-2f5f1757]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-2f5f1757],.theme-mode-read .token.char[data-v-2f5f1757],.theme-mode-read .token.regex[data-v-2f5f1757],.theme-mode-read .token.string[data-v-2f5f1757],.theme-mode-read .token.variable[data-v-2f5f1757]{color:#7ec699}.theme-mode-read .token.entity[data-v-2f5f1757],.theme-mode-read .token.operator[data-v-2f5f1757],.theme-mode-read .token.url[data-v-2f5f1757]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-2f5f1757],.theme-mode-read .style .token.string[data-v-2f5f1757],.theme-mode-read .token.entity[data-v-2f5f1757],.theme-mode-read .token.operator[data-v-2f5f1757],.theme-mode-read .token.url[data-v-2f5f1757]{background:none}.theme-mode-read .token.bold[data-v-2f5f1757],.theme-mode-read .token.important[data-v-2f5f1757]{font-weight:700}.theme-mode-read .token.italic[data-v-2f5f1757]{font-style:italic}.theme-mode-read .token.entity[data-v-2f5f1757]{cursor:help}.theme-mode-read .token.inserted[data-v-2f5f1757]{color:green}.theme-style-line.theme-mode-light[data-v-2f5f1757]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-2f5f1757]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-2f5f1757]{--bodyBg:#f5f5d5}.theme-code-group[data-v-2f5f1757],.theme-code-group__nav[data-v-2f5f1757]{background-color:var(--codeBg);padding-bottom:22px;border-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__nav[data-v-2f5f1757]{margin-bottom:-35px}.theme-code-group__ul[data-v-2f5f1757]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__li[data-v-2f5f1757],.theme-code-group__nav-tab[data-v-2f5f1757]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:var(--codeColor);font-weight:600;opacity:.85}.theme-code-group__nav-tab-active[data-v-2f5f1757]{border-bottom:1px solid #11a8cd;opacity:1}.pre-blank[data-v-2f5f1757]{color:#11a8cd}body .theme-vdoing-content code{color:var(--textLightenColor);padding:.25rem .5rem;margin:0;font-size:.9em;background-color:hsla(0,0%,39.2%,.08);border-radius:3px}body .theme-vdoing-content code .token.deleted{color:#ec5975}body .theme-vdoing-content code .token.inserted{color:#11a8cd}body .theme-vdoing-content pre,body .theme-vdoing-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}body .theme-vdoing-content pre[class*=language-] code,body .theme-vdoing-content pre code{color:var(--codeColor);padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:var(--codeBg);border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.3)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative!important;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.8rem;color:hsla(0,0%,58.8%,.7)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:2.5rem;height:100%;background-color:rgba(0,0,0,.3)}div[class*=language-].line-numbers-mode pre{padding-left:3.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:2.5rem;text-align:center;color:hsla(0,0%,49.8%,.5);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:2.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid var(--borderColor);background-color:var(--codeBg)}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:.2rem}.custom-block p{margin:0}.custom-block.danger,.custom-block.note,.custom-block.tip,.custom-block.warning{padding:.5rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983;color:#215d42}.custom-block.warning{background-color:#fff7d0;border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:var(--textColor)}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:var(--textColor)}.custom-block.note{background-color:#e8f5fa;border-color:#157bae;color:#0d4a68}.custom-block.right{color:var(--textColor);font-size:.9rem;text-align:right}.custom-block.theorem{margin:1rem 0;padding:.8rem 1.5rem;border-radius:2px;background-color:var(--customBlockBg)}.custom-block.theorem .title{font-weight:700;margin:.5rem 0}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1em 0;padding:1.6em;background-color:var(--customBlockBg)}.custom-block.details p{margin:.8rem 0}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.custom-block.details summary:hover{color:#11a8cd}.theme-mode-dark .custom-block.warning{background-color:rgba(255,247,208,.2);color:#e7c000}.theme-mode-dark .custom-block.warning .custom-block-title{color:#ffdc2f}.theme-mode-dark .custom-block.tip{background-color:rgba(243,245,247,.2);color:#42b983}.theme-mode-dark .custom-block.danger{background-color:rgba(255,230,230,.4);color:maroon}.theme-mode-dark .custom-block.danger a{color:#11a8cd}.theme-mode-dark .custom-block.note{background-color:rgba(243,245,247,.2);color:#157bae}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-vdoing-content:not(.custom){max-width:860px}.table-of-contents .badge{vertical-align:middle}.center-container{text-align:center}.center-container>h1,.center-container>h2,.center-container>h3,.center-container>h4,.center-container>h5,.center-container>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.center-container>h1 a.header-anchor,.center-container>h2 a.header-anchor,.center-container>h3 a.header-anchor,.center-container>h4 a.header-anchor,.center-container>h5 a.header-anchor,.center-container>h6 a.header-anchor{float:none;padding-right:0;margin-left:-.9rem}.cardListContainer{margin:.7rem 0}.cardListContainer>:not(.card-list){display:none}.cardListContainer .card-list{margin:-.35rem;display:flex;flex-wrap:wrap;align-items:flex-start}.cardListContainer .card-list .card-item{width:calc(33.33333% - .7rem);margin:.35rem;background:var(--bodyBg);border-radius:3px;color:var(--textColor);display:flex;box-shadow:1px 1px 2px 0 rgba(0,0,0,.06);transition:all .4s}.cardListContainer .card-list .card-item:hover{text-decoration:none;box-shadow:0 10px 20px -10px var(--randomColor,rgba(0,0,0,.15));transform:translateY(-3px) scale(1.01)}.cardListContainer .card-list .card-item:hover img{box-shadow:3px 2px 7px rgba(0,0,0,.15)}.cardListContainer .card-list .card-item:hover div p{text-shadow:3px 2px 5px rgba(0,0,0,.15)}.cardListContainer .card-list .card-item img{width:60px;height:60px;border-radius:50%;border:2px solid #fff;margin:1rem 0 1rem 1rem;box-shadow:3px 2px 5px rgba(0,0,0,.08);transition:all .4s}.cardListContainer .card-list .card-item div{flex:1;display:inline-block;float:right;padding:1rem 0}.cardListContainer .card-list .card-item div p{margin:0;padding:0 1rem;transition:text-shadow .4s;text-align:center}.cardListContainer .card-list .card-item div .name{margin:.2rem 0 .3rem}.cardListContainer .card-list .card-item div .desc{font-size:.8rem;line-height:1.1rem;opacity:.8;margin-bottom:.2rem}.cardListContainer .card-list .card-item.row-1{width:calc(100% - .7rem)}.cardListContainer .card-list .card-item.row-1 img{margin-left:2rem}.cardListContainer .card-list .card-item.row-2{width:calc(50% - .7rem)}.cardListContainer .card-list .card-item.row-2 img{margin-left:1.5rem}.cardListContainer .card-list .card-item.row-3{width:calc(33.33333% - .7rem)}.cardListContainer .card-list .card-item.row-4{width:calc(25% - .7rem)}.cardImgListContainer{margin:1rem 0}.cardImgListContainer>:not(.card-list){display:none}.cardImgListContainer .card-list{margin:-.5rem;display:flex;flex-wrap:wrap;align-items:flex-start}.cardImgListContainer .card-list .card-item{width:calc(33.33333% - 1rem);margin:.5rem;background:var(--mainBg);border:1px solid rgba(0,0,0,.1);box-sizing:border-box;border-radius:3px;overflow:hidden;color:var(--textColor);box-shadow:2px 2px 10px rgba(0,0,0,.04);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:stretch;transition:all .4s}.cardImgListContainer .card-list .card-item:hover{box-shadow:1px 1px 20px rgba(0,0,0,.1);transform:translateY(-3px)}.cardImgListContainer .card-list .card-item .box-img{overflow:hidden;position:relative;background:#eee}.cardImgListContainer .card-list .card-item .box-img img{display:block;width:100%;height:100%;transition:all .3s}.cardImgListContainer .card-list .card-item a{color:var(--textColor);transition:color .3s}.cardImgListContainer .card-list .card-item a:hover{text-decoration:none}.cardImgListContainer .card-list .card-item .box-info{padding:.8rem 1rem}.cardImgListContainer .card-list .card-item .box-info p{margin:0}.cardImgListContainer .card-list .card-item .box-info .desc{margin-top:.3rem;opacity:.8;font-size:.9rem;line-height:1.1rem;overflow:hidden;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.cardImgListContainer .card-list .card-item .box-footer{overflow:hidden;padding:.8rem 1rem;border-top:1px solid rgba(0,0,0,.1)}.cardImgListContainer .card-list .card-item .box-footer img{width:1.8rem;height:1.8rem;border-radius:50%;float:left}.cardImgListContainer .card-list .card-item .box-footer span{line-height:1.8rem;float:left;margin-left:.6rem;font-size:.8rem}.cardImgListContainer .card-list .card-item.row-1{width:calc(100% - 1rem)}.cardImgListContainer .card-list .card-item.row-2{width:calc(50% - 1rem)}.cardImgListContainer .card-list .card-item.row-3{width:calc(33.33333% - 1rem)}.cardImgListContainer .card-list .card-item.row-4{width:calc(25% - 1rem)}.theme-mode-dark .cardImgListContainer .card-list .card-item,.theme-mode-dark .cardImgListContainer .card-list .card-item .box-footer{border-color:var(--borderColor)}@media (max-width:900px){.cardListContainer .card-list .card-item.row-4{width:calc(33.33333% - .7rem)}.cardImgListContainer .card-list .card-item.row-4{width:calc(33.33333% - 1rem)}}@media (max-width:720px){.cardListContainer .card-list .card-item.row-3,.cardListContainer .card-list .card-item.row-4{width:calc(50% - .7rem)}.cardListContainer .card-list .card-item.row-3 img,.cardListContainer .card-list .card-item.row-4 img{margin-left:1.5rem}.cardImgListContainer .card-list .card-item.row-3,.cardImgListContainer .card-list .card-item.row-4{width:calc(50% - 1rem)}}@media (max-width:500px){.cardListContainer .card-list .card-item.row-1,.cardListContainer .card-list .card-item.row-2,.cardListContainer .card-list .card-item.row-3,.cardListContainer .card-list .card-item.row-4{width:calc(100% - .7rem)}.cardListContainer .card-list .card-item.row-1 img,.cardListContainer .card-list .card-item.row-2 img,.cardListContainer .card-list .card-item.row-3 img,.cardListContainer .card-list .card-item.row-4 img{margin-left:1.5rem}.cardImgListContainer .card-list .card-item.row-1,.cardImgListContainer .card-list .card-item.row-2,.cardImgListContainer .card-list .card-item.row-3,.cardImgListContainer .card-list .card-item.row-4{width:calc(100% - 1rem)}}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-size:16px;color:#2c3e50;background:var(--bodyBg)}a,button,input{outline:none;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-focus-ring-color:transparent}@media (min-width:719px){::-webkit-scrollbar{width:6px;height:5px}::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.15);-webkit-border-radius:3px}::-webkit-scrollbar-thumb:vertical{height:5px;background-color:rgba(0,0,0,.28);-webkit-border-radius:3px}::-webkit-scrollbar-thumb:horizontal{width:5px;background-color:rgba(0,0,0,.28);-webkit-border-radius:3px}}.card-box{border-radius:5px;background:var(--mainBg);box-shadow:0 0 4px 0 rgba(0,0,0,.1);transition:box-shadow .5s}.card-box:hover{box-shadow:0 1px 15px 0 rgba(0,0,0,.1)}@media (max-width:719px){.theme-style-line{margin-left:-1px;margin-right:-1px}}.theme-style-line .card-box{box-shadow:0 0;border:1px solid var(--borderColor)}.blur{-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}.custom-page{min-height:calc(100vh - 3.6rem);padding-top:3.6rem;padding-bottom:.9rem}.custom-page .theme-vdoing-wrapper{margin:0 auto}body .search-box input{background-color:transparent;color:var(--textColor);border:1px solid var(--borderColor,#ccc)}@media (max-width:959px){body .search-box input{border-color:transparent}}.page{transition:padding .2s ease;padding-left:.8rem}.navbar{position:fixed;z-index:20;top:0;left:0;right:0;height:3.6rem;background-color:var(--blurBg);box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,.06)}.sidebar-mask{top:0;width:100vw;height:100vh}.sidebar-hover-trigger,.sidebar-mask{position:fixed;z-index:12;left:0;display:none}.sidebar-hover-trigger{top:8.1rem;bottom:0;width:24px}.sidebar{font-size:16px;background-color:var(--sidebarBg);width:18rem;position:fixed;z-index:13;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid var(--borderColor);overflow-y:auto;transform:translateX(-100%);transition:transform .2s}@media (max-width:719px){.sidebar{background-color:var(--mainBg)}}.theme-vdoing-content:not(.custom){word-wrap:break-word}.theme-vdoing-content:not(.custom) a:hover{text-decoration:underline}.theme-vdoing-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-vdoing-content:not(.custom) img{max-width:100%}.theme-vdoing-content.custom{padding:0;margin:0}.theme-vdoing-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#11a8cd}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;opacity:.75;border-left:.2rem solid hsla(0,0%,39.2%,.3);margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-vdoing-content:not(.custom)>h1,.theme-vdoing-content:not(.custom)>h2,.theme-vdoing-content:not(.custom)>h3,.theme-vdoing-content:not(.custom)>h4,.theme-vdoing-content:not(.custom)>h5,.theme-vdoing-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-vdoing-content:not(.custom)>h1:first-child,.theme-vdoing-content:not(.custom)>h2:first-child,.theme-vdoing-content:not(.custom)>h3:first-child,.theme-vdoing-content:not(.custom)>h4:first-child,.theme-vdoing-content:not(.custom)>h5:first-child,.theme-vdoing-content:not(.custom)>h6:first-child{margin-bottom:1rem}.theme-vdoing-content:not(.custom)>h1:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h1:first-child+p,.theme-vdoing-content:not(.custom)>h1:first-child+pre,.theme-vdoing-content:not(.custom)>h2:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h2:first-child+p,.theme-vdoing-content:not(.custom)>h2:first-child+pre,.theme-vdoing-content:not(.custom)>h3:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h3:first-child+p,.theme-vdoing-content:not(.custom)>h3:first-child+pre,.theme-vdoing-content:not(.custom)>h4:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h4:first-child+p,.theme-vdoing-content:not(.custom)>h4:first-child+pre,.theme-vdoing-content:not(.custom)>h5:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h5:first-child+p,.theme-vdoing-content:not(.custom)>h5:first-child+pre,.theme-vdoing-content:not(.custom)>h6:first-child+.custom-block,.theme-vdoing-content:not(.custom)>h6:first-child+p,.theme-vdoing-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}.theme-vdoing-content:not(.custom)>.custom-block:first-child,.theme-vdoing-content:not(.custom)>p:first-child,.theme-vdoing-content:not(.custom)>pre:first-child{margin-top:2rem}h1{font-size:1.9rem}.theme-vdoing-content:not(.custom)>h1:first-child{display:none}h2{font-size:1.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--borderColor)}h3{font-size:1.35rem}.page h4{font-size:1.25rem}.page h5{font-size:1.15rem}.page h6{font-size:1.05rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid var(--borderColor)}table{border-collapse:collapse;margin:1rem 0;overflow-x:auto;width:100%;display:inline-table}@media (max-width:719px){table{display:block}}tr{border-top:1px solid var(--borderColor)}tr:nth-child(2n){background-color:hsla(0,0%,58.8%,.1)}td,th{border:1px solid var(--borderColor);padding:.6em 1em}@media (max-width:719px){td,th{padding:.3em .5em}}td a,th a{word-break:break-all}.theme-container{color:var(--textColor);min-height:100vh}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-vdoing-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px}}@media (max-width:719px){.sidebar{width:17.099999999999998rem}}@media (min-width:720px) and (max-width:959px){.sidebar{width:16.2rem}.theme-container.sidebar-open .page{padding-left:17rem!important}}@media (max-width:719px){.sidebar{top:0;height:100vh;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-vdoing-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}@media (min-width:720px){.theme-container .sidebar-hover-trigger{display:block}.theme-container .sidebar-hover-trigger:hover~.sidebar,.theme-container:not(.sidebar-open) .sidebar-hover-trigger~.sidebar:hover{transform:translateX(0);z-index:100}.theme-container.sidebar-open .sidebar-mask{display:none}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.sidebar-open .sidebar-button{left:18rem}.theme-container.sidebar-open .page{padding-left:18.8rem;padding-right:.8rem}.theme-container.sidebar-open .sidebar-hover-trigger{display:none}.theme-container.have-rightmenu .page{padding-right:250px}.theme-container.no-sidebar .page{padding-left:0!important}.theme-container.no-sidebar .sidebar-hover-trigger{display:none}.theme-container.hide-navbar .sidebar-hover-trigger{top:4.5rem}.theme-container.hide-navbar .sidebar{top:0}.theme-container.no-sidebar .sidebar-button{display:none}}@media print{.buttons,.navbar,.sidebar{display:none}.page{padding-top:0!important}}@media (min-width:720px) and (max-width:959px){.theme-container.sidebar-open:not(.on-sidebar) .sidebar-button{left:12.6rem}}.gt-container .gt-ico-tip:after{content:"。( Win + . ) 或 ( ⌃ + ⌘ + ␣ ) 打开表情";color:#999;font-size:.8rem}.gt-container .gt-meta{border-color:var(--borderColor)!important}.gt-container .gt-comments-null{color:var(--textColor);opacity:.5}.gt-container .gt-header-textarea{color:var(--textColor);background:hsla(0,0%,70.6%,.1)!important}.gt-container .gt-btn{border-color:#11a8cd!important;background-color:#11a8cd!important}.gt-container .gt-btn-preview{background-color:hsla(0,0%,100%,0)!important;color:#11a8cd!important}.gt-container a{color:#11a8cd!important}.gt-container .gt-svg svg{fill:#11a8cd!important}.gt-container .gt-comment-admin .gt-comment-content,.gt-container .gt-comment-content{background-color:hsla(0,0%,58.8%,.1)!important}.gt-container .gt-comment-admin .gt-comment-content:hover,.gt-container .gt-comment-content:hover{box-shadow:0 0 25px hsla(0,0%,58.8%,.5)!important}.gt-container .gt-comment-admin .gt-comment-content .gt-comment-body,.gt-container .gt-comment-content .gt-comment-body{color:var(--textColor)!important}.qq{position:relative}.qq:after{content:"可撩";background:#11a8cd;color:#fff;padding:0 5px;border-radius:10px;font-size:12px;position:absolute;top:-4px;right:-35px;transform:scale(.85)}body .vuepress-plugin-demo-block__wrapper,body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__display{border-color:hsla(0,0%,62.7%,.3)}body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover .vuepress-plugin-demo-block__expand:before{border-top-color:#11a8cd!important;border-bottom-color:#11a8cd!important}body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:hover svg{fill:#11a8cd!important}#nprogress{pointer-events:none}#nprogress .bar{background:#11a8cd;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #11a8cd,0 0 5px #11a8cd;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#11a8cd transparent transparent #11a8cd;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.theme-mode-light[data-v-439bb2a8]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-439bb2a8],.theme-mode-light pre[class*=language-][data-v-439bb2a8]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-439bb2a8]::-moz-selection,.theme-mode-light code[class*=language-][data-v-439bb2a8] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-439bb2a8]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-439bb2a8] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-439bb2a8]::selection,.theme-mode-light code[class*=language-][data-v-439bb2a8] ::selection,.theme-mode-light pre[class*=language-][data-v-439bb2a8]::selection,.theme-mode-light pre[class*=language-][data-v-439bb2a8] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-439bb2a8],.theme-mode-light pre[class*=language-][data-v-439bb2a8]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-439bb2a8]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-439bb2a8],.theme-mode-light pre[class*=language-][data-v-439bb2a8]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-439bb2a8]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-439bb2a8],.theme-mode-light .token.comment[data-v-439bb2a8],.theme-mode-light .token.doctype[data-v-439bb2a8],.theme-mode-light .token.prolog[data-v-439bb2a8]{color:#708090}.theme-mode-light .token.punctuation[data-v-439bb2a8]{color:#999}.theme-mode-light .namespace[data-v-439bb2a8]{opacity:.7}.theme-mode-light .token.boolean[data-v-439bb2a8],.theme-mode-light .token.constant[data-v-439bb2a8],.theme-mode-light .token.deleted[data-v-439bb2a8],.theme-mode-light .token.number[data-v-439bb2a8],.theme-mode-light .token.property[data-v-439bb2a8],.theme-mode-light .token.symbol[data-v-439bb2a8],.theme-mode-light .token.tag[data-v-439bb2a8]{color:#905}.theme-mode-light .token.attr-name[data-v-439bb2a8],.theme-mode-light .token.builtin[data-v-439bb2a8],.theme-mode-light .token.char[data-v-439bb2a8],.theme-mode-light .token.inserted[data-v-439bb2a8],.theme-mode-light .token.selector[data-v-439bb2a8],.theme-mode-light .token.string[data-v-439bb2a8]{color:#690}.theme-mode-light .language-css .token.string[data-v-439bb2a8],.theme-mode-light .style .token.string[data-v-439bb2a8],.theme-mode-light .token.entity[data-v-439bb2a8],.theme-mode-light .token.operator[data-v-439bb2a8],.theme-mode-light .token.url[data-v-439bb2a8]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-439bb2a8],.theme-mode-light .token.attr-value[data-v-439bb2a8],.theme-mode-light .token.keyword[data-v-439bb2a8]{color:#07a}.theme-mode-light .token.class-name[data-v-439bb2a8],.theme-mode-light .token.function[data-v-439bb2a8]{color:#dd4a68}.theme-mode-light .token.important[data-v-439bb2a8],.theme-mode-light .token.regex[data-v-439bb2a8],.theme-mode-light .token.variable[data-v-439bb2a8]{color:#e90}.theme-mode-light .token.bold[data-v-439bb2a8],.theme-mode-light .token.important[data-v-439bb2a8]{font-weight:700}.theme-mode-light .token.italic[data-v-439bb2a8]{font-style:italic}.theme-mode-light .token.entity[data-v-439bb2a8]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-439bb2a8],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-439bb2a8]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-439bb2a8]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-439bb2a8],.theme-mode-dark pre[class*=language-][data-v-439bb2a8]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-439bb2a8]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-439bb2a8],.theme-mode-dark pre[class*=language-][data-v-439bb2a8]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-439bb2a8]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-439bb2a8],.theme-mode-dark .token.cdata[data-v-439bb2a8],.theme-mode-dark .token.comment[data-v-439bb2a8],.theme-mode-dark .token.doctype[data-v-439bb2a8],.theme-mode-dark .token.prolog[data-v-439bb2a8]{color:#999}.theme-mode-dark .token.punctuation[data-v-439bb2a8]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-439bb2a8],.theme-mode-dark .token.deleted[data-v-439bb2a8],.theme-mode-dark .token.namespace[data-v-439bb2a8],.theme-mode-dark .token.tag[data-v-439bb2a8]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-439bb2a8]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-439bb2a8],.theme-mode-dark .token.function[data-v-439bb2a8],.theme-mode-dark .token.number[data-v-439bb2a8]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-439bb2a8],.theme-mode-dark .token.constant[data-v-439bb2a8],.theme-mode-dark .token.property[data-v-439bb2a8],.theme-mode-dark .token.symbol[data-v-439bb2a8]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-439bb2a8],.theme-mode-dark .token.builtin[data-v-439bb2a8],.theme-mode-dark .token.important[data-v-439bb2a8],.theme-mode-dark .token.keyword[data-v-439bb2a8],.theme-mode-dark .token.selector[data-v-439bb2a8]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-439bb2a8],.theme-mode-dark .token.char[data-v-439bb2a8],.theme-mode-dark .token.regex[data-v-439bb2a8],.theme-mode-dark .token.string[data-v-439bb2a8],.theme-mode-dark .token.variable[data-v-439bb2a8]{color:#7ec699}.theme-mode-dark .token.entity[data-v-439bb2a8],.theme-mode-dark .token.operator[data-v-439bb2a8],.theme-mode-dark .token.url[data-v-439bb2a8]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-439bb2a8],.theme-mode-dark .style .token.string[data-v-439bb2a8],.theme-mode-dark .token.entity[data-v-439bb2a8],.theme-mode-dark .token.operator[data-v-439bb2a8],.theme-mode-dark .token.url[data-v-439bb2a8]{background:none}.theme-mode-dark .token.bold[data-v-439bb2a8],.theme-mode-dark .token.important[data-v-439bb2a8]{font-weight:700}.theme-mode-dark .token.italic[data-v-439bb2a8]{font-style:italic}.theme-mode-dark .token.entity[data-v-439bb2a8]{cursor:help}.theme-mode-dark .token.inserted[data-v-439bb2a8]{color:green}.theme-mode-read[data-v-439bb2a8]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-439bb2a8],.theme-mode-read pre[class*=language-][data-v-439bb2a8]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-439bb2a8]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-439bb2a8],.theme-mode-read pre[class*=language-][data-v-439bb2a8]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-439bb2a8]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-439bb2a8],.theme-mode-read .token.cdata[data-v-439bb2a8],.theme-mode-read .token.comment[data-v-439bb2a8],.theme-mode-read .token.doctype[data-v-439bb2a8],.theme-mode-read .token.prolog[data-v-439bb2a8]{color:#999}.theme-mode-read .token.punctuation[data-v-439bb2a8]{color:#ccc}.theme-mode-read .token.attr-name[data-v-439bb2a8],.theme-mode-read .token.deleted[data-v-439bb2a8],.theme-mode-read .token.namespace[data-v-439bb2a8],.theme-mode-read .token.tag[data-v-439bb2a8]{color:#e2777a}.theme-mode-read .token.function-name[data-v-439bb2a8]{color:#6196cc}.theme-mode-read .token.boolean[data-v-439bb2a8],.theme-mode-read .token.function[data-v-439bb2a8],.theme-mode-read .token.number[data-v-439bb2a8]{color:#f08d49}.theme-mode-read .token.class-name[data-v-439bb2a8],.theme-mode-read .token.constant[data-v-439bb2a8],.theme-mode-read .token.property[data-v-439bb2a8],.theme-mode-read .token.symbol[data-v-439bb2a8]{color:#f8c555}.theme-mode-read .token.atrule[data-v-439bb2a8],.theme-mode-read .token.builtin[data-v-439bb2a8],.theme-mode-read .token.important[data-v-439bb2a8],.theme-mode-read .token.keyword[data-v-439bb2a8],.theme-mode-read .token.selector[data-v-439bb2a8]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-439bb2a8],.theme-mode-read .token.char[data-v-439bb2a8],.theme-mode-read .token.regex[data-v-439bb2a8],.theme-mode-read .token.string[data-v-439bb2a8],.theme-mode-read .token.variable[data-v-439bb2a8]{color:#7ec699}.theme-mode-read .token.entity[data-v-439bb2a8],.theme-mode-read .token.operator[data-v-439bb2a8],.theme-mode-read .token.url[data-v-439bb2a8]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-439bb2a8],.theme-mode-read .style .token.string[data-v-439bb2a8],.theme-mode-read .token.entity[data-v-439bb2a8],.theme-mode-read .token.operator[data-v-439bb2a8],.theme-mode-read .token.url[data-v-439bb2a8]{background:none}.theme-mode-read .token.bold[data-v-439bb2a8],.theme-mode-read .token.important[data-v-439bb2a8]{font-weight:700}.theme-mode-read .token.italic[data-v-439bb2a8]{font-style:italic}.theme-mode-read .token.entity[data-v-439bb2a8]{cursor:help}.theme-mode-read .token.inserted[data-v-439bb2a8]{color:green}.theme-style-line.theme-mode-light[data-v-439bb2a8]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-439bb2a8]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-439bb2a8]{--bodyBg:#f5f5d5}.theme-vdoing-content[data-v-439bb2a8]{margin:3rem auto;padding:1.5rem}.theme-vdoing-content span[data-v-439bb2a8]{font-size:6rem;color:#11a8cd}.main-wrapper{margin:1.5rem auto 0;max-width:1100px;padding:0 .9rem;box-sizing:border-box;position:relative;display:flex}.main-wrapper .main-left{flex:1}.main-wrapper .main-left .theme-vdoing-content.card-box{padding:1rem 1.5rem;margin-bottom:.9rem}.main-wrapper .main-left .home-content{padding:1rem 1.5rem 0}.main-wrapper .main-right>*{width:245px;box-sizing:border-box}@media (max-width:900px){.main-wrapper .main-right>*{width:235px}}.main-wrapper .main-right .card-box{margin:0 0 .8rem .8rem;padding-top:.95rem;padding-bottom:.95rem}@media (max-width:719px){.main-wrapper{margin:.9rem 0;padding:0;display:block}.main-wrapper .main-left{width:100%}.main-wrapper .main-left .post-list{margin-bottom:3rem}.main-wrapper .main-left .post-list .post{border-radius:0}.main-wrapper .main-left .pagination{margin-bottom:3rem}.main-wrapper .main-right .blogger-wrapper{display:none}.main-wrapper .main-right .card-box{margin:0 0 .9rem;border-radius:0;width:100%}.theme-style-line .main-wrapper .main-right .card-box{margin:-1px 0 0}}.post-list{margin-bottom:4rem}.post-list .post{position:relative;padding:1rem 1.5rem;transition:all .3s;border-bottom:1px solid var(--borderColor)}.post-list .post:last-child{border-bottom:none}.post-list .post.post-leave-active{display:none}.post-list .post.post-enter{opacity:0;transform:translateX(-20px)}.post-list .post:before{position:absolute;top:-1px;right:0;font-size:2.5rem;color:#ff5722;opacity:.85}.post-list .post .title-wrapper a{color:var(--textColor)}.post-list .post .title-wrapper a:hover{color:#11a8cd}.post-list .post .title-wrapper h2{margin:.5rem 0;font-size:1.4rem;border:none}.post-list .post .title-wrapper h2 .title-tag{height:1.2rem;line-height:1.2rem;border:1px solid #ff5722;color:#ff5722;font-size:.8rem;padding:0 .35rem;border-radius:.2rem;margin-left:0;transform:translateY(-.15rem);display:inline-block}.post-list .post .title-wrapper h2 a{display:block}@media (max-width:719px){.post-list .post .title-wrapper h2 a{font-weight:400}}.post-list .post .title-wrapper .article-info>a,.post-list .post .title-wrapper .article-info>span{opacity:.7;font-size:.8rem;margin-right:1rem;cursor:pointer}.post-list .post .title-wrapper .article-info>a:before,.post-list .post .title-wrapper .article-info>span:before{margin-right:.3rem}.post-list .post .title-wrapper .article-info>a a,.post-list .post .title-wrapper .article-info>span a{margin:0}.post-list .post .title-wrapper .article-info>a a:not(:first-child):before,.post-list .post .title-wrapper .article-info>span a:not(:first-child):before{content:"/"}.post-list .post .title-wrapper .article-info .tags a:not(:first-child):before{content:"、"}.post-list .post .excerpt-wrapper{border-top:1px solid var(--borderColor);margin:.5rem 0;overflow:hidden}.post-list .post .excerpt-wrapper .excerpt{margin-bottom:.3rem;font-size:.92rem}.post-list .post .excerpt-wrapper .excerpt h1,.post-list .post .excerpt-wrapper .excerpt h2,.post-list .post .excerpt-wrapper .excerpt h3{display:none}.post-list .post .excerpt-wrapper .excerpt img{max-height:280px;max-width:100%!important;margin:0 auto}.post-list .post .excerpt-wrapper .readmore{float:right;margin-right:1rem;line-height:1rem}.post-list .post .excerpt-wrapper .readmore:before{float:right;font-size:.8rem;margin:.1rem 0 0 .2rem}.theme-style-line .post-list{border:1px solid var(--borderColor);border-radius:5px;overflow:hidden}.article-list{padding:1rem 2rem}@media (max-width:959px){.article-list{padding:1rem 1.5rem}}.article-list.no-article-list{display:none}.article-list .article-title{border-bottom:1px solid var(--borderColor);font-size:1.3rem;padding:1rem}.article-list .article-title a{font-size:1.2rem;color:var(--textColor);opacity:.9}.article-list .article-title a:before{margin-right:.4rem;font-size:1.1rem}.article-list .article-wrapper{overflow:hidden}.article-list .article-wrapper dl{border-bottom:1px dotted var(--borderColor);float:left;display:flex;padding:8px 0;margin:0;height:45px;width:100%}.article-list .article-wrapper dl dd{font-size:1.1rem;color:#f17229;width:50px;text-align:center;margin:0;line-height:45px}.article-list .article-wrapper dl dt{flex:1;display:flex}.article-list .article-wrapper dl dt a{color:var(--textColor);flex:1;display:flex;height:45px;align-items:center;font-weight:400}.article-list .article-wrapper dl dt a div{overflow:hidden;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.article-list .article-wrapper dl dt a div .title-tag{border:1px solid #ff5722;color:#ff5722;font-size:.8rem;padding:0 .35rem;border-radius:.2rem;margin-left:0;transform:translateY(-.05rem);display:inline-block}.article-list .article-wrapper dl dt a:hover{text-decoration:underline}.article-list .article-wrapper dl dt a.more{color:#11a8cd}.article-list .article-wrapper dl dt .date{width:50px;margin-right:15px;color:#999;text-align:right;font-size:.9rem;line-height:45px}.pagination{position:relative;height:60px;text-align:center}@media (max-width:720px){.pagination{margin-left:1px;margin-right:1px}}.pagination span{line-height:1rem;opacity:.9;cursor:pointer}.pagination span:hover{color:#11a8cd}.pagination span.ellipsis{opacity:.5}.pagination span.ellipsis:before{content:"...";font-size:1.2rem}@media (any-hover:hover){.pagination span.ellipsis.ell-two:hover:before{content:"«"}.pagination span.ellipsis.ell-four:hover:before{content:"»"}}.pagination>span{position:absolute;top:0;padding:1rem 1.2rem;font-size:.95rem}.pagination>span:before{font-size:.4rem}.pagination>span.disabled{color:hsla(0,0%,49%,.5)}.pagination>span.prev{left:0}.pagination>span.prev:before{margin-right:.3rem}.pagination>span.next{right:0}.pagination>span.next:before{float:right;margin-left:.3rem}.pagination>span p{display:inline;line-height:.95rem}.pagination .pagination-list span{display:inline-block;width:2.5rem;height:2.5rem;line-height:2.5rem;margin:.3rem}.pagination .pagination-list span.active{background:#11a8cd;color:var(--mainBg)}@media (max-width:800px){.pagination>span{padding:1rem 1.5rem}.pagination>span p{display:none}}@media (max-width:719px){.pagination>span{padding:.9rem 1.5rem}.pagination .pagination-list span{width:2.3rem;height:2.3rem;line-height:2.3rem;margin:.25rem}}@media (max-width:390px){.pagination>span{padding:.8rem 1.3rem}.pagination .pagination-list span{width:2rem;height:2rem;line-height:2rem;margin:.3rem .1rem .1rem}}.blogger-wrapper{height:auto;display:inline-table;padding-top:0!important;overflow:hidden}.blogger-wrapper .avatar{width:100%;overflow:hidden}.blogger-wrapper .avatar img{width:100%;height:100%}.blogger-wrapper .icons{border-top:none;height:35px;line-height:35px}.blogger-wrapper .icons a{font-size:20px;width:33%;color:var(--textColor);display:block;float:left;text-align:center;opacity:.8}.blogger-wrapper .icons a:hover{color:#11a8cd}.blogger-wrapper .blogger{padding:.3rem .95rem 0}.blogger-wrapper .blogger .name{font-size:1.3rem;display:block;margin-bottom:6px}.blogger-wrapper .blogger .slogan{color:var(--textColor)}.categories-wrapper .title{color:var(--textColor);opacity:.9;font-size:1.2rem;padding:0 .95rem}.categories-wrapper .title:before{margin-right:.3rem}.categories-wrapper .categories{margin-top:.6rem}.categories-wrapper .categories a{display:block;padding:8px .95rem 7px;color:var(--textColor);opacity:.8;font-size:.95rem;line-height:.95rem;position:relative;transition:all .2s;border-left:2px solid transparent;margin-top:-1px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width:719px){.categories-wrapper .categories a{font-weight:400}}.categories-wrapper .categories a:not(.active):hover{color:#11a8cd;background:#f8f8f8;border-color:#11a8cd}.categories-wrapper .categories a:not(.active):hover span{opacity:.8}.categories-wrapper .categories a span{float:right;background-color:var(--textColor);color:var(--mainBg);border-radius:8px;padding:0 .13rem;min-width:1rem;height:1rem;line-height:1rem;font-size:.6rem;text-align:center;opacity:.6;transition:opacity .3s}.categories-wrapper .categories a.active{background:#11a8cd;color:var(--mainBg);padding-left:.8rem;border-radius:1px;border-color:transparent}.theme-mode-dark .categories-wrapper .categories a:not(.active):hover,.theme-mode-read .categories-wrapper .categories a:not(.active):hover{background:var(--customBlockBg)}.tags-wrapper{padding:0 .95rem}.tags-wrapper .title{color:var(--textColor);opacity:.9;font-size:1.2rem}.tags-wrapper .title:before{margin-right:.3rem}.tags-wrapper .tags{text-align:justify;padding:.8rem .5rem .5rem;margin:0 -.5rem -.5rem}.tags-wrapper .tags a{opacity:.8;display:inline-block;padding:.2rem .4rem;transition:all .4s;background-color:var(--textColor);color:var(--mainBg);border-radius:3px;margin:0 .3rem .5rem 0;min-width:2rem;height:1rem;line-height:1rem;font-size:.8rem;text-align:center}@media (max-width:719px){.tags-wrapper .tags a{font-weight:400}}.tags-wrapper .tags a:hover{opacity:1;transform:scale(1.1)}.tags-wrapper .tags a.active{box-shadow:0 5px 10px -5px var(--randomColor,rgba(0,0,0,.15));transform:scale(1.22);opacity:1}.tags-wrapper .tags a.active:hover{text-decoration:none}.theme-mode-light[data-v-46a3a687]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-46a3a687],.theme-mode-light pre[class*=language-][data-v-46a3a687]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-46a3a687]::-moz-selection,.theme-mode-light code[class*=language-][data-v-46a3a687] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-46a3a687]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-46a3a687] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-46a3a687]::selection,.theme-mode-light code[class*=language-][data-v-46a3a687] ::selection,.theme-mode-light pre[class*=language-][data-v-46a3a687]::selection,.theme-mode-light pre[class*=language-][data-v-46a3a687] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-46a3a687],.theme-mode-light pre[class*=language-][data-v-46a3a687]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-46a3a687]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-46a3a687],.theme-mode-light pre[class*=language-][data-v-46a3a687]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-46a3a687]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-46a3a687],.theme-mode-light .token.comment[data-v-46a3a687],.theme-mode-light .token.doctype[data-v-46a3a687],.theme-mode-light .token.prolog[data-v-46a3a687]{color:#708090}.theme-mode-light .token.punctuation[data-v-46a3a687]{color:#999}.theme-mode-light .namespace[data-v-46a3a687]{opacity:.7}.theme-mode-light .token.boolean[data-v-46a3a687],.theme-mode-light .token.constant[data-v-46a3a687],.theme-mode-light .token.deleted[data-v-46a3a687],.theme-mode-light .token.number[data-v-46a3a687],.theme-mode-light .token.property[data-v-46a3a687],.theme-mode-light .token.symbol[data-v-46a3a687],.theme-mode-light .token.tag[data-v-46a3a687]{color:#905}.theme-mode-light .token.attr-name[data-v-46a3a687],.theme-mode-light .token.builtin[data-v-46a3a687],.theme-mode-light .token.char[data-v-46a3a687],.theme-mode-light .token.inserted[data-v-46a3a687],.theme-mode-light .token.selector[data-v-46a3a687],.theme-mode-light .token.string[data-v-46a3a687]{color:#690}.theme-mode-light .language-css .token.string[data-v-46a3a687],.theme-mode-light .style .token.string[data-v-46a3a687],.theme-mode-light .token.entity[data-v-46a3a687],.theme-mode-light .token.operator[data-v-46a3a687],.theme-mode-light .token.url[data-v-46a3a687]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-46a3a687],.theme-mode-light .token.attr-value[data-v-46a3a687],.theme-mode-light .token.keyword[data-v-46a3a687]{color:#07a}.theme-mode-light .token.class-name[data-v-46a3a687],.theme-mode-light .token.function[data-v-46a3a687]{color:#dd4a68}.theme-mode-light .token.important[data-v-46a3a687],.theme-mode-light .token.regex[data-v-46a3a687],.theme-mode-light .token.variable[data-v-46a3a687]{color:#e90}.theme-mode-light .token.bold[data-v-46a3a687],.theme-mode-light .token.important[data-v-46a3a687]{font-weight:700}.theme-mode-light .token.italic[data-v-46a3a687]{font-style:italic}.theme-mode-light .token.entity[data-v-46a3a687]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-46a3a687],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-46a3a687]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-46a3a687]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-46a3a687],.theme-mode-dark pre[class*=language-][data-v-46a3a687]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-46a3a687]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-46a3a687],.theme-mode-dark pre[class*=language-][data-v-46a3a687]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-46a3a687]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-46a3a687],.theme-mode-dark .token.cdata[data-v-46a3a687],.theme-mode-dark .token.comment[data-v-46a3a687],.theme-mode-dark .token.doctype[data-v-46a3a687],.theme-mode-dark .token.prolog[data-v-46a3a687]{color:#999}.theme-mode-dark .token.punctuation[data-v-46a3a687]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-46a3a687],.theme-mode-dark .token.deleted[data-v-46a3a687],.theme-mode-dark .token.namespace[data-v-46a3a687],.theme-mode-dark .token.tag[data-v-46a3a687]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-46a3a687]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-46a3a687],.theme-mode-dark .token.function[data-v-46a3a687],.theme-mode-dark .token.number[data-v-46a3a687]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-46a3a687],.theme-mode-dark .token.constant[data-v-46a3a687],.theme-mode-dark .token.property[data-v-46a3a687],.theme-mode-dark .token.symbol[data-v-46a3a687]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-46a3a687],.theme-mode-dark .token.builtin[data-v-46a3a687],.theme-mode-dark .token.important[data-v-46a3a687],.theme-mode-dark .token.keyword[data-v-46a3a687],.theme-mode-dark .token.selector[data-v-46a3a687]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-46a3a687],.theme-mode-dark .token.char[data-v-46a3a687],.theme-mode-dark .token.regex[data-v-46a3a687],.theme-mode-dark .token.string[data-v-46a3a687],.theme-mode-dark .token.variable[data-v-46a3a687]{color:#7ec699}.theme-mode-dark .token.entity[data-v-46a3a687],.theme-mode-dark .token.operator[data-v-46a3a687],.theme-mode-dark .token.url[data-v-46a3a687]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-46a3a687],.theme-mode-dark .style .token.string[data-v-46a3a687],.theme-mode-dark .token.entity[data-v-46a3a687],.theme-mode-dark .token.operator[data-v-46a3a687],.theme-mode-dark .token.url[data-v-46a3a687]{background:none}.theme-mode-dark .token.bold[data-v-46a3a687],.theme-mode-dark .token.important[data-v-46a3a687]{font-weight:700}.theme-mode-dark .token.italic[data-v-46a3a687]{font-style:italic}.theme-mode-dark .token.entity[data-v-46a3a687]{cursor:help}.theme-mode-dark .token.inserted[data-v-46a3a687]{color:green}.theme-mode-read[data-v-46a3a687]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-46a3a687],.theme-mode-read pre[class*=language-][data-v-46a3a687]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-46a3a687]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-46a3a687],.theme-mode-read pre[class*=language-][data-v-46a3a687]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-46a3a687]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-46a3a687],.theme-mode-read .token.cdata[data-v-46a3a687],.theme-mode-read .token.comment[data-v-46a3a687],.theme-mode-read .token.doctype[data-v-46a3a687],.theme-mode-read .token.prolog[data-v-46a3a687]{color:#999}.theme-mode-read .token.punctuation[data-v-46a3a687]{color:#ccc}.theme-mode-read .token.attr-name[data-v-46a3a687],.theme-mode-read .token.deleted[data-v-46a3a687],.theme-mode-read .token.namespace[data-v-46a3a687],.theme-mode-read .token.tag[data-v-46a3a687]{color:#e2777a}.theme-mode-read .token.function-name[data-v-46a3a687]{color:#6196cc}.theme-mode-read .token.boolean[data-v-46a3a687],.theme-mode-read .token.function[data-v-46a3a687],.theme-mode-read .token.number[data-v-46a3a687]{color:#f08d49}.theme-mode-read .token.class-name[data-v-46a3a687],.theme-mode-read .token.constant[data-v-46a3a687],.theme-mode-read .token.property[data-v-46a3a687],.theme-mode-read .token.symbol[data-v-46a3a687]{color:#f8c555}.theme-mode-read .token.atrule[data-v-46a3a687],.theme-mode-read .token.builtin[data-v-46a3a687],.theme-mode-read .token.important[data-v-46a3a687],.theme-mode-read .token.keyword[data-v-46a3a687],.theme-mode-read .token.selector[data-v-46a3a687]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-46a3a687],.theme-mode-read .token.char[data-v-46a3a687],.theme-mode-read .token.regex[data-v-46a3a687],.theme-mode-read .token.string[data-v-46a3a687],.theme-mode-read .token.variable[data-v-46a3a687]{color:#7ec699}.theme-mode-read .token.entity[data-v-46a3a687],.theme-mode-read .token.operator[data-v-46a3a687],.theme-mode-read .token.url[data-v-46a3a687]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-46a3a687],.theme-mode-read .style .token.string[data-v-46a3a687],.theme-mode-read .token.entity[data-v-46a3a687],.theme-mode-read .token.operator[data-v-46a3a687],.theme-mode-read .token.url[data-v-46a3a687]{background:none}.theme-mode-read .token.bold[data-v-46a3a687],.theme-mode-read .token.important[data-v-46a3a687]{font-weight:700}.theme-mode-read .token.italic[data-v-46a3a687]{font-style:italic}.theme-mode-read .token.entity[data-v-46a3a687]{cursor:help}.theme-mode-read .token.inserted[data-v-46a3a687]{color:green}.theme-style-line.theme-mode-light[data-v-46a3a687]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-46a3a687]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-46a3a687]{--bodyBg:#f5f5d5}.home-wrapper .banner[data-v-46a3a687]{width:100%;min-height:450px;margin-top:3.6rem;color:#fff;position:relative;overflow:hidden}.home-wrapper .banner .banner-conent[data-v-46a3a687]{max-width:1100px;margin:0 auto;position:relative;z-index:1;overflow:hidden}.home-wrapper .banner .banner-conent .hero[data-v-46a3a687]{text-align:center;margin-top:3rem}.home-wrapper .banner .banner-conent .hero img[data-v-46a3a687]{max-width:100%;max-height:240px;display:block;margin:2rem auto 1.5rem}.home-wrapper .banner .banner-conent .hero h1[data-v-46a3a687]{margin:0;font-size:3.2rem}.home-wrapper .banner .banner-conent .hero .action[data-v-46a3a687],.home-wrapper .banner .banner-conent .hero .description[data-v-46a3a687]{margin:1.5rem auto}.home-wrapper .banner .banner-conent .hero .description[data-v-46a3a687]{max-width:40rem;font-size:1.1rem;line-height:1.3;opacity:.9}.home-wrapper .banner .banner-conent .hero .action-button[data-v-46a3a687]{display:inline-block;font-size:1.2rem;background-color:#11a8cd;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #0f97b9;color:#fff}.home-wrapper .banner .banner-conent .hero .action-button[data-v-46a3a687]:hover{background-color:#13bee8}.home-wrapper .banner .banner-conent .features[data-v-46a3a687]{padding:2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home-wrapper .banner .banner-conent .feature[data-v-46a3a687]{flex-grow:1;flex-basis:30%;max-width:30%;text-align:center}.home-wrapper .banner .banner-conent .feature a[data-v-46a3a687]{color:inherit}.home-wrapper .banner .banner-conent .feature a .feature-img[data-v-46a3a687]{width:10rem;height:10rem;animation:heart-46a3a687 1.2s ease-in-out 0s infinite alternate;animation-play-state:paused}.home-wrapper .banner .banner-conent .feature a h2[data-v-46a3a687]{font-weight:500;font-size:1.3rem;border-bottom:none;padding-bottom:0}.home-wrapper .banner .banner-conent .feature a p[data-v-46a3a687]{opacity:.8;padding:0 .8rem}.home-wrapper .banner .banner-conent .feature:hover .feature-img[data-v-46a3a687]{animation-play-state:running}.home-wrapper .banner .banner-conent .feature:hover h2[data-v-46a3a687],.home-wrapper .banner .banner-conent .feature:hover p[data-v-46a3a687]{color:#11a8cd}.home-wrapper .banner .slide-banner[data-v-46a3a687]{margin-top:2rem}.home-wrapper .banner .slide-banner .banner-wrapper[data-v-46a3a687]{position:relative}.home-wrapper .banner .slide-banner .slide-banner-scroll[data-v-46a3a687]{min-height:1px;overflow:hidden}.home-wrapper .banner .slide-banner .slide-banner-wrapper[data-v-46a3a687]{height:300px}.home-wrapper .banner .slide-banner .slide-banner-wrapper .slide-item[data-v-46a3a687]{display:inline-block;height:300px;width:100%;text-align:center}.home-wrapper .banner .slide-banner .slide-banner-wrapper .slide-item a[data-v-46a3a687]{color:inherit}.home-wrapper .banner .slide-banner .slide-banner-wrapper .slide-item a .feature-img[data-v-46a3a687]{width:10rem;height:10rem}.home-wrapper .banner .slide-banner .slide-banner-wrapper .slide-item a h2[data-v-46a3a687]{font-size:1.1rem;font-weight:500;border-bottom:none;padding-bottom:0}.home-wrapper .banner .slide-banner .slide-banner-wrapper .slide-item a p[data-v-46a3a687]{opacity:.8;padding:0 .8rem}.home-wrapper .banner .slide-banner .docs-wrapper[data-v-46a3a687]{position:absolute;bottom:25px;left:50%;transform:translateX(-50%)}.home-wrapper .banner .slide-banner .docs-wrapper .doc[data-v-46a3a687]{display:inline-block;margin:0 4px;width:8px;height:8px;border-radius:50%;background:var(--textColor);opacity:.9}.home-wrapper .banner .slide-banner .docs-wrapper .doc.active[data-v-46a3a687]{opacity:.5}.home-wrapper .banner.hide-banner[data-v-46a3a687]{display:none}.home-wrapper .banner.hide-banner+.main-wrapper[data-v-46a3a687]{margin-top:4.5rem}.home-wrapper .main-wrapper[data-v-46a3a687]{margin-top:2rem}.home-wrapper .main-wrapper .main-left .card-box[data-v-46a3a687]{margin-bottom:2rem}.home-wrapper .main-wrapper .main-left .pagination[data-v-46a3a687]{margin-bottom:3rem}.home-wrapper .main-wrapper .main-left .theme-vdoing-content[data-v-46a3a687]{padding:0 2rem;overflow:hidden;border:none}.home-wrapper .main-wrapper .main-left .theme-vdoing-content[data-v-46a3a687]>:first-child{padding-top:2rem}.home-wrapper .main-wrapper .main-left .theme-vdoing-content[data-v-46a3a687]>:last-child{padding-bottom:2rem}.home-wrapper .main-wrapper .main-right .custom-html-box[data-v-46a3a687]{padding:0;overflow:hidden}@media (max-width:1025px){.home-wrapper .banner .banner-conent .hero h1[data-v-46a3a687]{font-size:2.5rem}.home-wrapper .banner .banner-conent .hero .description[data-v-46a3a687]{font-size:1rem}.home-wrapper .banner .banner-conent .feature a h2[data-v-46a3a687]{font-size:1.1rem}.home-wrapper .banner .banner-conent .feature a .feature-img[data-v-46a3a687]{width:9rem;height:9rem}}@media (max-width:719px){.home-wrapper .banner .banner-conent .features[data-v-46a3a687]{display:none!important}}@media (max-width:419px){.home-wrapper .banner-conent[data-v-46a3a687]{padding-left:1.5rem;padding-right:1.5rem}.home-wrapper .banner-conent .hero img[data-v-46a3a687]{max-height:210px;margin:2rem auto 1.2rem}.home-wrapper .banner-conent .hero h1[data-v-46a3a687]{font-size:2rem}.home-wrapper .banner-conent .hero .action[data-v-46a3a687],.home-wrapper .banner-conent .hero .description[data-v-46a3a687],.home-wrapper .banner-conent .hero h1[data-v-46a3a687]{margin:1.2rem auto}.home-wrapper .banner-conent .hero .description[data-v-46a3a687]{font-size:1.2rem}.home-wrapper .banner-conent .hero .action-button[data-v-46a3a687]{font-size:1rem;padding:.6rem 1.2rem}.home-wrapper .banner-conent .feature h2[data-v-46a3a687]{font-size:1.25rem}}@media (max-width:719px){.theme-style-line .main-wrapper[data-v-46a3a687]{margin-top:-1px}}@keyframes heart-46a3a687{0%{transform:translate(0)}to{transform:translateY(8px)}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:var(--textColor);display:inline-block;border:1px solid var(--borderColor,#ccc);border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:width .2s ease;background:url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#11a8cd}.search-box .suggestions{background:var(--mainBg,#fff);width:20rem;position:absolute;top:1.5rem;border:1px solid var(--borderColor,#ccc);border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:var(--textColor);opacity:.75}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused,.search-box .suggestion:hover{background-color:hsla(0,0%,58.8%,.2)}.search-box .suggestion.focused a{color:#11a8cd}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}@media (max-width:719px){.sidebar-button{display:block}}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (min-width:720px){.sidebar-button{width:40px;height:40px;display:inline-block;position:fixed;left:0;top:4.6rem;text-align:center;line-height:44px;margin:5px 8px;color:#888;border-radius:50%;padding:0;transition:all .2s}.sidebar-button:hover{background:#11a8cd;color:#fff;box-shadow:0 0 6px #11a8cd}.sidebar-button .icon{display:inline;width:1rem;height:1rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:var(--textColor)}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid var(--borderColor);padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#11a8cd}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #11a8cd;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{font-weight:600;font-size:inherit}.dropdown-wrapper .dropdown-title:hover{color:#11a8cd}.dropdown-wrapper .dropdown-title .link-title{display:none}.dropdown-wrapper .dropdown-title .title{display:inline-block!important}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:var(--mainBg);padding:.6rem 0;border-bottom-color:var(--borderColor);border:1px solid var(--borderColor);text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}.nav-item .dropdown-title a.router-link-active,.nav-item .dropdown-title a:hover{margin-bottom:-2px;border-bottom:2px solid #13b9e2}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#11a8cd}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:959px){.nav-links .nav-item{margin-left:1.2rem}}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:var(--textColor)}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #13b9e2}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;transition:transform .3s}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:var(--textColor);position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}.hide-navbar .navbar{transform:translateY(-100%)}@media (max-width:959px){.navbar .site-name{display:none}}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:860px;padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block;float:left;margin:0 2rem .5rem 0}.page-edit .edit-link a{margin-right:.25rem}.page-edit .tags{float:left}.page-edit .tags a{margin:0 .8rem .5rem 0;display:inline-block;color:var(--textLightenColor);padding:.2rem .7rem;font-size:.9em;background-color:hsla(0,0%,50.2%,.08);border-radius:3px;opacity:.8}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:var(--textColor);opacity:.8}.page-edit .last-updated .time{font-weight:400;color:#aaa}@media (max-width:719px){.page-edit .edit-link,.page-edit .tags{margin-bottom:.5rem}.page-edit .last-updated{width:100%;font-size:.8em;text-align:left}}.page-nav{max-width:860px;padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid var(--borderColor);padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page-nav-centre-wrap .page-nav-centre{position:fixed;top:50%;width:80px;height:70px;margin-top:-35px;outline:0;transition:all .2s;border-radius:3px;opacity:.55;z-index:99}@media (max-width:1340px){.page-nav-centre-wrap .page-nav-centre{width:50px}}@media (max-width:960px){.page-nav-centre-wrap .page-nav-centre{display:none}}.page-nav-centre-wrap .page-nav-centre:hover{background:hsla(0,0%,60%,.15);opacity:1}.page-nav-centre-wrap .page-nav-centre:hover .tooltip{display:block}.page-nav-centre-wrap .page-nav-centre:before{content:"";display:block;width:10px;height:10px;border-top:2px solid #999;border-right:2px solid #999;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.page-nav-centre-wrap .page-nav-centre .tooltip{display:none;background:rgba(0,0,0,.5);color:#fff;padding:4px 8px;font-size:13px;border-radius:3px;position:fixed;max-width:200px;z-index:99}.page-nav-centre-wrap .page-nav-centre-prev{left:0}.page-nav-centre-wrap .page-nav-centre-prev:before{transform:rotate(-135deg)}.page-nav-centre-wrap .page-nav-centre-next{right:0}.page-nav-centre-wrap .page-nav-centre-next:before{transform:rotate(45deg)}.sidebar-open .page-nav-centre-wrap .page-nav-centre-prev{left:18rem}.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev{left:0}.theme-mode-light[data-v-06225672]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-06225672],.theme-mode-light pre[class*=language-][data-v-06225672]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-06225672]::-moz-selection,.theme-mode-light code[class*=language-][data-v-06225672] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-06225672]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-06225672] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-06225672]::selection,.theme-mode-light code[class*=language-][data-v-06225672] ::selection,.theme-mode-light pre[class*=language-][data-v-06225672]::selection,.theme-mode-light pre[class*=language-][data-v-06225672] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-06225672],.theme-mode-light pre[class*=language-][data-v-06225672]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-06225672]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-06225672],.theme-mode-light pre[class*=language-][data-v-06225672]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-06225672]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-06225672],.theme-mode-light .token.comment[data-v-06225672],.theme-mode-light .token.doctype[data-v-06225672],.theme-mode-light .token.prolog[data-v-06225672]{color:#708090}.theme-mode-light .token.punctuation[data-v-06225672]{color:#999}.theme-mode-light .namespace[data-v-06225672]{opacity:.7}.theme-mode-light .token.boolean[data-v-06225672],.theme-mode-light .token.constant[data-v-06225672],.theme-mode-light .token.deleted[data-v-06225672],.theme-mode-light .token.number[data-v-06225672],.theme-mode-light .token.property[data-v-06225672],.theme-mode-light .token.symbol[data-v-06225672],.theme-mode-light .token.tag[data-v-06225672]{color:#905}.theme-mode-light .token.attr-name[data-v-06225672],.theme-mode-light .token.builtin[data-v-06225672],.theme-mode-light .token.char[data-v-06225672],.theme-mode-light .token.inserted[data-v-06225672],.theme-mode-light .token.selector[data-v-06225672],.theme-mode-light .token.string[data-v-06225672]{color:#690}.theme-mode-light .language-css .token.string[data-v-06225672],.theme-mode-light .style .token.string[data-v-06225672],.theme-mode-light .token.entity[data-v-06225672],.theme-mode-light .token.operator[data-v-06225672],.theme-mode-light .token.url[data-v-06225672]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-06225672],.theme-mode-light .token.attr-value[data-v-06225672],.theme-mode-light .token.keyword[data-v-06225672]{color:#07a}.theme-mode-light .token.class-name[data-v-06225672],.theme-mode-light .token.function[data-v-06225672]{color:#dd4a68}.theme-mode-light .token.important[data-v-06225672],.theme-mode-light .token.regex[data-v-06225672],.theme-mode-light .token.variable[data-v-06225672]{color:#e90}.theme-mode-light .token.bold[data-v-06225672],.theme-mode-light .token.important[data-v-06225672]{font-weight:700}.theme-mode-light .token.italic[data-v-06225672]{font-style:italic}.theme-mode-light .token.entity[data-v-06225672]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-06225672],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-06225672]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-06225672]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-06225672],.theme-mode-dark pre[class*=language-][data-v-06225672]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-06225672]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-06225672],.theme-mode-dark pre[class*=language-][data-v-06225672]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-06225672]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-06225672],.theme-mode-dark .token.cdata[data-v-06225672],.theme-mode-dark .token.comment[data-v-06225672],.theme-mode-dark .token.doctype[data-v-06225672],.theme-mode-dark .token.prolog[data-v-06225672]{color:#999}.theme-mode-dark .token.punctuation[data-v-06225672]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-06225672],.theme-mode-dark .token.deleted[data-v-06225672],.theme-mode-dark .token.namespace[data-v-06225672],.theme-mode-dark .token.tag[data-v-06225672]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-06225672]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-06225672],.theme-mode-dark .token.function[data-v-06225672],.theme-mode-dark .token.number[data-v-06225672]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-06225672],.theme-mode-dark .token.constant[data-v-06225672],.theme-mode-dark .token.property[data-v-06225672],.theme-mode-dark .token.symbol[data-v-06225672]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-06225672],.theme-mode-dark .token.builtin[data-v-06225672],.theme-mode-dark .token.important[data-v-06225672],.theme-mode-dark .token.keyword[data-v-06225672],.theme-mode-dark .token.selector[data-v-06225672]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-06225672],.theme-mode-dark .token.char[data-v-06225672],.theme-mode-dark .token.regex[data-v-06225672],.theme-mode-dark .token.string[data-v-06225672],.theme-mode-dark .token.variable[data-v-06225672]{color:#7ec699}.theme-mode-dark .token.entity[data-v-06225672],.theme-mode-dark .token.operator[data-v-06225672],.theme-mode-dark .token.url[data-v-06225672]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-06225672],.theme-mode-dark .style .token.string[data-v-06225672],.theme-mode-dark .token.entity[data-v-06225672],.theme-mode-dark .token.operator[data-v-06225672],.theme-mode-dark .token.url[data-v-06225672]{background:none}.theme-mode-dark .token.bold[data-v-06225672],.theme-mode-dark .token.important[data-v-06225672]{font-weight:700}.theme-mode-dark .token.italic[data-v-06225672]{font-style:italic}.theme-mode-dark .token.entity[data-v-06225672]{cursor:help}.theme-mode-dark .token.inserted[data-v-06225672]{color:green}.theme-mode-read[data-v-06225672]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-06225672],.theme-mode-read pre[class*=language-][data-v-06225672]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-06225672]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-06225672],.theme-mode-read pre[class*=language-][data-v-06225672]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-06225672]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-06225672],.theme-mode-read .token.cdata[data-v-06225672],.theme-mode-read .token.comment[data-v-06225672],.theme-mode-read .token.doctype[data-v-06225672],.theme-mode-read .token.prolog[data-v-06225672]{color:#999}.theme-mode-read .token.punctuation[data-v-06225672]{color:#ccc}.theme-mode-read .token.attr-name[data-v-06225672],.theme-mode-read .token.deleted[data-v-06225672],.theme-mode-read .token.namespace[data-v-06225672],.theme-mode-read .token.tag[data-v-06225672]{color:#e2777a}.theme-mode-read .token.function-name[data-v-06225672]{color:#6196cc}.theme-mode-read .token.boolean[data-v-06225672],.theme-mode-read .token.function[data-v-06225672],.theme-mode-read .token.number[data-v-06225672]{color:#f08d49}.theme-mode-read .token.class-name[data-v-06225672],.theme-mode-read .token.constant[data-v-06225672],.theme-mode-read .token.property[data-v-06225672],.theme-mode-read .token.symbol[data-v-06225672]{color:#f8c555}.theme-mode-read .token.atrule[data-v-06225672],.theme-mode-read .token.builtin[data-v-06225672],.theme-mode-read .token.important[data-v-06225672],.theme-mode-read .token.keyword[data-v-06225672],.theme-mode-read .token.selector[data-v-06225672]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-06225672],.theme-mode-read .token.char[data-v-06225672],.theme-mode-read .token.regex[data-v-06225672],.theme-mode-read .token.string[data-v-06225672],.theme-mode-read .token.variable[data-v-06225672]{color:#7ec699}.theme-mode-read .token.entity[data-v-06225672],.theme-mode-read .token.operator[data-v-06225672],.theme-mode-read .token.url[data-v-06225672]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-06225672],.theme-mode-read .style .token.string[data-v-06225672],.theme-mode-read .token.entity[data-v-06225672],.theme-mode-read .token.operator[data-v-06225672],.theme-mode-read .token.url[data-v-06225672]{background:none}.theme-mode-read .token.bold[data-v-06225672],.theme-mode-read .token.important[data-v-06225672]{font-weight:700}.theme-mode-read .token.italic[data-v-06225672]{font-style:italic}.theme-mode-read .token.entity[data-v-06225672]{cursor:help}.theme-mode-read .token.inserted[data-v-06225672]{color:green}.theme-style-line.theme-mode-light[data-v-06225672]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-06225672]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-06225672]{--bodyBg:#f5f5d5}.articleInfo-wrap[data-v-06225672]{max-width:860px}.theme-style-line .articleInfo-wrap .articleInfo[data-v-06225672]{padding-top:.5rem}.articleInfo-wrap[data-v-06225672]{position:relative;z-index:1;color:#888}.articleInfo-wrap .articleInfo[data-v-06225672]{overflow:hidden;font-size:.92rem}.articleInfo-wrap .articleInfo .breadcrumbs[data-v-06225672]{margin:0;padding:0;overflow:hidden;display:inline-block;line-height:2rem}@media (max-width:960px){.articleInfo-wrap .articleInfo .breadcrumbs[data-v-06225672]{width:100%}}.articleInfo-wrap .articleInfo .breadcrumbs li[data-v-06225672]{list-style-type:none;float:left;padding-right:5px}.articleInfo-wrap .articleInfo .breadcrumbs li[data-v-06225672]:after{content:"/";margin-left:5px;color:#999}.articleInfo-wrap .articleInfo .breadcrumbs li[data-v-06225672]:last-child:after{content:""}.articleInfo-wrap .articleInfo .breadcrumbs li a[data-v-06225672]{color:#888}.articleInfo-wrap .articleInfo .breadcrumbs li a[data-v-06225672]:before{font-size:.92rem}.articleInfo-wrap .articleInfo .breadcrumbs li a[data-v-06225672]:hover{color:#11a8cd}.articleInfo-wrap .articleInfo .breadcrumbs li .icon-home[data-v-06225672]{text-decoration:none}.articleInfo-wrap .articleInfo .info[data-v-06225672]{float:right;line-height:32px}@media (max-width:960px){.articleInfo-wrap .articleInfo .info[data-v-06225672]{float:left}}.articleInfo-wrap .articleInfo .info div[data-v-06225672]{float:left;margin-left:20px;font-size:.8rem}@media (max-width:960px){.articleInfo-wrap .articleInfo .info div[data-v-06225672]{margin:0 20px 0 0}}.articleInfo-wrap .articleInfo .info div[data-v-06225672]:before{margin-right:3px}.articleInfo-wrap .articleInfo .info div a[data-v-06225672]{color:#888}.articleInfo-wrap .articleInfo .info div a[data-v-06225672]:hover{text-decoration:none}.articleInfo-wrap .articleInfo .info div a.beLink[data-v-06225672]:hover{color:#11a8cd;text-decoration:underline}.theme-mode-light[data-v-644d539c]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-644d539c],.theme-mode-light pre[class*=language-][data-v-644d539c]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-644d539c]::-moz-selection,.theme-mode-light code[class*=language-][data-v-644d539c] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-644d539c]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-644d539c] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-644d539c]::selection,.theme-mode-light code[class*=language-][data-v-644d539c] ::selection,.theme-mode-light pre[class*=language-][data-v-644d539c]::selection,.theme-mode-light pre[class*=language-][data-v-644d539c] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-644d539c],.theme-mode-light pre[class*=language-][data-v-644d539c]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-644d539c]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-644d539c],.theme-mode-light pre[class*=language-][data-v-644d539c]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-644d539c]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-644d539c],.theme-mode-light .token.comment[data-v-644d539c],.theme-mode-light .token.doctype[data-v-644d539c],.theme-mode-light .token.prolog[data-v-644d539c]{color:#708090}.theme-mode-light .token.punctuation[data-v-644d539c]{color:#999}.theme-mode-light .namespace[data-v-644d539c]{opacity:.7}.theme-mode-light .token.boolean[data-v-644d539c],.theme-mode-light .token.constant[data-v-644d539c],.theme-mode-light .token.deleted[data-v-644d539c],.theme-mode-light .token.number[data-v-644d539c],.theme-mode-light .token.property[data-v-644d539c],.theme-mode-light .token.symbol[data-v-644d539c],.theme-mode-light .token.tag[data-v-644d539c]{color:#905}.theme-mode-light .token.attr-name[data-v-644d539c],.theme-mode-light .token.builtin[data-v-644d539c],.theme-mode-light .token.char[data-v-644d539c],.theme-mode-light .token.inserted[data-v-644d539c],.theme-mode-light .token.selector[data-v-644d539c],.theme-mode-light .token.string[data-v-644d539c]{color:#690}.theme-mode-light .language-css .token.string[data-v-644d539c],.theme-mode-light .style .token.string[data-v-644d539c],.theme-mode-light .token.entity[data-v-644d539c],.theme-mode-light .token.operator[data-v-644d539c],.theme-mode-light .token.url[data-v-644d539c]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-644d539c],.theme-mode-light .token.attr-value[data-v-644d539c],.theme-mode-light .token.keyword[data-v-644d539c]{color:#07a}.theme-mode-light .token.class-name[data-v-644d539c],.theme-mode-light .token.function[data-v-644d539c]{color:#dd4a68}.theme-mode-light .token.important[data-v-644d539c],.theme-mode-light .token.regex[data-v-644d539c],.theme-mode-light .token.variable[data-v-644d539c]{color:#e90}.theme-mode-light .token.bold[data-v-644d539c],.theme-mode-light .token.important[data-v-644d539c]{font-weight:700}.theme-mode-light .token.italic[data-v-644d539c]{font-style:italic}.theme-mode-light .token.entity[data-v-644d539c]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-644d539c],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-644d539c]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-644d539c]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-644d539c],.theme-mode-dark pre[class*=language-][data-v-644d539c]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-644d539c]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-644d539c],.theme-mode-dark pre[class*=language-][data-v-644d539c]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-644d539c]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-644d539c],.theme-mode-dark .token.cdata[data-v-644d539c],.theme-mode-dark .token.comment[data-v-644d539c],.theme-mode-dark .token.doctype[data-v-644d539c],.theme-mode-dark .token.prolog[data-v-644d539c]{color:#999}.theme-mode-dark .token.punctuation[data-v-644d539c]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-644d539c],.theme-mode-dark .token.deleted[data-v-644d539c],.theme-mode-dark .token.namespace[data-v-644d539c],.theme-mode-dark .token.tag[data-v-644d539c]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-644d539c]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-644d539c],.theme-mode-dark .token.function[data-v-644d539c],.theme-mode-dark .token.number[data-v-644d539c]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-644d539c],.theme-mode-dark .token.constant[data-v-644d539c],.theme-mode-dark .token.property[data-v-644d539c],.theme-mode-dark .token.symbol[data-v-644d539c]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-644d539c],.theme-mode-dark .token.builtin[data-v-644d539c],.theme-mode-dark .token.important[data-v-644d539c],.theme-mode-dark .token.keyword[data-v-644d539c],.theme-mode-dark .token.selector[data-v-644d539c]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-644d539c],.theme-mode-dark .token.char[data-v-644d539c],.theme-mode-dark .token.regex[data-v-644d539c],.theme-mode-dark .token.string[data-v-644d539c],.theme-mode-dark .token.variable[data-v-644d539c]{color:#7ec699}.theme-mode-dark .token.entity[data-v-644d539c],.theme-mode-dark .token.operator[data-v-644d539c],.theme-mode-dark .token.url[data-v-644d539c]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-644d539c],.theme-mode-dark .style .token.string[data-v-644d539c],.theme-mode-dark .token.entity[data-v-644d539c],.theme-mode-dark .token.operator[data-v-644d539c],.theme-mode-dark .token.url[data-v-644d539c]{background:none}.theme-mode-dark .token.bold[data-v-644d539c],.theme-mode-dark .token.important[data-v-644d539c]{font-weight:700}.theme-mode-dark .token.italic[data-v-644d539c]{font-style:italic}.theme-mode-dark .token.entity[data-v-644d539c]{cursor:help}.theme-mode-dark .token.inserted[data-v-644d539c]{color:green}.theme-mode-read[data-v-644d539c]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-644d539c],.theme-mode-read pre[class*=language-][data-v-644d539c]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-644d539c]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-644d539c],.theme-mode-read pre[class*=language-][data-v-644d539c]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-644d539c]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-644d539c],.theme-mode-read .token.cdata[data-v-644d539c],.theme-mode-read .token.comment[data-v-644d539c],.theme-mode-read .token.doctype[data-v-644d539c],.theme-mode-read .token.prolog[data-v-644d539c]{color:#999}.theme-mode-read .token.punctuation[data-v-644d539c]{color:#ccc}.theme-mode-read .token.attr-name[data-v-644d539c],.theme-mode-read .token.deleted[data-v-644d539c],.theme-mode-read .token.namespace[data-v-644d539c],.theme-mode-read .token.tag[data-v-644d539c]{color:#e2777a}.theme-mode-read .token.function-name[data-v-644d539c]{color:#6196cc}.theme-mode-read .token.boolean[data-v-644d539c],.theme-mode-read .token.function[data-v-644d539c],.theme-mode-read .token.number[data-v-644d539c]{color:#f08d49}.theme-mode-read .token.class-name[data-v-644d539c],.theme-mode-read .token.constant[data-v-644d539c],.theme-mode-read .token.property[data-v-644d539c],.theme-mode-read .token.symbol[data-v-644d539c]{color:#f8c555}.theme-mode-read .token.atrule[data-v-644d539c],.theme-mode-read .token.builtin[data-v-644d539c],.theme-mode-read .token.important[data-v-644d539c],.theme-mode-read .token.keyword[data-v-644d539c],.theme-mode-read .token.selector[data-v-644d539c]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-644d539c],.theme-mode-read .token.char[data-v-644d539c],.theme-mode-read .token.regex[data-v-644d539c],.theme-mode-read .token.string[data-v-644d539c],.theme-mode-read .token.variable[data-v-644d539c]{color:#7ec699}.theme-mode-read .token.entity[data-v-644d539c],.theme-mode-read .token.operator[data-v-644d539c],.theme-mode-read .token.url[data-v-644d539c]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-644d539c],.theme-mode-read .style .token.string[data-v-644d539c],.theme-mode-read .token.entity[data-v-644d539c],.theme-mode-read .token.operator[data-v-644d539c],.theme-mode-read .token.url[data-v-644d539c]{background:none}.theme-mode-read .token.bold[data-v-644d539c],.theme-mode-read .token.important[data-v-644d539c]{font-weight:700}.theme-mode-read .token.italic[data-v-644d539c]{font-style:italic}.theme-mode-read .token.entity[data-v-644d539c]{cursor:help}.theme-mode-read .token.inserted[data-v-644d539c]{color:green}.theme-style-line.theme-mode-light[data-v-644d539c]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-644d539c]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-644d539c]{--bodyBg:#f5f5d5}.theme-vdoing-content[data-v-644d539c]{margin-bottom:3.6rem}.title-tag[data-v-644d539c]{border:1px solid #ff5722;color:#ff5722;font-size:.8rem;padding:0 .35rem;border-radius:.2rem;margin-left:0;transform:translateY(-.05rem);display:inline-block}dd[data-v-644d539c],dl[data-v-644d539c]{margin:0}.column-wrapper[data-v-644d539c]{margin-top:1rem;display:flex;padding-bottom:2rem;border-bottom:1px solid var(--borderColor)}.column-wrapper img[data-v-644d539c]{width:80px;height:80px;border-radius:2px;margin-right:1rem}.column-wrapper .column-info .title[data-v-644d539c]{font-size:1.6rem}.column-wrapper .column-info .description[data-v-644d539c]{color:var(--textColor);opacity:.8;margin:.5rem 0}.catalogue-wrapper .catalogue-title[data-v-644d539c]{font-size:1.45rem;margin:2rem 0}.catalogue-wrapper .catalogue-content dl[data-v-644d539c]{margin-bottom:1.8rem}.catalogue-wrapper .catalogue-content dl.inline[data-v-644d539c]{display:inline-block;width:50%;margin-bottom:1rem}@media (max-width:419px){.catalogue-wrapper .catalogue-content dl.inline[data-v-644d539c]{width:100%}}.catalogue-wrapper .catalogue-content dl.inline a[data-v-644d539c]{width:100%}.catalogue-wrapper .catalogue-content dl:not(.inline) dt[data-v-644d539c]{margin-top:-3.6rem;padding-top:3.6rem}.catalogue-wrapper .catalogue-content dl dt[data-v-644d539c]{font-size:1.1rem}.catalogue-wrapper .catalogue-content dl dt:hover .header-anchor[data-v-644d539c]{opacity:1}.catalogue-wrapper .catalogue-content dl dd[data-v-644d539c]{margin-top:.7rem;margin-left:1rem}.catalogue-wrapper .catalogue-content dl a[data-v-644d539c]:not(.header-anchor){margin-bottom:.5rem;display:inline-block;width:50%}.catalogue-wrapper .catalogue-content dl a[data-v-644d539c]:not(.header-anchor):hover{color:#ff5722;text-decoration:none}@media (max-width:419px){.catalogue-wrapper .catalogue-content dl a[data-v-644d539c]:not(.header-anchor){width:100%}}.catalogue-wrapper .catalogue-content dl .sub-cat-wrap[data-v-644d539c]{margin:5px 0 8px;font-size:.95rem}.catalogue-wrapper .catalogue-content dl .sub-cat-wrap>a[data-v-644d539c]{padding-left:1rem;box-sizing:border-box}.catalogue-wrapper .catalogue-content dl .sub-cat-wrap .sub-title[data-v-644d539c]{margin-top:-3.6rem;padding-top:3.6rem;margin-bottom:6px;font-size:1rem}.catalogue-wrapper .catalogue-content dl .sub-cat-wrap:hover .header-anchor[data-v-644d539c]{opacity:1}.theme-style-line .right-menu-wrapper .right-menu-margin{border-left:1px solid var(--borderColor)}.right-menu-wrapper{width:230px;float:right;margin-right:-285px;position:sticky;top:0;font-size:.8rem}.right-menu-wrapper .right-menu-margin{margin-top:4.6rem;border-radius:3px;overflow:hidden}.right-menu-wrapper .right-menu-title{padding:10px 15px 0;background:var(--mainBg);font-size:1rem}.right-menu-wrapper .right-menu-title:after{content:"";display:block;width:100%;height:1px;background:var(--borderColor);margin-top:10px}.right-menu-wrapper .right-menu-content{max-height:80vh;position:relative;overflow:hidden;background:var(--mainBg);padding:4px 3px 4px 0}.right-menu-wrapper .right-menu-content::-webkit-scrollbar{width:3px;height:3px}.right-menu-wrapper .right-menu-content::-webkit-scrollbar-track-piece{background:none}.right-menu-wrapper .right-menu-content::-webkit-scrollbar-thumb:vertical{background-color:hsla(0,0%,49%,.3)}.right-menu-wrapper .right-menu-content:hover{overflow-y:auto;padding-right:0}.right-menu-wrapper .right-menu-content .right-menu-item{padding:4px 15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative}.right-menu-wrapper .right-menu-content .right-menu-item.level2{font-size:.8rem}.right-menu-wrapper .right-menu-content .right-menu-item.level3{padding-left:27px}.right-menu-wrapper .right-menu-content .right-menu-item.level4{padding-left:37px}.right-menu-wrapper .right-menu-content .right-menu-item.level5{padding-left:47px}.right-menu-wrapper .right-menu-content .right-menu-item.level6{padding-left:57px}.right-menu-wrapper .right-menu-content .right-menu-item.active:before{content:"";position:absolute;top:5px;left:0;width:3px;height:14px;background:#11a8cd;border-radius:0 4px 4px 0}.right-menu-wrapper .right-menu-content .right-menu-item.active a{color:#11a8cd;opacity:1}.right-menu-wrapper .right-menu-content .right-menu-item a{color:var(--textColor);opacity:.75;display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.right-menu-wrapper .right-menu-content .right-menu-item a:hover{opacity:1}.right-menu-wrapper .right-menu-content:hover{color:#11a8cd}.page>*{max-width:860px;margin:0 auto;padding:1rem 2.5rem 2rem}.page>:not(.footer){background:var(--mainBg);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin-bottom:1rem}@media (min-width:940px){.page>:not(.footer){border-radius:2px}}@media (max-width:959px){.page>*{padding:1rem 2rem}}@media (max-width:419px){.page>*{padding:1rem 1.5rem}}.page{padding-bottom:2rem;display:block}@media (max-width:719px){.page{padding-top:3.6rem}}@media (min-width:719px){.page{padding-top:5.1rem}}@media (min-width:719px){.theme-style-line .page{padding-top:3.6rem}}.theme-style-line .page>:not(.footer){box-shadow:0 0}@media (min-width:720px){.theme-style-line .page .placeholder{height:1.2rem}}.theme-vdoing-wrapper .content-wrapper{position:relative}.theme-vdoing-wrapper h1 .title-tag{height:1.5rem;line-height:1.5rem;border:1px solid #ff5722;color:#ff5722;font-size:1rem;padding:0 .4rem;border-radius:.2rem;margin-left:.5rem;transform:translateY(-.25rem);display:inline-block}.theme-vdoing-wrapper h1 img{margin-bottom:-.2rem;margin-right:.2rem;max-width:2.2rem;max-height:2.2rem}.theme-vdoing-wrapper{--linesColor:rgba(50,0,0,0.05)}.theme-vdoing-wrapper.bg-style-1{background-image:linear-gradient(90deg,var(--linesColor) 3%,transparent 0),linear-gradient(0deg,var(--linesColor) 3%,transparent 0);background-position:50%;background-size:20px 20px}.theme-vdoing-wrapper.bg-style-2{background-image:repeating-linear-gradient(0,var(--linesColor),var(--linesColor) 1px,transparent 0,transparent 50%);background-size:30px 30px}.theme-vdoing-wrapper.bg-style-3{background-image:repeating-linear-gradient(90deg,var(--linesColor),var(--linesColor) 1px,transparent 0,transparent 50%);background-size:30px 30px}.theme-vdoing-wrapper.bg-style-4{background-image:repeating-linear-gradient(-45deg,var(--linesColor),var(--linesColor) 1px,transparent 0,transparent 50%);background-size:20px 20px}.theme-vdoing-wrapper.bg-style-5{background-image:repeating-linear-gradient(45deg,var(--linesColor),var(--linesColor) 1px,transparent 0,transparent 50%);background-size:20px 20px}.theme-vdoing-wrapper.bg-style-6{background-image:radial-gradient(var(--linesColor) 1px,transparent 0);background-size:10px 10px}.theme-mode-dark .theme-vdoing-wrapper{--linesColor:hsla(0,0%,49%,0.05)}@media (min-width:720px) and (max-width:1279px){.have-rightmenu .page{padding-right:.8rem!important}}@media (max-width:1279px){.have-rightmenu .right-menu-wrapper{display:none}}@media (min-width:1280px){.have-rightmenu .sidebar .sidebar-sub-headers{display:none}}.theme-container.only-sidebarItem:not(.have-rightmenu) .sidebar,.theme-container.only-sidebarItem:not(.have-rightmenu) .sidebar-button{display:none}@media (min-width:720px){.theme-container.only-sidebarItem:not(.have-rightmenu) .page{padding-left:.8rem!important}}@media (max-width:719px){.theme-container.only-sidebarItem:not(.have-rightmenu) .page{padding-left:0!important}.theme-container.only-sidebarItem:not(.have-rightmenu) .sidebar,.theme-container.only-sidebarItem:not(.have-rightmenu) .sidebar-button{display:block}}@media (min-width:720px) and (max-width:1279px){.theme-container.only-sidebarItem.have-rightmenu .sidebar,.theme-container.only-sidebarItem.have-rightmenu .sidebar-button{display:block}}@media (min-width:1280px){.theme-container.only-sidebarItem.have-rightmenu .sidebar,.theme-container.only-sidebarItem.have-rightmenu .sidebar-button{display:none}}.categories-page .categories-wrapper{position:sticky;top:4.5rem;max-height:calc(100vh - 10rem);min-height:4.2rem}@media (max-width:719px){.categories-page .categories-wrapper{display:none}}.categories-page .categories-wrapper .categories{padding-right:.5rem;max-height:calc(100vh - 14rem);min-height:2.2rem;overflow-y:auto;transition:all .2s;position:relative}.categories-page .categories-wrapper .categories::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.05)}.categories-page .categories-wrapper .categories::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.15)}.categories-page .categories-wrapper .categories:hover::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.1)}.categories-page .categories-wrapper .categories:hover::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.25)}.categories-page .main-left .categories-wrapper{position:relative;top:0;padding:.9rem 1.5rem;margin-bottom:.9rem;max-height:15rem;border-radius:0;display:none}@media (max-width:719px){.categories-page .main-left .categories-wrapper{display:block}}.categories-page .main-left .categories-wrapper .categories{max-height:12.3rem}@media (max-width:719px){.theme-style-line .categories-page .main-left .categories-wrapper{margin-top:-.91rem;margin-bottom:-1px;padding:.9rem .2rem .5rem}}.tags-page .tags-wrapper{position:sticky;top:4.5rem;max-height:calc(100vh - 10rem);min-height:4.2rem}@media (max-width:719px){.tags-page .tags-wrapper{display:none}}.tags-page .tags-wrapper .tags{max-height:calc(100vh - 14rem);min-height:2.2rem;overflow-x:hidden;overflow-y:auto;transition:all .2s}.tags-page .tags-wrapper .tags::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.05)}.tags-page .tags-wrapper .tags::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.15)}.tags-page .tags-wrapper .tags:hover::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.1)}.tags-page .tags-wrapper .tags:hover::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.25)}.tags-page .main-left .tags-wrapper{position:relative;top:0;padding:.9rem 1.5rem;margin-bottom:.9rem;max-height:15rem;border-radius:0;display:none}@media (max-width:719px){.tags-page .main-left .tags-wrapper{display:block}}.tags-page .main-left .tags-wrapper .tags{max-height:11.5rem}@media (max-width:719px){.theme-style-line .tags-page .main-left .tags-wrapper{margin-top:-.91rem;margin-bottom:-1px}}.archives-page .theme-vdoing-wrapper{max-width:860px;margin:0 auto;padding:1rem 2.5rem 2rem}.archives-page .theme-vdoing-wrapper:not(.footer){background:var(--mainBg);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin-bottom:1rem}@media (min-width:940px){.archives-page .theme-vdoing-wrapper:not(.footer){border-radius:2px}}@media (max-width:959px){.archives-page .theme-vdoing-wrapper{padding:1rem 2rem}}@media (max-width:419px){.archives-page .theme-vdoing-wrapper{padding:1rem 1.5rem}}.theme-style-line .archives-page .theme-vdoing-wrapper{box-shadow:0 0}.archives-page .theme-vdoing-wrapper{position:relative}@media (min-width:940px){.archives-page .theme-vdoing-wrapper{margin-top:1.5rem!important}}.archives-page .theme-vdoing-wrapper .count{text-align:right;margin-top:-2.5rem;font-size:.85rem;opacity:.8}.archives-page .theme-vdoing-wrapper li,.archives-page .theme-vdoing-wrapper ul{margin:0;padding:0}.archives-page .theme-vdoing-wrapper ul{margin-top:2rem}.archives-page .theme-vdoing-wrapper li{list-style:none}.archives-page .theme-vdoing-wrapper li.year{position:sticky;top:3.6rem;background:var(--mainBg);z-index:1}.archives-page .theme-vdoing-wrapper li.year:not(:first-child){margin-top:3.5rem}.archives-page .theme-vdoing-wrapper li h2{margin-bottom:.8rem;font-weight:400;padding:.5rem 0}.archives-page .theme-vdoing-wrapper li h2 span{font-size:.85rem;font-weight:300;float:right;margin-top:1rem}.archives-page .theme-vdoing-wrapper li a{display:block;color:var(--textColor);transition:padding .3s;padding:.5rem 2rem;line-height:1.2rem}.archives-page .theme-vdoing-wrapper li a:hover{padding-left:2.5rem;color:#11a8cd;background:#f9f9f9}@media (max-width:940px){.archives-page .theme-vdoing-wrapper li a{padding:.5rem 1rem;font-weight:400}.archives-page .theme-vdoing-wrapper li a:hover{padding-left:1.5rem}}.archives-page .theme-vdoing-wrapper li a span.date{opacity:.6;font-size:.85rem;font-weight:400;margin-right:.3rem}.archives-page .theme-vdoing-wrapper li a .title-tag{border:1px solid #ff5722;color:#ff5722;font-size:.8rem;padding:0 .35rem;border-radius:.2rem;margin-left:0;transform:translateY(-.05rem);display:inline-block}.archives-page .theme-vdoing-wrapper .loadmore{text-align:center;margin-top:1rem;opacity:.5}.theme-mode-dark .archives-page .theme-vdoing-wrapper li a:hover,.theme-mode-read .archives-page .theme-vdoing-wrapper li a:hover{background:var(--customBlockBg)}.hide-navbar .archives-page .theme-vdoing-wrapper li.year{top:0}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:1.01em;line-height:1.4;font-weight:700;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.98em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:var(--textColor);transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#11a8cd;border-left-color:#11a8cd}.sidebar-heading.clickable:hover{color:#11a8cd}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}.sidebar .sidebar-sub-headers .level4{padding-left:.2rem}.sidebar .sidebar-sub-headers .level5{padding-left:.4rem}.sidebar .sidebar-sub-headers .level6{padding-left:.6rem}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:var(--textColor);border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#11a8cd}a.sidebar-link.active{font-weight:600;color:#11a8cd;border-left-color:#11a8cd}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid var(--borderColor);padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}.sidebar .blogger{display:none;border-bottom:1px solid var(--borderColor)}.sidebar .blogger img{width:60px;height:60px;border-radius:5px;margin:.75rem 1rem}.sidebar .blogger .blogger-info{flex:1;padding:0 .3rem .3rem 0}.sidebar .blogger .blogger-info h3{margin:.95rem 0 .6rem;font-size:1.1rem}.sidebar .blogger .blogger-info .icons .iconfont{font-size:1.2rem;padding-right:.6rem;color:#777}.sidebar .sidebar-slot{margin-bottom:-.5rem;font-size:.85rem}.sidebar .sidebar-slot.sidebar-slot-top{padding:1.5rem 1.5rem 0}.sidebar .sidebar-slot.sidebar-slot-bottom{padding:0 1.5rem 1.5rem}@media (max-width:719px){.sidebar .blogger{display:flex}.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.yellowBorder{border-radius:5px;box-shadow:0 0 15px #ffe089!important}.buttons{position:fixed;right:2rem;bottom:2.5rem;z-index:11}@media (max-width:959px){.buttons{right:1rem;bottom:1.5rem}}.buttons .button{width:2.2rem;height:2.2rem;line-height:2.2rem;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.15);margin-top:.9rem;text-align:center;cursor:pointer;transition:all .5s;background:var(--blurBg)}.buttons .button.hover{background:#11a8cd;box-shadow:0 0 15px #11a8cd}.buttons .button.hover:before{color:#fff}@media (any-hover:hover){.buttons .button:hover{background:#11a8cd;box-shadow:0 0 15px #11a8cd}.buttons .button:hover:before{color:#fff}}.buttons .button .select-box{margin:0;padding:.8rem 0;position:absolute;bottom:0;right:1.5rem;background:var(--mainBg);border:1px solid var(--borderColor);width:120px;border-radius:6px;box-shadow:0 0 15px hsla(0,0%,100%,.2)}.buttons .button .select-box li{list-style:none;line-height:2rem;font-size:.95rem}.buttons .button .select-box li:hover{color:#11a8cd}.buttons .button .select-box li.active{background-color:hsla(0,0%,58.8%,.2);color:#11a8cd}.mode-enter-active,.mode-leave-active{transition:all .3s}.mode-enter,.mode-leave-to{opacity:0;transform:scale(.8)}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.footer{padding:5rem 1.5rem 2.5rem;text-align:center;color:#666;box-sizing:border-box;font-size:.85rem;transition:all .2s ease}.footer>span{line-height:1.5rem}.footer .icons{margin-bottom:12px}.footer .icons .iconfont{padding:0 10px;font-size:1.3rem}.footer a{color:inherit}.footer a:hover{color:#11a8cd}@media (min-width:720px){.sidebar-open .footer{width:auto;padding-left:19.5rem}}@media (min-width:1520px){.have-rightmenu .footer{padding-right:231.5px}}.no-sidebar .footer{width:auto;padding-left:1.5rem}.body-bg{position:fixed;left:0;top:0;z-index:-999999;height:100vh;width:100vw;transition:background .5s}.theme-mode-light{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-],.theme-mode-light pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-]::-moz-selection,.theme-mode-light code[class*=language-] ::-moz-selection,.theme-mode-light pre[class*=language-]::-moz-selection,.theme-mode-light pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-]::selection,.theme-mode-light code[class*=language-] ::selection,.theme-mode-light pre[class*=language-]::selection,.theme-mode-light pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-],.theme-mode-light pre[class*=language-]{text-shadow:none}}.theme-mode-light pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-],.theme-mode-light pre[class*=language-]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata,.theme-mode-light .token.comment,.theme-mode-light .token.doctype,.theme-mode-light .token.prolog{color:#708090}.theme-mode-light .token.punctuation{color:#999}.theme-mode-light .namespace{opacity:.7}.theme-mode-light .token.boolean,.theme-mode-light .token.constant,.theme-mode-light .token.deleted,.theme-mode-light .token.number,.theme-mode-light .token.property,.theme-mode-light .token.symbol,.theme-mode-light .token.tag{color:#905}.theme-mode-light .token.attr-name,.theme-mode-light .token.builtin,.theme-mode-light .token.char,.theme-mode-light .token.inserted,.theme-mode-light .token.selector,.theme-mode-light .token.string{color:#690}.theme-mode-light .language-css .token.string,.theme-mode-light .style .token.string,.theme-mode-light .token.entity,.theme-mode-light .token.operator,.theme-mode-light .token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule,.theme-mode-light .token.attr-value,.theme-mode-light .token.keyword{color:#07a}.theme-mode-light .token.class-name,.theme-mode-light .token.function{color:#dd4a68}.theme-mode-light .token.important,.theme-mode-light .token.regex,.theme-mode-light .token.variable{color:#e90}.theme-mode-light .token.bold,.theme-mode-light .token.important{font-weight:700}.theme-mode-light .token.italic{font-style:italic}.theme-mode-light .token.entity{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted,.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-],.theme-mode-dark pre[class*=language-]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-],.theme-mode-dark pre[class*=language-]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment,.theme-mode-dark .token.cdata,.theme-mode-dark .token.comment,.theme-mode-dark .token.doctype,.theme-mode-dark .token.prolog{color:#999}.theme-mode-dark .token.punctuation{color:#ccc}.theme-mode-dark .token.attr-name,.theme-mode-dark .token.deleted,.theme-mode-dark .token.namespace,.theme-mode-dark .token.tag{color:#e2777a}.theme-mode-dark .token.function-name{color:#6196cc}.theme-mode-dark .token.boolean,.theme-mode-dark .token.function,.theme-mode-dark .token.number{color:#f08d49}.theme-mode-dark .token.class-name,.theme-mode-dark .token.constant,.theme-mode-dark .token.property,.theme-mode-dark .token.symbol{color:#f8c555}.theme-mode-dark .token.atrule,.theme-mode-dark .token.builtin,.theme-mode-dark .token.important,.theme-mode-dark .token.keyword,.theme-mode-dark .token.selector{color:#cc99cd}.theme-mode-dark .token.attr-value,.theme-mode-dark .token.char,.theme-mode-dark .token.regex,.theme-mode-dark .token.string,.theme-mode-dark .token.variable{color:#7ec699}.theme-mode-dark .token.entity,.theme-mode-dark .token.operator,.theme-mode-dark .token.url{color:#67cdcc}.theme-mode-dark .language-css .token.string,.theme-mode-dark .style .token.string,.theme-mode-dark .token.entity,.theme-mode-dark .token.operator,.theme-mode-dark .token.url{background:none}.theme-mode-dark .token.bold,.theme-mode-dark .token.important{font-weight:700}.theme-mode-dark .token.italic{font-style:italic}.theme-mode-dark .token.entity{cursor:help}.theme-mode-dark .token.inserted{color:green}.theme-mode-read{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-],.theme-mode-read pre[class*=language-]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-],.theme-mode-read pre[class*=language-]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment,.theme-mode-read .token.cdata,.theme-mode-read .token.comment,.theme-mode-read .token.doctype,.theme-mode-read .token.prolog{color:#999}.theme-mode-read .token.punctuation{color:#ccc}.theme-mode-read .token.attr-name,.theme-mode-read .token.deleted,.theme-mode-read .token.namespace,.theme-mode-read .token.tag{color:#e2777a}.theme-mode-read .token.function-name{color:#6196cc}.theme-mode-read .token.boolean,.theme-mode-read .token.function,.theme-mode-read .token.number{color:#f08d49}.theme-mode-read .token.class-name,.theme-mode-read .token.constant,.theme-mode-read .token.property,.theme-mode-read .token.symbol{color:#f8c555}.theme-mode-read .token.atrule,.theme-mode-read .token.builtin,.theme-mode-read .token.important,.theme-mode-read .token.keyword,.theme-mode-read .token.selector{color:#cc99cd}.theme-mode-read .token.attr-value,.theme-mode-read .token.char,.theme-mode-read .token.regex,.theme-mode-read .token.string,.theme-mode-read .token.variable{color:#7ec699}.theme-mode-read .token.entity,.theme-mode-read .token.operator,.theme-mode-read .token.url{color:#67cdcc}.theme-mode-read .language-css .token.string,.theme-mode-read .style .token.string,.theme-mode-read .token.entity,.theme-mode-read .token.operator,.theme-mode-read .token.url{background:none}.theme-mode-read .token.bold,.theme-mode-read .token.important{font-weight:700}.theme-mode-read .token.italic{font-style:italic}.theme-mode-read .token.entity{cursor:help}.theme-mode-read .token.inserted{color:green}.theme-style-line.theme-mode-light{--bodyBg:#fff}.theme-style-line.theme-mode-dark{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read{--bodyBg:#f5f5d5}.custom-html-window{position:fixed;bottom:0;display:flex;overflow:hidden;font-weight:350}@media (max-width:960px){.custom-html-window{display:none}}.custom-html-window .custom-wrapper{position:relative;max-width:200px;max-height:400px}.custom-html-window .custom-wrapper .close-but{cursor:pointer;position:absolute;right:0;top:0;font-size:1.5rem;line-height:1.5rem;width:1.5rem;height:1.5rem;opacity:0;transition:all .2s}.custom-html-window .custom-wrapper .close-but:hover{opacity:.9}.custom-html-window .custom-wrapper:hover .close-but{opacity:.7}.custom-html-window.custom-html-window-lb{left:0;z-index:99}.custom-html-window.custom-html-window-lb>*{align-self:flex-end}.custom-html-window.custom-html-window-rb{right:80px;z-index:10;justify-content:flex-end}.custom-html-window.custom-html-window-rb>*{align-self:flex-end}.theme-mode-light[data-v-d5affa18]{--bodyBg:#f4f4f4;--mainBg:#fff;--sidebarBg:hsla(0,0%,100%,0.8);--blurBg:hsla(0,0%,100%,0.9);--customBlockBg:#f1f1f1;--textColor:#00323c;--textLightenColor:#0085ad;--borderColor:rgba(0,0,0,0.12);--codeBg:#f6f6f6;--codeColor:#525252}.theme-mode-light code[class*=language-][data-v-d5affa18],.theme-mode-light pre[class*=language-][data-v-d5affa18]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-light code[class*=language-][data-v-d5affa18]::-moz-selection,.theme-mode-light code[class*=language-][data-v-d5affa18] ::-moz-selection,.theme-mode-light pre[class*=language-][data-v-d5affa18]::-moz-selection,.theme-mode-light pre[class*=language-][data-v-d5affa18] ::-moz-selection{text-shadow:none;background:#b3d4fc}.theme-mode-light code[class*=language-][data-v-d5affa18]::selection,.theme-mode-light code[class*=language-][data-v-d5affa18] ::selection,.theme-mode-light pre[class*=language-][data-v-d5affa18]::selection,.theme-mode-light pre[class*=language-][data-v-d5affa18] ::selection{text-shadow:none;background:#b3d4fc}@media print{.theme-mode-light code[class*=language-][data-v-d5affa18],.theme-mode-light pre[class*=language-][data-v-d5affa18]{text-shadow:none}}.theme-mode-light pre[class*=language-][data-v-d5affa18]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-light :not(pre)>code[class*=language-][data-v-d5affa18],.theme-mode-light pre[class*=language-][data-v-d5affa18]{background:#f5f2f0}.theme-mode-light :not(pre)>code[class*=language-][data-v-d5affa18]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-light .token.cdata[data-v-d5affa18],.theme-mode-light .token.comment[data-v-d5affa18],.theme-mode-light .token.doctype[data-v-d5affa18],.theme-mode-light .token.prolog[data-v-d5affa18]{color:#708090}.theme-mode-light .token.punctuation[data-v-d5affa18]{color:#999}.theme-mode-light .namespace[data-v-d5affa18]{opacity:.7}.theme-mode-light .token.boolean[data-v-d5affa18],.theme-mode-light .token.constant[data-v-d5affa18],.theme-mode-light .token.deleted[data-v-d5affa18],.theme-mode-light .token.number[data-v-d5affa18],.theme-mode-light .token.property[data-v-d5affa18],.theme-mode-light .token.symbol[data-v-d5affa18],.theme-mode-light .token.tag[data-v-d5affa18]{color:#905}.theme-mode-light .token.attr-name[data-v-d5affa18],.theme-mode-light .token.builtin[data-v-d5affa18],.theme-mode-light .token.char[data-v-d5affa18],.theme-mode-light .token.inserted[data-v-d5affa18],.theme-mode-light .token.selector[data-v-d5affa18],.theme-mode-light .token.string[data-v-d5affa18]{color:#690}.theme-mode-light .language-css .token.string[data-v-d5affa18],.theme-mode-light .style .token.string[data-v-d5affa18],.theme-mode-light .token.entity[data-v-d5affa18],.theme-mode-light .token.operator[data-v-d5affa18],.theme-mode-light .token.url[data-v-d5affa18]{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.theme-mode-light .token.atrule[data-v-d5affa18],.theme-mode-light .token.attr-value[data-v-d5affa18],.theme-mode-light .token.keyword[data-v-d5affa18]{color:#07a}.theme-mode-light .token.class-name[data-v-d5affa18],.theme-mode-light .token.function[data-v-d5affa18]{color:#dd4a68}.theme-mode-light .token.important[data-v-d5affa18],.theme-mode-light .token.regex[data-v-d5affa18],.theme-mode-light .token.variable[data-v-d5affa18]{color:#e90}.theme-mode-light .token.bold[data-v-d5affa18],.theme-mode-light .token.important[data-v-d5affa18]{font-weight:700}.theme-mode-light .token.italic[data-v-d5affa18]{font-style:italic}.theme-mode-light .token.entity[data-v-d5affa18]{cursor:help}.theme-mode-light div[class*=language-] .highlight-lines .highlighted[data-v-d5affa18],.theme-mode-light div[class*=language-].line-numbers-mode .highlight-lines .highlighted[data-v-d5affa18]:before{background-color:hsla(0,0%,78.4%,.4)}.theme-mode-dark[data-v-d5affa18]{--bodyBg:#27272b;--mainBg:#1e1e22;--sidebarBg:rgba(30,30,34,0.8);--blurBg:rgba(30,30,34,0.8);--customBlockBg:#27272b;--textColor:#9b9baa;--textLightenColor:#0085ad;--borderColor:#30363d;--codeBg:#252526;--codeColor:#fff}.theme-mode-dark code[class*=language-][data-v-d5affa18],.theme-mode-dark pre[class*=language-][data-v-d5affa18]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-dark pre[class*=language-][data-v-d5affa18]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-dark :not(pre)>code[class*=language-][data-v-d5affa18],.theme-mode-dark pre[class*=language-][data-v-d5affa18]{background:#2d2d2d}.theme-mode-dark :not(pre)>code[class*=language-][data-v-d5affa18]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-dark .token.block-comment[data-v-d5affa18],.theme-mode-dark .token.cdata[data-v-d5affa18],.theme-mode-dark .token.comment[data-v-d5affa18],.theme-mode-dark .token.doctype[data-v-d5affa18],.theme-mode-dark .token.prolog[data-v-d5affa18]{color:#999}.theme-mode-dark .token.punctuation[data-v-d5affa18]{color:#ccc}.theme-mode-dark .token.attr-name[data-v-d5affa18],.theme-mode-dark .token.deleted[data-v-d5affa18],.theme-mode-dark .token.namespace[data-v-d5affa18],.theme-mode-dark .token.tag[data-v-d5affa18]{color:#e2777a}.theme-mode-dark .token.function-name[data-v-d5affa18]{color:#6196cc}.theme-mode-dark .token.boolean[data-v-d5affa18],.theme-mode-dark .token.function[data-v-d5affa18],.theme-mode-dark .token.number[data-v-d5affa18]{color:#f08d49}.theme-mode-dark .token.class-name[data-v-d5affa18],.theme-mode-dark .token.constant[data-v-d5affa18],.theme-mode-dark .token.property[data-v-d5affa18],.theme-mode-dark .token.symbol[data-v-d5affa18]{color:#f8c555}.theme-mode-dark .token.atrule[data-v-d5affa18],.theme-mode-dark .token.builtin[data-v-d5affa18],.theme-mode-dark .token.important[data-v-d5affa18],.theme-mode-dark .token.keyword[data-v-d5affa18],.theme-mode-dark .token.selector[data-v-d5affa18]{color:#cc99cd}.theme-mode-dark .token.attr-value[data-v-d5affa18],.theme-mode-dark .token.char[data-v-d5affa18],.theme-mode-dark .token.regex[data-v-d5affa18],.theme-mode-dark .token.string[data-v-d5affa18],.theme-mode-dark .token.variable[data-v-d5affa18]{color:#7ec699}.theme-mode-dark .token.entity[data-v-d5affa18],.theme-mode-dark .token.operator[data-v-d5affa18],.theme-mode-dark .token.url[data-v-d5affa18]{color:#67cdcc}.theme-mode-dark .language-css .token.string[data-v-d5affa18],.theme-mode-dark .style .token.string[data-v-d5affa18],.theme-mode-dark .token.entity[data-v-d5affa18],.theme-mode-dark .token.operator[data-v-d5affa18],.theme-mode-dark .token.url[data-v-d5affa18]{background:none}.theme-mode-dark .token.bold[data-v-d5affa18],.theme-mode-dark .token.important[data-v-d5affa18]{font-weight:700}.theme-mode-dark .token.italic[data-v-d5affa18]{font-style:italic}.theme-mode-dark .token.entity[data-v-d5affa18]{cursor:help}.theme-mode-dark .token.inserted[data-v-d5affa18]{color:green}.theme-mode-read[data-v-d5affa18]{--bodyBg:#ececcc;--mainBg:#f5f5d5;--sidebarBg:rgba(245,245,213,0.8);--blurBg:rgba(245,245,213,0.9);--customBlockBg:#ececcc;--textColor:#704214;--textLightenColor:#963;--borderColor:rgba(0,0,0,0.15);--codeBg:#282c34;--codeColor:#fff}.theme-mode-read code[class*=language-][data-v-d5affa18],.theme-mode-read pre[class*=language-][data-v-d5affa18]{color:#ccc;background:none;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.theme-mode-read pre[class*=language-][data-v-d5affa18]{padding:1em;margin:.5em 0;overflow:auto}.theme-mode-read :not(pre)>code[class*=language-][data-v-d5affa18],.theme-mode-read pre[class*=language-][data-v-d5affa18]{background:#2d2d2d}.theme-mode-read :not(pre)>code[class*=language-][data-v-d5affa18]{padding:.1em;border-radius:.3em;white-space:normal}.theme-mode-read .token.block-comment[data-v-d5affa18],.theme-mode-read .token.cdata[data-v-d5affa18],.theme-mode-read .token.comment[data-v-d5affa18],.theme-mode-read .token.doctype[data-v-d5affa18],.theme-mode-read .token.prolog[data-v-d5affa18]{color:#999}.theme-mode-read .token.punctuation[data-v-d5affa18]{color:#ccc}.theme-mode-read .token.attr-name[data-v-d5affa18],.theme-mode-read .token.deleted[data-v-d5affa18],.theme-mode-read .token.namespace[data-v-d5affa18],.theme-mode-read .token.tag[data-v-d5affa18]{color:#e2777a}.theme-mode-read .token.function-name[data-v-d5affa18]{color:#6196cc}.theme-mode-read .token.boolean[data-v-d5affa18],.theme-mode-read .token.function[data-v-d5affa18],.theme-mode-read .token.number[data-v-d5affa18]{color:#f08d49}.theme-mode-read .token.class-name[data-v-d5affa18],.theme-mode-read .token.constant[data-v-d5affa18],.theme-mode-read .token.property[data-v-d5affa18],.theme-mode-read .token.symbol[data-v-d5affa18]{color:#f8c555}.theme-mode-read .token.atrule[data-v-d5affa18],.theme-mode-read .token.builtin[data-v-d5affa18],.theme-mode-read .token.important[data-v-d5affa18],.theme-mode-read .token.keyword[data-v-d5affa18],.theme-mode-read .token.selector[data-v-d5affa18]{color:#cc99cd}.theme-mode-read .token.attr-value[data-v-d5affa18],.theme-mode-read .token.char[data-v-d5affa18],.theme-mode-read .token.regex[data-v-d5affa18],.theme-mode-read .token.string[data-v-d5affa18],.theme-mode-read .token.variable[data-v-d5affa18]{color:#7ec699}.theme-mode-read .token.entity[data-v-d5affa18],.theme-mode-read .token.operator[data-v-d5affa18],.theme-mode-read .token.url[data-v-d5affa18]{color:#67cdcc}.theme-mode-read .language-css .token.string[data-v-d5affa18],.theme-mode-read .style .token.string[data-v-d5affa18],.theme-mode-read .token.entity[data-v-d5affa18],.theme-mode-read .token.operator[data-v-d5affa18],.theme-mode-read .token.url[data-v-d5affa18]{background:none}.theme-mode-read .token.bold[data-v-d5affa18],.theme-mode-read .token.important[data-v-d5affa18]{font-weight:700}.theme-mode-read .token.italic[data-v-d5affa18]{font-style:italic}.theme-mode-read .token.entity[data-v-d5affa18]{cursor:help}.theme-mode-read .token.inserted[data-v-d5affa18]{color:green}.theme-style-line.theme-mode-light[data-v-d5affa18]{--bodyBg:#fff}.theme-style-line.theme-mode-dark[data-v-d5affa18]{--bodyBg:#1e1e22}.theme-style-line.theme-mode-read[data-v-d5affa18]{--bodyBg:#f5f5d5}.badge[data-v-d5affa18]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-d5affa18],.badge.tip[data-v-d5affa18],.badge[data-v-d5affa18]{background-color:#42b983}.badge.error[data-v-d5affa18]{background-color:#da5961}.badge.warn[data-v-d5affa18],.badge.warning[data-v-d5affa18],.badge.yellow[data-v-d5affa18]{background-color:#e7c000}.badge+.badge[data-v-d5affa18]{margin-left:5px} \ No newline at end of file diff --git a/assets/img/search.83621669.svg b/assets/img/search.83621669.svg new file mode 100644 index 000000000..03d83913e --- /dev/null +++ b/assets/img/search.83621669.svg @@ -0,0 +1 @@ + diff --git a/assets/js/10.2e163faf.js b/assets/js/10.2e163faf.js new file mode 100644 index 000000000..cc009a2b0 --- /dev/null +++ b/assets/js/10.2e163faf.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{363:function(t,n,s){"use strict";s.r(n);var e=s(14),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/100.1cf85e72.js b/assets/js/100.1cf85e72.js new file mode 100644 index 000000000..bda0b9d59 --- /dev/null +++ b/assets/js/100.1cf85e72.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{452:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("blockquote",[s("p",[t._v("本文是基于 "),s("RouterLink",{attrs:{to:"/pages/e06ece/"}},[t._v("iOS-RxSwift项目实战记录")]),t._v(" 所述，如果你还未阅读过，建议你最好还先阅读一遍，并下载Demo熟悉一下 : )")],1)]),t._v(" "),s("h2",{attrs:{id:"前言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前言"}},[t._v("#")]),t._v(" 前言")]),t._v(" "),s("p",[t._v("MVVM的模式中，多出了ViewModel这个角色，将逻辑处理、网络请求等繁杂操作中ViewController中抽离出来，ViewController得以瘦身。\n结合RxSwift架构，我们一般就会在ViewModel中定义一个input收集繁杂操作所需的信息，通过一个transform方法将input作为参数传入，进而得到一个output供controller使用。")]),t._v(" "),s("p",[t._v("在使用RxSwift开发时会大量的使用到这种形式，其中就包括我们的网络请求。\n结合 "),s("RouterLink",{attrs:{to:"/pages/e06ece/"}},[t._v("iOS-RxSwift项目实战记录")]),t._v(" 中所述的“MJRefresh在RxSwift中的使用”，在output中定义了一个变量")],1),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" refreshStatus "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Variable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFRefreshStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("none")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("controller通过output将其进行监听，从而当值发生变化时，controller就能实时获取当前应所处的刷新状态")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("vmOutput"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refreshStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("asObservable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onNext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("weak")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" status "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" status "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("beingHeaderRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beginRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endHeaderRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("beingFooterRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beginRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endFooterRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("noMoreData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshingWithNoMoreData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addDisposableTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rx_disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果在一个项目多处使用到了这种方式，我们就可以看到弊端——重复代码，过于冗余。")]),t._v(" "),s("p",[t._v("难道我们每次都要在controller中进行如此操作吗？")]),t._v(" "),s("h2",{attrs:{id:"面向协议"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#面向协议"}},[t._v("#")]),t._v(" 面向协议")]),t._v(" "),s("p",[t._v("关于协议的内容可以看下我之前的这两篇文章\n"),s("RouterLink",{attrs:{to:"/pages/997f68/"}},[t._v("iOS - Swift 面向协议编程（一）")])],1),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/pages/fb0480/"}},[t._v("iOS - Swift 面向协议编程（二）")])],1),t._v(" "),s("p",[t._v("总结协议的两大作用：1、规范 2、定制能力")]),t._v(" "),s("p",[t._v("定义协议 Refreshable")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ============================ Refreshable ================================ */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要使用 MJExtension 的控制器使用")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Refreshable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Refreshable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("initRefreshHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@escaping")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshHeader")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_header "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshNormalHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("refreshingBlock"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_header\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("initRefreshFooter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@escaping")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshFooter")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_footer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshAutoNormalFooter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("refreshingBlock"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mj_footer\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在controller中遵循 Refreshable 协议，通过initRefreshHeader方法或者initRefreshFooter方法给tableView或者collectionView赋予头部或尾部刷新的能力，并且书写下拉刷新时需要执行的代码")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以下拉刷新为例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" refreshHeader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initRefreshHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("liveCollectionView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("weak")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下拉后需要执行的操作 ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vmOutput"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("requestCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onNext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来再讲讲output，只要有网络请求的地方，就会需要需要监听请求状态，既然这样，那么可以为output定义一个协议OutputRefreshProtocol，专门用来规范必需声明的属性")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ============================ OutputRefreshProtocol ================================ */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// viewModel 中 output使用")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutputRefreshProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 告诉外界的tableView当前的刷新状态")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" refreshStatus "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Variable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFRefreshStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接着让output去遵循该协议，并进行初始化刷新状态的值为.none")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("struct LXFLiveOutput: OutputRefreshProtocol {\n var refreshStatus: Variable\n \n let sections: Driver<[LXFLiveSection]>\n init(sections: Driver<[LXFLiveSection]>) {\n self.sections = sections\n refreshStatus = Variable(.none)\n }\n}\n")])])]),s("p",[t._v("到此为止，其实跟之前没啥两样，只是使controller更方便初始化刷新控件而已。接下来才是本文的重点。")]),t._v(" "),s("h2",{attrs:{id:"重点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#重点"}},[t._v("#")]),t._v(" 重点")]),t._v(" "),s("p",[t._v("刷新的状态无非也就那么几种，下拉重载数据，上拉加载更多，请求完成时结束下拉或上拉等等。。。那我们何必要在每个controller中再去管理这等琐事？？\n而至此，刷新控件的状态是由变量 refreshStatus 来决定，此时 refreshStatus 又声明在 OutputRefreshProtocol 协议中，我们何不再定义一个方法，将刷新控件的状态交给refreshStatus自己来帮我们处理呢～")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutputRefreshProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("autoSetRefreshHeaderStatus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshHeader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MJRefreshFooter")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Disposable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" refreshStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("asObservable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onNext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("status"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" status "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("beingHeaderRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n header"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beginRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endHeaderRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n header"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("beingFooterRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n footer"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beginRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endFooterRefresh"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n footer"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("noMoreData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n footer"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("endRefreshingWithNoMoreData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这时需要我们将刷新控件的对象 header / footer 传入到方法中，实现自动控制刷新控件状态。")]),t._v(" "),s("h2",{attrs:{id:"总结使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结使用"}},[t._v("#")]),t._v(" 总结使用")]),t._v(" "),s("p",[t._v("一、output中遵守协议 OutputRefreshProtocol， 并初始化 refreshStatus 的值为 none")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFLiveOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutputRefreshProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" refreshStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Variable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFRefreshStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Driver")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFLiveSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Driver")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFLiveSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sections "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sections\n refreshStatus "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Variable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFRefreshStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("none")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("二、controller 遵守协议 Refreshable，通过协议中的方法初始化刷新控件及对应的操作，并将刷新控件对象作为参数传入到自动处理状态方法中")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFLiveViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Refreshable")]),t._v(" \n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" refreshHeader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initRefreshHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("liveCollectionView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("weak")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vmOutput"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("requestCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onNext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nvmOutput"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("autoSetRefreshHeaderStatus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" refreshHeader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" footer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("三、viewModel中根据实际情况实时更新 refreshStatus 的刷新状态")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110213748.png",alt:"image.png"}})]),t._v(" "),s("h2",{attrs:{id:"案例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#案例"}},[t._v("#")]),t._v(" 案例")]),t._v(" "),s("p",[t._v("协议："),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFBiliBili/blob/master/LXFBiliBili/LXFBiliBili/Classes/Common/Protocol/Lib/Refreshable.swift",target:"_blank",rel:"noopener noreferrer"}},[t._v("Refreshable.swift"),s("OutboundLink")],1),t._v("\nViewModel："),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFBiliBili/blob/master/LXFBiliBili/LXFBiliBili/Classes/Main/Home/Controller/Live/ViewModel/LXFLiveViewModel.swift",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFLiveViewModel"),s("OutboundLink")],1),t._v("\nController："),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFBiliBili/blob/master/LXFBiliBili/LXFBiliBili/Classes/Main/Home/Controller/Live/LXFLiveViewController.swift",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFLiveViewController"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFBiliBili",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFBiliBili"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110213759.gif",alt:"LXFBiliBili"}})])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/101.759f1e68.js b/assets/js/101.759f1e68.js new file mode 100644 index 000000000..6acb70746 --- /dev/null +++ b/assets/js/101.759f1e68.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{454:function(t,s,r){"use strict";r.r(s);var a=r(14),e=Object(a.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"高仿喜马拉雅fm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#高仿喜马拉雅fm"}},[t._v("#")]),t._v(" 高仿喜马拉雅FM")]),t._v(" "),s("p",[t._v("gitHub: https://github.com/LinXunFeng/LXFFM")]),t._v(" "),s("h2",{attrs:{id:"说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#说明"}},[t._v("#")]),t._v(" 说明")]),t._v(" "),s("p",[t._v("基于Swift 3.0 编写而成,运行环境要求: Xcode 8.0")]),t._v(" "),s("h2",{attrs:{id:"lxffm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#lxffm"}},[t._v("#")]),t._v(" LXFFM")]),t._v(" "),s("p",[t._v("原OC版: "),s("a",{attrs:{href:"https://github.com/Eastwu5788/XMLYFM",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/Eastwu5788/XMLYFM"),s("OutboundLink")],1),t._v("\n从原版作者的源代码上学到了很多,十分感谢.\n由于只是本人OC转Swift的试练项目,所以有些内容并没有实现,哈哈")]),t._v(" "),s("h3",{attrs:{id:"效果图"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#效果图"}},[t._v("#")]),t._v(" 效果图")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/1.gif",alt:"\b推荐"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/2.gif",alt:"\b分类"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/3.gif",alt:"广播"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/4.gif",alt:"榜单"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/5.gif",alt:"\b主播"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/6.gif",alt:"\b订阅听"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/7.gif",alt:"\b下载听"}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/LXFFM/raw/master/Screenshots/8.gif",alt:"我的"}})]),t._v(" "),s("div",{staticClass:"github-widget",attrs:{"data-repo":"LinXunFeng/LXFFM"}})])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/102.f29f33d0.js b/assets/js/102.f29f33d0.js new file mode 100644 index 000000000..49a23c92f --- /dev/null +++ b/assets/js/102.f29f33d0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{451:function(t,a,s){"use strict";s.r(a);var n=s(14),r=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"lxfwechat"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lxfwechat"}},[t._v("#")]),t._v(" LXFWeChat")]),t._v(" "),a("p",[t._v("Swift 3.0 高仿微信")]),t._v(" "),a("blockquote",[a("p",[t._v("两个测试账号： lxf lqr  密码都是123456")])]),t._v(" "),a("h2",{attrs:{id:"源码地址"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#源码地址"}},[t._v("#")]),t._v(" 源码地址")]),t._v(" "),a("p",[t._v("码云\nhttp://git.oschina.net/LinXunFeng/LXFWeChat")]),t._v(" "),a("p",[t._v("GitHub\nhttps://github.com/LinXunFeng/LXFWeChat")]),t._v(" "),a("p",[t._v("在此提供存放于百度云的完整项目"),a("a",{attrs:{href:"https://pan.baidu.com/s/1bpB55Bx",target:"_blank",rel:"noopener noreferrer"}},[t._v("【\b高仿微信】- 百度云"),a("OutboundLink")],1),t._v("\n希望各位能在我的项目上献出一个宝贵的Star\n谢谢")]),t._v(" "),a("blockquote",[a("p",[t._v("从2016年12月份开始做到现在，虽说这个项目看起来不大，但是锻炼人的地方还真是很多的，微信通讯录联系人的按拼音排序，自定义表情键盘中遇到的分页滚动，微信聊天界面的图片显示、语音信息的动画等。挑战着各种各样的需求，本人也将遇到的问题的解决方案做了记录并整理了一下，希望能给iOS程序员同胞们带来帮助。目前基本的聊天已完成，实现了一部分个人信息的修改，功能我会尽快完善的！")])]),t._v(" "),a("h2",{attrs:{id:"模仿微信的导航栏"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模仿微信的导航栏"}},[t._v("#")]),t._v(" 模仿微信的导航栏")]),t._v(" "),a("p",[t._v("在navigationBar底部添加一个添加了渐变层的view")]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" blurBackView "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nblurBackView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frame "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGRect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("kScreenW")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("64")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" gradintLayer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CAGradientLayer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngradintLayer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frame "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGRect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("kScreenW")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("64")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngradintLayer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("colors "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIColor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hexInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0x040012")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("withAlphaComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.76")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cgColor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIColor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hexInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0x040012")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("withAlphaComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cgColor\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\ngradintLayer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("startPoint "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGPoint")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngradintLayer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endPoint "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGPoint")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nblurBackView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("layer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSublayer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("gradintLayer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nblurBackView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isUserInteractionEnabled "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\nblurBackView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("alpha "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置导航栏样式")]),t._v("\nnavigationBar"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("barStyle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black\nnavigationBar"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertSubview")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blurBackView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"表情面板和更多面板"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#表情面板和更多面板"}},[t._v("#")]),t._v(" 表情面板和更多面板")]),t._v(" "),a("p",[t._v("遇到的问题总结了一下，可以参考下以下总结的文章")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/d0a26b/"}},[t._v("《iOS - Swift UICollectionView横向分页滚动，cell左右排版》")])],1),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/f6bde9/"}},[t._v("《iOS-Swift-UICollectionView横向分页的问题》")])],1),t._v(" "),a("h2",{attrs:{id:"聊天界面"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#聊天界面"}},[t._v("#")]),t._v(" 聊天界面")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/0909a3/"}},[t._v("《iOS-Swift 仿微信聊天图片显示》")])],1),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/1cb0c1/"}},[t._v('《iOS-Swift-UITableView的scrollToRow的"坑"》')])],1),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/832f44/"}},[t._v("《iOS-Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗》")])],1),t._v(" "),a("h2",{attrs:{id:"首页"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#首页"}},[t._v("#")]),t._v(" 首页")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/pages/cb27eb/"}},[t._v("《iOS - Swift 仿微信小红点(无数字)》")])],1),t._v(" "),a("h2",{attrs:{id:"目前完成的功能"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#目前完成的功能"}},[t._v("#")]),t._v(" 目前完成的功能")]),t._v(" "),a("h3",{attrs:{id:"微信界面"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#微信界面"}},[t._v("#")]),t._v(" 微信界面")]),t._v(" "),a("ol",[a("li",[t._v("显示右上角的菜单")]),t._v(" "),a("li",[t._v("显示最近联系人")]),t._v(" "),a("li",[t._v("最近联系人信息未读数的显示")])]),t._v(" "),a("h3",{attrs:{id:"通讯录界面"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#通讯录界面"}},[t._v("#")]),t._v(" 通讯录界面")]),t._v(" "),a("ol",[a("li",[t._v("联系人的排序")]),t._v(" "),a("li",[t._v("联系人总数显示")])]),t._v(" "),a("h3",{attrs:{id:"发现界面"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#发现界面"}},[t._v("#")]),t._v(" 发现界面")]),t._v(" "),a("ol",[a("li",[t._v("动态小红点的显示")]),t._v(" "),a("li",[t._v("购物选项的链接跳转")])]),t._v(" "),a("h3",{attrs:{id:"我界面"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#我界面"}},[t._v("#")]),t._v(" 我界面")]),t._v(" "),a("ol",[a("li",[t._v("个人头像的上传与设置，及头像的保存")]),t._v(" "),a("li",[t._v("我的二维码界面的显示及二维码的保存")])]),t._v(" "),a("h3",{attrs:{id:"聊天界面-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#聊天界面-2"}},[t._v("#")]),t._v(" 聊天界面")]),t._v(" "),a("ol",[a("li",[t._v("小视频的录制与发送")]),t._v(" "),a("li",[t._v("小视频的播放")]),t._v(" "),a("li",[t._v("聊天时间")]),t._v(" "),a("li",[t._v("图片的发送与显示")]),t._v(" "),a("li",[t._v("未发送成功的重发功能")]),t._v(" "),a("li",[t._v("语音的录制与发送")]),t._v(" "),a("li",[t._v("语音的播放动态效果")])]),t._v(" "),a("h2",{attrs:{id:"已知bug"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#已知bug"}},[t._v("#")]),t._v(" 已知BUG")]),t._v(" "),a("ul",[a("li",[t._v("小视频和图片发送出去后不能立即更新显示缩略图")]),t._v(" "),a("li",[t._v("更换头像模拟器测试正常，真机无效。。")])]),t._v(" "),a("h2",{attrs:{id:"_2017-07-24-更新"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2017-07-24-更新"}},[t._v("#")]),t._v(" 2017-07-24 更新")]),t._v(" "),a("p",[t._v("抽空出来添加了一个简单的直播功能（对方需要先进入到对应的聊天界面）\n相关博文："),a("RouterLink",{attrs:{to:"/pages/7b7220/"}},[t._v("iOS-给高仿微信添加直播聊天功能")]),t._v("\n需要用到"),a("a",{attrs:{href:"https://github.com/LinXunFeng/IJKFramework",target:"_blank",rel:"noopener noreferrer"}},[t._v("编译好的B站开源库ijkplayer"),a("OutboundLink")],1),t._v(" ，由于打包好的文件太大，传不上来，所以需要各位去自己编译集成进去。")],1),t._v(" "),a("h2",{attrs:{id:"效果图"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#效果图"}},[t._v("#")]),t._v(" 效果图")]),t._v(" "),a("h3",{attrs:{id:"动态图"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#动态图"}},[t._v("#")]),t._v(" 动态图")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/1.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/2.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/3.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/4.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/5.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/6.gif",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/7.gif",alt:""}})]),t._v(" "),a("h3",{attrs:{id:"静态图"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#静态图"}},[t._v("#")]),t._v(" 静态图")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170206_1.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_1.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_2.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_3.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_4.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_5.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_6.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_7.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_8.png",alt:""}}),t._v(" "),a("img",{attrs:{src:"https://github.com/LinXunFeng/LXFWeChat/raw/master/Screenshots/Snip20170214_9.png",alt:""}})]),t._v(" "),a("div",{staticClass:"github-widget",attrs:{"data-repo":"LinXunFeng/LXFWeChat"}})])}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/103.b2054ba5.js b/assets/js/103.b2054ba5.js new file mode 100644 index 000000000..f421e52d6 --- /dev/null +++ b/assets/js/103.b2054ba5.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{453:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("blockquote",[s("p",[t._v("为了良好的交互体验，相信大家在对待"),s("code",[t._v("scrollView")]),t._v("无数据时的提示页都会使用一些第三方来定制，最典型的就是使用"),s("a",{attrs:{href:"https://github.com/dzenbot/DZNEmptyDataSet",target:"_blank",rel:"noopener noreferrer"}},[t._v("DZNEmptyDataSet"),s("OutboundLink")],1),t._v("。但是每个界面都写一堆与"),s("code",[t._v("DZNEmptyDataSetDelegate")]),t._v("，"),s("code",[t._v("DZNEmptyDataSetSource")]),t._v("相关的代码就不太好，那一般情况下自然的就会采用继承的方式来避免。而Swift除了可以面向对象编程，它还可以面向协议编程。那可不可以也用协议来解决情况呢？嘿嘿，这个可以有，那我们接下来就来试试怎么通过协议的方式来避免上述情况，并且实现一行代码添加空白页功能")])]),t._v(" "),s("h2",{attrs:{id:"前言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前言"}},[t._v("#")]),t._v(" 前言")]),t._v(" "),s("p",[t._v("如果对面向协议有疑问的同学可以看下我之前的两篇文章")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/pages/997f68/"}},[t._v("iOS - Swift 面向协议编程（一）")])],1),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/pages/fb0480/"}},[t._v("iOS - Swift 面向协议编程（二）")])],1),t._v(" "),s("p",[t._v("之前的文章中提到了，协议除了起规范作用，还有别一个用处，就是赋予能力。我们现在的目的就是让目标控制器或者目标视图在遵守我们的协议后，就可以有实现空白页的功能。")]),t._v(" "),s("h2",{attrs:{id:"一、基本实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、基本实现"}},[t._v("#")]),t._v(" 一、基本实现")]),t._v(" "),s("h3",{attrs:{id:"_1、创建协议"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、创建协议"}},[t._v("#")]),t._v(" 1、创建协议")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MARK:- 空视图占位协议")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、确定面向类"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、确定面向类"}},[t._v("#")]),t._v(" 2、确定面向类")]),t._v(" "),s("p",[t._v("确定我们面向的类，一般"),s("code",[t._v("tableView")]),t._v("或者"),s("code",[t._v("collectionView")]),t._v("都是写在控制器里，那我们面向的类就规定为"),s("code",[t._v("UIViewController")]),t._v("，或许也有人写在"),s("code",[t._v("UIView")]),t._v("里，不过这里先按"),s("code",[t._v("UIViewController")]),t._v("来写吧")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MARK:- UIViewController - 空视图占位协议")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3、的实现的方法写在这里")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3、定义功能方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、定义功能方法"}},[t._v("#")]),t._v(" 3、定义功能方法")]),t._v(" "),s("p",[t._v("将"),s("code",[t._v("scrollView")]),t._v("传递进来，让我们定义的方法来暗地里做些操作")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("lxf_EmptyDataSet")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emptyDataSetDelegate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emptyDataSetSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4、设置数据源和代理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4、设置数据源和代理"}},[t._v("#")]),t._v(" 4、设置数据源和代理")]),t._v(" "),s("p",[t._v("在"),s("code",[t._v("3、定义功能方法")]),t._v("中将"),s("code",[t._v("delegate")]),t._v("和"),s("code",[t._v("source")]),t._v("设置为了"),s("code",[t._v("self")]),t._v(" ，而协议是无法遵守再次遵守其它协议的，那让什么来遵守对应的协议呢？要明白这里的"),s("code",[t._v("self")]),t._v("指的是"),s("code",[t._v("UIViewController")]),t._v(",考虑到"),s("code",[t._v("UIView")]),t._v("的可能，这里我就让万物对象之父"),s("code",[t._v("NSObject")]),t._v("来遵守，并实现对应的数据源方法和代理方法")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NSObject")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DZNEmptyDataSetDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DZNEmptyDataSetSource")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forEmptyDataSet scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIImage")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回提示图片")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forEmptyDataSet scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NSAttributedString")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置富文本标题")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("verticalOffset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forEmptyDataSet scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGFloat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置纵向偏移")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"二、定制空白页"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、定制空白页"}},[t._v("#")]),t._v(" 二、定制空白页")]),t._v(" "),s("p",[t._v("通过上述步骤后，只要让"),s("code",[t._v("UIViewController")]),t._v("遵守我们的协议，再调用一下"),s("code",[t._v("lxf_EmptyDataSet")]),t._v("方法就可以实现数据空白页了。但是，这样直接写死的方式很不好，有时候一些场景是需要我们做出定制的，那怎么实现定制呢？协议又不能有自己的变量来存放我们的定制。")]),t._v(" "),s("p",[s("font",{attrs:{color:"red"}},[s("em",[t._v("这里先做出一个限定，我们要使用重载方法来完成该功能，实现即可高定制，又可使用默认定制。")])])],1),t._v(" "),s("p",[t._v("回到刚刚的话题，使用UserDefaults来实现可以吗？可以，但是比较麻烦，因为UserDefaults是单例，整个进程共用这一份资源，如果你当前"),s("code",[t._v("controller")]),t._v("遵守了我们的协议"),s("code",[t._v("LXFEmptyDataSetable")]),t._v("并做出了定制，那么当下一个"),s("code",[t._v("controller")]),t._v("在遵守协议后使用了"),s("code",[t._v("默认定制")]),t._v("时，那你要怎么办？还要区分"),s("code",[t._v("scrollView")]),t._v("，那就得保存当前"),s("code",[t._v("scrollView")]),t._v("，在退出当前"),s("code",[t._v("controller")]),t._v("后还要把对应的东西置空。好咯好咯，那你说到底要怎么搞才最合适？")]),t._v(" "),s("blockquote",[s("p",[t._v("解决方案：拓展"),s("code",[t._v("UIScrollView")]),t._v("！！！有没有发现？，非常地恰巧，我们定义的方法"),s("code",[t._v("lxf_EmptyDataSet")]),t._v("需要外界将"),s("code",[t._v("UIScrollView")]),t._v("传递进来，在"),s("code",[t._v("DZNEmptyDataSet")]),t._v("的数据源方法和代理方法也有"),s("code",[t._v("scrollView")]),t._v("。那让"),s("code",[t._v("UIScrollView")]),t._v("来携带我们的定制就好啦。")])]),t._v(" "),s("h3",{attrs:{id:"_1、定义定制相关的枚举"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、定义定制相关的枚举"}},[t._v("#")]),t._v(" 1、定义定制相关的枚举")]),t._v(" "),s("p",[t._v("这里我定义了常用的定制相关的枚举")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 纵向偏移(-50) CGFloat")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" verticalOffset\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 提示语(暂无数据) String")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" tipStr\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 提示语的font(system15) UIFont")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" tipFont\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 提示语颜色(D2D2D2) UIColor")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" tipColor\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 提示图(LXFEmptyDataPic) UIImage")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" tipImage\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 允许滚动(true) Bool")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" allowScroll\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、拓展uiscrollview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、拓展uiscrollview"}},[t._v("#")]),t._v(" 2、拓展UIScrollView")]),t._v(" "),s("p",[t._v("为"),s("code",[t._v("UIScrollView")]),t._v("定义一个定制相关的属性字典")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AssociatedKeys")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" lxf_emptyAttributeDict"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 属性字典")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" lxf_emptyAttributeDict"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("objc_getAssociatedObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AssociatedKeys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf_emptyAttributeDict"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("set")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("objc_setAssociatedObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AssociatedKeys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf_emptyAttributeDict"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" newValue "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" objc_AssociationPolicy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OBJC_ASSOCIATION_RETAIN_NONATOMIC")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3、完善lxf-emptydataset方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、完善lxf-emptydataset方法"}},[t._v("#")]),t._v(" 3、完善lxf_EmptyDataSet方法")]),t._v(" "),s("p",[t._v("这里我们让外界通过闭包的方式来定制自己的空白页")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MARK:- UIViewController - 空视图占位协议")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("lxf_EmptyDataSet")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributeBlock"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf_emptyAttributeDict "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" attributeBlock "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" attributeBlock"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emptyDataSetDelegate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emptyDataSetSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4、使用定制属性字典"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4、使用定制属性字典"}},[t._v("#")]),t._v(" 4、使用定制属性字典")]),t._v(" "),s("p",[t._v("这里以返回提示图片的方法为例吧")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('public func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {\n guard let tipImg = scrollView.lxf_emptyAttributeDict?[.tipImage] as? UIImage else {\n return UIImage(named: "LXFEmptyDataPic")\n }\n return tipImg\n}\n')])])]),s("h3",{attrs:{id:"_5、外界的使用姿势"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_5、外界的使用姿势"}},[t._v("#")]),t._v(" 5、外界的使用姿势")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDemoController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("viewDidLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("viewDidLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initUI")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDemoController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fileprivate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("initUI")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tableView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UITableView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 高定制")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("lxf_EmptyDataSet")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFEmptyDataSetAttributeKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tipStr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"哟哟哟"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("verticalOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("150")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("allowScroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认定制")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// self.lxf_EmptyDataSet(tableView)")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110215949.png",alt:"大功告成"}})]),t._v(" "),s("h2",{attrs:{id:"三、开源库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、开源库"}},[t._v("#")]),t._v(" 三、开源库")]),t._v(" "),s("p",[t._v("我对这个过程进行一次整理，并做成一个名为 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFProtocolTool"),s("OutboundLink")],1),t._v(" 的库并上传至gitHub。可以使用"),s("code",[t._v("Cocoapods")]),t._v("的方式来安装使用")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("pod 'LXFProtocolTool'\n")])])]),s("p",[t._v("我也将 "),s("RouterLink",{attrs:{to:"/pages/fb0480/"}},[t._v("iOS - Swift 面向协议编程（二）")]),t._v(" 中提及的通过协议便捷加载xib的功能也集成了进来。大家可以根据自己的需要在Podfile写明要安装的功能")],1),t._v(" "),s("ul",[s("li",[t._v("Xib加载")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("pod 'LXFProtocolTool/LXFNibloadable'\n")])])]),s("ul",[s("li",[t._v("空白视图")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("pod 'LXFProtocolTool/LXFEmptyDataSetable'\n")])])]),s("p",[t._v("创建这个库的目的是为了通过协议的方式来方便快捷地实现一些的实用功能，目前功能不多，不过往后会逐渐增加，或许你有什么想实现的功能也可以提出来，喜欢的就给个Star鼓励下我吧 🚀 🚀 🚀")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/104.39135eea.js b/assets/js/104.39135eea.js new file mode 100644 index 000000000..c2c08f67d --- /dev/null +++ b/assets/js/104.39135eea.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{456:function(s,t,a){"use strict";a.r(t);var n=a(14),e=Object(n.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h2",{attrs:{id:"一、概述"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[s._v("#")]),s._v(" 一、概述")]),s._v(" "),t("p",[s._v("1、相信大家在使用Swift开发时，"),t("a",{attrs:{href:"https://github.com/Moya/Moya",target:"_blank",rel:"noopener noreferrer"}},[s._v("Moya"),t("OutboundLink")],1),s._v("是首选的网络工具，在模型解析这一块，Swift版模型解析的相关第三方库有很多，本人最习惯用的就是"),t("a",{attrs:{href:"https://github.com/SwiftyJSON/SwiftyJSON",target:"_blank",rel:"noopener noreferrer"}},[s._v("SwiftyJSON"),t("OutboundLink")],1),s._v("。")]),s._v(" "),t("p",[s._v("2、下面会开始讲解整个主要的开发功能与思想。")]),s._v(" "),t("p",[s._v("3、以下内容是基于大家会使用Moya和SwiftJSON的前提下所著，还不会的同学可以先简单了解后再来阅读本篇文章哦～")]),s._v(" "),t("h2",{attrs:{id:"二、功能开发与思想讲解"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、功能开发与思想讲解"}},[s._v("#")]),s._v(" 二、功能开发与思想讲解")]),s._v(" "),t("h3",{attrs:{id:"_1、尝试模型解析"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、尝试模型解析"}},[s._v("#")]),s._v(" 1、尝试模型解析")]),s._v(" "),t("p",[s._v("Moya请求服务器返回的数据以Response类返回给我们，那我们就给Response类做一个扩展，这里以解析模型为例")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 需要传入一个参数，告知我们要转换出什么模型")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapObject")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 模型解析过程")]),s._v("\n 。。。\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("Q: 那中间的解析过程该怎么写呢？")]),s._v(" "),t("p",[s._v("A: "),t("strong",[s._v("可以让开发者遵守某个协议，实现指定的转换方法并描述转换关系。其转换过程我们不需要知道，交给开发者即可。")])]),s._v(" "),t("p",[s._v("那接着我们来定义一个协议Modelable，并声明转换方法")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("protocol")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("mutating")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapping")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("开发者创建一个"),t("code",[s._v("MyMoel")]),s._v("的结构体，遵守协议"),t("code",[s._v("Modelable")]),s._v(",并实现"),t("code",[s._v("mapping")]),s._v("，书写转换关系")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MyModel")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" _id "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')])]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("mutating")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapping")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("_id "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"_id"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("stringValue\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("以目前的现状来分析一下："),t("code",[s._v("mapObject")]),s._v("可以让开发者传入"),t("code",[s._v("模型类型")]),s._v("，而我们的协议方法却并非是个类方法。那我们需要先得到这个"),t("code",[s._v("模型类型")]),s._v("的对象，再来调用"),t("code",[s._v("mapping")]),s._v("方法")]),s._v(" "),t("h3",{attrs:{id:"_2、模型解析的驱动开发"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、模型解析的驱动开发"}},[s._v("#")]),s._v(" 2、模型解析的驱动开发")]),s._v(" "),t("p",[s._v("Q: 怎么得到这个对象？")]),s._v(" "),t("p",[s._v("A: "),t("strong",[s._v("可以在协议中声明一个初始化方法来创建对象。是的，我们在mapObject中创建对应模型类型的对象，调用mapping方法来转换数据，再把模型对象传出去即可。")])]),s._v(" "),t("p",[s._v("那我们在"),t("code",[s._v("Modelable")]),s._v("中声明一个init方法，并传入一个参数，区别于其它初始化方法")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("protocol")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("mutating")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapping")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("OK，现在把"),t("code",[s._v("mapObject")]),s._v("方法补齐模型解析过程")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapObject")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" modelJson "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"modelKey"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 模型解析过程")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" obj "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("modelJson"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n obj"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("mapping")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("modelJson"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" obj\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h3",{attrs:{id:"_3、自定义解析键名"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3、自定义解析键名"}},[s._v("#")]),s._v(" 3、自定义解析键名")]),s._v(" "),t("p",[s._v("Q: 这样是搞定解析了，但是网络请求回来的json格式错综复杂，有什么办法可以让开发者来自行指定model对应的键名呢？")]),s._v(" "),t("p",[s._v("A: "),t("strong",[s._v("嗯嗯，既然解析过程是在 Response 扩展里操作的，那我们可以通过协议定义键名属性，并且使用 Runtime 给Response动态添加一个属性，来记录遵守协议后的相应类名")])]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("protocol")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// 请求成功时状态码对应的值")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" successValue"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("get")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// 状态码对应的键")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" statusCodeKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("get")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// 请求后的提示语对应的键")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" tipStrKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("get")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// 请求后的主要模型数据的键")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("get")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// MARK:- runtime")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("extension")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("private")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("AssociatedKeys")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" lxf_modelableParameterKey "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"lxf_modelableParameterKey"')])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" lxf_modelableParameter"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("get")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" value "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("objc_getAssociatedObject")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("AssociatedKeys")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("lxf_modelableParameterKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("as")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("AnyObject")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("guard")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("let")]),s._v(" type "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" value "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("as")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("else")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("NullParameter")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" type\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("set")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("objc_setAssociatedObject")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("AssociatedKeys")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("lxf_modelableParameterKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" newValue"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("OBJC_ASSOCIATION_RETAIN_NONATOMIC")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("blockquote",[t("p",[t("strong",[s._v("这里有个坑：_SwiftValue问题")]),s._v(" (献上 "),t("a",{attrs:{href:"https://stackoverflow.com/questions/42033735/failing-cast-in-swift-from-any-to-protocol/42034523#42034523",target:"_blank",rel:"noopener noreferrer"}},[s._v("参考链接"),t("OutboundLink")],1),s._v(")\n如果我们存储的不是OC对象，那么"),t("code",[s._v("objc_getAssociatedObject")]),s._v("取出来的值的类型统统为"),t("code",[s._v("_SwiftValue")]),s._v("，直接"),t("code",[s._v("as? ModelableParameterType.Type")]),s._v("绝对是nil，需要在取出来后"),t("code",[s._v("as AnyObject")]),s._v("再转换为其它类型才会成功～～")])]),s._v(" "),t("p",[s._v("现在开发者就可以创建一个类来遵守"),t("code",[s._v("ModelableParameterType")]),s._v("协议，并自定义解析键名")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("NetParameter")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" successValue"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"false"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" statusCodeKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"error"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" tipStrKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"errMsg"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"results"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h3",{attrs:{id:"_4、插件注入"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_4、插件注入"}},[s._v("#")]),s._v(" 4、插件注入")]),s._v(" "),t("p",[s._v("Q: 厉害了，不过要在什么时机下存储这个自定义键名的"),t("code",[s._v("NetParameter")]),s._v("？")]),s._v(" "),t("p",[s._v("A: 额，这个～～～ 哦，对了，可以通过Moya提供的插件机制！")]),s._v(" "),t("p",[s._v("翻出Moya中的Plugin.Swift，找到这个"),t("code",[s._v("process")]),s._v("方法，看看方法说明。")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// 在结束之前，可以被用来修改请求结果")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("/// Called to modify a result before completion.")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("process")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" result"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Result")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Moya")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaError")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" target"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("TargetType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Result")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Moya")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaError")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v("\n")])])]),t("p",[s._v("那好，我们也做一个插件"),t("code",[s._v("MoyaMapperPlugin")]),s._v("给开发者使用，在创建"),t("code",[s._v("MoyaMapperPlugin")]),s._v("时把自定义解析键名的类型传进来")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperPlugin")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("PluginType")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" parameter"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("init")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n parameter "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" type\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// modify response")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("process")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" result"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Result")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaError")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" target"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("TargetType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Result")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaError")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" result"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("map "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("response"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Response")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 趁机添加相关数据 ")]),s._v("\n response"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("lxf_modelableParameter "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" parameter\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" response\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" result\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("使用：开发者在创建"),t("code",[s._v("MoyaProvider")]),s._v("对象时，顺便注入插件。(OS: 这一步堪称“注入灵魂”)")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaProvider")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("LXFNetworkTool")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("plugins"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperPlugin")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("NetParameter")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])])]),t("h3",{attrs:{id:"_5、总结"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_5、总结"}},[s._v("#")]),s._v(" 5、总结")]),s._v(" "),t("blockquote",[t("p",[s._v("以上就是主要的踩坑过程了。模型数组解析和指定解析也跟这些差不多的，这里就不再赘述。本人已经将其封装成一个开源库 "),t("a",{attrs:{href:"https://github.com/LinXunFeng/MoyaMapper",target:"_blank",rel:"noopener noreferrer"}},[s._v("MoyaMapper"),t("OutboundLink")],1),s._v("，包含了上述已经和未曾说明的功能，下面会讲解如何去使用。以上部分可以称为开胃菜，目的就是平滑过渡到下面MoyaMapper的具体使用。")])]),s._v(" "),t("p",[s._v("可能单单使用"),t("code",[s._v("MoyaMapper")]),s._v("的默认子库"),t("code",[s._v("Core")]),s._v("，作用体会上并不会很深。但是，如果你也是使用RxSwift来开发项目的话，请安装"),t("code",[s._v("'MoyaMapper/Rx'")]),s._v("吧，绝对一个字：「爽」")]),s._v(" "),t("h2",{attrs:{id:"二、moyamapper的使用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、moyamapper的使用"}},[s._v("#")]),s._v(" 二、MoyaMapper的使用")]),s._v(" "),t("p",[t("img",{attrs:{src:"/images/2018/05/%E6%89%93%E9%80%A0Moya%E4%BE%BF%E6%8D%B7%E8%A7%A3%E6%9E%90%E5%BA%93%EF%BC%8C%E6%8F%90%E4%BE%9BRxSwift%E6%8B%93%E5%B1%95/MoyaMapper.png",alt:"MoyaMapper"}})]),s._v(" "),t("p",[s._v("MoyaMapper是基于Moya和SwiftyJSON封装的工具，以Moya的plugin的方式来实现间接解析，支持RxSwift")]),s._v(" "),t("p",[t("img",{attrs:{src:"/images/2018/05/%E6%89%93%E9%80%A0Moya%E4%BE%BF%E6%8D%B7%E8%A7%A3%E6%9E%90%E5%BA%93%EF%BC%8C%E6%8F%90%E4%BE%9BRxSwift%E6%8B%93%E5%B1%95/JSON%E6%95%B0%E6%8D%AE%E5%AF%B9%E7%85%A7.png",alt:"JSON数据对照"}})]),s._v(" "),t("h3",{attrs:{id:"_1、定义并注入自定义键名类"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、定义并注入自定义键名类"}},[s._v("#")]),s._v(" 1、定义并注入自定义键名类")]),s._v(" "),t("ol",[t("li",[s._v("定义一个遵守ModelableParameterType协议的结构体")])]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 各参数返回的内容请参考上面JSON数据对照图")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("NetParameter")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParameterType")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" successValue"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"false"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" statusCodeKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"error"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" tipStrKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"results"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[t("strong",[s._v("此外，这里还可以做简单的路径处理，以应付各种情况，以'>'隔开")])]),s._v(" "),t("div",{staticClass:"language-json extra-class"},[t("pre",{pre:!0,attrs:{class:"language-json"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 假设返回的json数据关于请求状态的相关数据如下所示，")]),s._v("\nerror"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n 'errorStatus'"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("false")]),s._v("\n 'errMsg'"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v("'error Argument type'\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n")])])]),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 我们指明解析路径：error对象下的errMsg字段，一层层表示下去即可")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("static")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" tipStrKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"error>errMsg"')])]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("ol",{attrs:{start:"2"}},[t("li",[s._v("以plugin的方式传递给MoyaProvider")])]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// MoyaMapperPlugin这里只需要传入类型")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaProvider")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("LXFNetworkTool")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("plugins"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperPlugin")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("NetParameter")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])])]),t("h3",{attrs:{id:"_2、定义解析模型"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、定义解析模型"}},[s._v("#")]),s._v(" 2、定义解析模型")]),s._v(" "),t("p",[s._v("创建一个遵守Modelable协议的结构体")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("struct")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MyModel")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("var")]),s._v(" _id "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("...")]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("mutating")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapping")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("_id "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" json"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"_id"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("stringValue\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("...")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n遵守"),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),s._v("协议，实现协议的两个方法，在`mapping`方法中描述模型字段的具体解析\n\n")])])]),t("h3",{attrs:{id:"_3、解析数据"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3、解析数据"}},[s._v("#")]),s._v(" 3、解析数据")]),s._v(" "),t("h4",{attrs:{id:"_0x00-请求结果与模型解析"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_0x00-请求结果与模型解析"}},[s._v("#")]),s._v(" 0x00 请求结果与模型解析")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Result")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapResult")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("params"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParamsBlock")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperResult")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Model")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapObject")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Result+Model")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapObjResult")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" params"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParamsBlock")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperResult")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Models")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapArray")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Result+Models")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("mapArrayResult")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Modelable")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token omit keyword"}},[s._v("_")]),s._v(" type"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("Type")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" params"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("ModelableParamsBlock")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("MoyaMapperResult")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])])]),t("p",[s._v("上面的五个方法，观其名，知其意，这里就不过多解释了，主要注意两点：")]),s._v(" "),t("ul",[t("li",[s._v("result")])]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 元祖类型")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 参数1：根据statusCodeKey取出的值与successValue是否相等")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 参数2：根据tipStrKey取出的值")]),s._v("\nresult："),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])])]),t("ul",[t("li",[s._v("params")])]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// params: ModelableParamsBlock? = nil")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 这里只有在特殊场景下才需要使用到。如：项目中需要在某处使用特定接口，但是返回的json格式跟自己项目的不一样，并且只有这么一两处用得着该额外接口，那就需要我们这个参数了，以Block的方式返回解析参数类型。")]),s._v("\n")])])]),t("h4",{attrs:{id:"_0x01、特定解析"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_0x01、特定解析"}},[s._v("#")]),s._v(" 0x01、特定解析")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Model")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("toJSON")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("modelKey"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token constant"}},[s._v("JSON")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 获取指定路径的值")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("public")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("func")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[s._v("fetchJSONString")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("path"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("?")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token nil constant"}},[s._v("nil")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" keys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("JSONSubscriptType")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("->")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v("\n")])])]),t("p",[s._v("这两个方法，如果没有指定路径，默认都是针对modelKey的")]),s._v(" "),t("div",{staticClass:"language-swift extra-class"},[t("pre",{pre:!0,attrs:{class:"language-swift"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// fetchJSONString(keys: <[JSONSubscriptType]>)")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v("、通过 keys 传递数组"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" 该数组可传入的类型为 "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Int")]),s._v(" 和 "),t("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("String")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("2")]),s._v("、默认是以 modelKey 所示路径，来获取相应的数值。如果modelKey并非是你所想要使用的解析路径，可以使用下方的重载方法重新指定路径即可\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// response.fetchJSONString(path: , keys: <[JSONSubscriptType]>)")]),s._v("\n")])])]),t("p",[t("strong",[s._v("MoyaMapper也提供了Rx子库，为方便RxSwift的流式编程下便捷解析数据")])]),s._v(" "),t("div",{staticClass:"language-ruby extra-class"},[t("pre",{pre:!0,attrs:{class:"language-ruby"}},[t("code",[s._v("MoyaMapper默认只安装Core下的文件\npod "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'MoyaMapper'")])]),s._v("\n\nRxSwift拓展\npod "),t("span",{pre:!0,attrs:{class:"token string-literal"}},[t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'MoyaMapper/Rx'")])]),s._v("\n")])])]),t("p",[s._v("具体使用还不是很明白的同学可以下载并运行"),t("code",[s._v("Example")]),s._v("看看")]),s._v(" "),t("p",[t("strong",[s._v("如果"),t("a",{attrs:{href:"https://github.com/LinXunFeng/MoyaMapper",target:"_blank",rel:"noopener noreferrer"}},[s._v("MoyaMapper"),t("OutboundLink")],1),s._v("有什么不足的地方，欢迎提出issues，感谢大家的支持")])])])}),[],!1,null,null,null);t.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/105.ca4fa7b6.js b/assets/js/105.ca4fa7b6.js new file mode 100644 index 000000000..d314997c8 --- /dev/null +++ b/assets/js/105.ca4fa7b6.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{457:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("blockquote",[s("p",[t._v("关于使用面向协议来封装功能的实战可以参考我上篇文章 "),s("RouterLink",{attrs:{to:"/2018/04/07/iOS-面向协议方式封装空白页功能/"}},[t._v("【iOS-面向协议方式封装空白页功能】")]),t._v("，这里就不再赘述，我们直接进入使用阶段吧。\n本篇文章只有一个目的，那就是只要遵守协议，一行代码随意切换全屏～")],1)]),t._v(" "),s("p",[t._v("如果对面向协议有疑问的同学可以看下我之前的两篇文章")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/pages/997f68/"}},[t._v("iOS - Swift 面向协议编程（一）")])],1),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/pages/fb0480/"}},[t._v("iOS - Swift 面向协议编程（二）")])],1),t._v(" "),s("h2",{attrs:{id:"开源库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开源库"}},[t._v("#")]),t._v(" 开源库")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Link")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("GitHub")]),t._v(" "),s("td",[s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFProtocolTool"),s("OutboundLink")],1)])]),t._v(" "),s("tr",[s("td",[t._v("Wiki")]),t._v(" "),s("td",[s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool/wiki",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wiki首页"),s("OutboundLink")],1)])]),t._v(" "),s("tr",[s("td",[t._v("本文 Demo")]),t._v(" "),s("td",[s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool/tree/master/Example/LXFProtocolTool/Demo/LXFFullScreenable",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFFullScreenable"),s("OutboundLink")],1)])])])]),t._v(" "),s("p",[t._v("使用Cocoapods的方式来安装即可")]),t._v(" "),s("div",{staticClass:"language-ruby extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ruby"}},[s("code",[t._v("pod "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'LXFProtocolTool/FullScreenable'")])]),t._v("\n")])])]),s("h2",{attrs:{id:"一、配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、配置"}},[t._v("#")]),t._v(" 一、配置")]),t._v(" "),s("p",[t._v("在AppDelegate中实现如下方法")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("application")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" application"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" supportedInterfaceOrientationsFor window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIWindow")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIInterfaceOrientationMask")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("shared"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentVcOrientationMask\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"二、使用案例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、使用案例"}},[t._v("#")]),t._v(" 二、使用案例")]),t._v(" "),s("blockquote",[s("p",[t._v("方法与属性的调用都需要命名空间加上 "),s("code",[t._v("lxf")]),t._v("，如"),s("code",[t._v("isFullScreen")]),t._v(" -> "),s("code",[t._v("lxf.isFullScreen")])])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("isFullScreen "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 获取当前遵守协议者是否为全屏状态\n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("switchFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n isEnter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n specifiedView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n superView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" isFullScreen"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Desc")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("isEnter")]),t._v(" "),s("td",[s("code",[t._v("Bool?")])]),t._v(" "),s("td",[t._v("是否进入全屏")])]),t._v(" "),s("tr",[s("td",[t._v("specifiedView")]),t._v(" "),s("td",[s("code",[t._v("UIView?")])]),t._v(" "),s("td",[t._v("指定即将全屏的视图")])]),t._v(" "),s("tr",[s("td",[t._v("superView")]),t._v(" "),s("td",[s("code",[t._v("UIView?")])]),t._v(" "),s("td",[t._v("作为退出全屏后specifiedView的父视图")])]),t._v(" "),s("tr",[s("td",[t._v("config")]),t._v(" "),s("td",[s("code",[t._v("FullScreenableConfig?")])]),t._v(" "),s("td",[t._v("配置")])]),t._v(" "),s("tr",[s("td",[t._v("completed")]),t._v(" "),s("td",[s("code",[t._v("((_ isFullScreen: Bool)->Void)?")])]),t._v(" "),s("td",[t._v("进入/退出 全屏后的回调")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("当"),s("code",[t._v("switchFullScreen")]),t._v("的调用者为"),s("code",[t._v("UIView")]),t._v("时，如果"),s("code",[t._v("specifiedView")]),t._v("为"),s("code",[t._v("nil")]),t._v("会自动填写，"),s("code",[t._v("superView")]),t._v("也是如此")])]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("switchFullScreen")]),t._v("方法不推荐直接使用，不过当遵守协议者为"),s("code",[t._v("UIViewController")]),t._v("时，可以通过使用默认参数来切换屏幕方向"),s("code",[t._v("lxf.switchFullScreen()")])])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220132.gif",alt:"lxf_FullScreenable_1"}})]),t._v(" "),s("p",[t._v("以下分两种情况说明")]),t._v(" "),s("h3",{attrs:{id:"uiviewcontroller"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uiviewcontroller"}},[t._v("#")]),t._v(" UIViewController")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("enterFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n specifiedView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableCompleteType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("exitFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n superView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableCompleteType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("以上两个方法是对"),s("code",[t._v("switchFullScreen")]),t._v("的抽离，使调用时对参数的传递更加清晰")])]),t._v(" "),s("p",[t._v("1、遵守协议 "),s("code",[t._v("FullScreenable")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFullScreenableController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("2、指定视图进入全屏")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enterFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("specifiedView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cyanView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3、指定视图退出全屏，并添加到当前控制器的"),s("code",[t._v("view")]),t._v("上")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exitFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("superView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"🔥自动进入-退出全屏"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#🔥自动进入-退出全屏"}},[t._v("#")]),t._v(" 🔥自动进入|退出全屏")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("autoFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n specifiedView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n superView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n")])])]),s("ul",[s("li",[t._v("控制器可以调用该方法来注册自动进入或退出全屏，各控制器之间互不影响。")]),t._v(" "),s("li",[s("code",[t._v("view")]),t._v("手动进入全屏会屏蔽当前控制器的自动全屏功能，退出方可恢复")])]),t._v(" "),s("h3",{attrs:{id:"uiview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uiview"}},[t._v("#")]),t._v(" UIView")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("enterFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n specifiedView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableCompleteType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("exitFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n superView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableCompleteType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("以上两个方法是对"),s("code",[t._v("switchFullScreen")]),t._v("的抽离，使调用时对参数的传递更加清晰")])]),t._v(" "),s("p",[t._v("1、遵守协议 "),s("code",[t._v("FullScreenable")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFullScreenView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" cyanView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFullScreenView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("2、进入全屏")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("cyanView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enterFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3、退出全屏")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("cyanView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exitFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("这里是对遵守了"),s("code",[t._v("FullScreenable")]),t._v("协议的视图进入全屏切换，由于代码内部已经经过自动视图填写，所以\b直接调用相应的方法即可，当然也可以自己指定"),s("code",[t._v("specifiedView")]),t._v("和"),s("code",[t._v("superView")])])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220150.gif",alt:"lxf_FullScreenable_2"}})]),t._v(" "),s("h2",{attrs:{id:"三、fullscreenableconfig说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、fullscreenableconfig说明"}},[t._v("#")]),t._v(" 三、FullScreenableConfig说明")]),t._v(" "),s("blockquote",[s("p",[t._v("上述的方法都有一个"),s("code",[t._v("config")]),t._v("参数，默认为nil，即为默认配置")])]),t._v(" "),s("p",[t._v("相关属性说明")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Desc")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("animateDuration")]),t._v(" "),s("td",[s("code",[t._v("Double")])]),t._v(" "),s("td",[t._v("进入/退出 全屏时的旋转动画时间")]),t._v(" "),s("td",[t._v("0.25")])]),t._v(" "),s("tr",[s("td",[t._v("enterFullScreenOrientation")]),t._v(" "),s("td",[s("code",[t._v("UIInterfaceOrientation")])]),t._v(" "),s("td",[t._v("进入全屏时的初始方向")]),t._v(" "),s("td",[t._v("landscapeRight")])])])]),t._v(" "),s("p",[t._v("这里我们把动画时间设置为"),s("code",[t._v("1s")]),t._v("，初始方向为"),s("code",[t._v("左")]),t._v("后来看看效果")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FullScreenableConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n animateDuration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n enterFullScreenOrientation "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("landscapeLeft\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("cyanView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("enterFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" diyConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ncyanView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exitFullScreen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" diyConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220202.gif",alt:"lxf_FullScreenable_3"}})]),t._v(" "),s("h2",{attrs:{id:"结语"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结语"}},[t._v("#")]),t._v(" 结语")]),t._v(" "),s("p",[t._v("到这里相关的说明已罗列完毕，有什么不清楚的可以下载"),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool/tree/master/Example/LXFProtocolTool/Demo/LXFFullScreenable",target:"_blank",rel:"noopener noreferrer"}},[t._v("Demo"),s("OutboundLink")],1),t._v("看看，或者在文章下方留言提问")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFProtocolTool"),s("OutboundLink")],1),t._v(" 主要是通过协议的方式来方便快捷地实现一些的实用功能，除了本文提及的全屏旋转功能外还有其它实用功能的封装，具体内容可以到 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool/wiki",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wiki首页"),s("OutboundLink")],1),t._v(" 查找。如果你有什么想实现的功能也可以提出来，喜欢的就给个Star鼓励下我吧 🚀 🚀 🚀，感谢支持！")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/106.8c051068.js b/assets/js/106.8c051068.js new file mode 100644 index 000000000..683851022 --- /dev/null +++ b/assets/js/106.8c051068.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{455:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("blockquote",[s("p",[t._v("在日常开发中常常会对设备进行一定的适配，为了方便在多个项目里统一管理和使用，所以封装并开源了"),s("code",[t._v("SwiftyFitsize")]),t._v("这个库，可用于适配视图及字体大小，同时也支持 xib 和 storyboard")])]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/SwiftyFitsize",target:"_blank",rel:"noopener noreferrer"}},[t._v("SwiftyFitsize"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("最终的效果如下图所示")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220254.png",alt:"效果图"}})]),t._v(" "),s("h2",{attrs:{id:"安装"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装"}},[t._v("#")]),t._v(" 安装")]),t._v(" "),s("p",[t._v("使用Cocoapods安装，或手动拖入项目")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("pod 'SwiftyFitsize'\n")])])]),s("h2",{attrs:{id:"使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用"}},[t._v("#")]),t._v(" 使用")]),t._v(" "),s("p",[s("code",[t._v("SwiftyFitsize")]),t._v("在默认状况下所使用的参照宽度为"),s("code",[t._v("iphone6")]),t._v("的"),s("code",[t._v("375")]),t._v("\n如果设计图所选用设备的宽度与默认值不同，可以在"),s("code",[t._v("AppDelegate")]),t._v("下初始化所参照的宽度")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwiftyFitsize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reference")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("414")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("下面列出一些设备对应的分辨率，方便查找")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("设备")]),t._v(" "),s("th",[t._v("逻辑分辨率(point)")]),t._v(" "),s("th",[t._v("设备分辨率(pixel)")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("SE")]),t._v(" "),s("td",[t._v("320x568")]),t._v(" "),s("td",[t._v("640x1136")])]),t._v(" "),s("tr",[s("td",[t._v("6(S)／7／8")]),t._v(" "),s("td",[t._v("375x667")]),t._v(" "),s("td",[t._v("750x1334")])]),t._v(" "),s("tr",[s("td",[t._v("6(S)+／7+／8+")]),t._v(" "),s("td",[t._v("414x736")]),t._v(" "),s("td",[t._v("1080x1920")])]),t._v(" "),s("tr",[s("td",[t._v("X(S)")]),t._v(" "),s("td",[t._v("375x812")]),t._v(" "),s("td",[t._v("1125x2436")])]),t._v(" "),s("tr",[s("td",[t._v("XR")]),t._v(" "),s("td",[t._v("414x896")]),t._v(" "),s("td",[t._v("828x1792")])]),t._v(" "),s("tr",[s("td",[t._v("XS Max")]),t._v(" "),s("td",[t._v("414x896")]),t._v(" "),s("td",[t._v("1242x2688")])])])]),t._v(" "),s("p",[t._v("使用也是非常方便的，只需要在"),s("code",[t._v("Number")]),t._v("、"),s("code",[t._v("UIFont")]),t._v("、"),s("code",[t._v("CGPoint")]),t._v("、"),s("code",[t._v("CGSize")]),t._v("、"),s("code",[t._v("UIEdgeInsetsMake")]),t._v("这些类型的值后面加上"),s("code",[t._v("~")]),t._v("即可")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIFont")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("systemFont")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ofSize"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("14")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGPoint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGSize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGRect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIEdgeInsetsMake")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n")])])]),s("h5",{attrs:{id:"xib-storyboard-字体适配"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#xib-storyboard-字体适配"}},[t._v("#")]),t._v(" xib / storyboard 字体适配")]),t._v(" "),s("p",[t._v("支持控件 "),s("code",[t._v("UILabel")]),t._v(" "),s("code",[t._v("UIButton")]),t._v(" "),s("code",[t._v("UITextView")]),t._v(" "),s("code",[t._v("UITextField")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/SwiftyFitsize/raw/master/Screenshots/xib-font.png",alt:"xib-font"}})]),t._v(" "),s("h5",{attrs:{id:"xib-storyboard-约束适配"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#xib-storyboard-约束适配"}},[t._v("#")]),t._v(" xib / storyboard 约束适配")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://github.com/LinXunFeng/SwiftyFitsize/raw/master/Screenshots/xib-constraint.png",alt:"xib-font"}})]),t._v(" "),s("h5",{attrs:{id:""}},[s("a",{staticClass:"header-anchor",attrs:{href:"#"}},[t._v("#")])]),t._v(" "),s("p",[t._v("注："),s("code",[t._v("~")]),t._v("请不要相互嵌套使用，如")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGPoint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/107.22e9b792.js b/assets/js/107.22e9b792.js new file mode 100644 index 000000000..dfa1e43f2 --- /dev/null +++ b/assets/js/107.22e9b792.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{458:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("ul",[s("li",[s("code",[t._v("Moya")]),t._v(" 在Swift开发中起着重要的网络交互作用，但是还有不如之处，比如网络不可用时，返回的 "),s("code",[t._v("Response")]),t._v(" 为 "),s("code",[t._v("nil")]),t._v("，这时还得去解析相应的 "),s("code",[t._v("Error")])]),t._v(" "),s("li",[s("code",[t._v("Codable")]),t._v(" 可以帮助我们快速的解析数据，但是一旦声明的属性类型与json中的不一致，将无法正常解析; 而且对于模型中自定义属性名的处理也十分繁琐")])]),t._v(" "),s("p",[t._v("解决的方案有很多，不过我比较习惯使用 "),s("code",[t._v("MoyaMapper")]),t._v(" ，不仅可以解决上述问题，还提供了多种"),s("code",[t._v("模型转换")]),t._v("、"),s("code",[t._v("数据互转")]),t._v("、"),s("code",[t._v("多种数据类型任意存储")]),t._v("的便捷方法。掌控Moya的网络请求、数据解析与缓存简直易如反掌。")]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("MoyaMapper")]),t._v("是基于Moya和SwiftyJSON封装的工具，以Moya的plugin的方式来实现间接解析，支持RxSwift")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/MoyaMapper/MoyaMapper",target:"_blank",rel:"noopener noreferrer"}},[t._v("MoyaMapper"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("📖 详细的使用请查看手册 "),s("a",{attrs:{href:"https://moyamapper.github.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://MoyaMapper.github.io"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"特点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特点"}},[t._v("#")]),t._v(" 特点")]),t._v(" "),s("ul",[s("li",[t._v("支持"),s("code",[t._v("json")]),t._v(" 转 "),s("code",[t._v("Model")]),t._v(" 自动映射 与 自定义映射")]),t._v(" "),s("li",[t._v("无视 "),s("code",[t._v("json")]),t._v(" 中值的类型，"),s("code",[t._v("Model")]),t._v(" 中属性声明的是什么类型，它就是什么类型")]),t._v(" "),s("li",[t._v("支持 "),s("code",[t._v("Data")]),t._v(" "),s("code",[t._v("字典")]),t._v(" "),s("code",[t._v("JSON")]),t._v(" "),s("code",[t._v("json字符串")]),t._v(" "),s("code",[t._v("Model")]),t._v(" 互转")]),t._v(" "),s("li",[t._v("插件方式，全方位保障"),s("code",[t._v("Moya.Response")]),t._v("，拒绝各种网络问题导致 "),s("code",[t._v("Response")]),t._v(" 为 "),s("code",[t._v("nil")]),t._v("，将各式各样的原因导致的数据加载失败进行统一处理，开发者只需要关注 "),s("code",[t._v("Response")])]),t._v(" "),s("li",[t._v("可选 - 支持数据随意缓存( "),s("code",[t._v("JSON")]),t._v(" 、 "),s("code",[t._v("Number")]),t._v(" 、"),s("code",[t._v("String")]),t._v("、 "),s("code",[t._v("Bool")]),t._v("、 "),s("code",[t._v("Moya.Response")]),t._v(" )")]),t._v(" "),s("li",[t._v("可选 - 支持网络请求缓存")])]),t._v(" "),s("h2",{attrs:{id:"数据解析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据解析"}},[t._v("#")]),t._v(" 数据解析")]),t._v(" "),s("h5",{attrs:{id:"一、插件注入"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、插件注入"}},[t._v("#")]),t._v(" 一、插件注入")]),t._v(" "),s("p",[t._v("附："),s("a",{attrs:{href:"https://moyamapper.github.io/plugin/",target:"_blank",rel:"noopener noreferrer"}},[t._v("插件 MoyaMapperPlugin 的详细使用"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220403.png",alt:""}})]),t._v(" "),s("p",[t._v("1、定义适用于项目接口的 "),s("code",[t._v("ModelableParameterType")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// statusCodeKey、tipStrKey、 modelKey 可以任意指定级别的路径，如： "error>used"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NetParameter")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelableParameterType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" successValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"000"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" statusCodeKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"retStatus"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" tipStrKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"retMsg"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" modelKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"retBody"')])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("2、在 "),s("code",[t._v("MoyaProvider")]),t._v(" 中使用 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" 插件，并指定 "),s("code",[t._v("ModelableParameterType")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" lxfNetTool "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MoyaProvider")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFNetworkTool")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("plugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MoyaMapperPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NetParameter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("❗ 使用 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" 插件是整个 "),s("code",[t._v("MoyaMapper")]),t._v(" 的核心所在！")]),t._v(" "),s("h5",{attrs:{id:"二、model声明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、model声明"}},[t._v("#")]),t._v(" 二、Model声明")]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("Model")]),t._v(" 需遵守 "),s("code",[t._v("Modelable")]),t._v(" 协议")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("MoyaMapper")]),t._v(" 支持模型自动映射 和 自定义映射")]),t._v(" "),s("li",[t._v("不需要考虑源json数据的真实类型，这里统一按 "),s("code",[t._v("Model")]),t._v(" 中属性声明的类型进行转换")])])]),t._v(" "),s("p",[t._v("1、一般情况下如下写法即可")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompanyModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Modelable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" catchPhrase "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("2、如果自定义映射，则可以实现方法 "),s("code",[t._v("mutating func mapping(_ json: JSON)")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompanyModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Modelable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" catchPhrase "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mutating")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("mapping")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"nickname"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("stringValue\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("3、支持模型嵌套")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UserModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Modelable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" company "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompanyModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompanyModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h5",{attrs:{id:"三、response-解析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、response-解析"}},[t._v("#")]),t._v(" 三、Response 解析")]),t._v(" "),s("blockquote",[s("p",[t._v("1、以下示例皆使用了 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" ，所以不需要指定 "),s("code",[t._v("解析路径")])]),t._v(" "),s("p",[t._v("2、如果没有使用 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" 则需要指定 "),s("code",[t._v("解析路径")]),t._v("，否则无法正常解析")]),t._v(" "),s("p",[t._v("ps: "),s("code",[t._v("解析路径")]),t._v(" 可以使用 "),s("code",[t._v("a>b")]),t._v(" 这种形式来解决多级路径的问题")])]),t._v(" "),s("p",[t._v("解析方法如下列表所示")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"center"}},[t._v("方法")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("描述 (支持RxSwift)")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("toJSON")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response 转 JSON ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/toJSON/",target:"_blank",rel:"noopener noreferrer"}},[t._v("toJSON"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/toJSON/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.toJSON"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("fetchString")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("获取指定路径的字符串( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/fetchString/",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetchString"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/fetchString/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.fetchString"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("fetchJSONString")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("获取指定路径的原始json字符串 ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/fetchJSONString/",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetchJSONString"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/fetchJSONString/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.fetchJSONString"),s("OutboundLink")],1),t._v(" )")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("mapResult")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response -> MoyaMapperResult "),s("code",[t._v("(Bool, String)")]),t._v(" ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapResult"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/mapResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.mapResult"),s("OutboundLink")],1),t._v(" )")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("mapObject")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response -> Model ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapObject/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapObject"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/mapObject/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.mapObject"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("mapObjResult")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response -> (MoyaMapperResult, Model) ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapObjResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapObjResult"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/mapObjResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.mapObjResult"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("mapArray")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response -> [Model] ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapArray/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapArray"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/mapArray/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.mapArray"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"center"}},[t._v("mapArrayResult")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("Response -> (MoyaMapperResult, [Model]) ( "),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapArrayResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapArrayResult"),s("OutboundLink")],1),t._v(" "),s("a",{attrs:{href:"https://moyamapper.github.io/rx/mapArrayResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("rx.mapArrayResult"),s("OutboundLink")],1),t._v(")")])])])]),t._v(" "),s("p",[t._v("❗除了 "),s("code",[t._v("fetchJSONString")]),t._v(" 的默认解析路径是"),s("code",[t._v("根路径")]),t._v("之外，其它方法的默认解析路径为插件对象中的 "),s("code",[t._v("modelKey")])]),t._v(" "),s("p",[t._v("如果接口请求后 "),s("code",[t._v("json")]),t._v(" 的数据结构与下图类似，则使用 "),s("code",[t._v("MoyaMapper")]),t._v(" 是最合适不过了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220403.png",alt:""}})]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normal")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"github -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("github")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchJSONString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rx")]),t._v("\nrxRequest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"github -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("github")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("附： "),s("a",{attrs:{href:"https://moyamapper.github.io/core/fetchJSONString/",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetchJSONString的详细使用"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220434.png",alt:""}})]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normal")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" models "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"count -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印 json 模型数组中第一个的name")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rx")]),t._v("\nrxRequest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" models "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"count -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("附："),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapArray/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapArray的详细使用说明"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220444.png",alt:""}})]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normal")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tipStr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isSuccess -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("isSuccess")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tipStr -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("tipStr")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rx")]),t._v("\nrxRequest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tipStr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isSuccess -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("isSuccess")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 是否为 "000"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"retMsg -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("retMsg")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "缺少必要参数"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("附："),s("a",{attrs:{href:"https://moyamapper.github.io/core/mapResult/",target:"_blank",rel:"noopener noreferrer"}},[t._v("mapResult的详细使用说明"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"统一处理网络请求结果"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#统一处理网络请求结果"}},[t._v("#")]),t._v(" 统一处理网络请求结果")]),t._v(" "),s("blockquote",[s("p",[t._v("在APP的实际使用过程中，会遇到各种各样的网络请求结果，如:服务器挂了、手机无网络，此时 "),s("code",[t._v("Moya")]),t._v(" 返回的 "),s("code",[t._v("Response")]),t._v(" 为 nil，这样我们就不得不去判断 "),s("code",[t._v("Error")]),t._v("。但是使用 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" 就可以让我们只关注 "),s("code",[t._v("Response")])])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MoyaMapperPlugin 的初始化方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelableParameterType")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n transformError"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\ntype "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelableParameterType")]),t._v(" 用于定义字段路径，做为全局解析数据的依据\ntransformError "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v(" 是否当网络请求失败时，自动转换请求结果，默认为 "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("ul",[s("li",[t._v("当请求失败的时候，此时的 "),s("code",[t._v("result.response")]),t._v(" 为 "),s("code",[t._v("nil")]),t._v("，根据"),s("code",[t._v("transformError")]),t._v("是否为"),s("code",[t._v("true")]),t._v(" 判断是否创建一个自定义的 "),s("code",[t._v("response")]),t._v(" 并返回出去。")])]),t._v(" "),s("p",[t._v("➡ 本来可以请求到的数据内容")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220403.png",alt:""}})]),t._v(" "),s("p",[t._v("➡ 现在关闭网络，再请求数据")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("正常情况下，即不做任何不处理的时候， "),s("code",[t._v("Response")]),t._v(" 为 "),s("code",[t._v("nil")])])]),t._v(" "),s("li",[s("p",[t._v("经过 "),s("code",[t._v("MoyaMapperPlugin")]),t._v(" 处理的后可得到转换后的 "),s("code",[t._v("Response")]),t._v(" ，如图")])])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220506.png",alt:""}})]),t._v(" "),s("p",[t._v("这里将请求失败进行了统一处理，无论是服务器还是自身网络的问题，"),s("code",[t._v("retStatus")]),t._v(" 都为 MMStatusCode.loadFail，但是 errorDescription 会保持原来的样子并赋值给 "),s("code",[t._v("retMsg")]),t._v("。")]),t._v(" "),s("blockquote",[s("ul",[s("li",[s("code",[t._v("retStatus")]),t._v(" 值会从枚举 "),s("code",[t._v("MMStatusCode")]),t._v(" 中取 "),s("code",[t._v("loadFail.rawValue")]),t._v(" ，即 "),s("code",[t._v("700")])]),t._v(" "),s("li",[t._v("取 类型为 "),s("code",[t._v("ModelableParameterType")]),t._v(" 的 "),s("code",[t._v("type")]),t._v(" 中 "),s("code",[t._v("statusCodeKey")]),t._v(" 所指定的值 为键名，"),s("code",[t._v("retMsg")]),t._v("也同理")])])]),t._v(" "),s("p",[t._v("ps: 这个时候可以通过判断 "),s("code",[t._v("retStatus")]),t._v(" 或 "),s("code",[t._v("response.statusCode")]),t._v(" 是否与 "),s("code",[t._v("MMStatusCode.loadFail.rawValue")]),t._v(" 相同来判断是否显示加载失败的空白页占位图")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMStatusCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Int")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" cache "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("230")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" loadFail "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("700")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("枚举 "),s("code",[t._v("MMStatusCode")]),t._v(" 中除了 "),s("code",[t._v("loadFail")]),t._v(" ，还有 "),s("code",[t._v("cache")]),t._v("，我们已经知道 "),s("code",[t._v("loadFail")]),t._v(" 在数据加载失败的时候会出现，那 "),s("code",[t._v("cache")]),t._v(" 是在什么时候出来呢？不急，看下一节就知道了。")]),t._v(" "),s("h2",{attrs:{id:"数据缓存"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据缓存"}},[t._v("#")]),t._v(" 数据缓存")]),t._v(" "),s("h5",{attrs:{id:"一、基本使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、基本使用"}},[t._v("#")]),t._v(" 一、基本使用")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("// 缓存\n@discardableResult\nMMCache.shared.cache`XXX`(value : XXX, key: String, cacheContainer: MMCache.CacheContainer = .RAM) -> Bool\n// 取舍\nMMCache.shared.fetch`XXX`Cache(key: String, cacheContainer: MMCache.CacheContainer = .RAM)\n")])])]),s("p",[t._v("缓存成功会返回一个 "),s("code",[t._v("Bool")]),t._v(" 值，这里可不接收")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("XXX 所支持类型")]),t._v(" "),s("th")])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("Bool")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("Float")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("Double")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("String")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("JSON")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("Modelable")]),t._v(" "),s("td",[t._v("[Modelable]")])]),t._v(" "),s("tr",[s("td",[t._v("Moya.Response")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("Int")]),t._v(" "),s("td",[t._v("UInt")])]),t._v(" "),s("tr",[s("td",[t._v("Int8")]),t._v(" "),s("td",[t._v("UInt8")])]),t._v(" "),s("tr",[s("td",[t._v("Int16")]),t._v(" "),s("td",[t._v("UInt16")])]),t._v(" "),s("tr",[s("td",[t._v("Int32")]),t._v(" "),s("td",[t._v("UInt32")])]),t._v(" "),s("tr",[s("td",[t._v("Int64")]),t._v(" "),s("td",[t._v("UInt64")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("其中，除了 "),s("code",[t._v("Moya.Response")]),t._v(" 之外，其它类型皆是通过 "),s("code",[t._v("JSON")]),t._v(" 来实现缓存")])]),t._v(" "),s("p",[t._v("所以，如果你想清除这些类型的缓存，只需要调用如下方法即可")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@discardableResult")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("removeJSONCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cacheContainer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheContainer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RAM")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@discardableResult")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("removeAllJSONCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cacheContainer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheContainer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RAM")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v("\n")])])]),s("p",[t._v("清除 "),s("code",[t._v("Moya.Response")]),t._v(" 则使用如下两个方法")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@discardableResult")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("removeResponseCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@discardableResult")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("removeAllResponseCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v("\n")])])]),s("p",[t._v("再来看看MMCache.CacheContainer")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheContainer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RAM")]),t._v(" \t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只缓存于内存的容器")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" hybrid "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 缓存于内存与磁盘的容器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("这两种容器互不相通，即 即使key相同，使用 "),s("code",[t._v("hybrid")]),t._v(" 来缓存后，再通过 "),s("code",[t._v("RAM")]),t._v(" 取值是取不到的。")])]),t._v(" "),s("ul",[s("li",[t._v("RAM : 仅缓存于内存之中，缓存的数据在APP使用期间一直存在")]),t._v(" "),s("li",[t._v("hybrid ：缓存于内存与磁盘中，APP重启后也可以获取到数据")])]),t._v(" "),s("h5",{attrs:{id:"二、缓存网络请求"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、缓存网络请求"}},[t._v("#")]),t._v(" 二、缓存网络请求")]),t._v(" "),s("p",[t._v("内部缓存过程：")]),t._v(" "),s("ol",[s("li",[t._v("APP首次启动并进行网络请求，网络数据将缓存起来")]),t._v(" "),s("li",[t._v("APP再次启动并进行网络请求时，会先返回缓存的数据，等请求成功后再返回网络数据")]),t._v(" "),s("li",[t._v("其它情况只会加载网络数据")]),t._v(" "),s("li",[t._v("每次成功请求到数据后，都会对缓存的数据进行更新")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normal")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("cacheRequest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n cacheType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n callbackQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DispatchQueue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n progress"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Moya")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ProgressBlock")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n completion"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@escaping")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Moya")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Completion")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cancellable")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("cacheRequest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Base")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n callbackQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DispatchQueue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n cacheType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MMCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheKeyType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Observable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Response")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("实际上是对 "),s("code",[t._v("Moya")]),t._v(" 请求后的 "),s("code",[t._v("Response")]),t._v(" 进行缓存。 其实与 "),s("code",[t._v("Moya")]),t._v(" 自带的方法相比较只多了一个参数 "),s("code",[t._v("cacheType: MMCache.CacheKeyType")]),t._v(" ，定义着缓存中的 "),s("code",[t._v("key")]),t._v(" ，默认为 "),s("code",[t._v("default")])])]),t._v(" "),s("p",[t._v("下面是 "),s("code",[t._v("MMCache.CacheKeyType")]),t._v(" 的定义")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('/**\n let cacheKey = [method]baseURL/path\n \n - default : cacheKey + "?" + parameters\n - base : cacheKey\n - custom : cacheKey + "?" + customKey\n */\npublic enum CacheKeyType {\n case `default`\n case base\n case custom(String)\n}\n')])])]),s("blockquote",[s("p",[t._v("如果你想缓存"),s("code",[t._v("多页")]),t._v("列表数据的"),s("code",[t._v("最新一页")]),t._v("数据，此时使用 "),s("code",[t._v("default")]),t._v(" 是不合适的，因为 "),s("code",[t._v("default")]),t._v(" 使用的 "),s("code",[t._v("key")]),t._v(" 包含了 "),s("code",[t._v("pageIndex")]),t._v("，这样就达不到只缓存 "),s("code",[t._v("最新一页数据")]),t._v(" 的目的， 所以这里应该使用 "),s("code",[t._v("base")]),t._v(" 或者 "),s("code",[t._v("custom(String)")])])]),t._v(" "),s("p",[t._v("我们可以来试一下带缓存的请求")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n * APP第一次启动并进行网络请求，网络数据将缓存起来\n * APP再次启动并进行网络请求时，会先加载缓存，再加载网络数据\n * 其它情况只会加载网络数据\n * 每次成功请求到数据都会进行数据更新\n */")]),t._v("\nlxfNetTool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cacheRequest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("all"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onNext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" response "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debug")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"statusCode -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("\\(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("statusCode")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传统方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/*\nlet _ = lxfNetTool.cacheRequest(.data(type: .all, size: 10, index: 1)) { result in\n guard let resp = result.value else { return }\n log.debug("statusCode -- \\(resp.statusCode)")\n}\n*/')]),t._v("\n")])])]),s("p",[t._v("打印结果")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("// 首次使用APP\nstatusCode -- 200\n\n// 关闭并重新打开APP，再请求一下\nstatusCode -- 230\nstatusCode -- 200\n\n// 然后再请求一下\nstatusCode -- 200\n")])])]),s("p",[t._v("这里的 "),s("code",[t._v("230")]),t._v(" 就是 "),s("code",[t._v("MMStatusCode.cache.rawValue")])]),t._v(" "),s("h2",{attrs:{id:"cocoapods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cocoapods"}},[t._v("#")]),t._v(" CocoaPods")]),t._v(" "),s("ul",[s("li",[t._v("默认安装")])]),t._v(" "),s("p",[t._v("MoyaMapper默认只安装Core下的文件")]),t._v(" "),s("div",{staticClass:"language-ruby extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ruby"}},[s("code",[t._v("pod "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MoyaMapper'")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("RxSwift拓展")])]),t._v(" "),s("div",{staticClass:"language-ruby extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ruby"}},[s("code",[t._v("pod "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MoyaMapper/Rx'")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("缓存拓展")])]),t._v(" "),s("div",{staticClass:"language-ruby extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ruby"}},[s("code",[t._v("pod "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MoyaMapper/MMCache'")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("Rx缓存")])]),t._v(" "),s("div",{staticClass:"language-ruby extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ruby"}},[s("code",[t._v("pod "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MoyaMapper/RxCache'")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/108.e6886aa2.js b/assets/js/108.e6886aa2.js new file mode 100644 index 000000000..62ae409a3 --- /dev/null +++ b/assets/js/108.e6886aa2.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{459:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("p",[t._v("相信使用 "),s("code",[t._v("ReactorKit")]),t._v(" + "),s("code",[t._v("RxDataSources")]),t._v(" 的同学都有遇到列表会多次刷新的问题吧，本篇将提出我的解决方案，相互学习交流")]),t._v(" "),s("h2",{attrs:{id:"一、常规使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、常规使用"}},[t._v("#")]),t._v(" 一、常规使用")]),t._v(" "),s("p",[s("code",[t._v("Reactor")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mutation")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setSections")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("View")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("reactor.state.map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$0")]),t._v(".sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n .bind"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("to: tableView.rx.items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dataSource: dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("))")]),t._v("\n .disposed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by: disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("由于在 "),s("code",[t._v("ReactorKit")]),t._v(" 中，"),s("code",[t._v("View")]),t._v(" 对状态的订阅都是针对 "),s("code",[t._v("State")]),t._v(" 来说的，而非 "),s("code",[t._v("State")]),t._v(" 中的属性，所以只要 "),s("code",[t._v("State")]),t._v(" 的值发生改变，"),s("code",[t._v("View")]),t._v(" 中所有对 "),s("code",[t._v("State")]),t._v(" 的订阅回调都会被调用，从而使视图进行更新。")]),t._v(" "),s("p",[t._v("但是一个属性的变化，理应只需要更新对应的视图即可，要达到这一效果，就需要使用 "),s("code",[t._v("distinctUntilChanged")]),t._v(" 这个方法，对于 "),s("code",[t._v("State")]),t._v(" 中遵守了 "),s("code",[t._v("Equatable")]),t._v(" 协议的属性，直接加上 "),s("code",[t._v(".distinctUntilChanged()")]),t._v(" 即可")]),t._v(" "),s("p",[t._v("但是看我们定义的 "),s("code",[t._v("Section")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RxDataSources")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSectionItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SectionModelType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("original"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSectionItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" original "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSectionItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" items\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSectionItem")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("item")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFCellReactor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("需要自己给 "),s("code",[t._v("LXFSection")]),t._v(" 遵守 "),s("code",[t._v("Equatable")]),t._v(" 并实现协议方法，或者是在 "),s("code",[t._v("distinctUntilChanged")]),t._v(" 回调中自己做判断 ，但都太麻烦了～")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("reactor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("distinctUntilChanged")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sectionArr1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sectionArr2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" 判断 sectionArr1 和 sectionArr2 是否相等\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("to"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("items")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("那有没有其它办法呢？答案当然是有的")]),t._v(" "),s("h2",{attrs:{id:"二、优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、优化"}},[t._v("#")]),t._v(" 二、优化")]),t._v(" "),s("p",[t._v("创建一个名为 "),s("code",[t._v("SwiftyTraceableValue")]),t._v(" 的结构体，定义如下：")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwiftyTraceableValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" tracker"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Int")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("内部属性说明：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("属性")]),t._v(" "),s("th",[t._v("作用")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("tracker")]),t._v(" "),s("td",[t._v("用于判断是否数据是否有发生变化")])]),t._v(" "),s("tr",[s("td",[t._v("value")]),t._v(" "),s("td",[t._v("存储原来的值")])])])]),t._v(" "),s("p",[t._v("调整 "),s("code",[t._v("Mutation")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mutation")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setSections")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TraceableValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("调整 "),s("code",[t._v("State")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TraceableValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("调整 "),s("code",[t._v("Sections")]),t._v(" 数据的处理")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" oldTracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("??")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" oldSections "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("??")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nitems "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" oldSections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("items "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("??")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" items\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" finalSections "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("items"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sections "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TraceableValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tracker"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" oldTracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" finalSections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" setSections "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Observable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("just")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mutation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setSections")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sections"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("调整 "),s("code",[t._v("View")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("reactor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("distinctUntilChanged "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("to"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("items")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("至此，按如上的内容进行调整便可以解决列表多次刷新的问题，但是这改动也忒大了，而且还要自己管理 "),s("code",[t._v("tracker")]),t._v(" 的值，这怎么能忍？")]),t._v(" "),s("p",[t._v("那有什么办法可以让我们不再手动管理 "),s("code",[t._v("tracker")]),t._v(" 呢？🤔")]),t._v(" "),s("p",[t._v("这里我们可以使用 "),s("code",[t._v("Swift")]),t._v(" 的 "),s("code",[t._v("Property Wrapper")]),t._v("😏")]),t._v(" "),s("h2",{attrs:{id:"三、改进"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、改进"}},[t._v("#")]),t._v(" 三、改进")]),t._v(" "),s("p",[t._v("我们将 "),s("code",[t._v("SwiftyTraceableValue")]),t._v(" 使用 "),s("code",[t._v("Property Wrapper")]),t._v(" 进行封装")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@propertyWrapper")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwiftyTraceableValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" tracker"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Int")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" projectedValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwiftyTraceableValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrappedValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("set")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newValue\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("wrappedValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrappedValue\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这样，每次被赋值时即可自动为 "),s("code",[t._v("tracker")]),t._v(" 加 "),s("code",[t._v("1")]),t._v("。这里 "),s("code",[t._v("projectedValue")]),t._v(" 我们返回真实类型 "),s("code",[t._v("SwiftyTraceableValue")]),t._v(" ，以便后续使用。")]),t._v(" "),s("p",[t._v("这里简单提一下属性包装器的使用，更加具体详细的内容可以看我另一篇文章《"),s("RouterLink",{attrs:{to:"/pages/b0e486/"}},[t._v("Swift - PropertyWrapper")]),t._v("》")],1),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 @SwiftyTraceableValue 对属性进行修饰")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@SwiftyTraceableValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 wrappedValue 的值")]),t._v("\nsections\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 projectedValue 的值")]),t._v("\n$sections\n")])])]),s("p",[t._v("不仅如此，我们还为 "),s("code",[t._v("SwiftyTraceableValue")]),t._v(" 专门扩展 "),s("code",[t._v("ObservableType")]),t._v("，将进行比较内容部分封装起来")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObservableType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("mapDistinctUntilTraceableValueChanged")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" transform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@escaping")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Element")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throws")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwiftyTraceableValue")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Observable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("transform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("distinctUntilChanged "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tracker "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("map "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("大功造成，接下来看看如何使用吧")]),t._v(" "),s("h2",{attrs:{id:"四、使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、使用"}},[t._v("#")]),t._v(" 四、使用")]),t._v(" "),s("blockquote",[s("p",[t._v("以下内容是基于第一部分进行调整的，大家可以忘掉第二部分的修改了")])]),t._v(" "),s("p",[t._v("最终我们只需要调整两处地方即可解决列表多次刷新的问题！")]),t._v(" "),s("p",[s("code",[t._v("Reactor")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@SwiftyTraceableValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFSection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("View")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[t._v("reactor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mapDistinctUntilTraceableValueChanged "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token short-argument"}},[t._v("$0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$sections "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("to"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tableView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("items")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dataSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("disposed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("by"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" disposeBag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("现在，我将它做成了开源库，方便大家使用，好用的话请 "),s("code",[t._v("Star")]),t._v(" 吧 😃")]),t._v(" "),s("p",[t._v("GitHub:\n"),s("a",{attrs:{href:"https://github.com/LinXunFeng/SwiftyTraceableValue",target:"_blank",rel:"noopener noreferrer"}},[t._v("SwiftyTraceableValue"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/109.8781cedc.js b/assets/js/109.8781cedc.js new file mode 100644 index 000000000..2fdee8278 --- /dev/null +++ b/assets/js/109.8781cedc.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{460:function(s,t,a){"use strict";a.r(t);var e=a(14),r=Object(e.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h2",{attrs:{id:"安装openssh"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#安装openssh"}},[s._v("#")]),s._v(" 安装OpenSSH")]),s._v(" "),t("p",[s._v("本文内容的前提是设备已越狱！")]),s._v(" "),t("blockquote",[t("p",[t("code",[s._v("Secure Shell（SSH）")]),s._v(" 是建立在应用层基础上的安全协议，用于计算机之间的加密登录，可以在不安全的网络中为网络服务提供安全的传输环境")])]),s._v(" "),t("p",[s._v("在 "),t("code",[s._v("Cydia")]),s._v(" 搜索 "),t("code",[s._v("OpenSSH")]),s._v(" ，找到后安装即可")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181715108.jpg",alt:"OpenSSH"}})]),s._v(" "),t("h2",{attrs:{id:"账号"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#账号"}},[s._v("#")]),s._v(" 账号")]),s._v(" "),t("blockquote",[t("p",[t("code",[s._v("root")]),s._v("：最高权限账号，"),t("code",[s._v("$HOME")]),s._v(" 为 "),t("code",[s._v("/var/root")])])]),s._v(" "),t("ul",[t("li",[s._v("账号："),t("code",[s._v("root")])]),s._v(" "),t("li",[s._v("密码："),t("code",[s._v("alpine")])])]),s._v(" "),t("p",[s._v("修改登录密码")]),s._v(" "),t("ol",[t("li",[s._v("登录 "),t("code",[s._v("root")]),s._v(" 账号")]),s._v(" "),t("li",[s._v("修改 "),t("code",[s._v("root")]),s._v(" 账号的密码，终端输入："),t("code",[s._v("passwd")])])]),s._v(" "),t("h2",{attrs:{id:"远程登录"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#远程登录"}},[s._v("#")]),s._v(" 远程登录")]),s._v(" "),t("h3",{attrs:{id:"方式一-账号密码"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#方式一-账号密码"}},[s._v("#")]),s._v(" 方式一：账号密码")]),s._v(" "),t("p",[s._v('前往iOS设备的 "设置" -> "Wi-Fi" 页面，找到当前已经连接的网络，查看其 '),t("code",[s._v("IP")]),s._v(" 地址")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181717429.png",alt:"IP地址"}})]),s._v(" "),t("p",[s._v("如上图显示的 "),t("code",[s._v("IP")]),s._v(" 地址为 "),t("code",[s._v("192.168.10.104")]),s._v("，则在终端内输入：")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("ssh")]),s._v(" root@192.168.10.104\n")])])]),t("p",[s._v("输入密码："),t("code",[s._v("alpine")])]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181718774.png",alt:"ssh"}})]),s._v(" "),t("h3",{attrs:{id:"方式二-免密码登录"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#方式二-免密码登录"}},[s._v("#")]),s._v(" 方式二：免密码登录")]),s._v(" "),t("p",[s._v("相较于方式一，不用每次连接 "),t("code",[s._v("SSH")]),s._v(" 时都提示输入密码")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("角色")]),s._v(" "),t("th",[s._v("设备")]),s._v(" "),t("th",[s._v("文件")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("客户端")]),s._v(" "),t("td",[t("code",[s._v("Mac")])]),s._v(" "),t("td",[s._v("公钥 "),t("code",[s._v("~/.ssh/id_rsa.pub")]),t("br"),s._v("私钥 "),t("code",[s._v("~/.ssh/id_rsa")])])]),s._v(" "),t("tr",[t("td",[s._v("服务器端")]),s._v(" "),t("td",[t("code",[s._v("iPhone")])]),s._v(" "),t("td",[s._v("授权文件 "),t("code",[s._v("~/.ssh/authorized_keys")])])])])]),s._v(" "),t("h4",{attrs:{id:"_1、生成秘钥对"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、生成秘钥对"}},[s._v("#")]),s._v(" 1、生成秘钥对")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("ssh-keygen "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-t")]),s._v(" rsa\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# OpenSSH默认生成的是RSA密钥，-t 参数是指定密钥类型")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 所以上面的命令可以省略 -t 参数：ssh-keygen")]),s._v("\n")])])]),t("h4",{attrs:{id:"_2、将公钥上传至-ios-设备"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、将公钥上传至-ios-设备"}},[s._v("#")]),s._v(" 2、将公钥上传至 "),t("code",[s._v("iOS")]),s._v(" 设备")]),s._v(" "),t("p",[s._v("方式一：自动（推荐）")]),s._v(" "),t("p",[s._v("执行如下命令，输入密码即可")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("ssh-copy-id root@192.168.10.104\n")])])]),t("p",[s._v("方式二：手动")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 该方式会直接覆盖 authorized_keys 文件")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("scp")]),s._v(" ~/.ssh/id_rsa.pub root@192.168.10.104:/var/root/.ssh/authorized_keys\n")])])]),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181719876.png",alt:"scp id_rsa.pub"}})]),s._v(" "),t("p",[s._v("鉴于会将 "),t("code",[s._v("authorized_keys")]),s._v(" 文件覆盖，所以最好还是先将 "),t("code",[s._v("id_rsa.pub")]),s._v(" 上传到设备后再追加到 "),t("code",[s._v("authorized_keys")])]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 上传公钥至 root 的家目录")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("scp")]),s._v(" ~/.ssh/id_rsa.pub root@192.168.10.104:~\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 登录 iOS 设备")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("ssh")]),s._v(" root@192.168.10.104\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 向 authorized_keys 追加内容")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("cat")]),s._v(" ~/id_rsa.pub "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">>")]),s._v(" ~/.ssh/authorized_keys\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 移除上传的公钥")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("rm")]),s._v(" ~/id_rsa.pub\n")])])]),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181719941.png",alt:"authorized_keys追加内容"}})]),s._v(" "),t("p",[s._v("现在再次进行登录，便无须输入密码即可直接登录成功了")]),s._v(" "),t("h4",{attrs:{id:"_3、注意事项"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3、注意事项"}},[s._v("#")]),s._v(" 3、注意事项")]),s._v(" "),t("p",[s._v("如果 "),t("code",[s._v("iOS")]),s._v(" 设备上不存在 "),t("code",[s._v("/var/root/.ssh")]),s._v(" 目录，会报如下错误")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("scp: /var/root/.ssh/authorized_keys: No such "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("file")]),s._v(" or directory\n")])])]),t("p",[s._v("需要先登录设备创建该目录")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("xunfengteki-iPad:~ root"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# cd /var/root/")]),s._v("\nxunfengteki-iPad:~ root"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# mkdir .ssh")]),s._v("\n")])])]),t("p",[s._v("如果在经过配置后还是要求输入密码，那可能是文件的权限不足，需要登录到 "),t("code",[s._v("iOS")]),s._v(" 设备后，按如下命令对这些文件或目录进行权限调整即可")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("chmod")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("755")]),s._v(" ~\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 设置 .ssh 目录权限")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("chmod")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("755")]),s._v(" ~/.ssh\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 设置 authorized_keys 权限")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("chmod")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("644")]),s._v(" ~/.ssh/authorized_keys\n")])])]),t("h2",{attrs:{id:"usb连接设备"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usb连接设备"}},[s._v("#")]),s._v(" USB连接设备")]),s._v(" "),t("blockquote",[t("p",[s._v("前面所提及的都是通过 "),t("code",[s._v("Wi-Fi")]),s._v(" 方式连接设备，这种方式会有个很大的弊端，那就是当网络不通畅时会卡顿，为了保证传输速度，可以通过 "),t("code",[s._v("USB")]),s._v(" 连接的方式解决这个问题")])]),s._v(" "),t("h3",{attrs:{id:"_1、安装-usbmuxd"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、安装-usbmuxd"}},[s._v("#")]),s._v(" 1、安装 "),t("code",[s._v("usbmuxd")])]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("brew "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("install")]),s._v(" usbmuxd\n")])])]),t("h3",{attrs:{id:"_2、端口映射"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、端口映射"}},[s._v("#")]),s._v(" 2、端口映射")]),s._v(" "),t("p",[s._v("本地端口 "),t("code",[s._v("2222")]),s._v(" 映射 远程端口 "),t("code",[s._v("22")])]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("iproxy "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("2222")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("22")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("设备UDID"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n")])])]),t("p",[s._v("如果有多台 "),t("code",[s._v("iOS")]),s._v(" 设备连接到同一台 "),t("code",[s._v("Mac")]),s._v(" 上，则需要在命令后面加上设备的 "),t("code",[s._v("UDID")]),s._v("，如果只有一台时，则可省略")]),s._v(" "),t("h3",{attrs:{id:"_3、连接设备"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3、连接设备"}},[s._v("#")]),s._v(" 3、连接设备")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("ssh")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-p")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("2222")]),s._v(" root@127.0.0.1\n")])])]),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181720044.png",alt:"USB连接"}})]),s._v(" "),t("h2",{attrs:{id:"封装常用命令"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#封装常用命令"}},[s._v("#")]),s._v(" 封装常用命令")]),s._v(" "),t("blockquote",[t("p",[s._v("Shuttle: 简易的终端命令快捷菜单，官网："),t("a",{attrs:{href:"http://fitztrev.github.io/shuttle/",target:"_blank",rel:"noopener noreferrer"}},[s._v("http://fitztrev.github.io/shuttle/"),t("OutboundLink")],1)])]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"iOS"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"USB连接iPhone"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cmd"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"iproxy 2222 22"')]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"inTerminal"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"new"')]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"name"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"1.USB映射SSH端口"')]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"cmd"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"ssh root@localhost -p 2222"')]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"inTerminal"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"new"')]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"name"')]),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"2.连接iPhone"')]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n")])])]),t("p",[s._v("效果：")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181721122.jpg",alt:"shuttle"}})]),s._v(" "),t("p",[s._v("现在只需要按顺序点击 "),t("code",[s._v("iOS")]),s._v(" -> "),t("code",[s._v("USB连接iPhone")]),s._v(" 下的 "),t("code",[s._v("1.USB映射SSH端口")]),s._v(" 和 "),t("code",[s._v("2.连接iPhone")]),s._v("，即可快速使用 "),t("code",[s._v("usb")]),s._v(" 连接我们的 "),t("code",[s._v("iOS")]),s._v(" 设备，提升效率。")]),s._v(" "),t("h2",{attrs:{id:"中文问题"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#中文问题"}},[s._v("#")]),s._v(" 中文问题")]),s._v(" "),t("p",[t("code",[s._v("iOS")]),s._v(" 的终端在默认情况下是不支持中文的输入和显示，当你输入中文时会自动清空当前输入的所有内容。")]),s._v(" "),t("p",[s._v("解决方案：在家目录下新建 "),t("code",[s._v(".inputrc")]),s._v(" 文件")]),s._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v("touch ~/.inputrc\n")])])]),t("p",[s._v("文件内容：")]),s._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v("# 不将中文字符转化为转文序列\nset convert-meta off\n\n# 允许向终端输出中文\nset output-meta on\n\n# 允许向终端输入中文\nset meta-flag on\nset input-meta on\n")])])]),t("p",[s._v("如果想要 "),t("code",[s._v("iOS")]),s._v(" 设备的终端上编辑文件内容，需要在 "),t("code",[s._v("Cydia")]),s._v(" 搜索 "),t("code",[s._v("Vi IMproved")]),s._v(" 并安装")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181724254.jpg",alt:""}})]),s._v(" "),t("p",[s._v("安装完成后，在终端输入：")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("vi")]),s._v(" ~/.inputrc\n")])])]),t("p",[s._v("按 "),t("code",[s._v("i")]),s._v(" 切换到输入模式，将上述文件内容粘贴进去，按 "),t("code",[s._v("Esc")]),s._v(" 切换到末行模式，输入 "),t("code",[s._v(":wq")]),s._v(" 回车保存退出。")]),s._v(" "),t("p",[s._v("现在中文是可以输入了，但是显示还是有问题的，比如我创建了一个 "),t("code",[s._v("测试.txt")]),s._v("，显示的是 "),t("code",[s._v("\\346\\265\\213\\350\\257\\225.txt")])]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181725878.png",alt:""}})]),s._v(" "),t("p",[s._v("解决方案：通过 "),t("code",[s._v("Cydia")]),s._v(" 搜索 "),t("code",[s._v("Locale Profiles in UTF-8")]),s._v(" 并安装即可（软件源 "),t("code",[s._v("BigBoss")]),s._v("："),t("code",[s._v("http://apt.thebigboss.org/repofiles/cydia/")]),s._v("）")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181725723.jpg",alt:""}})]),s._v(" "),t("p",[s._v("这时退出 "),t("code",[s._v("iOS")]),s._v(" 终端，还重新进入即可解决！")]),s._v(" "),t("p",[s._v("点击详情页底部的 "),t("code",[s._v("文件系统内容")])]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181726035.jpg",alt:""}})]),s._v(" "),t("p",[s._v("可以看到该插件帮我们在 "),t("code",[s._v("/usr/share/locale")]),s._v(" 目录下安装了中文语言包，并在 "),t("code",[s._v("/etc/profile.d/")]),s._v(" 目录下创建了 "),t("code",[s._v("localeutf8.sh")]),s._v(" 文件，设置当前语言为 "),t("code",[s._v("en_US.UTF-8")])]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112181727214.png",alt:""}})]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("xunfengtekiiPhone:~ root"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# cat /etc/profile.d/localeutf8.sh")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t("span",{pre:!0,attrs:{class:"token environment constant"}},[s._v("LANG")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"en_US.UTF-8"')]),s._v("\n")])])])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/11.ffe2eaf9.js b/assets/js/11.ffe2eaf9.js new file mode 100644 index 000000000..3607ec573 --- /dev/null +++ b/assets/js/11.ffe2eaf9.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{364:function(t,n,s){"use strict";s.r(n);var e=s(14),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/110.613e113e.js b/assets/js/110.613e113e.js new file mode 100644 index 000000000..a6a172343 --- /dev/null +++ b/assets/js/110.613e113e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{461:function(t,a,e){"use strict";e.r(a);var s=e(14),_=Object(s.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("p",[a("code",[t._v("Mach-O")]),t._v(" 是 "),a("code",[t._v("iOS/macOS")]),t._v(" 系统上应用程序的文件格式，了解 "),a("code",[t._v("Mach-O")]),t._v(" 文件的格式，有利于我们后续对应用进行静态分析和动态调试。")]),t._v(" "),a("h2",{attrs:{id:"分析-mach-o-文件的工具"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#分析-mach-o-文件的工具"}},[t._v("#")]),t._v(" 分析 "),a("code",[t._v("Mach-O")]),t._v(" 文件的工具")]),t._v(" "),a("h3",{attrs:{id:"otool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#otool"}},[t._v("#")]),t._v(" "),a("code",[t._v("otool")])]),t._v(" "),a("p",[t._v("此为命令行的方式，具体参数可以使用 "),a("code",[t._v("man")]),t._v(" 进行查看")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("man")]),t._v(" otool\n")])])]),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n"),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-h")]),t._v(" Display the Mach header.\n"),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-l")]),t._v(" Display the load commands.\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),a("p",[t._v("其中 "),a("code",[t._v("-h")]),t._v(" 可查看 "),a("code",[t._v("Header")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("otool "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-h")]),t._v(" Mach-O文件\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261628505.png",alt:"otool -h"}})]),t._v(" "),a("p",[a("code",[t._v("-l")]),t._v(" 可查看 "),a("code",[t._v("load commands")]),t._v("，打印的内容太多就不展示了，有兴趣的可以自己打印看看")]),t._v(" "),a("h3",{attrs:{id:"machoview"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#machoview"}},[t._v("#")]),t._v(" "),a("code",[t._v("MachOView")])]),t._v(" "),a("p",[t._v("免费开源的 "),a("code",[t._v("Mach-O")]),t._v(" 文件分析工具")]),t._v(" "),a("ul",[a("li",[t._v("GitHub链接："),a("a",{attrs:{href:"https://github.com/gdbinit/MachOView",target:"_blank",rel:"noopener noreferrer"}},[t._v("gdbinit/MachOView"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("蓝奏云链接："),a("a",{attrs:{href:"https://linxunfeng.lanzoul.com/iinjCxuj8te",target:"_blank",rel:"noopener noreferrer"}},[t._v("MachOView.dmg"),a("OutboundLink")],1)])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261628293.png",alt:"MachOView"}})]),t._v(" "),a("h3",{attrs:{id:"_010-editor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_010-editor"}},[t._v("#")]),t._v(" "),a("code",[t._v("010 Editor")])]),t._v(" "),a("ul",[a("li",[t._v("官网链接： "),a("a",{attrs:{href:"https://www.sweetscape.com/download/010editor/",target:"_blank",rel:"noopener noreferrer"}},[t._v("010 Editor"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("MachO模板："),a("a",{attrs:{href:"https://github.com/strazzere/010Editor-stuff/blob/master/Templates/MachOTemplate.bt",target:"_blank",rel:"noopener noreferrer"}},[t._v("MachOTemplate.bt"),a("OutboundLink")],1)])]),t._v(" "),a("p",[a("code",[t._v("010 Editor")]),t._v(" 的模板功能很强大，收费产品，不过要分析 "),a("code",[t._v("ARM64")]),t._v(" 架构的 "),a("code",[t._v("Mach-O")]),t._v(" 程序，需要借助第三方模板。")]),t._v(" "),a("p",[t._v("菜单依次选择："),a("code",[t._v("Templates")]),t._v(" -> "),a("code",[t._v("View Installed Templates")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261629510.png",alt:"Add Template"}})]),t._v(" "),a("p",[t._v("点击 "),a("code",[t._v("Add")]),t._v(" 按钮，选择下载好的 "),a("code",[t._v("MachOTemplate.bt")]),t._v("，可以配置 "),a("code",[t._v("Name")]),t._v(" 和 "),a("code",[t._v("Category")]),t._v(" 等，然后点击 "),a("code",[t._v("OK")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261630329.png",alt:""}})]),t._v(" "),a("p",[t._v("回到程序，将 "),a("code",[t._v("Mach-O")]),t._v(" 插入到 "),a("code",[t._v("010 Editor")]),t._v("中，接着在 "),a("code",[t._v("Templates")]),t._v(" 菜单中选择刚才点击的模板")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261630148.png",alt:""}})]),t._v(" "),a("p",[t._v("分析结果如图所示\n"),a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261632164.png",alt:""}})]),t._v(" "),a("h2",{attrs:{id:"mach-o-的结构"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mach-o-的结构"}},[t._v("#")]),t._v(" "),a("code",[t._v("Mach-O")]),t._v(" 的结构")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261632280.png",alt:"mach-o-structure-official"}})]),t._v(" "),a("p",[t._v("如上图所示，"),a("code",[t._v("Mach-O")]),t._v(" 文件由三部分组成")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("部分")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("Mach-O头部（"),a("code",[t._v("Header")]),t._v("）")]),t._v(" "),a("td",[t._v("保存了 "),a("code",[t._v("CPU")]),t._v(" 架构、大小端序、文件类型、加载命令数量等一些基本信息")])]),t._v(" "),a("tr",[a("td",[t._v("加载命令（"),a("code",[t._v("Load Commands")]),t._v("）")]),t._v(" "),a("td",[t._v("指定了文件的逻辑结构与文件在虚拟内存中的布局")])]),t._v(" "),a("tr",[a("td",[t._v("数据块（"),a("code",[t._v("Data")]),t._v("）")]),t._v(" "),a("td",[a("code",[t._v("Load Commands")]),t._v(" 中定义的 "),a("code",[t._v("Segment")]),t._v(" 的原始数据")])])])]),t._v(" "),a("h3",{attrs:{id:"header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header"}},[t._v("#")]),t._v(" "),a("code",[t._v("Header")])]),t._v(" "),a("blockquote",[a("p",[a("code",[t._v("Mach-o")]),t._v(" 头部（"),a("code",[t._v("Header")]),t._v("）保存了 "),a("code",[t._v("CPU")]),t._v(" 架构、大小端序、文件类型、加载命令数量等一些基本信息，用于校验 "),a("code",[t._v("Mach-O")]),t._v(" 文件的合法性和确定文件的运行环境。")])]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("Xcode")]),t._v(" 中按快捷键 "),a("code",[t._v("⌘ + Shift + o")]),t._v(" ，输入 "),a("code",[t._v("mach-o/loader.h")]),t._v("，即可找到头部的定义")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261635231.png",alt:"mach-o/loader.h"}})]),t._v(" "),a("p",[a("code",[t._v("32")]),t._v(" 位和 "),a("code",[t._v("64")]),t._v(" 位架构的 "),a("code",[t._v("CPU")]),t._v(" 分别使用 "),a("code",[t._v("mach_header")]),t._v(" 与 "),a("code",[t._v("mach_header_64")]),t._v(" 结构体来描述 "),a("code",[t._v("Mach-O")]),t._v(" 头部，本文所述内容均以 "),a("code",[t._v("64")]),t._v(" 位为主，定义如下：")]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n * The 64-bit mach header appears at the very beginning of object files for\n * 64-bit architectures.\n */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mach_header_64")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" magic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* mach magic number identifier */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("cpu_type_t")]),t._v(" cputype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* cpu specifier */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("cpu_subtype_t")]),t._v(" cpusubtype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* machine specifier */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" filetype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* type of file */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" ncmds"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* number of load commands */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" sizeofcmds"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* the size of all the load commands */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" flags"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flags */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" reserved"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* reserved */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Constant for the magic field of the mach_header_64 (64-bit architectures) */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("define")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token macro-name"}},[t._v("MH_MAGIC_64")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token expression"}},[a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xfeedfacf")]),t._v(" ")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* the 64-bit mach magic number */")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("define")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token macro-name"}},[t._v("MH_CIGAM_64")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token expression"}},[a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xcffaedfe")]),t._v(" ")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* NXSwapInt(MH_MAGIC_64) */")])]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("magic")])]),t._v(" "),a("td",[t._v("魔数（特征字段），用于标识当前设备是大端序还是小端序。"),a("br"),t._v("由于 "),a("code",[t._v("iOS")]),t._v(" 是小端序，所以其被定义常量 "),a("code",[t._v("MH_MAGIC_64")]),t._v("，即固定取值为 "),a("code",[t._v("0xfeedfacf")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("cputype")])]),t._v(" "),a("td",[t._v("标识 "),a("code",[t._v("CPU")]),t._v(" 架构，类型为 "),a("code",[t._v("cpu_type_t")]),t._v("，其定义于 "),a("code",[t._v("mach/machine.h")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("cpusubtype")])]),t._v(" "),a("td",[t._v("标具体的 "),a("code",[t._v("CPU")]),t._v(" 架构，区分不同版本的处理器，类型为 "),a("code",[t._v("cpusubtype")]),t._v("，其定义于 "),a("code",[t._v("mach/machine.h")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("filetype")])]),t._v(" "),a("td",[a("code",[t._v("Mach-O")]),t._v(" 文件类型（如：可执行文件、库文件等），可在 "),a("code",[t._v("mach-o/loader.h")]),t._v(" 中找到具体定义和取值。"),a("br"),t._v("常见的有 "),a("code",[t._v("MH_OBJECT")]),t._v("（中间目标文件）、"),a("code",[t._v("MH_EXECUTE")]),t._v("（可执行文件）、"),a("code",[t._v("MH_DYLIB")]),t._v("（动态链接库）、"),a("code",[t._v("MH_DYLINKER")]),t._v("（动态链接器）")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("ncmds")])]),t._v(" "),a("td",[a("code",[t._v("Load Commands")]),t._v(" 的数量")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("sizeofcmds")])]),t._v(" "),a("td",[a("code",[t._v("Load Commands")]),t._v(" 所占的总字节大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("flags")])]),t._v(" "),a("td",[t._v("一些标识信息，可在 "),a("code",[t._v("mach-o/loader.h")]),t._v(" 中找到具体定义和取值。"),a("br"),t._v("其中 "),a("code",[t._v("#define MH_PIE 0x200000")]),t._v(" 值得注意，只会在文件类型为 "),a("code",[t._v("MH_EXECUTE")]),t._v(" 时使用，表明开启 "),a("code",[t._v("ASLR")]),t._v("，用来增加程序安全性。")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("reserved")])]),t._v(" "),a("td",[t._v("系统保留字段")])])])]),t._v(" "),a("p",[t._v("注： "),a("code",[t._v("ASLR")]),t._v(" ，全称 "),a("code",[t._v("Address Space Layout Randomization")]),t._v("，地址空间布局随机化，顾名思义，每次启动程序，加载的地址都会随机变化，需要对代码地址进行计算修正才可正常访问。")]),t._v(" "),a("h3",{attrs:{id:"load-commands"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load-commands"}},[t._v("#")]),t._v(" Load Commands")]),t._v(" "),a("blockquote",[a("p",[t._v("加载命令（"),a("code",[t._v("Load Commands")]),t._v("）紧跟 "),a("code",[t._v("Header")]),t._v("之后，指定了文件的逻辑结构与文件在虚拟内存中的布局，明确地告诉加载器如何处理二进制数据。有些命令由内核处理，有些由动态链接器("),a("code",[t._v("dyld")]),t._v(")处理。")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261636453.png",alt:"Load Commands"}})]),t._v(" "),a("p",[a("code",[t._v("Load Commands")]),t._v(" 可以当作是多个 "),a("code",[t._v("command")]),t._v(" 的集合，每一个 "),a("code",[t._v("command")]),t._v(" 的类型 "),a("code",[t._v("cmd")]),t._v(" 都是以 "),a("code",[t._v("LC_")]),t._v(" 为前缀的常量，如 "),a("code",[t._v("LC_SEGMENT")]),t._v("。")]),t._v(" "),a("p",[t._v("在头文件 "),a("code",[t._v("mach-o/loader.h")]),t._v(" 中可以查看每个 "),a("code",[t._v("command")]),t._v(" 的定义，每个 "),a("code",[t._v("command")]),t._v(" 都拥有自己的独立结构，但是其结构的前两个字段固定为 "),a("code",[t._v("cmd")]),t._v(" 和 "),a("code",[t._v("cmdsize")])]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("load_command")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" cmd"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* type of load command */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" cmdsize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* total size of command in bytes */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("cmd")])]),t._v(" "),a("td",[t._v("当前 "),a("code",[t._v("Load Commands")]),t._v(" 的类型，如 "),a("code",[t._v("LC_SEGMENT")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("cmdsize")])]),t._v(" "),a("td",[t._v("当前 "),a("code",[t._v("Load Commands")]),t._v(" 的大小，保证其可被正确解析")])])])]),t._v(" "),a("p",[t._v("根据不同的命令类型（"),a("code",[t._v("cmd")]),t._v("），内核会使用不同的函数进行解析。")]),t._v(" "),a("p",[t._v("下面对几个重要的命令类型进行详解。")]),t._v(" "),a("h4",{attrs:{id:"lc-segment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lc-segment"}},[t._v("#")]),t._v(" "),a("code",[t._v("LC_SEGMENT")])]),t._v(" "),a("p",[a("code",[t._v("LC_SEGMENT")]),t._v(" 和 "),a("code",[t._v("LC_SEGMENT_64")]),t._v(" 为段加载命令，每个段都定义了一个虚拟内存区域，动态链接器负责把这个区域映射到进程地址空间。其结构定义如下所示：")]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("segment_command_64")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* for 64-bit architectures */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tcmd"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* LC_SEGMENT_64 */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tcmdsize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* includes sizeof section_64 structs */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("char")]),t._v("\tsegname"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* segment name */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\tvmaddr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* memory address of this segment */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\tvmsize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* memory size of this segment */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\tfileoff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* file offset of this segment */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\tfilesize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* amount to map from the file */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("vm_prot_t")]),t._v("\tmaxprot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* maximum VM protection */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("vm_prot_t")]),t._v("\tinitprot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* initial VM protection */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tnsects"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* number of sections in segment */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tflags"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flags */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("cmd")])]),t._v(" "),a("td",[t._v("当前 "),a("code",[t._v("command")]),t._v(" 的类型")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("cmdsize")])]),t._v(" "),a("td",[t._v("当前 "),a("code",[t._v("command")]),t._v(" 的大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("segname")])]),t._v(" "),a("td",[t._v("段名称，占16个字节")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("vmaddr")])]),t._v(" "),a("td",[t._v("段的虚拟内存地址")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("vmsize")])]),t._v(" "),a("td",[t._v("段的虚拟内存大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("fileoff")])]),t._v(" "),a("td",[t._v("段在文件中的偏移量")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("filesize")])]),t._v(" "),a("td",[t._v("段在文件中的大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("maxprot")])]),t._v(" "),a("td",[t._v("段页面的最高内存保护级别")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("initprot")])]),t._v(" "),a("td",[t._v("段页面的初始内存保护级别")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("nsects")])]),t._v(" "),a("td",[t._v("段中包含节的数量。一个段可以包含0个或多个节")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("flags")])]),t._v(" "),a("td",[t._v("段的标志信息（"),a("code",[t._v("SG_HIGHVM")]),t._v("、"),a("code",[t._v("SG_FVMLIB")]),t._v("等）")])])])]),t._v(" "),a("p",[t._v("系统从 "),a("code",[t._v("fileoff")]),t._v(" 处加载大小为 "),a("code",[t._v("filesize")]),t._v(" 的内容到虚拟内存 "),a("code",[t._v("vmaddr")]),t._v(" 处，大小为 "),a("code",[t._v("vmsize")]),t._v(", 段页面的权限由 "),a("code",[t._v("initprot")]),t._v(" 进行初始化，权限可被修改，但不可超过 "),a("code",[t._v("maxprot")]),t._v(" 的值。")]),t._v(" "),a("p",[t._v("上图中的四个段作用如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("段")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("__PAGEZERO")])]),t._v(" "),a("td",[t._v("静态链接器创建了 "),a("code",[t._v("__PAGEZERO")]),t._v(" 作为可执行文件的第一个段，该段在虚拟内存中的位置和大小皆为 "),a("code",[t._v("0")]),t._v("，不能读写、不能执行，用来处理空指针。")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("__TEXT")])]),t._v(" "),a("td",[t._v("包含了可执行的代码和其他一些只读数据。静态链接器设置该段的虚拟内存权限为可读、可执行，进程被允许执行这些代码，但不能修改。")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("__DATA")])]),t._v(" "),a("td",[t._v("包含了将会被更改的数据。静态链接器设置该段的虚拟内存权限为可读写。")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("__LINKEDIT")])]),t._v(" "),a("td",[t._v("包含了动态链接库的原始数据，如符号、字符串和重定位表条目等。")])])])]),t._v(" "),a("p",[a("code",[t._v("64")]),t._v(" 位的节("),a("code",[t._v("section")]),t._v(")结构定义：")]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("section_64")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* for 64-bit architectures */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("char")]),t._v("\tsectname"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* name of this section */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("char")]),t._v("\tsegname"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* segment this section goes in */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\taddr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* memory address of this section */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint64_t")]),t._v("\tsize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* size in bytes of this section */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\toffset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* file offset of this section */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\talign"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* section alignment (power of 2) */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\treloff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* file offset of relocation entries */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tnreloc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* number of relocation entries */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\tflags"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flags (section type and attributes)*/")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\treserved1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* reserved (for offset or index) */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\treserved2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* reserved (for count or sizeof) */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\treserved3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* reserved */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("段")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("sectname")])]),t._v(" "),a("td",[t._v("节的名称，占 "),a("code",[t._v("16")]),t._v(" 个字节")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("segname")])]),t._v(" "),a("td",[t._v("节指导的段名称，占 "),a("code",[t._v("16")]),t._v(" 个字节")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("addr")])]),t._v(" "),a("td",[t._v("节在内存中的起始位置")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("size")])]),t._v(" "),a("td",[t._v("节占用的内存大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("offset")])]),t._v(" "),a("td",[t._v("节的文件偏移地址")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("align")])]),t._v(" "),a("td",[t._v("节的字节对齐大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("reloff")])]),t._v(" "),a("td",[t._v("重定位入口的文件偏移")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("nreloc")])]),t._v(" "),a("td",[t._v("需要重定位的入口数量")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("flags")])]),t._v(" "),a("td",[t._v("节的类型和属性")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("reserved1/2/3")])]),t._v(" "),a("td",[t._v("系统保留字段")])])])]),t._v(" "),a("h4",{attrs:{id:"lc-load-dylib"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lc-load-dylib"}},[t._v("#")]),t._v(" "),a("code",[t._v("LC_LOAD_DYLIB")])]),t._v(" "),a("p",[a("code",[t._v("LC_LOAD_DYLIB")]),t._v(" 指向程序依赖库的加载信息，可以使用 "),a("code",[t._v("MachOView")]),t._v(" 进行查看")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261637245.png",alt:"LC_LOAD_DYLIB"}})]),t._v(" "),a("p",[a("code",[t._v("LC_LOAD_DYLIB")]),t._v(" 的结构定义为 "),a("code",[t._v("dylib_command")])]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("dylib")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("union")]),t._v(" lc_str name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* library's path name */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" timestamp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* library's build time stamp */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" current_version"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* library's current version number */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" compatibility_version"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* library's compatibility vers number*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("dylib_command")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\t\tcmd"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* LC_ID_DYLIB, LC_LOAD_{,WEAK_}DYLIB, LC_REEXPORT_DYLIB */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v("\t\tcmdsize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* includes pathname string */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("dylib")]),t._v("\tdylib"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\t\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* the library identification */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("name")])]),t._v(" "),a("td",[t._v("依赖库的完整路径。动态链接器会使用此路径进行动态库加载")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("timestamp")])]),t._v(" "),a("td",[t._v("依赖库构建时的时间戳")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("current_version")])]),t._v(" "),a("td",[t._v("当前版本号")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("compatibility_version")])]),t._v(" "),a("td",[t._v("兼容版本号")])])])]),t._v(" "),a("p",[a("code",[t._v("LC_LOAD_WEAK_DYLIB")]),t._v(" 的结构也是 "),a("code",[t._v("dylib_command")]),t._v("，不同的是其声明的依赖库是可选的，即缺少声明的依赖库不会影响主程序的运行，而 "),a("code",[t._v("LC_LOAD_DYLIB")]),t._v(" 声明的依赖库如果找不到，加载器会放弃并结束进程。")]),t._v(" "),a("p",[t._v("可以使用 "),a("code",[t._v("otool")]),t._v(" 来查看有哪些依赖库")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("otool -arch arm64 -L LXFProtocolTool_Example\n\nLXFProtocolTool_Example:\n /System/Library/Frameworks/Accelerate.framework/Accelerate (compatibility version 1.0.0, current version 4.0.0)\n @rpath/Alamofire.framework/Alamofire (compatibility version 1.0.0, current version 1.0.0)\n /usr/lib/libobjc.A.dylib (compatibility version 1.0.0, current version 228.0.0)\n /usr/lib/swift/libswiftCoreMIDI.dylib (compatibility version 1.0.0, current version 5.0.0, weak)\n ...\n")])])]),a("p",[t._v("除了 "),a("code",[t._v("/System/Library/")]),t._v(" 和 "),a("code",[t._v("/usr/lib")]),t._v(" 这些系统路径外，还可能会遇到 "),a("code",[t._v("@rpath")]),t._v("、"),a("code",[t._v("@executable_path")]),t._v(" 之类的路径")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("路径")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("@executable_path")])]),t._v(" "),a("td",[t._v("指可执行文件的目录")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("@rpath")])]),t._v(" "),a("td",[t._v("由 "),a("code",[t._v("LC_RPATH")]),t._v(" 加载指定指定，"),a("code",[t._v("iOS")]),t._v(" 上通常为应用自身 "),a("code",[t._v("framework")]),t._v(" 文件，默认为："),a("code",[t._v("@executable_path/Framework")])])])])]),t._v(" "),a("p",[t._v("这些路径可使用 "),a("code",[t._v("MacOS")]),t._v(" 上提供的 "),a("code",[t._v("install_name_tool")]),t._v(" 工具进行修改，注意：此操作对于未越狱平台注入动态库是必须掌握的！")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 修改依赖库路径")]),t._v("\ninstall_name_tool "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-change")]),t._v(" @rpath/Alamofire.framework/Alamofire @executable_path/Alamofire.framework/Alamofire LXFProtocolTool_Example\n")])])]),a("h2",{attrs:{id:"通用二进制"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#通用二进制"}},[t._v("#")]),t._v(" 通用二进制")]),t._v(" "),a("p",[a("code",[t._v("Universal Binary")]),t._v("格式文件（通用二进制，也称胖二进制），实际上只是将不同架构的的 "),a("code",[t._v("Mach-O")]),t._v(" 文件打包到一起，再在文件起始位置处加上 "),a("code",[t._v("fat_header")]),t._v(" 结构来说明所支持的架构和偏移地址信息，其结构如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202112261638987.png",alt:""}})]),t._v(" "),a("p",[t._v("头文件 "),a("code",[t._v("mach-o/fat.h")]),t._v(" 中可查看通用二进制文件的定义：")]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("define")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token macro-name"}},[t._v("FAT_MAGIC")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token expression"}},[a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xcafebabe")])])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("define")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token macro-name"}},[t._v("FAT_CIGAM")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token expression"}},[a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xbebafeca")]),t._v(" ")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* NXSwapLong(FAT_MAGIC) */")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("fat_header")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" magic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* FAT_MAGIC or FAT_MAGIC_64 */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" nfat_arch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* number of structs that follow */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("magic")])]),t._v(" "),a("td",[t._v("魔数（特征字段），其被定义常量 "),a("code",[t._v("FAT_MAGIC")]),t._v("，即固定取值为 "),a("code",[t._v("0xcafebabe")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("nfat_arch")])]),t._v(" "),a("td",[t._v("标识 "),a("code",[t._v("Mach-O")]),t._v(" 文件包含的架构个数")])])])]),t._v(" "),a("p",[a("code",[t._v("fat_header")]),t._v(" 后紧跟 "),a("code",[t._v("fat_arch")]),t._v(" 结构，有多少架构就会有多少 "),a("code",[t._v("fat_arch")]),t._v("，用于描述对应的 "),a("code",[t._v("Mach-O")]),t._v("文件的具体信息")]),t._v(" "),a("div",{staticClass:"language-c extra-class"},[a("pre",{pre:!0,attrs:{class:"language-c"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("fat_arch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("cpu_type_t")]),t._v(" cputype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* cpu specifier (int) */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("cpu_subtype_t")]),t._v(" cpusubtype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* machine specifier (int) */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" offset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* file offset to this object file */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* size of this object file */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("uint32_t")]),t._v(" align"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* alignment as a power of 2 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("table",[a("thead",[a("tr",[a("th",[t._v("字段")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("offset")])]),t._v(" "),a("td",[t._v("指定对应架构相对于文件开头的偏移量")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("size")])]),t._v(" "),a("td",[t._v("指定对应架构数据的大小")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("align")])]),t._v(" "),a("td",[t._v("指定数据的内存对齐边界，取舍为 "),a("code",[t._v("2")]),t._v(" 的 "),a("code",[t._v("N")]),t._v(" 次方")])])])]),t._v(" "),a("p",[a("code",[t._v("cputype")]),t._v(" 和 "),a("code",[t._v("cpusubtype")]),t._v(" 在前面已经提及过，这里就不赘述了")]),t._v(" "),a("h2",{attrs:{id:"资料"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#资料"}},[t._v("#")]),t._v(" 资料")]),t._v(" "),a("ul",[a("li",[t._v("xnu源码\n"),a("ul",[a("li",[a("a",{attrs:{href:"https://github.com/apple/darwin-xnu/",target:"_blank",rel:"noopener noreferrer"}},[t._v("github"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://opensource.apple.com/tarballs/xnu/",target:"_blank",rel:"noopener noreferrer"}},[t._v("opensource.apple.com"),a("OutboundLink")],1)])])]),t._v(" "),a("li",[a("a",{attrs:{href:"https://github.com/aidansteele/osx-abi-macho-file-format-reference",target:"_blank",rel:"noopener noreferrer"}},[t._v("《OS X ABI Mach-O File Format Reference》"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);a.default=_.exports}}]); \ No newline at end of file diff --git a/assets/js/111.7fd7cfa3.js b/assets/js/111.7fd7cfa3.js new file mode 100644 index 000000000..ed5a72f20 --- /dev/null +++ b/assets/js/111.7fd7cfa3.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{462:function(a,e,t){"use strict";t.r(e);var s=t(14),r=Object(s.a)({},(function(){var a=this,e=a._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[e("blockquote",[e("p",[e("code",[a._v("iOS")]),a._v(" 端 "),e("code",[a._v("APP")]),a._v(" 在上线之前，会经过苹果商店进行 "),e("code",[a._v("FairPlayDRM")]),a._v(" 数字版本加密保护，俗称 “加壳”，如果想对应用进行分析，就必须进行 “脱壳”，从而得到未加密的二进制文件")])]),a._v(" "),e("h2",{attrs:{id:"一、检测是否加壳"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#一、检测是否加壳"}},[a._v("#")]),a._v(" 一、检测是否加壳")]),a._v(" "),e("p",[a._v("介绍两个常用的方式")]),a._v(" "),e("h3",{attrs:{id:"_1、使用-otool-检测"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用-otool-检测"}},[a._v("#")]),a._v(" 1、使用 "),e("code",[a._v("otool")]),a._v(" 检测")]),a._v(" "),e("p",[a._v("执行如下命令")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("otool "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-l")]),a._v(" Twitter "),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v("|")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[a._v("grep")]),a._v(" crypt\n")])])]),e("p",[a._v("在得到的结果中，如果 "),e("code",[a._v("cryptid")]),a._v(" 的值为 "),e("code",[a._v("1")]),a._v("，则说明已加壳，如果为 "),e("code",[a._v("0")]),a._v(" 则说明未加壳")]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191513156.png",alt:""}})]),a._v(" "),e("h3",{attrs:{id:"_2、使用-machoview-检测"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、使用-machoview-检测"}},[a._v("#")]),a._v(" 2、使用 "),e("code",[a._v("MachOView")]),a._v(" 检测")]),a._v(" "),e("p",[a._v("使用 "),e("code",[a._v("MachOView")]),a._v("打开目标文件后，展开 "),e("code",[a._v("Load Commands")]),a._v(" 找到 "),e("code",[a._v("LC_ENCRYPTION_INFO_64")]),a._v("，右侧可以看到 "),e("code",[a._v("Crypt ID")]),a._v("，同上，"),e("code",[a._v("1")]),a._v(" 为已加壳，"),e("code",[a._v("0")]),a._v(" 为未加壳")]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191513318.png",alt:""}})]),a._v(" "),e("h2",{attrs:{id:"二、脱壳"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#二、脱壳"}},[a._v("#")]),a._v(" 二、脱壳")]),a._v(" "),e("p",[a._v("以下罗列常用的脱壳工具，推荐度从上到下依次递减")]),a._v(" "),e("h3",{attrs:{id:"_1、crackerxi"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、crackerxi"}},[a._v("#")]),a._v(" 1、"),e("code",[a._v("CrackerXI")])]),a._v(" "),e("blockquote",[e("p",[e("code",[a._v("CrackerXI")]),a._v(" 的安装和使用都较为简单，是目前为止最为傻瓜式的脱壳工具")])]),a._v(" "),e("p",[a._v("在 "),e("code",[a._v("Cydia")]),a._v(" 中添加源地址 "),e("code",[a._v("http://cydia.iphonecake.com/")]),a._v("，添加完成后搜索 "),e("code",[a._v("CrackerXI")]),a._v("，找到后安装即可。")]),a._v(" "),e("p",[a._v("在进行脱壳前，需要进入 "),e("code",[a._v("Settings")]),a._v(" 页面进行配置，配置如下图所示")]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191513574.png",alt:""}})]),a._v(" "),e("p",[a._v("切回 "),e("code",[a._v("AppList")]),a._v(" 页面，点击需要脱壳的 "),e("code",[a._v("App")]),a._v("，在弹出的对话框中选择 "),e("code",[a._v("YES，Full IPA")]),a._v(" 即可。")]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191514703.png",alt:""}})]),a._v(" "),e("h3",{attrs:{id:"_2、clutch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、clutch"}},[a._v("#")]),a._v(" 2、"),e("code",[a._v("Clutch")])]),a._v(" "),e("p",[a._v("https://github.com/KJCracks/Clutch")]),a._v(" "),e("p",[a._v("在 "),e("code",[a._v("Release")]),a._v(" 页面找到最新版本的可执行文件，下载后改名为 "),e("code",[a._v("Clutch")]),a._v("，执行下方命令，将 "),e("code",[a._v("Cluth")]),a._v(" 文件复制到 "),e("code",[a._v("iOS")]),a._v(" 设备的 "),e("code",[a._v("/usr/bin")]),a._v(" 目录下")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[a._v("scp")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-P")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("2222")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-r")]),a._v(" ./Clutch root@localhost:/usr/bin/\n")])])]),e("p",[a._v("登录到 "),e("code",[a._v("iOS")]),a._v(" 设备，给 "),e("code",[a._v("Cluth")]),a._v(" 文件添加执行权限")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("lxf-iPad:~ root"),e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# chmod +x /usr/bin/Clutch")]),a._v("\n")])])]),e("p",[a._v("至于怎么通过端口 "),e("code",[a._v("2222")]),a._v(" 就可以从 "),e("code",[a._v("Mac")]),a._v(" 上传输给 "),e("code",[a._v("iOS")]),a._v(" 设备，以及如何登录到 "),e("code",[a._v("iOS")]),a._v(" 设备，请查看本人的另一篇文章："),e("a",{attrs:{href:"https://juejin.cn/post/7042980829999398920",target:"_blank",rel:"noopener noreferrer"}},[a._v("Mac远程登录到iOS设备"),e("OutboundLink")],1)]),a._v(" "),e("p",[a._v("执行 "),e("code",[a._v("Clutch")]),a._v(" 可查看帮助信息")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("lxf-iPad:~ root"),e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# Clutch")]),a._v("\nUsage: Clutch "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("[")]),a._v("OPTIONS"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("]")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-b")]),a._v(" --binary-dump "),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v("<")]),a._v("value"),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v(">")]),a._v(" Only dump binary files from specified bundleID\n"),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-d")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("--dump")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v("<")]),a._v("value"),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v(">")]),a._v(" Dump specified bundleID into .ipa "),e("span",{pre:!0,attrs:{class:"token function"}},[a._v("file")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-i")]),a._v(" --print-installed Print installed applications\n "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("--clean")]),a._v(" Clean /var/tmp/clutch directory\n "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("--version")]),a._v(" Display version and "),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[a._v("exit")]),a._v("\n-? "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("--help")]),a._v(" Display this "),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[a._v("help")]),a._v(" and "),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[a._v("exit")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-n")]),a._v(" --no-color Print with colors disabled\n")])])]),e("p",[e("code",[a._v("-i")]),a._v(" 参数可以打印从 "),e("code",[a._v("AppStore")]),a._v(" 上下载安装的 "),e("code",[a._v("App")])]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("lxf-iPad:~ root"),e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# Clutch -i")]),a._v("\nInstalled apps:\n"),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("1")]),a._v(": Twitter "),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v("<")]),a._v("com.atebits.Tweetie"),e("span",{pre:!0,attrs:{class:"token operator"}},[e("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[a._v("2")]),a._v(">")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("..")]),a._v(".\n")])])]),e("p",[e("code",[a._v("-d")]),a._v(" 参数可以进行脱壳，这里以 "),e("code",[a._v("Twitter")]),a._v(" 为例")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("Clutch "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-d")]),a._v(" com.atebits.Tweetie2\n")])])]),e("p",[a._v("脱壳后的 "),e("code",[a._v("ipa")]),a._v(" 文件会存放至 "),e("code",[a._v("/private/var/mobile/Documents/Dumped/")]),a._v(" 目录下")]),a._v(" "),e("h3",{attrs:{id:"_3、dumpdecrypted"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3、dumpdecrypted"}},[a._v("#")]),a._v(" 3、"),e("code",[a._v("dumpdecrypted")])]),a._v(" "),e("p",[a._v("https://github.com/stefanesser/dumpdecrypted")]),a._v(" "),e("p",[a._v("下载源码，在 "),e("code",[a._v("dumpdecrypted")]),a._v(" 目录下执行 "),e("code",[a._v("make")]),a._v(" 命令编译生成 "),e("code",[a._v("dumpdecrypted.dylib")])]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# 进入 dumpdecrypted 目录")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[a._v("cd")]),a._v(" xxx/dumpdecrypted\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# 进行编译")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[a._v("make")]),a._v("\n")])])]),e("p",[a._v("编译完成后，目录下就有了 "),e("code",[a._v("dumpdecrypted.dylib")]),a._v(" 文件")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[a._v(".")]),a._v("\n├── Makefile\n├── README\n├── dumpdecrypted.c\n├── dumpdecrypted.dylib\n└── dumpdecrypted.o\n")])])]),e("p",[a._v("将 "),e("code",[a._v("dumpdecrypted.dylib")]),a._v(" 文件复制 "),e("code",[a._v("iOS")]),a._v(" 设备")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[a._v("scp")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-P")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("2222")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-r")]),a._v(" ./dumpdecrypted.dylib root@localhost:/usr/bin/\n")])])]),e("p",[a._v("使用 "),e("code",[a._v("ps")]),a._v(" 命令查看目标文件的完整路径")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("lxf-iPad:~ root"),e("span",{pre:!0,attrs:{class:"token comment"}},[a._v("# ps -ax | grep Twitter")]),a._v("\n"),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("15153")]),a._v(" ?? "),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("0")]),a._v(":00.00 /var/containers/Bundle/Application/3A7C3480-C30B-40D7-A0A4-6C313E42B793/Twitter.app/Twitter\n"),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("15161")]),a._v(" ttys000 "),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("0")]),a._v(":00.02 "),e("span",{pre:!0,attrs:{class:"token function"}},[a._v("grep")]),a._v(" Twitter\n")])])]),e("p",[a._v("使用 "),e("code",[a._v("DYLD_INSERT_LIBRARIES")]),a._v(" 环境变量将 "),e("code",[a._v("dumpdecrypted.dylib")]),a._v(" 注入就可以脱壳。")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token assign-left variable"}},[a._v("DYLD_INSERT_LIBRARIES")]),e("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v("dumpdecrypted.dylib /var/containers/Bundle/Application/3A7C3480-C30B-40D7-A0A4-6C313E42B793/Twitter.app/Twitter\n")])])]),e("p",[a._v("执行完成后会在将脱壳后的文件存放到当前目录下")]),a._v(" "),e("h3",{attrs:{id:"_4、frida-ios-dump"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_4、frida-ios-dump"}},[a._v("#")]),a._v(" 4、frida-ios-dump")]),a._v(" "),e("p",[e("a",{attrs:{href:"https://github.com/AloneMonkey/frida-ios-dump",target:"_blank",rel:"noopener noreferrer"}},[a._v("https://github.com/AloneMonkey/frida-ios-dump"),e("OutboundLink")],1)]),a._v(" "),e("p",[a._v("下载源码后，安装其 "),e("code",[a._v("python")]),a._v(" 脚本所需依赖包")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("pip "),e("span",{pre:!0,attrs:{class:"token function"}},[a._v("install")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-r")]),a._v(" requirements.tx\n")])])]),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191514736.png",alt:""}})]),a._v(" "),e("p",[e("code",[a._v("-h")]),a._v(" 参数查看帮助")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("python dump.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-h")]),a._v("\n")])])]),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191514875.png",alt:""}})]),a._v(" "),e("p",[e("code",[a._v("-l")]),a._v(" 参数查看本机已应用 "),e("code",[a._v("App")])]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("./dump.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-l")]),a._v("\n")])])]),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191514754.png",alt:""}})]),a._v(" "),e("h2",{attrs:{id:"三、取出脱壳文件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#三、取出脱壳文件"}},[a._v("#")]),a._v(" 三、取出脱壳文件")]),a._v(" "),e("h3",{attrs:{id:"_1、爱思助手"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、爱思助手"}},[a._v("#")]),a._v(" 1、爱思助手")]),a._v(" "),e("p",[a._v("以 "),e("code",[a._v("CrackerXI")]),a._v(" 为例，按此路径便可找到脱壳后的文件")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[a._v("/private/var/mobile/Documents/CrackerXI/\n")])])]),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191514617.png",alt:""}})]),a._v(" "),e("p",[a._v("找到后选中目的文件，点击左上角的 "),e("code",[a._v("导出")]),a._v(" 按钮，或者右击文件，在弹出的菜单中选中 "),e("code",[a._v("导出")]),a._v(" 按钮即可。")]),a._v(" "),e("h3",{attrs:{id:"_2、scp"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、scp"}},[a._v("#")]),a._v(" 2、SCP")]),a._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[a._v("scp")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-P")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[a._v("2222")]),a._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[a._v("-r")]),a._v(" root@localhost:/private/var/mobile/Documents/CrackerXI/Twitter_8.61_LXF.ipa ./\n")])])]),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191515748.png",alt:""}})]),a._v(" "),e("h2",{attrs:{id:"四、验证"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#四、验证"}},[a._v("#")]),a._v(" 四、验证")]),a._v(" "),e("p",[a._v("正如文章开头所说的，使用 "),e("code",[a._v("otool")]),a._v(" 或 "),e("code",[a._v("MachOView")]),a._v(" 查看 "),e("code",[a._v("cryptid")]),a._v(" 的值，为 "),e("code",[a._v("0")]),a._v(" 即为脱壳成功。")]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191515813.png",alt:""}})]),a._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202202191515142.png",alt:""}})])])}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/112.bb1a4000.js b/assets/js/112.bb1a4000.js new file mode 100644 index 000000000..8ec9336c8 --- /dev/null +++ b/assets/js/112.bb1a4000.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{464:function(s,a,t){"use strict";t.r(a);var e=t(14),r=Object(e.a)({},(function(){var s=this,a=s._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h2",{attrs:{id:"概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[s._v("#")]),s._v(" 概述")]),s._v(" "),a("p",[s._v("众所周知，"),a("code",[s._v("OC")]),s._v(" 是一门面向对象的动态编程语言，在程序运行时才会确定对象的真实类型，并调用类和对象的相应方法。所以在 "),a("code",[s._v("iOS")]),s._v(" 逆向领域便出现了一些工具，利用 "),a("code",[s._v("Runtime")]),s._v(" 帮助我们开发者在程序运行时去动态修改类和对象中的属性和方法。")]),s._v(" "),a("h2",{attrs:{id:"class-dump"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#class-dump"}},[s._v("#")]),s._v(" "),a("code",[s._v("class-dump")])]),s._v(" "),a("p",[a("code",[s._v("class-dump")]),s._v(" 是一个命令行工具，可对存储在 "),a("code",[s._v("Mach-O")]),s._v(" 文件中的 "),a("code",[s._v("OC")]),s._v(" "),a("code",[s._v("Runtime")]),s._v(" 信息进行检测，生成类、分类和协议的属性和方法的声明，即 "),a("code",[s._v(".h")]),s._v(" 头文件。")]),s._v(" "),a("h3",{attrs:{id:"_1、下载安装"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、下载安装"}},[s._v("#")]),s._v(" 1、下载安装")]),s._v(" "),a("p",[s._v("官网下载链接：")]),s._v(" "),a("ul",[a("li",[a("p",[a("a",{attrs:{href:"http://stevenygard.com/projects/class-dump/",target:"_blank",rel:"noopener noreferrer"}},[s._v("http://stevenygard.com/projects/class-dump"),a("OutboundLink")],1)])]),s._v(" "),a("li",[a("p",[a("a",{attrs:{href:"https://github.com/nygard/class-dump",target:"_blank",rel:"noopener noreferrer"}},[s._v("https://github.com/nygard/class-dump"),a("OutboundLink")],1)])])]),s._v(" "),a("p",[s._v("下载后解压，将 "),a("code",[s._v("class-dump")]),s._v(" 拖到 "),a("code",[s._v("/usr/local/bin")]),s._v(" 目录下即可在终端内使用")]),s._v(" "),a("p",[s._v("官网下载的 "),a("code",[s._v("class-dump")]),s._v(" 由于很久没有维护了，不支持 "),a("code",[s._v("Swift")]),s._v(" 和 "),a("code",[s._v("OC")]),s._v(" 混编的二进制文件，会报如下错误")]),s._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[s._v("class-dump"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("36848")]),s._v(":11809395"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v(" Error: Cannot "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("find")]),s._v(" offset "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("for")]),s._v(" address 0x800000001001586 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" stringAtAddress:\n")])])]),a("p",[s._v("所以推荐从 "),a("a",{attrs:{href:"https://github.com/AloneMonkey/MonkeyDev/blob/master/bin/class-dump",target:"_blank",rel:"noopener noreferrer"}},[s._v("https://github.com/AloneMonkey/MonkeyDev/blob/master/bin/class-dump"),a("OutboundLink")],1),s._v(" 下载 "),a("code",[s._v("class-dump")])]),s._v(" "),a("p",[s._v("下载后拖到 "),a("code",[s._v("/usr/local/bin")]),s._v(" 目录下，再赋予执行权限方可在终端内使用")]),s._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[s._v("chmod")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("755")]),s._v(" /usr/local/bin/class-dump\n")])])]),a("h3",{attrs:{id:"_2、使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、使用"}},[s._v("#")]),s._v(" 2、使用")]),s._v(" "),a("p",[s._v("使用参数说明：")]),s._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[s._v("class-dump "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("3.5")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("64")]),s._v(" bit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\nUsage: class-dump "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("mach-o-file"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v("\n\n where options are:\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-a")]),s._v(" show instance variable offsets\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-A")]),s._v(" show implementation addresses\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("--arch")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("arch"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" choose a specific architecture from a universal binary "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("ppc, ppc64, i386, x86_64"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-C")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("regex"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" only display classes matching regular expression\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-f")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("str"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("find")]),s._v(" string "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" method name\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-H")]),s._v(" generate header files "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" current directory, or directory specified with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-o")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-I")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("sort")]),s._v(" classes, categories, and protocols by inheritance "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("overrides -s"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-o")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("dir"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(" output directory used "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("for")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-H")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-r")]),s._v(" recursively "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("expand")]),s._v(" frameworks and fixed VM shared libraries\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-s")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("sort")]),s._v(" classes and categories by name\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-S")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("sort")]),s._v(" methods by name\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-t")]),s._v(" suppress header "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" output, "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("for")]),s._v(" testing\n --list-arches list the arches "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" the file, "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("then")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("exit")]),s._v("\n --sdk-ios specify iOS SDK version "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("will "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("look")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("version"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(".sdk\n --sdk-mac specify Mac OS X version "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("will "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("look")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("in")]),s._v(" /Developer/SDKs/MacOSX"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("version"),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v(".sdk\n --sdk-root specify the full SDK root path "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("or use --sdk-ios/--sdk-mac "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("for")]),s._v(" a shortcut"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n")])])]),a("p",[s._v("举个例子：我们对 "),a("code",[s._v("Twitter")]),s._v(" 的二进制文件导出头文件")]),s._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[s._v("class-dump "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("--arch")]),s._v(" arm64 "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-a")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-A")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-H")]),s._v(" Twitter "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-o")]),s._v(" ./Headers\n")])])]),a("p",[s._v("各参数说明：")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("作用")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[a("code",[s._v("a")])]),s._v(" "),a("td",[s._v("显示实例变量的偏移地址")])]),s._v(" "),a("tr",[a("td",[a("code",[s._v("A")])]),s._v(" "),a("td",[s._v("显示方法实现地址")])]),s._v(" "),a("tr",[a("td",[a("code",[s._v("H")])]),s._v(" "),a("td",[s._v("生成头文件")])]),s._v(" "),a("tr",[a("td",[a("code",[s._v("arch")])]),s._v(" "),a("td",[s._v("指定架构（如果只有一个架构，可以不加该参数）")])]),s._v(" "),a("tr",[a("td",[a("code",[s._v("o")])]),s._v(" "),a("td",[s._v("指定保存生成的头文件的目录位置")])])])]),s._v(" "),a("p",[s._v("执行完成后，可以看到 "),a("code",[s._v("Headers")]),s._v(" 目录下一共有 "),a("code",[s._v("343")]),s._v(" 个文件")]),s._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191623479.png",alt:"Headers"}})]),s._v(" "),a("p",[s._v("任意打开一个头文件，可以看到变量名、方法名、偏移地址等信息")]),s._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191623825.png",alt:""}})])])}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/113.cd6a977f.js b/assets/js/113.cd6a977f.js new file mode 100644 index 000000000..c56e80d44 --- /dev/null +++ b/assets/js/113.cd6a977f.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{463:function(t,a,s){"use strict";s.r(a);var e=s(14),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"一、cycript"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、cycript"}},[t._v("#")]),t._v(" 一、"),a("code",[t._v("Cycript")])]),t._v(" "),a("p",[a("code",[t._v("Cycript")]),t._v(" 是一款混合了 "),a("code",[t._v("OC")]),t._v(" 和 "),a("code",[t._v("JS")]),t._v(" 语法解释器的脚本语言（即可以使用 "),a("code",[t._v("OC")]),t._v(" 和 "),a("code",[t._v("JS")]),t._v(" 的语法来写脚本），其主要用来注入运行时程序进行调试，在程序重启后，所有通过 "),a("code",[t._v("Cycript")]),t._v(" 进行的程序修改内容都会失效，对原生程序和代码毫无副作用。")]),t._v(" "),a("p",[t._v("官网地址："),a("a",{attrs:{href:"http://www.cycript.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://www.cycript.org"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"二、安装与简单使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、安装与简单使用"}},[t._v("#")]),t._v(" 二、安装与简单使用")]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("Cydia")]),t._v(" 中搜索 "),a("code",[t._v("Cycript")]),t._v("，找到安装即可。")]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("iOS")]),t._v(" 设备上输入 "),a("code",[t._v("cycript")]),t._v("，会显示 "),a("code",[t._v("cy#")]),t._v(" 提示符")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("lxf-iPad:~ root"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# cycript")]),t._v("\ncy"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("#")]),t._v("\n")])])]),a("p",[t._v("这是一个 "),a("code",[t._v("JS")]),t._v(" 控制台，输入的内容都由 "),a("code",[t._v("JS")]),t._v(" 内核运行。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("cy# "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lxf'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"lxf"')]),t._v("\ncy# "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nlxf\n")])])]),a("p",[t._v("常用快捷键")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("快捷键")]),t._v(" "),a("th",[t._v("作用")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("ctrl + c")])]),t._v(" "),a("td",[t._v("取消当前输入或中断执行中的命令")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("ctrl + d")])]),t._v(" "),a("td",[t._v("退出 "),a("code",[t._v("Cycript")])])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("ctrl + l")])]),t._v(" "),a("td",[a("code",[t._v("clear")]),t._v(" 清屏")])])])]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("-p")]),t._v(" 参数注入指定程序，前提是你的程序得在运行中。")]),t._v(" "),a("p",[t._v("下面展示一下注入 "),a("code",[t._v("Twitter")]),t._v(" 后，查看其沙盒路径")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("lxf"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("iPad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("~")]),t._v(" root# cycript "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("p Twitter\ncy# "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("NSHomeDirectory")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"/var/mobile/Containers/Data/Application/2FA6975C-9DB0-4B08-9FE9-365473E86748"')]),t._v("\ncy#\n")])])]),a("h2",{attrs:{id:"三、实战"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、实战"}},[t._v("#")]),t._v(" 三、实战")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191629839.png",alt:""}})]),t._v(" "),a("blockquote",[a("p",[t._v("目标：如上图所示，我们来将 "),a("code",[t._v("linxunfeng.top")]),t._v(" 改成 "),a("code",[t._v("fullstackaction.com")])])]),t._v(" "),a("p",[t._v("要修改它就得先找到它，可以使用 "),a("code",[t._v("recursiveDescription")]),t._v(" 函数可以递归打印任意视图的层次结构")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UIApp keyWindow"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" recursiveDescription"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toString")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191630427.png",alt:""}})]),t._v(" "),a("p",[t._v("如果我们不清楚完整的函数名时，可以使用敲击 "),a("code",[t._v("tab")]),t._v(" 键列出所有匹配项")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# cy# [[UIApp keyWindow] recursive【敲击tab键】")]),t._v("\n\ncy"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# [[UIApp keyWindow] recursive")]),t._v("\nrecursiveDescription recursivelyForceDisplayIfNeeded\n")])])]),a("p",[t._v("看着上面图中打印出来的内容，任谁看了都觉得很烦恼，这里可以使用简化版的方法 "),a("code",[t._v("_autolayoutTrace")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UIApp keyWindow"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" _autolayoutTrace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(".toString"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191630533.png",alt:""}})]),t._v(" "),a("p",[t._v("相比上面的 "),a("code",[t._v("recursiveDescription")]),t._v(" 来对，会清晰很多")]),t._v(" "),a("p",[t._v("往下翻，可以找到该段落")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("u2022T1ProfileHeaderViewContro"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x1164bac50\n UIView:0x1164bae30\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1ProfileUserInfoViewCont"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x117748050\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderBio:0x116498070\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1TranslateButton:0x116474cc0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderTranslatedBi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x11773ed70\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileTranslationActivit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x11773f170\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x11773f3f0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderLocation:0x11641f090\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11641f3b0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderWebSite:0x113526840\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x1164e3b60\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355bbe0"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'linxunfeng.top'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderBirthday:0x11355bee0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355c200\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderCreatedDate:0x11355c500\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x1164e4100\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355c820"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2017\\u5e748\\u6708 \\u52a0\\u5165'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x11641f6b0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1AccessibilityProxyView:0x11641af00\n T1ProfileFriendsFollowing"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x1164dc870\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNSolidColorView:0x1164dca50\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1FlexibleLayoutView:0x1135df410\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x1135df810\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1AccessibilityProxyView:0x1164e06a0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1UserFacepileView:0x1164df730\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x1164dfb50\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1ProfileFriendsFollowingHighlightView:0x1164dff50\n")])])]),a("p",[t._v("这里说明一下，"),a("code",[t._v("Cycript")]),t._v(" 对中文的显示不太友好")]),t._v(" "),a("p",[t._v("可以将上面的输出内容拷贝到一些 "),a("code",[t._v("Unicode转中文")]),t._v(" 的工具里，直接转换输出")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("•T1ProfileHeaderViewContro"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x1164bac50\n UIView:0x1164bae30\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1ProfileUserInfoViewCont"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x117748050\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderBio:0x116498070\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1TranslateButton:0x116474cc0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderTranslatedBi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x11773ed70\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileTranslationActivit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x11773f170\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x11773f3f0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderLocation:0x11641f090\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11641f3b0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderWebSite:0x113526840\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x1164e3b60\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355bbe0"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'linxunfeng.top'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderBirthday:0x11355bee0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355c200\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderCreatedDate:0x11355c500\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x1164e4100\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355c820"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2017年8月 加入'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x11641f6b0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1AccessibilityProxyView:0x11641af00\n T1ProfileFriendsFollowing"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".:0x1164dc870\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNSolidColorView:0x1164dca50\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1FlexibleLayoutView:0x1135df410\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x1135df810\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1AccessibilityProxyView:0x1164e06a0\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1UserFacepileView:0x1164df730\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" TFNAttributedTextView:0x1164dfb50\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" T1ProfileFriendsFollowingHighlightView:0x1164dff50\n")])])]),a("p",[t._v("如果内容较少，如")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("UIButtonLabel:0x11355c820"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2017\\u5e748\\u6708 \\u52a0\\u5165'")]),t._v("\n")])])]),a("p",[t._v("可以使用 "),a("code",[t._v("echo -e")]),t._v(" 进行转换输出")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("echo")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-e")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2017\\u5e748\\u6708 \\u52a0\\u5165'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2017")]),t._v("年8月 加入\n")])])]),a("p",[t._v("回到正题，我们已经找到了目的控件，接下来就是修改它")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("UIButtonLabel:0x11355bbe0"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'linxunfeng.top'")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("在 "),a("code",[t._v("Cycript")]),t._v(" 中，如果我们知道一个对象的内存地址，就可以通过 "),a("code",[t._v("#")]),t._v(" 操作符来获取该对象。")])]),t._v(" "),a("p",[t._v("不过它的类型是："),a("code",[t._v("UIButtonLabel")]),t._v("，我们可以看看它的父控件")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" ProfileHeaderWebSite:0x113526840\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIImageView:0x1164e3b60\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" UIButtonLabel:0x11355bbe0"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'linxunfeng.top'")]),t._v("\n")])])]),a("p",[t._v("打印 "),a("code",[t._v("ProfileHeaderWebSite:0x113526840")]),t._v(" 这个对象")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("cy# #"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0x113526840")]),t._v("\n#"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"; layer = >"')]),t._v("\n")])])]),a("p",[t._v("可以看到是个 "),a("code",[t._v("UIButton")]),t._v("，那怎么改标题不是很明白了吗？")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("#"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0x113526840")]),t._v(" setTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"fullstackaction.com"')]),t._v(" forState"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("UIControlStateNormal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),a("p",[t._v("但是并没有任何效果~，没事，那就换设置富文本试试")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("var siteAttr "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("NSAttributedString alloc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" initWithString"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"fullstackaction.com"')]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("@")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("NSFontAttributeName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UIFont systemFontOfSize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("NSForegroundColorAttributeName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UIColor blueColor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("#"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0x113526840")]),t._v(" setAttributedTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("siteAttr forState"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("UIControlStateNormal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203191630565.png",alt:""}})]),t._v(" "),a("p",[t._v("大功告成😃")]),t._v(" "),a("h2",{attrs:{id:"四、高级用法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、高级用法"}},[t._v("#")]),t._v(" 四、高级用法")]),t._v(" "),a("h3",{attrs:{id:"_1、choose-查找对象"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、choose-查找对象"}},[t._v("#")]),t._v(" 1、"),a("code",[t._v("choose")]),t._v(" - 查找对象")]),t._v(" "),a("p",[t._v("用法："),a("code",[t._v("choose(类名)")])]),t._v(" "),a("p",[t._v("有时候上面提到的 "),a("code",[t._v("recursiveDescription")]),t._v(" 和 "),a("code",[t._v("_autolayoutTrace")]),t._v("，对我们来说输出内容太多了，且我们知道目标对象的类名，此时就可以通过 "),a("code",[t._v("choose")]),t._v(" 这个函数，获取符合条件（当前类及子类）的所有记录，从而快速拿到对象的地址来操作对象")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("cy"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# choose(UILabel)")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("#\"; layer = <_UILabelLayer: 0x2803585a0>>\",#\">\",#\">\",#\">\",#\">\",#\"; layer = <_UILabelLayer: 0x28035d9f0>>\"]")]),t._v("\n")])])]),a("h3",{attrs:{id:"_2、分类拓展"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、分类拓展"}},[t._v("#")]),t._v(" 2、分类拓展")]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("Cycript")]),t._v(" 中也可以使用 "),a("code",[t._v("OC")]),t._v(" 的 "),a("code",[t._v("Category")]),t._v("，为类拓展方法，如")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("cy# "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@implementation")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("NSString")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("LXF"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" website "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fullstackaction.com"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n")])])]),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("cy# "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("NSString website"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"fullstackaction.com"')]),t._v("\n")])])]),a("h3",{attrs:{id:"_3、封装函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3、封装函数"}},[t._v("#")]),t._v(" 3、封装函数")]),t._v(" "),a("p",[t._v("在实战过程中，往往会遇到一些层次很深的情况，如果靠我们自己手动去循环的查找，会变成非常麻烦，如查找当前最顶层的控制器，这时，我们可以利用 "),a("code",[t._v("Cycript")]),t._v(" 来编写自定义函数解决这个问题")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("cy# function "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("presentedViewController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("presentedViewController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vc isKindOfClass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UITabBarController class"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selectedViewController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vc isKindOfClass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("UINavigationController class"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("visibleViewController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n var count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childViewControllers"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("var i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n var childVc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childViewControllers"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childVc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" childVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n vc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" vc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("打印最顶层的控制器")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[t._v("cy# "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIApp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keyWindow"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rootViewController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n#"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n")])])]),a("p",[t._v("每次都在终端里写一次，那岂不是也非常麻烦？我们可以将这些代码写到一个 "),a("code",[t._v(".cy")]),t._v(" 文件中")]),t._v(" "),a("p",[t._v("我们可以在 "),a("code",[t._v("/usr/lib/cycript0.9/com/saurik/substrate/")]),t._v(" 找到一个名为 "),a("code",[t._v("MS.cy")]),t._v(" 的文件")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("exports")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\nexports"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getImageByName "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" MSGetImageByName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nexports"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("findSymbol "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" MSFindSymbol"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nexports"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("hookFunction")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("func"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nexports"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("hookMessage")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("isa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" imp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("exports"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("参考它写一个即可。附上自己封装的 "),a("code",[t._v("cy")]),t._v(" 文件："),a("a",{attrs:{href:"https://github.com/LinXunFeng/lxf_cycript",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/lxf_cycript"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("下载下来后，将 "),a("code",[t._v("lxf.cy")]),t._v(" 拷贝至 "),a("code",[t._v("/usr/lib/cycript0.9/com/lxf/")]),t._v(" 路径下")]),t._v(" "),a("p",[t._v("然后在 "),a("code",[t._v("cycript")]),t._v(" 环境下执行：")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("cy# @import com.lxf.lxf; 0\n")])])]),a("p",[t._v("注：分号后面的"),a("code",[t._v("0")]),t._v(" 是为了隐藏脚本导入后的脚本内容输出")]),t._v(" "),a("p",[t._v("导入后，使用 "),a("code",[t._v("lxf.函数名()")]),t._v(" 即可")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("cy# lxf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("topVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n#"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n")])])]),a("p",[t._v("如果不太记得函数名字，可以使用 "),a("code",[t._v("tab键")]),t._v(" 查看")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("cy# lxf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("【敲击tab键】\n__defineGetter__ __lookupSetter__ appPath classMethods findVc isString keyWindow methods rootVc toLocaleString valueOf\n__defineSetter__ __proto__ cachesPath constructor hasOwnProperty ivarNames loadFramework printIvars subViews toString\n__lookupGetter__ appId classMethodNames documentPath isPrototypeOf ivars methodNames propertyIsEnumerable subViewsSimple topVc\ncy# lxf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/114.b8d81000.js b/assets/js/114.b8d81000.js new file mode 100644 index 000000000..5d747ef7c --- /dev/null +++ b/assets/js/114.b8d81000.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{465:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"一、简介"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、简介"}},[t._v("#")]),t._v(" 一、简介")]),t._v(" "),a("p",[a("code",[t._v("Frida")]),t._v(" 是一个跨平台的轻量级 "),a("code",[t._v("Hook")]),t._v(" 框架，支持 "),a("code",[t._v("MacOS")]),t._v("、"),a("code",[t._v("Linux")]),t._v(" 和 "),a("code",[t._v("Windows")]),t._v(" 操作系统，提供了精简的 "),a("code",[t._v("Python")]),t._v(" 接口和功能丰富的 "),a("code",[t._v("JS")]),t._v(" 接口，除了可以使用自身的控制台交互以外，还可以使用 "),a("code",[t._v("Python")]),t._v(" 将 "),a("code",[t._v("JS")]),t._v(" 脚本注入到运行程序中，通过 "),a("code",[t._v("Frida")]),t._v(" 可以获取程序的详细信息、拦截和调用指定函数、注入代码、修改参数等。")]),t._v(" "),a("p",[a("code",[t._v("Frida")]),t._v(" 源代码托管："),a("a",{attrs:{href:"https://github.com/frida",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/frida"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"二、安装"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、安装"}},[t._v("#")]),t._v(" 二、安装")]),t._v(" "),a("h3",{attrs:{id:"ios"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ios"}},[t._v("#")]),t._v(" "),a("code",[t._v("iOS")])]),t._v(" "),a("p",[t._v("添加软件源 "),a("code",[t._v("https://build.frida.re/")]),t._v("，然后搜索 "),a("code",[t._v("Frida")]),t._v(" 安装即可。")]),t._v(" "),a("p",[t._v("安装完成后可能通过 "),a("code",[t._v("ps")]),t._v(" 看到 "),a("code",[t._v("frida-server")]),t._v(" 后台程序则说明安装成功，若没有可以重启手机后再看看")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("lxf-iPad:~ root"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# ps -ax | grep frida")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26717")]),t._v(" ?? "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(":00.08 /usr/sbin/frida-server\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26731")]),t._v(" ttys000 "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(":00.01 "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("grep")]),t._v(" frida\n")])])]),a("h3",{attrs:{id:"macos"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#macos"}},[t._v("#")]),t._v(" "),a("code",[t._v("MacOS")])]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("pip")]),t._v(" 进行安装")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("pip "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" frida-tools "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# CLI tools")]),t._v("\npip "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" frida "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Python bindings")]),t._v("\n")])])]),a("p",[t._v("后续需要升级的话，可以使用 "),a("code",[t._v("--upgrade")]),t._v(" 参数")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("pip "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" frida-tools "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--upgrade")]),t._v("\npip "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--upgrade")]),t._v("\n")])])]),a("p",[t._v("如果报 "),a("code",[t._v("command not found:pip")]),t._v(" 错误，说明当前系统没有安装 "),a("code",[t._v("pip")]),t._v("，可以使用下方命令安装")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("brew "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("wget")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("wget")]),t._v(" https://bootstrap.pypa.io/get-pip.py\npython3 get-pip.py\n")])])]),a("p",[t._v("执行完成后会提示你将对应 "),a("code",[t._v("python")]),t._v(" 版本的 "),a("code",[t._v("bin")]),t._v(" 路径添加到 "),a("code",[t._v("PATH")]),t._v(" 中，如：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[a("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("PATH")])]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=~")]),t._v("/Library/Python/3.8/bin:"),a("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("$PATH")]),t._v("\n")])])]),a("p",[t._v("当然，如果你也有用 "),a("code",[t._v("pyenv")]),t._v("，则可以忽略上述的 "),a("code",[t._v("pip")]),t._v(" 安装流程，因为 "),a("code",[t._v("pyenv")]),t._v(" 自带了 "),a("code",[t._v("pip")]),t._v("。")]),t._v(" "),a("p",[t._v("你可以用 "),a("code",[t._v("which")]),t._v(" 命令查看你的 "),a("code",[t._v("pip")]),t._v(" 的安装位置。")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("➜ ~ which pip\n/usr/local/var/pyenv/shims/pip\n")])])]),a("h2",{attrs:{id:"三、入门"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、入门"}},[t._v("#")]),t._v(" 三、入门")]),t._v(" "),a("p",[t._v("除了 "),a("code",[t._v("frida")]),t._v(" 主程序外，"),a("code",[t._v("frida-tools")]),t._v(" 里还提供了五个实用工具，它们位于 "),a("code",[t._v("/usr/local/bin/")]),t._v(" 目录下")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ls")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-al")]),t._v(" /usr/local/bin/frida-*\n")])])]),a("p",[t._v("如果使用的是 "),a("code",[t._v("pyenv")]),t._v(" 的 "),a("code",[t._v("pip")]),t._v(" 安装的 "),a("code",[t._v("frida")]),t._v("，则它们会被安装到 "),a("code",[t._v("/usr/local/var/pyenv/shims/")]),t._v(" 目录下")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ls")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-al")]),t._v(" /usr/local/var/pyenv/shims/frida-*\n")])])]),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-apk\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-create\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-discover\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-join\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-kill\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-ls-devices\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-ps\n-rwxr-xr-x "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" lxf admin "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),t._v(":05 /usr/local/var/pyenv/shims/frida-trace\n")])])]),a("h3",{attrs:{id:"_1、查看可用的设备列表"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、查看可用的设备列表"}},[t._v("#")]),t._v(" 1、查看可用的设备列表")]),t._v(" "),a("p",[a("code",[t._v("frida-ls-devices")]),t._v(" 用于获取可用的设备列表，在多设备交互的情况下会非常有用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-ls-devices\nId Type Name\n---------------------------------------- ------ ------------\n"),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" Local System\nd007dc58edd70caad950ff01b41ebf73cfa49fbe usb iPad\nsocket remote Local Socket\n")])])]),a("h3",{attrs:{id:"_2、获取设备的进程列表"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、获取设备的进程列表"}},[t._v("#")]),t._v(" 2、获取设备的进程列表")]),t._v(" "),a("p",[a("code",[t._v("frida-ps")]),t._v(" 用于获取进程列表信息")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-ps "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v("\nusage: frida-ps "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\noptions:\n -h, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v(" show this "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" message and "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" ID, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--device")]),t._v(" ID connect to device with the given ID\n -U, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--usb")]),t._v(" connect to USB device\n -R, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--remote")]),t._v(" connect to remote frida-server\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-H")]),t._v(" HOST, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--host")]),t._v(" HOST connect to remote frida-server on HOST\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--certificate")]),t._v(" CERTIFICATE\n speak TLS with HOST, expecting CERTIFICATE\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--origin")]),t._v(" ORIGIN connect to remote server with “Origin” header "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" to\n ORIGIN\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--token")]),t._v(" TOKEN authenticate with HOST using TOKEN\n --keepalive-interval INTERVAL\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" keepalive interval "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" seconds, or "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" to disable\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("defaults to "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-1")]),t._v(" to auto-select based on transport"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v(" establish a peer-to-peer connection with target\n --stun-server ADDRESS\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" STUN server ADDRESS to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--relay")]),t._v(" address,username,password,turn-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("udp,tcp,tls"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" relay to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-O")]),t._v(" FILE, --options-file FILE\n text "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" containing additional "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" line options\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--version")]),t._v(" show program's version number and "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v("\n -a, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--applications")]),t._v(" list only applications\n -i, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--installed")]),t._v(" include all installed applications\n -j, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--json")]),t._v(" output results as JSON\n")])])]),a("p",[t._v("这里说明一下常用的命令参数")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("-U")])]),t._v(" "),a("td",[t._v("连接到 "),a("code",[t._v("USB")]),t._v(" 设备")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-D")])]),t._v(" "),a("td",[t._v("如果当前有多台 "),a("code",[t._v("USB")]),t._v(" 设备，可以使用该参数指定设备的 "),a("code",[t._v("UDID")]),t._v("（"),a("code",[t._v("frida-ls-devices")]),t._v(" 列出的那些 "),a("code",[t._v("id")]),t._v("）")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-R/-H")])]),t._v(" "),a("td",[t._v("连接到远程 "),a("code",[t._v("frida-server")]),t._v("，主要用于远程调试")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-a")])]),t._v(" "),a("td",[t._v("仅显示正在运行的应用")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-i")])]),t._v(" "),a("td",[t._v("显示所有已安装的应用（包括 "),a("code",[t._v("AppStore")]),t._v("安装的应用和系统应用）")])])])]),t._v(" "),a("p",[t._v("具体使用如下：")]),t._v(" "),a("p",[t._v("连接到 "),a("code",[t._v("USB")]),t._v(" 设备查看进程列表")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("~ frida-ps "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v("\n PID Name\n----- ---------------------------------------------------\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("25226")]),t._v(" Cydia\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v(" Twitter\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("21611")]),t._v(" 邮件\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("25055")]),t._v(" AppPredictionWidget\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("20944")]),t._v(" AppleCredentialManagerDaemon\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1687")]),t._v(" AssetCacheLocatorService\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("23387")]),t._v(" CMFSyncAgent\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),a("p",[t._v("连接到 "),a("code",[t._v("USB")]),t._v(" 设备查看正在运行的应用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-ps "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-a")]),t._v("\n PID Name Identifier\n----- ----------- --------------------\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("25226")]),t._v(" Cydia com.saurik.Cydia\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v(" Twitter com.atebits.Tweetie2\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("21611")]),t._v(" 邮件 com.apple.mobilemail\n➜ ~\n")])])]),a("p",[t._v("连接到 "),a("code",[t._v("USB")]),t._v(" 设备查看所有安装的应用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-ps "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v("\n PID Name Identifier\n----- --------------------------- ------------------------------------------\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("25226")]),t._v(" Cydia com.saurik.Cydia\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v(" Twitter com.atebits.Tweetie2\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("21611")]),t._v(" 邮件 com.apple.mobilemail\n - App Store com.apple.AppStore\n - FaceTime 通话 com.apple.facetime\n - LXFProtocolTool_Example org.cocoapods.demo.LXFProtocolTool-Example\n - Photo Booth com.apple.Photo-Booth\n - Safari 浏览器 com.apple.mobilesafari\n - Substitute com.ex.substitute.settings\n - SwiftyFitsize_Swift org.cocoapods.demo.SwiftyFitsize-Swift\n - iTunes Store com.apple.MobileStore\n - 信息 com.apple.MobileSMS\n - 查找 iPhone com.apple.mobileme.fmip1\n - 设置 com.apple.Preferences\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n")])])]),a("p",[t._v("连接到指定的 "),a("code",[t._v("USB")]),t._v(" 设备查看正在运行的应用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-ps "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" d007dc58edd70caad950ff01b41ebf73cfa49fbe "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-a")]),t._v("\n PID Name Identifier\n----- ----------- --------------------\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("25226")]),t._v(" Cydia com.saurik.Cydia\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v(" Twitter com.atebits.Tweetie2\n"),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("21611")]),t._v(" 邮件 com.apple.mobilemail\n➜ ~\n")])])]),a("h3",{attrs:{id:"_3、杀死进程"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3、杀死进程"}},[t._v("#")]),t._v(" 3、杀死进程")]),t._v(" "),a("p",[a("code",[t._v("frida-kill")]),t._v(" 用来结束设备上的指定进程")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-kill "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v("\nusage: frida-kill "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" process\n\noptions:\n -h, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v(" show this "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" message and "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" ID, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--device")]),t._v(" ID connect to device with the given ID\n -U, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--usb")]),t._v(" connect to USB device\n -R, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--remote")]),t._v(" connect to remote frida-server\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-H")]),t._v(" HOST, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--host")]),t._v(" HOST connect to remote frida-server on HOST\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--certificate")]),t._v(" CERTIFICATE\n speak TLS with HOST, expecting CERTIFICATE\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--origin")]),t._v(" ORIGIN connect to remote server with “Origin” header "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" to\n ORIGIN\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--token")]),t._v(" TOKEN authenticate with HOST using TOKEN\n --keepalive-interval INTERVAL\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" keepalive interval "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" seconds, or "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" to disable\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("defaults to "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-1")]),t._v(" to auto-select based on transport"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v(" establish a peer-to-peer connection with target\n --stun-server ADDRESS\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" STUN server ADDRESS to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--relay")]),t._v(" address,username,password,turn-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("udp,tcp,tls"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" relay to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-O")]),t._v(" FILE, --options-file FILE\n text "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" containing additional "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" line options\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--version")]),t._v(" show program's version number and "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v("\n")])])]),a("p",[t._v("举个例子，杀掉 "),a("code",[t._v("PID")]),t._v(" 为 "),a("code",[t._v("26745")]),t._v(" 的 "),a("code",[t._v("Twitter")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("frida-kill "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v("\nfrida-kill "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" Twitter\nfrida-kill "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" d007dc58edd70caad950ff01b41ebf73cfa49fbe "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26745")]),t._v("\nfrida-kill "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" d007dc58edd70caad950ff01b41ebf73cfa49fbe Twitter\n")])])]),a("h3",{attrs:{id:"_4、跟踪函数-方法的调用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4、跟踪函数-方法的调用"}},[t._v("#")]),t._v(" 4、跟踪函数/方法的调用")]),t._v(" "),a("p",[a("code",[t._v("frida-trace")]),t._v(" 用于跟踪函数或方法的调用。")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-trace "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v("\nusage: frida-trace "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" target\n\npositional arguments:\n args extra arguments and/or target\n\noptions:\n -h, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v(" show this "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" message and "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" ID, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--device")]),t._v(" ID connect to device with the given ID\n -U, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--usb")]),t._v(" connect to USB device\n -R, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--remote")]),t._v(" connect to remote frida-server\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-H")]),t._v(" HOST, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--host")]),t._v(" HOST connect to remote frida-server on HOST\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--certificate")]),t._v(" CERTIFICATE\n speak TLS with HOST, expecting CERTIFICATE\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--origin")]),t._v(" ORIGIN connect to remote server with “Origin” header "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" to ORIGIN\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--token")]),t._v(" TOKEN authenticate with HOST using TOKEN\n --keepalive-interval INTERVAL\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" keepalive interval "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" seconds, or "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" to disable "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("defaults to "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-1")]),t._v(" to auto-select based\n on transport"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v(" establish a peer-to-peer connection with target\n --stun-server ADDRESS\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" STUN server ADDRESS to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--relay")]),t._v(" address,username,password,turn-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("udp,tcp,tls"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" relay to use with "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--p2p")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" TARGET, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--file")]),t._v(" TARGET\n spawn FILE\n -F, --attach-frontmost\n attach to frontmost application\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-n")]),t._v(" NAME, --attach-name NAME\n attach to NAME\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" PID, --attach-pid PID\n attach to PID\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-W")]),t._v(" PATTERN, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--await")]),t._v(" PATTERN\n await spawn matching PATTERN\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--stdio")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("inherit,pipe"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n stdio behavior when spawning "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("defaults to “inherit”"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--aux")]),t._v(" option "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" aux option when spawning, such as “uid"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("42")]),t._v("” "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("supported types are: string, bool,\n int"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--realm")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("native,emulated"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n realm to attach "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--runtime")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("qjs,v8"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" script runtime to use\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--debug")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("enable")]),t._v(" the Node.js compatible script debugger\n --squelch-crash "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" enabled, will not dump crash report to console\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-O")]),t._v(" FILE, --options-file FILE\n text "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" containing additional "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" line options\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--version")]),t._v(" show program"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'s version number and exit\n -I MODULE, --include-module MODULE\n include MODULE\n -X MODULE, --exclude-module MODULE\n exclude MODULE\n -i FUNCTION, --include FUNCTION\n include [MODULE!]FUNCTION\n -x FUNCTION, --exclude FUNCTION\n exclude [MODULE!]FUNCTION\n -a MODULE!OFFSET, --add MODULE!OFFSET\n add MODULE!OFFSET\n -T INCLUDE_IMPORTS, --include-imports INCLUDE_IMPORTS\n include program'")]),t._v("s imports\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-t")]),t._v(" MODULE, --include-module-imports MODULE\n include MODULE imports\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" OBJC_METHOD, --include-objc-method OBJC_METHOD\n include OBJC_METHOD\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-M")]),t._v(" OBJC_METHOD, --exclude-objc-method OBJC_METHOD\n exclude OBJC_METHOD\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-j")]),t._v(" JAVA_METHOD, --include-java-method JAVA_METHOD\n include JAVA_METHOD\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-J")]),t._v(" JAVA_METHOD, --exclude-java-method JAVA_METHOD\n exclude JAVA_METHOD\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" DEBUG_SYMBOL, --include-debug-symbol DEBUG_SYMBOL\n include DEBUG_SYMBOL\n -q, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--quiet")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("do")]),t._v(" not "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("format")]),t._v(" output messages\n -d, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--decorate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" module name to generated onEnter log statement\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-S")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("PATH")]),t._v(", --init-session "),a("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("PATH")]),t._v("\n path to JavaScript "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" used to initialize the session\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-P")]),t._v(" PARAMETERS_JSON, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--parameters")]),t._v(" PARAMETERS_JSON\n parameters as JSON, exposed as a global named "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parameters'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-o")]),t._v(" OUTPUT, "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--output")]),t._v(" OUTPUT\n dump messages to "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v("\n")])])]),a("h4",{attrs:{id:"_4-1-跟踪函数调用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4-1-跟踪函数调用"}},[t._v("#")]),t._v(" 4.1 跟踪函数调用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v(" ➜ ~ frida-trace "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v(" compress "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"recv*"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-x")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"recvmsg*"')]),t._v(" Twitter\nInstrumenting"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\ncompress: Auto-generated handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libz.1.dylib/compress.js"')]),t._v("\nrecvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(":")]),t._v(" Auto-generated handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom_NOCANCEL.js"')]),t._v("\nrecvfrom: Auto-generated handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom.js"')]),t._v("\nrecv: Auto-generated handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv.js"')]),t._v("\nrecv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(":")]),t._v(" Auto-generated handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv_NOCANCEL.js"')]),t._v("\nStarted tracing "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v(" functions. Press Ctrl+C to stop.\n")])])]),a("p",[t._v("参数说明")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("-i")])]),t._v(" "),a("td",[t._v("包含某个函数，支持模糊匹配")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-x")])]),t._v(" "),a("td",[t._v("排除某个函数，支持模糊匹配")])])])]),t._v(" "),a("p",[t._v("注：进行模糊匹配时，需要使用双引号进行包裹！")]),t._v(" "),a("p",[t._v("上述命令的意思：跟踪名为 "),a("code",[t._v("compress")]),t._v(" 和以 "),a("code",[t._v("recv")]),t._v(" 开头的函数，且排除以 "),a("code",[t._v("recvmsg")]),t._v(" 开头的函数。")]),t._v(" "),a("p",[t._v("当跟踪的函数被触发时，会输出以下日志：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v(" /* TID 0x1bb43 */\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36078")]),t._v(" ms recv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36078")]),t._v(" ms "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" recvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36081")]),t._v(" ms recv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36081")]),t._v(" ms "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" recvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36082")]),t._v(" ms recv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36082")]),t._v(" ms "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" recvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36083")]),t._v(" ms recv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36083")]),t._v(" ms "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" recvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36083")]),t._v(" ms recv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("36083")]),t._v(" ms "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" recvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("命令在执行后会在当前目录下会生成一个名为 "),a("code",[t._v("__handlers__")]),t._v(" 的文件夹，里面存放的是自动生成的脚本文件")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n└── __handlers__\n ├── libsystem_c.dylib\n │ ├── recv.js\n │ └── recv_NOCANCEL.js\n ├── libsystem_kernel.dylib\n │ ├── recvfrom.js\n │ └── recvfrom_NOCANCEL.js\n └── libz.1.dylib\n └── compress.js\n")])])]),a("p",[t._v("上述命令是在目标 "),a("code",[t._v("App")]),t._v(" 打开后执行的，如果我们需要强制启动 "),a("code",[t._v("App")]),t._v(" 来进行跟踪，可以使用 "),a("code",[t._v("-f 应用的BundleID")]),t._v(" 参数，如：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ ~ frida-trace "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v(" compress "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"recv*"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-x")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"recvmsg*"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"com.atebits.Tweetie2"')]),t._v("\nInstrumenting"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\ncompress: Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libz.1.dylib/compress.js"')]),t._v("\nrecvfrom"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(":")]),t._v(" Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom_NOCANCEL.js"')]),t._v("\nrecvfrom: Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom.js"')]),t._v("\nrecv: Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv.js"')]),t._v("\nrecv"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$NOCANCEL")]),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(":")]),t._v(" Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv_NOCANCEL.js"')]),t._v("\nStarted tracing "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v(" functions. Press Ctrl+C to stop.\n")])])]),a("p",[t._v("注："),a("code",[t._v("frida-trace")]),t._v(" 执行时不会覆盖已有的脚本文件（即 "),a("code",[t._v("__handlers__")]),t._v(" 文件夹下的脚本），所以可以进行任意修改这些 "),a("code",[t._v("JS")]),t._v(" 文件来添加想要的功能。")]),t._v(" "),a("h4",{attrs:{id:"_4-2-跟踪-oc-方法的调用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4-2-跟踪-oc-方法的调用"}},[t._v("#")]),t._v(" 4.2 跟踪 "),a("code",[t._v("OC")]),t._v(" 方法的调用")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ Test frida-trace "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-[T1HomeTimelineItemsViewController _load*]"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-M")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-[T1HomeTimelineItemsViewController _loadBottomWithSource:]"')]),t._v(" Twitter\nInstrumenting"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1HomeTimelineItemsViewController _loadTopWithSource:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(": Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/T1HomeTimelineItemsViewController/_loadTopWithSource_.js"')]),t._v("\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1HomeTimelineItemsViewController _loadGap:withSource:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(": Loaded handler at "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/T1HomeTimelineItemsViewController/_loadGap_withSource_.js"')]),t._v("\nStarted tracing "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" functions. Press Ctrl+C to stop.\n /* TID 0x303 */\n "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("15600")]),t._v(" ms -"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1HomeTimelineItemsViewController _loadTopWithSource:0xc8"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),a("p",[t._v("参数说明")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("描述")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("code",[t._v("-m")])]),t._v(" "),a("td",[t._v("包含某个方法，支持模糊匹配")])]),t._v(" "),a("tr",[a("td",[a("code",[t._v("-M")])]),t._v(" "),a("td",[t._v("排除某个方法，支持模糊匹配")])])])]),t._v(" "),a("h4",{attrs:{id:"_4-3-跟踪调用栈"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4-3-跟踪调用栈"}},[t._v("#")]),t._v(" 4.3 跟踪调用栈")]),t._v(" "),a("p",[t._v("只需要在 "),a("code",[t._v("JS")]),t._v(" 文件中添加如下代码片段即可跟踪某个方法的调用栈")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\tBacktrace:\\n\\t'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" Thread"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("backtrace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Backtracer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ACCURATE")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("DebugSymbol"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fromAddress"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\n\\t'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("想了解详细的接口说明可以在 "),a("code",[t._v("Frida")]),t._v(" 官网链接："),a("a",{attrs:{href:"https://frida.re/docs/javascript-api/#thread",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://frida.re/docs/javascript-api/#thread"),a("OutboundLink")],1),t._v(" 上找到。")]),t._v(" "),a("h3",{attrs:{id:"_5、交互模式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_5、交互模式"}},[t._v("#")]),t._v(" 5、交互模式")]),t._v(" "),a("p",[a("code",[t._v("frida")]),t._v(" 提供了两种进入交互模式的方式")]),t._v(" "),a("h4",{attrs:{id:"_5-1-通过应用名或-pid-附加"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_5-1-通过应用名或-pid-附加"}},[t._v("#")]),t._v(" 5.1 通过应用名或 "),a("code",[t._v("PID")]),t._v(" 附加")]),t._v(" "),a("p",[t._v("应用于 "),a("code",[t._v("App")]),t._v(" 已打开的情况下附加的情景")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" 应用名\nfrida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" PID\n")])])]),a("p",[t._v("当使用 "),a("code",[t._v("PID")]),t._v(" 进行附加时，"),a("code",[t._v("-p")]),t._v(" 可加可不加")]),t._v(" "),a("p",[t._v("举例：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" Twitter\nfrida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26984")]),t._v("\nfrida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("26984")]),t._v("\n")])])]),a("h4",{attrs:{id:"_5-2-启动应用进入交互模式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_5-2-启动应用进入交互模式"}},[t._v("#")]),t._v(" 5.2 启动应用进入交互模式")]),t._v(" "),a("p",[t._v("应用于 "),a("code",[t._v("App")]),t._v(" 未打开的情景")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ Test frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" com.atebits.Tweetie2\n ____\n / _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Frida "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("15.1")]),t._v(".17 - A world-class dynamic instrumentation toolkit\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Commands:\n /_/ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Displays the "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" system\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" object? -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Display information about "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'object'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" exit/quit -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Exit\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" More info at https://frida.re/docs/home/\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" Connected to iPad "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("d007dc58edd70caad950ff01b41ebf73cfa49fbe"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nSpawned "),a("span",{pre:!0,attrs:{class:"token variable"}},[a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")]),t._v("com.atebits.Tweetie2"),a("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" Use %resume to "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("let")]),t._v(" the main thread start executing"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("iPad::com.atebits.Tweetie2 "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("-"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" %resume\n")])])]),a("p",[t._v("注：需要自己额外再输入 "),a("code",[t._v("%resume")]),t._v("，否则目标应用将一直处于暂停的状态。")]),t._v(" "),a("p",[t._v("如果启动应用后被强制退出或不想再额外输入 "),a("code",[t._v("%resume")]),t._v("，可以加上 "),a("code",[t._v("--no-pause")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" com.atebits.Tweetie2 --no-pause\n")])])]),a("h2",{attrs:{id:"四、实战"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、实战"}},[t._v("#")]),t._v(" 四、实战")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203271846280.png",alt:""}})]),t._v(" "),a("blockquote",[a("p",[t._v("针对上图中的【翻译推文】，我们来把这个标题和点击事件给修改掉")])]),t._v(" "),a("p",[t._v("首先我们要做的就是视图组件定位，在这个页面下，使用 "),a("code",[t._v("FLEX")]),t._v(" 工具便可轻松定位到")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203271846973.png",alt:""}})]),t._v(" "),a("p",[t._v("点击右侧的感叹号，可以看到该视图的属性和方法")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203271846745.png",alt:""}})]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203271847821.png",alt:""}})]),t._v(" "),a("p",[t._v("然后通过如下代码，确认其是否为我们想要 "),a("code",[t._v("hook")]),t._v(" 的方法")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("available"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" didTap "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("T1TranslateButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'- _didTap:forEvent:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" setTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("T1TranslateButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'- setTitleText:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n Interceptor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setTitleOldImp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onEnter")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("args")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"args 0 -- "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Object")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"args 2 -- "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Object")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n didTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("implementation "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("handle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" selector"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" self "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Object")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("handle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"self -- "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" self"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("打开 "),a("code",[t._v("Twitter")]),t._v(" 后，执行如下命令 "),a("code",[t._v("frida -U -l Twitter.js Twitter")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("➜ frida "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-U")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-l")]),t._v(" Twitter.js Twitter\n ____\n / _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Frida "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("15.1")]),t._v(".17 - A world-class dynamic instrumentation toolkit\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Commands:\n /_/ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Displays the "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("help")]),t._v(" system\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" object? -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Display information about "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'object'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" exit/quit -"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" Exit\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" More info at https://frida.re/docs/home/\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v(" Connected to iPad "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("d007dc58edd70caad950ff01b41ebf73cfa49fbe"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("iPad::Twitter "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("-"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[a("code",[t._v("Twitter")]),t._v(" 进入到指定页面后输出：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("args "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" -- "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("T1TranslateButton: 0x122e46f80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" baseClass "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" frame "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("66")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" opaque "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" NO"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" layer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CALayer: 0x28372a76"),a("span",{pre:!0,attrs:{class:"token operator"}},[a("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("0")]),t._v(">>")]),t._v("\nargs "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" -- 翻译推文\n")])])]),a("p",[t._v("点一下【翻译推文】按钮输出：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("iPad::Twitter "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("-"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" self -- "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("T1TranslateButton: 0x122e46f80"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" baseClass "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" frame "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("66")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" opaque "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" NO"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" layer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CALayer: 0x28372a76"),a("span",{pre:!0,attrs:{class:"token operator"}},[a("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("0")]),t._v(">>")]),t._v("\n")])])]),a("p",[t._v("看来是没错了，那接下来，我们把标题和点击事件进行修改，完整代码如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("available"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" NSString "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" UIAlertController "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIAlertController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" UIAlertAction "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIAlertAction"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" UIApplication "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIApplication"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 弹窗")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showAlert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" alertHandler "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Block")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("retType")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'void'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("argTypes")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'object'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("implementation")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("schedule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mainQueue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" alert "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIAlertController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alertControllerWithTitle_message_preferredStyle_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'LinXunFeng'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'欢迎关注公众号：FSA全栈行动\\n博客：https://fullstackaction.com'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultAction "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIAlertAction"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionWithTitle_style_handler_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'OK'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" alertHandler"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n alert"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addAction_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("defaultAction"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n UIApplication"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("sharedApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("keyWindow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rootViewController")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("presentViewController_animated_completion_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("alert"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NULL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 播放系统声音")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSystemSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" playSound "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NativeFunction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findExportByName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'AudioToolbox'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'AudioServicesPlaySystemSound'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'void'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'int'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1111")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" didTap "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("T1TranslateButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'- _didTap:forEvent:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" setTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("T1TranslateButton"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'- setTitleText:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保留旧实现")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" didTapOldImp "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" didTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("implementation\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// hook")]),t._v("\n Interceptor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setTitleOldImp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onEnter")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("args")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n args"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ptr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSString"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringWithString_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello LinXunFeng，点击我来弹个窗和听个曲吧"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 覆盖实现")]),t._v("\n didTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("implementation "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("handle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" selector"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用旧实现")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// didTapOldImp(handle, selector, arg1, arg2)")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSystemSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showAlert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202203271848750.png",alt:""}})]),t._v(" "),a("h2",{attrs:{id:"五、进阶"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#五、进阶"}},[t._v("#")]),t._v(" 五、进阶")]),t._v(" "),a("h3",{attrs:{id:"_1、python-交互"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、python-交互"}},[t._v("#")]),t._v(" 1、"),a("code",[t._v("Python")]),t._v(" 交互")]),t._v(" "),a("p",[a("code",[t._v("Frida")]),t._v(" 提供了 "),a("code",[t._v("Python")]),t._v(" 和 "),a("code",[t._v("JS")]),t._v(" 脚本的交互")]),t._v(" "),a("h4",{attrs:{id:"_1-1、获取设备"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-1、获取设备"}},[t._v("#")]),t._v(" 1.1、获取设备")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" frida\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n\n deviceManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_device_manager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 枚举所有连接的设备")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("enumerate_devices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 根据 UDID 获取设备")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"d007dc58edd70caad950ff01b41ebf73cfa49fbe"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 获取当前 USB 连接的设备")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("运行结果：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"local"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Local System"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", Device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"socket"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Local Socket"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", Device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"d007dc58edd70caad950ff01b41ebf73cfa49fbe"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"iPad"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'usb'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nDevice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"d007dc58edd70caad950ff01b41ebf73cfa49fbe"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"iPad"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'usb'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nDevice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"d007dc58edd70caad950ff01b41ebf73cfa49fbe"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"iPad"')]),t._v(", "),a("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'usb'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"_1-2、附加进程"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-2、附加进程"}},[t._v("#")]),t._v(" 1.2、附加进程")]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("attach()")]),t._v(" 附加进程，得到 "),a("code",[t._v("Session")]),t._v(" 实例")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Twitter"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 进程名")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# session = device.attach(27489) # PID")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("输出内容：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("Session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("27489")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"_1-3、启动进程"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-3、启动进程"}},[t._v("#")]),t._v(" 1.3、启动进程")]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("spawn")]),t._v(" 可以启动进程，不过会进入挂起状态，需要配合 "),a("code",[t._v("resume()")]),t._v(" 方法才能唤醒")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n pid "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("spawn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"com.atebits.Tweetie2"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# session = device.attach(pid)")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resume"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("code",[t._v("spawn")]),t._v(" 可携带参数运行")]),t._v(" "),a("p",[t._v("如下方代码所示，运行 "),a("code",[t._v("Safari")]),t._v(" 并打开 "),a("code",[t._v("FSA全栈行动")]),t._v(" 博客： "),a("code",[t._v("https://fullstackaction.com")])]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[t._v("pid "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("spawn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"com.apple.mobilesafari"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" url"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://fullstackaction.com/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ndevice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resume"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"_1-4、脱离进程"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-4、脱离进程"}},[t._v("#")]),t._v(" 1.4、脱离进程")]),t._v(" "),a("p",[t._v("得到 "),a("code",[t._v("Session")]),t._v(" 并完成所有操作后，需要使用 "),a("code",[t._v("detach()")]),t._v(" 脱离进程")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n pid "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("spawn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"com.atebits.Tweetie2"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resume"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 脱离进程")]),t._v("\n")])])]),a("h4",{attrs:{id:"_1-5、注入-js-脚本"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-5、注入-js-脚本"}},[t._v("#")]),t._v(" 1.5、注入 "),a("code",[t._v("JS")]),t._v(" 脚本")]),t._v(" "),a("p",[t._v("得到 "),a("code",[t._v("Session")]),t._v(" 实例后，就可以调用其 "),a("code",[t._v("create_script")]),t._v(" 方法创建一个脚本对象，再调用该脚本对象的 "),a("code",[t._v("load")]),t._v(" 方法进行脚本注入")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n pid "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("spawn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"com.atebits.Tweetie2"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resume"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n script "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("create_script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token triple-quoted-string string"}},[t._v('"""\n if (ObjC.available) {\n var NSHomeDirectory = new NativeFunction(ptr(Module.findExportByName("Foundation", "NSHomeDirectory")), \'pointer\', []);\n var path = new ObjC.Object(NSHomeDirectory());\n console.log(path);\n }\n """')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("load"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("code",[t._v("JS")]),t._v(" 脚本可以保存到本地文件中再进行读取：")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" codecs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("open")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./xxx.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'r'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" f"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n source "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" f"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("read"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nscript "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("create_script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("source"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"_1-6、python-与-js-交互"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-6、python-与-js-交互"}},[t._v("#")]),t._v(" 1.6、"),a("code",[t._v("Python")]),t._v(" 与 "),a("code",[t._v("JS")]),t._v(" 交互")]),t._v(" "),a("p",[t._v("向 "),a("code",[t._v("JS")]),t._v(" 端传递参数，"),a("code",[t._v("JS")]),t._v(" 端处理完成后将结果返回给 "),a("code",[t._v("Python")]),t._v(" 端，这种场景还是很常见的，那应该怎么做呢？")]),t._v(" "),a("p",[t._v("示例代码如下：")]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" frida\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" threading\n\ng_event "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" threading"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 同步")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("def")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("payload_message")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('# print("payload_message -- ", payload)')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"msg"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"msg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'status'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" payload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'status'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'success'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n g_event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("def")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on_message")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('# print("on_message message -- ", message)')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'send'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n payload_message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'payload'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("elif")]),t._v(" message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'error'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stack'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n\nSCRIPT_JS "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token triple-quoted-string string"}},[t._v("\"\"\"\n function handleMessage(message) {\n var cmd = message['cmd'] \n if (cmd == 'GetDirectory') {\n var name = message['name']\n var path;\n switch (name) {\n case 'home':\n var NSHomeDirectory = new NativeFunction(ptr(Module.findExportByName(\"Foundation\", \"NSHomeDirectory\")), 'pointer', []);\n path = new ObjC.Object(NSHomeDirectory());\n break;\n case 'tmp':\n var NSTemporaryDirectory = new NativeFunction(ptr(Module.findExportByName(\"Foundation\", \"NSTemporaryDirectory\")), 'pointer', []);\n path = new ObjC.Object(NSTemporaryDirectory());\n break;\n default:\n path = \"写的啥呀\"\n }\n if (path) send({msg: path.toString()});\n } \n send({status: 'success'});\n }\n recv(handleMessage);\n\"\"\"")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 根据名字获取对应的沙盒路径")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("def")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDirectory")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_process"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_process"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("create_script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("SCRIPT_JS"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("on"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" on_message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("load"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("post"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cmd'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'GetDirectory'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n g_event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wait"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# getDirectory('Twitter', 'home')")]),t._v("\n getDirectory"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Twitter'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tmp'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("ol",[a("li",[a("code",[t._v("g_event")]),t._v(" 是为了保证同步")]),t._v(" "),a("li",[a("code",[t._v("JS")]),t._v(" 端可以设置 "),a("code",[t._v("recv()")]),t._v(" 的回调接收 "),a("code",[t._v("Python")]),t._v(" 端的消息")]),t._v(" "),a("li",[a("code",[t._v("Python")]),t._v(" 端通过 "),a("code",[t._v("script.on()")]),t._v(" 设置回调，再使用 "),a("code",[t._v("script.post()")]),t._v(" 将参数传递给 "),a("code",[t._v("JS")]),t._v(" 端，然后调用 "),a("code",[t._v("g_event.wait()")]),t._v(" 进入等待状态")]),t._v(" "),a("li",[a("code",[t._v("JS")]),t._v(" 端内部处理完成后，使用 "),a("code",[t._v("send()")]),t._v(" 将 "),a("code",[t._v("{status: 'success'}")]),t._v(" 传递给 "),a("code",[t._v("Python")]),t._v(" 端")]),t._v(" "),a("li",[t._v("在 "),a("code",[t._v("on_message")]),t._v(" 回调中取到 "),a("code",[t._v("JS")]),t._v(" 端返回的数据，当识别到 "),a("code",[t._v("status")]),t._v(" 为 "),a("code",[t._v("success")]),t._v(" 后，调用 "),a("code",[t._v("g_event.set()")]),t._v(" 使主线程继续执行")])]),t._v(" "),a("h3",{attrs:{id:"_2、拦截某个类的所有方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、拦截某个类的所有方法"}},[t._v("#")]),t._v(" 2、拦截某个类的所有方法")]),t._v(" "),a("p",[t._v("如果想对某个类的所有方法进行批量拦截，可以使用 "),a("code",[t._v("ApiResolver")]),t._v(" 接口，它可以根据正则表达式获取符合条件的所有方法")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" resolver "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ApiResolver")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'objc'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nresolver"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerateMatches")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*[T1TranslateButton *]'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onMatch")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("match")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("match"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('":"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" match"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'address'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onComplete")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("输出结果：")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("+"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton tfn_defaultShouldFlipForRightToLeftTransform"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4014\n+"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton button"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2774\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton tapActionBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4280\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setTapActionBlock:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4290\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton translationSource"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4250\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setLogoTapActionBlock:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42ac\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setShowingTranslation:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2c10\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setOriginalLanguage:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2b58\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setTranslationSource:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2cec\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _didTap:forEvent:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be296c\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_didHover:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4140\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setSelectionPadding:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42d8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton touchRect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42f8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_isTouchingLogo:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2a8c\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton touchLogoRect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4328\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_buttonTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2f28\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton autoTranslationExpanded"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4270\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_imageHeightOffsetForLogo:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3164\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_titleRectWithTitleString:origin:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be32b8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_imageRectWithOrigin:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3394\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_drawRectFor:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3f94\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setTouchRect:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4310\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _t1_drawHighlightWithContext:andRect:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be401c\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setTouchLogoRect:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4340\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setAutoTranslationExpanded:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2cc4\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton originalLanguage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4240\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton showingTranslation"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4260\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton logoTapActionBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be429c\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton selectionPadding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42c8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _dynamicColorsDidReload:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3ed0\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton titleText"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42b8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _titleColor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2ea8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton logoImage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be42e8\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton _logoImage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2d14\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton dealloc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be28e4\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton .cxx_destruct"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be4358\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton initWithFrame:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be27dc\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton sizeThatFits:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3408\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setHighlighted:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2b08\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton drawRect:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be3798\n-"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("T1TranslateButton setTitleText:"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(":0x101be2c38\n")])])]),a("h3",{attrs:{id:"_3、替换原方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3、替换原方法"}},[t._v("#")]),t._v(" 3、替换原方法")]),t._v(" "),a("p",[a("code",[t._v("Interceptor.attach()")]),t._v(" 可以在拦截目标后，打印参数，修改返回值，但无法阻止原方法的执行")]),t._v(" "),a("p",[t._v("我们可以给原方法的 "),a("code",[t._v("implementation")]),t._v(" 进行赋值，从而覆盖其实现")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("var didTap = ObjC.classes.T1TranslateButton['- _didTap:forEvent:']\n\nvar didTapOldImp = didTap.implementation\n\n// 覆盖实现\ndidTap.implementation = ObjC.implement(setTitle, function(handle, selector, arg1, arg2) {\n\n var self = ObjC.Object(handle)\n console.log(\"self -- \", self) \n\n // 调用旧实现\n // didTapOldImp(handle, selector, arg1, arg2)\n})\n")])])]),a("p",[t._v("这里需要注意的是，像 "),a("code",[t._v("_didTap:forEvent:")]),t._v(" 这里需要传递两个参数，则 "),a("code",[t._v("ObjC.implement")]),t._v(" 的回调中也需要写明两个参数（"),a("code",[t._v("arg1")]),t._v("、"),a("code",[t._v("arg2")]),t._v("），即需要多少参数就写多少，没有则不用写")]),t._v(" "),a("h3",{attrs:{id:"_4、rpc-调用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4、rpc-调用"}},[t._v("#")]),t._v(" 4、"),a("code",[t._v("RPC")]),t._v(" 调用")]),t._v(" "),a("p",[a("code",[t._v("RPC")]),t._v("：即 "),a("code",[t._v("Remote Procedure Call")]),t._v("，远程过程调用，开发人员可以将封装好的任意函数指定为 "),a("code",[t._v("RPC")]),t._v(" 函数，以提供给 "),a("code",[t._v("Python")]),t._v(" 使用。")]),t._v(" "),a("p",[t._v("利用 "),a("code",[t._v("rpc.exports = {}")]),t._v(" 导出 "),a("code",[t._v("RPC")]),t._v(" 函数，多个函数以逗号分隔，注意：方法名需要全小写！")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getHomeDirectory")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" NSHomeDirectory "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NativeFunction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ptr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findExportByName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Foundation"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"NSHomeDirectory"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pointer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" path "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Object")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("NSHomeDirectory")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toString")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("openUrl")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" UIApplication "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIApplication"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("sharedApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" toOpen "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ObjC"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NSURL")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("URLWithString_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" UIApplication"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("openURL_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("toOpen"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSystemSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" playSound "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NativeFunction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findExportByName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'AudioToolbox'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'AudioServicesPlaySystemSound'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'void'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'int'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1111")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 导出 RPC 函数")]),t._v("\nrpc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("openurl")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("openUrl")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("sound")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("playSystemSound")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showAlert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("homedirectory")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// homedirectory 必须小写")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getHomeDirectory")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("Python")]),t._v(" 端使用 "),a("code",[t._v("rpc.js")])]),t._v(" "),a("div",{staticClass:"language-python extra-class"},[a("pre",{pre:!0,attrs:{class:"language-python"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" codecs\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" frida\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'__main__'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frida"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("get_usb_device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n session "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Twitter'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 读取 JS 脚本 ")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" codecs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("open")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./rpc.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'r'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" f"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n source "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" f"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("read"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n script "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("create_script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("source"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("load"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n rpc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" script"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports\n rpc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("openurl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://fullstackaction.com"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n rpc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sound"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rpc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("homeDirectory"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# print(rpc)")]),t._v("\n\n session"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detach"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"六、最后"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#六、最后"}},[t._v("#")]),t._v(" 六、最后")]),t._v(" "),a("p",[t._v("以上代码已经上传至："),a("a",{attrs:{href:"https://github.com/LinXunFeng/frida_study",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/frida_study"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("code",[t._v("Frida")]),t._v(" 提供的 "),a("code",[t._v("API")]),t._v(" 接口十分丰富，这里只提到了常用的内容，更多内容还是需要我们一起去阅读官方文档："),a("a",{attrs:{href:"https://frida.re/docs/javascript-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://frida.re/docs/javascript-api"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("除此之外，"),a("a",{attrs:{href:"https://codeshare.frida.re/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://codeshare.frida.re"),a("OutboundLink")],1),t._v(" 上提供很多共享脚本，大家可以用来学习和引入使用")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/115.223ca2dc.js b/assets/js/115.223ca2dc.js new file mode 100644 index 000000000..72f1fea88 --- /dev/null +++ b/assets/js/115.223ca2dc.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{466:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、抽象类的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、抽象类的使用"}},[t._v("#")]),t._v(" 一、抽象类的使用")]),t._v(" "),s("p",[s("code",[t._v("Dart")]),t._v(" 抽象类可以只声明方法，也可以有具体的方法实现，但是不能直接用抽象类来创建实例，只能被继承使用或者充当接口。")]),t._v(" "),s("p",[t._v("定义一个抽象类 "),s("code",[t._v("Animal")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 仅声明eat方法")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("eat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明方法，且有具体实现")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"睡觉"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("继承使用")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("eat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"喵喵吃"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以不实现 sleep 方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("充当接口")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("eat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"吃"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 必须实现 sleep 方法")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'睡'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("实例化")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" animal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 抽象类实例化会报错")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Error: The class 'Test' is abstract and can't be instantiated.")]),t._v("\n")])])]),s("blockquote",[s("ul",[s("li",[t._v("抽象类不能实例化。")]),t._v(" "),s("li",[t._v("继承: 子类比较实现抽象方法，子类可以不重写抽象类中已实现的方法。")]),t._v(" "),s("li",[t._v("接口: 必须实现抽象类中声明的所有方法")])])]),t._v(" "),s("h2",{attrs:{id:"二、抽象类的实例化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、抽象类的实例化"}},[t._v("#")]),t._v(" 二、抽象类的实例化")]),t._v(" "),s("p",[t._v("上面提到了抽象类不能用于创建实例，但是有没有发现，"),s("code",[t._v("Dart")]),t._v(" 提供的 "),s("code",[t._v("Map")]),t._v(" 和 "),s("code",[t._v("List")]),t._v(" 就是抽象类，却可以直接使用它们创建出一个实例对象")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" dict "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("我们来看一下 "),s("code",[t._v("Map")]),t._v(" 的源码：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220715.png",alt:"Map源码"}})]),t._v(" "),s("p",[s("code",[t._v("Map")]),t._v(" 的确是抽象类，不过此时我们也注意到了，在 "),s("code",[t._v("Map")]),t._v(" 这个抽象类中，定义了一个工厂构造方法，"),s("strong",[t._v("这就是使抽象类可实例化的关键所在，因为工厂方法可以返回一个实例对象，但这个对象的类型不一定就是当前类!")])]),t._v(" "),s("p",[t._v("在这个地方，"),s("code",[t._v("Map")]),t._v(" 的工厂方法并没有具体的实现，而只是在工厂构造方法前加了一个关键字 "),s("code",[t._v("external")]),t._v("。\n"),s("code",[t._v("external")]),t._v(" 关键字可以让方法的声明与实现分离，即 可以由外部来帮我们完成具体的方法实现，那外部如何才能关联到该声明的方法呢？这里就需要用到注解 "),s("code",[t._v("@patch")]),t._v("，使外部的方法实现与该声明的方法绑定")]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("external")]),t._v(" 可以分离方法的声明与实现\n"),s("code",[t._v("@patch")]),t._v(" 关联某个类中用 "),s("code",[t._v("external")]),t._v(" 修饰的方法的实现")])]),t._v(" "),s("p",[t._v("根据如下路径可以找到 "),s("code",[t._v("Map")]),t._v(" 的具体实现源码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/map_patch.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@patch")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("可以看到，这里使用了 "),s("code",[t._v("LinkedHashMap")]),t._v(" 来实现 "),s("code",[t._v("Map")]),t._v(" 。")]),t._v(" "),s("p",[t._v("我们再去看一下 "),s("code",[t._v("LinkedHashMap")]),t._v(" 的实现源码，路径如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/collection/linked_hash_map.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("external")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("bool "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" equals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n int "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" hashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" isValidKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("这里我们又发现 "),s("code",[t._v("LinkedHashMap")]),t._v(" 也仅仅只是声明，找到具体实现")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/collection_patch.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@patch")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@patch")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("bool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("equals")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),t._v(" key1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),t._v(" key2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n int "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hashCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isValidKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("potentialKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isValidKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hashCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("equals "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" _InternalLinkedHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n hashCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _defaultHashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identical")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("identityHashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("identical")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("identical"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" equals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" _CompactLinkedIdentityHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n equals "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _defaultEquals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n hashCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _defaultHashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n equals "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _defaultEquals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" _CompactLinkedCustomHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("equals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hashCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isValidKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看到，"),s("code",[t._v("LinkedHashMap")]),t._v("的工厂构造方法返回的实例类型是 "),s("code",[t._v("_InternalLinkedHashMap")]),t._v(" 或 "),s("code",[t._v("_CompactLinkedCustomHashMap")]),t._v(" ，这里我们再看一下这两个类的实现源码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/compact_hash.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@pragma")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vm:entry-point"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _InternalLinkedHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" _HashVMBase\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMixin")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _LinkedHashMapMixin"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _OperatorEqualsAndHashCode\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_InternalLinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_INITIAL_INDEX_SIZE"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _hashMask "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_indexSizeToHashMask")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_INITIAL_INDEX_SIZE"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filled")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_INITIAL_INDEX_SIZE"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _usedData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _deletedKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _CompactLinkedIdentityHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" _HashFieldBase\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMixin")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _LinkedHashMapMixin"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _IdenticalAndIdentityHashCode\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_CompactLinkedIdentityHashMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_INITIAL_INDEX_SIZE"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _CompactLinkedCustomHashMap"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" _HashFieldBase\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMixin")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _LinkedHashMapMixin"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _HashBase\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LinkedHashMap")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _equality"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _hasher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _validKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO(koda): Ask gbracha why I cannot have fields _equals/_hashCode.")]),t._v("\n int "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_hashCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_hasher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_equals")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_equality")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n bool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("containsKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_validKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("containsKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("operator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_validKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_validKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_CompactLinkedCustomHashMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_equality"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_hasher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" validKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _validKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("validKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" validKey "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" _TypeTest"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_HashBase"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_INITIAL_INDEX_SIZE"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("它们都是一个普通的类，没有工厂构造方法，也就是说 "),s("code",[t._v("Map")]),t._v(" 中的 "),s("code",[t._v("external factory Map();")]),t._v(" 最终返回的最终实例类型为 "),s("code",[t._v("_InternalLinkedHashMap")]),t._v(" 或 "),s("code",[t._v("_CompactLinkedCustomHashMap")])]),t._v(" "),s("p",[t._v("我们可以做一个简单的验证")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" map "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("runtimeType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// _InternalLinkedHashMap")]),t._v("\n")])])]),s("p",[t._v("我们来试着来实例化一个抽象类吧")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("eat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"睡觉"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("eat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"吃"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'睡'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" animal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Animal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("animal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("runtimeType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印结果: Cat")]),t._v("\n")])])]),s("p",[t._v("可能会有同学要问了，这里用的是接口的方式，可以用继承的方式吗？\n"),s("strong",[t._v("很遗憾不行，因为在抽象类中定义了工厂构造方法后，在子类中不能定义除工厂构造方法外的其它构造方法了，会报错~")])]),t._v(" "),s("p",[t._v("总结一下：")]),t._v(" "),s("blockquote",[s("p",[t._v("抽象类无法直接创建实例，但是可以通过实现工厂构造方法来间接实现抽象类的实例化！")])]),t._v(" "),s("h2",{attrs:{id:"三、补充"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、补充"}},[t._v("#")]),t._v(" 三、补充")]),t._v(" "),s("p",[t._v("那饶了这么一大圈，为什么不直接在声明的时候就给它实现了呢？🤔\n这样做的好处就是：")]),t._v(" "),s("blockquote",[s("ul",[s("li",[t._v("复用同一套API的声明")]),t._v(" "),s("li",[t._v("可以针对不同的平台做不同的实现")])])]),t._v(" "),s("p",[t._v("而 "),s("code",[t._v("针对不同的平台做不同的实现")]),t._v(" 这一点在下方给出的源码中可以看出")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/io/file_system_entity.dart")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _FileSystemWatcher "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("external")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stream")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileSystemEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int events"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bool recursive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("external")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" bool "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" isSupported"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter/bin/cache/dart-sdk/lib/_internal/vm/bin/file_patch.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@patch")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stream")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileSystemEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int events"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bool recursive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Platform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isLinux"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_InotifyFileSystemWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" events"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" recursive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_stream"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Platform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isWindows"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_Win32FileSystemWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" events"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" recursive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_stream"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Platform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isMacOS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_FSEventStreamFileSystemWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" events"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" recursive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_stream"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileSystemException")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"File system watching is not supported on this platform"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/116.b0e467c1.js b/assets/js/116.b0e467c1.js new file mode 100644 index 000000000..c3202c0bc --- /dev/null +++ b/assets/js/116.b0e467c1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{595:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、思考"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、思考"}},[t._v("#")]),t._v(" 一、思考")]),t._v(" "),s("p",[t._v("做 "),s("code",[t._v("iOS")]),t._v(" 开发时这个功能很常用， 在 "),s("code",[t._v("OC")]),t._v(" 和 "),s("code",[t._v("Swift")]),t._v(" 中都可以很轻松实现，因为系统本来就提供了用于日志输出的预处理宏，只要我们拿来拼接就可以了，但是在 "),s("code",[t._v("Dart")]),t._v(" 中并不提供这些，那有什么办法实现它呢？")]),t._v(" "),s("p",[t._v("我们回想在开发过程中，是不是发现只要一不小心抛异常，就可以看到类似如下的打印内容，而且还能清楚的知道异常是在哪个文件和哪一行的代码造成的。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220751.png",alt:""}})]),t._v(" "),s("blockquote",[s("p",[t._v("所以如果我们可以在调用函数时拿到当前调用堆栈，就可以取到一系列想要的数据。")])]),t._v(" "),s("h2",{attrs:{id:"二、实践"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、实践"}},[t._v("#")]),t._v(" 二、实践")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("dart:core")]),t._v(" 中提供了 "),s("code",[t._v("堆栈跟踪(StackTrace)")]),t._v("，可以通过 "),s("code",[t._v("StackTrace.current")]),t._v(" 取到当前的堆栈信息，打印如下图所示，会发现这不好拿到我们想要的信息。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220807.png",alt:""}})]),t._v(" "),s("p",[t._v("这里我用到了官方开发的一个包 "),s("a",{attrs:{href:"https://pub.dev/packages/stack_trace",target:"_blank",rel:"noopener noreferrer"}},[t._v("stack_trace"),s("OutboundLink")],1),t._v("，它可以将堆栈信息变得更多人性化，并方便我们查看堆栈信息和获取想要的数据。")]),t._v(" "),s("p",[s("strong",[t._v("ps: "),s("code",[t._v("stack_trace")]),t._v(" 在 "),s("code",[t._v("Flutter")]),t._v(" 环境下直接导包即可使用，而在纯 "),s("code",[t._v("Dart")]),t._v(" 下需要将其添加为依赖于"),s("code",[t._v("pubspec.yaml")]),t._v("中。")])]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("stack_trace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" ^1.9.3\n")])])]),s("p",[t._v("那下面我们来试试 "),s("a",{attrs:{href:"https://pub.dev/packages/stack_trace",target:"_blank",rel:"noopener noreferrer"}},[t._v("stack_trace"),s("OutboundLink")],1),t._v(" 的威力吧")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:stack_trace/stack_trace.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 StackTrace 对象转换成 Chain 对象")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当然，这里也可以直接用 Chain.current();")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" chain "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StackTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 拿出其中一条信息")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" chain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" frame "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"所在文件：')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uri")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" 所在行 ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("line")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" 所在列 ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("column")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// flutter: 所在文件：package:flutterlog/main.dart 所在行 55 所在列 23")]),t._v("\n")])])]),s("h2",{attrs:{id:"三、呈上代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、呈上代码"}},[t._v("#")]),t._v(" 三、呈上代码")]),t._v(" "),s("p",[t._v("下面我做了一点封装，直接拿走即可使用，打印效果如下所示：")]),t._v(" "),s("p",[t._v("完整的代码和示例请到GitHub上"),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_log",target:"_blank",rel:"noopener noreferrer"}},[t._v("【查看】"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220824.png",alt:""}})]),t._v(" "),s("p",[t._v("代码：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// log.dart")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n debug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 💚 DEBUG")]),t._v("\n warning"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 💛 WARNING")]),t._v("\n info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 💙 INFO")]),t._v("\n error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ❤️ ERROR")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" msg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),t._v(" mode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("kReleaseMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// release模式不打印")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" chain "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Chain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Chain.forTrace(StackTrace.current);")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 core 和 flutter 包的堆栈合起来（即相关数据只剩其中一条）")]),t._v("\n chain "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" chain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("foldFrames")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isCore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("package "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"flutter"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出所有信息帧")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" frames "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" chain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 找到当前函数的信息帧")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" idx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexWhere")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("member "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"FLog"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("idx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" idx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用当前函数的函数信息帧")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" frame "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" frames"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("idx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" modeStr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n modeStr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"💚 DEBUG"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("warning"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n modeStr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"💛 WARNING"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n modeStr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"💙 INFO"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FLogMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n modeStr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"❤️ ERROR"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("modeStr")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(' ${frame.uri.toString().split("')])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('").last}(')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("line")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(") - ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("msg")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(' "')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/117.6abf027e.js b/assets/js/117.6abf027e.js new file mode 100644 index 000000000..5549f98dc --- /dev/null +++ b/assets/js/117.6abf027e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{600:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("blockquote",[a("p",[t._v("目前大多数公司都有自己开发多年的项目，不可能直接用 "),a("code",[t._v("Flutter")]),t._v(" 从头开发一套，那样不实现，除非是小项目，因此只能是在原有的基础上用 "),a("code",[t._v("Flutter")]),t._v(" 来开发新业务或重构旧业务，而这里就需要用到 "),a("code",[t._v("Flutter")]),t._v(" 的 "),a("code",[t._v("混合开发")])])]),t._v(" "),a("h2",{attrs:{id:"一、创建flutter模块"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、创建flutter模块"}},[t._v("#")]),t._v(" 一、创建Flutter模块")]),t._v(" "),a("p",[t._v("使用混合开发就不能像之前一样直接上来就创建一个 "),a("code",[t._v("Flutter")]),t._v(" 项目，而是要使用 "),a("code",[t._v("Flutter模板")])]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# flutter_module_lxf 可以随便你命名")]),t._v("\nflutter create "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--template")]),t._v(" module flutter_module_lxf\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# --template 可以替换为 -t")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# flutter create -t module flutter_module_lxf")]),t._v("\n")])])]),a("p",[t._v("创建出来的 "),a("code",[t._v("Flutter")]),t._v(" 模块依然是可以像之前创建的"),a("code",[t._v("Flutter项目")]),t._v(" 一样打开和运行的。")]),t._v(" "),a("p",[t._v("目录下有也有 "),a("code",[t._v("ios")]),t._v(" 和 "),a("code",[t._v("android")]),t._v(" 目录，只不过前面加了个点 ，成了点目录。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220845.png",alt:""}})]),t._v(" "),a("h2",{attrs:{id:"二、ios"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、ios"}},[t._v("#")]),t._v(" 二、iOS")]),t._v(" "),a("h3",{attrs:{id:"集成"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#集成"}},[t._v("#")]),t._v(" 集成")]),t._v(" "),a("blockquote",[a("p",[t._v("通过 "),a("code",[t._v("Cocoapods")]),t._v(" ，将 "),a("code",[t._v("Flutter")]),t._v(" 模块编译成一个库，再到原生项目中进行引入和使用即可")])]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("Podfile")]),t._v(" 中添加两行配置")]),t._v(" "),a("div",{staticClass:"language-ruby extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ruby"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 指定我们刚刚创建的 Flutter 模块的路径")]),t._v("\nflutter_application_path "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../flutter_module_lxf'")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 拼接脚本文件的路径: .ios/Flutter/podhelper.rb")]),t._v("\nload "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("join"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.ios'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'podhelper.rb'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("在每个需要引用 "),a("code",[t._v("Flutter")]),t._v(" 的 "),a("code",[t._v("Target")]),t._v(" 下，都需要添加一行配置")]),t._v(" "),a("div",{staticClass:"language-ruby extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ruby"}},[a("code",[t._v("install_all_flutter_pods"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("添加后如下所示：")]),t._v(" "),a("div",{staticClass:"language-ruby extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ruby"}},[a("code",[t._v("flutter_application_path "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../flutter_module_lxf'")])]),t._v("\nload "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("join"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.ios'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'podhelper.rb'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nuse_frameworks"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\ntarget "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'LXFFlutterHybridDemo'")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("do")]),t._v("\n \n install_all_flutter_pods"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("end")]),t._v("\n")])])]),a("p",[t._v("添加完成后，执行一次 "),a("code",[t._v("pod install")])]),t._v(" "),a("p",[t._v("混合开发混合开发"),a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220859.png",alt:""}})]),t._v(" "),a("h3",{attrs:{id:"使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用"}},[t._v("#")]),t._v(" 使用")]),t._v(" "),a("blockquote",[a("p",[t._v("两个步骤")]),t._v(" "),a("ol",[a("li",[t._v("获取 Flutter引擎 "),a("code",[t._v("FlutterEngine")])]),t._v(" "),a("li",[t._v("通过 "),a("code",[t._v("FlutterEngine")]),t._v(" 创建 "),a("code",[t._v("FlutterViewController")])])])]),t._v(" "),a("h4",{attrs:{id:"基本使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基本使用"}},[t._v("#")]),t._v(" 基本使用")]),t._v(" "),a("p",[a("code",[t._v("AppDelegate")]),t._v(" 类中声明一个 "),a("code",[t._v("FlutterEngine")]),t._v(" 变量，在 "),a("code",[t._v("didFinishLaunchingWithOptions")]),t._v(" 方法中启动 "),a("code",[t._v("Flutter引擎")])]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// AppDelegate.swift")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Flutter")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@UIApplicationMain")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppDelegate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIResponder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplicationDelegate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 Flutter引擎")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("lazy")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" flutterEngine "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterEngine")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"lxf"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("application")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" application"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" didFinishLaunchingWithOptions launchOptions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchOptionsKey")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Any")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 启动 Flutter引擎")]),t._v("\n flutterEngine"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("ViewController")]),t._v(" 中添加一个按钮，点击弹出 "),a("code",[t._v("Flutter模块")])]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ViewController.swift")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("viewDidLoad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("viewDidLoad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" btn "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIButton")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("custom"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frame "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGRect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("44")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("backgroundColor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTarget")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token other-directive property"}},[t._v("#selector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("showFlutterVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("touchUpInside"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTitle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"弹出Flutter模块"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSubview")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@objc")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("showFlutterVc")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建FlutterViewController")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里的 engine 可以传 nil，Flutter会帮我们自动创建一个引擎，但是性能较差")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flutterVc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterViewController")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("engine"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchFlutterEngine")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nibName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bundle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" animated"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" completion"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("fetchFlutterEngine")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterEngine")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("shared"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("delegate "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppDelegate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutterEngine\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220934.jpg",alt:""}})]),t._v(" "),a("p",[t._v("如果遇到报 "),a("code",[t._v("Command PhaseScriptExecution failed with a nonzero exit code")]),t._v(" 错误，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110220918.png",alt:""}})]),t._v(" "),a("p",[t._v("请先用 "),a("code",[t._v("Android Studio")]),t._v(" 或 "),a("code",[t._v("VSCode")]),t._v(" 打开 "),a("code",[t._v("Flutter模块")]),t._v(" 项目并运行到iOS设备上，让其帮我们对iOS项目进行一些初始化配置。成功运行后就可以关闭 "),a("code",[t._v("Flutter模块")]),t._v(" 项目的运行了，接着再用 "),a("code",[t._v("Xcode")]),t._v(" 打开原生项目运行即可。")]),t._v(" "),a("h4",{attrs:{id:"修改初始路由"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#修改初始路由"}},[t._v("#")]),t._v(" 修改初始路由")]),t._v(" "),a("p",[t._v("官方文档里面提到，修改初始路由，需要在 "),a("code",[t._v("Flutter引擎")]),t._v(" 在 "),a("code",[t._v("run")]),t._v(" 之前，通过 "),a("code",[t._v("invokeMethod")]),t._v(" 调用 "),a("code",[t._v("setInitialRoute")]),t._v(" 方法进行设置，代码如下")]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改初始路由")]),t._v("\nflutterEngine"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("navigationChannel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("invokeMethod")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"setInitialRoute"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arguments"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/other"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 启动 Flutter引擎")]),t._v("\nflutterEngine"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("但是，我发现这样写并没有起任何作用，在 "),a("code",[t._v("Flutter")]),t._v(" 的官方 "),a("code",[t._v("issue")]),t._v(" 上也有人提到这个问题： "),a("a",{attrs:{href:"https://github.com/flutter/flutter/issues/59895",target:"_blank",rel:"noopener noreferrer"}},[t._v("【setInitialRoute is broken for iOS add-to-app #59895】"),a("OutboundLink")],1),t._v("，目前只能官方进行修复和调整 "),a("code",[t._v("API")])]),t._v(" "),a("p",[t._v("临时可以使用如下方式实现：")]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flutterVc "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterViewController")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("project"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterDartProject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nibName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bundle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nflutterVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setInitialRoute")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/other"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterVc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" animated"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" completion"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("虽然这么写可以实现这个功能，但是会有明显的类似卡顿的现象，因为使用这种方式去创建 "),a("code",[t._v("FlutterViewController")]),t._v(" 之前，会隐式创建和启动一个 "),a("code",[t._v("FlutterEngine")]),t._v("，而我们弹出 "),a("code",[t._v("FlutterViewController")]),t._v(" 时 "),a("code",[t._v("FlutterEngine")]),t._v(" 还没加载完毕，所以我们会看到先弹出了一个透明的界面，再显示 "),a("code",[t._v("/other")]),t._v(" 路由对应的界面视图。")]),t._v(" "),a("h4",{attrs:{id:"使用-flutterappdelegate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用-flutterappdelegate"}},[t._v("#")]),t._v(" 使用 FlutterAppDelegate")]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("FlutterAppDelegate")]),t._v("这个不是必要的操作，但是如果你想让 "),a("code",[t._v("Flutter模块")]),t._v(" 也能使用原生的功能的话，建议使用")]),t._v(" "),a("blockquote",[a("p",[t._v("原生功能")]),t._v(" "),a("ul",[a("li",[t._v("处理 "),a("code",[t._v("openURL")]),t._v(" 的回调")]),t._v(" "),a("li",[t._v("列表视图在点击状态栏后滚到顶部")])])]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppDelegate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterAppDelegate")]),t._v(" \n")])])]),a("p",[t._v("更具体的使用，请阅读 "),a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen?tab=no-engine-vc-swift-tab#using-the-flutterappdelegate",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"三、android"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、android"}},[t._v("#")]),t._v(" 三、Android")]),t._v(" "),a("p",[t._v("修改安卓项目 根目录下的 "),a("code",[t._v("settings.gradle")]),t._v(" 文件")]),t._v(" "),a("div",{staticClass:"language-groovy extra-class"},[a("pre",{pre:!0,attrs:{class:"language-groovy"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// settings.gradle")]),t._v("\n\ninclude "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':app'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// assumed existing content")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setBinding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Binding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gradle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("evaluate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new")]),t._v("\n settingsDir"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parentFile"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里的 flutter_module_lxf 请修改为你自己创建的Flutter模板目录名称")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'flutter_module_lxf/.android/include_flutter.groovy'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221002.png",alt:""}})]),t._v(" "),a("p",[t._v("修改安卓项目 "),a("code",[t._v("app")]),t._v(" 目录下的 "),a("code",[t._v("build.gradle")]),t._v(" 文件")]),t._v(" "),a("div",{staticClass:"language-groovy extra-class"},[a("pre",{pre:!0,attrs:{class:"language-groovy"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app/build.gradle")]),t._v("\n\ndependencies "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置flutter依赖")]),t._v("\n implementation "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("project")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':flutter'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("如果在编译的时候遇到如下错误")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("Default interface methods are only supported starting with Android N (--min-api 24): void androidx.lifecycle.DefaultLifecycleObserver.onCreate(androidx.lifecycle.LifecycleOwner)\n")])])]),a("p",[t._v("请确认是否指定了使用 "),a("code",[t._v("Java 8")]),t._v(" 进行编译 "),a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app/android/project-setup#java-8-requirement",target:"_blank",rel:"noopener noreferrer"}},[t._v("【官方文档 - Java 8 requirement】"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("修改安卓项目 "),a("code",[t._v("app")]),t._v(" 目录下的 "),a("code",[t._v("build.gradle")]),t._v(" 文件")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// app/build.gradle\n\nandroid {\n\t...\n compileOptions {\n sourceCompatibility 1.8\n targetCompatibility 1.8\n }\n ...\n}\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221020.png",alt:""}})]),t._v(" "),a("p",[t._v("修改 "),a("code",[t._v("app/src/main/AndroidManifest.xml")]),t._v(" 文件")]),t._v(" "),a("div",{staticClass:"language-xml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-xml"}},[a("code",[t._v("// app/src/main/AndroidManifest.xml\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("activity")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("io.flutter.embedding.android.FlutterActivity"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("theme")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@style/AppTheme"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("configChanges")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("hardwareAccelerated")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("true"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("windowSoftInputMode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("adjustResize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221032.png",alt:""}})]),t._v(" "),a("p",[t._v("添加一个按钮，点击弹出 "),a("code",[t._v("Flutter模块")])]),t._v(" "),a("div",{staticClass:"language-xml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-xml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- activity_main.xml --\x3e")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("Button")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@+id/btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("layout_width")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrap_content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("layout_height")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrap_content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("textSize")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("20sp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("text")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("弹出Flutter模块"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("background")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("#000000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("textColor")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("#ffffff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("gravity")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("onClick")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btnClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("div",{staticClass:"language-java extra-class"},[a("pre",{pre:!0,attrs:{class:"language-java"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MainActivity.java")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("btnClick")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("View")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("startActivity")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterActivity")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createDefaultIntent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"四、调试与热重载"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、调试与热重载"}},[t._v("#")]),t._v(" 四、调试与热重载")]),t._v(" "),a("blockquote",[a("p",[t._v("由于当前我们是使用原生开发工具(如：Xcode)来运行项目，每次修改我们的\n"),a("code",[t._v("Flutter模块")]),t._v(" 的代码，也就需要重新运行才能看到效果，不像之前按下 "),a("code",[t._v("Cmd + s")]),t._v(" 就能进行热重载。这样 "),a("code",[t._v("Flutter模块")]),t._v(" 的开发效率极其低下，那有没有办法可以让我们像之前开发 "),a("code",[t._v("Flutter")]),t._v(" 项目时那样进行 "),a("code",[t._v("热重载")]),t._v(" 呢？答案是有的")])]),t._v(" "),a("p",[a("code",[t._v("Flutter")]),t._v(" 官方提供了 "),a("code",[t._v("flutter attach")]),t._v(" ，以辅助我们开发，到终端下执行")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("flutter attach\n")])])]),a("p",[t._v("如果当前有多个设备，会提示我们需要指定 "),a("code",[t._v("attach")]),t._v(" 哪个设备")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221047.png",alt:""}})]),t._v(" "),a("p",[t._v("按要求加上指定参数即可")]),t._v(" "),a("div",{staticClass:"language-shell extra-class"},[a("pre",{pre:!0,attrs:{class:"language-shell"}},[a("code",[t._v("flutter attach "),a("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-d")]),t._v(" FE305309-9E79-418D-BA3F-7EFECF2980BC\n")])])]),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221151.png",alt:""}})]),t._v(" "),a("p",[t._v("如图，这样就关联上了，你在 "),a("code",[t._v("dart")]),t._v(" 文件里面对界面进行任何修改后，按 "),a("code",[t._v("r")]),t._v(" 进行热重载，按 "),a("code",[t._v("R")]),t._v(" 进行热启动。")]),t._v(" "),a("p",[t._v("如果你使用的是 "),a("code",[t._v("Android Studio")]),t._v("，可以直接选择对应的设备后，点击右边的 "),a("code",[t._v("Flutter Attach")]),t._v(" 按钮，执行成功后就可以跟之前一样按 "),a("code",[t._v("Cmd + s")]),t._v(" 进行热重载了。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221202.png",alt:""}})]),t._v(" "),a("h2",{attrs:{id:"五、资料"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#五、资料"}},[t._v("#")]),t._v(" 五、资料")]),t._v(" "),a("ul",[a("li",[a("p",[t._v("GitHub")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/LinXunFeng/LXFFlutterHybridDemo",target:"_blank",rel:"noopener noreferrer"}},[t._v("LXFFlutterHybridDemo"),a("OutboundLink")],1)])]),t._v(" "),a("li",[a("p",[t._v("官方文档")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app",target:"_blank",rel:"noopener noreferrer"}},[t._v("add-to-app"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app/ios",target:"_blank",rel:"noopener noreferrer"}},[t._v("add-to-app/ios"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app/android",target:"_blank",rel:"noopener noreferrer"}},[t._v("add-to-app/android"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://flutter.dev/docs/development/add-to-app/debugging",target:"_blank",rel:"noopener noreferrer"}},[t._v("Debugging & hot reload"),a("OutboundLink")],1)])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/118.e4a5a34b.js b/assets/js/118.e4a5a34b.js new file mode 100644 index 000000000..5de26af51 --- /dev/null +++ b/assets/js/118.e4a5a34b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{468:function(s,t,e){"use strict";e.r(t);var a=e(14),r=Object(a.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("p",[s._v("使用 "),t("code",[s._v("Xcode")]),s._v(" 手动打包是正常的，但是使用脚本打包会报错，错误如下：")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v("The following build commands failed:\n\tPhaseScriptExecution "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("CP-User"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("\\")]),s._v(" Run"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("\\")]),s._v(" Flutter"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("\\")]),s._v(" Build"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("\\")]),s._v(" Script "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("..")]),s._v("./Script-C3A097A8FE12FF5F875B057C.sh\n\t\nflutter build ios "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("--release")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("then")]),s._v(" re-run Archive from Xcode.\nCommand PhaseScriptExecution failed with a nonzero "),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("exit")]),s._v(" code\n")])])]),t("h2",{attrs:{id:"定位错误"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#定位错误"}},[s._v("#")]),s._v(" 定位错误")]),s._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221247.png",alt:""}})]),s._v(" "),t("p",[s._v("到 "),t("code",[s._v("Flutter")]),s._v(" 环境目录下，按图上所示地址找到 "),t("code",[s._v("xcode_backend.sh")]),s._v("，也可以直接看 "),t("a",{attrs:{href:"https://github.com/flutter/flutter/blob/bcc42901ad6bb3ec644be225b5f9cd998852e0ef/packages/flutter_tools/bin/xcode_backend.sh#L90-L101",target:"_blank",rel:"noopener noreferrer"}},[s._v("官方脚本链接"),t("OutboundLink")],1)]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# Archive builds (ACTION=install) should always run in release mode.")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("if")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"'),t("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$ACTION")]),s._v('"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("==")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"install"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("&&")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"'),t("span",{pre:!0,attrs:{class:"token variable"}},[s._v("$build_mode")]),s._v('"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("!=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"release"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("then")]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"========================================================================"')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"ERROR: Flutter archive builds must be run in Release mode."')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"To correct, ensure FLUTTER_BUILD_MODE is set to release or run:"')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"flutter build ios --release"')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('""')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"then re-run Archive from Xcode."')]),s._v("\n EchoError "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"========================================================================"')]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("exit")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-1")]),s._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("fi")]),s._v("\n")])])]),t("h2",{attrs:{id:"解决方案"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#解决方案"}},[s._v("#")]),s._v(" 解决方案")]),s._v(" "),t("p",[s._v("可以看到，官方脚本的说明里面给出两个解决方案")]),s._v(" "),t("blockquote",[t("p",[s._v("方案一：直接设置 "),t("code",[s._v("FLUTTER_BUILD_MODE")]),s._v(" 为 "),t("code",[s._v("release")])]),s._v(" "),t("p",[s._v("方案二：先运行 "),t("code",[s._v("flutter build ios --release")]),s._v(" ，再使用 "),t("code",[s._v("Xcode")]),s._v(" 去打包")])]),s._v(" "),t("p",[s._v("这里我们是用 "),t("code",[s._v("Jenkins")]),s._v(" 脚本进行打包，所以方案二不适用，方案一更加方便些")]),s._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 设置Flutter的编译模式为release")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token assign-left variable"}},[s._v("FLUTTER_BUILD_MODE")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v("release\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 执行原有项目的打包脚本")]),s._v("\n./script/build_iOS.sh\n")])])])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/119.b182a7f1.js b/assets/js/119.b182a7f1.js new file mode 100644 index 000000000..c85e8c2ce --- /dev/null +++ b/assets/js/119.b182a7f1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{470:function(t,s,a){"use strict";a.r(s);var e=a(14),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("近期将测试机升级至 "),s("code",[t._v("iOS14")]),t._v(" ，测试使用 "),s("code",[t._v("Flutter混合开发")]),t._v(" 的线上 "),s("code",[t._v("APP")]),t._v("，没发现什么问题，但是使用 "),s("code",[t._v("Xcode")]),t._v(" 安装"),s("code",[t._v("APP")]),t._v("的场景下，断开 "),s("code",[t._v("Xcode")]),t._v(" 后再运行却闪退了。")]),t._v(" "),s("p",[t._v("公司的 "),s("code",[t._v("APP")]),t._v(" 测试结果如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("APP来源")]),t._v(" "),s("th",[t._v("是否闪退")]),t._v(" "),s("th",[t._v("模式")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("线上")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("release")])]),t._v(" "),s("tr",[s("td",[t._v("蒲公英")]),t._v(" "),s("td",[t._v("是")]),t._v(" "),s("td",[t._v("debug")])]),t._v(" "),s("tr",[s("td",[t._v("Xcode")]),t._v(" "),s("td",[t._v("是（断开 "),s("code",[t._v("Xcode")]),t._v(" 后再打开 "),s("code",[t._v("APP")]),t._v(" ）")]),t._v(" "),s("td",[t._v("debug")])])])]),t._v(" "),s("h3",{attrs:{id:"问题原因"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#问题原因"}},[t._v("#")]),t._v(" 问题原因")]),t._v(" "),s("p",[t._v("闪退的原因是因为 "),s("code",[t._v("Flutter SDK")]),t._v(", "),s("code",[t._v("Flutter")]),t._v(" 官方的更新速度也是快，对 "),s("code",[t._v("iOS14")]),t._v(" 进行了说明： "),s("a",{attrs:{href:"https://flutter.dev/docs/development/ios-14",target:"_blank",rel:"noopener noreferrer"}},[t._v("Flutter官网说明链接"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("大致意思就是说，如果我们在 "),s("code",[t._v("iOS14")]),t._v(" 的真机上安装了 "),s("code",[t._v("debug模式")]),t._v(" 编译出来的 "),s("code",[t._v("flutter")]),t._v(" 应用，那么在断开编译安装连接后，将无法从桌面上打开该应用程序。")]),t._v(" "),s("h3",{attrs:{id:"解决方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#解决方案"}},[t._v("#")]),t._v(" 解决方案")]),t._v(" "),s("ol",[s("li",[t._v("再次是使用 "),s("code",[t._v("Xcode")]),t._v(" 或 "),s("code",[t._v("flutter run")]),t._v(" 来运行。")]),t._v(" "),s("li",[t._v("设置 "),s("code",[t._v("Flutter")]),t._v(" 模块的编译模式为 "),s("code",[t._v("profile")]),t._v(" 或 "),s("code",[t._v("release")])])]),t._v(" "),s("h3",{attrs:{id:"补充说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#补充说明"}},[t._v("#")]),t._v(" 补充说明")]),t._v(" "),s("ol",[s("li",[t._v("该闪退的情况只发生在真机，并且在模拟器运行的时候， "),s("code",[t._v("Flutter")]),t._v(" 模块的编译模式需要为 "),s("code",[t._v("debug")]),t._v("， 如果设置了 "),s("code",[t._v("release")]),t._v("，编译将会报错。")]),t._v(" "),s("li",[t._v("官方指出如果是 "),s("code",[t._v("纯Flutter项目")]),t._v(" 可以直接使用 "),s("code",[t._v("master channel")]),t._v(" 的 "),s("code",[t._v("Flutter版本")]),t._v(" 秒杀这个问题，但对混合开发并没有该说明，加上我们是使用闲鱼的 "),s("code",[t._v("flutter_boost")]),t._v(" 实现的混合开发，限制了 "),s("code",[t._v("Flutter")]),t._v(" 的版本，所以我也就没有去实践该方案对我们是否可行")])]),t._v(" "),s("h2",{attrs:{id:"二、尝试解决"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、尝试解决"}},[t._v("#")]),t._v(" 二、尝试解决")]),t._v(" "),s("p",[t._v("根据自己的实际情况，我选择了上述的第二个解决方案。")]),t._v(" "),s("h3",{attrs:{id:"配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置"}},[t._v("#")]),t._v(" 配置")]),t._v(" "),s("p",[t._v("用 "),s("code",[t._v("Xcode")]),t._v(" 打开工程项目，在 "),s("code",[t._v("Build Settings")]),t._v(" 的最下方找到 "),s("code",[t._v("User-Defined")]),t._v("，点击 "),s("code",[t._v("+")]),t._v(" 按钮，添加一个键为 "),s("code",[t._v("FLUTTER_BUILD_MODE")]),t._v(" ，值为 "),s("code",[t._v("release")]),t._v(" 的配置。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221341.png",alt:""}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221358.png",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"运行"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#运行"}},[t._v("#")]),t._v(" 运行")]),t._v(" "),s("p",[t._v("再次运行到真机上，断开 "),s("code",[t._v("Xcode")]),t._v(" 运行也不会崩溃了")]),t._v(" "),s("h3",{attrs:{id:"问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#问题"}},[t._v("#")]),t._v(" 问题")]),t._v(" "),s("p",[t._v("真机的问题看似是解决了，但是会有问题")]),t._v(" "),s("p",[t._v("问题一："),s("code",[t._v("release")]),t._v(" 或 "),s("code",[t._v("profile")]),t._v(" 模式下，"),s("code",[t._v("Flutter")]),t._v(" 使用的是 "),s("code",[t._v("AOT")]),t._v("，一些功能不能使用，如：代码断点调试，热重载")]),t._v(" "),s("p",[t._v("问题二：上面也提到了，模拟器只能运行在 "),s("code",[t._v("debug")]),t._v(" 模式下，而我们无法避免会在真机和模拟器之间反复切换运行，每次切换就需要手动调整 "),s("code",[t._v("FLUTTER_BUILD_MODE")]),t._v(" 的值，十分麻烦")]),t._v(" "),s("p",[t._v("那有什么好的办法解决上面遇到的问题呢？")]),t._v(" "),s("h2",{attrs:{id:"三、优化方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、优化方案"}},[t._v("#")]),t._v(" 三、优化方案")]),t._v(" "),s("p",[t._v("其实，真机上的 "),s("code",[t._v("APP")]),t._v(" 在断开 "),s("code",[t._v("Xcode")]),t._v(" 后无法运行，这个对我们开发者来说不是什么问题，问题是给到测试人员就必须要可以打开才行，包括蒲公英上的包，所以为了节省这些不必要的时间，我们需要自己动手撸一个帮助我们切换 "),s("code",[t._v("Flutter编译模式")]),t._v(" 的脚本。")]),t._v(" "),s("p",[t._v("在修改 "),s("code",[t._v("FLUTTER_BUILD_MODE")]),t._v(" 的值时，我从 "),s("code",[t._v("git")]),t._v(" 中发现，实际上是修改了 "),s("code",[t._v("项目.xcodeproj")]),t._v("，那目前有什么工具可以帮助我们修改 "),s("code",[t._v("xcodeproj")]),t._v(" 文件呢？")]),t._v(" "),s("p",[t._v("这里我找到了"),s("a",{attrs:{href:"https://github.com/kronenthaler/mod-pbxproj",target:"_blank",rel:"noopener noreferrer"}},[t._v("mod-pbxproj"),s("OutboundLink")],1),t._v("，安装和使用在该库的 "),s("code",[t._v("wiki")]),t._v(" 上写的很清楚，这里就不再赘述了，直接上代码")]),t._v(" "),s("div",{staticClass:"language-python extra-class"},[s("pre",{pre:!0,attrs:{class:"language-python"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" getopt\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" sys\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" pbxproj "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" XcodeProject\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" __name__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"__main__"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n argv "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("argv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 处理flutter_build_mode")]),t._v("\n flutter_build_mode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("False")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"release"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# target名称")]),t._v("\n target_name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("None")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n opts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" args "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" getopt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getopt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("argv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"p:m:t:"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path=, mode=, target="')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("except")]),t._v(" getopt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("GetoptError"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'switch_flutter_build_mode.py -p "plist文件路径" -m "模式(release|debug)" -t "target名称"\'')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" opt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" opts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" opt "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-p"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--path"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n project_path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" arg\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("project_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'请输入项目的地址'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" opt "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-m"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--mode"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n flutter_build_mode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("True")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arg "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("len")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"release"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" opt "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-t"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--target"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n target_name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" arg\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 处理flutter")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" flutter_build_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n fileName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" project_path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("split"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("not")]),t._v(" fileName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("endswith"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xcodeproj"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"请使用-p指定.xcodeproj文件的路径"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n sys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n project "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" XcodeProject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("load"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("project_path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project.pbxproj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 设置 User-Defined (如果target_name是None，则每个target都会设置flag)")]),t._v("\n project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("set_flags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'FLUTTER_BUILD_MODE'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" flutter_build_mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" target_name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("save"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("使用也很简单，终端直接输入如下命令")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("python switch_flutter_build_mode.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/项目.xcodeproj'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-t")]),t._v(" target名称 "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" release\n")])])]),s("p",[t._v("各参数说明")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("用途")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("-p")]),t._v(" "),s("td",[s("code",[t._v("xcodeproj")]),t._v(" 文件的路径")])]),t._v(" "),s("tr",[s("td",[t._v("-t")]),t._v(" "),s("td",[s("code",[t._v("target")]),t._v(" 名称")])]),t._v(" "),s("tr",[s("td",[t._v("-m")]),t._v(" "),s("td",[t._v("编译模式 ( "),s("code",[t._v("release")]),t._v("、"),s("code",[t._v("debug")]),t._v("、"),s("code",[t._v("profile")]),t._v(" )")])])])]),t._v(" "),s("p",[t._v("PS: 脚本基于 "),s("code",[t._v("Python3")])]),t._v(" "),s("p",[t._v("我们是使用 "),s("code",[t._v("Jenkins")]),t._v(" 进行打包并自动上传至蒲公英的，所以只需要在 "),s("code",[t._v("Jenkins")]),t._v(" 中配置打包前调用该脚本即可。")]),t._v(" "),s("p",[t._v("最后再结合 "),s("a",{attrs:{href:"http://fitztrev.github.io/shuttle/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Shuttle"),s("OutboundLink")],1),t._v(" 这个软件，就可以实现以界面的方式去切换编译模式了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210110221411.png",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"四、最后说两句"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、最后说两句"}},[t._v("#")]),t._v(" 四、最后说两句")]),t._v(" "),s("p",[t._v("本文是基于 "),s("code",[t._v("Flutter混合开发")]),t._v(" 进行说明的，如果有什么不对或不足的地方，欢迎指正，感谢大家的阅读")])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/12.89984f36.js b/assets/js/12.89984f36.js new file mode 100644 index 000000000..5a03552f4 --- /dev/null +++ b/assets/js/12.89984f36.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{365:function(t,n,s){"use strict";s.r(n);var e=s(14),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/120.25fc9579.js b/assets/js/120.25fc9579.js new file mode 100644 index 000000000..68f919ec4 --- /dev/null +++ b/assets/js/120.25fc9579.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{472:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、问题"}},[t._v("#")]),t._v(" 一、问题")]),t._v(" "),s("p",[t._v("我先跳转至 "),s("code",[t._v("Flutter")]),t._v(" 页面，1秒后在 "),s("code",[t._v("Flutter")]),t._v(" 页面上添加一个原生的弹窗视图，代码如下：")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flutterVc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("engine"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchFlutterEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nibName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("navigationController"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pushViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterVc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" animated"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DispatchQueue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("main"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("asyncAfter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deadline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DispatchTime")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("seconds")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" popView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFPopView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CGRect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" screenW"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" screenH"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n flutterVc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSubview")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("popView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n popView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("checkInfoBlock "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("weak")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("guard")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("navigationController"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pushViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InfoViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" animated"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204040001676.gif",alt:""}})]),t._v(" "),s("p",[t._v("可以看到，我在原生弹窗视图上滑动和点击，会被底下的 "),s("code",[t._v("Flutter")]),t._v(" 内容所响应~")]),t._v(" "),s("p",[t._v("有人会说，直接添加到 "),s("code",[t._v("navigationController")]),t._v(" 的 "),s("code",[t._v("view")]),t._v(" 上不就行了吗？")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("// flutterVc.view.addSubview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("popView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nself.navigationController?.view.addSubview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("popView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("不行，因为跳转到其它页面后会遮挡其它页面内容，看效果图便一目了然")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204040001526.gif",alt:""}})]),t._v(" "),s("p",[t._v("接下来我们一起来看看 "),s("code",[t._v("FlutterViewController")]),t._v(" 源码，便可知道原因了")]),t._v(" "),s("h2",{attrs:{id:"二、源码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、源码"}},[t._v("#")]),t._v(" 二、源码")]),t._v(" "),s("h3",{attrs:{id:"_1、定位匹配的源码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、定位匹配的源码"}},[t._v("#")]),t._v(" 1、定位匹配的源码")]),t._v(" "),s("p",[t._v("首先找到与当前 "),s("code",[t._v("Flutter")]),t._v(" 环境相匹配的源码内容")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ flutter doctor "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-v")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("✓"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Flutter "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Channel stable, "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.10")]),t._v(".4, on macOS "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12.2")]),t._v(".1 21D62 darwin-x64, locale\n zh-Hans-CN"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n • Flutter version "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.10")]),t._v(".4 at /Users/lxf/developer/flutter\n • Upstream repository https://github.com/flutter/flutter.git\n • Framework revision c860cba910 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),t._v(" days ago"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2022")]),t._v("-03-25 00:23:12 "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-0500")]),t._v("\n • Engine revision 57d3bac3dd\n • Dart version "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.16")]),t._v(".2\n • DevTools version "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.9")]),t._v(".2\n • Pub download mirror https://pub.flutter-io.cn\n • Flutter download mirror https://storage.flutter-io.cn\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),s("p",[t._v("从此处可以拿到 "),s("code",[t._v("Engine")]),t._v(" 的 "),s("code",[t._v("commit id")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("Engine revision 57d3bac3dd\n")])])]),s("p",[t._v("将下方链接中的 "),s("code",[t._v("【commit id】")]),t._v(" 进行替换即可得到相匹配的源码链接了")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("https://github.com/flutter/engine/blob/【commit id】/shell/platform/darwin/ios/framework/Source/FlutterViewController.mm\n")])])]),s("p",[t._v("链接： "),s("a",{attrs:{href:"https://github.com/flutter/engine/blob/57d3bac3dd/shell/platform/darwin/ios/framework/Source/FlutterViewController.mm",target:"_blank",rel:"noopener noreferrer"}},[t._v("engine/FlutterViewController.mm at 57d3bac3dd"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"_2、定位造成问题的源码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、定位造成问题的源码"}},[t._v("#")]),t._v(" 2、定位造成问题的源码")]),t._v(" "),s("p",[t._v("经过源码的查看，可以很快定位到如下部分的内容：")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v(" \n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touchesBegan"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches withEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIEvent"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("touches pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nullptr event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touchesMoved"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches withEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIEvent"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("touches pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nullptr event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touchesEnded"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches withEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIEvent"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("touches pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nullptr event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touchesCancelled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches withEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIEvent"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("touches pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nullptr event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("forceTouchesCancelled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("PointerData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("Change cancel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("PointerData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("Change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("kCancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("touches pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("cancel event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nullptr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Dispatches the UITouches to the engine. Usually, the type of change of the touch is determined")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// from the UITouch's phase. However, FlutterAppDelegate fakes touches to ensure that touch events")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in the status bar area are available to framework code. The change type (optional) of the faked")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// touch is specified in the second argument.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("dispatchTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSSet"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("touches\n pointerDataChangeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("PointerData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("Change"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("overridden_change\n event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIEvent"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看到，在 "),s("code",[t._v("FlutterViewController")]),t._v(" 内部，重写了 "),s("code",[t._v("touchesXXX")]),t._v(" 系列的方法，然后统一调用 "),s("code",[t._v("- dispatchTouches:pointerDataChangeOverride:event:")]),t._v(" 方法，将 "),s("code",[t._v("UITouches")]),t._v(" 分发至 "),s("code",[t._v("Flutter")]),t._v(" 引擎，从而与 "),s("code",[t._v("Flutter")]),t._v(" 内容进行交互")]),t._v(" "),s("p",[t._v("这便是我们在原生弹窗上的点击、拖拽操作会被 "),s("code",[t._v("Flutter")]),t._v(" 内容所响应的原因。")]),t._v(" "),s("h2",{attrs:{id:"三、解决问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、解决问题"}},[t._v("#")]),t._v(" 三、解决问题")]),t._v(" "),s("p",[t._v("既然我们已经知道原因所在，现在就好想办法去解决这个问题了")]),t._v(" "),s("p",[t._v("这里我直接给出最终实现代码：")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// LXFFlutterViewController.swift")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Foundation")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Flutter")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterForbidResponseProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("touchesBegan")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UITouch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIEvent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isForbidResponse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touches began"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("touchesBegan")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("touchesMoved")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UITouch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIEvent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touches move"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("touchesMoved")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("touchesEnded")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UITouch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIEvent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touches ended"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("touchesEnded")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("touchesCancelled")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UITouch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIEvent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isForbidResponse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isForbidResponseForFlutter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touches cacelled"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("touchesCancelled")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("touches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" with"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterViewController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("isForbidResponse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" subViews "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("subviews "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("??")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n subViews "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reversed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("..<")]),t._v("subViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" subView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isHadForbidResponseView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" subView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fileprivate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("isHadForbidResponseView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterForbidResponseProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" subViews "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("subviews\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("..<")]),t._v("subViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" subView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isHadForbidResponseView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" subView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204040002197.png",alt:""}})]),t._v(" "),s("p",[t._v("上图可以看到，在 "),s("code",[t._v("FlutterView")]),t._v(" 中，"),s("code",[t._v("LXFPopView")]),t._v(" 这一类的弹窗视图一般都会在使用时才会插入到视图中，所以在 "),s("code",[t._v("isForbidResponse")]),t._v(" 方法里进行反转遍历子视图，以减少遍历次数。")]),t._v(" "),s("p",[s("code",[t._v("touchesMoved")]),t._v(" 调用次数较多，所以为了避免在 "),s("code",[t._v("touchesMoved")]),t._v(" 中去高频率的遍历 "),s("code",[t._v("subViews")]),t._v("，这里使用了 "),s("code",[t._v("isForbidResponseForFlutter")]),t._v(" 变量，在 "),s("code",[t._v("touchesBegan")]),t._v(" 时判断并记录是否需要禁用 "),s("code",[t._v("Flutter")]),t._v(" 内容响应触摸事件，在 "),s("code",[t._v("touchesEnded")]),t._v(" 和 "),s("code",[t._v("touchesCancelled")]),t._v(" 中对 "),s("code",[t._v("isForbidResponseForFlutter")]),t._v(" 重置为 "),s("code",[t._v("false")])]),t._v(" "),s("h2",{attrs:{id:"四、使用步骤"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、使用步骤"}},[t._v("#")]),t._v(" 四、使用步骤")]),t._v(" "),s("p",[t._v("步骤一：")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("LXFFlutterViewController")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flutterVc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterViewController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("engine"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchFlutterEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nibName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("步骤二：")]),t._v(" "),s("p",[t._v("令弹窗视图所在类遵守协议："),s("code",[t._v("LXFFlutterForbidResponseProtocol")])]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFPopView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFFlutterForbidResponseProtocol")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("看看效果如何：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204040002380.gif",alt:""}})]),t._v(" "),s("p",[t._v("完美 😃")]),t._v(" "),s("p",[t._v("最后附上 "),s("code",[t._v("Demo")]),t._v(" 链接："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_hybrid_touch_response_demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("LinXunFeng/flutter_hybrid_touch_response_demo (github.com)"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/121.59c401c2.js b/assets/js/121.59c401c2.js new file mode 100644 index 000000000..25af5cbd9 --- /dev/null +++ b/assets/js/121.59c401c2.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{471:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"背景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#背景"}},[t._v("#")]),t._v(" 背景")]),t._v(" "),s("p",[t._v("这是之前需求需要实现的效果：")]),t._v(" "),s("ol",[s("li",[t._v("一进入页面显示的是品牌广告视图（代号: "),s("code",[t._v("A")]),t._v("），上拉超过一定的距离后，向上翻到相册视图（代号: "),s("code",[t._v("B")]),t._v("）")]),t._v(" "),s("li",[t._v("下拉超过一定距离后切换为 "),s("code",[t._v("A")]),t._v("，快速下拉回到顶部的情况下不会切换到 "),s("code",[t._v("A")]),t._v(" ！")])]),t._v(" "),s("p",[t._v("这里的 "),s("code",[t._v("A")]),t._v(" 和 "),s("code",[t._v("B")]),t._v(" 对应的就是下图效果图中的 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 视图")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204172014548.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"实现逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#实现逻辑"}},[t._v("#")]),t._v(" 实现逻辑")]),t._v(" "),s("p",[t._v("定义正在展示的视图类型")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bbb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("添加变量 "),s("code",[t._v("headerFlipShowingType")]),t._v(" 用来记录当前 "),s("code",[t._v("header")]),t._v(" 正在显示的类型，默认为 "),s("code",[t._v("aaa")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 当前header翻页视图显示的视图类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),t._v(" headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("主体结构")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildHeaderWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// header（AAA + BBB）")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 正常的列表 （显示：index -- 下标）")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListTile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index -- ')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("index")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 右下角的浮动按钮，用来切换 header")]),t._v("\n floatingActionButton"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FloatingActionButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n onPressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bbb\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("从上到下，依次为 "),s("code",[t._v("header")]),t._v("，正常的列表数据，以及右下角按钮，点击按钮以测试切换效果")]),t._v(" "),s("p",[t._v("接下来是 "),s("code",[t._v("header")]),t._v(" 的构建方法内容，为了方便理解，先来看看整体结构")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildHeaderWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 限制 Stack 的高度，否则报错")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" headerFlipHeightA\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightB\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n clipBehavior"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clip")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 子视图超出 Stack 不裁剪，依旧显示")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// AAA 与 BBB 加起来的总高度")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 消除顶部刘海造成的安全区域偏移")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NeverScrollableScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不可滚动")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"AAA"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFFFA5252")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"BBB"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFF228BE6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("在 "),s("code",[t._v("header")]),t._v(" 中，"),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 视图都是存放到 "),s("code",[t._v("ListView")])]),t._v(" "),s("li",[t._v("包裹"),s("code",[t._v("Stack")]),t._v(" 的 "),s("code",[t._v("SizedBox")]),t._v(" 就是为了控制 "),s("code",[t._v("header")]),t._v(" 的高度，且 "),s("code",[t._v("header")]),t._v(" 的高度会跟随当前展示的类型而改变，如：当前展示 "),s("code",[t._v("AAA")]),t._v("，则高度为 "),s("code",[t._v("AAA")]),t._v(" 视图的高度，展示 "),s("code",[t._v("BBB")]),t._v(" 时，则高度为 "),s("code",[t._v("BBB")]),t._v(" 视图的高度")]),t._v(" "),s("li",[t._v("使用 "),s("code",[t._v("Stack")]),t._v(" + "),s("code",[t._v("Positioned")]),t._v(" 这个组合，将 "),s("code",[t._v("Positioned")]),t._v(" 的 "),s("code",[t._v("bottom")]),t._v(" 设置为 "),s("code",[t._v("0")]),t._v("，即 "),s("code",[t._v("ListView")]),t._v(" 的底部紧贴 "),s("code",[t._v("Stack")]),t._v(" 的底部，使得 "),s("code",[t._v("ListView")]),t._v(" 只能向上超出 "),s("code",[t._v("Stack")])]),t._v(" "),s("li",[s("code",[t._v("Stack")]),t._v(" 设置了 "),s("code",[t._v("clipBehavior")]),t._v(" 为 "),s("code",[t._v("Clip.none")]),t._v("，因此在正在显示 "),s("code",[t._v("BBB")]),t._v(" 视图的情况下，下拉列表可以看到 "),s("code",[t._v("AAA")]),t._v(" 的视图内容")]),t._v(" "),s("li",[t._v("固定 "),s("code",[t._v("Positioned")]),t._v(" 的 高度为 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 视图的总高，目的是为了结合后面提及的透明 "),s("code",[t._v("Container")]),t._v("（或者说 "),s("code",[t._v("AnimatedContainer B")]),t._v("）， 方便控制 "),s("code",[t._v("BBB")]),t._v(" 视图的显示")])]),t._v(" "),s("p",[t._v("如果这里还不太理解 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 的显示逻辑也不用担心，下面会进行详细说明")]),t._v(" "),s("p",[t._v("我们来看看此时的效果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204172015631.gif",alt:""}})]),t._v(" "),s("p",[t._v("为了完整显示 "),s("code",[t._v("AAA")]),t._v(" 视图，且不显示 "),s("code",[t._v("BBB")]),t._v(" 视图，在 "),s("code",[t._v("AAA")]),t._v(" 的前边添加一个透明的 "),s("code",[t._v("Container")]),t._v("，并把高度设置为 "),s("code",[t._v("BBB")]),t._v(" 的高度（显示 "),s("code",[t._v("BBB")]),t._v(" 视图时，透明的 "),s("code",[t._v("Container")]),t._v(" 的高度设置为 "),s("code",[t._v("0")]),t._v("）")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NeverScrollableScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 添加了透明的 Container")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" headerFlipHeightB\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"AAA"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFFFA5252")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"BBB"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFF228BE6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("我们再来看看此时的效果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204172015945.gif",alt:""}})]),t._v(" "),s("p",[t._v("可以，不过变化很僵硬，加点动画就可以了")]),t._v(" "),s("p",[t._v("完整的 "),s("code",[t._v("header")]),t._v(" 的构建方法代码如下")]),t._v(" "),s("p",[t._v("改动的地方在 "),s("code",[t._v("AnimatedContainer A")]),t._v(" 和 "),s("code",[t._v("AnimatedContainer B")]),t._v(" 注释处")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildHeaderWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// AnimatedContainer A： 控制整个header以动画的方式改变高度")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AnimatedContainer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" headerFlipHeightA\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n clipBehavior"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clip")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NeverScrollableScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// AnimatedContainer B：控制 AAA 和 BBB 切换时的互推效果")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AnimatedContainer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" headerFlipHeightB\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"AAA"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFFFA5252")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" headerFlipHeightB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HeaderFlipWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"BBB"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0xFF228BE6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("AnimatedContainer A")]),t._v(": 控制整个 "),s("code",[t._v("header")]),t._v(" 以动画的方式改变高度")]),t._v(" "),s("li",[s("code",[t._v("AnimatedContainer B")]),t._v(": 控制 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 切换时的互推效果（切到 "),s("code",[t._v("AAA")]),t._v(" 时，将 "),s("code",[t._v("BBB")]),t._v(" 往下推，切到 "),s("code",[t._v("BBB")]),t._v(" 时，将 "),s("code",[t._v("AAA")]),t._v(" 往上推）")])]),t._v(" "),s("h2",{attrs:{id:"加深理解"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#加深理解"}},[t._v("#")]),t._v(" 加深理解")]),t._v(" "),s("p",[t._v("为了更易于理解 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 的显示逻辑，我做了如下一张图")]),t._v(" "),s("ul",[s("li",[t._v("从左往右看：便是上拉时，从 "),s("code",[t._v("AAA")]),t._v(" 切换到 "),s("code",[t._v("BBB")]),t._v(" 的过程")]),t._v(" "),s("li",[t._v("从右往左看：便是下拉时，从 "),s("code",[t._v("BBB")]),t._v(" 切换到 "),s("code",[t._v("AAA")]),t._v(" 的过程")])]),t._v(" "),s("p",[t._v("整个过程最主要的就是 "),s("code",[t._v("AnimatedContainer A")]),t._v(" 和 "),s("code",[t._v("AnimatedContainer B")]),t._v(" 的高度变化")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204172016643.png",alt:""}})]),t._v(" "),s("ul",[s("li",[t._v("前置条件："),s("code",[t._v("Positioned")]),t._v(" 的 高度（即 "),s("code",[t._v("ListView")]),t._v(" 的高度）为 "),s("code",[t._v("AAA")]),t._v(" 和 "),s("code",[t._v("BBB")]),t._v(" 视图的总高")]),t._v(" "),s("li",[t._v("当显示 "),s("code",[t._v("AAA")]),t._v(" 时，即图一，"),s("code",[t._v("Stack")]),t._v(" 的高度为 "),s("code",[t._v("AAA")]),t._v(" 的高度，"),s("code",[t._v("AnimatedContainer B")]),t._v(" 的高度为 "),s("code",[t._v("BBB")]),t._v("的高度，此时的 "),s("code",[t._v("BBB")]),t._v(" 视图超出了 "),s("code",[t._v("ListView")]),t._v(" 的视窗，所以其不显示，注意看图一半透明的 "),s("code",[t._v("BBB")])]),t._v(" "),s("li",[t._v("在切换显示 "),s("code",[t._v("BBB")]),t._v(" 的过程中，即图二到图三，"),s("code",[t._v("AnimatedContainer B")]),t._v(" 的高度不断减小至 "),s("code",[t._v("0")]),t._v("，使得 "),s("code",[t._v("BBB")]),t._v(" 逐渐进入 "),s("code",[t._v("ListView")]),t._v(" 的视窗内，直到完全展示，"),s("code",[t._v("Stack")]),t._v(" 的高度也从 "),s("code",[t._v("AAA")]),t._v(" 的高度减小至 "),s("code",[t._v("BBB")]),t._v(" 的高度，使得 "),s("code",[t._v("AAA")]),t._v(" 超出 "),s("code",[t._v("ListView")]),t._v(" 的视窗，这样便只会展示 "),s("code",[t._v("BBB")]),t._v(" 了")])]),t._v(" "),s("h2",{attrs:{id:"完善逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#完善逻辑"}},[t._v("#")]),t._v(" 完善逻辑")]),t._v(" "),s("p",[t._v("上述的 "),s("code",[t._v("header")]),t._v(" 视图切换是靠右下角按钮的点击，实际使用时，是要靠列表滚动时来判断是否进行切换的")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 偏移量阈值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" double headerFlipThreshold "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 可监听滚动，控制偏移量")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),t._v(" scrollController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在 "),s("code",[t._v("CustomScrollView")]),t._v(" 中传入 "),s("code",[t._v("scrollController")]),t._v("，并用 "),s("code",[t._v("NotificationListener")]),t._v(" 包裹起来，监听其滚动")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NotificationListener")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollNotification")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 监听滚动")]),t._v("\n onNotification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollNotification")]),t._v(" notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_handleListScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return true 会导致进度条将失效")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传入 scrollController")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n floatingActionButton"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("接下来就是处理滚动")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_handleListScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollNotification")]),t._v(" notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("metrics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" headerFlipThreshold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bbb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("headerFlipThreshold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("根据偏移量是否超过阈值，来控制是否切换 "),s("code",[t._v("header")])]),t._v(" "),s("li",[t._v("当切换 "),s("code",[t._v("header")]),t._v(" 后，我们需要使用 "),s("code",[t._v("scrollController")]),t._v(" 来设置列表的偏移量为 "),s("code",[t._v("0")])])]),t._v(" "),s("p",[t._v("到这里也就差不多了，不过，现在还有个细节需要处理，请看图")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20210320170901/image/202204172016591.gif",alt:""}})]),t._v(" "),s("p",[t._v("如图操作所示，快速下拉滚动会直接从 "),s("code",[t._v("BBB")]),t._v(" 切换到 "),s("code",[t._v("AAA")]),t._v("，这并不是我们想要的。")]),t._v(" "),s("p",[t._v("我们想要的是：当前正在显示 "),s("code",[t._v("BBB")]),t._v("，且从最顶部开始下拉才能切到 "),s("code",[t._v("AAA")])]),t._v(" "),s("p",[t._v("代码改动：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 是否是从最顶部开始滚动的")]),t._v("\nbool isStartScrollAtTop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_handleListScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollNotification")]),t._v(" notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" notification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("metrics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("notification "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollStartNotification")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始滚动")]),t._v("\n isStartScrollAtTop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录是否是从最顶部开始滚动")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" headerFlipThreshold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bbb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("isStartScrollAtTop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不是从最顶部开始滚动，则不切换到 AAA")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("offset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("headerFlipThreshold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n headerFlipShowingType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VerticalFlipShowingType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("大功告成，最后附上 "),s("code",[t._v("Demo")]),t._v(" 链接："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_demo/blob/main/lib/features/vertical_flip/vertical_flip_page.dart",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_demo/vertical_flip_page.dart (github.com)"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/122.a614ad50.js b/assets/js/122.a614ad50.js new file mode 100644 index 000000000..11e710fed --- /dev/null +++ b/assets/js/122.a614ad50.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[122],{473:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[s("code",[t._v("Flutter")]),t._v(" 中的 "),s("code",[t._v("ListView")]),t._v(" 相信大家都用的很熟了，不过有没有人遇到过一些这样的需求：")]),t._v(" "),s("ul",[s("li",[t._v("详情页滚动到某一指定模块后，停止滚动并根据该指定模块的大小弹出全屏新手引导")]),t._v(" "),s("li",[t._v("详情页在滚动过程中，顶部的模块定位导航栏需要及时更新指示器下标")]),t._v(" "),s("li",[t._v("视频列表在滚动过程中，适当位置的子部件会自动进行播放视频")]),t._v(" "),s("li",[t._v("等等")])]),t._v(" "),s("p",[t._v("在日常开发过程中这种类似的功能需求还是蛮多的，因此我封装了一个库："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("相信可以很好的帮助大家解决这些问题 😃")]),t._v(" "),s("h2",{attrs:{id:"二、应用场景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、应用场景"}},[t._v("#")]),t._v(" 二、应用场景")]),t._v(" "),s("p",[t._v("下面我们来看看常见的应用场景：")]),t._v(" "),s("h3",{attrs:{id:"_1、获取最顶部的子部件信息"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、获取最顶部的子部件信息"}},[t._v("#")]),t._v(" 1、获取最顶部的子部件信息")]),t._v(" "),s("p",[t._v("可以获取当前的第一个子部件和所有正在显示的子部件信息")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628046.gif",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"_2、视频列表自动播放"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、视频列表自动播放"}},[t._v("#")]),t._v(" 2、视频列表自动播放")]),t._v(" "),s("p",[t._v("当子部件进入列表中间区域时，自动播放视频")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628769.gif",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"_3、模块定位"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、模块定位"}},[t._v("#")]),t._v(" 3、模块定位")]),t._v(" "),s("p",[t._v("当滚动到一些特定模块时，顶部的 "),s("code",[t._v("TabBar")]),t._v(" 的指示器切换到对应模块 "),s("code",[t._v("tab")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628102.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"三、使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、使用"}},[t._v("#")]),t._v(" 三、使用")]),t._v(" "),s("h3",{attrs:{id:"_1、基本使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、基本使用"}},[t._v("#")]),t._v(" 1、基本使用")]),t._v(" "),s("p",[t._v("创建 "),s("code",[t._v("ListView")]),t._v("，并在其 "),s("code",[t._v("builder")]),t._v(" 回调中，将 "),s("code",[t._v("SliverListView")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v(" 记录起来")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" _sliverListViewContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("separated")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在 builder 回调中，将 BuildContext 记录起来")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_sliverListViewContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListViewContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n separatorBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSeparatorView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注：在使用过程中，需要记录 "),s("code",[t._v("SliverListView")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v("，"),s("code",[t._v("ListView")]),t._v(" 最终也是使用 "),s("code",[t._v("SliverListView")]),t._v(" 来进行布局的")])]),t._v(" "),s("p",[t._v("构建 "),s("code",[t._v("ListViewObserver")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("child")]),t._v(": 将构建的 "),s("code",[t._v("ListView")]),t._v(" 做为 "),s("code",[t._v("ListViewObserver")]),t._v(" 的子部件")]),t._v(" "),s("li",[s("code",[t._v("sliverListContexts")]),t._v(": 该回调中需要返回被观察的 "),s("code",[t._v("ListView")]),t._v(" 的 "),s("code",[t._v("BuildContext")])]),t._v(" "),s("li",[s("code",[t._v("onObserve")]),t._v(": 该回调可以监听到当前正在显示的子部件的相关信息")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverListContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_sliverListViewContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" _sliverListViewContext"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_sliverListViewContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印当前正在显示的第一个子部件")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'firstChild.index -- ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 打印当前正在显示的所有子部件下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("print")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'displaying -- ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildIndexList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("除了上述几个常用参数外，还有：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("leadingOffset")]),t._v("：顶部偏移，当列表的视窗会固定被其它视图挡住时使用")]),t._v(" "),s("li",[s("code",[t._v("dynamicLeadingOffset")]),t._v("：动态顶部偏移，当列表的视窗会动态被其它视图挡住时使用")])]),t._v(" "),s("p",[t._v("这里看一下图就明白了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291629435.gif",alt:""}})]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("// 导航栏半透明\nflutter: firstChild.index -- "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\nflutter: displaying -- "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nflutter: firstChild.index -- "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\nflutter: displaying -- "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n// 导航栏完全不透明\nflutter: firstChild.index -- "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\nflutter: displaying -- "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("滚动过程会改变顶部的导航栏透明度，在这个前提下：")]),t._v(" "),s("ol",[s("li",[t._v("当半透明时，我们希望列表的所有可见子部件从最顶部开始算起")]),t._v(" "),s("li",[t._v("当完成不透明时，我们希望列表的所有可见子部件从导航栏底部开始算起")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n dynamicLeadingOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_navBgAlpha "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" _safeAreaPaddingTop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" _navContentHeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("toNextOverPercent")]),t._v("：内部逻辑在取到第一个子部件后，如果该子部件被挡住的大小与自身大小的比例超过了该值，则会取下一个子部件为第一个子部件。")])]),t._v(" "),s("h3",{attrs:{id:"_2、手动触发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、手动触发"}},[t._v("#")]),t._v(" 2、手动触发")]),t._v(" "),s("p",[t._v("默认是 "),s("code",[t._v("ListView")]),t._v(" 在滚动的时候才会观察到相关数据。")]),t._v(" "),s("p",[t._v("如果需要在非滚动状态下进行一次观察，可以使用 "),s("code",[t._v("ListViewOnceObserveNotification")]),t._v(" 进行手动触发")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("ListViewOnceObserveNotification().dispatch(_sliverListViewContext);\n")])])]),s("blockquote",[s("p",[t._v("注：如果频繁触发，且观察结果相同，则 "),s("code",[t._v("onObserve")]),t._v(" 只会回调一次")])]),t._v(" "),s("h3",{attrs:{id:"_3、子部件信息"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、子部件信息"}},[t._v("#")]),t._v(" 3、子部件信息")]),t._v(" "),s("p",[t._v("观察到的模型数据：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 第一个子部件模型数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveDisplayingChildModel")]),t._v(" firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 正在显示的所有子部件模型数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveDisplayingChildModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 正在显示的所有子部件下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" displayingChildIndexList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("子部件模型数据：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveDisplayingChildModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 子部件下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 子部件的 RenderObject")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderBox")]),t._v(" renderObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/123.974d2b31.js b/assets/js/123.974d2b31.js new file mode 100644 index 000000000..303fa3f53 --- /dev/null +++ b/assets/js/123.974d2b31.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[123],{474:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、痛点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、痛点"}},[t._v("#")]),t._v(" 一、痛点")]),t._v(" "),s("p",[t._v("痛点一："),s("code",[t._v("Flutter")]),t._v(" 官方提供了 "),s("code",[t._v("ScrollController")]),t._v("，调用下方两个方法可以滚动到指定偏移处")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("double value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n double offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),t._v(" duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curve")]),t._v(" curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("但是官方没有提供滚动到指定下标位置的功能")]),t._v(" "),s("p",[t._v("痛点二：")]),t._v(" "),s("p",[t._v("为了解决痛点一，业内有很多第三方库实现了这个功能，其中最知名的莫过于谷歌的 "),s("a",{attrs:{href:"https://pub.dev/packages/scrollable_positioned_list",target:"_blank",rel:"noopener noreferrer"}},[t._v("scrollable_positioned_list"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("而这些库都有一些相同的问题：")]),t._v(" "),s("ul",[s("li",[t._v("侵入性强，必须使用他们提供的 "),s("code",[t._v("Widget")]),t._v(" 来构建列表视图")]),t._v(" "),s("li",[t._v("不支持 "),s("code",[t._v("GridView")])])]),t._v(" "),s("p",[t._v("对此，我决定自己编写一个库（"),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1),t._v("）来实现这个功能，以及解决以上的问题。")]),t._v(" "),s("h2",{attrs:{id:"二、优点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、优点"}},[t._v("#")]),t._v(" 二、优点")]),t._v(" "),s("ol",[s("li",[t._v("侵入性低，不会限制你的列表视图实现，只要求将列表视图做为 "),s("code",[t._v("ViewObserver")]),t._v(" 的 "),s("code",[t._v("child")]),t._v("，如果不想用了，直接移除掉 "),s("code",[t._v("ViewObserver")]),t._v(" 即可。")]),t._v(" "),s("li",[t._v("基于"),s("code",[t._v("【不会限制你的列表视图实现】")]),t._v("这一点， "),s("code",[t._v("flutter_scrollview_observer")]),t._v(" 支持所有的列表"),s("code",[t._v("Widget")]),t._v("，如:"),s("code",[t._v("ListView")]),t._v("、"),s("code",[t._v("GridView")]),t._v("，甚至 "),s("code",[t._v("CustomSrollView")])]),t._v(" "),s("li",[t._v("防抖动，如果在滚动到指定下标时，列表尾部的可滚动区域已不足以支撑滚动到相应位置，则会自动滚动到最底部，避免回弹的问题")])]),t._v(" "),s("p",[t._v("下面正式介绍一下这个库的使用")]),t._v(" "),s("h2",{attrs:{id:"三、使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、使用"}},[t._v("#")]),t._v(" 三、使用")]),t._v(" "),s("h3",{attrs:{id:"_1、listview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、listview"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("ListView")])]),t._v(" "),s("p",[t._v("正常创建和使用 "),s("code",[t._v("ScrollController")]),t._v(" 实例")]),t._v(" "),s("blockquote",[s("p",[t._v("这里你可以使用 "),s("code",[t._v("ListView")]),t._v(" 或者 "),s("code",[t._v("CustomSrollView")]),t._v(" 的 "),s("code",[t._v("SliverList")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),t._v(" scrollController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("separated")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建 "),s("code",[t._v("ListObserverController")]),t._v(" 实例并将其传递给 "),s("code",[t._v("ListViewObserver")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：创建 "),s("code",[t._v("ListObserverController")]),t._v(" 实例时需要传入列表的 "),s("code",[t._v("ScrollController")]),t._v(" 实例。\n这一步很重要，因为 "),s("code",[t._v("flutter_scrollview_observer")]),t._v(" 内部实现原理是基于官方 "),s("code",[t._v("ScrollController")]),t._v(" 提供的 "),s("code",[t._v("jumpTo")]),t._v(" 和 "),s("code",[t._v("animateTo")]),t._v(" 方法")])]),t._v(" "),s("p",[t._v("现在即可滚动到指定下标位置了")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无动画滚动至下标位置")]),t._v("\nobserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 动画滚动至下标位置")]),t._v("\nobserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("seconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ease"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202208120700435.gif",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"_2、gridview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、gridview"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("GridView")])]),t._v(" "),s("blockquote",[s("p",[t._v("由于内容与 "),s("code",[t._v("ListView")]),t._v(" 基本一致，所以这里就折叠了，需要的小伙伴可点击"),s("code",[t._v("【展开查看】")])])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202208120700807.gif",alt:""}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202208120700476.gif",alt:""}})]),t._v(" "),s("details",[s("summary",[t._v("展开查看")]),t._v(" "),s("p",[t._v("正常创建和使用 "),s("code",[t._v("ScrollController")]),t._v(" 实例")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建 "),s("code",[t._v("GridObserverController")]),t._v(" 实例并将其传递给 "),s("code",[t._v("GridViewObserver")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("现在即可滚动到指定下标位置了")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nobserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("seconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ease"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])]),t._v(" "),s("h3",{attrs:{id:"_3、customsrollview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、customsrollview"}},[t._v("#")]),t._v(" 3、"),s("code",[t._v("CustomSrollView")])]),t._v(" "),s("blockquote",[s("p",[t._v("支持 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")]),t._v(" 混合使用的情况！")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202208120659803.gif",alt:""}})]),t._v(" "),s("p",[t._v("如上图所示，"),s("code",[t._v("CustomSrollView")]),t._v(" 的 "),s("code",[t._v("slivers")]),t._v(" 中包含有 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")])]),t._v(" "),s("ul",[s("li",[t._v("点击右下角第一个按钮可滚动到 "),s("code",[t._v("SliverList")]),t._v(" 的第 "),s("code",[t._v("29")]),t._v(" 行")]),t._v(" "),s("li",[t._v("点击第二个按钮可滚动到 "),s("code",[t._v("SliverGrid")]),t._v(" 的第 "),s("code",[t._v("10")]),t._v(" 的子部件所在行")])]),t._v(" "),s("details",[s("summary",[t._v("展开查看")]),t._v(" "),s("p",[t._v("正常创建和使用 "),s("code",[t._v("ScrollController")]),t._v(" 实例")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// scrollDirection: Axis.horizontal,")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("正常创建你的 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")]),t._v("，并将它们的 "),s("code",[t._v("BuildContext")]),t._v(" 记录起来")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverGrid")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverGridCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建 "),s("code",[t._v("SliverObserverController")]),t._v(" 实例并将其传递给 "),s("code",[t._v("SliverViewObserver")])]),t._v(" "),s("p",[t._v("注意：在 "),s("code",[t._v("sliverListContexts")]),t._v(" 里返回刚才记录的两个 "),s("code",[t._v("Sliver")]),t._v(" 的 "),s("code",[t._v("BuildContext")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverListContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_sliverListCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" _sliverListCtx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_sliverGridCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" _sliverGridCtx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("现在即可滚动到指定下标位置了")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _sliverListCtx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("29")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("easeInOut"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nobserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _sliverGridCtx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("easeInOut"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"四、说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、说明"}},[t._v("#")]),t._v(" 四、说明")]),t._v(" "),s("h3",{attrs:{id:"_1、viewobserver-的选择"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、viewobserver-的选择"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("ViewObserver")]),t._v(" 的选择")]),t._v(" "),s("p",[t._v("建议使用相应的 "),s("code",[t._v("ViewObserver")]),t._v("：")]),t._v(" "),s("ul",[s("li",[t._v("如果是 "),s("code",[t._v("ListView")]),t._v(" 或者纯 "),s("code",[t._v("SliverList")]),t._v("，建议使用 "),s("code",[t._v("ListViewObserver")])]),t._v(" "),s("li",[t._v("如果是 "),s("code",[t._v("GridView")]),t._v(" 或者纯 "),s("code",[t._v("SliverGrid")]),t._v("，建议使用 "),s("code",[t._v("GridViewObserver")])]),t._v(" "),s("li",[t._v("如果是 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")]),t._v("，则使用 "),s("code",[t._v("SliverViewObserver")])])]),t._v(" "),s("p",[t._v("这样在 "),s("code",[t._v("onObserve")]),t._v(" 回调中拿到数据模型后不用再对其进行类型判断与转换。")]),t._v(" "),s("h3",{attrs:{id:"_2、isfixedheight"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、isfixedheight"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("isFixedHeight")])]),t._v(" "),s("p",[t._v("子部件为固定高度的情况下，请设置 "),s("code",[t._v("isFixedHeight")]),t._v(" 为 "),s("code",[t._v("true")]),t._v("，以提升性能！")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n isFixedHeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nobserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isFixedHeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("seconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ease"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3、slivercontext-是否需要传"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、slivercontext-是否需要传"}},[t._v("#")]),t._v(" 3、"),s("code",[t._v("sliverContext")]),t._v(" 是否需要传")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool isFixedHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),t._v(" duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curve")]),t._v(" curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool isFixedHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如上，"),s("code",[t._v("jumpTo")]),t._v(" 和 "),s("code",[t._v("animateTo")]),t._v(" 方法中都有一个 "),s("code",[t._v("sliverContext")]),t._v(" 参数，这是用来指定哪个 "),s("code",[t._v("sliver")]),t._v(" 进行滚动操作的。")]),t._v(" "),s("p",[t._v("如果不传 "),s("code",[t._v("sliverContext")]),t._v("，则默认会是列表中的第一个 "),s("code",[t._v("sliver")]),t._v("，只有你想让非第一个 "),s("code",[t._v("sliver")]),t._v(" 进行滚动的时候才需要传该值")]),t._v(" "),s("h2",{attrs:{id:"五、可现实的功能"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、可现实的功能"}},[t._v("#")]),t._v(" 五、可现实的功能")]),t._v(" "),s("h3",{attrs:{id:"_1、获得当前视窗中的子部件信息"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、获得当前视窗中的子部件信息"}},[t._v("#")]),t._v(" 1、获得当前视窗中的子部件信息")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628046.gif",alt:""}})]),t._v(" "),s("p",[t._v("如上图控制台所示，在滚动的过程中可以实时获取正在显示的子部件的数据。")]),t._v(" "),s("h3",{attrs:{id:"_2、视频列表自动播放"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、视频列表自动播放"}},[t._v("#")]),t._v(" 2、视频列表自动播放")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628769.gif",alt:""}})]),t._v(" "),s("p",[t._v("这种功能很常见，在列表滚动的时候，指定区域内的被命中的视频便会自动进行播放。")]),t._v(" "),s("h3",{attrs:{id:"_3、模块定位"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、模块定位"}},[t._v("#")]),t._v(" 3、模块定位")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202208120701261.gif",alt:""}})]),t._v(" "),s("p",[t._v("一般详情页中都会有的功能，在列表视图滚动的时候，顶部定位导航视图跟着更新下标，点击导航视图某个下标则会定位到对应的模块")]),t._v(" "),s("h2",{attrs:{id:"六、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、最后"}},[t._v("#")]),t._v(" 六、最后")]),t._v(" "),s("p",[t._v("如果这个库对你很有帮助，请不吝给个 "),s("code",[t._v("star")]),t._v(" 吧")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/124.a05e534b.js b/assets/js/124.a05e534b.js new file mode 100644 index 000000000..d5af20e5c --- /dev/null +++ b/assets/js/124.a05e534b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[124],{475:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、目标效果"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、目标效果"}},[t._v("#")]),t._v(" 一、目标效果")]),t._v(" "),s("p",[t._v("聊天会话页的列表效果")]),t._v(" "),s("ul",[s("li",[t._v("1、聊天数据不满一屏时，顶部显示所有聊天数据")]),t._v(" "),s("li",[t._v("2、插入消息时\n"),s("ul",[s("li",[t._v("如果最新消息紧靠列表底部时，则插入消息会使列表向上推")]),t._v(" "),s("li",[t._v("如果不是紧靠列表底部，则固定到当前聊天位置")])])])]),t._v(" "),s("p",[t._v("效果如图所示：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202210092241966.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"二、原理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、原理"}},[t._v("#")]),t._v(" 二、原理")]),t._v(" "),s("h3",{attrs:{id:"_1、-涉及的方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、-涉及的方法"}},[t._v("#")]),t._v(" 1、 涉及的方法")]),t._v(" "),s("p",[s("code",[t._v("ScrollPhysics")]),t._v(" 提供了 "),s("code",[t._v("adjustPositionForNewDimensions")]),t._v(" 方法，用于修正 "),s("code",[t._v("ScrollView")]),t._v(" 在 "),s("code",[t._v("rebuild")]),t._v(" 后的偏移量，方法声明如下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("double "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("adjustPositionForNewDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollMetrics")]),t._v(" oldPosition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollMetrics")]),t._v(" newPosition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required bool isScrolling"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required double velocity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("默认情况下，值为上一次的偏移量，即 "),s("code",[t._v("newPosition")]),t._v(" 参数的 "),s("code",[t._v("pixels")]),t._v("，所以在顶部插入消息时，消息列表就会跟随滚动。")]),t._v(" "),s("p",[t._v("如下图所示，观察蓝色的消息条目，每播入一条消息时，所有消息会自动往上顶，而滚动视图的偏移量其实一直是没有变化的~")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202210092241840.gif",alt:""}})]),t._v(" "),s("blockquote",[s("p",[t._v("注：值得注意的是，如果该方法返回的值与 "),s("code",[t._v("newPosition")]),t._v(" 的 "),s("code",[t._v("pixels")]),t._v(" 不相等时，则会触发视图的重新布局，所以这个操作还是比较昂贵的，应尽量减少返回值的变动。")])]),t._v(" "),s("h3",{attrs:{id:"_2、实现逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、实现逻辑"}},[t._v("#")]),t._v(" 2、实现逻辑")]),t._v(" "),s("p",[t._v("根据上述内容我们不难推出插入消息时的效果实现原理如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("效果")]),t._v(" "),s("th",[t._v("返回的值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("消息紧靠列表底部时，插入消息会使列表向上推")]),t._v(" "),s("td",[t._v("直接返回 "),s("code",[t._v("super")]),t._v(" 的值，即 "),s("code",[t._v("newPosition")]),t._v(" 参数的 "),s("code",[t._v("pixels")])])]),t._v(" "),s("tr",[s("td",[t._v("如果不是紧靠列表底部，则固定到当前聊天位置")]),t._v(" "),s("td",[t._v("返回原本第 "),s("code",[t._v("0")]),t._v(" 条消息的最新偏移量")])])])]),t._v(" "),s("p",[t._v("下面重点说明一下第 "),s("code",[t._v("2")]),t._v(" 点中 "),s("code",[t._v("返回原本第0条消息的最新偏移量")]),t._v(" 的实现逻辑：")]),t._v(" "),s("p",[s("code",[t._v("ListView")]),t._v(" 的本质是 "),s("code",[t._v("RenderSliverList")]),t._v("，通过 "),s("code",[t._v("RenderSliverList")]),t._v(" 的 "),s("code",[t._v("firstChild")]),t._v(" 属性拿到当前列表中渲染的首个 "),s("code",[t._v("item")]),t._v("。")]),t._v(" "),s("p",[t._v("如下图，"),s("code",[t._v("firstChild")]),t._v(" 是下标为 "),s("code",[t._v("10")]),t._v(" 的 "),s("code",[t._v("item")]),t._v("，这个 "),s("code",[t._v("item")]),t._v(" 与预渲染区域 "),s("code",[t._v("cacheExtent")]),t._v(" 相关，如果将其设置为 "),s("code",[t._v("0")]),t._v("，则 "),s("code",[t._v("firstChild")]),t._v(" 的下标将会是 "),s("code",[t._v("12")]),t._v("，这个相信不难理解。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202210092242388.png",alt:""}})]),t._v(" "),s("p",[t._v("所以，我们只需要在插入消息时，记录第 "),s("code",[t._v("0")]),t._v(" 条消息的偏移量，当列表视图 "),s("code",[t._v("rebuild")]),t._v(" 后，"),s("code",[t._v("adjustPositionForNewDimensions")]),t._v(" 方法会被调用，此时取出第 "),s("code",[t._v("1")]),t._v(" 条消息的偏移量，两者的差值加上 "),s("code",[t._v("super")]),t._v(" 的值即为目标修正偏移量。")]),t._v(" "),s("p",[t._v("至于 "),s("code",[t._v("聊天数据不满一屏时，顶部显示所有聊天数据")]),t._v(" 这个效果只是在切换 "),s("code",[t._v("shrinkWrap")]),t._v(" 而已，比较简单就不在此展开讲了。")]),t._v(" "),s("p",[t._v("我已将上述逻辑进行了封装，集成于 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer#3chat-observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1),t._v("，接下来我们就来看看如何使用。")]),t._v(" "),s("h2",{attrs:{id:"三、使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、使用"}},[t._v("#")]),t._v(" 三、使用")]),t._v(" "),s("p",[t._v("现在只需三个步骤即可快速实现聊天会话列表的效果")]),t._v(" "),s("p",[t._v("步骤一：初始化必要的 "),s("code",[t._v("ListObserverController")]),t._v(" 和 "),s("code",[t._v("ChatScrollObserver")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 初始化 ListObserverController")]),t._v("\nobserverController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cacheJumpIndexOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 初始化 ChatScrollObserver")]),t._v("\nchatObserver "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("toRebuildScrollViewCallback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里可以重建指定的滚动视图即可")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("步骤二：按如下配置 "),s("code",[t._v("ListView")]),t._v(" 并使用 "),s("code",[t._v("ListViewObserver")]),t._v(" 将其包裹")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatObserverClampinScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shrinkWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isShrinkWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n reverse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("步骤三：插入或删除消息前，调用 "),s("code",[t._v("ChatScrollObserver")]),t._v(" 的 "),s("code",[t._v("standby")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("onPressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatDataHelper")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createChatModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\nonRemove"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isRemove"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeAt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("注：示例中的 "),s("code",[t._v("setState")]),t._v(" 都可以换成对列表视图进行局部刷新的代码")]),t._v(" "),s("h2",{attrs:{id:"四、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、最后"}},[t._v("#")]),t._v(" 四、最后")]),t._v(" "),s("p",[t._v("GitHub地址: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("该库还实现了其它十分实用的功能，相关功能有对应的文章进行叙述")]),t._v(" "),s("p",[t._v("相关文章链接：")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/pages/beb840/"}},[t._v("Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/pages/0422cb/"}},[t._v("Flutter - 获取ListView当前正在显示的Widget信息")])],1)]),t._v(" "),s("p",[t._v("如果这个库对你很有帮助，请不吝给个 "),s("code",[t._v("star")]),t._v(" 吧")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/125.e4548c74.js b/assets/js/125.e4548c74.js new file mode 100644 index 000000000..143879a8d --- /dev/null +++ b/assets/js/125.e4548c74.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[125],{478:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、问题"}},[t._v("#")]),t._v(" 一、问题")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132206046.gif",alt:""}})]),t._v(" "),s("p",[t._v("可以看出一些问题：")]),t._v(" "),s("ul",[s("li",[t._v("在关闭键盘的情况下，追加表情内容导致换行时，输入框并不会跟随滚动，而键盘输入文字却可以")]),t._v(" "),s("li",[t._v("滚动条在键盘出现时正常，关闭键盘时滚动条无法滑到底部")])]),t._v(" "),s("h2",{attrs:{id:"二、示例代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、示例代码"}},[t._v("#")]),t._v(" 二、示例代码")]),t._v(" "),s("p",[s("code",[t._v("TextField")]),t._v(" 代码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildTextField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scrollbar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isAlwaysShown"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" textFieldKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n autofocus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n decoration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputDecoration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n border"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputBorder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isCollapsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" editingController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n keyboardType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextInputType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("multiline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n maxLines"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n minLines"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n showCursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n readOnly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("更新输入框内容的逻辑")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editingController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 新增的内容")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" content "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchInsertContent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nint selectionBefore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editingController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("start"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selectionBefore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" selectionBefore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新内容后，光标的位置")]),t._v("\nint selectionAfter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectionBefore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nresult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selectionBefore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditingController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置光标")]),t._v("\neditingController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextSelection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fromPosition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextPosition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" selectionAfter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"三、探索与解决"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、探索与解决"}},[t._v("#")]),t._v(" 三、探索与解决")]),t._v(" "),s("h3",{attrs:{id:"_1、输入框"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、输入框"}},[t._v("#")]),t._v(" 1、输入框")]),t._v(" "),s("p",[t._v("当键盘输入内容时会自动滚动到底部，既然跟滚动相关，第一时间就会想到 "),s("code",[t._v("ScrollController")]),t._v(" 的 "),s("code",[t._v("animateTo")]),t._v(" 和 "),s("code",[t._v("jumpTo")]),t._v(" 这两个方法，打个断点后，用键盘输入文字看看，发现果然走了断点")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132206601.png",alt:""}})]),t._v(" "),s("p",[t._v("从调用栈里可以看到，"),s("code",[t._v("animateTo")]),t._v(" 方法是在 "),s("code",[t._v("EditableTextState")]),t._v(" 的 "),s("code",[t._v("_scheduleShowCaretOnScreen")]),t._v(" 方法里调用的，该方法正是用于处理在键盘输入文字后，使 "),s("code",[t._v("TextField")]),t._v(" 的内容自动滚动到适当的位置，保持可见。该方法在每次输入文字时都会调用，其内部有相关的滚动偏移计算逻辑。")]),t._v(" "),s("p",[t._v("那好了，我们现在主要就是看如何调用它，因为其是私有方法，所以需要找其它可帮我们间接调用 "),s("code",[t._v("_scheduleShowCaretOnScreen")]),t._v(" 方法的公开方法。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132206146.png",alt:""}})]),t._v(" "),s("p",[t._v("查看调用 "),s("code",[t._v("_scheduleShowCaretOnScreen")]),t._v(" 的方法有哪些后，这里我找到了 "),s("code",[t._v("userUpdateTextEditingValue")]),t._v("，以下对两个形参进行说明")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextSelection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("collapsed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("composing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextRange")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("empty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])]),s("table",[s("thead",[s("tr",[s("th",[t._v("属性")]),t._v(" "),s("th",[t._v("描述")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("text")])]),t._v(" "),s("td",[t._v("当前文本")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("selection")])]),t._v(" "),s("td",[t._v("当前选中的文本下标范围")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("composing")])]),t._v(" "),s("td",[t._v("待组合内容的下标范围，在中文输入法中很常见，如下图中的 "),s("code",[t._v("lin xun feng")])])])])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132207695.png",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("SelectionChangedCause")]),t._v("：表明触发变更文本选中范围的原因，常见的几种方式如下代码所示")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Indicates what triggered the change in selected text (including changes to")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// the cursor location).")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SelectionChangedCause")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user tapped on the text and that caused the selection (or the location")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// of the cursor) to change.")]),t._v("\n tap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user tapped twice in quick succession on the text and that caused")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// the selection (or the location of the cursor) to change.")]),t._v("\n doubleTap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user long-pressed the text and that caused the selection (or the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// location of the cursor) to change.")]),t._v("\n longPress"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user force-pressed the text and that caused the selection (or the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// location of the cursor) to change.")]),t._v("\n forcePress"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user used the keyboard to change the selection or the location of the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// cursor.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Keyboard-triggered selection changes may be caused by the IME as well as")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// by accessibility tools (e.g. TalkBack on Android).")]),t._v("\n keyboard"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user used the selection toolbar to change the selection or the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// location of the cursor.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// An example is when the user taps on select all in the tool bar.")]),t._v("\n toolbar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user used the mouse to change the selection by dragging over a piece")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// of text.")]),t._v("\n drag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The user used iPadOS 14+ Scribble to change the selection.")]),t._v("\n scribble"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("该参数为可选参数，对于我们这种使用 "),s("code",[t._v("TextEditingController")]),t._v(" 对输入框内容进行修改的方式，传 "),s("code",[t._v("null")]),t._v(" 即可。")]),t._v(" "),s("p",[t._v("需要调用的方式已经确定，接下来就是要获取 "),s("code",[t._v("EditableTextState")]),t._v("，我们先来看一下 "),s("code",[t._v("TextField")]),t._v(" 的源码，因其为 "),s("code",[t._v("StatefulWidget")]),t._v("，所以需要找到对应的 "),s("code",[t._v("State")]),t._v("， 即 "),s("code",[t._v("_TextFieldState")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _TextFieldState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RestorationMixin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextSelectionGestureDetectorBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AutofillClient")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GlobalKey")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableTextState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" editableTextKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GlobalKey")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableTextState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" child "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RepaintBoundary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnmanagedRestorationScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n bucket"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bucket"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableText")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" editableTextKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n readOnly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("readOnly "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("_isEnabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看到，最终 "),s("code",[t._v("build")]),t._v(" 方法返回的是嵌套了 "),s("code",[t._v("EditableText")]),t._v(" 的 "),s("code",[t._v("Widget")]),t._v("，我们只要获取到该 "),s("code",[t._v("EditableText")]),t._v(" 的 "),s("code",[t._v("State")]),t._v("（即 "),s("code",[t._v("EditableTextState")]),t._v("） 就可以调用 "),s("code",[t._v("userUpdateTextEditingValue")]),t._v(" 方法。")]),t._v(" "),s("p",[t._v("现在比较棘手的是，"),s("code",[t._v("TextFieldState")]),t._v(" 是私有的，无法直接访问到，但是我们可以换种方式，直接遍历 "),s("code",[t._v("Element")]),t._v(" 从而获取到 "),s("code",[t._v("EditableTextState")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("visitor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Element")]),t._v(" element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableText")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" editableText "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableText")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" editableTextState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editableText"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("key "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GlobalKey")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EditableTextState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 找到 EditableTextState，调用 userUpdateTextEditingValue 方法")]),t._v("\n editableTextState"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userUpdateTextEditingValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("visitChildren")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("visitor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\ntextFieldKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentContext"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("visitChildElements")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("visitor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("至此输入框便可实现我们想要的效果了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132207166.gif",alt:""}})]),t._v(" "),s("p",[t._v("注：")]),t._v(" "),s("ol",[s("li",[t._v("这里大家可以自行对遍历的方法和 "),s("code",[t._v("userUpdateTextEditingValue")]),t._v(" 的调用做下调整，毕竟每次变更输入框内容就遍历不好~")]),t._v(" "),s("li",[t._v("设置光标位置的代码不需要了，"),s("code",[t._v("userUpdateTextEditingValue")]),t._v(" 方法内部会做这个事情")])]),t._v(" "),s("h3",{attrs:{id:"_2、滚动条"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、滚动条"}},[t._v("#")]),t._v(" 2、滚动条")]),t._v(" "),s("p",[t._v("只有 "),s("code",[t._v("readOnly")]),t._v(" 为 "),s("code",[t._v("true")]),t._v(" 时才会出现底部间距，对比 "),s("code",[t._v("Scrollbar")]),t._v(" 的 "),s("code",[t._v("updateScrollbarPainter")]),t._v(" 方法中的 "),s("code",[t._v("padding")]),t._v(" 发现端倪")]),t._v(" "),s("p",[s("code",[t._v("readOnly: true")]),t._v(" 的情况：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132208833.png",alt:"readOnly: true"}})]),t._v(" "),s("p",[s("code",[t._v("readOnly: false")]),t._v(" 的情况：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132209608.png",alt:"readOnly: false"}})]),t._v(" "),s("p",[t._v("可以看到 "),s("code",[t._v("readOnly: true")]),t._v(" 的情况下 "),s("code",[t._v("padding")]),t._v(" 的 "),s("code",[t._v("bottom")]),t._v(" 为 "),s("code",[t._v("34.0")]),t._v("，做 "),s("code",[t._v("iOS")]),t._v(" 开发的小伙伴看到这个数值一定会觉得很熟悉，没错，就是底部安全区域的高度，而当键盘出现的时候，"),s("code",[t._v("Scrollbar")]),t._v(" 是不可能接触到底部安全区域的，所以 "),s("code",[t._v("padding")]),t._v(" 的 "),s("code",[t._v("bottom")]),t._v(" 为 "),s("code",[t._v("0")]),t._v("。")]),t._v(" "),s("p",[t._v("这个时候我们只需要想办法让 "),s("code",[t._v("Scrollbar")]),t._v(" 获取到的 "),s("code",[t._v("padding")]),t._v(" 的 "),s("code",[t._v("bottom")]),t._v(" 为 "),s("code",[t._v("0")]),t._v(" 即可。这个不多说直接上代码：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MediaQuery")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePadding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildTextField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removeTop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removeBottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重点")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202211132209013.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"四、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、最后"}},[t._v("#")]),t._v(" 四、最后")]),t._v(" "),s("p",[t._v("示例代码已同步至 "),s("code",[t._v("GitHub")]),t._v(": "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_demo/tree/main/lib/features/chat_text_field",target:"_blank",rel:"noopener noreferrer"}},[t._v("LinXunFeng/flutter_demo"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/126.1e1189eb.js b/assets/js/126.1e1189eb.js new file mode 100644 index 000000000..f34216161 --- /dev/null +++ b/assets/js/126.1e1189eb.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[126],{476:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、背景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、背景"}},[t._v("#")]),t._v(" 一、背景")]),t._v(" "),s("p",[s("code",[t._v("Flutter")]),t._v(" 项目在 "),s("code",[t._v("iPhone")]),t._v(" 真机上运行会白屏，"),s("code",[t._v("VSCode")]),t._v(" 右下角一直卡在 "),s("code",[t._v("Installing and launching...")]),t._v("，"),s("code",[t._v("AndroidStudio")]),t._v(" 亦是如此。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202302111246252.png",alt:""}})]),t._v(" "),s("p",[t._v("其它人的电脑又是正常的，遂着手进行问题的定位，并在解决问题后向 "),s("code",[t._v("Flutter")]),t._v(" 官方提交了我的第一份 "),s("code",[t._v("PR")]),t._v("。")]),t._v(" "),s("p",[s("code",[t._v("PR")]),t._v(" 链接："),s("a",{attrs:{href:"https://github.com/flutter/flutter/pull/119443",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/pull/119443"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"二、问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、问题"}},[t._v("#")]),t._v(" 二、问题")]),t._v(" "),s("p",[t._v("使用命令 "),s("code",[t._v("flutter run -d xxxx -v")]),t._v(" 运行项目，日志如下：")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" -------------------------\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +187 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$command")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("source")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Executing commands "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'")]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ platform "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("select")]),t._v(" remote-"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--sysroot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Platform: remote-ios\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Connected: no\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" SDK Path: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ target create\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("+3544 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Current executable "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" to\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arm64"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ script\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_device_app")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/private/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777/Runner.app"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +124 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_connect_url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"connect://127.0.0.1:65222"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_output_path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_error_path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ target modules search-paths "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" /usr "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols/usr"')]),t._v(" /System "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols/System"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/private/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"')]),t._v(" /Developer\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols/Developer"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +15 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("import")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap_00008120_0019784E2690C01E.py"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +3 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.connect_command connect\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.run_command\nrun\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v("\nfruitstrap_00008120_0019784E2690C01E.autoexit_command autoexit\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v("\nfruitstrap_00008120_0019784E2690C01E.safequit_command safequit\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ connect\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +29 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ run\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +109 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" success\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("+4740 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$2023")]),t._v("-02-02 08:57:41.425078+0800 Runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5278")]),t._v(":1703137"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" flutter: The Dart VM "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("service")]),t._v(" is\nlistening on http://127.0.0.1:61063/\n")])])]),s("p",[t._v("而正常运行的日志是这样的：")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" -------------------------\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +359 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("source")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Executing commands "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'")]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" platform "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("select")]),t._v(" remote-"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--sysroot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Platform: remote-ios\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Connected: no\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" SDK Path: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" target create\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("+3984 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Current executable "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" to\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arm64"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" script\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_device_app")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/private/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499/Runner.app"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +136 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_connect_url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"connect://127.0.0.1:65102"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_output_path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("fruitstrap_error_path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" target modules search-paths "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" /usr "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols/usr"')]),t._v(" /System "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols/System"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/private/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"')]),t._v(" /Developer\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols/Developer"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +17 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("import")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap_00008120_0019784E2690C01E.py"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +3 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.connect_command connect\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.run_command run\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.autoexit_command\nautoexit\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("command")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" asynchronous "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" fruitstrap_00008120_0019784E2690C01E.safequit_command\nsafequit\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" connect\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +38 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" run\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +118 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" success\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Application launched on the device. Waiting "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" observatory url.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("+4521 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2023")]),t._v("-02-02 08:55:53.841520+0800 Runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5272")]),t._v(":1701483"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Warning: Unable to create restoration "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\nprogress marker "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +45 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Observatory URL on device: http://127.0.0.1:60477/\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +3 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Attempting to forward device port "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("60477")]),t._v(" to "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("host")]),t._v(" port "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("65119")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" executing: /Users/lxf/fvm/versions/3.3.7/bin/cache/artifacts/usbmuxd/iproxy "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("65119")]),t._v(":60477 "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--udid")]),t._v("\n00008120-0019784E2690C01E "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--debug")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +433 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" fopen failed "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" data file: errno "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("No such "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" or directory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Errors found"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" Invalidating cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +13 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" fopen failed "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" data file: errno "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("No such "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" or directory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Errors found"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" Invalidating cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +560 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Forwarded port ForwardedPort HOST:65119 to DEVICE:60477\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Forwarded "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("host")]),t._v(" port "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("65119")]),t._v(" to device port "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("60477")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" Observatory\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Installing and launching"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(". "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("completed "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),t._v(".1s"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Caching compiled dill\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +16 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Connecting to "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("service")]),t._v(" protocol: http://127.0.0.1:65119/\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +92 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Launching a Dart Developer Service "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("DDS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" instance at http://127.0.0.1:0, connecting to VM "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("service")]),t._v(" at\nhttp://127.0.0.1:65119/.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +45 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" DDS is listening at http://127.0.0.1:65124/MCCddjLRlQk"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("/.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +22 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Successfully connected to "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("service")]),t._v(" protocol: http://127.0.0.1:65119/\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +13 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" DevFS: Creating new filesystem on the device "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("null"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +10 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" DevFS: Created new filesystem on the device\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file:///private/var/mobile/Containers/Data/Application/9066D3F0-F8FB-489D-99BD-FCAF266B118F/tmp/examplePN73Pp/exa\nmple/"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Updating assets\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +34 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Syncing files to device lxf的iPhone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Compiling dart to kernel with "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" updated files\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Processing bundle.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("- recompile package:scrollview_observer_example/main.dart ef8dbbad-3cff-4e06-9043-63987bdc88a2\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("- ef8dbbad-3cff-4e06-9043-63987bdc88a2\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Bundle processing done.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +30 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Updating files.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" DevFS: Sync finished\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Syncing files to device lxf的iPhone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(". "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("completed "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" 33ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Synced "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(".0MB.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("- accept\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +7 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Connected to _flutterView/0x10881a420.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +1 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Flutter run key commands.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" r Hot reload. 🔥🔥🔥\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" R Hot restart.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" h List all available interactive commands.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" d Detach "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("terminate "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"flutter run"')]),t._v(" but leave application running"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" c Clear the "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("screen")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" q Quit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("terminate the application on the device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" 💪 Running with sound null safety 💪\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" An Observatory debugger and profiler on lxf的iPhone is available at:\nhttp://127.0.0.1:65124/MCCddjLRlQk"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("/\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +29 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" The Flutter DevTools debugger and profiler on lxf的iPhone is available at:\n http://127.0.0.1:9102?uri"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("http://127.0.0.1:65124/MCCddjLRlQk"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("/\n")])])]),s("p",[t._v("在不断谷歌 "),s("code",[t._v("Flutter Installing and launching...")]),t._v(" 并按解决步骤操作后但问题依旧时，我认真对比了上述的命令执行日志，发现有一处可疑的地方，那就是:")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +29 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ run\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +109 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" success\n\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +38 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lldb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" run\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" +118 ms"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" success\n")])])]),s("p",[t._v("为什么我会觉得它可疑呢？因为我之前学 "),s("code",[t._v("iOS")]),t._v(" 逆向的时候自定义过 "),s("code",[t._v("lldb")]),t._v(" 提示符，然后差不多在那个时间段后 "),s("code",[t._v("Flutter")]),t._v(" 项目就不再能正常运行，而且从日志中可以看出到这里就不再往下执行了~")]),t._v(" "),s("p",[t._v("个性化提示符：")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# ~/.lldbinit 文件的内容")]),t._v("\nsettings "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" prompt "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\[LinXunFeng]$"')]),t._v("\n")])])]),s("p",[t._v("将其注释掉，竟完美解决了这个问题~")]),t._v(" "),s("h2",{attrs:{id:"三、探索"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、探索"}},[t._v("#")]),t._v(" 三、探索")]),t._v(" "),s("p",[t._v("改回原来的 "),s("code",[t._v("lldb")]),t._v(" 提示符就好了，那说明 "),s("code",[t._v("Flutter")]),t._v(" 内部八成是根据这个固定的输出来做判断是否进入下一步，打开 "),s("code",[t._v("Flutter")]),t._v(" 源码进行全局搜索 "),s("code",[t._v("(lldb) run")]),t._v("，果不其然，在 "),s("code",[t._v("flutter_tools")]),t._v(" 下可以搜到关键代码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// (lldb) run")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),t._v(" _lldbRun "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("r'\\(lldb\\)\\s*run'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("具体文件定位："),s("a",{attrs:{href:"https://github.com/flutter/flutter/blob/3.1.0/packages/flutter_tools/lib/src/ios/ios_deploy.dart#L285-L287",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_tools/ios_deploy.dart#L285-L287"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("在文件下搜索 "),s("code",[t._v("_lldbRun")]),t._v(" 定位到 "),s("code",[t._v("launchAndAttach")]),t._v(" 方法，如下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Launch the app on the device, and attach the debugger.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Returns whether or not the debugger successfully attached.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Return when the debugger attaches, or the ios-deploy process exits.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Completer")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" debuggerCompleter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Completer")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _iosDeployProcess "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" _processUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n _launchCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n environment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _iosDeployEnv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" lastLineFromDebugger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StreamSubscription")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" stdoutSubscription "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _iosDeployProcess"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("stdout\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transform"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("utf8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transform"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineSplitter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" line"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_monitorIOSDeployFailure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("line"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// (lldb) run")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// success")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2020-09-15 13:42:25.185474-0700 Runner[477:181141] flutter: The Dart VM service is listening on http://127.0.0.1:57782/")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_lldbRun"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasMatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("line"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("line"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _debuggerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _IOSDeployDebuggerState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("launching"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Next line after "run" must be "success", or the attach failed.')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Example: "error: process launch failed"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_debuggerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" _IOSDeployDebuggerState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("launching"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("line"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool attachSuccess "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" line "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'success'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _debuggerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" attachSuccess "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" _IOSDeployDebuggerState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attached "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _IOSDeployDebuggerState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detached"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("debuggerCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isCompleted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n debuggerCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("complete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("attachSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" debuggerCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("future"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("具体文件定位："),s("a",{attrs:{href:"https://github.com/flutter/flutter/blob/3.1.0/packages/flutter_tools/lib/src/ios/ios_deploy.dart#L319-L351",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_tools/ios_deploy.dart#L319-L351"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("见名识义，将项目运行起来后进行附加调试，这段代码的执行流程如下：")]),t._v(" "),s("ol",[s("li",[t._v("调用 "),s("code",[t._v("_processUtils")]),t._v(" 的 "),s("code",[t._v("start")]),t._v(" 方法执行 "),s("code",[t._v("_launchCommand")]),t._v("，然后监听其输出内容。")]),t._v(" "),s("li",[t._v("在监听到 "),s("code",[t._v("(lldb) run")]),t._v(" 后将 "),s("code",[t._v("_debuggerState")]),t._v(" 赋值为 "),s("code",[t._v("_IOSDeployDebuggerState.launching")]),t._v("，以做为判断紧跟其后的 "),s("code",[t._v("success")]),t._v(" 是目标输出内容的依据")]),t._v(" "),s("li",[t._v("接着进行了最关键的一步 "),s("code",[t._v("debuggerCompleter.complete(attachSuccess)")]),t._v("，告诉外部该功能已成功执行")])]),t._v(" "),s("p",[t._v("而我的电脑因为自定义 "),s("code",[t._v("LLDB prompt")]),t._v(" 导致这个小流程中的 "),s("code",[t._v("2")]),t._v(" 和 "),s("code",[t._v("3")]),t._v(" 无法顺利执行~~")]),t._v(" "),s("h2",{attrs:{id:"四、修复"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、修复"}},[t._v("#")]),t._v(" 四、修复")]),t._v(" "),s("p",[t._v("知道导致问题的原因后，我那就来尝试修复一下，思路很简单，就是先获取当前的 "),s("code",[t._v("lldb")]),t._v(" 提示符然后将 "),s("code",[t._v("_lldbRun")]),t._v(" 中的 "),s("code",[t._v("(lldb)")]),t._v(" 字符串给替换掉，那如何获取当前的 lldb 提示符？")]),t._v(" "),s("p",[t._v("还记得上面提到的常量 "),s("code",[t._v("_lldbRun")]),t._v(" 吗？定义处有相应的链接")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// (lldb) run")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),t._v(" _lldbRun "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RegExp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("r'\\(lldb\\)\\s*run'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("打开链接后可以找到上面日志里出现过的 "),s("code",[t._v("platform select remote-'ios' --sysroot")]),t._v("，定义如下：")]),t._v(" "),s("div",{staticClass:"language-objectivec extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objectivec"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n * Startup script passed to lldb.\n * To see how xcode interacts with lldb, put this into .lldbinit:\n * log enable -v -f /Users/vargaz/lldb.log lldb all\n * log enable -v -f /Users/vargaz/gdb-remote.log gdb-remote all\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("define")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token macro-name"}},[t._v("LLDB_PREP_CMDS")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("CFSTR")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("platform select remote"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("ios "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("sysroot ")]),s("span",{pre:!0,attrs:{class:"token char"}},[t._v("'{symbols_path}'")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("\\n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token expression"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")])])]),t._v('\n connect\\n\\\n"'),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("代码摘自："),s("a",{attrs:{href:"https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L33",target:"_blank",rel:"noopener noreferrer"}},[t._v("ios-control/ios-deploy.m#L33"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("那就好办了，这个 "),s("code",[t._v("platform select remote-'ios' --sysroot")]),t._v(" 的输出比 "),s("code",[t._v("run")]),t._v(" 要早，所以只需要监听其被输出后进行字符串截取，就可以取到当前的 "),s("code",[t._v("lldb")]),t._v(" 提示符")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("LinXunFeng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("$ platform "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("select")]),t._v(" remote-"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--sysroot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Library/Developer/Xcode/iOS\nDeviceSupport/16.1.1 (20B101) arm64e/Symbols'")]),t._v("\n")])])]),s("p",[t._v("具体代码：")]),t._v(" "),s("p",[t._v("1、定义 "),s("code",[t._v("_lldbPlatformSelect")]),t._v(" 常量")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // (lldb) run\n")]),s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51\n")]),s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" static final RegExp _lldbRun = RegExp(r'\\(lldb\\)\\s*run');\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // (lldb) platform select remote-'ios' --sysroot\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L33\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' // This regex is to get the configurable lldb prompt. By default this prompt will be "lldb".\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" static final RegExp _lldbPlatformSelect = RegExp(r\"\\s*platform select remote-'ios' --sysroot\");\n")])])])])]),s("p",[t._v("2、调整 "),s("code",[t._v("launchAndAttach")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("Future launchAndAttach() async {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // Return when the debugger attaches, or the ios-deploy process exits.\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // (lldb) run\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" RegExp lldbRun = RegExp(r'\\(lldb\\)\\s*run');\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" final Completer debuggerCompleter = Completer();\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" try {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" _iosDeployProcess = await _processUtils.start(\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" _launchCommand,\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" environment: _iosDeployEnv,\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" );\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" String? lastLineFromDebugger;\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" final StreamSubscription stdoutSubscription = _iosDeployProcess!.stdout\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" .transform(utf8.decoder)\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" .transform(const LineSplitter())\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" .listen((String line) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" _monitorIOSDeployFailure(line, _logger);\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v("\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // (lldb) platform select remote-'ios' --sysroot\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // Use the configurable custom lldb prompt in the regex. The developer can set this prompt to anything.\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' // For example `settings set prompt "(mylldb)"` in ~/.lldbinit results in:\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // \"(mylldb) platform select remote-'ios' --sysroot\"\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (_lldbPlatformSelect.hasMatch(line)) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" final String platformSelect = _lldbPlatformSelect.stringMatch(line) ?? '';\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (platformSelect.isEmpty) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" return;\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" final int promptEndIndex = line.indexOf(platformSelect);\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (promptEndIndex == -1) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" return;\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" final String prompt = line.substring(0, promptEndIndex);\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" lldbRun = RegExp(RegExp.escape(prompt) + r'\\s*run');\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" _logger.printTrace(line);\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" return;\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // (lldb) run\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // success\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // 2020-09-15 13:42:25.185474-0700 Runner[477:181141] flutter: The Dart VM service is listening on http://127.0.0.1:57782/\n")])]),s("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (_lldbRun.hasMatch(line)) {\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (lldbRun.hasMatch(line)) {\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")])])])])]),s("p",[t._v("修改完进行测试，确认没有问题后向 "),s("code",[t._v("Flutter")]),t._v(" 官方提交了 "),s("a",{attrs:{href:"https://github.com/flutter/flutter/pull/119443",target:"_blank",rel:"noopener noreferrer"}},[t._v("PR"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"五、调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、调试"}},[t._v("#")]),t._v(" 五、调试")]),t._v(" "),s("blockquote",[s("p",[t._v("这里主要记录关于调试的一些准备和注意点。")])]),t._v(" "),s("h3",{attrs:{id:"准备工作"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备工作"}},[t._v("#")]),t._v(" 准备工作")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("VSCode")]),t._v(" 打开 "),s("code",[t._v("flutter_tools")]),t._v(" 项目，调试前需要做的就两个操作：")]),t._v(" "),s("p",[t._v("1、调整 "),s("code",[t._v(".vscode/launch.json")])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"flutter_tools"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"request"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"launch"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"type"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dart"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"args"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"run"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-v"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-d"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"设备id"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"program"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"bin/flutter_tools.dart"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("2、指定运行的 "),s("code",[t._v("flutter")]),t._v(" 项目")]),t._v(" "),s("p",[t._v("上面只是设置了打印日志和指定运行的设备id，还差指定运行的 "),s("code",[t._v("flutter")]),t._v(" 项目。")]),t._v(" "),s("p",[t._v("由于 "),s("code",[t._v("flutter")]),t._v(" 命令里没有提供相关参数，所以我在 "),s("code",[t._v("lib/executable.dart")]),t._v(" 文件中 "),s("code",[t._v("Cache.flutterRoot")]),t._v(" 的上一行添加如下代码，强行修改当前执行 "),s("code",[t._v("flutter")]),t._v(" 命令的目录路径")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置当前执行flutter命令的目录路径")]),t._v("\nglobals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDirectory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Desktop/LXF/github/flutter_scrollview_observer/example'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutterRoot "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defaultFlutterRoot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])]),s("p",[t._v("不过该方式过于粗暴，后面经过摸索，发现在 "),s("code",[t._v(".vscode/launch.json")]),t._v(" 配置 "),s("code",[t._v("cwd")]),t._v(" 即可达到效果，完整配置如下:")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"flutter_tools"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"request"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"launch"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"type"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dart"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"args"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"run"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-v"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-d"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"设备id"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"program"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"${workspaceFolder}/bin/flutter_tools.dart"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"env"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"FLUTTER_ROOT"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"${workspaceFolder}/../../"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"cwd"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("h3",{attrs:{id:"注意项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注意项"}},[t._v("#")]),t._v(" 注意项")]),t._v(" "),s("p",[t._v("当你调试完 "),s("code",[t._v("flutter_tools")]),t._v(" 的源码后，高高兴兴去到自己的 "),s("code",[t._v("flutter")]),t._v(" 工程目录下执行 "),s("code",[t._v("flutter run")]),t._v(" 时，你会发现改动不生效，这是因为存在如下缓存文件")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("flutter/bin/cache/flutter_tools.snapshot\n")])])]),s("p",[t._v("解决方式：将该文件删除即可，当执行任意的 "),s("code",[t._v("flutter")]),t._v(" 命令时会自动再次生成。")]),t._v(" "),s("h2",{attrs:{id:"六、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、最后"}},[t._v("#")]),t._v(" 六、最后")]),t._v(" "),s("p",[t._v("这次提 "),s("code",[t._v("PR")]),t._v(" 的过程也学到了很多，过程中比较令人记忆深刻的是以下几点：")]),t._v(" "),s("ol",[s("li",[t._v("每一行的内容不可以以空格结尾，否则 "),s("code",[t._v("Linux analyze")]),t._v(" 这个 "),s("code",[t._v("Check")]),t._v(" 会失败。")]),t._v(" "),s("li",[s("code",[t._v("100+")]),t._v(" 条 "),s("code",[t._v("Check")]),t._v(" 执行时间是真的久，好像是 "),s("code",[t._v("40+分钟")]),t._v("，每次提交都会重新执行。")]),t._v(" "),s("li",[t._v("有的 "),s("code",[t._v("Check")]),t._v(" 时不时会抽风，像 "),s("code",[t._v("Google testing")]),t._v(" 有时会一直卡住，"),s("code",[t._v("luci-flutter")]),t._v(" 会经常失败，这些可以不用理它，因为其它人也会，当官方调整完会自动重新执行。")]),t._v(" "),s("li",[t._v("提交 "),s("code",[t._v("PR")]),t._v(" 后到开始审核的时间好久，"),s("code",[t._v("2023.1.29")]),t._v(" 提交，"),s("code",[t._v("2023.2.3")]),t._v(" 审核，5天，你知道我这5天是怎么过来的吗？ 😂")])]),t._v(" "),s("p",[t._v("但不管怎么说，功夫不负有心人，最终于 "),s("code",[t._v("2023.2.7")]),t._v(" 成功 "),s("code",[t._v("Merge")]),t._v("，这是一次不错的开始 😃")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/127.424510cd.js b/assets/js/127.424510cd.js new file mode 100644 index 000000000..7f5c19219 --- /dev/null +++ b/assets/js/127.424510cd.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[127],{479:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、背景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、背景"}},[t._v("#")]),t._v(" 一、背景")]),t._v(" "),s("p",[t._v("上一篇 "),s("RouterLink",{attrs:{to:"/pages/5c4b50/"}},[t._v("Flutter - 我给官方提PR，解决run命令卡住问题 😃")]),t._v(" 中，虽然我提的 "),s("code",[t._v("pr")]),t._v(" 最终成功 "),s("code",[t._v("merge")]),t._v(" 了，但是我心中还存在着几点疑问，如：")],1),t._v(" "),s("ol",[s("li",[t._v("只能删除 "),s("code",[t._v("snapshot")]),t._v(" 文件才能使修改的 "),s("code",[t._v("flutter_tools")]),t._v(" 代码生效吗？")]),t._v(" "),s("li",[t._v("终端内执行 "),s("code",[t._v("flutter")]),t._v(" 命令后的流程是怎样的？")])]),t._v(" "),s("p",[t._v("现在就让我们带着疑问一起来了解一下从 "),s("code",[t._v("flutter run")]),t._v(" 到 "),s("code",[t._v("flutter_tools")]),t._v(" 调用 "),s("code",[t._v("launchAndAttach")]),t._v(" 的过程吧。")]),t._v(" "),s("h2",{attrs:{id:"二、终端"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、终端"}},[t._v("#")]),t._v(" 二、终端")]),t._v(" "),s("p",[t._v("流程图如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202302192008218.png",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"flutter-文件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flutter-文件"}},[t._v("#")]),t._v(" "),s("code",[t._v("flutter")]),t._v(" 文件")]),t._v(" "),s("p",[t._v("在终端内执行 "),s("code",[t._v("flutter")]),t._v(" 命令，必然是与其环境变量相关的")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# export PATH=~/developer/flutter/bin:$PATH")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[s("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("PATH")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=~")]),t._v("/fvm/default/bin:"),s("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("$PATH")]),t._v("\n")])])]),s("p",[t._v("在上述路径下找到名为 "),s("code",[t._v("flutter")]),t._v(" 文件，并打开")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token shebang important"}},[t._v("#!/usr/bin/env bash")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# /Users/lxf/fvm/versions/3.1.0/bin/flutter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("PROG_NAME")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),t._v("follow_links "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("${"),s("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("BASH_SOURCE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("}")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# /Users/lxf/fvm/versions/3.1.0/bin")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("BIN_DIR")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("${PROG_NAME"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("*}")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("pwd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-P")]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# To define `shared::execute()` function")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("source")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BIN_DIR")]),t._v('/internal/shared.sh"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# $@: 代表输入的所有参数，但是每个区分对待")]),t._v("\nshared::execute "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$@")]),t._v('"')]),t._v("\n")])])]),s("p",[t._v("将 "),s("code",[t._v("internal/shared.sh")]),t._v(" 脚本的内容引入，然后执行其 "),s("code",[t._v("shared::execute")]),t._v(" 方法，并通过 "),s("code",[t._v('"$@"')]),t._v(" 将我们在终端下输入的其它参数传递进去，即：")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 在终端上输入的内容")]),t._v("\nflutter run "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-v")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-d")]),t._v(" 设备id\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 实际上命令后续的参数是传递给了 shared::execute")]),t._v("\nshared::execute run "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-v")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-d")]),t._v(" 设备id\n")])])]),s("h3",{attrs:{id:"shared-sh-文件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shared-sh-文件"}},[t._v("#")]),t._v(" "),s("code",[t._v("shared.sh")]),t._v(" 文件")]),t._v(" "),s("p",[t._v("打开 "),s("code",[t._v("internal/shared.sh")]),t._v(" 来看一看")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token shebang important"}},[t._v("#!/usr/bin/env bash")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" upgrade_flutter "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n // 创建cache目录\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mkdir")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/cache"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 取出当前flutter源码HEAD提交的SHA1值")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("revision")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("git")]),t._v(" rev-parse HEAD"),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 拼接，如 bcea432bce54a83306b3c00a7ad0ed98f777348d:")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("compilekey")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$revision")]),t._v(":"),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOL_ARGS")]),t._v('"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 判断缓存是否需要更新的几个步骤:")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# * 没有snapshot文件, 或者")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# * stamp文件不存在, 或者")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# * stamp文件内容为空, 或者")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# * stamp文件内的SHA1与当前HEAD的SHA1不同, 或者")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# * pubspec.yaml 的修改时间比 pubspec.lock 的新")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$SNAPSHOT_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$STAMP_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$STAMP_PATH")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$compilekey")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/pubspec.yaml"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-nt")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/pubspec.lock"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("then")]),t._v("\n _wait_for_lock\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# A different shell process might have updated the tool/SDK.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$SNAPSHOT_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$STAMP_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cat")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$STAMP_PATH")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$compilekey")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/pubspec.yaml"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-ot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/pubspec.lock"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("then")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fi")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 拉取dart_sdk")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/version"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("touch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/cache/.dartignore"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/internal/update_dart_sdk.sh"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("&2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("echo")]),t._v(" Building flutter tool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Prepare packages...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("VERBOSITY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--verbosity=error"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$CI")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"true"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BOT")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"true"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$CONTINUOUS_INTEGRATION")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"true"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$CHROME_HEADLESS")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("then")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("PUB_ENVIRONMENT")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$PUB_ENVIRONMENT")]),t._v(':flutter_bot"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("VERBOSITY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--verbosity=normal"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fi")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("PUB_ENVIRONMENT")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$PUB_ENVIRONMENT")]),t._v(':flutter_install"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-d")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/.pub-cache"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("then")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("PUB_CACHE")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"${PUB_CACHE:-"')]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v("/.pub-cache"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"}"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fi")]),t._v("\n pub_upgrade_with_retry\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 编译产出snapshot文件")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$DART")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--verbosity")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("error --disable-dart-dev "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOL_ARGS")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--snapshot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$SNAPSHOT_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/.packages"')]),t._v(" --no-enable-mirrors "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$SCRIPT_PATH")]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 将 compilekey 写入到 stamp 文件")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("echo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$compilekey")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$STAMP_PATH")]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fi")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$?")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# This function is intended to be executed by entrypoints (e.g. `//bin/flutter`")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# and `//bin/dart`). PROG_NAME and BIN_DIR should already be set by those")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# entrypoints.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" shared::"),s("span",{pre:!0,attrs:{class:"token function-name function"}},[t._v("execute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("FLUTTER_ROOT")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("${BIN_DIR}")]),t._v('/.."')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("pwd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-P")]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# If present, run the bootstrap script first")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("BOOTSTRAP_PATH")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/internal/bootstrap.sh"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BOOTSTRAP_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("then")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("source")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BOOTSTRAP_PATH")]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fi")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("FLUTTER_TOOLS_DIR")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/packages/flutter_tools"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("SNAPSHOT_PATH")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/cache/flutter_tools.snapshot"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("STAMP_PATH")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/cache/flutter_tools.stamp"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("SCRIPT_PATH")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/bin/flutter_tools.dart"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("DART_SDK_PATH")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_ROOT")]),t._v('/bin/cache/dart-sdk"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("DART")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$DART_SDK_PATH")]),t._v('/bin/dart"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 更新依赖、pub-cache目录")]),t._v("\n upgrade_flutter "),s("span",{pre:!0,attrs:{class:"token operator"}},[s("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("7")]),t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$PROG_NAME")]),t._v('"')]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# BIN_NAME 的值为 flutter")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("BIN_NAME")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("basename")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$PROG_NAME")]),t._v('"')]),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v(")")])]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BIN_NAME")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v("\n flutter*"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 执行 flutter_tools.snapshot")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# exec")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# /Users/lxf/fvm/versions/3.1.0/bin/cache/dart-sdk/bin/dart")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# --disable-dart-dev")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('# --packages="/Users/lxf/fvm/versions/3.1.0/packages/flutter_tools/.packages"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# /Users/lxf/fvm/versions/3.1.0/bin/cache/flutter_tools.snapshot ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exec")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$DART")]),t._v('"')]),t._v(" --disable-dart-dev "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOLS_DIR")]),t._v('/.packages"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$FLUTTER_TOOL_ARGS")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$SNAPSHOT_PATH")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$@")]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dart*"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exec")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$DART")]),t._v('"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"'),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$@")]),t._v('"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n *"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("&2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("echo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Error! Executable name '),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$BIN_NAME")]),t._v(' not recognized!"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("esac")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("basename")]),t._v("：去掉文件名前面的目录并打印出来")]),t._v(" "),s("li",[s("code",[t._v("DART")]),t._v("："),s("code",[t._v("dart")]),t._v(" 可执行文件的文件路径")]),t._v(" "),s("li",[s("code",[t._v("FLUTTER_TOOLS_DIR")]),t._v("："),s("code",[t._v("flutter_tools")]),t._v(" 目录路径")]),t._v(" "),s("li",[s("code",[t._v("FLUTTER_TOOL_ARGS")]),t._v("：单独的空格分隔")]),t._v(" "),s("li",[s("code",[t._v("SNAPSHOT_PATH")]),t._v("："),s("code",[t._v("flutter_tools.snapshot")]),t._v(" 文件路径")]),t._v(" "),s("li",[s("code",[t._v("SCRIPT_PATH")]),t._v("：编译的入口文件")])]),t._v(" "),s("p",[t._v("所以最终执行的命令为：")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("exec")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n/Users/lxf/fvm/versions/3.1.0/bin/cache/dart-sdk/bin/dart "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n--disable-dart-dev "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/fvm/versions/3.1.0/packages/flutter_tools/.packages"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n/Users/lxf/fvm/versions/3.1.0/bin/cache/flutter_tools.snapshot "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("\\")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(". 其它传递进来的参数\n")])])]),s("p",[t._v("可以看到就是去执行 "),s("code",[t._v("flutter_tools.snapshot")])]),t._v(" "),s("p",[t._v("当然了，在到这里之前会执行 "),s("code",[t._v("upgrade_flutter")]),t._v(" 方法，其主要是以下几个动作：")]),t._v(" "),s("ol",[s("li",[t._v("创建 "),s("code",[t._v("bin/cache")]),t._v(" 目录")]),t._v(" "),s("li",[t._v("拉取 "),s("code",[t._v("dart-sdk")])]),t._v(" "),s("li",[t._v("创建或更新 "),s("code",[t._v("flutter_tools.snapshot")])])]),t._v(" "),s("p",[t._v("为了确保 "),s("code",[t._v("flutter_tools.snapshot")]),t._v(' 是存在的且为 "最新"，其中判断是否需要对缓存进行更新有几个点:')]),t._v(" "),s("ul",[s("li",[t._v("没有 "),s("code",[t._v("flutter_tools.snapshot")]),t._v(" 文件, 或者")]),t._v(" "),s("li",[s("code",[t._v("flutter_tools.stamp")]),t._v(" 文件不存在, 或者")]),t._v(" "),s("li",[s("code",[t._v("flutter_tools.stamp")]),t._v(" 文件内容为空, 或者")]),t._v(" "),s("li",[s("code",[t._v("flutter_tools.stamp")]),t._v(" 文件内的 "),s("code",[t._v("SHA1")]),t._v("与当前 "),s("code",[t._v("HEAD")]),t._v(" 的 "),s("code",[t._v("SHA1")]),t._v(" 不同, 或者")]),t._v(" "),s("li",[s("code",[t._v("pubspec.yaml")]),t._v(" 的修改时间比 "),s("code",[t._v("pubspec.lock")]),t._v(" 的新")])]),t._v(" "),s("p",[t._v("终端执行 "),s("code",[t._v("flutter")]),t._v(" 命令的流程也就到这了，这部分让我们知道了 "),s("code",[t._v("flutter")]),t._v(" 命令实际上就是去执行 "),s("code",[t._v("flutter_tools.snapshot")]),t._v(" 文件，以及在 "),s("code",[t._v("upgrade_flutter")]),t._v(" 方法的最后是去编译产出该 "),s("code",[t._v("snapshot")]),t._v(" 文件，其编译的入口文件为 "),s("code",[t._v("flutter/packages/flutter_tools/bin/flutter_tools.dart")]),t._v("。")]),t._v(" "),s("p",[t._v("那接下来让我们一起去看看 "),s("code",[t._v("flutter_tools")]),t._v(" 的源码。")]),t._v(" "),s("h2",{attrs:{id:"三、flutter-tools-源码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、flutter-tools-源码"}},[t._v("#")]),t._v(" 三、flutter_tools 源码")]),t._v(" "),s("p",[t._v("下面以命令 "),s("code",[t._v("flutter run -v -d 设备ID")]),t._v(" 为例")]),t._v(" "),s("p",[t._v("整体流程图如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202302192008275.png",alt:""}})]),t._v(" "),s("p",[t._v("温馨提醒：请放大食用，最好可以边对照流程图边看下面的源码分析")]),t._v(" "),s("h3",{attrs:{id:"_1、准备阶段"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、准备阶段"}},[t._v("#")]),t._v(" 1、准备阶段")]),t._v(" "),s("p",[t._v("在真正执行 "),s("code",[t._v("flutter run")]),t._v(" 命令前会有一个准备阶段")]),t._v(" "),s("h4",{attrs:{id:"入口文件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#入口文件"}},[t._v("#")]),t._v(" 入口文件")]),t._v(" "),s("p",[s("code",[t._v("flutter_tools.dart")]),t._v(" 为 "),s("code",[t._v("flutter_tools")]),t._v(" 的入口文件，代码如下：")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径："),s("code",[t._v("bin/flutter_tools.dart")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:flutter_tools/executable.dart'")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" executable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n executable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("作用就是去执行 "),s("code",[t._v("executable.dart")]),t._v(" 文件里的 "),s("code",[t._v("main")]),t._v(" 方法")]),t._v(" "),s("h4",{attrs:{id:"main"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#main"}},[t._v("#")]),t._v(" main")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径："),s("code",[t._v("lib/executable.dart")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generateCommands")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("generateCommands")]),t._v(" 生成的是 "),s("code",[t._v("List")]),t._v("，对应 "),s("code",[t._v("lib/src/commands")]),t._v(" 目录下的所有命令，这里面包含了我们需要关注的 "),s("code",[t._v("RunCommand")]),t._v("，对应 "),s("code",[t._v("flutter run")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generateCommands")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required bool verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required bool verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AnalyzeCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" processManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("processManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" terminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("terminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" artifacts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("artifacts"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" allProjectValidators"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ProjectValidator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AssembleCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" buildSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AttachCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChannelCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CleanCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ConfigCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomDevicesCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("customDevicesConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customDevicesConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" operatingSystemUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("os"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" terminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("terminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" featureFlags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" featureFlags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" processManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("processManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CreateCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DaemonCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hidden"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DebugAdapterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DevicesCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DoctorCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verbose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DowngradeCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DriveCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EmulatorsCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FormatCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenerateCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenerateLocalizationsCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstallCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LogsCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MakeHostAppEditableCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PackagesCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrecacheCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" featureFlags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" featureFlags"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScreenshotCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShellCompletionCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TestCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UpgradeCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SymbolizeCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stdio"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("stdio"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Development-only commands. These are always hidden,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IdeConfigCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UpdatePackagesCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("code",[t._v("runner.run")]),t._v(" 对应的是 "),s("code",[t._v("runner.dart")]),t._v(" 文件里的 "),s("code",[t._v("run")]),t._v(" 方法")]),t._v(" "),s("h4",{attrs:{id:"run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#run"}},[t._v("#")]),t._v(" run")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径："),s("code",[t._v("lib/runner.dart")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Runs the Flutter tool with support for the specified list of [commands].")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bool muteCommandLogging "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool verbose "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool verboseHelp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool reportCrashes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" flutterVersion"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" runInContext"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommandRunner")]),t._v(" runner "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommandRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commands")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("addCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getVersion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" flutterVersion "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutterVersion"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getVersionString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("redactUnknownBranches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),t._v(" firstError"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StackTrace")]),t._v(" firstStackTrace"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" runZoned"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onError"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),t._v(" error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StackTrace")]),t._v(" stackTrace"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ignore: deprecated_member_use")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("最终调用并返回 "),s("code",[t._v("runInContext")]),t._v(" 的运行结果，传入的参数为回调函数，下面会执行")]),t._v(" "),s("h4",{attrs:{id:"runincontext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#runincontext"}},[t._v("#")]),t._v(" runInContext")]),t._v(" "),s("p",[s("code",[t._v("runInContext")]),t._v(" 方法的代码如下:")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/context_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" runInContext"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FutureOr")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Wrap runner with any asynchronous initialization that should run with the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// overrides and callbacks.")]),t._v("\n bool runningOnBot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FutureOr")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runnerWrapper")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n runningOnBot "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isRunningOnBot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("run"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'global fallbacks'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" runnerWrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fallbacks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("返回了 "),s("code",[t._v("context.run")]),t._v("，并且将 "),s("code",[t._v("runnerWrapper")]),t._v(" 传递给了 "),s("code",[t._v("body")]),t._v(" 参数，而 "),s("code",[t._v("runnerWrapper")]),t._v(" 最终调用 "),s("code",[t._v("runner")]),t._v("，下面是 "),s("code",[t._v("context.run")]),t._v(" 方法的实现：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" run"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FutureOr")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" fallbacks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ZoneSpecification")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" zoneSpecification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppContext")]),t._v(" child "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmodifiable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("overrides "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmodifiable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fallbacks "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" runZoned"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zoneValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("_Key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("_Key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zoneSpecification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" zoneSpecification"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看到执行了 "),s("code",[t._v("body")]),t._v("，实际上就是执行 "),s("code",[t._v("runnerWrapper")]),t._v("，最终执行传进来的 "),s("code",[t._v("runner")]),t._v(" 回调函数。")]),t._v(" "),s("p",[t._v("在调用 "),s("code",[t._v("runInContext")]),t._v(" 时就传进了一个回调函数，在这个函数内创建了 "),s("code",[t._v("FlutterCommandRunner")]),t._v(" 实例 "),s("code",[t._v("runner")]),t._v("，调用 "),s("code",[t._v("commands")]),t._v(" 拿到上面提到的 "),s("code",[t._v("generateCommands")]),t._v(" 方法返回的所有 "),s("code",[t._v("FlutterCommand")]),t._v("，并通过 "),s("code",[t._v("addCommand")]),t._v(" 方法逐一添加到 "),s("code",[t._v("runner")]),t._v(" 实例的 "),s("code",[t._v("_commands 中")]),t._v("，以及将相应的 "),s("code",[t._v("command")]),t._v(" 和参数解析添加进 "),s("code",[t._v("argParser")]),t._v(" 实例。\n最后调用 "),s("code",[t._v("FlutterCommandRunner")]),t._v(" 实例 "),s("code",[t._v("runner")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法。")]),t._v(" "),s("p",[t._v("我们先来看一下 "),s("code",[t._v("addCommand")]),t._v(" 方法")]),t._v(" "),s("h4",{attrs:{id:"commandrunner-addcommand"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commandrunner-addcommand"}},[t._v("#")]),t._v(" CommandRunner.addCommand")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：args/lib/command_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Command")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnmodifiableMapView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Command")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParser")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" argParser "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" _argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParser")]),t._v(" _argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Adds [Command] as a top-level command to this runner.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Command")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" names "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aliases"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_runner "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("以命令的名字和别名分别做为 "),s("code",[t._v("key")]),t._v("，"),s("code",[t._v("command")]),t._v(" 做为 "),s("code",[t._v("value")]),t._v("，这就是为什么执行命令时不论使用的是命令的名字还是别名，执行的结果都是一样的，因为都指向同一个 "),s("code",[t._v("Command")]),t._v("。")]),t._v(" "),s("p",[t._v("如 "),s("code",[t._v("ConfigCommand")]),t._v(" 对应的 "),s("code",[t._v("flutter config --help")]),t._v(" 或是 "),s("code",[t._v("flutter configure --help")]),t._v("，输出的结果一致")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ConfigCommand")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ConfigCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" bool verboseHelp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'analytics'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Enable or disable reporting anonymously tool usage statistics and crash reports.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'clear-ios-signing-cert'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" negatable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Clear the saved development certificate choice used to sign apps for iOS device deployment.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'android-sdk'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The Android SDK directory.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'android-studio-dir'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The Android Studio install directory.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build-dir'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The relative path to override a projects build directory.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" valueHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'out/'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'machine'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" negatable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("hide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Print config values as json.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'config'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" aliases "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'configure'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("回来继续看 "),s("code",[t._v("FlutterCommandRunner")]),t._v(" 实例 "),s("code",[t._v("runner")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法")]),t._v(" "),s("h4",{attrs:{id:"fluttercommandrunner-run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fluttercommandrunner-run"}},[t._v("#")]),t._v(" FlutterCommandRunner.run")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/runner/flutter_command_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Iterable")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("FlutterCommandRunner")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法里主要还是调用了"),s("code",[t._v("super.run")]),t._v("，"),s("code",[t._v("super.run")]),t._v(" 如下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Iterable")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("sync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Iterable")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("on")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParserException")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("usageException")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" command "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" commandName "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("skip")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n command "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("subcommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("commandName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("usageException")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其先帮我们调用 "),s("code",[t._v("argParser.parse")]),t._v(" 解析 "),s("code",[t._v("args")]),t._v("，再将解析后的数据传递给 "),s("code",[t._v("runCommand")]),t._v(" 方法")]),t._v(" "),s("h4",{attrs:{id:"fluttercommandrunner-runcommand"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fluttercommandrunner-runcommand"}},[t._v("#")]),t._v(" FlutterCommandRunner.runCommand")]),t._v(" "),s("p",[s("code",[t._v("runCommand")]),t._v(" 方法")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/runner/flutter_command_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),t._v(" topLevelResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("run"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contextOverrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),t._v(" type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapEntry")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("topLevelResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注意：这里的 "),s("code",[t._v("runCommand")]),t._v(" 是 "),s("code",[t._v("FlutterCommandRunner")]),t._v(" 内重写了父类的 "),s("code",[t._v("runCommand")]),t._v("，最后在 "),s("code",[t._v("body")]),t._v(" 内调用了父类("),s("code",[t._v("CommandRunner")]),t._v(")的 "),s("code",[t._v("runCommand")]),t._v(" 方法。")]),t._v(" "),s("h4",{attrs:{id:"commandrunner-runcommand"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commandrunner-runcommand"}},[t._v("#")]),t._v(" CommandRunner.runCommand")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：args/lib/command_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),t._v(" topLevelResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" argResults "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" topLevelResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Command")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" commandString "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" executableName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("while")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isNotEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出匹配的command")]),t._v("\n argResults "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n command "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_globalResults "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" topLevelResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_argResults "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出子命令数组赋值给commands")]),t._v("\n commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_subcommands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Command")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n commandString "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("' ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("contains")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'help'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'help'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printUsage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("匹配出 "),s("code",[t._v("run")]),t._v(" 命令对应 "),s("code",[t._v("RunCommand")]),t._v(" 实例的 "),s("code",[t._v("command")]),t._v("，并执行其 "),s("code",[t._v("run")]),t._v(" 方法，即最后一行的 "),s("code",[t._v("command.run()")]),t._v("。")]),t._v(" "),s("p",[t._v("注："),s("code",[t._v("RunCommand")]),t._v(" 继承自 "),s("code",[t._v("FlutterCommand")]),t._v("，且没有重写 "),s("code",[t._v("run")]),t._v(" 方法，所以这里的 "),s("code",[t._v("command.run()")]),t._v(" 调用的就是 "),s("code",[t._v("FlutterCommand")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法。")]),t._v(" "),s("h3",{attrs:{id:"_2、命令执行"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、命令执行"}},[t._v("#")]),t._v(" 2、命令执行")]),t._v(" "),s("h4",{attrs:{id:"fluttercommand-run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fluttercommand-run"}},[t._v("#")]),t._v(" FlutterCommand.run")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/runner/flutter_command.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("run"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'command'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n overrides"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Generator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n commandResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("verifyThenRunCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commandPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("finally")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("verifyThenRunCommand")]),t._v(" 方法进行校验并真正开始执行相应的命令")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@mustCallSuper")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommandResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("verifyThenRunCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" commandPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("preRunValidator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("validate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新cache下的artifacts")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shouldUpdateCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// First always update universal artifacts, as some of these (e.g.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ios-deploy on macOS) are required to determine `requiredArtifacts`.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool offline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("argParser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("containsKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'offline'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("boolArg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'offline'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DevelopmentArtifact")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DevelopmentArtifact")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("universal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" offline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" offline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" requiredArtifacts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" offline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" offline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("releaseLock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 查找 pubspec.yaml 并更正项目路径")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("validateCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterProject")]),t._v(" project "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterProject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkForDeprecation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deprecationBehavior"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" deprecationBehavior"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shouldRunPub"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Environment")]),t._v(" environment "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Environment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n artifacts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("artifacts"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generateLocalizationsSyntheticPackage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n environment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" environment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对项目执行 pub get，下载依赖")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" pub"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PubContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getVerifyContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n generateSyntheticPackage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("manifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generateSyntheticPackage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n checkUpToDate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cachePubGet"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("regeneratePlatformSpecificTooling")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("reportNullSafety"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_sendNullSafetyAnalyticsEvents")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("project"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setupApplicationPackages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commandPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Usage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("command")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commandPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" parameters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n commandHasTerminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("stdio"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hasTerminal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" usageValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 真正去执行相应的命令")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这个方法主要做了以下几点：")]),t._v(" "),s("ol",[s("li",[t._v("更新 "),s("code",[t._v("flutter/bin/cache")]),t._v(" 下的 "),s("code",[t._v("artifacts")])]),t._v(" "),s("li",[t._v("校验当前目录下是否有 "),s("code",[t._v("pubspec.yaml")]),t._v(" 文件，没有就往父路径里找，并修正项目路径")]),t._v(" "),s("li",[t._v("执行 "),s("code",[t._v("pub get")]),t._v(" 下载项目依赖")]),t._v(" "),s("li",[s("code",[t._v("runCommand()")]),t._v(" 执行的是 "),s("code",[t._v("RunCommand")]),t._v(" 下的 "),s("code",[t._v("runCommand")])])]),t._v(" "),s("p",[t._v("注：从这个地方开始才真正去执行 "),s("code",[t._v("run")]),t._v(" 命令！")]),t._v(" "),s("h4",{attrs:{id:"runcommand-runcommand"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#runcommand-runcommand"}},[t._v("#")]),t._v(" RunCommand.runCommand")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/commands/run.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommandResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable hot mode by default if `--no-hot` was not passed and we are in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// debug mode.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildInfo")]),t._v(" buildInfo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getBuildInfo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 加载模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool hotMode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shouldUseHotMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" applicationBinaryPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringArg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("kUseApplicationBinary"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据 hotMode 来创建 HotRunner 或 ColdRunner")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ResidentRunner")]),t._v(" runner "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n applicationBinaryPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" applicationBinaryPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flutterDevices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flutterDevices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flutterProject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flutterProject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n hotMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hotMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" int result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" runner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n appStartedCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" appStartedTimeRecorder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n enableDevTools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stayResident "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("boolArg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("kEnableDevTools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("on")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RPCError")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommandResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ExitStatus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("success"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n timingLabelParts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hotMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hot'")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cold'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getModeName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getBuildMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n endTimeOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" appStartedTime"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这部分主要是根据 "),s("code",[t._v("hotMode")]),t._v(" 来创建 "),s("code",[t._v("HotRunner")]),t._v(" 或 "),s("code",[t._v("ColdRunner")]),t._v("（忽略 "),s("code",[t._v("web")]),t._v("~），然后执行 "),s("code",[t._v("HotRunner")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@visibleForTesting")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ResidentRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@required")]),t._v(" bool hotMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@required")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterDevice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" flutterDevices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@required")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" applicationBinaryPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@required")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterProject")]),t._v(" flutterProject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hotMode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("webMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HotRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("webMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" webRunnerFactory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createWebRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColdRunner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("那 "),s("code",[t._v("hotMode")]),t._v(" 是怎么来的呢？我们点进 "),s("code",[t._v("shouldUseHotMode")]),t._v(" 方法里看一下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" argResults "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" _argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" _argResults"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nbool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("boolArgDeprecated")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" argResults"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" bool"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nbool "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" traceStartup "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("boolArgDeprecated")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'trace-startup'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nbool "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shouldUseHotMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildInfo")]),t._v(" buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool hotArg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("boolArgDeprecated")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hot'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool shouldUseHotMode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hotArg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("traceStartup"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isDebug "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" shouldUseHotMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("hot")]),t._v(" 和 "),s("code",[t._v("trace-startup")]),t._v(" 是从 "),s("code",[t._v("_argResults")]),t._v(" 取值，而 "),s("code",[t._v("ArgResults")]),t._v(" 内部实现 "),s("code",[t._v("[]")]),t._v(" 操作符，代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgResults")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("operator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("_parser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("containsKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgumentError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Could not find an option named \"")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("name")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("\".'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" _parser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("valueOrDefault")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_parsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("所以 "),s("code",[t._v("hot")]),t._v(" 和 "),s("code",[t._v("trace-startup")]),t._v(" 是从 "),s("code",[t._v("options")]),t._v(" 取值")]),t._v(" "),s("p",[t._v("而 "),s("code",[t._v("RunCommand")]),t._v(" 在被实例化时就把 "),s("code",[t._v("hot")]),t._v(" 和 "),s("code",[t._v("trace-startup")]),t._v(" 选项也添加进去了")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" bool kHotReloadDefault "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommandBase")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterCommand")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceBasedDevelopmentArtifacts")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommandBase")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" required bool verboseHelp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n argParser\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'trace-startup'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n negatable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Trace application startup, then exit, saving the trace to a file. '")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'By default, this will be saved in the \"build\" directory. If the '")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'FLUTTER_TEST_OUTPUTS_DIR environment variable is set, the file '")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'will be written there instead.'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommand")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommandBase")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RunCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" bool verboseHelp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" verboseHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hot'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n defaultsTo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" kHotReloadDefault"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Run with support for hot reloading. Only available for debug mode. Not available with \"--trace-startup\".'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("addFlag")]),t._v(" 方法的代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFlag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" abbr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" defaultsTo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool negatable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("hide")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" aliases "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" abbr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" help"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" valueHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Iterable")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" allowed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" allowedHelp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n defaultsTo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OptionType")]),t._v(" type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("bool negatable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" splitCommas"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool mandatory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("hide")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" aliases "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" allNames "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aliases"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" option "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("newOption")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" option"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _optionsAndSeparators"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("option"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" alias "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" aliases"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _aliases"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("alias"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("由此可见，调用 "),s("code",[t._v("addFlag")]),t._v(" 方法其实是在往 "),s("code",[t._v("_options")]),t._v(" 里添加 "),s("code",[t._v("option")]),t._v("，而 "),s("code",[t._v("RunCommand")]),t._v(" 在初始化的时候就已经做了这个操作。")]),t._v(" "),s("p",[s("code",[t._v("options")]),t._v(" 和 "),s("code",[t._v("_options")]),t._v(" 两者的关系："),s("code",[t._v("options")]),t._v(" 是 "),s("code",[t._v("_options")]),t._v(" 的不可修改引用，代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParser")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" _options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// The options that have been defined for this parser.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArgParser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_aliases"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("bool allowTrailingOptions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usageLineLength"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnmodifiableMapView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("所以说，对 "),s("code",[t._v("options")]),t._v(" 取值其实就是对 "),s("code",[t._v("_options")]),t._v(" 取值！")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable hot mode by default if `--no-hot` was not passed and we are in")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// debug mode.")]),t._v("\n")])])]),s("p",[s("code",[t._v("hot")]),t._v(" 选项默认为 "),s("code",[t._v("true")]),t._v("，如果你想将选项 "),s("code",[t._v("hot")]),t._v(" 置为 "),s("code",[t._v("false")]),t._v("，可以使用选项 "),s("code",[t._v("--no-hot")]),t._v("，这是官方的 "),s("a",{attrs:{href:"https://pub.dev/packages/args",target:"_blank",rel:"noopener noreferrer"}},[t._v("args"),s("OutboundLink")],1),t._v(" 库提供的语法")]),t._v(" "),s("p",[t._v("再来看一下 "),s("code",[t._v("buildInfo.isDebug")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildInfo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" isDebug "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" mode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("总结："),s("code",[t._v("hotMode")]),t._v(" 的值由 "),s("code",[t._v("hot")]),t._v(" 选项、"),s("code",[t._v("trace-startup")]),t._v(" 选项和当前的编译模式共同决定。")]),t._v(" "),s("h4",{attrs:{id:"hotrunner-run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hotrunner-run"}},[t._v("#")]),t._v(" HotRunner.run")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/run_hot.dart")])]),t._v(" "),s("p",[s("code",[t._v("HotRunner")]),t._v(" 的 "),s("code",[t._v("run")]),t._v(" 方法：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Completer")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DebugConnectionInfo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" connectionInfoCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Completer")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" appStartedCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool enableDevTools "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" startupTasks "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterDevice")]),t._v(" device "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" flutterDevices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 初始化前端编译器")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runSourceGenerators")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generator "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n startupTasks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编译项目代码")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// outputPath: 编译产物路径，如：xx/xx/app.dill")]),t._v("\n device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("recompile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n mainFile"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uri"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uri")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n suppressErrors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" applicationBinary "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n checkDartPluginRegistry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n outputPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dillOutputPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDefaultApplicationKernelPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n trackWidgetCreation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("trackWidgetCreation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n packageConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("packageConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n projectRootPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterProject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("absolute"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" globals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompilerOutput")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n compileTimer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n totalCompileTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" compileTimer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("elapsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("errorCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stopwatch")]),t._v(" launchAppTimer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stopwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n startupTasks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runHot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n hotRunner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n totalLaunchAppTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" launchAppTimer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("elapsed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 附加")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n connectionInfoCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" connectionInfoCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n appStartedCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" appStartedCompleter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n enableDevTools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" enableDevTools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("一共执行了两个任务：")]),t._v(" "),s("ul",[s("li",[t._v("执行 "),s("code",[t._v("device.generator.recompile")]),t._v("，从项目中的 "),s("code",[t._v("main.dart")]),t._v(" 开始进行编译，产出 "),s("code",[t._v("app.dill")]),t._v(" 文件")]),t._v(" "),s("li",[t._v("执行 "),s("code",[t._v("device.runHot")]),t._v("，编译运行 "),s("code",[t._v("App")])])]),t._v(" "),s("h4",{attrs:{id:"flutterdevice-runhot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flutterdevice-runhot"}},[t._v("#")]),t._v(" FlutterDevice.runHot")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/resident_runner.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runHot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HotRunner")]),t._v(" hotRunner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Start the application.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" futureResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("startApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mainPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hotRunner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mainPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hotRunner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n platformArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" platformArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n prebuiltApplication"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" prebuiltMode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ipv6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hotRunner"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ipv6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n userIdentifier"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" userIdentifier"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" futureResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里的 "),s("code",[t._v("device.runHot")]),t._v(" 以 "),s("code",[t._v("iOS")]),t._v(" 的为例，所以此时 "),s("code",[t._v("device")]),t._v(" 的类型为 "),s("code",[t._v("IOSDevice")]),t._v("，找到该类的 "),s("code",[t._v("startApp")]),t._v(" 方法")]),t._v(" "),s("blockquote",[s("p",[t._v("文件路径：lib/src/ios/devices.dart")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("startApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IOSApp")]),t._v(" package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" mainPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DebuggingOptions")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" platformArgs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool prebuiltApplication "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool ipv6 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" userIdentifier"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@visibleForTesting")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" discoveryTimeout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" packageId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("prebuiltApplication"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printTrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Building ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" for ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("id")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Step 1: 编译xcode项目")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("XcodeBuildResult")]),t._v(" buildResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("buildXcodeProject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" package "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildableIOSApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targetOverride"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" mainPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n activeArch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cpuArchitecture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n deviceID"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n packageId "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buildResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xcodeBuildExecution"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("buildSettings"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'PRODUCT_BUNDLE_IDENTIFIER'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n packageId "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Step 2: 检查编译后的app文件是否存在")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Directory")]),t._v(" bundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _fileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("directory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deviceBundlePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("bundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("existsSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Could not find the built application bundle at ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("bundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("failed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Step 3: 尝试给设备安装app")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" dartVmFlags "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computeDartVmFlags")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" launchArguments "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'--enable-dart-profiling'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Status")]),t._v(" installStatus "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("startProgress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Installing and launching...'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ProtocolDiscovery")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" observatoryDiscovery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n int installationResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debuggingEnabled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调试模式下开启observatory服务")]),t._v("\n observatoryDiscovery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ProtocolDiscovery")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("observatory")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n deviceLogReader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n portForwarder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" portForwarder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n hostPort"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hostVmServicePort"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n devicePort"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" debuggingOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deviceVmServicePort"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ipv6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" ipv6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过ios-deploy安装App到设备（并附加）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("iosDeployDebugger "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n installationResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" _iosDeploy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n deviceId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bundlePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n appDeltaDirectory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" package"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appDeltaDirectory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n launchArguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" launchArguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n interfaceType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" interfaceType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n installationResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" iosDeployDebugger"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("succeeded")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observatoryUri"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" localUri"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("on")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ProcessException")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" iosDeployDebugger"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopAndDumpBacktrace")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _logger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LaunchResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("failed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("finally")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n installStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这部分的几个主要操作：")]),t._v(" "),s("ol",[s("li",[t._v("编译 "),s("code",[t._v("Xcode")]),t._v(" 项目")]),t._v(" "),s("li",[t._v("检查编译后的 "),s("code",[t._v("app")]),t._v(" 文件是否存在")]),t._v(" "),s("li",[t._v("调试模式下开启 "),s("code",[t._v("observatory")]),t._v(" 服务")]),t._v(" "),s("li",[t._v("通过 "),s("code",[t._v("ios-deploy")]),t._v(" 安装 "),s("code",[t._v("App")]),t._v(" 到设备（并附加）")])]),t._v(" "),s("p",[t._v("在第4点所对应的代码处，会调用 "),s("code",[t._v("launchAndAttach")]),t._v(" 方法，即上一篇中 "),s("code",[t._v("pr")]),t._v(" 主要修改的地方。")]),t._v(" "),s("p",[t._v("到此对 "),s("code",[t._v("flutter run")]),t._v(" 命令的探索就结束了，相信大家对开头提出的疑问已经有了答案，感谢你的耐心观看。")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/128.1f4a8e34.js b/assets/js/128.1f4a8e34.js new file mode 100644 index 000000000..41c61dad1 --- /dev/null +++ b/assets/js/128.1f4a8e34.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[128],{477:function(t,s,e){"use strict";e.r(s);var a=e(14),n=Object(a.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、depot-tools"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、depot-tools"}},[t._v("#")]),t._v(" 一、depot_tools")]),t._v(" "),s("blockquote",[s("p",[s("a",{attrs:{href:"https://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/docs/html/depot_tools_tutorial.html#_setting_up",target:"_blank",rel:"noopener noreferrer"}},[t._v("depot_tools"),s("OutboundLink")],1),t._v(" 是调试 "),s("code",[t._v("Flutter")]),t._v(" 引擎的必备工具包，包含了 "),s("code",[t._v("gclient")]),t._v("、"),s("code",[t._v("gn")]),t._v(" 和 "),s("code",[t._v("ninja")]),t._v(" 等工具，这些在下面会用到！")])]),t._v(" "),s("p",[t._v("拉取 "),s("code",[t._v("depot_tools")]),t._v(" 到本地，我一般是放到 "),s("code",[t._v("~/developer/")]),t._v(" 下")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("$ "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("git")]),t._v(" clone https://chromium.googlesource.com/chromium/tools/depot_tools.git\n")])])]),s("p",[t._v("将 "),s("code",[t._v("depot_tools")]),t._v(" 的路径补充到 "),s("code",[t._v("PATH")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("$ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[s("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("PATH")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("/path/to/depot_tools:"),s("span",{pre:!0,attrs:{class:"token environment constant"}},[t._v("$PATH")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 如: export PATH=~/developer/depot_tools:$PATH")]),t._v("\n")])])]),s("h2",{attrs:{id:"二、配置-gclient"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、配置-gclient"}},[t._v("#")]),t._v(" 二、配置.gclient")]),t._v(" "),s("p",[t._v("创建 "),s("code",[t._v("engine")]),t._v(" 目录，且终端进入到该目录，生成并配置 "),s("code",[t._v(".gclient")]),t._v(" 文件")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[t._v("➜ ~ cd /Users/lxf/Desktop/LXF/engine\n➜ engine touch .gclient\n➜ engine vim .gclient\n")])])]),s("p",[t._v("配置内容:")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[t._v("solutions = "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"managed"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" False"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"src/flutter"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"url"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"git@github.com:flutter/engine.git@1837b5be5f0f1376a1ccf383950e83a80177fb4e"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"custom_deps"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"deps_file"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"DEPS"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"safesync_url"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("如果你是仅调试，那链接可以用 "),s("code",[t._v("flutter")]),t._v(" 的，但如果你想后面提 "),s("code",[t._v("PR")]),t._v("，则需要使用自己 "),s("code",[t._v("fork")]),t._v(" 后的链接，如："),s("code",[t._v("git@github.com:LinXunFeng/engine.git")])]),t._v(" "),s("p",[t._v("引擎 "),s("code",[t._v("git")]),t._v(" 地址后面携带的 "),s("code",[t._v("commit id")]),t._v(" 最好与当前 "),s("code",[t._v("Flutter")]),t._v(" 所使用的引擎版本保持一致，可以通过如下命令获取")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("flutter "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--version")]),t._v("\n")])])]),s("p",[t._v("输出:")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("Flutter "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.7")]),t._v(".7 • channel stable • \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\nEngine • revision 1837b5be5f\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),s("p",[t._v("或者取如下文件里的值")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("flutter/bin/internal/engine.version\n\n# 1837b5be5f0f1376a1ccf383950e83a80177fb4e\n")])])]),s("h2",{attrs:{id:"三、拉取源码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、拉取源码"}},[t._v("#")]),t._v(" 三、拉取源码")]),t._v(" "),s("p",[t._v("使用终端，进行到 "),s("code",[t._v(".gclient")]),t._v(" 所在目录，即上面创建的 "),s("code",[t._v("engine")]),t._v(" 目录，执行如下命令")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("gclient "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sync")]),t._v("\n")])])]),s("p",[t._v("注："),s("code",[t._v("gclient")]),t._v(" 命令来自于 "),s("code",[t._v("depot_tools")])]),t._v(" "),s("p",[t._v("然后坐等完成即可，如果失败了就反复执行 "),s("code",[t._v("gclient sync")]),t._v(" 直到成功，大概近10个G")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ engine gclient "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sync")]),t._v("\nUpdating depot_tools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\nusing /var/folders/36/n74_k53x5h5fz70gkd3jr5p00000gn/T/goma_lxf as tmpdir\nINFO: creating cache "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dir")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("/var/folders/36/n74_k53x5h5fz70gkd3jr5p00000gn/T/goma_lxf/goma_cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(".\ncompiler_proxy is not running\n\n________ running "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'git -c core.deltaBaseCacheLimit=2g clone --no-checkout --progress git@github.com:flutter/engine.git /Users/lxf/Desktop/LXF/engine/src/_gclient_flutter_t0dh3d3h'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Desktop/LXF/engine'")]),t._v("\nCloning into "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Desktop/LXF/engine/src/_gclient_flutter_t0dh3d3h'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\nremote: Enumerating objects: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("326233")]),t._v(", done.\nremote: Counting objects: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("42")]),t._v("/42"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", done.\nremote: Compressing objects: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("39")]),t._v("/39"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", done.\nremote: Total "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("326233")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", reused "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", pack-reused "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("326191")]),t._v("\nReceiving objects: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("326233")]),t._v("/326233"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("394.55")]),t._v(" MiB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.88")]),t._v(" MiB/s, done.\nResolving deltas: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("242690")]),t._v("/242690"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", done.\n"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token operator"}},[s("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("0")]),t._v(">")]),t._v("WARNING: subprocess "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'"git" "-c" "core.deltaBaseCacheLimit=2g" "fetch" "origin" "d40d15e994ed60d32bcfc9ab87004dfb028dfbd6" "--no-tags"\'')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/third_party/harfbuzz failed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" will retry after a short nap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\nSyncing projects: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("134")]),t._v("/134"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", done.\nHook "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'python3 src/flutter/tools/pub_get_offline.py'")]),t._v(" took "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("19.13")]),t._v(" secs\nRunning hooks: "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("% "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),t._v("/11"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(", done.\n➜ engine\n")])])]),s("p",[t._v("拉取完成后你可以进入 "),s("code",[t._v("src/flutter")]),t._v(" 查看当前下载下来的 "),s("code",[t._v("engine")]),t._v(" 的 "),s("code",[t._v("commit id")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/flutter\n➜ flutter git:"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1837b5be5f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你的终端没有显示 "),s("code",[t._v("git:(commit id)")]),t._v("，那可以使用如下命令进行查看")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("git")]),t._v(" rev-parse HEAD\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 1837b5be5f0f1376a1ccf383950e83a80177fb4e")]),t._v("\n")])])]),s("h2",{attrs:{id:"四、编译"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、编译"}},[t._v("#")]),t._v(" 四、编译")]),t._v(" "),s("p",[t._v("进入 "),s("code",[t._v("tools")]),t._v(" 目录，执行几条 "),s("code",[t._v("gn")]),t._v(" 命令")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" engine/src/flutter/tools\n")])])]),s("p",[t._v("生成 "),s("code",[t._v("iOS")]),t._v(" 设备端可执行文件所需的构建文件")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ tools git:"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1837b5be5f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" ./gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--ios")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n\nGOMA usage was specified but can't be found, falling back to "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" builds. Set the GOMA_DIR environment variable to fix GOMA.\nGenerating GN files in: out/ios_debug_unopt\nGenerating Xcode projects took 211ms\nGenerating compile_commands took 55ms\nDone. Made "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("801")]),t._v(" targets from "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("274")]),t._v(" files "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" 6165ms\n")])])]),s("p",[t._v("如果你想调试模拟器，则加上 "),s("code",[t._v("--simulator")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--ios")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--simulator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n")])])]),s("p",[t._v("生成主机端可执行文件所需的构建文件")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ tools git:"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1837b5be5f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" ./gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n\nGOMA usage was specified but can't be found, falling back to "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("local")]),t._v(" builds. Set the GOMA_DIR environment variable to fix GOMA.\nUsing prebuilt Dart SDK binary. If you are editing Dart sources and wish to compile the Dart SDK, "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("set")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")]),t._v("--no-prebuilt-dart-sdk"),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\nGenerating GN files in: out/host_debug_unopt\nGenerating Xcode projects took 273ms\nGenerating compile_commands took 70ms\nDone. Made "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1110")]),t._v(" targets from "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("340")]),t._v(" files "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" 46800ms\n")])])]),s("p",[t._v("执行完成之后，在 "),s("code",[t._v("engine/src/out")]),t._v(" 目录下就会多出相应端的构建文件目录")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202303121745138.png",alt:""}})]),t._v(" "),s("p",[t._v("接下来使用 "),s("code",[t._v("Ninja")]),t._v(" 进行编译")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("ninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" host_debug_unopt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" ninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" ios_debug_unopt\n")])])]),s("p",[t._v("如果你是用 "),s("code",[t._v("M1/M2")]),t._v(" 电脑去编译旧引擎源码，可能会在编译 "),s("code",[t._v("ios_debug_unopt")]),t._v(" 时遇到如下错误")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("ninja: Entering directory "),s("span",{pre:!0,attrs:{class:"token variable"}},[s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")]),t._v("host_debug_unopt'\nninja: no work to do.\nninja: Entering directory "),s("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")])]),t._v("ios_debug_unopt'\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("13")]),t._v("/369"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" ACTION //flutter/lib/snapshot:create_arm_gen_snapshot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("//build/toolchain/mac:ios_clang_arm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nFAILED: clang_x64/gen_snapshot_arm64\npython3 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("/"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("/flutter/sky/tools/create_macos_gen_snapshots.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--dst")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt/clang_x64 --arm64-out-dir /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt\nCannot "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),t._v(" gen_snapshot at /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt/clang_x64/gen_snapshot\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),t._v("/369"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" LINK clang_arm64/impellerc\nninja: build stopped: subcommand failed.\n")])])]),s("p",[t._v("这时你只需要进入到 "),s("code",[t._v("engine/src/out/ios_debug_unopt")]),t._v(" 目录下，将 "),s("code",[t._v("clang_arm64")]),t._v(" 目录中的 "),s("code",[t._v("gen_snapshot")]),t._v(" 拷贝到 "),s("code",[t._v("clang_x64")]),t._v("，然后再继续执行 "),s("code",[t._v("ninja -C ios_debug_unopt")]),t._v(" 即可。")]),t._v(" "),s("p",[t._v("这里强调一下：")]),t._v(" "),s("ul",[s("li",[t._v("如果你修改了引擎的源代码，需要重新执行相应的 "),s("code",[t._v("ninja")]),t._v(" 命令，如调试引擎时我们会修改代码，如果不执行 "),s("code",[t._v("ninja")]),t._v(" 命令，你会发现断点修改的代码其它是旧代码！")]),t._v(" "),s("li",[t._v("如果是新增或删除文件，则需要先执行 "),s("code",[t._v("gn")]),t._v(" 命令，再执行 "),s("code",[t._v("ninja")]),t._v(" 命令。")]),t._v(" "),s("li",[t._v("我建议直接 "),s("code",[t._v("gn")]),t._v(" 和 "),s("code",[t._v("ninja")]),t._v(" 命令一起执行，不用管什么情况，脚本会自己检查是否有文件变更，以及是否需要重新生成相应的文件的。")])]),t._v(" "),s("h2",{attrs:{id:"五、调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、调试"}},[t._v("#")]),t._v(" 五、调试")]),t._v(" "),s("p",[t._v("打开你的"),s("code",[t._v("Flutter")]),t._v(" 项目，"),s("code",[t._v("IDE")]),t._v(" 以 "),s("code",[t._v("VSCode")]),t._v(" 为例，添加 "),s("code",[t._v("--local-engine-src-path")]),t._v(" 和 "),s("code",[t._v("--local-engine")]),t._v(" 两个参数，完整配置如下")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"flutter_demo"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"request"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"launch"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"type"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dart"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"args"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--local-engine-src-path"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/engine/src"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"--local-engine"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ios_debug_unopt"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("--local-engine-src-path")])]),t._v(" "),s("td",[t._v("固定为引擎的 "),s("code",[t._v("src")]),t._v(" 路径")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("--local-engine")])]),t._v(" "),s("td",[t._v("真机: "),s("code",[t._v("ios_debug_unopt")]),s("br"),t._v("模拟器: "),s("code",[t._v("ios_debug_sim_unopt")])])])])]),t._v(" "),s("p",[t._v("按 "),s("code",[t._v("F5")]),t._v(" 跑一遍就可以使用指定引擎运行 "),s("code",[t._v("Flutter")]),t._v(" 项目了。")]),t._v(" "),s("p",[t._v("细心的你可能会发现在 "),s("code",[t._v("flutter_demo/ios/Flutter/Generated.xcconfig")]),t._v(" 配置文件内新增相应的两个环境变量")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("FLUTTER_ENGINE")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("/Users/lxf/Desktop/LXF/engine/src\n"),s("span",{pre:!0,attrs:{class:"token assign-left variable"}},[t._v("LOCAL_ENGINE")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("ios_debug_unopt\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),s("p",[t._v("如果我们要调试引擎代码，请打开你的 "),s("code",[t._v("Runner.xcworkspace")]),t._v("，然后将 "),s("code",[t._v("flutter_engine")]),t._v(" 拖入项目")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202303121745765.png",alt:""}})]),t._v(" "),s("p",[t._v("找到 "),s("code",[t._v("FlutterViewController.mm")]),t._v(" 给 "),s("code",[t._v("touchesBegan")]),t._v(" 打个断点，再运行项目，点击屏幕就会进入到断点处，现在就可以开始愉快的调试 "),s("code",[t._v("flutter_engine")]),t._v(" 了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202303121745762.png",alt:""}})]),t._v(" "),s("p",[t._v("如果你的断点不生效，那请先检查 "),s("code",[t._v("Generated.xcconfig")]),t._v(" 里的 "),s("code",[t._v("FLUTTER_ENGINE")]),t._v(" 和 "),s("code",[t._v("LOCAL_ENGINE")]),t._v(" 变量。")]),t._v(" "),s("p",[t._v("到这里，引擎的编译调试就介绍完毕了。")]),t._v(" "),s("p",[t._v("下一篇，我们来详细说说怎么给 "),s("code",[t._v("Flutter")]),t._v(" 引擎提交 "),s("code",[t._v("PR")]),t._v(" 🤠")]),t._v(" "),s("h2",{attrs:{id:"六、资料"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、资料"}},[t._v("#")]),t._v(" 六、资料")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment",target:"_blank",rel:"noopener noreferrer"}},[t._v("Setting up the Engine development environment"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/flutter/flutter/wiki/Compiling-the-engine#compiling-for-ios-from-macos",target:"_blank",rel:"noopener noreferrer"}},[t._v("Compiling the engine"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/129.4184d277.js b/assets/js/129.4184d277.js new file mode 100644 index 000000000..25cdff91b --- /dev/null +++ b/assets/js/129.4184d277.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[129],{481:function(t,s,a){"use strict";a.r(s);var e=a(14),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("p",[t._v("在上一篇 "),s("RouterLink",{attrs:{to:"/pages/6caa6f/"}},[t._v("Flutter - 引擎调试（iOS篇）🛠")]),t._v(" 中，我们已经知道了如何去编译调试引擎，今天就来说一说我从调试到提交 "),s("code",[t._v("PR")]),t._v(" 的过程吧。")],1),t._v(" "),s("h2",{attrs:{id:"一、背景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、背景"}},[t._v("#")]),t._v(" 一、背景")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("Flutter")]),t._v(" 官方仓库发现了别人提的一个 "),s("code",[t._v("issue")]),t._v("，是关于苹果移动光标的特性功能，先给大家看看该功能的官方演示吧")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020948522.gif",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("issue")]),t._v(" 链接: "),s("a",{attrs:{href:"https://github.com/flutter/flutter/issues/122139",target:"_blank",rel:"noopener noreferrer"}},[t._v("[iOS] Hold and drag spacebar does not move cursor when obscureText is true."),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("问题复现的动图如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020949821.gif",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("issue")]),t._v(" 问题总结：")]),t._v(" "),s("p",[s("code",[t._v("Flutter")]),t._v(" 的 "),s("code",[t._v("TextFormField")]),t._v(" 或 "),s("code",[t._v("TextField")]),t._v(" ，在"),s("code",[t._v("obscureText")]),t._v(" 的初始值和切换值的这两种情况下，长按空格并拖拽时可移动光标这一特性，出现了有别于原生控件的表现，具体如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("    行为"),s("br"),t._v("端")]),t._v(" "),s("th",[t._v("获得焦点"),s("br"),t._v("obscureText=false"),s("br"),t._v("(当前状态: 明文)")]),t._v(" "),s("th",[t._v("切换"),s("br"),t._v("obscureText=true"),s("br"),t._v("(当前状态: 密文)")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("Flutter 的 TextField")]),t._v(" "),s("td",[t._v("可用")]),t._v(" "),s("td",[s("code",[t._v("可用")])])]),t._v(" "),s("tr",[s("td",[t._v("原生的 UITextField")]),t._v(" "),s("td",[t._v("可用")]),t._v(" "),s("td",[t._v("不可用")])])])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("    行为"),s("br"),t._v("端")]),t._v(" "),s("th",[t._v("获得焦点"),s("br"),t._v("obscureText=true"),s("br"),t._v("(当前状态: 密文)")]),t._v(" "),s("th",[t._v("切换"),s("br"),t._v("obscureText=false"),s("br"),t._v("(当前状态: 明文)")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("Flutter 的 TextField")]),t._v(" "),s("td",[t._v("不可用")]),t._v(" "),s("td",[s("code",[t._v("不可用")])])]),t._v(" "),s("tr",[s("td",[t._v("原生的 UITextField")]),t._v(" "),s("td",[t._v("不可用")]),t._v(" "),s("td",[t._v("可用")])])])]),t._v(" "),s("p",[t._v("可以看到，正常的表现应该是只要是明文，则该功能就可用，而密文时则该功能不可用，但是此时在 "),s("code",[t._v("Flutter")]),t._v(" 端，该功能可不可用取决于获取焦点时是否为明文！")]),t._v(" "),s("p",[t._v("这里贴出 "),s("code",[t._v("issue")]),t._v(" 中给出的示例代码：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:flutter/material.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyHomePage")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StatefulWidget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyHomePage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyHomePage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_MyHomePageState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _MyHomePageState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyHomePage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _controller "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bool _obscureText "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n appBar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter Demo'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("symmetric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("horizontal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Column")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("80")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextFormField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n obscureText"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _obscureText"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n decoration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InputDecoration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n suffixIcon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IconButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n icon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n _obscureText "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Icons")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("visibility_off "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Icons")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("visibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onPressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _obscureText "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("_obscureText"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来我们一起去探索一下引擎源码，找到出现问题的根本原因。")]),t._v(" "),s("h2",{attrs:{id:"二、探索"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、探索"}},[t._v("#")]),t._v(" 二、探索")]),t._v(" "),s("h3",{attrs:{id:"_1、引擎准备"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、引擎准备"}},[t._v("#")]),t._v(" 1、引擎准备")]),t._v(" "),s("p",[t._v("配置 "),s("code",[t._v(".gclient")]),t._v("，将 "),s("code",[t._v("url")]),t._v(" 改成你自己 "),s("code",[t._v("fork")]),t._v(" 的仓库的 "),s("code",[t._v("git")]),t._v(" 地址")]),t._v(" "),s("blockquote",[s("p",[t._v("这样方便我们后续调试完成后，直接将修改的代码提交至自己仓库，顺带提 "),s("code",[t._v("PR")])])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[t._v("solutions = "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"url"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"git@github.com:LinXunFeng/engine.git@dd91363757dd2e8e4dc22d3be62741d461ceb005"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ...\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("关联调试源码的操作可在上一篇 "),s("RouterLink",{attrs:{to:"/pages/6caa6f/"}},[t._v("Flutter - 引擎调试（iOS篇）🛠")]),t._v(" 中查看，加上篇幅限制，所以这里就不再赘述，本文重点是解决 "),s("code",[t._v("issue")]),t._v(" 提及的问题。")],1),t._v(" "),s("h3",{attrs:{id:"_2、查找病因"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、查找病因"}},[t._v("#")]),t._v(" 2、查找病因")]),t._v(" "),s("p",[t._v("在引擎中，与 "),s("code",[t._v("TextField")]),t._v(" 相关的类为 "),s("code",[t._v("FlutterTextInputPlugin")]),t._v("，在该类的所在文件中找到 "),s("code",[t._v("obscureText")]),t._v(" 定义的常量 "),s("code",[t._v("kSecureTextEntry")])]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token macro property"}},[s("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),s("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("pragma")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("mark "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" TextInputConfiguration Field Names")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" NSString"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" kSecureTextEntry "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"obscureText"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("搜索 "),s("code",[t._v("kSecureTextEntry")]),t._v("，发现了除 "),s("code",[t._v("init")]),t._v(" 方法之外，仅在方法 "),s("code",[t._v("configureWithDictionary")]),t._v(" 中以 "),s("code",[t._v("kSecureTextEntry")]),t._v(" 做为 "),s("code",[t._v("key")]),t._v(" 向 "),s("code",[t._v("configuration")]),t._v(" 取值并将值赋予 "),s("code",[t._v("secureTextEntry")]),t._v(" 属性")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("configureWithDictionary"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSDictionary"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("configuration "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("secureTextEntry "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("configuration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("kSecureTextEntry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" boolValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("因为移动光标的功能与是否明文相关，所以我们可以想到这个 "),s("code",[t._v("secureTextEntry")]),t._v(" 必定是在哪里有被使用到。")]),t._v(" "),s("p",[t._v("如果我们把 "),s("code",[t._v("secureTextEntry")]),t._v(" 相关的代码注释个遍去排查，这无异于大海捞针，该方式也过于笨拙，且明确告诉你徒劳无功，那怎么办呢？🤔")]),t._v(" "),s("p",[t._v("是的，重写它的 "),s("code",[t._v("getter")]),t._v(" 方法，并打个断点")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020949382.png",alt:""}})]),t._v(" "),s("p",[t._v("这里可别忘了先编译！")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("ninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" ios_debug_unopt\n")])])]),s("p",[t._v("点击输入框获取焦点，"),s("code",[t._v("Xcode")]),t._v(" 来到断点处，注意看左边的调用栈")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020949907.png",alt:""}})]),t._v(" "),s("p",[t._v("发现 "),s("code",[t._v("isSecureTextEntry")]),t._v(" 是被系统调用的！")]),t._v(" "),s("p",[t._v("调用栈向下找，发现是 "),s("code",[t._v("_activeView")]),t._v(" 成为第一响应者后间接触发的")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020950488.png",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("activeView")]),t._v(" 的声明：")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("FlutterTextInputPlugin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@property")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nonatomic"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" retain"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" FlutterTextInputView"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" activeView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n")])])]),s("p",[s("code",[t._v("FlutterTextInputView")]),t._v(" 的声明：")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@interface")]),t._v(" FlutterTextInputView "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" UIView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("UITextInput"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" UIScribbleInteractionDelegate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UITextInputTraits")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@property")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nonatomic"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getter"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("isSecureTextEntry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" BOOL secureTextEntry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])]),s("p",[s("code",[t._v("UITextInput")]),t._v(" -> "),s("code",[t._v("UIKeyInput")]),t._v(" -> "),s("code",[t._v("UITextInputTraits")])]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@protocol")]),t._v(" UITextInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("UIKeyInput"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@protocol")]),t._v(" UIKeyInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("UITextInputTraits"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@protocol")]),t._v(" UITextInputTraits "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("NSObject"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@property")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nonatomic"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("getter"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("isSecureTextEntry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" BOOL secureTextEntry"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// default is NO")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n")])])]),s("p",[t._v("可以发现 "),s("code",[t._v("FlutterTextInputView")]),t._v(" 最终遵守了 "),s("code",[t._v("UITextInputTraits")]),t._v(" 协议，该协议声明了 "),s("code",[t._v("secureTextEntry")]),t._v(" 属性，而该属性不仅决定着原生控件显示明文或密文，还控制着键盘是否可以长按移动光标。")]),t._v(" "),s("p",[t._v("现在来看一下 "),s("code",[t._v("FlutterTextInputPlugin.mm")]),t._v(" 文件中的 "),s("code",[t._v("handleMethodCall")]),t._v(" 方法，其是处理 "),s("code",[t._v("Flutter")]),t._v(" 与引擎交互的 "),s("code",[t._v("method channel")]),t._v(" 的方法")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("handleMethodCall"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("FlutterMethodCall"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("call result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("FlutterResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("result "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n NSString"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" method "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" call"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("method"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n id args "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" call"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("arguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("method isEqualToString"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("kHideMethod"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TextInput.hide")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" hideTextInput"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("method isEqualToString"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("kSetClientMethod"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TextInput.setClient")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" setTextInputClient"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" intValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" withConfiguration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nil"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("TextInput.setClient")]),t._v(": 这是在输入框获取焦点的时候与原生控件建立事务时传递的方法名，与之相对应的是 "),s("code",[t._v("setTextInputClient")]),t._v(" 方法，在该方法内创建新的 "),s("code",[t._v("FlutterTextInputView")]),t._v(" 控件，并赋值给 "),s("code",[t._v("activeView")])]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("setTextInputClient"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("int")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("client withConfiguration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("NSDictionary"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("configuration "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" resetAllClientIds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Hide all input views from autofill, only make those in the new configuration visible")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to autofill.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" changeInputViewsAutofillVisibility"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("NO"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the current active view.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("AutofillTypeOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("configuration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" kFlutterAutofillTypeNone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" createInputViewWith"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("configuration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" kFlutterAutofillTypeRegular"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If the group does not involve password autofill, only install the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// input view that's being focused.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" updateAndShowAutofillViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("nil\n focusedField"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("configuration\n isPasswordRelated"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("NO"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" kFlutterAutofillTypePassword"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" updateAndShowAutofillViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("configuration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("kAssociatedAutofillFields"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n focusedField"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("configuration\n isPasswordRelated"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("YES"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_activeView setTextInputClient"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("client"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_activeView reloadInputViews"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" cleanUpViewHierarchy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("NO clearText"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("YES delayRemoval"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("YES"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("并在下图的方法调用栈内可以看到最后是调用了 "),s("code",[t._v("addToInputParentViewIfNeeded")]),t._v(" 方法将 "),s("code",[t._v("activeView")]),t._v(" 视图添加到 "),s("code",[t._v("inputHider")]),t._v(" 视图上。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020950215.png",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("inputHider")]),t._v(" 视图也在该方法中被添加到 "),s("code",[t._v("_viewController.view")]),t._v(" 上")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIView"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("hostView "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n UIView"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" host "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _viewController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("NSAssert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("host "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" nullptr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"The application must have a host view since the keyboard client "')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('@"must be part of the responder chain to function. The host view controller is %@"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _viewController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" host"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("TextInput.hide")]),t._v(": 这是当输入框失去焦点的时候传递的方法名，用于移除当前的 "),s("code",[t._v("activeView")]),t._v(" 视图 和 "),s("code",[t._v("_inputHider")]),t._v(" 视图，对应的方法如下：")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("hideTextInput "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" removeEnableFlutterTextInputViewAccessibilityTimer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n _activeView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("accessibilityEnabled "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" NO"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_activeView resignFirstResponder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_activeView removeFromSuperview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_inputHider removeFromSuperview"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("在此做一个小小的总结："),s("code",[t._v("Flutter")]),t._v(" 的 "),s("code",[t._v("TextField")]),t._v(" 在每一次获取焦点时，引擎端会创建一个相应的 "),s("code",[t._v("FlutterTextInputView")]),t._v(" 原生控件与之对应，并使用 "),s("code",[t._v("activeView")]),t._v(" 来记录当前获取了焦点的那个控件，当失去焦点时，相应的控件会被移除和销毁。")])]),t._v(" "),s("p",[t._v("断点放行后点击眼睛按钮，将输入框切换为密文，你会发现 "),s("code",[t._v("isSecureTextEntry")]),t._v(" 的 "),s("code",[t._v("getter")]),t._v(" 方法并不会被调用，这就是病因，此时虽然从 "),s("code",[t._v("Flutter")]),t._v(" 的 "),s("code",[t._v("TextField")]),t._v(" 的显示来看确实是有在进行明文与密文的切换，但是这只是 "),s("code",[t._v("Flutter")]),t._v(" 处理后的显示结果，而在引擎端的 "),s("code",[t._v("activeView")]),t._v(" 的 "),s("code",[t._v("secureTextEntry")]),t._v(" 还是一开始的值，所以此时长按移动光标的功能还是生效的。")]),t._v(" "),s("p",[t._v("因此，要解决这个问题就得让 "),s("code",[t._v("activeView")]),t._v(" 的 "),s("code",[t._v("secureTextEntry")]),t._v(" 得到更新，并且调用 "),s("code",[t._v("reloadInputViews")]),t._v(" 重新绘制键盘。")]),t._v(" "),s("h2",{attrs:{id:"三、动手解决"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、动手解决"}},[t._v("#")]),t._v(" 三、动手解决")]),t._v(" "),s("blockquote",[s("p",[t._v("注: "),s("code",[t._v("TextInput.updateConfig")]),t._v(" 该常量在 "),s("code",[t._v("Flutter")]),t._v(" 源码里是早就存在的，但是仅在引擎的 "),s("code",[t._v("Web")]),t._v(" 端使用到，引擎的 "),s("code",[t._v("iOS")]),t._v(" 端则没有使用。")])]),t._v(" "),s("h3",{attrs:{id:"_1、engine-仓库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、engine-仓库"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("engine")]),t._v(" 仓库")]),t._v(" "),s("p",[s("code",[t._v("FlutterTextInputPlugin.mm")])]),t._v(" "),s("p",[t._v("新增 "),s("code",[t._v("TextInput.updateConfig")]),t._v(" 常量 "),s("code",[t._v("kUpdateConfigMethod")])]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' static NSString* const kSetSelectionRectsMethod = @"Scribble.setSelectionRects";\n')]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' static NSString* const kStartLiveTextInputMethod = @"TextInput.startLiveTextInput";\n')])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' static NSString* const kUpdateConfigMethod = @"TextInput.updateConfig";\n')])])])])]),s("p",[t._v("补充处理 "),s("code",[t._v("TextInput.updateConfig")]),t._v(" 的方法 "),s("code",[t._v("updateConfig")])]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v("- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" NSString* method = call.method;\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" id args = call.arguments;\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if ([method isEqualToString:kShowMethod]) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" } else if ([method isEqualToString:kStartLiveTextInputMethod]) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" [self startLiveTextInput];\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" result(nil);\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" } else if ([method isEqualToString:kUpdateConfigMethod]) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" [self updateConfig:args];\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" result(nil);\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" } else {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" result(FlutterMethodNotImplemented);\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])])])])]),s("p",[t._v("更新 "),s("code",[t._v("secureTextEntry")]),t._v(" 并调用 "),s("code",[t._v("reloadInputViews")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" - (void)updateConfig:(NSDictionary*)dictionary {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" BOOL isSecureTextEntry = [dictionary[kSecureTextEntry] boolValue];\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" for (UIView* view in self.textInputViews) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if ([view isKindOfClass:[FlutterTextInputView class]]) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" FlutterTextInputView* inputView = (FlutterTextInputView*)view;\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // The feature of holding and draging spacebar to move cursor is affected by\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // secureTextEntry, so when obscureText is updated, we need to update secureTextEntry\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // and call reloadInputViews.\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // https://github.com/flutter/flutter/issues/122139\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (inputView.isSecureTextEntry != isSecureTextEntry) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" inputView.secureTextEntry = isSecureTextEntry;\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" [inputView reloadInputViews];\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])])])])]),s("h3",{attrs:{id:"_2、flutter-仓库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、flutter-仓库"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("flutter")]),t._v(" 仓库")]),t._v(" "),s("p",[s("code",[t._v("editable_text.dart")])]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" @override\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" void didUpdateWidget(EditableText oldWidget) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" super.didUpdateWidget(oldWidget);\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" \n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (_hasInputConnection) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" if (oldWidget.obscureText != widget.obscureText) {\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" _textInputConnection!.updateConfig(_effectiveAutofillClient.textInputConfiguration);\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])])])])]),s("p",[t._v("这样就修复好了，别忘了先执行 "),s("code",[t._v("ninja -C ios_debug_unopt")]),t._v(" 进行编译，然后再进行调试验证。")]),t._v(" "),s("p",[t._v("经过调试，一切正常，接下来就是提交 "),s("code",[t._v("PR")]),t._v(" 了吗？不，要先添加单元测试，不过具体的单测代码不是重点，所以这里只说明如何去跑单测。")]),t._v(" "),s("h2",{attrs:{id:"四、单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、单元测试"}},[t._v("#")]),t._v(" 四、单元测试")]),t._v(" "),s("p",[t._v("跑单元测试前需先执行如下命令，确保你的 "),s("code",[t._v("engine/src/out")]),t._v(" 目录下文件齐全")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# engine/src/flutter/tools")]),t._v("\n\n./gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n./gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--ios")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n./gn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--ios")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--simulator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v("\n")])])]),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# engine/src/out")]),t._v("\n\nninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" host_debug_unopt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v("\nninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" ios_debug_unopt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v("\nninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" ios_debug_sim_unopt\n")])])]),s("h3",{attrs:{id:"_1、脚本跑单测"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、脚本跑单测"}},[t._v("#")]),t._v(" 1、脚本跑单测")]),t._v(" "),s("blockquote",[s("p",[t._v("注: 请提前打开 "),s("code",[t._v("iOS")]),t._v(" 模拟器，执行 "),s("code",[t._v("run_tests.py")]),t._v(" 跑单元测试时需要用到")])]),t._v(" "),s("p",[t._v("跑脚本单元测试，执行如下命令即可")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# engine/src/flutter/testing")]),t._v("\n\n./run_tests.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("objc\n")])])]),s("p",[t._v("如果报错了，则按其提示先执行相应的命令，完成后再继续执行 "),s("code",[t._v("run_tests.py")])]),t._v(" "),s("p",[t._v("比如这是我执行脚本后的报错内容")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("➜ testing git:"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("main"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" ./run_tests.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("objc\nTraceback "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("most recent call last"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(":\n File "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py"')]),t._v(", line "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1150")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n sys.exit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("main"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("))")]),t._v("\n File "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py"')]),t._v(", line "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1136")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" main\n run_objc_tests"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("args.ios_variant, args.objc_filter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n File "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py"')]),t._v(", line "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("682")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" run_objc_tests\n ensure_ios_tests_are_built"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ios_out_dir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n File "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py"')]),t._v(", line "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("585")]),t._v(", "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" ensure_ios_tests_are_built\n assert os.path.exists"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tmp_out_dir\nAssertionError: /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt or /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt/libios_test_flutter.dylib doesn't exist. Please run the following commands:\ngn "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--ios")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--unoptimized")]),t._v(" --runtime-mode"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("debug --no-lto "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--simulator")]),t._v("\nautoninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter\n")])])]),s("p",[t._v("其实主要原因看这句提示:")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("engine/src/out/ios_debug_sim_unopt/libios_test_flutter.dylib doesn't exist\n")])])]),s("p",[t._v("所以我们需要进入到 "),s("code",[t._v("engine/src/out")]),t._v(" 目录下执行如下命令即可")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("autoninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter\n")])])]),s("p",[t._v("执行完 "),s("code",[t._v("run_tests.py")]),t._v(" 会自动打开名为 "),s("code",[t._v("IosUnitTestsSimulator")]),t._v(" 的模拟器（该模拟器是以 "),s("code",[t._v("iPhone 11")]),t._v(" 为原型创建的），然后终端会跟随打印单测的执行日志")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("\n** TEST SUCCEEDED **\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\nCommand run successfully "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.46")]),t._v(" seconds: xcrun simctl delete IosUnitTestsSimulator\n")])])]),s("p",[t._v("最终输出 "),s("code",[t._v("TEST SUCCEEDED")]),t._v(" 表示单测全部通过。")]),t._v(" "),s("h3",{attrs:{id:"_2、xcode-跑单测"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、xcode-跑单测"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("Xcode")]),t._v(" 跑单测")]),t._v(" "),s("p",[t._v("接下来介绍一下 "),s("code",[t._v("Xcode")]),t._v(" 跑单元测试，我们用 "),s("code",[t._v("Xcode")]),t._v(" 打开 "),s("code",[t._v("engine/src/flutter/testing/ios/IosUnitTests/IosUnitTests.xcodeproj")])]),t._v(" "),s("p",[t._v("打开后你会发现单测只有 "),s("code",[t._v("FlutterChannelsTest")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020950833.png",alt:""}})]),t._v(" "),s("p",[t._v("别急，按 "),s("code",[t._v("cmd + u")]),t._v(" 跑一遍就全出来了")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020951832.png",alt:""}})]),t._v(" "),s("p",[t._v("没错，细心的你会发现截图里 "),s("code",[t._v("SemanticsObjectTest")]),t._v(" 单测失败了，按官方文档的说明，我们需要选择 "),s("code",[t._v("iPhone 11")]),t._v(" 模拟器进行单测。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202304020951260.png",alt:""}})]),t._v(" "),s("p",[t._v("主要原因是下面这行代码过不了，算出来的值不相等")]),t._v(" "),s("div",{staticClass:"language-objc extra-class"},[s("pre",{pre:!0,attrs:{class:"language-objc"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("XCTAssertTrue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("CGRectEqualToRect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n scrollView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("frame"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("CGRectMake")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" effectivelyScale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" effectivelyScale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n w "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" effectivelyScale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" h "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" effectivelyScale\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("运行在 "),s("code",[t._v("iPhone 11")]),t._v(" 上的数据")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("scrollView.frame = (2.5 2.5; 25 50)\n\nfloat x = 10;\nfloat y = 10;\nfloat w = 100;\nfloat h = 200;\nfloat effectivelyScale = transformScale / screenScale; // 2.5\n")])])]),s("p",[t._v("运行在 "),s("code",[t._v("iPhone 14 Pro")]),t._v(" 上的数据")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("scrollView.frame = (1.66667 1.66667; 16.6667 33.3333)\n\nfloat x = 10;\nfloat y = 10;\nfloat w = 100;\nfloat h = 200;\nfloat effectivelyScale = transformScale / screenScale; // 0.166666672\n")])])]),s("p",[t._v("这也是为什么 "),s("code",[t._v("run_tests.py")]),t._v(" 脚本是以 "),s("code",[t._v("iPhone 11")]),t._v(" 为原型创建的 "),s("code",[t._v("IosUnitTestsSimulator")]),t._v(" 模拟器。")]),t._v(" "),s("p",[t._v("回归正题，在每一次调整完测试代码后，需要重新执行如下命令重新生成 "),s("code",[t._v("ios_test_flutter.dylib")]),t._v("，否则你的调整不会生效！")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("autoninja "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-C")]),t._v(" /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter\n")])])]),s("p",[t._v("执行完再 "),s("code",[t._v("cmd + u")]),t._v(" 或者单独执行某一条单测。")]),t._v(" "),s("h2",{attrs:{id:"五、提交代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、提交代码"}},[t._v("#")]),t._v(" 五、提交代码")]),t._v(" "),s("p",[t._v("在提交代码前，先执行 "),s("code",[t._v("format.sh")]),t._v(" 进行检查，确保没问题后再提交，有问题则根据提示处理一下代码。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("engine/src/flutter/ci/format.sh\n")])])]),s("p",[t._v("好了，到此所有该做的事情都已经做完了，可以打开自己的仓库，点击 "),s("code",[t._v("Contribute")]),t._v(" -> "),s("code",[t._v("Open pull request")]),t._v(" 去提交 "),s("code",[t._v("PR")]),t._v(" 了。")]),t._v(" "),s("p",[t._v("这里放上我的相关 "),s("code",[t._v("PR")]),t._v(" 链接：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/flutter/engine/pull/40216",target:"_blank",rel:"noopener noreferrer"}},[t._v("引擎 PR"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/flutter/flutter/pull/122383",target:"_blank",rel:"noopener noreferrer"}},[t._v("Flutter PR"),s("OutboundLink")],1)])]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("PR")]),t._v(" 提交时间于 "),s("code",[t._v("2023.03.10")]),t._v("，文章完成时间为 "),s("code",[t._v("2023.04.01")]),t._v("。")])]),t._v(" "),s("p",[t._v("由于我的 "),s("code",[t._v("PR")]),t._v(" 与 "),s("code",[t._v("Flutter")]),t._v(" 成员目前做的一些修复在代码上有重叠的地方，所以 "),s("code",[t._v("PR")]),t._v(" 是否会被合并目前尚未可知。该篇主要记录了结合引擎去调试 "),s("code",[t._v("flutter bug")]),t._v(" 到解决和提交代码的整体流程，供大家参考与相互交流。")]),t._v(" "),s("h2",{attrs:{id:"六、资料"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、资料"}},[t._v("#")]),t._v(" 六、资料")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/flutter/flutter/wiki/Testing-the-engine",target:"_blank",rel:"noopener noreferrer"}},[t._v("Testing the engine"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/flutter/engine/blob/master/testing/ios/IosUnitTests/README.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("IosUnitTests/README.md"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://api.flutter.dev/flutter/services/SystemChannels/textInput-constant.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("textInput constant"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/13.eedcba36.js b/assets/js/13.eedcba36.js new file mode 100644 index 000000000..5735de4a6 --- /dev/null +++ b/assets/js/13.eedcba36.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{366:function(t,n,s){"use strict";s.r(n);var e=s(14),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/130.8e072106.js b/assets/js/130.8e072106.js new file mode 100644 index 000000000..e116235d7 --- /dev/null +++ b/assets/js/130.8e072106.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[130],{480:function(t,s,a){"use strict";a.r(s);var e=a(14),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("感谢大家对 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("scrollview_observer"),s("OutboundLink")],1),t._v(" 的支持，上一篇关于 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("scrollview_observer"),s("OutboundLink")],1),t._v(" 的最新一篇文章是在2022年的10月份，不知不觉已经过去了8个月，它现在已经变得更加完善和强大，让我们一起来看看都做了哪些更新吧 🥳")]),t._v(" "),s("p",[t._v("版本信息")]),t._v(" "),s("ul",[s("li",[t._v("当前版本: "),s("code",[t._v("1.13.2")])]),t._v(" "),s("li",[t._v("GitHub地址: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"二、自定义触发观察的时机"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、自定义触发观察的时机"}},[t._v("#")]),t._v(" 二、自定义触发观察的时机")]),t._v(" "),s("p",[t._v("未添加该功能前，滚动视图在整个滚动过程中都会被观察，计算找出第一个 "),s("code",[t._v("item")]),t._v(" 和正在展示的所有 "),s("code",[t._v("item")]),t._v("，当第一个 "),s("code",[t._v("item")]),t._v(" 或者正在展示的 "),s("code",[t._v("item")]),t._v(" 的对象发生变化时才会调用 "),s("code",[t._v("[onObserve]")]),t._v(" 和 "),s("code",[t._v("[onObserveAll]")]),t._v(" 回调。")]),t._v(" "),s("p",[t._v("但往往在一些场景下，我们想要指定在某个滚动状态下才进行观察，以及观察回调的触发时机，那该怎么办呢？")]),t._v(" "),s("h3",{attrs:{id:"_1、autotriggerobservetypes-参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、autotriggerobservetypes-参数"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("autoTriggerObserveTypes")]),t._v(" 参数")]),t._v(" "),s("p",[t._v("现在你可以通过该参数设置自动触发观察的时机，定义如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverAutoTriggerObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" autoTriggerObserveTypes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverAutoTriggerObserveType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n scrollStart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scrollUpdate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scrollEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其默认值为 "),s("code",[t._v("[.scrollStart, .scrollUpdate, .scrollEnd]")])]),t._v(" "),s("p",[t._v("枚举值说明：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("枚举值")]),t._v(" "),s("th",[t._v("描述")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("scrollStart")])]),t._v(" "),s("td",[t._v("开始滚动")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("scrollUpdate")])]),t._v(" "),s("td",[t._v("滚动中")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("scrollEnd")])]),t._v(" "),s("td",[t._v("结束滚动")])])])]),t._v(" "),s("p",[t._v("如在视频列表的场景中，我们可能只需要在列表结束滚动时再去做观察哪个 "),s("code",[t._v("item")]),t._v(" 是第一个，然后进行自动播放，这个时候设置 "),s("code",[t._v("autoTriggerObserveTypes")]),t._v(" 为 "),s("code",[t._v(".scrollEnd")]),t._v(" 即可，同时也避免了大量不必要的计算。")]),t._v(" "),s("h3",{attrs:{id:"_2、triggeronobservetype-参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、triggeronobservetype-参数"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("triggerOnObserveType")]),t._v(" 参数")]),t._v(" "),s("p",[t._v("用于配置触发 "),s("code",[t._v("[onObserve]")]),t._v(" 和 "),s("code",[t._v("[onObserveAll]")]),t._v(" 回调的前提，定义如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),t._v(" triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n displayingItemsChange"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其默认值为 "),s("code",[t._v(".displayingItemsChange")])]),t._v(" "),s("p",[t._v("枚举值说明：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("枚举值")]),t._v(" "),s("th",[t._v("描述")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("directly")])]),t._v(" "),s("td",[t._v("观察到数据后直接将数据返出")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("displayingItemsChange")])]),t._v(" "),s("td",[t._v("当列表子部件进出或数量发生变化时将观察到的数据返出")])])])]),t._v(" "),s("p",[t._v("一般是在实时获取 "),s("code",[t._v("item")]),t._v(" 的 "),s("code",[t._v("leadingMarginToViewport")]),t._v("（"),s("code",[t._v("item")]),t._v(" 顶部与视窗顶部的距离） 和 "),s("code",[t._v("trailingMarginToViewport")]),t._v("（"),s("code",[t._v("item")]),t._v(" 底部与视窗底部的距离）的时候比较常用。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306042148379.png",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"三、保持im会话位置功能增强"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、保持im会话位置功能增强"}},[t._v("#")]),t._v(" 三、保持IM会话位置功能增强")]),t._v(" "),s("p",[t._v("之前限制只支持插入一条消息时保持会话位置，现在放开支持多条，使用方式不变，效果如下")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306042147895.gif",alt:""}})]),t._v(" "),s("blockquote",[s("p",[t._v("注：该功能依赖被插入消息前的最新消息视图做为参照去计算偏移量，所以如果一次性插入的消息数太多，导致该参照消息视图无法得到渲染，则该功能会失效，需要你自己去对 "),s("code",[t._v("ScrollView")]),t._v(" 的 "),s("code",[t._v("cacheExtent")]),t._v(" 设置合理的值来尽量避免这个问题！")])]),t._v(" "),s("h2",{attrs:{id:"四、支持观察瀑布流"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、支持观察瀑布流"}},[t._v("#")]),t._v(" 四、支持观察瀑布流")]),t._v(" "),s("p",[t._v("原先仅针对 "),s("code",[t._v("GridView")]),t._v(" 这种常规网格布局，只处理顶部偏移量一致的 "),s("code",[t._v("item")]),t._v("，现在调整了内部处理逻辑，已支持瀑布流这种模式")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306042146866.png",alt:""}})]),t._v(" "),s("p",[t._v("如上图红线所示，位于第一的 "),s("code",[t._v("item")]),t._v(" 是 "),s("code",[t._v("grid item2")]),t._v(" 和 "),s("code",[t._v("grid item3")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"五、支持观察viewport"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、支持观察viewport"}},[t._v("#")]),t._v(" 五、支持观察viewport")]),t._v(" "),s("p",[t._v("大家多多少少会遇到这种情况，在 "),s("code",[t._v("CustomScrollView")]),t._v(" 中放置了好多 "),s("code",[t._v("sliver")]),t._v("，需要对它们进行观察，判断哪些 "),s("code",[t._v("sliver")]),t._v(" 正在展示，而不仅仅是观察 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")]),t._v(" 中的 "),s("code",[t._v("item")]),t._v("。")]),t._v(" "),s("p",[t._v("在这里可以使用 "),s("code",[t._v("onObserveViewport")]),t._v(" 回调得到你想要的结果，代码如下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid1Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid1Context"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("swipeContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" swipeContext"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid2Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid2Context"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserveViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid1Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debugPrint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'current first sliver in viewport - gridView1'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" swipeContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debugPrint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'current first sliver in viewport - swipeView'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid2Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debugPrint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'current first sliver in viewport - gridView2'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",[s("li",[t._v("在 "),s("code",[t._v("sliverContexts")]),t._v(" 回调中返回需要观察的 "),s("code",[t._v("sliver")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v("。")]),t._v(" "),s("li",[t._v("在 "),s("code",[t._v("onObserveViewport")]),t._v(" 回调中拿到观察结果，结果对应的类为 "),s("code",[t._v("SliverViewportObserveModel")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewportObserveModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 当前 CustomScrollView 所对应的 viewport 实例.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderViewportBase")]),t._v(" viewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 根据 sliverContexts，返回当前观察到的第一个 sliver")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewportObserveDisplayingChildModel")]),t._v(" firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 根据 sliverContexts，返回当前观察到的正在展示的所有 sliver")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewportObserveDisplayingChildModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里需要注意的是，观察的对象不应为嵌套的 "),s("code",[t._v("sliver")]),t._v("，如下代码所示：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPadding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n sliver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListTile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index - ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("index")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("你需要观察的是 "),s("code",[t._v("SliverPadding")]),t._v("，而不是 "),s("code",[t._v("SliverList")]),t._v("，在给 "),s("code",[t._v("sliverContexts")]),t._v(" 传递数据时需要留意，否则观察无效。")]),t._v(" "),s("p",[t._v("那一块的 "),s("code",[t._v("Sliver")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v(" 要怎么获取？")]),t._v(" "),s("p",[t._v("你可以使用 "),s("code",[t._v("GlobalKey")]),t._v("，但这里更建议使用 "),s("code",[t._v("SliverLayoutBuilder")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverLayoutBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 context 记录起来")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sliverCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" sliverCtx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPadding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n sliver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"六、支持自定义观察对象和观察逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、支持自定义观察对象和观察逻辑"}},[t._v("#")]),t._v(" 六、支持自定义观察对象和观察逻辑")]),t._v(" "),s("h3",{attrs:{id:"_1、customtargetrenderslivertype-回调"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、customtargetrenderslivertype-回调"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("customTargetRenderSliverType")]),t._v(" 回调")]),t._v(" "),s("blockquote",[s("p",[t._v("仅支持 "),s("code",[t._v("ListViewObserver")]),t._v(" 和 "),s("code",[t._v("GridViewObserver")])])]),t._v(" "),s("p",[t._v("在保持原来的观察逻辑上，告诉 "),s("code",[t._v("scrollview_observer")]),t._v(" 要处理的 "),s("code",[t._v("RenderSliver")]),t._v(" 类型，目的是为了支持对第三方库构建的滚动视图进行观察。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("customTargetRenderSliverType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 告诉该库它需要观察什么类型的 RenderObject")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里以观察 loading_more_list 的 ListView 为例")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ExtendedRenderSliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("这里罗列几个在 "),s("code",[t._v("loading_more_list")]),t._v(" 中常用的 "),s("code",[t._v("RenderObject")]),t._v(" 供大家对照使用。")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("类型")]),t._v(" "),s("th",[s("code",[t._v("RenderObject")])])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("ListView")])]),t._v(" "),s("td",[s("code",[t._v("ExtendedRenderSliverList")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("GridView")])]),t._v(" "),s("td",[s("code",[t._v("ExtendedRenderSliverGrid")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("WaterfallFlow")])]),t._v(" "),s("td",[s("code",[t._v("RenderSliverWaterfallFlow")])])])])]),t._v(" "),s("h3",{attrs:{id:"_2、customhandleobserve-回调"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、customhandleobserve-回调"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("customHandleObserve")]),t._v(" 回调")]),t._v(" "),s("p",[t._v("该回调用于自定义观察逻辑，当自带的处理逻辑不符合你的需求时使用。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("customHandleObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以完全自定义你的观察逻辑")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("findRenderObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以使用该库提供的默认处理方式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverCore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleListObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverGrid")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" _obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverWaterfallFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以使用该库提供的默认处理方式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverCore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理一些由第三方构建的 Sliver")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 其它类型不做处理")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("现已将原处理 "),s("code",[t._v("RenderSliverList")]),t._v(" 和 "),s("code",[t._v("RenderSliverGride")]),t._v(" 的逻辑抽离至 "),s("code",[t._v("ObserverCore")]),t._v(" 中供大家自由组合使用。")]),t._v(" "),s("h3",{attrs:{id:"_3、extendedhandleobserve-回调"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、extendedhandleobserve-回调"}},[t._v("#")]),t._v(" 3、"),s("code",[t._v("extendedHandleObserve")]),t._v(" 回调")]),t._v(" "),s("blockquote",[s("p",[t._v("仅支持 "),s("code",[t._v("SliverViewObserver")])])]),t._v(" "),s("p",[t._v("该回调用于对原来的观察逻辑进行补充，原来只处理 "),s("code",[t._v("RenderSliverList")]),t._v("、"),s("code",[t._v("RenderSliverFixedExtentList")]),t._v(" 和 "),s("code",[t._v("RenderSliverGrid")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("extendedHandleObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在对原来的观察逻辑进行拓展")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("findRenderObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverWaterfallFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverCore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("结合 "),s("code",[t._v("ObserverCore")]),t._v(" 和以上的几个功能点，实现了可自由观察由第三方构建的滚动视图的功能，不再局限于官方的 "),s("code",[t._v("SliverList")]),t._v(" 和 "),s("code",[t._v("SliverGrid")]),t._v("。")]),t._v(" "),s("p",[t._v("这是一个很有用的功能，它让你的滚动视图的构建变得更加自由，比如观察使用 "),s("a",{attrs:{href:"https://github.com/fluttercandies/waterfall_flow",target:"_blank",rel:"noopener noreferrer"}},[t._v("fluttercandies/waterfall_flow"),s("OutboundLink")],1),t._v(" 构建的瀑布流。")]),t._v(" "),s("h2",{attrs:{id:"七、定位tab的下标计算支持网格类型"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#七、定位tab的下标计算支持网格类型"}},[t._v("#")]),t._v(" 七、定位Tab的下标计算支持网格类型")]),t._v(" "),s("p",[t._v("对 "),s("code",[t._v("ObserverUtils.calcAnchorTabIndex")]),t._v(" 进行增强，现支持处理列表和网格的模块下标计算，这里直接看效果图")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306042148767.gif",alt:""}})]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/131.520de181.js b/assets/js/131.520de181.js new file mode 100644 index 000000000..d6c1089fb --- /dev/null +++ b/assets/js/131.520de181.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[131],{482:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306111347681.gif",alt:""}})]),t._v(" "),s("p",[t._v("最近忙的一个需求，是要做到如下效果：")]),t._v(" "),s("ol",[s("li",[t._v("瀑布流影音")]),t._v(" "),s("li",[t._v("用户滑动结束后，到达红色线处的为命中的视图，仅命中的视图才可进行影音播放")]),t._v(" "),s("li",[t._v("如果第二次滑动后命中的还是瀑布流上的原来两个 "),s("code",[t._v("item")]),t._v(" ，则交替播放影音")]),t._v(" "),s("li",[t._v("瀑布流的中间会存在一个影音栏目模块，翻页播放视频")]),t._v(" "),s("li",[t._v("瀑布流与影音栏目的播放不可共存")])]),t._v(" "),s("p",[t._v("具体效果如上图所示")]),t._v(" "),s("h2",{attrs:{id:"二、布局"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、布局"}},[t._v("#")]),t._v(" 二、布局")]),t._v(" "),s("p",[t._v("上图可以看到了这个需求的整体效果，下面我们来分析一下这个页面的布局实现")]),t._v(" "),s("blockquote",[s("p",[t._v("下面的代码如看到没有使用到的变量，请先忽略，这部分是了解整体的布局情况，所以把一些不相关的代码以 "),s("code",[t._v("...")]),t._v(" 代替了")])]),t._v(" "),s("h3",{attrs:{id:"_1、滚动视图"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、滚动视图"}},[t._v("#")]),t._v(" 1、滚动视图")]),t._v(" "),s("p",[t._v("滚动视图内有多种布局，所以这里使用 "),s("code",[t._v("CustomScrollView")]),t._v(" 来组合各种 "),s("code",[t._v("Sliver")]),t._v(" 的方式去搭建滚动视图")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Banner")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildBanner")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSeparator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isFirst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSeparator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 影音栏目")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSwipeView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSeparator")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isFirst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("table",[s("thead",[s("tr",[s("th",[s("code",[t._v("Sliver")])]),t._v(" "),s("th",[t._v("说明")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("Banner")])]),t._v(" "),s("td",[t._v("一个简单的 "),s("code",[t._v("SliverToBoxAdapter")])])]),t._v(" "),s("tr",[s("td",[t._v("瀑布流1")]),t._v(" "),s("td",[t._v("使用 "),s("code",[t._v("SliverWaterfallFlow")]),t._v(" 构建的瀑布流")])]),t._v(" "),s("tr",[s("td",[t._v("影音栏目")]),t._v(" "),s("td",[t._v("使用 "),s("code",[t._v("PageView")]),t._v(" 构建的翻页视图")])]),t._v(" "),s("tr",[s("td",[t._v("瀑布流2")]),t._v(" "),s("td",[t._v("同 瀑布流1")])])])]),t._v(" "),s("h3",{attrs:{id:"_2、瀑布流"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、瀑布流"}},[t._v("#")]),t._v(" 2、瀑布流")]),t._v(" "),s("p",[t._v("使用第三方库实现瀑布流："),s("a",{attrs:{href:"https://github.com/fluttercandies/waterfall_flow",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/waterfall_flow"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:waterfall_flow/waterfall_flow.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bool isFirst "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required int childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverWaterfallFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n gridDelegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverWaterfallFlowDelegateWithFixedCrossAxisCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n crossAxisCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mainAxisSpacing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n crossAxisSpacing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterfallFlowGridItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("看一下 "),s("code",[t._v("WaterfallFlowGridItemView")]),t._v(" 的核心布局")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildBody")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Column")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n crossAxisAlignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CrossAxisAlignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("start"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n isHit "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildVideo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildCover")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'grid item ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("selfIndex")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selfIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如果是命中的"),s("code",[t._v("item")]),t._v("，则展示影音视图，否则展示封面")]),t._v(" "),s("h3",{attrs:{id:"_3、栏目影音"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、栏目影音"}},[t._v("#")]),t._v(" 3、栏目影音")]),t._v(" "),s("p",[t._v("为什么用 "),s("code",[t._v("SliverLayoutBuilder")]),t._v("，后面会解释")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSwipeView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isRemoveSwipe"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverLayoutBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterfallFlowSwipeView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来看一下 "),s("code",[t._v("WaterfallFlowSwipeView")]),t._v(" 中的 "),s("code",[t._v("build")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n padEnds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" isHit "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("only")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" isHit "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildVideo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onPageChanged"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n currentIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如果是命中的"),s("code",[t._v("item")]),t._v("，则展示影音视图，否则什么都不展示。")]),t._v(" "),s("h2",{attrs:{id:"三、滚动监听"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、滚动监听"}},[t._v("#")]),t._v(" 三、滚动监听")]),t._v(" "),s("p",[t._v("页面的整体布局已经搞定了，现在要考虑如何实现这个功能最最关键的几个技术难点：")]),t._v(" "),s("ol",[s("li",[t._v("判断当前到达红线的是瀑布流还是影音栏目。")]),t._v(" "),s("li",[t._v("当瀑布流的同一水平位置上的多个视图，在列表来回滑动时，轮流播放。")])]),t._v(" "),s("p",[t._v("这里我使用了我开发的一个列表滚动辅助库 "),s("code",[t._v("scrollview_observer")]),t._v(": "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1),t._v("，")]),t._v(" "),s("p",[t._v("虽然 "),s("code",[t._v("pub.dev")]),t._v(" 上有可以监听列表滚动位置的库，但是侵入性很强，并且功能还不够强大，应付不来上面的需求，特别是第2个功能点，简直是魔鬼需求，然而，用我开发的库 "),s("code",[t._v("scrollview_observer")]),t._v(" 就可以轻松应付这2个技术难点。")]),t._v(" "),s("ul",[s("li",[t._v("针对难点1: 只需要使用 "),s("code",[t._v("SliverViewObserver")]),t._v(" 包裹 "),s("code",[t._v("CustomScrollView")]),t._v(" 就可以对其进行观察，这样会适时返回可视区域中所有的 "),s("code",[t._v("Sliver")]),t._v(" 和 "),s("code",[t._v("item")]),t._v(" 信息，再配合 "),s("code",[t._v("leadingOffset")]),t._v(" 参数设置观察的偏移量，即可轻松实现达到红线的需求，然后在 "),s("code",[t._v("onObserveViewport")]),t._v(" 回调中可以得知达到红线的是瀑布流还是影音栏目。")]),t._v(" "),s("li",[t._v("针对难点2: 在 "),s("code",[t._v("SliverViewObserver")]),t._v(" 的 "),s("code",[t._v("onObserveAll")]),t._v(" 回调参数中可以拿到此时瀑布流中被命中的所有 "),s("code",[t._v("item")]),t._v(" 的信息，再通过简单的计算，即可完成轮流播放的功能。")])]),t._v(" "),s("p",[t._v("接下来我们进入实战部分。")]),t._v(" "),s("h2",{attrs:{id:"四、实现逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、实现逻辑"}},[t._v("#")]),t._v(" 四、实现逻辑")]),t._v(" "),s("p",[t._v("我们上边使用 "),s("code",[t._v("CustomScrollView")]),t._v(" 来实现滚动视图部分，其中分了上下两个瀑布流 "),s("code",[t._v("Sliver")]),t._v("，中间一个栏目影音 "),s("code",[t._v("Sliver")]),t._v("，在滚动视图结束滚动后，只需要做如下主要逻辑：")]),t._v(" "),s("ol",[s("li",[t._v("哪个 "),s("code",[t._v("Sliver")]),t._v(" 到达了红线")]),t._v(" "),s("li",[t._v("如果是瀑布流，则获取命中的 "),s("code",[t._v("item")]),t._v(" 下标，然后进行影音播放")]),t._v(" "),s("li",[t._v("如果是影音栏目，则按当前正在展示的 "),s("code",[t._v("item")]),t._v(" 进行影音播放")])]),t._v(" "),s("p",[t._v("先定义命中的 "),s("code",[t._v("Sliver")]),t._v(" 类型，并使用两个属性来记录命中的下标和类型")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个瀑布流")]),t._v("\n firstGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 影音栏目")]),t._v("\n swipe"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二个瀑布流")]),t._v("\n secondGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 命中的下标")]),t._v("\nint hitIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 命中的类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),t._v(" hitType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"_1、sliverviewobserver-的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、sliverviewobserver-的使用"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("SliverViewObserver")]),t._v(" 的使用")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("SliverViewObserver")]),t._v(" 包裹 "),s("code",[t._v("CustomScrollView")]),t._v(" 来进行观察。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 红线距离滚动视图顶部的偏移量")]),t._v("\ndouble observeOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("150")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildBody")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置观察的偏移量")]),t._v("\n leadingOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observeOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置触发观察的时机，这里为滚动结束")]),t._v("\n autoTriggerObserveTypes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverAutoTriggerObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scrollEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置触发返回观察结果回调的时机，这里直接返回结果")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n extendedHandleObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 拓展原来的观察处理逻辑，瀑布流是使用第三方库构建的，")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 所以在这里需要告知 scrollview_observer 如何去观察它。")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverUtils")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("findRenderObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverWaterfallFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverCore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fetchLeadingOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" observeOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回目标 Sliver 对应的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid1Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid1Context"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("swipeContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" swipeContext"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid2Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid2Context"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserveViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 观察 viewport，在这里可以知道第一个 Sliver 是哪个")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserveAll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 观察瀑布流的 item")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("blockquote",[s("p",[s("code",[t._v("onObserveViewport")]),t._v(" 和 "),s("code",[t._v("onObserveAll")]),t._v(" 同时存在时，"),s("code",[t._v("onObserveViewport")]),t._v(" 回调先走！")])]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("sliverContexts")]),t._v(" 参数回调中，返回需要被观察的 "),s("code",[t._v("Sliver")]),t._v("，在这个场景下，瀑布流和影音栏目都需要被观察，所以这里返回了他们相应的 "),s("code",[t._v("BuildContext")]),t._v("，相应的，我们就需要先把它们记录起来。")]),t._v(" "),s("p",[t._v("记录瀑布流的 "),s("code",[t._v("BuildContext")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bool isFirst "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required int childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverWaterfallFlow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),t._v(" selfType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isFirst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid1Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid1Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自身的类型")]),t._v("\n selfType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("grid2Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" grid2Context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n selfType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("secondGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 瀑布流 item")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterfallFlowGridItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n selfIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n selfType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" selfType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n hitIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hitIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("记录影音栏目的 "),s("code",[t._v("BuildContext")])]),t._v(" "),s("blockquote",[s("p",[t._v("实现 "),s("code",[t._v("SliverLayoutBuilder")]),t._v(" 得到"),s("code",[t._v("BuildContext")])])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSwipeView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverLayoutBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("swipeContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" swipeContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterfallFlowSwipeView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、找出命中的-sliver"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、找出命中的-sliver"}},[t._v("#")]),t._v(" 2、找出命中的 "),s("code",[t._v("Sliver")])]),t._v(" "),s("p",[t._v("现在开始来处理观察 "),s("code",[t._v("Viewport")]),t._v(" 的逻辑，通过观察 "),s("code",[t._v("Viewport")]),t._v(" 就可以得知哪个是第一个 "),s("code",[t._v("Sliver")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录到达红线的 Sliver")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" firstChildCtxInViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nonObserveViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录第一个 Sliver")]),t._v("\n firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid1Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGrid "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录命中类型")]),t._v("\n hitType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重置命中的下标，在 onObserveAll 回调中给 hitIndex 赋值时会使用到")]),t._v("\n hitIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里不调用 setState，只记录数据，在 onObserveAll 更新命中下标后再刷新页面")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" swipeContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 影音栏目")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swipe "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接刷新页面，播放影音栏目的视频")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n hitType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swipe"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid2Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理逻辑同第一个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("secondGrid "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n hitType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("secondGrid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n hitIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("通过上述 "),s("code",[t._v("onObserveViewport")]),t._v(" 中的逻辑，我们已经确定了当前命中的 "),s("code",[t._v("Sliver")]),t._v(" 是哪个，并通过 "),s("code",[t._v("firstChildCtxInViewport")]),t._v(" 属性记录了起来。")]),t._v(" "),s("p",[t._v("当命中的是影音栏目时，则更新 "),s("code",[t._v("hitType")]),t._v(" 为 "),s("code",[t._v("WaterFlowHitType.swipe")]),t._v(" 并刷新页面，进行影音栏目的视频播放")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断当前的 item 是否命中")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" isHit "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swipe "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hitType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" currentIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 命中时播放视频")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" isHit "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildVideo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n onPageChanged"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 翻页后如果下标发生变化，则刷新影音栏目视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n currentIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("此时 "),s("code",[t._v("hitType")]),t._v(" 非瀑布流类型，所以瀑布流会将影音视图变成封面。")]),t._v(" "),s("blockquote",[s("p",[t._v("注：本例为功能示例，所以以上都是通过 "),s("code",[t._v("setState")]),t._v(" 简单地进行视图变化处理，在实际应用场景中可根据自身的情况，实现局部刷新逻辑")])]),t._v(" "),s("p",[t._v("影音栏目的播放逻辑就完成了，接下来就是处理瀑布流的影音。")]),t._v(" "),s("h3",{attrs:{id:"_3、处理瀑布流的命中-item-下标"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、处理瀑布流的命中-item-下标"}},[t._v("#")]),t._v(" 3、处理瀑布流的命中 "),s("code",[t._v("item")]),t._v(" 下标")]),t._v(" "),s("p",[t._v("通过 "),s("code",[t._v("onObserveAll")]),t._v(" 观察 "),s("code",[t._v("Sliver")]),t._v("，通过它我们可以知道瀑布流 "),s("code",[t._v("Slive")]),t._v(" 中哪些是命中的 "),s("code",[t._v("item")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("onObserveAll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据记录的第一个 Sliver 的 BuildContext，取出相应的观察结果")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("firstChildCtxInViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid1Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果当前的第一个 Sliver 不是相应的类型，则直接返回")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGrid "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数据类型校验")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserveModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出命中的 item 的下标（瀑布流中一次命中的可能有多个）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstIndexList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGroupChildList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理瀑布流命中的逻辑（由于第二个瀑布流中的处理逻辑相同，所以抽了方法）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridHitIndex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildCtxInViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" grid2Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二个瀑布流")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WaterFlowHitType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("secondGrid "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" hitType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserveModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstIndexList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstGroupChildList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridHitIndex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("在 "),s("code",[t._v("handleGridHitIndex")]),t._v(" 方法中计算得到命中下标，并刷新页面。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 处理瀑布流命中的逻辑")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleGridHitIndex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据上一次的命中下标，找出对应的结果数组中的下标")]),t._v("\n int targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hitIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 没找着，置为0")]),t._v("\n targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 找着了，则取下一个，为了实现交替播放")]),t._v("\n targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 但是如果超过了结果数组的最大下标，则置为0")]),t._v("\n targetIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新 hitIndex 并刷新页面")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n hitIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" firstIndexList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("targetIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"五、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、最后"}},[t._v("#")]),t._v(" 五、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/132.dc8a7c55.js b/assets/js/132.dc8a7c55.js new file mode 100644 index 000000000..2f61b905f --- /dev/null +++ b/assets/js/132.dc8a7c55.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[132],{483:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在 "),s("RouterLink",{attrs:{to:"/pages/cd4fd1/"}},[t._v("【Flutter - 快速实现聊天会话列表的效果，完美💯】")]),t._v(" 一文中介绍了常规聊天场景下如何保持消息位置及其实现原理，本篇将在此基础上完成 "),s("code",[t._v("ChatGPT")]),t._v(" 这种生成式消息保持位置的功能。")],1),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202306181254155.gif",alt:""}})]),t._v(" "),s("p",[t._v("如上图所示，操作与现象：")]),t._v(" "),s("ol",[s("li",[t._v("点击右上角的按钮后，会插入一条消息，模拟向 "),s("code",[t._v("ChatGPT")]),t._v(" 发出问题")]),t._v(" "),s("li",[t._v("然后间隔 "),s("code",[t._v("1s")]),t._v(" 会自动插入一条生成式消息，模拟 "),s("code",[t._v("ChatGPT")]),t._v(" 在不断回复我们的问题")])]),t._v(" "),s("h2",{attrs:{id:"二、布局"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、布局"}},[t._v("#")]),t._v(" 二、布局")]),t._v(" "),s("p",[t._v("布局非常简单，就一个 "),s("code",[t._v("ListView")]),t._v("，不过需要结合 "),s("code",[t._v("ChatObserver")]),t._v(" 做一些配置")]),t._v(" "),s("h3",{attrs:{id:"_1、chatobserver-配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、chatobserver-配置"}},[t._v("#")]),t._v(" 1、"),s("code",[t._v("ChatObserver")]),t._v(" 配置")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实例化 ListObserverController")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 由于滚动视图使用的是 ListView，所以选择 ListObserverController")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 否则请选择相应的 ObserverController")]),t._v("\nobserverController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 关闭模块定位的偏移缓存功能，因为IM经常添加或删除消息，偏移的缓存容易过时")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果你不会使用到模块定位功能，则可以不用理会")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cacheJumpIndexOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 实例化 ChatScrollObserver")]),t._v("\nchatObserver "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 滚动视图的偏移量超过 5 时才会启用保持IM消息位置的功能")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fixedPositionOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部在切换 isShrinkWrap 的值时会触发该回调，")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触发时局部刷新列表视图即可，这里因为是 Demo 的缘故，做法比较简单粗暴")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("toRebuildScrollViewCallback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、listview-配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、listview-配置"}},[t._v("#")]),t._v(" 2、"),s("code",[t._v("ListView")]),t._v(" 配置")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内含处理保持IM消息位置的核心逻辑")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatObserverClampingScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("only")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 切换滚动视图的高度模式，当消息不满一屏时，该值为 true，使消息在顶部展示，")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 消息超一屏时为 false，消息在底部展示，chatObserver 内部会适时变更该值")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果你希望一直都是底部展示，可以注释该行")]),t._v("\n shrinkWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isShrinkWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 消息从底部往上开始排序，所以来新消息时应该插入到 0 的位置")]),t._v("\n reverse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatItemWidget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对滚动视图监听")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重点，如果你希望不满一屏时在顶部展示消息，而又不生效时，")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记得如下所示设置 alignment 为 Alignment.topCenter")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Align")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("topCenter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("基本的配置到这就完成了，接下来看看如何为生成式消息保持位置吧")]),t._v(" "),s("h2",{attrs:{id:"三、实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、实战"}},[t._v("#")]),t._v(" 三、实战")]),t._v(" "),s("p",[s("code",[t._v("AppBar")]),t._v(" 右边的按钮，点击时模拟发出一条问题消息，然后等待1s后 "),s("code",[t._v("ChatGPT")]),t._v(" 以不断更新消息的方式回答问题")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IconButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n onPressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 关闭上一条更新生成式消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopMsgUpdateStream")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 模拟发送一条问题消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等待1s")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delayed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("seconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 插入生成式消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertGenerativeMsg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n icon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Icons")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("add_comment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("停止旧生成式消息的更新，控制同一时间只允许存在一条生成式消息")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopMsgUpdateStream")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n timer"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cancel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n timer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("插入一条新消息方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required bool isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在符合条件的情况下保持当前的IM消息位置")]),t._v("\n chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("changeCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatDataHelper")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createChatModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("插入生成式消息，模拟 "),s("code",[t._v("ChatGPT")]),t._v(" 正在回答问题")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertGenerativeMsg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 停止之前的生成式消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopMsgUpdateStream")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 插入一条")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始模拟接收更新的消息数据")]),t._v("\n int count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n timer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Timer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("periodic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("timer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 接收完毕")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("60")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopMsgUpdateStream")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出最新的生成式消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新消息内容")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" newString "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("-1+1'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 替换消息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" newModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" newString"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 准备保持位置")]),t._v("\n chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重点，使用生成式消息的处理模式")]),t._v("\n mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changeCount: 1,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 后面会解释该模式的使用")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// chatObserver.standby(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changeCount: 1,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode: ChatScrollObserverHandleMode.specified,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// refItemRelativeIndex: 2,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// refItemRelativeIndexAfterUpdate: 2,")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// );")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 刷新滚动视图，可局部刷新，Demo 缘故，做法比较简单粗暴")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"四、用法解析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、用法解析"}},[t._v("#")]),t._v(" 四、用法解析")]),t._v(" "),s("p",[t._v("其实上面那一堆代码中，重点在于 "),s("code",[t._v("standby")]),t._v(" 方法的使用")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 滚动视图的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当布局复杂使 scrollview_observer 无法顺利自动找到滚动视图的 BuildContext 时才需要传入")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如 CustomScrollView，或 ObserverWidget 包裹的 child 中有多个 ListView、GridView")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否是删除消息的操作，它不会启用保持位置功能，而是可能切换 isShrinkWrap 的值")]),t._v("\n bool isRemove "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 变更的IM消息数")]),t._v("\n int changeCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),t._v(" mode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 刷新滚动视图前，参照的相对item的下标")]),t._v("\n int refItemRelativeIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 刷新滚动视图后，参照的相对item的下标")]),t._v("\n int refItemRelativeIndexAfterUpdate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("处理模式的定义如下")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 常规模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 插入或删除IM消息的时候使用")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 生成式模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 专门处理 ChatGPT 这种不断更新消息的情况")]),t._v("\n generative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 指定模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 在该模式下我们可以指定参照的IM消息的相对下标")]),t._v("\n specified"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_1、常规模式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、常规模式"}},[t._v("#")]),t._v(" 1、常规模式")]),t._v(" "),s("p",[t._v("常规模式为默认的处理模式，应用于日常的 "),s("code",[t._v("IM")]),t._v(" 添加和删除消息的场景，比较简单")]),t._v(" "),s("p",[t._v("插入多条消息")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_addMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进入待命状态，保持IM消息位置")]),t._v("\n chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("changeCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 一次性插入多条消息，并刷新滚动视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n needIncrementUnreadMsgCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatDataHelper")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createChatModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("删除消息")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isRemove"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeAt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、生成式模式-仿chatgpt"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、生成式模式-仿chatgpt"}},[t._v("#")]),t._v(" 2、生成式模式(仿"),s("code",[t._v("ChatGPT")]),t._v(")")]),t._v(" "),s("p",[t._v("专门处理 "),s("code",[t._v("ChatGPT")]),t._v(" 这种生成式消息的场景")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" chatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" newString "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("-1+1'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" newModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isOwn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" newString"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新生成式消息的数据")]),t._v("\nchatModels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进入待命状态")]),t._v("\nchatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changeCount: 1,")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 刷新列表")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[t._v("指定处理模式 "),s("code",[t._v("mode")]),t._v(" 为 "),s("code",[t._v(".generative")])]),t._v(" "),s("li",[s("code",[t._v("changeCount")]),t._v(" 默认值为 "),s("code",[t._v("1")]),t._v("，传与不传一样")])]),t._v(" "),s("p",[t._v("内部会根据 "),s("code",[t._v("changeCount")]),t._v(" 来计算并记录参照消息的相对下标（关于相对下标的内容会在 "),s("code",[t._v("指定模式")]),t._v(" 一节中说明），这意味着该模式支持连续的多条生成式消息保持位置，比如最新的两条消息都是生成式的情况是支持。")]),t._v(" "),s("p",[t._v("而如果最新的三条消息，"),s("code",[t._v("0")]),t._v(" 和 "),s("code",[t._v("2")]),t._v(" 都是生成式消息而 "),s("code",[t._v("1")]),t._v(" 不是，又或者同一时间插入消息和更新生成式消息，此时该模式是无法很好的支持保持消息位置这一功能的，那有什么办法呢？你可以使用 "),s("code",[t._v("指定模式")])]),t._v(" "),s("h3",{attrs:{id:"_3、指定模式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、指定模式"}},[t._v("#")]),t._v(" 3、指定模式")]),t._v(" "),s("p",[t._v("顾名思义，可以指定参照的 "),s("code",[t._v("IM")]),t._v(" 消息的相对下标，从而可以自由的使用保持消息位置的功能，当然了，自由也意味着传入的数据和需要了解的会更多！")]),t._v(" "),s("p",[t._v("我们先来了解一下什么是参照的 "),s("code",[t._v("IM")]),t._v(" 消息的相对下标？")]),t._v(" "),s("blockquote",[s("p",[t._v("注: 滚动视图内已渲染的 "),s("code",[t._v("item")]),t._v(" 不一定会被显示出来，如果下文中提及的滚动视图渲染的 "),s("code",[t._v("item")]),t._v(" 让你不好理解，你可以直接认为是屏幕中正在展示的 "),s("code",[t._v("item")]),t._v("。")])]),t._v(" "),s("p",[t._v("假如当前是正在看最新消息的情况，滚动视图内渲染了 "),s("code",[t._v("item0")]),t._v(" 到 "),s("code",[t._v("item4")]),t._v("，其相对下标为 "),s("code",[t._v("0")]),t._v(" 到 "),s("code",[t._v("4")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v(" trailing relativeIndex\n----------------- -----------------\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item4 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item3 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" \n----------------- -----------------\n leading\n")])])]),s("p",[t._v("如果此时你在翻看历史消息，滚动视图内渲染了 "),s("code",[t._v("item10")]),t._v(" 到 "),s("code",[t._v("item14")]),t._v("，其相对下标也为 "),s("code",[t._v("0")]),t._v(" 到 "),s("code",[t._v("4")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v(" trailing relativeIndex\n----------------- -----------------\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item14 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item13 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item12 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item11 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item10 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" \n----------------- -----------------\n leading\n")])])]),s("p",[t._v("这里 "),s("code",[t._v("0")]),t._v(" 到 "),s("code",[t._v("4")]),t._v(" 的下标即为相对下标，我们来使用该模式（"),s("code",[t._v(".specified")]),t._v("）来完成 "),s("code",[t._v(".generative")]),t._v(" 模式的功能")]),t._v(" "),s("p",[t._v("在上述示例中，离发出问题间隔了1秒后，"),s("code",[t._v("ChatGPT")]),t._v(" 会开始回答问题，此时我们插入生成式的消息，并不断更新该消息内容。")]),t._v(" "),s("blockquote",[s("p",[t._v("注意: 插入消息的方法内已经做了保持消息位置的处理，所以我们的关注点在于更新消息")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v(" trailing relativeIndex\n----------------- -----------------\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item4 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item3 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item0 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" \n----------------- -----------------\n leading\n")])])]),s("p",[t._v("假设此时 "),s("code",[t._v("item0")]),t._v(" 为生成式消息，它的消息内容在不断变多，如果放任不管，"),s("code",[t._v("item0")]),t._v(" 以上的消息会逐渐被往上顶，因此在这里我们的目的是不管 "),s("code",[t._v("item0")]),t._v(" 如何变化，都需要保持 "),s("code",[t._v("item1")]),t._v(" 及以上消息的位置，所以 "),s("code",[t._v("item1")]),t._v(" 就成为了我们的参照消息，它此刻的下标为 "),s("code",[t._v("1")]),t._v("，而生成式消息的变化前后，"),s("code",[t._v("item1")]),t._v(" 的下标一直都是 "),s("code",[t._v("1")]),t._v("！")]),t._v(" "),s("p",[t._v("改造的代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("chatObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("standby")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n changeCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置处理模式为 .specified")]),t._v("\n mode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("specified"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 滚动视图更新前，参照消息的相对下标")]),t._v("\n refItemRelativeIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 滚动视图更新后，参照消息的相对下标")]),t._v("\n refItemRelativeIndexAfterUpdate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("注意，"),s("code",[t._v("refItemRelativeIndex")]),t._v(" 和 "),s("code",[t._v("refItemRelativeIndexAfterUpdate")]),t._v(" 应该指向同一条消息！")]),t._v(" "),s("p",[t._v("其实参照消息在理论上只要是 "),s("code",[t._v("item0")]),t._v(" 以上的已经渲染的消息即可，即上述的参照消息的相对下标也可以是 "),s("code",[t._v("2")]),t._v("、 "),s("code",[t._v("3")]),t._v(" 和 "),s("code",[t._v("4")]),t._v("。")]),t._v(" "),s("blockquote",[s("p",[t._v("注: 如果更新滚动视图后参照的消息无法得到渲染，则该功能就会失效，所以建议还是选择当前发生变化的消息的上一条消息的相对下标~")])]),t._v(" "),s("p",[t._v("比较有意思的是，假设我们在发出问题后，往上翻页了，1秒后滚动视图渲染的消息是 "),s("code",[t._v("item10")]),t._v(" 到 "),s("code",[t._v("item14")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v(" trailing relativeIndex\n----------------- -----------------\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item14 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item13 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item12 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item11 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" item10 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" \n----------------- -----------------\n leading\n")])])]),s("p",[t._v("此时你的参照消息的相对下标就可以为 "),s("code",[t._v("0")]),t._v(" 了，但是你需要判断当前已渲染的第一个 "),s("code",[t._v("item")]),t._v(" 是否为生成式消息，这就很麻烦，没有必要。")]),t._v(" "),s("blockquote",[s("p",[t._v("总结来说，参照的消息不可以为发生变化的消息本身，而是为滚动视图在更新前后都会被渲染的 "),s("code",[t._v("item")]),t._v(" 即可！")])]),t._v(" "),s("h2",{attrs:{id:"五、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、最后"}},[t._v("#")]),t._v(" 五、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/133.60bee8f1.js b/assets/js/133.60bee8f1.js new file mode 100644 index 000000000..bf26a13d4 --- /dev/null +++ b/assets/js/133.60bee8f1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[133],{485:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("最近遇到的一个需求上的优化点，在一个详情页中存在提交反馈信息的表单模块，这里简单的模拟了一下，这是运行后的效果")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202308131919003.gif",alt:"优化前"}})]),t._v(" "),s("p",[t._v("设计师验收的时候觉得这里有一点需要做下优化，那就是表单视图并不大，提交按钮需要完整的显示出来，讲道理要手动去计算偏移量还是挺麻烦的，但是如果结合我的 "),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("LinXunFeng/flutter_scrollview_observer"),s("OutboundLink")],1),t._v(" 这个库就完全难不倒我们，咔咔两下就搞定了，优化后的效果如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202308131920819.gif",alt:"优化后"}})]),t._v(" "),s("p",[s("code",[t._v("Demo")]),t._v(" 链接："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer/blob/main/example/lib/features/scene/scrollview_form_demo/scrollview_form_demo_page.dart",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_scrollview_observer/blob/main/example/lib/features/scene/scrollview_form_demo/scrollview_form_demo_page.dart"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("接下来我讲一下具体的实现步骤。")]),t._v(" "),s("h2",{attrs:{id:"二、布局"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、布局"}},[t._v("#")]),t._v(" 二、布局")]),t._v(" "),s("p",[t._v("布局比较容易，简单过一下")]),t._v(" "),s("h3",{attrs:{id:"滚动视图"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#滚动视图"}},[t._v("#")]),t._v(" 滚动视图")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("ListView")]),t._v(" 构建滚动视图")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),t._v(" scrollController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("formIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildForm")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildImage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"表单模块"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#表单模块"}},[t._v("#")]),t._v(" 表单模块")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FocusNode")]),t._v(" formFocusNode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FocusNode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildForm")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Form")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Column")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n crossAxisAlignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CrossAxisAlignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("start"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Feedback'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextStyle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n fontSize"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fontWeight"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontWeight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bold"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输入框")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextField")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n focusNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" formFocusNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 提交按钮")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("infinity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n margin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("only")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Submit'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onPressed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使输入框失去焦点")]),t._v("\n formFocusNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unfocus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"三、实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、实战"}},[t._v("#")]),t._v(" 三、实战")]),t._v(" "),s("p",[t._v("由于滚动视图使用的是 "),s("code",[t._v("ListView")]),t._v("，所以我们使用对应 "),s("code",[t._v("ListViewObserver")]),t._v(" 将其包裹一层做观察")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将滚动视图的 ScrollController 传给 ListObserverController")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nresultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 关闭自动触发功能")]),t._v("\n autoTriggerObserveTypes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不实现观察回调")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// onObserve: (resultModel) {}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注：请留意一下注释掉的 "),s("code",[t._v("onObserve")]),t._v(" 回调，下面会做相关的版本更新说明。")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 表单模块的下标")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" int formIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 监听输入框的焦点状态")]),t._v("\nformFocusNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("handleFormFocus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleFormFocus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 我们只处理获得焦点的情况")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("formFocusNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hasFocus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获得焦点后，等待键盘完全展示出来")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delayed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("600")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触发观察滚动视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchOnceObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n isForce"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 强制观察，不用对比上次的观察结果")]),t._v("\n isDependObserveCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不依赖观察回调，这样就可以正常返回观察结果")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果观察不成功则不用继续下去了")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isSuccess"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据下标从观察结果中找出表单对应的数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" formResultModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("observeResult"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("firstWhere")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" formIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("formResultModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行滚动，使表单视图底部紧贴键盘显示出来")]),t._v("\n observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 相减的逻辑在正文内说明")]),t._v("\n formResultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scrollOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" formResultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("trailingMarginToViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ease"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("一些额外说明：")]),t._v(" "),s("ul",[s("li",[t._v("等待键盘完全展示出来的时长（"),s("code",[t._v("600 ms")]),t._v("）是测试出来的同时适用于iOS和安卓的一个值，如果你有更好的方式，可以留言分享一下 😁")]),t._v(" "),s("li",[t._v("在 "),s("code",[t._v("1.16.0")]),t._v(" 版本之前，如果对应的观察回调（如："),s("code",[t._v("onObserve")]),t._v("）没有实现的话，内部的观察逻辑就无法进行下去，提前结束。而在 "),s("code",[t._v("1.16.0")]),t._v(" 版本之后对 "),s("code",[t._v("dispatchOnceObserve")]),t._v(" 方法进行了增强，可以通过对 "),s("code",[t._v("isDependObserveCallback")]),t._v(" 设置为 "),s("code",[t._v("false")]),t._v(" 避开这个逻辑，并且返回值也改造成了 "),s("code",[t._v("Future")]),t._v("，可直接拿到观察结果，相当方便！")]),t._v(" "),s("li",[s("code",[t._v("scrollOffset")]),t._v(" 是当前滚动视图的偏移量")]),t._v(" "),s("li",[s("code",[t._v("trailingMarginToViewport")]),t._v(" 是指当前 "),s("code",[t._v("item")]),t._v(" 到 "),s("code",[t._v("viewport")]),t._v(" 的底部距离，即 "),s("code",[t._v("表单模块视图的底部")]),t._v(" 到 "),s("code",[t._v("滚动视图的视窗底部")]),t._v(" 的间距。")]),t._v(" "),s("li",[t._v("由于上述功能我们是依赖于键盘弹出来的视图高度发生变化的特性，键盘出来时视窗大小受到挤压缩小，所以 "),s("code",[t._v("Scaffold")]),t._v(" 这里的 "),s("code",[t._v("resizeToAvoidBottomInset")]),t._v(" 属性请不要设置为 "),s("code",[t._v("false")]),t._v("。如果设置了 "),s("code",[t._v("false")]),t._v("，则滚动的偏移量需要手动加上键盘的高度~")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n resizeToAvoidBottomInset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在理解完上面的内容后，我们再来看一下最终偏移量计算的逻辑，即")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("animateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n formResultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scrollOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" formResultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("trailingMarginToViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n curve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Curves")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ease"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202308131921953.png",alt:"图解"}})]),t._v(" "),s("p",[t._v("咱们配图食用，当键盘完全展示出来后，滚动视图的的视窗变小了， 由红色区域变成了蓝色区域，而此时表单模块也完全展示出来了，其底部到视窗之间的间距就是 "),s("code",[t._v("trailingMarginToViewport")]),t._v("，为正数，但是我们需要让它紧贴底部，所以此时滚动视图的偏移量是多了的，需要减去这个 "),s("code",[t._v("trailingMarginToViewport")]),t._v("，这便是最终偏移量计算的逻辑。")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/134.7add7b52.js b/assets/js/134.7add7b52.js new file mode 100644 index 000000000..bd78889d1 --- /dev/null +++ b/assets/js/134.7add7b52.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[134],{484:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在众多的曝光统计计算方式中，有这么一种特殊的，名为 "),s("code",[t._v("1/2")]),t._v(" 曝光统计的计算方式，顾名思义就是模块露出的大小超过自身大小的 "),s("code",[t._v("50%")]),t._v(" 时，需要触发一次统计，并记录起来防止被反复统计，当少于 "),s("code",[t._v("50%")]),t._v(" 时会将曝光记录进行重置。")]),t._v(" "),s("p",[t._v("一般会用于统计在列表页中投放的广告和详情页中某些广告模块的曝光。")]),t._v(" "),s("h2",{attrs:{id:"二、解决方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、解决方案"}},[t._v("#")]),t._v(" 二、解决方案")]),t._v(" "),s("p",[t._v("要实时监测并计算来得到当前所有 "),s("code",[t._v("item")]),t._v(" 的自身显示占比还是比较麻烦的，所以普遍我们会优先去找和使用已存在的解决方案。")]),t._v(" "),s("p",[t._v("那想必大家脑海中第一个想到的便是谷歌自家的 "),s("a",{attrs:{href:"https://pub.dev/packages/visibility_detector/versions",target:"_blank",rel:"noopener noreferrer"}},[t._v("visibility_detector"),s("OutboundLink")],1),t._v("，这个库也确实很好用，常规场景下呢我也比较推荐大家使用它的，因为它真的太方便了！不过我所遇到的一种场景它却无法胜任，那就是在 "),s("code",[t._v("CustomScrollView")]),t._v(" 中存在 "),s("code",[t._v("SliverPersistentHeader")]),t._v(" 的情况，它的计算结果会不准确，如下所示。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202308261638786.gif",alt:""}})]),t._v(" "),s("p",[t._v("注意看蓝色的 "),s("code",[t._v("Middle Sliver")]),t._v(" 视图，当它刚被 "),s("code",[t._v("AppBar")]),t._v(" 挡住时自身显示占比还是 "),s("code",[t._v("1")]),t._v("，直到超出了屏幕的上方才开始发生变化，当被 "),s("code",[t._v("AppBar")]),t._v(" 完全遮挡时值为 "),s("code",[t._v("0.58")]),t._v("~")]),t._v(" "),s("p",[t._v("不过这里我着重介绍一下另一个方案，那就是使用我这个库（"),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1),t._v(") 去快速获取 "),s("code",[t._v("item")]),t._v(" 自身显示占比，而且不会有上述的 "),s("code",[t._v("bug")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"三、实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、实战"}},[t._v("#")]),t._v(" 三、实战")]),t._v(" "),s("p",[t._v("以 "),s("code",[t._v("ListView")]),t._v(" 为例，代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不进行对比，直接把结果返出来")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从观察结果中拿到正在展示的所有 item 的数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" models "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出所有下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" indexList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出所有 item 的自身显示占比")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" displayPercentageList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n models"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debugPrint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index -- ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("indexList")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" -- ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("displayPercentageList")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("是的，拿到所有的 "),s("code",[t._v("item")]),t._v(" 的自身显示占比就是这么简单，通过使用对应的 "),s("code",[t._v("WidgetObserver")]),t._v(" 去对滚动视图进行观察就可以了。")]),t._v(" "),s("p",[t._v("每次滚动的时候就会直接返回观察结果，如果需要在不滚动的时候也能进行一次观察，可以调用如下方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchOnceObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"四、统计逻辑"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、统计逻辑"}},[t._v("#")]),t._v(" 四、统计逻辑")]),t._v(" "),s("p",[t._v("上面你已经能拿到自身显示占比的数据，那接下来就可以做是否触发曝光的逻辑判断了，这个比较业务化，所以这里直接给出我的代码吧，供参与使用")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:scrollview_observer/scrollview_observer.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mixin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VisibilityExposureMixin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录 item 已曝光的 Map")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bool"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" exposureRecordMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 重置所有 item 的曝光记录")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resetExposureRecordMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n exposureRecordMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 处理滚动视图中 item 的曝光")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [resultModel] 监听结果（基类是 ObserveModel, 传 onObserve 回调中的值，或 onObserveAll 中根据 BuildContext 取出来的值）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [toExposeDisplayPercent] 当自身显示占比超过该值时视为曝光且记录起来，否则重置曝光记录")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [recordKeyCallback] 返回用于记录 item 已曝光的 key，不实现则使用下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [needExposeCallback] 用于确定对应下标的 item 是否参与曝光计算逻辑，不实现则为 true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [toExposeCallback] 满足曝光条件后的回调")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleExposure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n double toExposeDisplayPercent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" recordKeyCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bool "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" needExposeCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" toExposeCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserveDisplayingChildModelMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserveModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" displayingChildModel "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" displayingChildModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" recordKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" recordKeyCallback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 让外部告诉我们 index 对应的 item 是否需要参与曝光计算逻辑")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" needExpose "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" needExposeCallback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("needExpose"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("continue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// debugPrint('item : $index - ${displayingChildModel.displayPercentage}');")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断 item 自身显示占比是否超过 [toExposeDisplayPercent]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("displayingChildModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" toExposeDisplayPercent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不满足曝光条件，重置曝光记录")]),t._v("\n exposureRecordMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("recordKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 满足暴露条件")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" haveExposure "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" exposureRecordMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("recordKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("haveExposure"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("continue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toExposeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n exposureRecordMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("recordKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("逻辑：")]),t._v(" "),s("ol",[s("li",[t._v("达到 "),s("code",[t._v("1/2")]),t._v(" 后触发曝光统计，并记录起来，防触发多次请求")]),t._v(" "),s("li",[t._v("小于 "),s("code",[t._v("1/2")]),t._v(" 时重置当前 "),s("code",[t._v("item")]),t._v(" 的曝光记录")])]),t._v(" "),s("p",[t._v("使用：")]),t._v(" "),s("p",[t._v("混入 "),s("code",[t._v("VisibilityExposureMixin")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _VisibilityListViewPageState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VisibilityListViewPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VisibilityExposureMixin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 "),s("code",[t._v("onObserve")]),t._v(" 中调用 "),s("code",[t._v("handleExposure")]),t._v(" 方法")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleExposure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n needExposeCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只有下标为 6 的 item 需要计算是否曝光")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" index "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n toExposeCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 满足条件，可以上报曝光了")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("debugPrint")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Exposure -- ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("index")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("最终看下效果吧，注意看红色视图和控制台的输出")]),t._v(" "),s("p",[t._v("曝光左下角 "),s("code",[t._v("ListView")]),t._v(" 中下标为 "),s("code",[t._v("6")]),t._v(" 的红色 "),s("code",[t._v("item")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202308261639314.gif",alt:""}})]),t._v(" "),s("p",[t._v("曝光左下角 "),s("code",[t._v("SliverGrid")]),t._v(" 中下标为 "),s("code",[t._v("6")]),t._v(" 的紫色 "),s("code",[t._v("item")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202308261639591.gif",alt:""}})]),t._v(" "),s("p",[t._v("Demo链接："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer/tree/main/example/lib/features/scene/visibility_demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("visibility_demo"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/135.a0916b00.js b/assets/js/135.a0916b00.js new file mode 100644 index 000000000..68926a052 --- /dev/null +++ b/assets/js/135.a0916b00.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[135],{486:function(t,e,r){"use strict";r.r(e);var _=r(14),v=Object(_.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"一、大事件"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#一、大事件"}},[t._v("#")]),t._v(" 一、大事件")]),t._v(" "),e("p",[t._v("2023年10月13日的那一天，发生了我职业生涯中的两件大事：")]),t._v(" "),e("h3",{attrs:{id:"_1、加入-flutter-组织"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、加入-flutter-组织"}},[t._v("#")]),t._v(" 1、加入 "),e("code",[t._v("Flutter")]),t._v(" 组织")]),t._v(" "),e("p",[t._v("经过 "),e("code",[t._v("@AlexV525")]),t._v(" 大佬的细心查验，我最终获得了他的推荐，并收到 "),e("code",[t._v("@Hixie")]),t._v(" 发来的加入 "),e("code",[t._v("Flutter")]),t._v(" 组织的邀请邮件，正式成为了该组织成员。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202310152349040.png",alt:"推荐"}})]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202310152354920.png",alt:"邀请"}})]),t._v(" "),e("h3",{attrs:{id:"_2、加入fluttercandies-组织"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、加入fluttercandies-组织"}},[t._v("#")]),t._v(" 2、加入"),e("code",[t._v("FlutterCandies")]),t._v(" 组织")]),t._v(" "),e("p",[t._v("我带着 "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),e("OutboundLink")],1),t._v(" 开源库加入到 "),e("code",[t._v("FlutterCandies")]),t._v(" 组织。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202310152354680.png",alt:"邀请"}})]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202310152354307.png",alt:"flutter_scrollview_observer"}})]),t._v(" "),e("p",[t._v("正所谓独乐乐不如众乐乐，我将这两个好消息告诉了移动端的同事们，并请他们每个人喝一杯下午茶 😄")]),t._v(" "),e("p",[t._v("现在回想起来，一切都好似梦幻般的在进行中，我竟然在这一天内加入到 "),e("code",[t._v("Flutter")]),t._v(" 和 "),e("code",[t._v("FlutterCandies")]),t._v(" 两大组织，简直太魔幻，那天我失眠了~")]),t._v(" "),e("h2",{attrs:{id:"二、两年时间"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#二、两年时间"}},[t._v("#")]),t._v(" 二、两年时间")]),t._v(" "),e("p",[t._v("这些荣誉让我不禁回想起这两年关于 "),e("code",[t._v("Flutter")]),t._v(" 的开发经历~")]),t._v(" "),e("h3",{attrs:{id:"_1、入门小白"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、入门小白"}},[t._v("#")]),t._v(" 1、入门小白")]),t._v(" "),e("p",[t._v("其实我也并不是完全小白，早到2018年年末就接触学习了 "),e("code",[t._v("Flutter")]),t._v(" 的相关知识，不过学完并没有机会去运用，平日里还是在痛苦的搞 "),e("code",[t._v("iOS")]),t._v(" 原生开发，加上项目是 "),e("code",[t._v("OC")]),t._v(" 与 "),e("code",[t._v("Swift")]),t._v(" 混编，导致日常代码无提示，编译慢，且造成电脑极其卡顿，无法同时做其它事情，效率低下，基于此种种原因，事业部最终决定转 "),e("code",[t._v("Flutter")]),t._v(" 来提升开发效率。")]),t._v(" "),e("p",[t._v("所以从2022年开始，我们就分配了使用 "),e("code",[t._v("Flutter")]),t._v(" 对现有业务进行重构的技术推动任务，就这样，我开始正式接触 "),e("code",[t._v("Flutter")]),t._v(" 框架，那时还需要花费大量时间才能完成一个页面~ 😂")]),t._v(" "),e("h3",{attrs:{id:"_2、维护开源库"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、维护开源库"}},[t._v("#")]),t._v(" 2、维护开源库")]),t._v(" "),e("p",[t._v("慢慢的，我们开始将 "),e("code",[t._v("Flutter")]),t._v(" 应用于项目新需求页面的研发，而在第一个 "),e("code",[t._v("Flutter")]),t._v(" 需求里要求视频列表页滚动停止后，位于指定偏移的影音视图能够自动播放，一上来就是高难度，经过摸索 "),e("code",[t._v("RenderObject")]),t._v(" 的相关知识，最终成功攻克。")]),t._v(" "),e("p",[t._v("类似效果：\n"),e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205291628769.gif",alt:""}})]),t._v(" "),e("p",[t._v("当然攻克需求难点不是最终目的，我一想到后面要用到类似功能时又要再写一遍 "),e("code",[t._v("RenderObject")]),t._v(" 相关的东西就头疼，于是做了一个决定，封装成 "),e("code",[t._v("Flutter")]),t._v(" 组件并开源！是的，这便是 "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),e("OutboundLink")],1),t._v(" 这个开源库的诞生背景。")]),t._v(" "),e("p",[t._v("后面需求提及的功能越来越复杂，我也不断去加强 "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),e("OutboundLink")],1),t._v(" 的功能，帮助我快速完成功能研发，我也在 "),e("code",[t._v("Flutter")]),t._v(" 开源的道路上越走越远~")]),t._v(" "),e("p",[t._v("截止到今天关于开源库 "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),e("OutboundLink")],1),t._v(" 有这三大功能点：")]),t._v(" "),e("ol",[e("li",[e("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer/wiki/1%E3%80%81%E7%9B%91%E5%90%AC%E6%BB%9A%E5%8A%A8%E8%A7%86%E5%9B%BE%E4%B8%AD%E6%AD%A3%E5%9C%A8%E6%98%BE%E7%A4%BA%E7%9A%84%E5%AD%90%E9%83%A8%E4%BB%B6",target:"_blank",rel:"noopener noreferrer"}},[t._v("监听滚动视图中正在显示的子部件"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer/wiki/2%E3%80%81%E6%BB%9A%E5%8A%A8%E5%88%B0%E6%8C%87%E5%AE%9A%E4%B8%8B%E6%A0%87%E4%BD%8D%E7%BD%AE",target:"_blank",rel:"noopener noreferrer"}},[t._v("滚动到指定下标位置"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_scrollview_observer/wiki/3%E3%80%81%E8%81%8A%E5%A4%A9%E4%BC%9A%E8%AF%9D",target:"_blank",rel:"noopener noreferrer"}},[t._v("聊天会话"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("相关技术文章有：")]),t._v(" "),e("ol",[e("li",[e("RouterLink",{attrs:{to:"/pages/0422cb/"}},[t._v("Flutter - 获取ListView当前正在显示的Widget信息")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/beb840/"}},[t._v("Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/cd4fd1/"}},[t._v("Flutter - 快速实现聊天会话列表的效果，完美💯")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/5f9bf6/"}},[t._v("Flutter - 船新升级😱支持观察第三方构建的滚动视图💪")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/15d73d/"}},[t._v("Flutter - 瀑布流交替播放视频 🎞")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/26b199/"}},[t._v("Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/326c98/"}},[t._v("Flutter - 滚动视图中的表单防遮挡 🗒")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/d18561/"}},[t._v("Flutter - 秒杀1/2曝光统计 📊")])],1)]),t._v(" "),e("h3",{attrs:{id:"_3、提交-pr"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3、提交-pr"}},[t._v("#")]),t._v(" 3、提交 "),e("code",[t._v("PR")])]),t._v(" "),e("p",[t._v("说起来也是机缘巧合，我当时学习 "),e("code",[t._v("iOS")]),t._v(" 逆向知识的时候因追求个性化，修改了 "),e("code",[t._v("LLDB")]),t._v(" 的提示符，导致我在相当长的一段时间内无法直接运行 "),e("code",[t._v("Flutter")]),t._v(" 项目，然后发现可以先跑原生项目，再 "),e("code",[t._v("Attach")]),t._v(" 去调试，靠着这种曲线救国的方式度日 😭")]),t._v(" "),e("p",[t._v("后面我实在受不了了，再加上过年期间需求不那么紧急，就决定对 "),e("code",[t._v("flutter_tools")]),t._v(" 进行一番探索，最终找到问题所在，并对原逻辑进行调整，支持自定义 "),e("code",[t._v("LLDB")]),t._v(" 提示符的场景，接着迈出了 "),e("code",[t._v("Flutter PR")]),t._v(" 的第一步！")]),t._v(" "),e("p",[t._v("截止到今天关于 "),e("code",[t._v("Flutter PR")]),t._v(" 的相关总结技术文章有：")]),t._v(" "),e("ol",[e("li",[e("RouterLink",{attrs:{to:"/pages/5c4b50/"}},[t._v("Flutter - 我给官方提PR，解决run命令卡住问题 😃")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/4517cb/"}},[t._v("Flutter - 探索run命令到底做了什么 🤔")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/6caa6f/"}},[t._v("Flutter - 引擎调试（iOS篇）🛠")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/614da2/"}},[t._v("Flutter - 引擎调试bug到提交PR实战 🐞")])],1)]),t._v(" "),e("p",[t._v("接下来在整个 "),e("code",[t._v("2023")]),t._v(" 年里，我的日常开源活动就是维护 "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),e("OutboundLink")],1),t._v(" 这个开源组件，写文章，以及提 "),e("code",[t._v("Flutter PR")]),t._v(" ☕。")]),t._v(" "),e("h2",{attrs:{id:"三、结语"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#三、结语"}},[t._v("#")]),t._v(" 三、结语")]),t._v(" "),e("p",[t._v("好了，回忆与感慨到此结束，加入组织并不是终点，而是一个美好的开始。")]),t._v(" "),e("p",[t._v("最后再提一下 "),e("code",[t._v("scrollview_observer")]),t._v(" 的新地址： "),e("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("希望大家能够多多支持，点个 "),e("code",[t._v("Star")]),t._v("，我是 "),e("code",[t._v("LinXunFeng")]),t._v("，本篇到此结束，我们下次再见！")])])}),[],!1,null,null,null);e.default=v.exports}}]); \ No newline at end of file diff --git a/assets/js/136.af28838b.js b/assets/js/136.af28838b.js new file mode 100644 index 000000000..2f2c0d287 --- /dev/null +++ b/assets/js/136.af28838b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[136],{487:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("相信大家都很熟悉微信的通讯录列表功能，而实现该效果可能会直接选用现有的已封装好的开源库，比如："),s("a",{attrs:{href:"https://github.com/flutterchina/azlistview",target:"_blank",rel:"noopener noreferrer"}},[t._v("azlistview"),s("OutboundLink")],1),t._v("，这些库都很优秀，能快速帮助我们完成功能研发，但是会有一些小问题，比如：")]),t._v(" "),s("ul",[s("li",[t._v("依赖了一些其它第三方开源库（如："),s("code",[t._v("scrollable_positioned_list")]),t._v("），但限定的版本可能与自己项目中的冲突")]),t._v(" "),s("li",[t._v("可能不支持一些刷新组件（如："),s("code",[t._v("easy_refresh")]),t._v("）")]),t._v(" "),s("li",[t._v("功能和布局的自定义受限（如：无法自定义 "),s("code",[t._v("Header")]),t._v(" 和 "),s("code",[t._v("Footer")]),t._v("，列表 "),s("code",[t._v("item")]),t._v(" 无复选功能）")])]),t._v(" "),s("p",[t._v("更要命的是，如果哪天产品实然要求能在 "),s("code",[t._v("ListView")]),t._v(" 模式和 "),s("code",[t._v("GridView")]),t._v(" 模式之间切换显示，就真的想寄了。 😭")]),t._v(" "),s("p",[t._v("所以说保持使用 "),s("code",[t._v("Flutter")]),t._v(" 官方提供的滚动视图才是最可靠的，灵活度高，那本篇文章就跟着我的步伐，一起来实战快速手搓一个微信通讯录列表吧。")]),t._v(" "),s("p",[t._v("先来看看效果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202310291925983.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"二、难点分析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、难点分析"}},[t._v("#")]),t._v(" 二、难点分析")]),t._v(" "),s("p",[t._v("上面的效果一眼看下来呢，涉及到的难点就是如下两个：")]),t._v(" "),s("ol",[s("li",[t._v("数据定位，防跳动")]),t._v(" "),s("li",[t._v("字母列表交互")])]),t._v(" "),s("h3",{attrs:{id:"_1、数据定位"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、数据定位"}},[t._v("#")]),t._v(" 1、数据定位")]),t._v(" "),s("p",[t._v("滑动右侧字母列表，跳转到对应字母的数据模块位置时，需要考虑数据长度问题，如果数据量够，那数据内容自然是从顶部开始展示，但如果数据量不够，则以列表的最大偏移去显示，说白了就是显示列表的底部数据，且保持页面不动，这里就需要考虑如何避免跳动问题了。")]),t._v(" "),s("p",[t._v("不过我们今天的主角 "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1),t._v(" 已经帮我们处理了这个跳动问题，所以这一点就不再是难点，我们在代码中尽管去调 "),s("code",[t._v("jumpTo")]),t._v(" 就可以了。")]),t._v(" "),s("h3",{attrs:{id:"_2、字母列表"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、字母列表"}},[t._v("#")]),t._v(" 2、字母列表")]),t._v(" "),s("p",[t._v("在手指触摸字母列表视图时，需要实时返回所对应的下标，以及字母视图所对应的偏移，这样才能使游标视图悬浮到对应位置。")]),t._v(" "),s("p",[t._v("手指触摸可以使用 "),s("code",[t._v("GestureDetector")]),t._v(" 这个官方组件，该组件提供了一些触摸回调，比如 "),s("code",[t._v("onVerticalDragUpdate")]),t._v("，我们可以通过回调里的 "),s("code",[t._v("details")]),t._v(" 参数拿到此时手指在列表中的偏移量，直接通过 "),s("code",[t._v("details.localPosition.dy")]),t._v(" 就可以取到了。")]),t._v(" "),s("p",[t._v("重点来了，怎么根据上述取到的手指偏移量，知道此时对应的下标呢？🧐")]),t._v(" "),s("p",[t._v("转换一下思路，我们可以通过 "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("flutter_scrollview_observer"),s("OutboundLink")],1),t._v(" 来获取当前显示的第一个 "),s("code",[t._v("item")]),t._v("，如果不干预计算，那第一个 "),s("code",[t._v("item")]),t._v(" 肯定永远是 "),s("code",[t._v("A")]),t._v("，所以我们还需要实时指定一个开始计算的偏移量，就可以正常获取到我们理想的第一个正在显示 "),s("code",[t._v("item")]),t._v(" 的数据了。")]),t._v(" "),s("p",[t._v("接下来让我们一起来开始实战吧~")]),t._v(" "),s("h2",{attrs:{id:"三、实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、实战"}},[t._v("#")]),t._v(" 三、实战")]),t._v(" "),s("h3",{attrs:{id:"_1、联系人数据"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、联系人数据"}},[t._v("#")]),t._v(" 1、联系人数据")]),t._v(" "),s("p",[t._v("由于我们的重点在于如何处理视图显示上，所以数据我们进行简单生成，真实数据如何处理相信难不倒大家。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 联系人模型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListContactModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 章节（这里存放的是对应的字母）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" section"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 该字母下的所有联系人姓名")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListContactModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("section"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 存放联系人模型的数组")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListContactModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" contactList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 生成联系人数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generateContactData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以 ASCII码 的方式去遍历生成 A-Z 的数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Utf8Codec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("encode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"A"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" z "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Utf8Codec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("encode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Z"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("first"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n int pointer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("while")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pointer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" pointer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<=")]),t._v(" z"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" character "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Utf8Codec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("decode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint8List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fromList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("pointer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n contactList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListContactModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n section"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" character"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为测试数据量不够的情况，所以这里设置了最大生成 8 个元素")]),t._v("\n names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Random")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextInt")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("character")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("index")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n pointer"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、页面布局"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、页面布局"}},[t._v("#")]),t._v(" 2、页面布局")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 滚动视图对应的 controller")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),t._v(" scrollController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScrollController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// SliverViewObserver 对应的 controller")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里需要传入 scrollController，这样 observerController 的 jumpTo 方法才能生效，内部的跳转功能就是用 scrollController 去实现的")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 存放字母下标和所对应的 sliver 的 BuildContext")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" sliverContextMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("联系人滚动视图使用 "),s("code",[t._v("CustomScrollView")]),t._v(" 去实现，"),s("code",[t._v("slivers")]),t._v(" 里存放了所有字母对应的联系人列表 "),s("code",[t._v("SliverList")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 观察滚动视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回 字母模块 所对应的所有 sliver 的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为我们要观察所有列表，所以这里返回的是全部")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" sliverContextMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("values"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 联系人滚动视图")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contactList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapIndexed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 悬浮游标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildCursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字母列表视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildIndexBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("构建每一个字母下的联系人列表 "),s("code",[t._v("SliverList")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListContactModel")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 没有数据，则返回 SliverToBoxAdapter")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" names "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 SliverList（当然你可以创建 SliverGrid）")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 存放 SliverList 对应的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sliverContextMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sliverContextMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回 item 视图，这个没什么特别的")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" names"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 flutter_sticky_header 这个库来实现字母悬浮视图")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverStickyHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n header"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("44.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fromARGB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("255")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("243")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("244")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("246")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("symmetric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("horizontal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("16.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("centerLeft"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("section"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextStyle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black54"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3、字母列表"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3、字母列表"}},[t._v("#")]),t._v(" 3、字母列表")]),t._v(" "),s("p",[t._v("构建字母列表视图的主要代码如下：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 字母列表视图的父视图的key")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 服务于后面获取字母视图偏移量")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" indexBarContainerKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GlobalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 从联系人数据里取出所有的字母")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" symbols "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" contactList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("section"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildIndexBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" indexBarContainerKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListIndexBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 父视图的key，有印象即可，下面会用到")]),t._v("\n parentKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" indexBarContainerKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字母数据")]),t._v("\n symbols"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" symbols"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onSelectionUpdate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cursorOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始触摸以及触摸滑动 的处理回调")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onSelectionEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 结束/取消 触摸 的处理回调")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("上面的两个处理回调是用来更新游标视图的，所以这里先不讲它。")]),t._v(" "),s("p",[t._v("接着来讲讲 "),s("code",[t._v("AzListIndexBar")]),t._v(" 的重点代码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 观察滚动视图所需的控制器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 记录当前手指所在的偏移量")]),t._v("\ndouble observeOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字母列表视图的整体布局")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ListViewObserver 用来观察 ListView 滚动视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 被观察的滚动视图")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 动态返回当前手指所在的偏移量，用于指定开始计算的偏移，使观察可以得到理想的第一个 item")]),t._v("\n dynamicLeadingOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" observeOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触摸监听")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GestureDetector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 按下")]),t._v("\n onVerticalDragDown"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _onGestureHandler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 移动")]),t._v("\n onVerticalDragUpdate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _onGestureHandler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取消")]),t._v("\n onVerticalDragCancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _onGestureEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 放开")]),t._v("\n onVerticalDragEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _onGestureEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("从简单的开始讲，手指放开后，需要隐藏游标，但这个相对于字母列表视图来说是份外之事，所以回调告知即可。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 结束/取消 触摸")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_onGestureEnd")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接告诉外部，结束滑动了")]),t._v("\n widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onSelectionEnd"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("手指按下和滑动的时候，需要显示并更新游标上的标题，所以在字母列表视图侧，可以提供一些数据给到外部")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理开始触摸以及触摸滑动")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 该方法是核心")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_onGestureHandler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" details"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// details 的类型有可能是 DragDownDetails，也有可能是 DragUpdateDetails")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这两个类型没有父类，不过都有一个相同类型的 localPosition，存放了当前手指在列表上的偏移量，所以这里为了方便，类型声明为 dynamic")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("details "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DragUpdateDetails")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" details "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DragDownDetails")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n observeOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" details"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localPosition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触发一次观察")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 await 就可以在该处拿到观察结果")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchOnceObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在上面的 ListViewObserver 中，我们并没有实现 onObserve 和 onObserveAll 回调")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在默认情况下，如果回调没有实现，则不会去观察，所以在这里设置了不依赖回调的实现，直接观察")]),t._v("\n isDependObserveCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observeResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("observeResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 观察结果为null，说明此次的 第一个item 没有发生变化，比如：上一次观察时为字母A，此次观察还是字母A")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认内部对观察结果有做对比处理，如果你希望每次观察不用对比，直接将数据返回，则可以在上述的 dispatchOnceObserve 方法中给 isForce 设置为 true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("observeResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 第一个item 的数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstChildModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" observeResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstChildModel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个item的下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstChildIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" firstChildModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出字母视图对应的 RenderObject")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstChildRenderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" firstChildModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("renderObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算当前字母的中心点相对于父视图左上角的偏移量，我们主要拿 y 值")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ancestor: 传入祖先视图的 RenderObject 做为参考坐标系")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" firstChildRenderObjOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" firstChildRenderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("localToGlobal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Offset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ancestor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parentKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentContext"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("findRenderObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算好后，通过 onSelectionUpdate 回调将数据返出去")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" cursorOffset "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Offset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n firstChildRenderObjOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n firstChildRenderObjOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" firstChildModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onSelectionUpdate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n firstChildIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cursorOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_4、更新游标"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4、更新游标"}},[t._v("#")]),t._v(" 4、更新游标")]),t._v(" "),s("p",[t._v("现在我们回头来看看两个触摸处理结果回调")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 游标的数据模型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 字母")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 字母中心点的偏移量")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Offset")]),t._v(" offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 存放游标的数据模型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" cursorInfo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildIndexBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListIndexBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n parentKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" indexBarContainerKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n symbols"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" symbols"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onSelectionUpdate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cursorOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新游标数据，来显示游标")]),t._v("\n cursorInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" symbols"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cursorOffset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出字母对应的联系人列表视图 SliverList 的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" sliverContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sliverContextMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sliverContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 跳到对应的字母章节的第一个 item 的位置")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// jumpTo 方法内部处理了跳动问题，尽管调用即可！")]),t._v("\n observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("jumpTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" sliverContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onSelectionEnd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 清除游标数据，即隐藏游标")]),t._v("\n cursorInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("构建游标视图代码")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildCursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据 cursorInfo 数据的变化来局部实现")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueListenableBuilder")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n valueListenable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cursorInfo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursorInfoModel")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n double top "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n double right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indexBarWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 没有游标数据，隐藏")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 有游标数据，显示 AzListCursor 视图")]),t._v("\n double titleSize "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("80")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据当前字母视图的中心点偏移量 y 值，减去游标视图的高度，来得出游标的顶部偏移量")]),t._v("\n top "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" titleSize "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AzListCursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" titleSize"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("游标视图 "),s("code",[t._v("AzListCursor")]),t._v(" 里没什么重要的内容，所以不讲解了，大家可以随意发挥。")]),t._v(" "),s("p",[t._v("Demo链接："),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer/tree/main/example/lib/features/scene/azlist_demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("azlist_demo"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/137.b1bc3b13.js b/assets/js/137.b1bc3b13.js new file mode 100644 index 000000000..8f12b25d4 --- /dev/null +++ b/assets/js/137.b1bc3b13.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[137],{488:function(t,s,a){"use strict";a.r(s);var e=a(14),r=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("目前我们的项目是按照 "),s("code",[t._v("Flutter")]),t._v(" 官方文档 "),s("a",{attrs:{href:"https://docs.flutter.dev/add-to-app/android/project-setup?tab=module-source",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://docs.flutter.dev/add-to-app/android/project-setup?tab=module-source"),s("OutboundLink")],1),t._v("，以源码依赖的方式集成到原生项目，在集成 "),s("code",[t._v("Shorebird")]),t._v(" 实现热更新时，需要我们将源码依赖的方式调整成二进制依赖。")]),t._v(" "),s("p",[t._v("安卓端的改动还是很简单的，一路下来没怎么碰壁，接下来一起来看看如何操作吧")]),t._v(" "),s("h2",{attrs:{id:"二、shorebird-初始化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、shorebird-初始化"}},[t._v("#")]),t._v(" 二、Shorebird 初始化")]),t._v(" "),s("p",[t._v("本文以 "),s("code",[t._v("Mac")]),t._v(" 环境为例，如果你是 "),s("code",[t._v("Windows")]),t._v(" 用户，请按官方文档去操作: "),s("a",{attrs:{href:"https://docs.shorebird.dev",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://docs.shorebird.dev"),s("OutboundLink")],1)]),t._v(" "),s("blockquote",[s("p",[t._v("该部分内容只需要一开始没有环境和相应的文件时去操作一次")])]),t._v(" "),s("h3",{attrs:{id:"安装-cli"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装-cli"}},[t._v("#")]),t._v(" 安装 CLI")]),t._v(" "),s("p",[t._v("打开终端，执行以下命令")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("curl")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--proto")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'=https'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--tlsv1.2")]),t._v(" https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-sSf")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bash")]),t._v("\n")])])]),s("p",[t._v("重启终端，输入 "),s("code",[t._v("shorebird")]),t._v(" 即可看到相应的命令输出")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("$ shorebird\nThe shorebird command-line tool\n\nUsage: shorebird "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("arguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\nGlobal options:\n-h, "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v(" Print this usage information.\n "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--version")]),t._v(" Print the current version.\n-v, --"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("no-"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("verbose Noisy logging, including all shell commands executed.\n\nAvailable commands:\n cache Manage the Shorebird cache.\n doctor Show information about the installed tooling.\n flutter Manage your Shorebird Flutter installation.\n init Initialize Shorebird.\n login Login as a new Shorebird user.\n login:ci Login as a CI user.\n "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("logout")]),t._v(" Logout of the current Shorebird user\n patch Manage patches "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" a specific release "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" Shorebird.\n preview Preview a specific release on a device.\n release Manage your Shorebird app releases.\n upgrade Upgrade your copy of Shorebird.\n\nRun "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shorebird help "')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("more")]),t._v(" information about a command.\n")])])]),s("h3",{attrs:{id:"登录"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#登录"}},[t._v("#")]),t._v(" 登录")]),t._v(" "),s("p",[t._v("通过如下命令，登录你的 "),s("code",[t._v("Shorebird")]),t._v(" 账号")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("shorebird login\n")])])]),s("h3",{attrs:{id:"选择-flutter-版本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#选择-flutter-版本"}},[t._v("#")]),t._v(" 选择 "),s("code",[t._v("Flutter")]),t._v(" 版本")]),t._v(" "),s("p",[t._v("你可以查看当前 "),s("code",[t._v("Shorebird")]),t._v(" 支持哪些 "),s("code",[t._v("Flutter")]),t._v(" 版本")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("shorebird flutter versions list\n")])])]),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("$ shorebird flutter versions list\n📦 Flutter Versions\n✓ 3.13.9\n 3.13.8\n 3.13.7\n 3.13.6\n 3.13.5\n 3.13.4\n 3.13.3\n 3.13.2\n 3.13.1\n 3.13.0\n 3.10.7\n 3.10.6\n 3.10.5\n 3.10.4\n 3.10.3\n 3.10.2\n 3.10.1\n 3.10.0\n")])])]),s("p",[t._v("如我现在需要用到 "),s("code",[t._v("Flutter 3.13.9")]),t._v(" 版本，则输入如下命令")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("$ shorebird flutter versions use "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.13")]),t._v(".9\n")])])]),s("h3",{attrs:{id:"flutter-模块初始化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flutter-模块初始化"}},[t._v("#")]),t._v(" Flutter 模块初始化")]),t._v(" "),s("p",[t._v("在你的 "),s("code",[t._v("Flutter")]),t._v(" 项目下执行如下命令")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("shorebird init\n")])])]),s("p",[t._v("该命令会生成在项目根目录生成 "),s("code",[t._v("shorebird.yaml")]),t._v(" 文件")]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# shorebird.ymal的内容")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("app_id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" xxxxxxxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("xxxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("xxxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("xxxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v("xxxxxxxxxx\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# auto_update: false")]),t._v("\n")])])]),s("p",[t._v("以及修改 "),s("code",[t._v("pubspec.yaml")])]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[t._v(" "),s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("assets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("-")]),t._v(" shorebird.yaml\n")])])]),s("h2",{attrs:{id:"三、原生项目改造"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、原生项目改造"}},[t._v("#")]),t._v(" 三、原生项目改造")]),t._v(" "),s("blockquote",[s("p",[t._v("以下的相关修改是以我们项目来写的（"),s("code",[t._v(".kts")]),t._v("），如果你的跟我的不一样，可以看一下文档："),s("a",{attrs:{href:"https://docs.shorebird.dev/guides/hybrid-app/android",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://docs.shorebird.dev/guides/hybrid-app/android"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"build-gradle-kts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#build-gradle-kts"}},[t._v("#")]),t._v(" "),s("code",[t._v("build.gradle.kts")])]),t._v(" "),s("p",[t._v("新增本地二进制依赖")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("buildscript {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" repositories {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" \n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // 本地依赖Flutter包\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven(url = "../../flutter_module/release")\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven(url = "https://download.shorebird.dev/download.flutter.io")\n')])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" \n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),t._v("}\n\nallprojects {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" repositories {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" \n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // 本地依赖Flutter包\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven(url = "../../flutter_module/release")\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven(url = "https://download.shorebird.dev/download.flutter.io")\n')])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" \n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),t._v("}\n")])])]),s("h3",{attrs:{id:"settings-gradle-kts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#settings-gradle-kts"}},[t._v("#")]),t._v(" "),s("code",[t._v("settings.gradle.kts")])]),t._v(" "),s("p",[t._v("注释掉本地源码依赖")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[s("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" evaluate(new File(\n")]),s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" settingsDir,\n")]),s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' "../flutter_module/.android/include_flutter.groovy"\n')]),s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ))\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" //evaluate(new File(\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // settingsDir,\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' // "../flutter_module/.android/include_flutter.groovy"\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" //))\n")])])])])]),s("h3",{attrs:{id:"app-build-gradle-kts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#app-build-gradle-kts"}},[t._v("#")]),t._v(" "),s("code",[t._v("app/build.gradle.kts")])]),t._v(" "),s("p",[t._v("注释掉本地源码依赖，新增本地二进制依赖")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("dependencies {\n"),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // Flutter源码依赖\n")])]),s("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[s("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" implementation(project(LocalLib.flutter)) \n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // implementation(project(LocalLib.flutter))\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" // Flutter二进制依赖\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' releaseImplementation("com.lxf.flutter_modules:flutter_release:1.0")\n')])]),t._v("}\n")])])]),s("h2",{attrs:{id:"四、创建-shorebird-release"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、创建-shorebird-release"}},[t._v("#")]),t._v(" 四、创建 Shorebird Release")]),t._v(" "),s("p",[t._v("打发布包的时候操作，在 "),s("code",[t._v("Flutter")]),t._v(" 工程目录下执行")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" xx/xx/flutter_modules\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 7.0.0+320: 大版本号+小版本号")]),t._v("\nshorebird release aar --release-version "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7.0")]),t._v(".0+320\n")])])]),s("blockquote",[s("p",[t._v("该命令内部会去执行 "),s("code",[t._v("flutter build aar --no-debug --no-profile ...")]),t._v("，并且使用的是 "),s("code",[t._v("Shorebird")]),t._v(" 魔改的 "),s("code",[t._v("Flutter")]),t._v(" 引擎！")])]),t._v(" "),s("p",[t._v("版本号可以在如下路径的文件中查看")]),t._v(" "),s("div",{staticClass:"language-xml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-xml"}},[s("code",[t._v("# 路径: app/src/main/AndroidManifest.xml\n# 小版本号: android:versionCode\n# 大版本号: android:versionName\n\n"),s("span",{pre:!0,attrs:{class:"token prolog"}},[t._v('')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("manifest")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("xmlns:")]),t._v("android")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("http://schemas.android.com/apk/res/android"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("xmlns:")]),t._v("tools")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("http://schemas.android.com/tools"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("package")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("com.lxf.flutter_modules"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("versionCode")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("320"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("android:")]),t._v("versionName")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("7.0.0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n...\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[s("code",[t._v("ShoreBird")]),t._v(" 的内部逻辑会去以这个版本号组合，向服务器请求判断是否存在相应版本的相关补丁！")]),t._v(" "),s("p",[t._v("执行完成后，在 "),s("code",[t._v("Shorebird")]),t._v(" 控制台上可以看到相应的项")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401071836372.png",alt:""}})]),t._v(" "),s("p",[t._v("在命令执行前，请确保不存在 "),s("code",[t._v("7.0.0+320")]),t._v(" 的 "),s("code",[t._v("Release")]),t._v("，如果有的话，请先删除")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401071836142.png",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"五、创建-shorebird-patch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、创建-shorebird-patch"}},[t._v("#")]),t._v(" 五、创建 Shorebird Patch")]),t._v(" "),s("p",[t._v("紧急修复线上包的bug时操作，在 "),s("code",[t._v("Flutter")]),t._v(" 工程目录下执行")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("shorebird patch aar --release-version "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("7.0")]),t._v(".0+320\n")])])]),s("p",[t._v("注：版本号与上述的 "),s("code",[t._v("release")]),t._v(" 命令中使用的要保持一致！")]),t._v(" "),s("p",[t._v("执行完成后，在 "),s("code",[t._v("Shorebird")]),t._v(" 控制台上点击对应的 "),s("code",[t._v("Release")]),t._v(" 项，进去后可以看到相应的补丁")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401071837938.png",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"六、热更新验证"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、热更新验证"}},[t._v("#")]),t._v(" 六、热更新验证")]),t._v(" "),s("ol",[s("li",[t._v("未打 "),s("code",[t._v("patch")]),t._v(" 时，请以 "),s("code",[t._v("release")]),t._v(" 模式运行原生工程（在 "),s("code",[t._v("Active Build Variant")]),t._v(" 的下拉选项中选择 "),s("code",[t._v("release")]),t._v("）")]),t._v(" "),s("li",[t._v("关闭 "),s("code",[t._v("App")])]),t._v(" "),s("li",[t._v("打 "),s("code",[t._v("patch")]),t._v(" 后，重新打开 "),s("code",[t._v("App")]),t._v("，关闭 "),s("code",[t._v("App")]),t._v(" 再打开 "),s("code",[t._v("App")]),t._v("，即可看到变化")])]),t._v(" "),s("p",[t._v("如果补丁没有生效，可以在 "),s("code",[t._v("Logcat")]),t._v(" 内检测相关输出，成功还是失败可以直接看后两句，如下两种情况的输出：")]),t._v(" "),s("p",[t._v("成功:")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("INFO:shorebird.cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("109")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Shorebird updater: no active patch.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("INFO:shorebird.cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("113")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Starting Shorebird update\nupdater::network: Sending patch check request: PatchCheckRequest "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app_id: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"')]),t._v(", channel: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stable"')]),t._v(", release_version: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"7.0.0+320"')]),t._v(", patch_number: None, platform: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"android"')]),t._v(", arch: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"aarch64"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nupdater::updater: Patch "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" successfully installed.\nupdater::updater: Update thread finished with status: Update installed\n")])])]),s("p",[t._v("失败:")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("INFO:shorebird.cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("109")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Shorebird updater: no active patch.\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("INFO:shorebird.cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("113")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Starting Shorebird update\nupdater::network: Sending patch check request: PatchCheckRequest "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app_id: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"')]),t._v(", channel: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stable"')]),t._v(", release_version: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"7.0.0+320"')]),t._v(", patch_number: None, platform: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"android"')]),t._v(", arch: "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"aarch64"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nupdater::updater: Update failed: failed to fill whole buffer\nupdater::updater: Update thread finished with status: Update had error\n")])])]),s("p",[t._v("失败的时候，看一下 "),s("code",[t._v("PatchCheckRequest")]),t._v(" 后面的请求参数输出，一般失败都是因为这里的参数错误才导致。")]),t._v(" "),s("h2",{attrs:{id:"七、脚本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#七、脚本"}},[t._v("#")]),t._v(" 七、脚本")]),t._v(" "),s("p",[t._v("由于我们日常研发还是使用的是源码依赖的方式，只会在打最终测试包时才需要去做上述的调整操作，所以这里用我比较熟悉的 "),s("code",[t._v("Python")]),t._v(" 去制作了简易的脚本，并结合 "),s("code",[t._v("Jenkins")]),t._v(" 来辅助完成这种万年不变的无聊步骤")]),t._v(" "),s("p",[t._v("脚本已上传至 "),s("code",[t._v("Github")]),t._v(": "),s("a",{attrs:{href:"https://github.com/LinXunFeng/script_box/tree/main/flutter",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/script_box/tree/main/flutter"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("看官可自取修改~")]),t._v(" "),s("h3",{attrs:{id:"switch-flutter-integrate-py"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#switch-flutter-integrate-py"}},[t._v("#")]),t._v(" switch_flutter_integrate.py")]),t._v(" "),s("blockquote",[s("p",[t._v("切换 "),s("code",[t._v("Flutter")]),t._v(" 项目的集成方式")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 二进制依赖")]),t._v("\npython switch_flutter_integrate.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'binary'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'android'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 源码依赖")]),t._v("\npython switch_flutter_integrate.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'source'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'android'")]),t._v(" \n")])])]),s("h3",{attrs:{id:"shorebird-py"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shorebird-py"}},[t._v("#")]),t._v(" shorebird.py")]),t._v(" "),s("blockquote",[s("p",[t._v("自动获取版本号，并执行 "),s("code",[t._v("Shorebird")]),t._v(" 相关命令")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# release")]),t._v("\npython shorebird.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" release "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" android\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# patch")]),t._v("\npython shorebird.py "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" patch "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" android\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/138.55aa341a.js b/assets/js/138.55aa341a.js new file mode 100644 index 000000000..58c7d1f7a --- /dev/null +++ b/assets/js/138.55aa341a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[138],{489:function(t,e,s){"use strict";s.r(e);var a=s(14),r=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"一、概述"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),e("p",[t._v("关于 "),e("code",[t._v("Shorebird")]),t._v(" 的初始化内容可以在上一篇《"),e("a",{attrs:{href:"/pages/a0e176"}},[t._v("Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）")]),t._v("》中查看，这里就不再赘述了。")]),t._v(" "),e("p",[e("code",[t._v("Shorebird")]),t._v(" 官方文档上对于 "),e("code",[t._v("iOS")]),t._v(" 混编方案集成热更新的介绍不算详细，只能说点明了要点，指明了方向。")]),t._v(" "),e("p",[t._v("本文将根据实际的项目应用情况做出集成调整，并补充说明正确的补丁验证方案。")]),t._v(" "),e("h2",{attrs:{id:"二、踩坑"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#二、踩坑"}},[t._v("#")]),t._v(" 二、踩坑")]),t._v(" "),e("p",[e("code",[t._v("Shorebird")]),t._v(" 文档里指出需要我们使用类似 "),e("code",[t._v("Flutter")]),t._v(" 官方文档里 "),e("code",[t._v("Option B - Embed frameworks in Xcode")]),t._v(" 的方式去集成 "),e("code",[t._v("Flutter")]),t._v(" 模块。")]),t._v(" "),e("blockquote",[e("p",[t._v("关于 "),e("code",[t._v("Flutter")]),t._v(" 官方文档指出的各种集成方式可以查看: "),e("a",{attrs:{href:"https://docs.flutter.dev/add-to-app/ios/project-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://docs.flutter.dev/add-to-app/ios/project-setup"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("具体的步骤就是：")]),t._v(" "),e("ol",[e("li",[t._v("先注释掉原来的 "),e("code",[t._v("Option A")]),t._v(" 集成方式的相关配置代码")]),t._v(" "),e("li",[t._v("执行 "),e("code",[t._v("Shorebird Release")]),t._v(" 去构建对应的所有 "),e("code",[t._v("xcframework")]),t._v(" 文件。（"),e("code",[t._v("xcframework")]),t._v(" 文件包括了 "),e("code",[t._v("Flutter.xcframework")]),t._v(" 和 "),e("code",[t._v("App.xcframework")]),t._v("，以及插件依赖的原生第三方库对应的 "),e("code",[t._v("xcframework")]),t._v("）")]),t._v(" "),e("li",[t._v("将所有构建完成的 "),e("code",[t._v("xcframework")]),t._v(" 拖到 "),e("code",[t._v("Build Phases")]),t._v(" 中的 "),e("code",[t._v("Embed Frameworks")]),t._v(" 内。")]),t._v(" "),e("li",[t._v("将 "),e("code",[t._v("xcframework")]),t._v(" 的所在目录路径配置到 "),e("code",[t._v("Framework Search Paths")]),t._v("。")]),t._v(" "),e("li",[t._v("配置 "),e("code",[t._v("xcframework")]),t._v(" 的 "),e("code",[t._v("Embed")]),t._v(" 模式，静态库必须选 "),e("code",[t._v("Do Not Embed")]),t._v("，动态库必须选 "),e("code",[t._v("Embed & Sign")]),t._v("。")])]),t._v(" "),e("p",[t._v("因为 "),e("code",[t._v("Option A - Embed with CocoaPods and the Flutter SDK")]),t._v(" 的方式只需要简单的配置 "),e("code",[t._v("Podfile")]),t._v(" 就可以集成 "),e("code",[t._v("Flutter")]),t._v(" 模块，所以相信大家在一般情况下都是会选择 "),e("code",[t._v("Option A")]),t._v(" 的方式。很明显，要改成 "),e("code",[t._v("Option B")]),t._v(" 需要我们大改特改。")]),t._v(" "),e("p",[t._v("改成 "),e("code",[t._v("Option B")]),t._v(" 这种方式有以下几点问题：")]),t._v(" "),e("h3",{attrs:{id:"_1、vendored-frameworks-缺失"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、vendored-frameworks-缺失"}},[t._v("#")]),t._v(" 1、"),e("code",[t._v("vendored_frameworks")]),t._v(" 缺失")]),t._v(" "),e("p",[t._v("如果你依赖的 "),e("code",[t._v("Flutter")]),t._v(" 插件依赖了原生第三方的二进制包，如 "),e("code",[t._v("realm")]),t._v("，在它的 "),e("code",[t._v("podspec")]),t._v(" 文件是这样声明的 "),e("code",[t._v("s.vendored_frameworks = 'realm_dart.xcframework'")]),t._v("，那你会发现在最终构建完成的 "),e("code",[t._v("xcframework")]),t._v(" 的目录里会缺少这些 "),e("code",[t._v("vendored_frameworks")]),t._v("。")]),t._v(" "),e("p",[t._v("相关的 "),e("code",[t._v("issue")]),t._v(": "),e("a",{attrs:{href:"https://github.com/flutter/flutter/issues/125530",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/issues/125530"),e("OutboundLink")],1),t._v("。")]),t._v(" "),e("p",[t._v("因为 "),e("code",[t._v("Option B")]),t._v(" 是二进制依赖，所以在编译的时候并不会报任何错误，等你 "),e("code",[t._v("App")]),t._v(" 运行起来进入一些相关场景，使用到了对应的第三方功能时就会直接来个找不到符号的错误，如：")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("Failed to lookup symbol "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'native_method_signature'")]),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(":")]),t._v(" dlsym"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0xa47e7c10, native_method_signature"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(": symbol not found\n")])])]),e("p",[t._v("接着就是闪退，可想而知这得多吓人！")]),t._v(" "),e("h3",{attrs:{id:"_2、重复编译"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、重复编译"}},[t._v("#")]),t._v(" 2、重复编译")]),t._v(" "),e("p",[e("code",[t._v("vendored_frameworks")]),t._v(" 缺失的问题我通过脚本解决了，但是还有另一个问题，这些 "),e("code",[t._v("xcframework")]),t._v(" 中也有可能出现涵盖你原来的原生工程里依赖的第三方包，比如，"),e("code",[t._v("Flutter")]),t._v(" 的插件用到了 "),e("code",[t._v("FMDB")]),t._v("，生成的 "),e("code",[t._v("xcframework")]),t._v(" 中就会包含 "),e("code",[t._v("FMDB.xcframework")]),t._v("，而你的原生工程本来就有依赖 "),e("code",[t._v("FMDB")]),t._v("，这个时候编译，"),e("code",[t._v("Xcode")]),t._v(" 就会告诉你重复了，编译不通过，报错内容如下：")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("Showing Recent Messages\nMultiple commands produce "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/Users/lxf/Library/Developer/Xcode/DerivedData/xxx.app/Frameworks/FMDB.framework'")]),t._v("\n")])])]),e("p",[t._v("如果是你，你选择留下哪个呢？")]),t._v(" "),e("ul",[e("li",[t._v("如果你选择了 "),e("code",[t._v("Flutter")]),t._v(" 帮你生成的 "),e("code",[t._v("FMDB.xcframework")]),t._v("，你就得去处理其它原生第三方依赖的 "),e("code",[t._v("pod 'FMDB'")]),t._v("，假如此时原生工程里的一些第三方库或私有库也依赖 "),e("code",[t._v("FMDB")]),t._v("，那你要处理这些库可就太麻烦了。")]),t._v(" "),e("li",[t._v("如果你选择使用 "),e("code",[t._v("pod 'FMDB'")]),t._v(" 的方式，那你只需要去判断原生工程里是否有对应的依赖，有的话就不再声明依赖，这种还好。")])]),t._v(" "),e("h3",{attrs:{id:"_3、静态库与动态库"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3、静态库与动态库"}},[t._v("#")]),t._v(" 3、静态库与动态库")]),t._v(" "),e("p",[t._v("生成的 "),e("code",[t._v("xcframework")]),t._v(" 中，有些是静态库，有些是动态库")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211435264.png",alt:""}})]),t._v(" "),e("p",[t._v("如图所示，静态库必须选 "),e("code",[t._v("Do Not Embed")]),t._v("，动态库必须选 "),e("code",[t._v("Embed & Sign")]),t._v("。")]),t._v(" "),e("p",[t._v("如果你全选了 "),e("code",[t._v("Embed & Sign")]),t._v("，那么你就无法启动 "),e("code",[t._v("App")]),t._v(" 了，如下图所示")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211436641.png",alt:""}})]),t._v(" "),e("p",[t._v("该问题的相关 "),e("code",[t._v("issue")]),t._v(": https://github.com/flutter/flutter/issues/122183")]),t._v(" "),e("p",[t._v("所以为了避免这种情况，我们就必须得选对 "),e("code",[t._v("Embed")]),t._v(" 选项，可以使用 "),e("code",[t._v("file")]),t._v(" 命令去判断 "),e("code",[t._v("xcframework")]),t._v(" 是静态库还是动态库")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" FlutterPluginRegistrant.xcframework/ios-arm64/FlutterPluginRegistrant.framework/FlutterPluginRegistrant\nFlutterPluginRegistrant.xcframework/ios-arm64/FlutterPluginRegistrant.framework/FlutterPluginRegistrant: \ncurrent ar archive random library // 静态库\n\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("file")]),t._v(" url_launcher_ios.xcframework/ios-arm64/url_launcher_ios.framework/url_launcher_ios\nurl_launcher_ios.xcframework/ios-arm64/url_launcher_ios.framework/url_launcher_ios: \nMach-O "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("64")]),t._v("-bit dynamically linked shared library arm64 // 动态库\n")])])]),e("p",[t._v("这部分判断逻辑只能交给脚本处理了，因为当数量起来后你就会体验到什么叫崩溃，别问我是怎么知道的 😭")]),t._v(" "),e("h3",{attrs:{id:"_4、直接崩溃"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_4、直接崩溃"}},[t._v("#")]),t._v(" 4、直接崩溃")]),t._v(" "),e("p",[t._v("后面我直接用脚本判断 "),e("code",[t._v("Flutter")]),t._v(" 插件依赖了哪些原生第三方，将它们统一在原生工程内声明依赖，在一些情况下这也是很危险的，如 "),e("code",[t._v("connectivity_plus")]),t._v(" 这个 "),e("code",[t._v("Flutter")]),t._v(" 插件依赖了 "),e("code",[t._v("ReachabilitySwift")]),t._v("，你必须得使用 "),e("code",[t._v("Reachability.xcframework")]),t._v(" 二进制嵌入的方式，否则运行就崩~")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("dyld"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("31764")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(": Symbol not found: _"),e("span",{pre:!0,attrs:{class:"token variable"}},[t._v("$s12ReachabilityAAC10ConnectionO4wifiyA2DmFWC")]),t._v("\n Referenced from: "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("8142F86E-4C9C-3513-AD29-D3522FC6677F"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" /Users/lxf/Library/Developer/Xcode/DerivedData/xxx/connectivity_plus.framework/connectivity_plus\n Expected in: "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("DA318000-9A97-35AD-87EA-7C5B635DE01"),e("span",{pre:!0,attrs:{class:"token operator"}},[e("span",{pre:!0,attrs:{class:"token file-descriptor important"}},[t._v("0")]),t._v(">")]),t._v(" /Users/lxf/Library/Developer/xxx.app/Frameworks/Reachability.framework/Reachability\n")])])]),e("h2",{attrs:{id:"三、分析"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#三、分析"}},[t._v("#")]),t._v(" 三、分析")]),t._v(" "),e("p",[t._v("后来仔细想想，"),e("code",[t._v("Shorebird")]),t._v(" 的热更新是针对 "),e("code",[t._v("Dart")]),t._v(" 代码，跟原生无关，能不能按原来的 "),e("code",[t._v("Cocoapods")]),t._v(" 方式去集成 "),e("code",[t._v("Flutter.xcframework")]),t._v("，"),e("code",[t._v("App.xcframework")]),t._v(" 以及插件依赖的原生第三方库呢？")]),t._v(" "),e("p",[t._v("答案是可以的，来看看 "),e("code",[t._v("install_all_flutter_pods")]),t._v(" 方法")]),t._v(" "),e("div",{staticClass:"language-ruby extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ruby"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("def")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token method-definition"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("install_all_flutter_pods")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("nil")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n flutter_application_path "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("join"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 生成 .ios/Flutter/Flutter.podspec")]),t._v("\n install_flutter_engine_pod"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 集成 插件依赖的原生库 Pods")]),t._v("\n install_flutter_plugin_pods"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 编译并集成 Flutter.xcframework 和 App.xcframework")]),t._v("\n install_flutter_application_pod"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("end")]),t._v("\n")])])]),e("h3",{attrs:{id:"_1、install-flutter-engine-pod"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_1、install-flutter-engine-pod"}},[t._v("#")]),t._v(" 1、install_flutter_engine_pod")]),t._v(" "),e("p",[e("code",[t._v("install_flutter_engine_pod")]),t._v(" 生成的 "),e("code",[t._v("Flutter.podspec")]),t._v(" 是假的"),e("code",[t._v("podspec")]),t._v("，里面没啥实质内容，仅代表 "),e("code",[t._v("Flutter.xcframework")]),t._v("，为什么要这么做呢？因为一些 "),e("code",[t._v("Flutter")]),t._v(" 插件声明需要依赖 "),e("code",[t._v("Flutter")]),t._v("，如：")]),t._v(" "),e("div",{staticClass:"language-ruby extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ruby"}},[e("code",[t._v("Pod"),e("span",{pre:!0,attrs:{class:"token double-colon punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Spec")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("do")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("s"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("\n s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sqflite'")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dependency "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter'")])]),t._v("\n s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dependency "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'FMDB'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'>= 2.7.5'")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("end")]),t._v("\n")])])]),e("p",[t._v("如果没有这个 "),e("code",[t._v("Flutter.podspec")]),t._v("，那么执行 "),e("code",[t._v("pod install")]),t._v(" 就会从 "),e("code",[t._v("CocoaPods trunk")]),t._v(" 下载 "),e("code",[t._v("Flutter")]),t._v(" 了。")]),t._v(" "),e("h3",{attrs:{id:"_2、install-flutter-application-pod"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_2、install-flutter-application-pod"}},[t._v("#")]),t._v(" 2、install_flutter_application_pod")]),t._v(" "),e("p",[e("code",[t._v("install_flutter_application_pod")]),t._v(" 会去编译 "),e("code",[t._v("Flutter.xcframework")]),t._v(" 和 "),e("code",[t._v("App.xcframework")]),t._v("，并将它们并集到我们的原生工程内。不过这两玩意我们用 "),e("code",[t._v("Shorebird Release")]),t._v(" 去生成了，所以这个方法我们用不上。")]),t._v(" "),e("p",[t._v("我们可以结合上述的 "),e("code",[t._v("Flutter.podspec")]),t._v(" 的作用，修改它内部的依赖声明，从而实现通过 "),e("code",[t._v("Cocoapods")]),t._v(" 的方式来集成 "),e("code",[t._v("Flutter.xcframework")]),t._v(" 和 "),e("code",[t._v("App.xcframework")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[t._v("Pod::Spec.new do |s|\ns.name = 'Flutter'\ns.version = '1.0.0'\ns.summary = 'A UI toolkit for beautiful and fast apps.'\ns.homepage = 'https://flutter.dev'\ns.license = { :type => 'BSD' }\ns.author = { 'Flutter Dev Team' => 'flutter-dev@googlegroups.com' }\ns.source = { :git => 'https://github.com/flutter/engine', :tag => s.version.to_s }\ns.ios.deployment_target = '11.0'\n# Framework linking is handled by Flutter tooling, not CocoaPods.\n# Add a placeholder to satisfy `s.dependency 'Flutter'` plugin podspecs.\n#\n# 以上到这句都是原来的，将这句注释掉\n"),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # s.vendored_frameworks = 'path/to/nothing'\n")])]),t._v("# 新增下面这句，声明依赖当前目录下的 Flutter.xcframework 和 App.xcframework\n"),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.vendored_frameworks = 'Flutter.xcframework', 'App.xcframework'\n")])]),t._v("end\n")])])]),e("p",[t._v("生成的所有 "),e("code",[t._v("xcframework")]),t._v(" 所在路径为: "),e("code",[t._v("xxx/flutter_module/build/ios/framework/Release")]),t._v("， 我们自己创建的 "),e("code",[t._v("Flutter.podspec")]),t._v(" 中的依赖是相对路径，所以该 "),e("code",[t._v("podspec")]),t._v(" 也是跟 "),e("code",[t._v("xcframework")]),t._v(" 放到一起，当然也可以根据你自己的习惯进行调整。")]),t._v(" "),e("h3",{attrs:{id:"_3、install-flutter-plugin-pods"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#_3、install-flutter-plugin-pods"}},[t._v("#")]),t._v(" 3、install_flutter_plugin_pods")]),t._v(" "),e("p",[e("code",[t._v("install_flutter_plugin_pods")]),t._v(" 会将 "),e("code",[t._v("Flutter")]),t._v(" 插件依赖的原生库集成到我们的原生工程，这正是我们需要的。")]),t._v(" "),e("p",[t._v("不过如果你直接将 "),e("code",[t._v("Podfile")]),t._v(" 中的 "),e("code",[t._v("install_flutter_application_pod")]),t._v(" 给替换成 "),e("code",[t._v("install_flutter_plugin_pods")]),t._v(" ，执行 "),e("code",[t._v("pod install")]),t._v(" 时是会报如下错误的：")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("pod "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Invalid "),e("span",{pre:!0,attrs:{class:"token variable"}},[e("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")]),t._v("Podfile"),e("span",{pre:!0,attrs:{class:"token variable"}},[t._v("`")])]),t._v(" file: undefined method `flutter_relative_path_from_podfile' "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("#, @internal_hash={}, @root_target_definitions=[#], @current_target_definition=#>")]),t._v("\n\n relative "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" flutter_relative_path_from_podfile"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("export_script_directory"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("也就是找不到 "),e("code",[t._v("flutter_relative_path_from_podfile")]),t._v(" 方法，因为该方法在并不在你的 "),e("code",[t._v("Flutter")]),t._v(" 模块的 "),e("code",[t._v("podhelper.rb")]),t._v(" 中，而是在 "),e("code",[t._v("packages/flutter_tools/bin/podhelper.rb")]),t._v("。")]),t._v(" "),e("p",[t._v("至于为什么原来的 "),e("code",[t._v("install_all_flutter_pods")]),t._v(" 方法不会报错，是因为在该方法内先引用了 "),e("code",[t._v("flutter_tools/bin/podhelper.rb")]),t._v("。")]),t._v(" "),e("p",[t._v("关键代码如下：")]),t._v(" "),e("div",{staticClass:"language-ruby extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ruby"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("def")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token method-definition"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("install_all_flutter_pods")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("nil")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 就是这句")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("require")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("expand_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("join"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'packages'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'flutter_tools'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bin'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'podhelper'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" flutter_root"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n flutter_application_path "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("File")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("join"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n install_flutter_engine_pod"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n install_flutter_plugin_pods"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n install_flutter_application_pod"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutter_application_path"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("end")]),t._v("\n")])])]),e("p",[t._v("所以我们可以如法炮制，在 "),e("code",[t._v("install_flutter_plugin_pods")]),t._v(" 方法中加入 "),e("code",[t._v("require")]),t._v(" 这一行代码，以解决上述错误。")]),t._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[t._v("def install_flutter_plugin_pods(flutter_application_path)\n"),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" flutter_application_path ||= File.join('..', '..')\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")])]),t._v("end\n\n")])])]),e("p",[t._v("老是这么改也不是个办法，所以我提了个 "),e("code",[t._v("PR")]),t._v(": https://github.com/flutter/flutter/pull/141521")]),t._v(" "),e("blockquote",[e("p",[t._v("该 "),e("code",[t._v("PR")]),t._v(" 现已合并，应该会在 "),e("code",[t._v("3.16.9")]),t._v(" 及之后的版本中生效。")])]),t._v(" "),e("p",[t._v("经过验证，该方案是可行的，下面我们来看看如何调整原生工程和 "),e("code",[t._v("Shorebird")]),t._v(" 在 "),e("code",[t._v("iOS")]),t._v(" 混编下如何使用吧。")]),t._v(" "),e("h2",{attrs:{id:"四、原生工程调整"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#四、原生工程调整"}},[t._v("#")]),t._v(" 四、原生工程调整")]),t._v(" "),e("p",[t._v("在 "),e("code",[t._v("Podfile")]),t._v(" 文件中，将 "),e("code",[t._v("Flutter")]),t._v(" 壳工程的源码依赖方式调整为二进制依赖")]),t._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" install_all_flutter_pods(flutter_application_path)\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # 源码集成\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # install_all_flutter_pods(flutter_application_path)\n")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # 二进制集成\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" pod 'Flutter', path: 'xxx/flutter_modules/build/ios/framework/Release'\n")]),e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" install_flutter_plugin_pods(flutter_application_path)\n")])])])])]),e("ol",[e("li",[t._v("声明 "),e("code",[t._v("Flutter")]),t._v(" 依赖，用于集成 "),e("code",[t._v("Flutter.xcframework")]),t._v(" 和 "),e("code",[t._v("App.xcframework")]),t._v("。")]),t._v(" "),e("li",[e("code",[t._v("Option A")]),t._v(" 方式所需要的代码统统保留，只需要将 "),e("code",[t._v("install_all_flutter_pods")]),t._v(" 替换为 "),e("code",[t._v("install_flutter_plugin_pods")]),t._v("，用于集成 "),e("code",[t._v("Flutter")]),t._v(" 插件所依赖的原生第三方库")])]),t._v(" "),e("h2",{attrs:{id:"五、创建-shorebird-release"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#五、创建-shorebird-release"}},[t._v("#")]),t._v(" 五、创建 Shorebird Release")]),t._v(" "),e("p",[t._v("打发布包的时候操作，在 "),e("code",[t._v("Flutter")]),t._v(" 工程目录下执行")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" xx/xx/flutter_modules\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 7.0.0+2: 版本号+build版本号")]),t._v("\nshorebird release ios-framework-alpha --release-version "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7.0")]),t._v(".0+2\n")])])]),e("blockquote",[e("p",[t._v("该命令内部会去执行 "),e("code",[t._v("flutter build ios-framework --no-debug --no-profile ...")]),t._v("，并且使用的是 "),e("code",[t._v("Shorebird")]),t._v(" 魔改的 "),e("code",[t._v("Flutter")]),t._v(" 引擎！")])]),t._v(" "),e("p",[t._v("版本号可以在如下图所示进行查看")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211436306.png",alt:""}})]),t._v(" "),e("p",[e("code",[t._v("ShoreBird")]),t._v(" 的内部逻辑会去以这个版本号组合，向服务器请求判断是否存在相应版本的相关补丁！")]),t._v(" "),e("p",[t._v("执行完成后，在 "),e("code",[t._v("Shorebird")]),t._v(" 控制台上可以看到相应的项")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211437609.png",alt:""}})]),t._v(" "),e("p",[t._v("在命令执行前，请确保不存在 "),e("code",[t._v("7.0.0+2")]),t._v(" 的 "),e("code",[t._v("Release")]),t._v("，如果有的话，请先删除")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211437151.png",alt:""}})]),t._v(" "),e("h2",{attrs:{id:"六、创建-shorebird-patch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#六、创建-shorebird-patch"}},[t._v("#")]),t._v(" 六、创建 Shorebird Patch")]),t._v(" "),e("p",[t._v("紧急修复线上包的bug时操作，在 "),e("code",[t._v("Flutter")]),t._v(" 工程目录下执行")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("shorebird patch ios-framework-alpha --release-version "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7.0")]),t._v(".0+2\n")])])]),e("p",[t._v("注：版本号与上述的 "),e("code",[t._v("release")]),t._v(" 命令中使用的要保持一致！")]),t._v(" "),e("p",[t._v("执行完成后，在 "),e("code",[t._v("Shorebird")]),t._v(" 控制台上点击对应的 "),e("code",[t._v("Release")]),t._v(" 项，进去后可以看到相应的补丁")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211437542.png",alt:""}})]),t._v(" "),e("p",[t._v("看看这个补丁大小，我们再来看看安卓的补丁大小")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202401211438158.png",alt:""}})]),t._v(" "),e("blockquote",[e("p",[t._v("一样的修改，安卓的补丁大小不到 "),e("code",[t._v("2 MB")]),t._v("，"),e("code",[t._v("iOS")]),t._v(" 的补丁大小高达 "),e("code",[t._v("54.83 MB")]),t._v(" 😂")])]),t._v(" "),e("h2",{attrs:{id:"七、热更新验证"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#七、热更新验证"}},[t._v("#")]),t._v(" 七、热更新验证")]),t._v(" "),e("blockquote",[e("p",[t._v("官方文档上就只是说重启 "),e("code",[t._v("App")]),t._v(" 查看补丁是否生效，并没有说明失败了该如果排查问题~")])]),t._v(" "),e("p",[t._v("1、在执行完 "),e("code",[t._v("shorebird release")]),t._v(" 命令并完成上述原生工程的调整后，将原生工程的编译模式调整为 "),e("code",[t._v("Release")]),t._v(" 进行编译。")]),t._v(" "),e("p",[t._v("此时会依赖的 "),e("code",[t._v("flutter_modules/build/ios/framework/Release")]),t._v(" 下的 "),e("code",[t._v("xcframework")]),t._v("，备份为 "),e("code",[t._v("Release_release")])]),t._v(" "),e("p",[t._v("2、关闭 "),e("code",[t._v("App")]),t._v("，打 "),e("code",[t._v("patch")]),t._v("，注意，此时 "),e("code",[t._v("flutter_modules/build/ios/framework/Release")]),t._v(" 下的内容会被清空并重新创建。")]),t._v(" "),e("p",[t._v("3、打 "),e("code",[t._v("patch")]),t._v(" 后，将 "),e("code",[t._v("Release_release")]),t._v(" 改回 "),e("code",[t._v("Release")]),t._v(" 用 "),e("code",[t._v("Xcode")]),t._v(" 重新运行 "),e("code",[t._v("App")]),t._v("，一切正常的话即可看到变化。")]),t._v(" "),e("p",[t._v("无论成功还是失败，"),e("code",[t._v("Xcode")]),t._v(" 的控制台都会有相应的输出")]),t._v(" "),e("p",[t._v("成功")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2024")]),t._v("-01-03 "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("18")]),t._v(":37:55.838328+0800 xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("623")]),t._v(":70498"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("VERBOSE0:shorebird.cc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("151")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Shorebird updater: no active patch.\n"),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2024")]),t._v("-01-03 "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("18")]),t._v(":37:55.838424+0800 xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("623")]),t._v(":70498"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("VERBOSE0:shorebird.cc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("155")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Starting Shorebird update\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:00.002"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" INFO Sending patch check request: PatchCheckRequest "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app_id: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"')]),t._v(", channel: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stable"')]),t._v(", release_version: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"7.0.0+2"')]),t._v(", patch_number: None, platform: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ios"')]),t._v(", arch: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"aarch64"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:30.871"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" INFO Patch "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" successfully installed.\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:30.871"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" INFO Update result: Update installed\n")])])]),e("p",[t._v("失败")]),t._v(" "),e("blockquote",[e("p",[t._v("可以搜索关键字 "),e("code",[t._v("PatchCheckRequest")]),t._v(" 定位")])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2024")]),t._v("-01-03 "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("18")]),t._v(":37:55.838328+0800 xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("623")]),t._v(":70498"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("VERBOSE0:shorebird.cc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("151")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Shorebird updater: no active patch.\n"),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2024")]),t._v("-01-03 "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("18")]),t._v(":37:55.838424+0800 xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("623")]),t._v(":70498"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("VERBOSE0:shorebird.cc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("155")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" Starting Shorebird update\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:00.002"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" INFO Sending patch check request: PatchCheckRequest "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app_id: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"')]),t._v(", channel: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stable"')]),t._v(", release_version: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"7.0.0+2"')]),t._v(", patch_number: None, platform: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ios"')]),t._v(", arch: "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"aarch64"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:30.871"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" ERROR Update failed: error decoding response body: operation timed out\nCaused by:\n operation timed out\n\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("00:00:30.871"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("1701cb000"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" INFO Update thread finished with status: Update had error\n")])])]),e("p",[t._v("该失败是因为国行机特有的网络权限导致的，开启 "),e("code",[t._v("Shorebird")]),t._v(" 的自动检查更新的话，会在网络权限被赋予前去请求，结果就是失败，所以需要关闭自动检查更新，使用 "),e("a",{attrs:{href:"https://pub.dev/packages/shorebird_code_push",target:"_blank",rel:"noopener noreferrer"}},[t._v("shorebird_code_push"),e("OutboundLink")],1),t._v(" 去延迟检查。")]),t._v(" "),e("h2",{attrs:{id:"八、脚本"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#八、脚本"}},[t._v("#")]),t._v(" 八、脚本")]),t._v(" "),e("p",[t._v("由于我们日常研发还是使用的是源码依赖的方式，只会在打最终测试包时才需要去做上述的调整操作，所以这里用我比较熟悉的 "),e("code",[t._v("Python")]),t._v(" 去制作了简易的脚本，并结合 "),e("code",[t._v("Jenkins")]),t._v(" 来辅助完成这种万年不变的无聊步骤")]),t._v(" "),e("p",[t._v("脚本已上传至 "),e("code",[t._v("Github")]),t._v(": "),e("a",{attrs:{href:"https://github.com/LinXunFeng/script_box/tree/main/flutter",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/script_box/tree/main/flutter"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("看官可自取修改~")]),t._v(" "),e("h3",{attrs:{id:"switch-flutter-integrate-py"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#switch-flutter-integrate-py"}},[t._v("#")]),t._v(" switch_flutter_integrate.py")]),t._v(" "),e("blockquote",[e("p",[t._v("切换 "),e("code",[t._v("Flutter")]),t._v(" 项目的集成方式")])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 二进制依赖")]),t._v("\npython switch_flutter_integrate.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'binary'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 源码依赖")]),t._v("\npython switch_flutter_integrate.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'source'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v(" \n")])])]),e("h3",{attrs:{id:"shorebird-py"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shorebird-py"}},[t._v("#")]),t._v(" shorebird.py")]),t._v(" "),e("blockquote",[e("p",[t._v("自动获取版本号，并执行 "),e("code",[t._v("Shorebird")]),t._v(" 相关命令")])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# release")]),t._v("\npython shorebird.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" release "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" ios\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# patch")]),t._v("\npython shorebird.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" patch "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" ios\n")])])]),e("p",[t._v("需要注意的是，"),e("code",[t._v("xcodeproj")]),t._v(" 和 "),e("code",[t._v("target")]),t._v(" 的名字被我固定写成 "),e("code",[t._v("OCProject")]),t._v("，如下代码中高亮的那两行，大家请先将其修改为自己的工程名再使用 "),e("code",[t._v("shorebird.py")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[t._v("def handle_ios():\n"),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(' """\n')]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" 处理iOS项目\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(' """\n')]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # 1. 读取主版本号\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # 请将 OCProject 修改为你们自己的工程名\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" xcodeproj_path = os.path.join(project_path, 'OCProject.xcodeproj')\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" version = ReleaseVersionTool.fetch_project_version(\n")]),e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" xcodeproj_path=xcodeproj_path,\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" target_name='OCProject',\n")])]),e("span",{pre:!0,attrs:{class:"token unchanged"}},[e("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" )\n")])])])])]),e("p",[t._v("由于我比较懒，就不改成通用的了 😏")]),t._v(" "),e("h2",{attrs:{id:"九、最后"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#九、最后"}},[t._v("#")]),t._v(" 九、最后")]),t._v(" "),e("p",[t._v("虽然 "),e("code",[t._v("iOS")]),t._v(" 的热更新能用，但也仅仅只是能用，应用于很简单的应用程序，运行起来没有太明显的卡顿感知，但是稍微大点就可以感知到了，卡到怀疑人生那种，相比安卓端的没有任何性能损耗，iOS端的还需要再等等，毕竟现在 "),e("code",[t._v("iOS")]),t._v(" 还是 "),e("code",[t._v("Alpha")]),t._v(" 版本，相信不久将来 "),e("code",[t._v("Shorebird")]),t._v(" 团队会解决该问题。")]),t._v(" "),e("p",[t._v("具体关于安卓和 "),e("code",[t._v("iOS")]),t._v(" 两端之间的实现区别可以在这个 "),e("code",[t._v("issue")]),t._v(" 中查看 "),e("a",{attrs:{href:"https://github.com/shorebirdtech/shorebird/issues/871",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/shorebirdtech/shorebird/issues/871"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/139.03b5f7bf.js b/assets/js/139.03b5f7bf.js new file mode 100644 index 000000000..628e206aa --- /dev/null +++ b/assets/js/139.03b5f7bf.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[139],{490:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在去年对公司的 "),s("code",[t._v("Flutter")]),t._v(" 混编项目做了性能优化，其中最坑的，莫过于从 "),s("code",[t._v("Flutter")]),t._v(" 页面返回原生页面时 "),s("code",[t._v("dispose")]),t._v(" 方法竟然不走，如图所示")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202403101249921.gif",alt:""}})]),t._v(" "),s("p",[t._v("这就导致一些资源无法得到释放，如 "),s("code",[t._v("fijkplayer")]),t._v(" 所使用的视频资源。在原生页面与满屏视频的 "),s("code",[t._v("Flutter")]),t._v(" 页面之间反复进出时，内存占用越来越高")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202403101244604.png",alt:""}})]),t._v(" "),s("p",[t._v("上图是进出 "),s("code",[t._v("7")]),t._v(" 次视频页面后的内存占用情况。")]),t._v(" "),s("p",[t._v("最终会导致手机发烫，"),s("code",[t._v("App")]),t._v(" 变得卡顿，甚至最后闪退（当 "),s("code",[t._v("App")]),t._v(" 的内存占用达到图中红色虚线时就会直接被系统杀掉）")]),t._v(" "),s("p",[t._v("随即向 "),s("code",[t._v("Flutter")]),t._v(" 官方提出了 "),s("code",[t._v("issue")]),t._v(": "),s("a",{attrs:{href:"https://github.com/flutter/flutter/issues/137924",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/issues/137924"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"二、解决方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、解决方案"}},[t._v("#")]),t._v(" 二、解决方案")]),t._v(" "),s("p",[t._v("在提出 "),s("code",[t._v("issue")]),t._v(" 的第二天，组织成员 "),s("code",[t._v("dnfield")]),t._v(" 出提了一个 "),s("code",[t._v("PR")]),t._v(": "),s("a",{attrs:{href:"https://github.com/flutter/flutter/pull/137957",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/pull/137957"),s("OutboundLink")],1),t._v(" ，不过该 "),s("code",[t._v("PR")]),t._v(" 只是加了说明，解释为何会出现该问题，以及如何去处理。")]),t._v(" "),s("p",[t._v("根据其说明进行了优化，内存确实得到了有效的及时收回，如图所示")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202403101244527.png",alt:""}})]),t._v(" "),s("p",[t._v("该"),s("code",[t._v("PR")]),t._v("的说明指出：")]),t._v(" "),s("blockquote",[s("p",[t._v("当通过原生的方式关闭了 "),s("code",[t._v("Flutter")]),t._v(" 页面时，"),s("code",[t._v("Flutter")]),t._v(" 端并不知道开发者是否打算提前释放资源，所以 "),s("code",[t._v("Widget")]),t._v(" 树依旧保持着挂载的状态，这么做是为了再一次展示 "),s("code",[t._v("Flutter")]),t._v(" 页面时可以尽可能快的进行渲染。"),s("em",[t._v("【想必这也是上图中内存占用并没有得到彻底回落的原因！】")])]),t._v(" "),s("p",[t._v("如果想要尽快的释放资源，可以建立 "),s("code",[t._v("platform channel")]),t._v("，当返回原生页时告知 "),s("code",[t._v("Flutter")]),t._v(" 端去再次调用 "),s("code",[t._v("runApp")]),t._v(" 方法，并传入 "),s("code",[t._v("SizedBox.shrink")]),t._v("，这样就可以释放掉活跃的 "),s("code",[t._v("Widget")]),t._v(" 树。")])]),t._v(" "),s("p",[t._v("通过 "),s("code",[t._v("platform channel")]),t._v(" 的方式需要与原生端打交道，有没有纯 "),s("code",[t._v("Flutter")]),t._v(" 的方式呢？")]),t._v(" "),s("p",[t._v("有的，那就是通过监听 "),s("code",[t._v("Flutter App")]),t._v(" 的状态，当状态为 "),s("code",[t._v("AppLifecycleState.detached")]),t._v(" 时，就可以去执行 "),s("code",[t._v("runApp")]),t._v(" 方法了，达到一样释放资源的效果。")]),t._v(" "),s("p",[t._v("关于 "),s("code",[t._v("AppLifecycleState.detached")]),t._v(" 的说明：")]),t._v(" "),s("blockquote",[s("p",[t._v("此时 "),s("code",[t._v("Flutter App")]),t._v(" 仍被 "),s("code",[t._v("Flutter")]),t._v(" 引擎所持有，但已与任何的视图分离。也就是说引擎正在以没有视图的状态运行着。")]),t._v(" "),s("p",[t._v("该状态既可能是在 "),s("code",[t._v("Flutter")]),t._v(" 引擎初始化时附加视图的过程中，也可能是在视图因 "),s("code",[t._v("Navigator")]),t._v(" 弹出而被销毁之后。")])]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("App")]),t._v(" 从 "),s("code",[t._v("Flutter")]),t._v(" 页面返回原生页面后，就会切换到该状态。")]),t._v(" "),s("h2",{attrs:{id:"三、代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、代码"}},[t._v("#")]),t._v(" 三、代码")]),t._v(" "),s("p",[t._v("下面给出完整的示例代码，供大家参考")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StatefulWidget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" bool isDetached"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isDetached "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_MyAppState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _MyAppState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WidgetsBindingObserver")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WidgetsBinding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WidgetsBinding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeAppLifecycleState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppLifecycleState")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeAppLifecycleState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppLifecycleState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("detached"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 相关处理参考")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/flutter/flutter/pull/137957")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isDetached"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 清除内存中的图片缓存")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/Baseflow/flutter_cached_network_image/issues/429")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" imageCache "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PaintingBinding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imageCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n imageCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n imageCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearLiveImages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This widget is the root of your application.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isDetached"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引擎被detach, 移除所有的widget, 以此来及时释放资源")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Fix report no OKToast widget found.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resultWidget = OKToast(child: resultWidget);")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MaterialApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("细心的朋友肯定注意到了 "),s("code",[t._v("OKToast")]),t._v(" 的相关代码，当时在 "),s("code",[t._v("Sentry")]),t._v(" 上看到了错误: "),s("code",[t._v("No OKToast widget found")]),t._v("，这是因为有些网络请求在返回原生页面后才请求成功，进而触发吐丝，而此时已经执行了 "),s("code",[t._v("runApp")]),t._v(" 去展示空白页面，考虑到即使取消了所有请求，有些业务会去对 "),s("code",[t._v("cancel")]),t._v(" 的情况去吐丝提醒，所以还是套一个 "),s("code",[t._v("OKToast")]),t._v(" 来得方便~")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/14.7a93d753.js b/assets/js/14.7a93d753.js new file mode 100644 index 000000000..02f10a704 --- /dev/null +++ b/assets/js/14.7a93d753.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{368:function(e,t,a){"use strict";a.r(t);var n=a(14),r=Object(n.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"一、简述"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#一、简述"}},[e._v("#")]),e._v(" 一、简述")]),e._v(" "),t("p",[e._v("不管AbsListView(ListView、GridView)或是新出的RecyclerView,在使用notifyDataSetChanged方法更新列表数据时，一定要保证数据为同个对象（即hashCode要一致）。对于这个问题的论证，可以去看官方源代码，或是看我之前写的一篇博文"),t("a",{attrs:{href:"http://blog.csdn.net/csdn_lqr/article/details/50947825",target:"_blank",rel:"noopener noreferrer"}},[e._v('"解决ListViews适配器notifyDataSetChanged()无效问题"'),t("OutboundLink")],1),e._v("，相信可以帮到你。但是，这个不是本文的重点，本文重点讲解在"),t("strong",[e._v("Fragment")]),e._v('中，RecyclerView遇到notifyDataSetChanged无效的问题。如果你赶时间，可以直接看第三部分（"总结"）。')]),e._v(" "),t("h2",{attrs:{id:"二、探索"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、探索"}},[e._v("#")]),e._v(" 二、探索")]),e._v(" "),t("h3",{attrs:{id:"_1、查看数据-mdata-是否是同个对象"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、查看数据-mdata-是否是同个对象"}},[e._v("#")]),e._v(" 1、查看数据（mData）是否是同个对象")]),e._v(" "),t("p",[e._v("*"),t("strong",[e._v("tip:java中可以通过打印hashCode的方式判断mData是否为同个对象。")])]),e._v(" "),t("p",[e._v("注意：initData方法在onActivityCreated()中被调用。")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v('public void initData() {\n\tif (mData == null) {\n mData = new ArrayList<>();\n }\n\tmData.clear();\n ...\n\t数据填充\n\t...\n if (mAdapter == null) {\n mAdapter = new LQRAdapterForRecyclerView(getActivity(), mData, R.layout.item_senior) {\n @Override\n public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {\n ...\n\t\t\t\t视图填充\n\t\t\t\t...\n }\n };\n mRvList.setAdapter(mAdapter);\n LogUtils.sf("setAdapter时mData地址：" + mData.hashCode());\n } else {\n mAdapter.notifyDataSetChanged();\n LogUtils.sf("setAdapter时mData地址：" + mData.hashCode());\n }\n}\n')])])]),t("h3",{attrs:{id:"_2、操作与结果"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、操作与结果"}},[e._v("#")]),e._v(" 2、操作与结果")]),e._v(" "),t("p",[e._v("*"),t("strong",[e._v("tip:常规对Fragment的使用，会对其进行缓存，也可能使用单例模式，反正就是短时间内不会重新创建。")])]),e._v(" "),t("h4",{attrs:{id:"_1操作一"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1操作一"}},[e._v("#")]),e._v(" ①操作一：")]),e._v(" "),t("p",[e._v("打开Activity后，切换Fragment（第一次初始化Fragment）。显示效果如下：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107083249.png",alt:""}})]),e._v(" "),t("h4",{attrs:{id:"_2操作二"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2操作二"}},[e._v("#")]),e._v(" ②操作二：")]),e._v(" "),t("p",[e._v("切换别的Fragment后，再切回刚才的Fragment(此前该Fragment已经在存在，所以不会再次创建)。显示效果如下：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107083308.png",alt:""}})]),e._v(" "),t("h4",{attrs:{id:"_3看控制台"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3看控制台"}},[e._v("#")]),e._v(" ③看控制台：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107083320.png",alt:""}})]),e._v(" "),t("p",[e._v("可以看到数据对象地址一样，即为同一个。")]),e._v(" "),t("h3",{attrs:{id:"_3、查看recyclerview是否是同个对象"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3、查看recyclerview是否是同个对象"}},[e._v("#")]),e._v(" 3、查看RecyclerView是否是同个对象")]),e._v(" "),t("p",[e._v("说实话，这个是踩坑经验丰富的网友在群里说的，如果不是他说出来，打死我也没想到，居然还有这么一个坑。从上面的结果可以看出，adapter中是有数据的没错，而且数据地址没变，所以理应notifyDataSetChanged()方法会生效。但是为什么会这样呢，这里先卖个关子，先看下面的操作。")]),e._v(" "),t("h4",{attrs:{id:"_1改下上面的代码-打印recyclerview的地址。"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1改下上面的代码-打印recyclerview的地址。"}},[e._v("#")]),e._v(" ①改下上面的代码，打印RecyclerView的地址。")]),e._v(" "),t("p",[e._v("代码如下：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v('public void initData() {\n\tif (mData == null) {\n mData = new ArrayList<>();\n }\n\tmData.clear();\n ...\n\t数据填充\n\t...\n if (mAdapter == null) {\n mAdapter = new LQRAdapterForRecyclerView(getActivity(), mData, R.layout.item_senior) {\n @Override\n public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {\n ...\n\t\t\t\t视图填充\n\t\t\t\t...\n }\n };\n mRvList.setAdapter(mAdapter);\n LogUtils.sf("setAdapter时Rv：" + mRvList.hashCode());\n } else {\n mAdapter.notifyDataSetChanged();\n LogUtils.sf("notify时Rv：" + mRvList.hashCode());\n }\n}\n')])])]),t("h4",{attrs:{id:"_2同上述操作一致。"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2同上述操作一致。"}},[e._v("#")]),e._v(" ②同上述操作一致。")]),e._v(" "),t("p",[e._v("对同一个Fragment来回切换，看控制台输出。")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107083334.png",alt:""}})]),e._v(" "),t("p",[e._v("果然不一样！！！")]),e._v(" "),t("h2",{attrs:{id:"三、总结"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#三、总结"}},[e._v("#")]),e._v(" 三、总结")]),e._v(" "),t("p",[e._v("为什么在Fragment中RecyclerView的地址会发生变化呢？我们先理清一下Fragment生命周期会陆续调用的几个方法：")]),e._v(" "),t("blockquote",[t("p",[e._v("onCreate() -> onCreateView() -> onActivityCreated() -> onDestroy()")])]),e._v(" "),t("p",[e._v("中间少了几个方法，请不用在意，下面贴下我的BaseFragment代码：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("public abstract class BaseFragment extends Fragment {\n @Override\n public void onCreate(@Nullable Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n init();\n }\n\n @Nullable\n @Override\n public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\n //子类不再需要设置布局ID，也不再需要使用ButterKnife.bind()\n View rootView = inflater.inflate(provideContentViewId(), container, false);\n ButterKnife.bind(this, rootView);\n initView(rootView);\n return rootView;\n }\n\n @Override\n public void onActivityCreated(@Nullable Bundle savedInstanceState) {\n super.onActivityCreated(savedInstanceState);\n initData();\n initListener();\n }\n\n @Override\n public void onDestroy() {\n super.onDestroy();\n }\n}\n")])])]),t("p",[e._v("当一个Fragment在来回切换时，分别调用的方法如下：")]),e._v(" "),t("p",[e._v("第一次显示：")]),e._v(" "),t("blockquote",[t("p",[e._v("onCreate() -> onCreateView() -> onActivityCreated()")])]),e._v(" "),t("p",[e._v("第二次显示：")]),e._v(" "),t("blockquote",[t("p",[e._v("onCreateView() -> onActivityCreated()")])]),e._v(" "),t("p",[e._v("这里不难理解，因为Fragment一般使用的时候会被缓存，所以，当第二次显示的时候，不会调用onCreate()。只会调用onCreateView()和onActivityCreated()，这也就是RecyclerView地址不一样的原因所在，因为控件获取操作是在initView()中进行的，即RecyclerView的获取操作在onCreateView()中，而Fragment的每次显示都会调用onCreateView()，所以RecyclerView控件会被再次获取，即重新创建一个对象（此时hashCode就变化了）。")]),e._v(" "),t("h3",{attrs:{id:"_1、结论"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、结论"}},[e._v("#")]),e._v(" 1、结论：")]),e._v(" "),t("p",[e._v("所以，在Fragment中使用RecyclerView或AbsListView控件的notifyDataSetChanged()方法时，除了保证数据(mData对象)不能变以外，控件本身一样也不能变。")]),e._v(" "),t("h3",{attrs:{id:"_2、解决方案"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、解决方案"}},[e._v("#")]),e._v(" 2、解决方案：")]),e._v(" "),t("h4",{attrs:{id:"_1-方案一"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-方案一"}},[e._v("#")]),e._v(" 1)方案一：")]),e._v(" "),t("p",[e._v("因为Fragment的onCreateView()和onActivityCreated()方法在每次Fragment显示的时候会被调用，控件会被重新创建一次，所以，解决方法只能是在这两个方法中重新对RecyclerView设置适配器，而不要使用notifyDataSetChanged()，故代码改为如下：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("public void initData() {\n if (mData == null) {\n mData = new ArrayList<>();\n }\n mData.clear();\n ...\n 数据填充\n ...\n if (mAdapter == null) {\n mAdapter = new LQRAdapterForRecyclerView(getActivity(), mData, R.layout.item_senior) {\n @Override\n public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {\n ...\n 视图填充\n ...\n }\n };\n } \n mRvList.setAdapter(mAdapter);\n}\n")])])]),t("p",[e._v("注：只是建议不要在上述两个生命周期方法中使用notifyDataSetChanged()而已，只要在保证RecyclerView等列表控件设置完适配器后，可以在任意地方继续使用notifyDataSetChanged()。")]),e._v(" "),t("h4",{attrs:{id:"_2-方案二"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-方案二"}},[e._v("#")]),e._v(" 2)方案二：")]),e._v(" "),t("p",[e._v("让rootView作为全局变量，在回调onCreateView()时不再重新创建。")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("public abstract class BaseFragment extends Fragment {\n\n View rootView;\n\n @Override\n public void onCreate(@Nullable Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n init();\n }\n\n @Nullable\n @Override\n public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\n //子类不再需要设置布局ID，也不再需要使用ButterKnife.bind()\n if(rootView == null){\n rootView = inflater.inflate(provideContentViewId(), container, false);\n ButterKnife.bind(this, rootView);\n initView(rootView);\n }\n return rootView;\n }\n\n @Override\n public void onActivityCreated(@Nullable Bundle savedInstanceState) {\n super.onActivityCreated(savedInstanceState);\n initData();\n initListener();\n }\n\n @Override\n public void onDestroy() {\n super.onDestroy();\n }\n}\n")])])])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/140.690c1340.js b/assets/js/140.690c1340.js new file mode 100644 index 000000000..4834a46a9 --- /dev/null +++ b/assets/js/140.690c1340.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[140],{491:function(e,t,s){"use strict";s.r(t);var a=s(14),n=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("iframe",{attrs:{src:"//player.bilibili.com/player.html?aid=1603068977&bvid=BV1Qm421L7ib&cid=1505310266&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"560px"}}),e._v(" "),t("h2",{attrs:{id:"一、背景"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#一、背景"}},[e._v("#")]),e._v(" 一、背景")]),e._v(" "),t("p",[e._v("上周一尝试从 "),t("code",[e._v("3.16.9")]),e._v(" 升级 "),t("code",[e._v("3.19.3")]),e._v("，主要有两个原因：")]),e._v(" "),t("p",[e._v("一是安卓端有一个疑似造成崩溃率上涨的 "),t("code",[e._v("bug")]),e._v(" 在 "),t("code",[e._v("Flutter 3.16")]),e._v(" 上出现，相关issue: "),t("a",{attrs:{href:"https://github.com/flutter/flutter/issues/138947",target:"_blank",rel:"noopener noreferrer"}},[e._v("#138947"),t("OutboundLink")],1),e._v(", 该 "),t("code",[e._v("bug")]),e._v(" 在 "),t("code",[e._v("3.13")]),e._v(" 不会出现，在 "),t("code",[e._v("3.17.pre")]),e._v(" 上得到修复，而 "),t("code",[e._v("3.16")]),e._v(" 之后的下个正式版本是 "),t("code",[e._v("3.19")]),e._v("。")]),e._v(" "),t("p",[e._v("二是苹果的隐私清单审核政策。")]),e._v(" "),t("p",[e._v("在苹果发布的【"),t("a",{attrs:{href:"https://developer.apple.com/cn/news/?id=3d8a9yyh",target:"_blank",rel:"noopener noreferrer"}},[e._v("关于 App Store 提交的隐私更新"),t("OutboundLink")],1),e._v("】新闻中指出")]),e._v(" "),t("blockquote",[t("p",[t("strong",[e._v("自 3 月 13 日起：")]),e._v(" 如果你上传新 App 或更新 App 到 App Store Connect，且该 App 使用了需要声明批准原因的 API，但你未在 App 的隐私清单中提供批准原因，我们会通过电子邮件告知你。这是对 App Store Connect 中现有通知的补充。")]),e._v(" "),t("p",[t("strong",[e._v("自 5 月 1 日起：")]),e._v(" 你需要就你的 App 代码使用的所列 API 提供批准原因，才能将新 App 或更新 App 上传到 App Store Connect。如果你没有合理的原因使用某个 API，请寻找替代的方案。如果你添加了常用第三方 SDK 列表中所列的新版第三方 SDK，那么这些 API、隐私清单和签名要求将应用于该 SDK。请务必使用包含其隐私清单的 SDK 版本，并注意在将该 SDK 添加为二进制依赖项时也需要提供签名。")])]),e._v(" "),t("p",[e._v("在苹果的【"),t("a",{attrs:{href:"https://developer.apple.com/cn/support/third-party-SDK-requirements/",target:"_blank",rel:"noopener noreferrer"}},[e._v("即将发布的第三方SDK要求"),t("OutboundLink")],1),e._v("】一文中，列举出需要隐私清单和签名的 "),t("code",[e._v("SDK")]),e._v("，其中就包含了 "),t("code",[e._v("Flutter")]),e._v("。为了符合该审核要求，"),t("code",[e._v("Flutter")]),e._v(" 从 "),t("code",[e._v("3.19")]),e._v(" 开始包含了 "),t("code",[e._v("PrivacyInfo.xcprivacy")]),e._v(" 这个隐私清单文件。")]),e._v(" "),t("p",[e._v("文件位于: "),t("a",{attrs:{href:"https://github.com/flutter/engine/blob/3.19.0/shell/platform/darwin/ios/framework/PrivacyInfo.xcprivacy",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/flutter/engine/blob/3.19.0/shell/platform/darwin/ios/framework/PrivacyInfo.xcprivacy"),t("OutboundLink")],1)]),e._v(" "),t("h2",{attrs:{id:"二、踩坑"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、踩坑"}},[e._v("#")]),e._v(" 二、踩坑")]),e._v(" "),t("p",[e._v("升到到 "),t("code",[e._v("3.19.3")]),e._v(" 后发现，从 "),t("code",[e._v("页面A")]),e._v(" 跳转到 "),t("code",[e._v("页面B")]),e._v(" 和返回 "),t("code",[e._v("页面A")]),e._v(" 时，"),t("code",[e._v("页面A")]),e._v(" 的 "),t("code",[e._v("build")]),e._v(" 方法都会被执行，降回 "),t("code",[e._v("3.16.9")]),e._v(" 则不会，这就很奇怪。后来发现是因为 "),t("code",[e._v("页面A")]),e._v(" 间接使用了 "),t("code",[e._v("ModalRoute.of")]),e._v("。")]),e._v(" "),t("p",[e._v("以下是可复现问题的代码")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("class PageA extends StatefulWidget {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" State createState() => _PageAState();\n")])]),e._v("}\n\nclass _PageAState extends State {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" Widget build(BuildContext context) {\n")])]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // ==== 这里 ====\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" final arguments = ModalRoute.of(context)?.settings.arguments;\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' print("PageA arguments:$arguments");\n')])]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return Scaffold(\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" appBar: AppBar(\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" backgroundColor: Theme.of(context).colorScheme.inversePrimary,\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" title: const Text('PageA'),\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ),\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" body: const SizedBox.shrink(),\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" );\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("}\n")])])]),t("h2",{attrs:{id:"三、探索"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#三、探索"}},[e._v("#")]),e._v(" 三、探索")]),e._v(" "),t("p",[e._v("在经过一番摸索后，发现 "),t("code",[e._v("ModalRoute")]),e._v(" 在 "),t("code",[e._v("3.19")]),e._v(" 上面有一个小修改~")]),e._v(" "),t("p",[e._v("相关 "),t("code",[e._v("issue")]),e._v(" 是: "),t("a",{attrs:{href:"https://github.com/flutter/flutter/issues/112567",target:"_blank",rel:"noopener noreferrer"}},[e._v("#112567"),t("OutboundLink")],1),e._v(" 。")]),e._v(" "),t("p",[e._v("该 "),t("code",[e._v("issue")]),e._v(" 主要是涉及在 "),t("code",[e._v("Web")]),e._v(" 端上按 "),t("code",[e._v("Tab")]),e._v(" 键切换焦点的问题，后续有个 "),t("code",[e._v("PR")]),e._v(": "),t("a",{attrs:{href:"https://github.com/flutter/flutter/pull/130841",target:"_blank",rel:"noopener noreferrer"}},[e._v("#130841"),t("OutboundLink")],1),e._v(" 解决了该问题。")]),e._v(" "),t("blockquote",[t("p",[e._v("该 "),t("code",[e._v("PR")]),e._v(" 因内部测试原因进行了回滚，后再重新登陆，现PR: "),t("a",{attrs:{href:"https://github.com/flutter/flutter/pull/134554",target:"_blank",rel:"noopener noreferrer"}},[e._v("#134554"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("而在该 "),t("code",[e._v("PR")]),e._v(" 中就对 "),t("code",[e._v("ModalRoute")]),e._v(" 加了如下代码：")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("// packages/flutter/lib/src/widgets/routes.dart\n\nabstract class ModalRoute extends TransitionRoute with LocalHistoryRoute {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void didChangeNext(Route? nextRoute) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.didChangeNext(nextRoute);\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" changedInternalState();\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v("\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void didPopNext(Route nextRoute) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.didPopNext(nextRoute);\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" changedInternalState();\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v("\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void changedInternalState() {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.changedInternalState();\n")])]),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" setState(() { /* internal state already changed */ });\n")]),t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" _modalBarrier.markNeedsBuild();\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // No need to mark dirty if this method is called during build phase.\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (SchedulerBinding.instance.schedulerPhase != SchedulerPhase.persistentCallbacks) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" setState(() { /* internal state already changed */ });\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" _modalBarrier.markNeedsBuild();\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" _modalScope.maintainState = maintainState;\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("...\n}\n")])])]),t("p",[t("code",[e._v("didChangeNext")]),e._v(" 和 "),t("code",[e._v("didPopNext")]),e._v(" 这两个方法对应的就是页面的 "),t("code",[e._v("push")]),e._v(" 和 "),t("code",[e._v("pop")]),e._v("，现在在该 "),t("code",[e._v("PR")]),e._v(" 中重写并调用了 "),t("code",[e._v("changedInternalState")]),e._v(" 方法，在 "),t("code",[e._v("changedInternalState")]),e._v(" 方法中调用了 "),t("code",[e._v("setState")]),e._v("。")]),e._v(" "),t("p",[e._v("下面将以高亮的方式标出重点代码（不是新增代码）。")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("abstract class ModalRoute extends TransitionRoute with LocalHistoryRoute {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @protected\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void setState(VoidCallback fn) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (_scopeKey.currentState != null) {\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" _scopeKey.currentState!._routeSetState(fn);\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" } else {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // The route isn't currently visible, so we don't have to call its setState\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // method, but we do still need to call the fn callback, otherwise the state\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // in the route won't be updated!\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" fn();\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("...\n}\n")])])]),t("p",[e._v("这个 "),t("code",[e._v("ModalRoute")]),e._v(" 内的 "),t("code",[e._v("setState")]),e._v(" 会使 "),t("code",[e._v("_ModalScopeStatus")]),e._v(" 的 "),t("code",[e._v("_routeSetState")]),e._v(" 被调用，然后触发 "),t("code",[e._v("_ModalScopeState")]),e._v(" 的 "),t("code",[e._v("setState")]),e._v("，接着其 "),t("code",[e._v("child: _ModalScopeStatus")]),e._v(" 就开始 "),t("code",[e._v("rebuild")]),e._v(" 了。")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("class _ModalScopeState extends State<_ModalScope> {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void _routeSetState(VoidCallback fn) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (widget.route.isCurrent && !_shouldIgnoreFocusRequest && _shouldRequestFocus) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" widget.route.navigator!.focusNode.enclosingScope?.setFirstFocus(focusScopeNode);\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" setState(fn);\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" \n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" \n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" Widget build(BuildContext context) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return AnimatedBuilder(\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" child: _ModalScopeStatus(\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ),\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" );\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),e._v("}\n")])])]),t("p",[e._v("如下代码所示，"),t("code",[e._v("_ModalScopeStatus")]),e._v(" 是一个 "),t("code",[e._v("InheritedWidget")]),e._v("，在经过一系列的处理后最终会走到其 "),t("code",[e._v("InheritedElement")]),e._v(" 的 "),t("code",[e._v("update")]),e._v(" 方法，在 "),t("code",[e._v("update")]),e._v(" 方法中通过调用 "),t("code",[e._v("updateShouldNotify")]),e._v(" 来判断数据是否发生变化，进而决定是否通知相关依赖。")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" class _ModalScopeStatus extends InheritedWidget {\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" bool updateShouldNotify(_ModalScopeStatus old) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return isCurrent != old.isCurrent ||\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" canPop != old.canPop ||\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" impliesAppBarDismissal != old.impliesAppBarDismissal ||\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" route != old.route;\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),e._v("}\n")])])]),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("class InheritedElement extends ProxyElement {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void updated(InheritedWidget oldWidget) {\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if ((widget as InheritedWidget).updateShouldNotify(oldWidget)) {\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.updated(oldWidget);\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")])]),e._v("}\n")])])]),t("p",[t("code",[e._v("_ModalScopeStatus")]),e._v(" 的 "),t("code",[e._v("isCurrent")]),e._v(" 表示当前页面是否处于最上层，所以在打开和关闭下一个页面时，其值必定切换，也就是 "),t("code",[e._v("updateShouldNotify")]),e._v(" 必定返回 "),t("code",[e._v("true")]),e._v("，既而通知依赖（实际上就是找出一个个依赖进行标脏，然后等待 "),t("code",[e._v("build")]),e._v(" 方法的重新调用）。")]),e._v(" "),t("p",[e._v("而我们在使用 "),t("code",[e._v("ModalRoute.of")]),e._v(" 的时候，内部就是将当前页的 "),t("code",[e._v("BuildContext")]),e._v(" 添加到依赖中，所以他这个改动就会影响到使用 "),t("code",[e._v("ModalRoute.of")]),e._v(" 的 "),t("code",[e._v("Widget")]),e._v("，使其多次 "),t("code",[e._v("rebuild")]),e._v("。")]),e._v(" "),t("div",{staticClass:"language-dart extra-class"},[t("pre",{pre:!0,attrs:{class:"language-dart"}},[t("code",[t("span",{pre:!0,attrs:{class:"token metadata function"}},[e._v("@optionalTypeArgs")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("static")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("ModalRoute")]),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),e._v(" of"),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("extends")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("Object")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BuildContext")]),e._v(" context"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("final")]),e._v(" _ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),e._v(" widget "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" context"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("dependOnInheritedWidgetOfExactType"),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("_ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" widget"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("route "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("as")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("ModalRoute")]),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),t("h2",{attrs:{id:"四、解决方案"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#四、解决方案"}},[e._v("#")]),e._v(" 四、解决方案")]),e._v(" "),t("h3",{attrs:{id:"方案一-调整-modalroute-of"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#方案一-调整-modalroute-of"}},[e._v("#")]),e._v(" 方案一：调整 "),t("code",[e._v("ModalRoute.of")])]),e._v(" "),t("p",[e._v("在当前版本中，"),t("code",[e._v("of")]),e._v(" 的用意就是找到相应的 "),t("code",[e._v("ModalRoute")]),e._v(" 并且创建依赖关系，当数据改变时会重新 "),t("code",[e._v("build")]),e._v(" ，这是符合它期望用意的。")]),e._v(" "),t("p",[e._v("但是有些场景下我们并不希望有这个 “"),t("strong",[e._v("特性")]),e._v("”，比如，我打开新页面后，通过 "),t("code",[e._v("ModalRoute.of(context)?.settings.arguments")]),e._v(" 取路由参数，当前页面的取参，与跳转和关闭下个页面是没有任何关系的，所以这种场景下触发 "),t("code",[e._v("rebuild")]),e._v(" 将毫无意义。")]),e._v(" "),t("p",[e._v("所以我提了个 "),t("code",[e._v("PR")]),e._v(": "),t("a",{attrs:{href:"https://github.com/flutter/flutter/pull/145389",target:"_blank",rel:"noopener noreferrer"}},[e._v("#145389"),t("OutboundLink")],1),e._v(", 给 "),t("code",[e._v("ModalRoute.of")]),e._v(" 添加了 "),t("code",[e._v("createDependency")]),e._v(" 参数，为开发者提供了是否创建依赖的选择。目前还在审核中~")]),e._v(" "),t("div",{staticClass:"language-dart extra-class"},[t("pre",{pre:!0,attrs:{class:"language-dart"}},[t("code",[e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("static")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("ModalRoute")]),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),e._v(" of"),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("extends")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("Object")]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("BuildContext")]),e._v(" context"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n bool createDependency "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[e._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n _ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),e._v(" widget"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("if")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("createDependency"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n widget "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" context"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("dependOnInheritedWidgetOfExactType"),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("_ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("else")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n widget "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" context\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("getElementForInheritedWidgetOfExactType"),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),e._v("_ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("widget "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("as")]),e._v(" _ModalScopeStatus"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" widget"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),e._v("route "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("as")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("ModalRoute")]),t("span",{pre:!0,attrs:{class:"token generics"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("T")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(">")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),t("h3",{attrs:{id:"方案二-魔改源码"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#方案二-魔改源码"}},[e._v("#")]),e._v(" 方案二：魔改源码")]),e._v(" "),t("p",[e._v("原 "),t("code",[e._v("PR")]),e._v(" 是对 "),t("code",[e._v("Tab")]),e._v(" 键切换焦点问题的修复，但对于移动端来说根本不算问题，因为用不上~ 😅 （当然，如果你们的用户有使用无障碍功能的，还需要自行斟酌一下）")]),e._v(" "),t("p",[e._v("如果这个问题到时还未解决（原 "),t("code",[e._v("PR")]),e._v(" 的作者还在休假），那我们也可以先注释掉相关代码对 "),t("code",[e._v("changedInternalState")]),e._v(" 的调用来应对")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("// packages/flutter/lib/src/widgets/routes.dart\n\nabstract class ModalRoute extends TransitionRoute with LocalHistoryRoute {\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" ...\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void didChangeNext(Route? nextRoute) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.didChangeNext(nextRoute);\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // changedInternalState();\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" @override\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" void didPopNext(Route nextRoute) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" super.didPopNext(nextRoute);\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" // changedInternalState();\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("}\n")])])]),t("p",[e._v("提供一个补丁")]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("# 进入你的 flutter 目录，比如我用的是 fvm 下载的 3.19.3")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("# 记得将 cd 后面的路径换成你自己电脑上的~")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" /Users/lxf/fvm/versions/3.19.3\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("# 下载补丁")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("curl")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[e._v("-O")]),e._v(" https://raw.githubusercontent.com/LinXunFeng/flutter_assets/main/patch/01_rollbak_3_19_routes_change/0001-Roll-back-changes-to-routes.dart.patch\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[e._v("# 应用补丁")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("git")]),e._v(" apply 0001-Roll-back-changes-to-routes.dart.patch\n")])])]),t("h2",{attrs:{id:"五、最后"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#五、最后"}},[e._v("#")]),e._v(" 五、最后")]),e._v(" "),t("p",[e._v("总而言之，距离5月1日（苹果强制要求添加隐私清单文件的期限）还有一个月，我们现在大可保持在 "),t("code",[e._v("3.13")]),e._v(" 版本先用着，免得折腾，同时也祈祷快点修复该问题，然后顺利升级上去~")])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/141.c35f2fa7.js b/assets/js/141.c35f2fa7.js new file mode 100644 index 000000000..2ac4d9431 --- /dev/null +++ b/assets/js/141.c35f2fa7.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[141],{493:function(t,e,a){"use strict";a.r(e);var s=a(14),r=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"一、概述"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),e("p",[t._v("等了这么久，就在 "),e("code",[t._v("4月9号")]),t._v(" 这一天，"),e("code",[t._v("Shorebird")]),t._v(" 的 "),e("code",[t._v("1.0")]),t._v(" 正式版终于来了！本次最关心的还是对 "),e("code",[t._v("iOS")]),t._v(" 的热更新支持得如何了，因为在之前的版本中，"),e("code",[t._v("iOS")]),t._v(" 的性能表现简直差到无法使用~")]),t._v(" "),e("p",[t._v("先给个结论："),e("code",[t._v("iOS")]),t._v(" 端终于能用了！通过测试，"),e("code",[t._v("iOS")]),t._v(" 端打完补丁后的性能表现已达上线水平 🥳")]),t._v(" "),e("p",[t._v("需要注意的是：")]),t._v(" "),e("blockquote",[e("p",[e("code",[t._v("iOS")]),t._v(" 热更新稳定版本需要使用最新版本的 "),e("code",[t._v("Shorebird CLI (1.0.0)")]),t._v(" 和最新稳定版本的 "),e("code",[t._v("Flutter (3.19.5)")]),t._v("。")])]),t._v(" "),e("p",[e("strong",[t._v("但是")])]),t._v(" "),e("p",[t._v("对，但是，先不要着急用！")]),t._v(" "),e("h2",{attrs:{id:"二、踩坑"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#二、踩坑"}},[t._v("#")]),t._v(" 二、踩坑")]),t._v(" "),e("p",[t._v("我在发布的当天就升级到 "),e("code",[t._v("1.0")]),t._v(" 来尝尝鲜，结果在打完补丁后，有几个页面灰屏了！！！")]),t._v(" "),e("p",[t._v("当时脑袋嗡嗡的，我就只改了文本的颜色，不至于吧~ 😕")]),t._v(" "),e("p",[t._v("根据控制台的报错的内容定位到了项目里以下两处代码（已简化）")]),t._v(" "),e("div",{staticClass:"language-dart extra-class"},[e("pre",{pre:!0,attrs:{class:"language-dart"}},[e("code",[t._v("bool "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("_isExist")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SomeType")]),t._v(" type"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" model "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" state"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("models"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("firstWhere")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" element"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" type"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("div",{staticClass:"language-dart extra-class"},[e("pre",{pre:!0,attrs:{class:"language-dart"}},[e("code",[e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" value "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string-literal"}},[e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" json"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("decode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("推测 "),e("code",[t._v("tryCatch")]),t._v(" 失效了，然后我建了一个最小的 "),e("code",[t._v("Demo")]),t._v(" 做测试，竟然一切正常。。。")]),t._v(" "),e("p",[t._v("然后开始忙需求去了，直到 "),e("code",[t._v("4月15号")]),t._v(" 小伙伴说官方有提到相关说明，如下图所示")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202404172156171.png",alt:""}})]),t._v(" "),e("p",[t._v("还真是 "),e("code",[t._v("tryCatch")]),t._v(" 导致的，现在我们能做的就是静静的等待下个版本了。")]),t._v(" "),e("h2",{attrs:{id:"三、脚本适配-混编"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#三、脚本适配-混编"}},[t._v("#")]),t._v(" 三、脚本适配（混编）")]),t._v(" "),e("p",[t._v("关于基本使用，这里就不再赘述，有需要的小伙伴可以看我之前的两篇文章")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/pages/a0e176/"}},[t._v("Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/pages/e6f2c4/"}},[t._v("Flutter - 混编项目集成Shorebird热更新🐦（iOS篇）")])],1)]),t._v(" "),e("p",[t._v("我们接下来讲一讲升级到正式版后的一些调整")]),t._v(" "),e("blockquote",[e("p",[t._v("以下是 "),e("code",[t._v("Shorebird")]),t._v(" 的 "),e("code",[t._v("1.0")]),t._v(" 与 "),e("code",[t._v("0.22.1")]),t._v(" 版本之间的命令改动")])]),t._v(" "),e("h3",{attrs:{id:"ios-framework-alpha-改名为-ios-framework"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#ios-framework-alpha-改名为-ios-framework"}},[t._v("#")]),t._v(" "),e("code",[t._v("ios-framework-alpha")]),t._v(" 改名为 "),e("code",[t._v("ios-framework")])]),t._v(" "),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" shorebird release ios-framework-alpha --release-version 7.0.0+1\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" shorebird release ios-framework --release-version 7.0.0+1\n")])])])])]),e("h3",{attrs:{id:"flutter-versions-use-废弃"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#flutter-versions-use-废弃"}},[t._v("#")]),t._v(" "),e("code",[t._v("flutter versions use")]),t._v(" 废弃")]),t._v(" "),e("p",[t._v("现在你再按如下命令执行，会提示你找不到 "),e("code",[t._v("use")])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("shorebird flutter versions use "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.19")]),t._v(".3\nCould not "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),t._v(" a subcommand named "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"use"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shorebird flutter versions"')]),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n\nUsage: shorebird flutter versions "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("subcommand"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("arguments"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n-h, "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--help")]),t._v(" Print this usage information.\n\nAvailable subcommands:\n list List available Flutter versions.\n\nRun "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shorebird help"')]),t._v(" to see global options.\n")])])]),e("p",[t._v("如果你需要指定 "),e("code",[t._v("Flutter")]),t._v(" 版本，就得在 "),e("code",[t._v("release")]),t._v(" 命令中使用 "),e("code",[t._v("--flutter-version")])]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("# 安卓\nshorebird release aar --release-version=7.0.0+1 --flutter-version=3.19.5\n\n# iOS\nshorebird release ios-framework --release-version=7.0.0+1 --flutter-version=3.19.5\n")])])]),e("h3",{attrs:{id:"release-的-force-废弃"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#release-的-force-废弃"}},[t._v("#")]),t._v(" "),e("code",[t._v("release")]),t._v(" 的 "),e("code",[t._v("--force")]),t._v(" 废弃")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("The "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--force")]),t._v(" flag has been deprecated\nIf you believe you have a valid reason to use the "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--force")]),t._v(" flag, please reach out to the Shorebird team by filing an issue at https://github.com/shorebirdtech/shorebird/issues/new\n")])])]),e("div",{staticClass:"language-diff extra-class"},[e("pre",{pre:!0,attrs:{class:"language-diff"}},[e("code",[e("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[e("span",{pre:!0,attrs:{class:"token prefix deleted"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" shorebird release aar -f --release-version 7.0.0+1\n")])]),e("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[e("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),e("span",{pre:!0,attrs:{class:"token line"}},[t._v(" shorebird release aar --release-version 7.0.0+1\n")])])])])]),e("h3",{attrs:{id:"flutter-3-19-补丁"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#flutter-3-19-补丁"}},[t._v("#")]),t._v(" "),e("code",[t._v("Flutter 3.19")]),t._v(" 补丁")]),t._v(" "),e("p",[t._v("在【"),e("a",{attrs:{href:"https://juejin.cn/post/7349124917378695180",target:"_blank",rel:"noopener noreferrer"}},[t._v("Flutter - 升级3.19之后页面多次rebuild？🤨"),e("OutboundLink")],1),t._v("】一文中有讲到补丁需要去到 "),e("code",[t._v("Flutter")]),t._v(" 源码目录下执行。我们知道，"),e("code",[t._v("Shorebird")]),t._v(" 的热更新是魔改 "),e("code",[t._v("Flutter")]),t._v(" 实现的，所以我们就需要去找到用来打包时的魔改版 "),e("code",[t._v("Flutter")]),t._v(" 的目录位置。")]),t._v(" "),e("p",[t._v("下载的 "),e("code",[t._v("Flutter")]),t._v(" 源码统一存放在如下目录")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("~/.shorebird/bin/cache/flutter\n\n"),e("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n├── 5b9d29d67adb059103beefb65710ee3dabae2f85\n├── 771d07b2cf97cf107bae6eeedcf41bdc9db772fa\n├── a3d5f7c614aa1cc4d6cb1506e74fd1c81678e68e\n├── a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da\n└── b9b23902966504a9778f4c07e3a3487fa84dcb2a\n")])])]),e("p",[t._v("但是目录中都是以 "),e("code",[t._v("hash")]),t._v(" 码命名的目录，要找到对应版本的目录，可以查看如下文件里的值")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[t._v("~/.shorebird/bin/internal/flutter.version\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da")]),t._v("\n")])])]),e("p",[t._v("如果原先的 "),e("code",[t._v("flutter versions use")]),t._v(" 还能用的话，一切就很简单了，先切到对应的 "),e("code",[t._v("Flutter")]),t._v(" 版本，然后 "),e("code",[t._v("cat")]),t._v(" 一下该文件，拿到 "),e("code",[t._v("hash")]),t._v(" 码就可以进入到对应版本的 "),e("code",[t._v("Flutter")]),t._v(" 目录，但是它已经被废弃了，所以得换另一个思路。")]),t._v(" "),e("p",[t._v("我们依旧可以通过 "),e("code",[t._v("flutter.version")]),t._v(" 拿到 "),e("code",[t._v("hash")]),t._v(" 码，但是它是当前最新受支持的 "),e("code",[t._v("Flutter")]),t._v(" 版本的，不过不慌，拿到后进入到该 "),e("code",[t._v("Flutter")]),t._v(" 目录，因为它是以 "),e("code",[t._v("git")]),t._v(" 的方式拉取下来的，所以有分支记录。")]),t._v(" "),e("p",[t._v("我们可以通过 "),e("code",[t._v("git rev-parse")]),t._v(" 命令拿到指定版本的 "),e("code",[t._v("hash")]),t._v("。")]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("git")]),t._v(" rev-parse "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--verify")]),t._v(" refs/remotes/origin/flutter_release/3.19.3\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 得到如下输出")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 0addba5b750987523c04ebe69e9755509369615a")]),t._v("\n")])])]),e("h2",{attrs:{id:"四、脚本使用-混编"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#四、脚本使用-混编"}},[t._v("#")]),t._v(" 四、脚本使用（混编）")]),t._v(" "),e("p",[t._v("专门服务于混编项目的 "),e("code",[t._v("Python")]),t._v(" 脚本，用于切换原生端集成 "),e("code",[t._v("Flutter")]),t._v(" 的方式（源码 或 二进制），以及封装 "),e("code",[t._v("Shorebird")]),t._v(" 命令的使用。")]),t._v(" "),e("blockquote",[e("p",[t._v("我们日常研发依旧使用的是源码依赖的方式，只会在打最终测试包时才需要通过脚本切到二进制依赖，并结合 "),e("code",[t._v("Jenkins")]),t._v(" 来辅助完成这种万年不变的无聊步骤~")])]),t._v(" "),e("p",[e("code",[t._v("Github")]),t._v(": "),e("a",{attrs:{href:"https://github.com/LinXunFeng/script_box/tree/main/flutter",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/script_box/tree/main/flutter"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"switch-flutter-integrate-py"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#switch-flutter-integrate-py"}},[t._v("#")]),t._v(" switch_flutter_integrate.py")]),t._v(" "),e("blockquote",[e("p",[t._v("切换 "),e("code",[t._v("Flutter")]),t._v(" 项目的集成方式")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("描述")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("code",[t._v("-p")])]),t._v(" "),e("td",[t._v("原生工程路径")])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("-f")])]),t._v(" "),e("td",[t._v("平台（"),e("code",[t._v("ios")]),t._v(" / "),e("code",[t._v("android")]),t._v("）")])])])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 二进制依赖")]),t._v("\npython switch_flutter_integrate.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'binary'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 源码依赖")]),t._v("\npython switch_flutter_integrate.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'source'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios'")]),t._v(" \n")])])]),e("h3",{attrs:{id:"shorebird-py"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#shorebird-py"}},[t._v("#")]),t._v(" shorebird.py")]),t._v(" "),e("blockquote",[e("p",[t._v("自动获取版本号，并执行 "),e("code",[t._v("Shorebird")]),t._v(" 相关命令")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("描述")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("code",[t._v("-p")])]),t._v(" "),e("td",[t._v("原生工程路径")])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("-s")])]),t._v(" "),e("td",[e("code",[t._v("Flutter")]),t._v(" 工程路径")])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("-m")])]),t._v(" "),e("td",[t._v("模式 （"),e("code",[t._v("release")]),t._v(" / "),e("code",[t._v("patch")]),t._v("）")])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("-f")])]),t._v(" "),e("td",[t._v("平台（"),e("code",[t._v("ios")]),t._v(" / "),e("code",[t._v("android")]),t._v("）")])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("--flutter_version")])]),t._v(" "),e("td",[e("code",[t._v("Flutter")]),t._v(" 版本号，如："),e("code",[t._v("3.19.3")])])]),t._v(" "),e("tr",[e("td",[e("code",[t._v("--patch_fix")])]),t._v(" "),e("td",[t._v("是否打 "),e("code",[t._v("3.19")]),t._v(" 补丁，如需要请传 "),e("code",[t._v("1")])])])])]),t._v(" "),e("div",{staticClass:"language-shell extra-class"},[e("pre",{pre:!0,attrs:{class:"language-shell"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# release")]),t._v("\npython shorebird.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" release "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" ios\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 指定 Flutter 版本，以及打 3.19 的补丁")]),t._v("\npython shorebird.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" release "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" ios "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--flutter_version")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.19")]),t._v(".3 "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--patch_fix")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# patch")]),t._v("\npython shorebird.py "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-p")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'原生工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-s")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Flutter工程路径'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-m")]),t._v(" patch "),e("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-f")]),t._v(" ios\n")])])])])}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/142.1068f32d.js b/assets/js/142.1068f32d.js new file mode 100644 index 000000000..b7ed9f401 --- /dev/null +++ b/assets/js/142.1068f32d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[142],{492:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("iframe",{attrs:{src:"//player.bilibili.com/player.html?aid=1753525870&bvid=BV1mt421w73a&cid=1522045890&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"500px"}}),t._v(" "),s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[s("code",[t._v("Pigeon")]),t._v(" 是一个可以帮助我们生成 "),s("code",[t._v("Flutter")]),t._v(" 与 "),s("code",[t._v("原生")]),t._v(" 的通信代码的工具，我们只需要关注其两侧主要的数据处理逻辑即可，从而提升效率。")]),t._v(" "),s("p",[s("code",[t._v("Flutter")]),t._v(" 端对于视频缓存功能主要还是依赖原生端比较成熟的实现方案，如下两个开源库")]),t._v(" "),s("ul",[s("li",[t._v("iOS: "),s("a",{attrs:{href:"https://github.com/ChangbaDevs/KTVHTTPCache",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/ChangbaDevs/KTVHTTPCache"),s("OutboundLink")],1)]),t._v(" "),s("li",[t._v("安卓: "),s("a",{attrs:{href:"https://github.com/danikula/AndroidVideoCache",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/danikula/AndroidVideoCache"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("其功能是：丢给它一个视频链接，它将生成一个具备缓存功能的播放代理链接。")]),t._v(" "),s("p",[t._v("接下来我们一起看看，如何使用 "),s("code",[t._v("Pigeon")]),t._v(" 并结合上述两个库来实现视频缓存插件。")]),t._v(" "),s("h2",{attrs:{id:"二、创建-plugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、创建-plugin"}},[t._v("#")]),t._v(" 二、创建 "),s("code",[t._v("Plugin")])]),t._v(" "),s("p",[t._v("使用如下命令生成插件项目，这里我指定iOS使用的是 "),s("code",[t._v("Swift")]),t._v("，安卓使用的是 "),s("code",[t._v("Kotlin")])]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("flutter create "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--template")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("plugin "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--platforms")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("android,ios "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-i")]),t._v(" swift "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-a")]),t._v(" kotlin 项目名\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 如：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# flutter create --template=plugin --platforms=android,ios -i swift -a kotlin video_cache")]),t._v("\n")])])]),s("h2",{attrs:{id:"三、原生依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、原生依赖"}},[t._v("#")]),t._v(" 三、原生依赖")]),t._v(" "),s("h3",{attrs:{id:"ios"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ios"}},[t._v("#")]),t._v(" iOS")]),t._v(" "),s("p",[t._v("打开在 "),s("code",[t._v("ios")]),t._v(" 目录下的 "),s("code",[t._v("podspec")]),t._v(" 文件（这里是 "),s("code",[t._v("video_cache.podspec")]),t._v("），添加相关的第三方库依赖，比如我这里依赖的是 "),s("code",[t._v("KTVHTTPCache")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("#\n# To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html.\n# Run `pod lib lint video_cache.podspec` to validate before publishing.\n#\nPod::Spec.new do |s|\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.name = 'video_cache'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.version = '0.0.1'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.summary = 'A new Flutter plugin project.'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.description = <<-DESC\n")])]),t._v("A new Flutter plugin project.\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" DESC\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.homepage = 'http://example.com'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.license = { :file => '../LICENSE' }\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.author = { 'Your Company' => 'email@example.com' }\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.source = { :path => '.' }\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.source_files = 'Classes/**/*'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.dependency 'Flutter'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.platform = :ios, '11.0'\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # Flutter.framework does not contain a i386 slice.\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES', 'EXCLUDED_ARCHS[sdk=iphonesimulator*]' => 'i386' }\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.swift_version = '5.0'\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" # KTVHTTPCache\n")]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" s.dependency 'KTVHTTPCache', '~> 3.0.0'\n")])]),t._v("end\n")])])]),s("h3",{attrs:{id:"安卓"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安卓"}},[t._v("#")]),t._v(" 安卓")]),t._v(" "),s("p",[t._v("打开在 "),s("code",[t._v("android")]),t._v(" 目录下的 "),s("code",[t._v("build.gradle")]),t._v(" 文件，添加")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("...\nandroid {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" dependencies {\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" testImplementation 'org.jetbrains.kotlin:kotlin-test'\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" testImplementation 'org.mockito:mockito-core:5.0.0'\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" implementation 'com.danikula:videocache:2.7.1'\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")])]),t._v("}\n")])])]),s("p",[t._v("然后在 "),s("code",[t._v("example/android")]),t._v(" 目录下的 "),s("code",[t._v("build.gradle")]),t._v(" 和 "),s("code",[t._v("settings.gradle")]),t._v(" 文件添加如下 "),s("code",[t._v("maven")]),t._v("，否则会找不到依赖库")]),t._v(" "),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("// build.gradle\n\nallprojects {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" repositories {\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven { url "https://jitpack.io" }\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" maven { url 'https://maven.aliyun.com/repository/public' }\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" google()\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" mavenCentral()\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),t._v("}\n...\n")])])]),s("div",{staticClass:"language-diff extra-class"},[s("pre",{pre:!0,attrs:{class:"language-diff"}},[s("code",[t._v("// settings.gradle\n\npluginManagement {\n"),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" ...\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" repositories {\n")])]),s("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(' maven { url "https://jitpack.io" }\n')]),s("span",{pre:!0,attrs:{class:"token prefix inserted"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" maven { url 'https://maven.aliyun.com/repository/public' }\n")])]),s("span",{pre:!0,attrs:{class:"token unchanged"}},[s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" google()\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" mavenCentral()\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" gradlePluginPortal()\n")]),s("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[t._v(" ")]),s("span",{pre:!0,attrs:{class:"token line"}},[t._v(" }\n")])]),t._v("}\n...\n")])])]),s("h2",{attrs:{id:"四、pigeon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、pigeon"}},[t._v("#")]),t._v(" 四、Pigeon")]),t._v(" "),s("h3",{attrs:{id:"添加依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#添加依赖"}},[t._v("#")]),t._v(" 添加依赖")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("pubspec.yaml")]),t._v(" 的 "),s("code",[t._v("dev_dependencies")]),t._v(" 下添加 "),s("code",[t._v("pigeon")]),t._v(" 依赖")]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("dev_dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("pigeon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" ^17.3.0\n")])])]),s("h3",{attrs:{id:"定义通信接口"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#定义通信接口"}},[t._v("#")]),t._v(" 定义通信接口")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("lib")]),t._v(" 目录外创建一个用来定义通信接口的 "),s("code",[t._v("dart")]),t._v(" 文件。")]),t._v(" "),s("p",[t._v("这里我们新建了一个与 "),s("code",[t._v("lib")]),t._v(" 目录同级的 "),s("code",[t._v("pigeons")]),t._v(" 文件夹，来存放与 "),s("code",[t._v("Pigeon")]),t._v(" 相关的文件")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v(".")]),t._v("\n├── lib\n│ ├── "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n│ └── "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n├── pigeons\n│ ├── cache.dart\n│ └── "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n├── "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n")])])]),s("p",[s("code",[t._v("cache.dart")]),t._v(" 就是我用来定义视频缓存功能相关的通信接口的文件。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:pigeon/pigeon.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/flutter/packages/blob/main/packages/pigeon/example/README.md")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@ConfigurePigeon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PigeonOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n dartOut"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lib/plugin/pigeon.g.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n kotlinOut"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'android/src/main/kotlin/com/lxf/video_cache/VideoCacheGeneratedApis.g.kt'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n kotlinOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KotlinOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/fluttercommunity/wakelock_plus/issues/18")]),t._v("\n errorClassName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"LXFVideoCacheFlutterError"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n swiftOut"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ios/Classes/LXFVideoCacheGeneratedApis.g.swift'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@HostApi")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFVideoCacheHostApi")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 转换为缓存代理URL")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("convertToCacheProxyUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"生成交互代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#生成交互代码"}},[t._v("#")]),t._v(" 生成交互代码")]),t._v(" "),s("p",[t._v("再执行如下命令，指定根据 "),s("code",[t._v("cache.dart")]),t._v(" 来生成相应的繁杂且重要的交互代码。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("flutter pub run pigeon "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--input")]),t._v(" pigeons/cache.dart\n")])])]),s("h3",{attrs:{id:"坑点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#坑点"}},[t._v("#")]),t._v(" 坑点")]),t._v(" "),s("p",[t._v("一定一定，一定要自定义 "),s("code",[t._v("kotlinOptions")]),t._v(" 里的 "),s("code",[t._v("errorClassName")]),t._v("，不然它会给你生成默认的 "),s("code",[t._v("FlutterError")]),t._v("，单单自己的插件编译可能不会怎样，但是一旦集成的项目里也有用到其它用 "),s("code",[t._v("Pigeon")]),t._v(" 生成了 "),s("code",[t._v("FlutterError")]),t._v(" 的插件时，就会报如下错误了")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("Type FlutterError is defined multiple "),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("times")]),t._v("\n")])])]),s("p",[t._v("自定义 "),s("code",[t._v("kotlinOptions")]),t._v(" 里的 "),s("code",[t._v("errorClassName")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@ConfigurePigeon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PigeonOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n kotlinOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KotlinOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/fluttercommunity/wakelock_plus/issues/18")]),t._v("\n errorClassName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"LXFVideoCacheFlutterError"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"五、编写原生代码"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#五、编写原生代码"}},[t._v("#")]),t._v(" 五、编写原生代码")]),t._v(" "),s("h3",{attrs:{id:"ios-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ios-2"}},[t._v("#")]),t._v(" iOS")]),t._v(" "),s("p",[t._v("进入到 "),s("code",[t._v("example/ios")]),t._v(" 目录下，安装依赖")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" example/ios \npod "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" --repo-update\n")])])]),s("p",[t._v("使用 "),s("code",[t._v("Xcode")]),t._v(" 打开 "),s("code",[t._v("Runner.xcworkspace")]),t._v(" 开始编写原生代码")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// VideoCachePlugin.swift")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Flutter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIKit")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KTVHTTPCache")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建插件时自动生成的类")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VideoCachePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NSObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterPlugin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("with registrar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterPluginRegistrar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册实现")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFVideoCacheHostApiSetup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setUp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n binaryMessenger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" registrar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("messenger")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFVideoCacheHostApiImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFVideoCacheHostApiImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFVideoCacheHostApi")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 是否可以代理")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" canProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bool")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("convertToCacheProxyUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throws")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 还未试过开启代理服务")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KTVHTTPCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyStart")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token nil constant"}},[t._v("nil")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无法代理")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canProxy"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无法转 URL 对象")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("guard")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" urlObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("URL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("guard")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" proxyUrlObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KTVHTTPCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyURL")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("withOriginalURL"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" urlObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代理失败")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" url\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代理成功")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" proxyUrlObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("absoluteString\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"安卓-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安卓-2"}},[t._v("#")]),t._v(" 安卓")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("AndroidStudio")]),t._v(" 打开 "),s("code",[t._v("example/android")]),t._v("，找到外层的 "),s("code",[t._v("android")]),t._v(" 项目开始编写原生代码")]),t._v(" "),s("div",{staticClass:"language-kotlin extra-class"},[s("pre",{pre:!0,attrs:{class:"language-kotlin"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("package")]),t._v(" com"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("video_cache\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" LXFVideoCacheHostApi\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" com"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("danikula"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("videocache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("HttpProxyCacheServer\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("embedding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("engine"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("plugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FlutterPlugin\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("plugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("common"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MethodCall\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("plugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("common"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MethodChannel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MethodCallHandler\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" io"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("flutter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("plugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("common"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MethodChannel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Result\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** VideoCachePlugin */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" VideoCachePlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FlutterPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" MethodCallHandler "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("lateinit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" videoCacheHostApiImplementation"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LXFVideoCacheHostApiImplementation\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAttachedToEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FlutterPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FlutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n videoCacheHostApiImplementation "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("LXFVideoCacheHostApiImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 初始化插件")]),t._v("\n LXFVideoCacheHostApi"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setUp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n flutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("binaryMessenger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n videoCacheHostApiImplementation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onDetachedFromEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("binding"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FlutterPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FlutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 关闭服务")]),t._v("\n videoCacheHostApiImplementation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shutdown")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMethodCall")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("call"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MethodCall"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("LXFVideoCacheHostApiImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("val")]),t._v(" flutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FlutterPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("FlutterPluginBinding\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LXFVideoCacheHostApi "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 懒加载缓存服务")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("val")]),t._v(" cacheServer "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("by")]),t._v(" lazy "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" HttpProxyCacheServer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flutterPluginBinding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("applicationContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 重写并通过 cacheServer 将原 url 转换为具备缓存功能的 url")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("convertToCacheProxyUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" cacheServer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProxyUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 关闭服务")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shutdown")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cacheServer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shutdown")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"六、开源库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#六、开源库"}},[t._v("#")]),t._v(" 六、开源库")]),t._v(" "),s("p",[t._v("上述视频缓存插件已开源，并发布至 "),s("code",[t._v("GitHub")]),t._v("："),s("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_video_cache",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_video_cache"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("你可以通过如下步骤集成使用：")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("pubspec.yaml")]),t._v(" 中添加 "),s("code",[t._v("video_cache")]),t._v(" 依赖")]),t._v(" "),s("div",{staticClass:"language-yaml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-yaml"}},[s("code",[s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("video_cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" latest_version\n")])])]),s("p",[t._v("使用")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 导入")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:video_cache/video_cache.dart'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将原视频链接转为缓存代理链接")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" url "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nurl "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VideoCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("convertToCacheProxyUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// url转换结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// http://localhost:50050/https%3A%2F%2Fflutter%2Egithub%2Eio%2Fassets%2Dfor%2Dapi%2Ddocs%2Fassets%2Fvideos%2Fbee%2Emp4/KTVHTTPCachePlaceHolder/KTVHTTPCacheLastPathComponent.mp4")]),t._v("\n")])])]),s("p",[t._v("然后把转换后的 "),s("code",[t._v("url")]),t._v(" 丢给播放器就可以了~")]),t._v(" "),s("h2",{attrs:{id:"七、结尾"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#七、结尾"}},[t._v("#")]),t._v(" 七、结尾")]),t._v(" "),s("p",[t._v("以上就是 "),s("code",[t._v("Flutter")]),t._v(" 与原生交互拿到代理 "),s("code",[t._v("url")]),t._v(" 的例子，使用的是 "),s("code",[t._v("@HostApi")]),t._v("，而如果你如果在原生端去调用 "),s("code",[t._v("Flutter")]),t._v(" 的 "),s("code",[t._v("api")]),t._v("，则使用 "),s("code",[t._v("@FlutterApi")]),t._v(" 去标注相关抽象类即可，使用方法是差不多的。")]),t._v(" "),s("p",[t._v("需要注意的是，当你使用 "),s("code",[t._v("Swift")]),t._v(" 去写插件，且使用了 "),s("code",[t._v("@FlutterApi")]),t._v(" 去生成相应的原生代码后编译，可能会遇到这个错误")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("type 'FlutterError' does not conform to protocol 'Error'\n")])])]),s("p",[t._v("添加如下拓展即可")]),t._v(" "),s("div",{staticClass:"language-swift extra-class"},[s("pre",{pre:!0,attrs:{class:"language-swift"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// https://github.com/flutter/flutter/issues/136081")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"八、资料"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#八、资料"}},[t._v("#")]),t._v(" 八、资料")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/flutter/packages/blob/main/packages/pigeon/example/README.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/packages/blob/main/packages/pigeon/example/README.md"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/143.e2755ea1.js b/assets/js/143.e2755ea1.js new file mode 100644 index 000000000..cc55d397d --- /dev/null +++ b/assets/js/143.e2755ea1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[143],{494:function(t,a,s){"use strict";s.r(a);var e=s(14),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"一、概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),a("p",[t._v("在常规的纯 "),a("code",[t._v("Flutter")]),t._v(" 项目中，我们只需要通过 "),a("code",[t._v("SystemChrome.setPreferredOrientations")]),t._v(" 方法就可以轻松驾驭屏幕旋转的需求，但相信很多还在整混编项目的老铁在 "),a("code",[t._v("iOS")]),t._v(" 上碰了壁，因为一般情况下，原生项目里都会把方向选项全部去掉，只保留 "),a("code",[t._v("Portrait")]),t._v("，如下图所示")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406021457716.png",alt:""}})]),t._v(" "),a("p",[t._v("如果你原来就是一位 "),a("code",[t._v("iOS")]),t._v(" 开发者，那自然是小问题，通过 "),a("code",[t._v("MethodChannel")]),t._v(" 与原生进行通信，然后一顿代码输出就搞定了，但如果你不是 "),a("code",[t._v("iOS")]),t._v(" 开发者呢，那就有点无从下手了。")]),t._v(" "),a("p",[t._v("今天就跟大家分享一个我自己做的 "),a("code",[t._v("Flutter")]),t._v(" 屏幕旋转插件，只需几步即可轻松搞定这个功能。")]),t._v(" "),a("p",[t._v("等等，为啥不说安卓？那是因为 "),a("code",[t._v("SystemChrome.setPreferredOrientations")]),t._v(" 不管是纯 "),a("code",[t._v("Flutter")]),t._v(" 还是混编，对安卓一直都有效~")]),t._v(" "),a("p",[t._v("好吧，接下来就是手把手教学时刻。")]),t._v(" "),a("h2",{attrs:{id:"二、集成"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、集成"}},[t._v("#")]),t._v(" 二、集成")]),t._v(" "),a("p",[t._v("大胆的将 "),a("code",[t._v("switch_orientation")]),t._v(" 添加到你的 "),a("code",[t._v("pubspec.yaml")]),t._v(" 文件中")]),t._v(" "),a("div",{staticClass:"language-yaml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-yaml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token key atrule"}},[t._v("switch_orientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" latest_version\n")])])]),a("p",[t._v("具体版本大家到 "),a("code",[t._v("pub.dev")]),t._v(" 上复制粘贴最新的吧，附上链接："),a("a",{attrs:{href:"https://pub.dev/packages/switch_orientation",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://pub.dev/packages/switch_orientation"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"三、配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、配置"}},[t._v("#")]),t._v(" 三、配置")]),t._v(" "),a("blockquote",[a("p",[t._v("安卓不需要配置，仅 "),a("code",[t._v("iOS")]),t._v(" 需要")])]),t._v(" "),a("h3",{attrs:{id:"swift-项目"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#swift-项目"}},[t._v("#")]),t._v(" "),a("code",[t._v("Swift")]),t._v(" 项目")]),t._v(" "),a("p",[t._v("如果你的原生项目是 "),a("code",[t._v("Swift")]),t._v(" 项目，那是最好了。")]),t._v(" "),a("p",[t._v("打开 "),a("code",[t._v("AppDelegate.swift")]),t._v(" 文件")]),t._v(" "),a("ul",[a("li",[t._v("导入 "),a("code",[t._v("LXFProtocolTool")])]),t._v(" "),a("li",[t._v("重写 "),a("code",[t._v("supportedInterfaceOrientationsForWindow")]),t._v(" 方法，并返回 "),a("code",[t._v("UIApplication.shared.lxf.currentVcOrientationMask")])])]),t._v(" "),a("p",[t._v("具体代码如下所示")]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFProtocolTool")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@UIApplicationMain")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@objc")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppDelegate")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FlutterAppDelegate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("override")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("application")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token omit keyword"}},[t._v("_")]),t._v(" application"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" supportedInterfaceOrientationsFor window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIWindow")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIInterfaceOrientationMask")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("shared"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentVcOrientationMask\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"oc-项目"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#oc-项目"}},[t._v("#")]),t._v(" "),a("code",[t._v("OC")]),t._v(" 项目")]),t._v(" "),a("p",[t._v("如果你的原生项目是 "),a("code",[t._v("OC")]),t._v(" 项目，则需要按如下步骤创建相应文件与添加代码")]),t._v(" "),a("p",[t._v("选择 "),a("code",[t._v("New File...")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406021458258.png",alt:""}})]),t._v(" "),a("p",[t._v("选择 "),a("code",[t._v("Swift File")]),t._v("，点击 "),a("code",[t._v("Next")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406021458830.png",alt:""}})]),t._v(" "),a("p",[t._v("文件名看你自己的用途，我这里是用来存储对 "),a("code",[t._v("AppDelegate")]),t._v(" 的拓展，所以命名为 "),a("code",[t._v("AppDelegate+Extension.swift")]),t._v("，点击 "),a("code",[t._v("Create")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406021458344.png",alt:""}})]),t._v(" "),a("p",[t._v("接下来这一步很关键，一定要点击 "),a("code",[t._v("Create Bridging Header")]),t._v(" 来创建桥头文件，它的命名规则为 "),a("code",[t._v("项目名-Bridging-Header.h")]),t._v("。")]),t._v(" "),a("p",[t._v("当然，如果你的项目之前创建过桥头文件，它就不会有该提示了，跳过这一步即可~")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406021458808.png",alt:""}})]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("AppDelegate+Extension.swift")]),t._v(" 文件中添加如下代码，供 "),a("code",[t._v("OC")]),t._v(" 访问。")]),t._v(" "),a("div",{staticClass:"language-swift extra-class"},[a("pre",{pre:!0,attrs:{class:"language-swift"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Foundation")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LXFProtocolTool")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extension")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppDelegate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attribute atrule"}},[t._v("@objc")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("func")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("lxf_supportedInterfaceOrientations")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("->")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIInterfaceOrientationMask")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIApplication")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("shared"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lxf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentVcOrientationMask\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("在桥接文件 "),a("code",[t._v("项目名-Bridging-Header.h")]),t._v(" 中添加如下代码")]),t._v(" "),a("blockquote",[a("p",[t._v("其作用就是让 "),a("code",[t._v("Swift")]),t._v(" 文件可以访问指定的 "),a("code",[t._v("OC")]),t._v(" 文件里的代码。")])]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"AppDelegate.h"')])]),t._v("\n")])])]),a("p",[t._v("回到 "),a("code",[t._v("AppDelegate.m")]),t._v(" 文件")]),t._v(" "),a("ul",[a("li",[t._v("导入 "),a("code",[t._v("项目名-Swift.h")]),t._v("，这样就可以在 "),a("code",[t._v("OC")]),t._v(" 中访问 "),a("code",[t._v("Swift")]),t._v(" 代码")]),t._v(" "),a("li",[t._v("在 "),a("code",[t._v("supportedInterfaceOrientationsForWindow")]),t._v(" 方法中调用 "),a("code",[t._v("lxf_supportedInterfaceOrientations")]),t._v(" 并将结果返回")])]),t._v(" "),a("p",[t._v("具体代码如下所示")]),t._v(" "),a("div",{staticClass:"language-objc extra-class"},[a("pre",{pre:!0,attrs:{class:"language-objc"}},[a("code",[a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"AppDelegate.h"')])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token macro property"}},[a("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),a("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"LXFOCProject-Swift.h"')])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@interface")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("AppDelegate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@implementation")]),t._v(" AppDelegate\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIInterfaceOrientationMask"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("application"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIApplication "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("application supportedInterfaceOrientationsForWindow"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UIWindow "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("window "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),t._v(" lxf_supportedInterfaceOrientations"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("@end")]),t._v("\n")])])]),a("p",[t._v("OK，大功告成，接下来就可以愉快地去使用了~")]),t._v(" "),a("h2",{attrs:{id:"四、使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、使用"}},[t._v("#")]),t._v(" 四、使用")]),t._v(" "),a("p",[t._v("跟 "),a("code",[t._v("SystemChrome.setPreferredOrientations")]),t._v(" 的使用方式一模一样，只要将 "),a("code",[t._v("SystemChrome")]),t._v(" 替换成 "),a("code",[t._v("SwitchOrientation")]),t._v(" 即可。")]),t._v(" "),a("p",[t._v("仅竖屏")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwitchOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setPreferredOrientations")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("portraitUp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("仅横屏")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwitchOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setPreferredOrientations")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("landscapeLeft"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("landscapeRight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("横竖屏")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SwitchOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setPreferredOrientations")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("portraitUp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("portraitDown"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("landscapeLeft"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceOrientation")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("landscapeRight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"五、最后"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#五、最后"}},[t._v("#")]),t._v(" 五、最后")]),t._v(" "),a("p",[t._v("我已将上述的 "),a("code",[t._v("Flutter")]),t._v(" 屏幕旋转插件发布至 "),a("code",[t._v("GitHub")]),t._v(": "),a("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_switch_orientation",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_switch_orientation"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("另外，如果你的原生项目有全屏旋转的需要，也可以继续使用我的原生库: "),a("a",{attrs:{href:"https://github.com/LinXunFeng/LXFProtocolTool",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/LXFProtocolTool"),a("OutboundLink")],1),t._v("，功能强大且简单易用。")]),t._v(" "),a("p",[t._v("好了，开源不易，如果你也觉得这个库好用，请不吝给个 "),a("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),a("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/144.c651a81e.js b/assets/js/144.c651a81e.js new file mode 100644 index 000000000..76b67dfe2 --- /dev/null +++ b/assets/js/144.c651a81e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[144],{495:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"一、概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),a("p",[t._v("我们的 "),a("code",[t._v("App")]),t._v(" 是集成了 "),a("code",[t._v("Sentry")]),t._v(" 进行错误跟踪和性能监控，在最近几个月里经常看到如下错误")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("ClientException: Connection closed before full header was received, uri=https://xxx.png\n")])])]),a("p",[t._v("加载图片的时候报错了，但是尝试了很多次，自己始终无法复现出来~")]),t._v(" "),a("h2",{attrs:{id:"二、摸索"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、摸索"}},[t._v("#")]),t._v(" 二、摸索")]),t._v(" "),a("p",[t._v("后面进行搜索找到了 "),a("code",[t._v("2019")]),t._v(" 年 "),a("code",[t._v("12")]),t._v(" 月的一个 "),a("code",[t._v("issue")])]),t._v(" "),a("ul",[a("li",[t._v("https://github.com/flutter/flutter/issues/41573")])]),t._v(" "),a("p",[t._v("不太一样的是人家是请求接口的时候出现的报错。")]),t._v(" "),a("p",[t._v("提出 "),a("code",[t._v("issue")]),t._v(" 的作者当时是通过 "),a("code",[t._v("Method Channel")]),t._v(" 的方式由原生端去请求来解决这个问题，即避开了使用 "),a("code",[t._v("http")]),t._v(" 这个包。")]),t._v(" "),a("p",[t._v("有人说这种情况，改用 "),a("code",[t._v("dio")]),t._v(" 即可~")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406042253062.png",alt:""}})]),t._v(" "),a("p",[t._v("也有人说这种情况，加个延迟就可以解决~")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406042253818.png",alt:""}})]),t._v(" "),a("p",[t._v("但我们这种加载图片场景哪有机会加延迟呢，当然用这种方式也不靠谱~")]),t._v(" "),a("p",[t._v("时隔两年后（"),a("code",[t._v("2021")]),t._v(" 年 "),a("code",[t._v("12")]),t._v(" 月），根据 "),a("code",[t._v("issue")]),t._v(" 的种种描述，有人确定了问题，并提了一个 "),a("code",[t._v("Dart")]),t._v(" 的 "),a("code",[t._v("issue")])]),t._v(" "),a("ul",[a("li",[t._v("https://github.com/dart-lang/sdk/issues/47841")])]),t._v(" "),a("p",[t._v("大致上就是说 "),a("code",[t._v("Dart")]),t._v(" 端拒绝了服务器发起的 "),a("code",[t._v("TLS")]),t._v(" 重协商导致。")]),t._v(" "),a("blockquote",[a("p",[t._v("重协商是指在已经协商好的SSL/TLS TCP连接上重新协商, 用以更换算法、更换数字证书、重新验证对方身份、更新共享密钥等。 --摘自《"),a("a",{attrs:{href:"https://www.cnblogs.com/blacksunny/articles/12185108.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("SSL/TLS攻击介绍--重协商漏洞攻击"),a("OutboundLink")],1),t._v("》")])]),t._v(" "),a("p",[t._v("我想 "),a("code",[t._v("Dart")]),t._v(" 不允许 "),a("code",[t._v("TLS")]),t._v(" 重协商应该也是出于安全考虑吧~")]),t._v(" "),a("h2",{attrs:{id:"三、解决"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、解决"}},[t._v("#")]),t._v(" 三、解决")]),t._v(" "),a("p",[t._v("提 "),a("code",[t._v("issue")]),t._v(" 的作者也为此，于 "),a("code",[t._v("2022")]),t._v(" 年 "),a("code",[t._v("2")]),t._v(" 月份提了 "),a("code",[t._v("PR")]),t._v("，给 "),a("code",[t._v("SecurityContext")]),t._v(" 添加了 "),a("code",[t._v("allowLegacyUnsafeRenegotiation")]),t._v(" 属性以允许重协商，在同年 "),a("code",[t._v("4")]),t._v(" 月份得到合并了，但依旧出于安全考虑，默认为关闭状态，是否开启由开发者自己决定。")]),t._v(" "),a("p",[t._v("附上该属性的相关说明：https://api.flutter.dev/flutter/dart-io/SecurityContext/allowLegacyUnsafeRenegotiation.html")]),t._v(" "),a("p",[t._v("以及相关修复："),a("a",{attrs:{href:"https://github.com/dart-lang/sdk/commit/c286b76c2db394b72bd8ae79b32d024c2d25c52b#diff-6e59fb0cec49044e49bde0cd8d7a9d3614fa47575bb58c36db6b714b90edf559",target:"_blank",rel:"noopener noreferrer"}},[t._v("Allow sockets to enable TLS renegotiation. · dart-lang/sdk@c286b76 (github.com)"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("注：该属性从 "),a("code",[t._v("Dart 2.17.0")]),t._v(" 开始存在，对应的 "),a("code",[t._v("Flutter")]),t._v(" 版本是 "),a("code",[t._v("3.0.0")]),t._v("。")]),t._v(" "),a("p",[t._v("加了 "),a("code",[t._v("allowLegacyUnsafeRenegotiation")]),t._v(" 属性之后，我们可以按如下代码去使用")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" context "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SecurityContext")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaultContext"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("allowLegacyUnsafeRenegotiation "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" httpClient "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HttpClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" client "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IOClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("httpClient"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" client"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uri")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://your_uri.net'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("代码取自：https://stackoverflow.com/a/73287131/8577739")]),t._v(" "),a("h2",{attrs:{id:"四、调整-cachednetworkimage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、调整-cachednetworkimage"}},[t._v("#")]),t._v(" 四、调整 CachedNetworkImage")]),t._v(" "),a("p",[t._v("在我们的项目中，所使用的图片加载库为 "),a("code",[t._v("cached_network_image")]),t._v("，接下来我们就一起来看看如何调整以开启 "),a("code",[t._v("TLS")]),t._v(" 重协商功能。")]),t._v(" "),a("p",[t._v("在 "),a("code",[t._v("CachedNetworkImage")]),t._v(" 类中有一个 "),a("code",[t._v("cacheManager")]),t._v(" 属性，如果我们不设置的话则后续默认使用的是 "),a("code",[t._v("DefaultCacheManager")]),t._v(" 实例")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" key "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'libCachedImageData'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),t._v(" _instance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" _instance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Config")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("可以看到其继承于 "),a("code",[t._v("CacheManager")])]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BaseCacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Config")]),t._v(" config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _config "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _webHelper "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WebHelper")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fileService"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("CacheManager")]),t._v(" 接收一个 "),a("code",[t._v("Config")]),t._v(" 对象")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("abstract")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Config")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// [fileService] defines where files are fetched, for example online.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Config")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" cacheKey"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),t._v(" stalePeriod"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n int maxNrOfCacheObjects"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheInfoRepository")]),t._v(" repo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileSystem")]),t._v(" fileSystem"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileService")]),t._v(" fileService"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("impl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")])]),t._v("Config")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FileService")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" fileService"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("这里我们就可以利用 "),a("code",[t._v("fileService")]),t._v(" 来指定 "),a("code",[t._v("httpClient")]),t._v("，以此帮我们解决上述报错问题")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HttpClient")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("httpClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" context "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SecurityContext")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaultContext"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("allowLegacyUnsafeRenegotiation "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HttpClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义 CacheManager")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _LXFCachedNetworkImageManager "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CacheManager")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCacheManager")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为了不影响之前的缓存，保持使用相同的 key")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" key "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultCacheManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" _LXFCachedNetworkImageManager _instance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n _LXFCachedNetworkImageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("factory")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_LXFCachedNetworkImageManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" _instance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _LXFCachedNetworkImageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Config")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 指定 httpClient")]),t._v("\n fileService"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HttpFileService")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n httpClient"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IOClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("httpClient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("使用时配置上 "),a("code",[t._v("cacheManager")]),t._v(" 即可，如下所示")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CachedNetworkImage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n imageUrl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n cacheManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_LXFCachedNetworkImageManager")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("但每个地方都这样写实在是太不优雅了，所以大家自行进行封装吧~")]),t._v(" "),a("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/145.78366984.js b/assets/js/145.78366984.js new file mode 100644 index 000000000..2837f2bea --- /dev/null +++ b/assets/js/145.78366984.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[145],{496:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("iframe",{attrs:{src:"//player.bilibili.com/player.html?isOutside=true&aid=112665531909649&bvid=BV1gAgreJE55&cid=500001593299517&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"500px"}}),t._v(" "),a("h2",{attrs:{id:"一、概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),a("p",[t._v("相信大家接触【即时通信应用】的时候都会遇到这个问题，那就是如何去实现聊天页面的键盘和其它功能面板的丝滑切换，这种问题也有人向 "),a("code",[t._v("Flutter")]),t._v(" 官方提出过 "),a("code",[t._v("issue")]),t._v("，如下这两个：")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://github.com/flutter/flutter/issues/121059",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/issues/121059"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://github.com/flutter/flutter/issues/32583",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/issues/32583"),a("OutboundLink")],1)])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406231252604.gif",alt:""}})]),t._v(" "),a("p",[t._v("可以看到，从表情面板切到文本输入框时会抖动一下，影响用户体验。")]),t._v(" "),a("p",[t._v("但几年过去了依旧没有得到解决，再加上我自己也有这个小烦恼，所以我与 "),a("a",{attrs:{href:"https://github.com/GitLqr",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitLqr"),a("OutboundLink")],1),t._v("（GitHub: "),a("a",{attrs:{href:"https://github.com/GitLqr",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/GitLqr"),a("OutboundLink")],1),t._v("）一起开发了这个 "),a("code",[t._v("chat_bottom_container")]),t._v("，来帮助我们快速实现这个丝滑切换的效果。")]),t._v(" "),a("h2",{attrs:{id:"二、效果"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、效果"}},[t._v("#")]),t._v(" 二、效果")]),t._v(" "),a("p",[t._v("这里先附上效果图，好让大家直观感受一下~")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202406172255393.gif",alt:""}})]),t._v(" "),a("p",[t._v("下面我们一起来看看怎么使用吧。")]),t._v(" "),a("h2",{attrs:{id:"三、集成"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、集成"}},[t._v("#")]),t._v(" 三、集成")]),t._v(" "),a("p",[t._v("将 "),a("code",[t._v("chat_bottom_container")]),t._v(" 添加到你的 "),a("code",[t._v("pubspec.yaml")]),t._v(" 文件中")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[t._v("dependencies"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n chat_bottom_container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" latest_version\n")])])]),a("p",[t._v("具体版本大家到 "),a("code",[t._v("pub.dev")]),t._v(" 上复制粘贴最新的吧，附上链接："),a("a",{attrs:{href:"https://pub.dev/packages/chat_bottom_container",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://pub.dev/packages/chat_bottom_container"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("code",[t._v("Android")]),t._v(" 端需要添加 "),a("code",[t._v("jitpack")]),t._v(" 仓库到你的项目根目录下的 "),a("code",[t._v("build.gradle")]),t._v(" 文件中:")]),t._v(" "),a("div",{staticClass:"language-gradle extra-class"},[a("pre",{pre:!0,attrs:{class:"language-gradle"}},[a("code",[t._v("allprojects "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("repositories")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),t._v("\n maven "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" url "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://jitpack.io'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("在需要使用的地方导入 "),a("code",[t._v("chat_bottom_container")]),t._v(" :")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'package:chat_bottom_container/chat_bottom_container.dart'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"四、使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#四、使用"}},[t._v("#")]),t._v(" 四、使用")]),t._v(" "),a("h3",{attrs:{id:"页面布局"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#页面布局"}},[t._v("#")]),t._v(" 页面布局")]),t._v(" "),a("p",[t._v("首先第一件事，确定整体的页面布局")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置为 false")]),t._v("\n resizeToAvoidBottomInset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Column")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n mainAxisAlignment"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainAxisAlignment")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Expanded")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListView")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输入框视图")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildInputView")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 底部容器")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPanelContainer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("这里就两个注意点：")]),t._v(" "),a("ol",[a("li",[t._v("底部容器放在最底下")]),t._v(" "),a("li",[a("code",[t._v("resizeToAvoidBottomInset")]),t._v(" 必须设置为 "),a("code",[t._v("false")])])]),t._v(" "),a("h3",{attrs:{id:"底部容器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#底部容器"}},[t._v("#")]),t._v(" 底部容器")]),t._v(" "),a("p",[t._v("输入框视图的样式各种各样，这里就不说了，大家爱怎么实现都行，接下来我们来看看怎么使用 "),a("code",[t._v("chat_bottom_container")]),t._v(" 这个库实现底部容器，代码如下：")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 自定义底部面板类型")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 收起")]),t._v("\n none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 键盘")]),t._v("\n keyboard"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 表情")]),t._v("\n emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 其它工具")]),t._v("\n tool"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// chat_bottom_container 的控制器，用来告知 chat_bottom_container 需要切面板类型了")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 注：这里传泛型传了 PanelType，是为了与外部的面板类型相关联")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" controller "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelContainerController")]),a("span",{pre:!0,attrs:{class:"token generics"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 输入框的焦点对象")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FocusNode")]),t._v(" inputFocusNode "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FocusNode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 记录当前的底部面板类型")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),t._v(" currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPanelContainer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelContainer")]),a("span",{pre:!0,attrs:{class:"token generics"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n inputFocusNode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inputFocusNode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n otherPanelWidget"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回自定义的面板视图")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 表情面板")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildEmojiPickerPanel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tool"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 其它工具面板")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildToolPanel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onPanelTypeChange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("panelType"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可用来记录当前的面板类型（该操作非必须~）")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// panelType: chat_bottom_container 内部定义的面板类型，就三种（.none|.keyboard|.other）")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data: 外部自定义的底部面板类型")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("panelType"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keyboard"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keyboard"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("other"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tool"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tool"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n currentPanelType "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 底部面板容器背景色")]),t._v("\n panelBgColor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" panelBgColor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("code",[t._v("chat_bottom_container")]),t._v(" 内部定义的面板类型，就三种")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无")]),t._v("\n none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 键盘")]),t._v("\n keyboard"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 其它")]),t._v("\n other"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("因为 "),a("code",[t._v("chat_bottom_container")]),t._v(" 并不关心你外部除了键盘外还有多少种面板类型，所以这里统一视为是 "),a("code",[t._v("ChatBottomPanelType.other")]),t._v("。")]),t._v(" "),a("p",[t._v("而我们外部开发者不可能不在乎，所以我们在点击表情面板按钮时，调用 "),a("code",[t._v("controller.updatePanelType")]),t._v(" 去切换底部面板类型，并为 "),a("code",[t._v("data")]),t._v(" 这个参数传入外部自定义的底部面板类型，如下代码所示")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[t._v("controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updatePanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置 ChatBottomPanelContainer 当前的底部面板类型")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可传入 ChatBottomPanelType.keyboard | ChatBottomPanelType.other | ChatBottomPanelType.none")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("other"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 回调给外部开发者自定义的 PanelType，当 ChatBottomPanelType.other 时必传")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// PanelType.tool")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("所以上面提到的泛型就是为了关联 "),a("code",[t._v("otherPanelWidget")]),t._v(" 和 "),a("code",[t._v("onPanelTypeChange")]),t._v(" 回调中的类型，方便我们拿来使用。")]),t._v(" "),a("h2",{attrs:{id:"五、最后"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#五、最后"}},[t._v("#")]),t._v(" 五、最后")]),t._v(" "),a("p",[t._v("好了，上述便是该库的核心使用步骤, 我已将上述的 "),a("code",[t._v("Flutter")]),t._v(" 聊天底部面板容器库发布至 "),a("code",[t._v("GitHub")]),t._v(": "),a("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container"),a("OutboundLink")],1),t._v(" ，如果接入上有什么问题，可以在链接中查看 "),a("code",[t._v("demo")]),t._v(" 演示代码。")]),t._v(" "),a("p",[t._v("开源不易，如果你也觉得这个库好用，请不吝给个 "),a("code",[t._v("Star")]),t._v(" 👍 ，并多多支持！")]),t._v(" "),a("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/146.83151f64.js b/assets/js/146.83151f64.js new file mode 100644 index 000000000..dc7188eec --- /dev/null +++ b/assets/js/146.83151f64.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[146],{497:function(t,s,n){"use strict";n.r(s);var a=n(14),e=Object(a.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("时间过得真快，距离上一篇介绍 "),s("code",[t._v("scrollview_observer")]),t._v(" 功能的文章已过去了 "),s("code",[t._v("9个月")]),t._v("，目前 "),s("code",[t._v("scrollview_observer")]),t._v(" 也来到了 "),s("code",[t._v("1.21.0")]),t._v(" 版本，现在就带大家来看看都更新了哪些内容吧")]),t._v(" "),s("p",[t._v("GitHub: https://github.com/fluttercandies/flutter_scrollview_observer")]),t._v(" "),s("h2",{attrs:{id:"二、功能点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、功能点"}},[t._v("#")]),t._v(" 二、功能点")]),t._v(" "),s("h3",{attrs:{id:"支持-nestedscrollview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#支持-nestedscrollview"}},[t._v("#")]),t._v(" 支持 "),s("code",[t._v("NestedScrollView")])]),t._v(" "),s("p",[s("code",[t._v("scrollview_observer")]),t._v(" 的 "),s("code",[t._v("监听滚动视图中正在显示的子部件")]),t._v(" 与 "),s("code",[t._v("滚动到指定下标位置")]),t._v(" 这两大功能，现已对 "),s("code",[t._v("NestedScrollView")]),t._v(" 进行了支持，如下图所示")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202407061548786.gif",alt:""}})]),t._v(" "),s("blockquote",[s("p",[t._v("等下一篇文章再跟大家详细介绍使用步骤 : )")])]),t._v(" "),s("h3",{attrs:{id:"支持-center"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#支持-center"}},[t._v("#")]),t._v(" 支持 "),s("code",[t._v("center")])]),t._v(" "),s("p",[t._v("如下代码所示，在一些场景下，你可能会对 "),s("code",[t._v("CustomScrollView")]),t._v(" 的 "),s("code",[t._v("center")]),t._v(" 进行设置，以此来实现聊天消息页。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _centerKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n anchor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("redAccent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onBuild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListCtx1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("blueGrey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onBuild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListCtx2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// center")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPadding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" _centerKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("teal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onBuild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListCtx3 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSliverListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("purple"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onBuild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _sliverListCtx4 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ctx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("但又想使用下标跳转 "),s("code",[t._v("item")]),t._v(" 的功能，放心，"),s("code",[t._v("scrollview_observer")]),t._v(" 具有良好的兼容性，在 "),s("code",[t._v("1.19.1")]),t._v(" 版本下就已得到支持，可随便你如何设置 "),s("code",[t._v("center")]),t._v("，不需要额外做其它操作。")]),t._v(" "),s("h3",{attrs:{id:"observeintervalforscrolling"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#observeintervalforscrolling"}},[t._v("#")]),t._v(" "),s("code",[t._v("observeIntervalForScrolling")])]),t._v(" "),s("p",[t._v("相信大家都还记得，自动触发观察的时机有以下三种")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("枚举值")]),t._v(" "),s("th",[t._v("描述")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("scrollStart")])]),t._v(" "),s("td",[t._v("开始滚动")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("scrollUpdate")])]),t._v(" "),s("td",[t._v("滚动中")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("scrollEnd")])]),t._v(" "),s("td",[t._v("结束滚动")])])])]),t._v(" "),s("p",[t._v("其中 "),s("code",[t._v("scrollUpdate")]),t._v(" 触发观察太过于频繁，其实很多次观察结果并不会相差多少，在大多数使用场景下，对我们来说也不太重要。")]),t._v(" "),s("p",[t._v("为此在本次更新中为 "),s("code",[t._v("ObserverController")]),t._v(" 新增了 "),s("code",[t._v("observeIntervalForScrolling")]),t._v(" 属性，用来设置触发观察的间隔，从而大量减少不必要的观察计算。")]),t._v(" "),s("p",[t._v("需要注意以下两点：")]),t._v(" "),s("ul",[s("li",[t._v("为了不改变之前的行为，所以默认值为 "),s("code",[t._v("Duration.zero")]),t._v("，所以大家需要自行调整，推荐设置为 "),s("code",[t._v("Duration(milliseconds: 500)")]),t._v("。")]),t._v(" "),s("li",[t._v("该属性仅对 "),s("code",[t._v("scrollUpdate")]),t._v(" 有效。")])]),t._v(" "),s("h3",{attrs:{id:"visiblemainaxissize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#visiblemainaxissize"}},[t._v("#")]),t._v(" "),s("code",[t._v("visibleMainAxisSize")])]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("item")]),t._v(" 显示的尺寸大小")])]),t._v(" "),s("p",[t._v("如图所示，各固定 "),s("code",[t._v("200")]),t._v(" 高度的 "),s("code",[t._v("item")]),t._v(" 在 "),s("code",[t._v("ListView")]),t._v(" 中的 "),s("code",[t._v("visibleMainAxisSize")]),t._v("。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202407061548544.png",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"visiblefraction"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#visiblefraction"}},[t._v("#")]),t._v(" "),s("code",[t._v("visibleFraction")])]),t._v(" "),s("blockquote",[s("p",[t._v("在 "),s("code",[t._v("sliver")]),t._v(" 中 "),s("code",[t._v("item")]),t._v(" 的显示占比")]),t._v(" "),s("p",[t._v("计算公式：visibleFraction = visibleMainAxisSize / paintExtent")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202407061548812.png",alt:""}})]),t._v(" "),s("p",[t._v("如图所示，当前 "),s("code",[t._v("SliverList")]),t._v(" 的绘制长度 "),s("code",[t._v("paintExtent")]),t._v(" 为 "),s("code",[t._v("376")]),t._v("，其 "),s("code",[t._v("item20")]),t._v(" 的可视大小 "),s("code",[t._v("visibleMainAxisSize")]),t._v(" 为 "),s("code",[t._v("30")]),t._v("，所以 "),s("code",[t._v("item20")]),t._v(" 的可视占比 "),s("code",[t._v("visibleFraction")]),t._v(" 为 "),s("code",[t._v("30/376")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"sliverobservecontext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sliverobservecontext"}},[t._v("#")]),t._v(" "),s("code",[t._v("SliverObserveContext")])]),t._v(" "),s("p",[t._v("用于获取 "),s("code",[t._v("sliver")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v("，这在观察 "),s("code",[t._v("sliver")]),t._v(" 的场景下非常有用。")]),t._v(" "),s("p",[t._v("如下 "),s("code",[t._v("CustomScrollView")]),t._v(" 配置了多个 "),s("code",[t._v("sliver")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomScrollView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n physics"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampingScrollPhysics")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n slivers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// banner")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPersistentHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 中间任意视图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserveContextToBoxAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tabBar")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPersistentHeader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建多个 SliverGird")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("List"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("modelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mainIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSectionGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mainIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("我们需要观察当前哪个 "),s("code",[t._v("SliverGrid")]),t._v(" 是第一个，然后去同步更新 "),s("code",[t._v("TabBar")]),t._v(" 的选中下标。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 记录各 Sliver 的下标与 BuildContext")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("int"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" sliverIndexCtxMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" sliverObserverController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliverContexts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" sliverIndexCtxMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("values"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserveViewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("但在研发过程中，我们很有可能会给 "),s("code",[t._v("SliverGrid")]),t._v(" 再加一层 "),s("code",[t._v("Sliver")]),t._v(" 去添加装饰、间距等，而 "),s("code",[t._v("onObserveViewport")]),t._v(" 只认最外层的 "),s("code",[t._v("sliver")]),t._v("，所以在这里我们就用 "),s("code",[t._v("SliverObserveContext")]),t._v(" 去进行包裹成为最外层，在其 "),s("code",[t._v("onObserve")]),t._v(" 回调中就可以拿到对应的 "),s("code",[t._v("BuildContext")]),t._v(" 并记录起来。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildSectionGridView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int mainIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverGrid")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n gridDelegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverGridDelegateWithFixedCrossAxisCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n delegate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverChildBuilderDelegate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 拿到了 SliverGrid 的 BuildContext")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n childCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverPadding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sliver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在最外层使用 SliverObserveContext 进行包裹，以获取是外层的 BuildContext。")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverObserveContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sliverIndexCtxMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mainIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"聊天保持位置功能"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#聊天保持位置功能"}},[t._v("#")]),t._v(" 聊天保持位置功能")]),t._v(" "),s("p",[t._v("保持位置功能目前有三种模式可选")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverHandleMode")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 常规模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 来一条消息就插入一条消息")]),t._v("\n normal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 生成式模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 比如 ChatGPT 这种流式自更新的消息")]),t._v("\n generative"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 指定模式")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 可以灵活指定用来做为参照的消息item")]),t._v("\n specified"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("本次更新的是指定模式，因为原 "),s("code",[t._v("refItemRelativeIndex")]),t._v(" 和 "),s("code",[t._v("refItemRelativeIndexAfterUpdate")]),t._v(" 两个参数仅能表达相对下标之意，而无法表达参考坐标系，所以将其废弃。")]),t._v(" "),s("p",[t._v("新增 "),s("code",[t._v("refItemIndex")]),t._v(" 与 "),s("code",[t._v("refItemIndexAfterUpdate")]),t._v("，并结合 "),s("code",[t._v("refIndexType")]),t._v(" 来更好地指定参考 "),s("code",[t._v("item")]),t._v("。")]),t._v(" "),s("p",[t._v("我们先来看一下 "),s("code",[t._v("refIndexType")]),t._v(" 的类型定义")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatScrollObserverRefIndexType")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// relativeIndex trailing")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 6 | item16 | cacheExtent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// ----------------- -----------------")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 5 | item15 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 4 | item14 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 3 | item13 | 正在显示中的item")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 2 | item12 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 1 | item11 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// ----------------- -----------------")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 0 | item10 | cacheExtent <---- start")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// leading")]),t._v("\n relativeIndexStartFromCacheExtent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// relativeIndex trailing")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 5 | item16 | cacheExtent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// ----------------- -----------------")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 4 | item15 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 3 | item14 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 2 | item13 | 正在显示中的item")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 1 | item12 |")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 0 | item11 | <---- start")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// ----------------- -----------------")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// -1 | item10 | cacheExtent")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("///")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// leading")]),t._v("\n relativeIndexStartFromDisplaying"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 直接指定 item 的下标")]),t._v("\n itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如上，一共有 "),s("code",[t._v("3种")]),t._v(" 参考模式供你选择")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("relativeIndexStartFromCacheExtent")]),t._v(": 从渲染区的 "),s("code",[t._v("item")]),t._v(" 开始计算下标。这种模式一般用于普通消息插入，因为插入消息必定是在 "),s("code",[t._v("0")]),t._v(" 处，插入消息前后不变的就是原来的最新消息，其下标从 "),s("code",[t._v("0")]),t._v(" 变成了 "),s("code",[t._v("1")]),t._v("，此时 "),s("code",[t._v("refItemIndex")]),t._v(" 可指定为 "),s("code",[t._v("0")]),t._v("，而 "),s("code",[t._v("refItemIndexAfterUpdate")]),t._v(" 指定为 "),s("code",[t._v("1")]),t._v("。")]),t._v(" "),s("li",[s("code",[t._v("relativeIndexStartFromCacheExtent")]),t._v(": 从展示区的 "),s("code",[t._v("item")]),t._v(" 开始计算下标。该模式比较少用，一般是结合观察功能，因为通过观察功能，我们是可以轻松得知正在显示的 "),s("code",[t._v("item")]),t._v(" 有哪些，假设你此时对正在显示的第一个 "),s("code",[t._v("item")]),t._v(" 做了内容变更，但又不想影响第二个正在显示的 "),s("code",[t._v("item")]),t._v(" 的偏移，那这个模式正好适合当前这种的场景。因为改变前后不变的是第二个正在显示的 "),s("code",[t._v("item")]),t._v("，所以 "),s("code",[t._v("refItemIndex")]),t._v(" 指定为 "),s("code",[t._v("1")]),t._v("， "),s("code",[t._v("refItemIndexAfterUpdate")]),t._v(" 也指定为 "),s("code",[t._v("1")]),t._v("。")]),t._v(" "),s("li",[s("code",[t._v("itemIndex")]),t._v(": 三种模式中最容易理解的模式，用来参照的 "),s("code",[t._v("item")]),t._v(" 的下标是什么，你就指定什么，比如上述中 "),s("code",[t._v("item11")]),t._v(" 发生了变化，我们想保持位置就可以拿不变的 "),s("code",[t._v("item12")]),t._v(" 来做参照，所以 "),s("code",[t._v("refItemIndex")]),t._v(" 和 "),s("code",[t._v("refItemIndexAfterUpdate")]),t._v(" 都指定为 "),s("code",[t._v("12")]),t._v("。")])]),t._v(" "),s("p",[t._v("记住，不管你选择哪种参考模式，都需要注意的一点，即指定的参照 "),s("code",[t._v("item")]),t._v(" 需要在变化前后都有被渲染，这样才能确保保持位置的功能可以正常生效！")]),t._v(" "),s("h2",{attrs:{id:"三、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、最后"}},[t._v("#")]),t._v(" 三、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/147.1860c9e8.js b/assets/js/147.1860c9e8.js new file mode 100644 index 000000000..ca45b4416 --- /dev/null +++ b/assets/js/147.1860c9e8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[147],{500:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("iframe",{attrs:{src:"//player.bilibili.com/player.html?isOutside=true&aid=112903684425787&bvid=BV1yTiFeREGq&cid=500001638207205&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"560px"}}),t._v(" "),a("h2",{attrs:{id:"一、概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),a("p",[t._v("距离 "),a("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container",target:"_blank",rel:"noopener noreferrer"}},[t._v("chat_bottom_container"),a("OutboundLink")],1),t._v(" 首个可用版本 ("),a("code",[t._v("0.0.2")]),t._v(") 的发布已经过去了 "),a("code",[t._v("1")]),t._v(" 个多月，在这期间根据大家的使用反馈，我们也做了一些优化调整，今天就来盘点一下到底做了哪些优化，新增了什么功能，以及一些常见操作。")]),t._v(" "),a("p",[t._v("请注意")]),t._v(" "),a("ul",[a("li",[t._v("本篇仅介绍更新的优化及功能，基础使用请查看: "),a("RouterLink",{attrs:{to:"/pages/1af1e6/"}},[t._v("Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻")])],1),t._v(" "),a("li",[t._v("截至本篇发布时，最新版本为 "),a("code",[t._v("0.2.0")]),t._v("，可以关注我们的微信公众号 "),a("a",{attrs:{href:"https://fastly.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png",target:"_blank",rel:"noopener noreferrer"}},[t._v("FSA全栈行动"),a("OutboundLink")],1),t._v(" 获取最新的资讯")])]),t._v(" "),a("blockquote",[a("p",[t._v("开源不易，如果你也觉得这个库好用，请不吝给个 "),a("code",[t._v("Star")]),t._v(" 👍 ，并多多支持！")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_chat_packages",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_chat_packages"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"二、使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、使用"}},[t._v("#")]),t._v(" 二、使用")]),t._v(" "),a("h3",{attrs:{id:"调整键盘高度监听管理逻辑"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#调整键盘高度监听管理逻辑"}},[t._v("#")]),t._v(" 调整键盘高度监听管理逻辑")]),t._v(" "),a("p",[a("code",[t._v("0.1.0")]),t._v(" 版本前，只考虑了页面栈这种常规情况，当键盘高度变化时只处理栈顶的监听。")]),t._v(" "),a("p",[t._v("但其实还有一种常见打破该规则的场景，就是悬浮聊天页，它会一直在页面上，可能为了能快速从悬浮小球展开聊天页面，收起时只是做了隐藏，而不会销毁页面，在这种情况下，它依旧在监听管理里的栈顶，所以在收起后，上一个聊天页的键盘高度监听就会失效。")]),t._v(" "),a("p",[t._v("这个在 "),a("code",[t._v("0.1.0")]),t._v(" 版本中得到修复，内部会倒序遍历调用所有的监听回调。")]),t._v(" "),a("p",[t._v("不过你不用担心这一改动会导致其它聊天页面出现多余的视图刷新，因为在键盘高度监听回调里会先判断输入框是否有焦点，若无则直接返回了。")]),t._v(" "),a("h3",{attrs:{id:"兼容外接键盘"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#兼容外接键盘"}},[t._v("#")]),t._v(" 兼容外接键盘")]),t._v(" "),a("p",[t._v("当连接外接键盘时，软键盘会消失，高度会降为 "),a("code",[t._v("0")]),t._v("，这里可以用 "),a("code",[t._v("iOS")]),t._v(" 模拟器结合 "),a("code",[t._v("Toggle Software Keyboard")]),t._v(" (快捷键: "),a("code",[t._v("cmd + k")]),t._v(") 来模拟连接与断开外接键盘的效果。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041319269.gif",alt:""}})]),t._v(" "),a("h3",{attrs:{id:"隐藏面板"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#隐藏面板"}},[t._v("#")]),t._v(" 隐藏面板")]),t._v(" "),a("p",[t._v("有小伙伴提出，不知道如何程序式的隐藏面板，其实很简单，就两步")]),t._v(" "),a("ol",[a("li",[t._v("让输入框失去焦点")]),t._v(" "),a("li",[t._v("更新内部状态为 "),a("code",[t._v("ChatBottomPanelType.none")])])]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hidePanel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0.2.0 前")]),t._v("\n inputFocusNode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unfocus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentPanelType"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updatePanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0.2.0 后，可以这么写")]),t._v("\n controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updatePanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n forceHandleFocus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomHandleFocus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("unfocus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"自定义底部安全区高度"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#自定义底部安全区高度"}},[t._v("#")]),t._v(" 自定义底部安全区高度")]),t._v(" "),a("p",[t._v("在默认情况下，"),a("code",[t._v("chat_bottom_container")]),t._v(" 在收起模式 ("),a("code",[t._v(".none")]),t._v(") 下会自动帮你添加底部安全区高度，但在一些场景下你可能不希望如此。比如：")]),t._v(" "),a("ul",[a("li",[t._v("安卓的底部安全区的高度，很多小伙伴都是简单粗暴的设置个高度了事")]),t._v(" "),a("li",[a("code",[t._v("App")]),t._v(" 首页有底部 "),a("code",[t._v("BottomNavigationBar")]),t._v("，不需要安全区高度")])]),t._v(" "),a("p",[t._v("在此，你可以通过将 "),a("code",[t._v("safeAreaBottom")]),t._v(" 参数来自定义这个高度，如下设置为 "),a("code",[t._v("0")]),t._v("。")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelContainer")]),a("span",{pre:!0,attrs:{class:"token generics"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n safeAreaBottom"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"调整键盘面板高度"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#调整键盘面板高度"}},[t._v("#")]),t._v(" 调整键盘面板高度")]),t._v(" "),a("p",[t._v("如示例中位于首页的聊天页面")]),t._v(" "),a("img",{attrs:{height:"750",src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041319288.png"}}),t._v(" "),a("p",[t._v("在键盘弹出时，如下图所示")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("实际")]),t._v(" "),a("th",[t._v("期望")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041319353.png",alt:""}})]),t._v(" "),a("td",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041319990.png",alt:""}})])])])]),t._v(" "),a("p",[t._v("很明显，我们希望键盘容器高度能够减去外层底部固定的 "),a("code",[t._v("BottomNavigationBar")]),t._v(" 高度。")]),t._v(" "),a("p",[a("code",[t._v("ChatBottomPanelContainer")]),t._v(" 提供了 "),a("code",[t._v("changeKeyboardPanelHeight")]),t._v(" 回调，在回调中可以拿到当前的键盘高度，经过计算后，将合适的键盘容器高度返回即可。")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelContainer")]),a("span",{pre:!0,attrs:{class:"token generics"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n changeKeyboardPanelHeight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyboardHeight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" renderObj "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bottomNavigationBarKey"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentContext"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findRenderObject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is!")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderBox")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyboardHeight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyboardHeight "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" renderObj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"缓存键盘高度"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#缓存键盘高度"}},[t._v("#")]),t._v(" 缓存键盘高度")]),t._v(" "),a("p",[t._v("先来看未做键盘高度缓存处理之前，会发生什么？")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041320403.gif",alt:""}})]),t._v(" "),a("p",[t._v("上图一共进入了三次聊天页")]),t._v(" "),a("ul",[a("li",[t._v("第一次是先点击键盘，再切到表情面板，体验起来还是挺不错的。")]),t._v(" "),a("li",[t._v("为了避免一闪而过，没有注意到，所以第二次和第三次的操作是一样的，先唤起表情面板，再切到键盘，可以看到在切到键盘时会抖动。")])]),t._v(" "),a("p",[t._v("这是因为每次进入聊天页，键盘的高度为初始值 "),a("code",[t._v("0")]),t._v("，在 "),a("code",[t._v("0.2.0")]),t._v(" 版本中对此进行了优化，加入了键盘高度缓存逻辑，从而尽量避免该抖动问题的出现。")]),t._v(" "),a("blockquote",[a("p",[t._v("❗️ 但需要注意的是，假如你卸载重装 "),a("code",[t._v("App")]),t._v("，该缓存会丢失，即你还是有可能会看到最多一次的抖动。")])]),t._v(" "),a("p",[t._v("除此之外，你还可以使用这个缓存的键盘高度来实现表情面板与键盘高度保持一致的效果，这样在切换的时候体验上会更好些。😉")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildEmojiPickerPanel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果键盘高度还没有缓存过，则使用默认高度 300")]),t._v("\n double height "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" keyboardHeight "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keyboardHeight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyboardHeight "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n height "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keyboardHeight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n padding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zero"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Center")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n child"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string-literal"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Emoji Panel'")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("效果如下")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408041320246.gif",alt:""}})]),t._v(" "),a("h3",{attrs:{id:"支持表情面板与输入框焦点共存"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#支持表情面板与输入框焦点共存"}},[t._v("#")]),t._v(" 支持表情面板与输入框焦点共存")]),t._v(" "),a("p",[t._v("这也是提升用户体验的重要一点，效果见上图。")]),t._v(" "),a("p",[t._v("先按如下设置你的输入框")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[t._v("bool readOnly "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingController")]),t._v(" textEditingController "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextEditingController")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextField")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" textEditingController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n focusNode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inputFocusNode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为 true 时不显示键盘，默认为 false")]),t._v("\n readOnly"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" readOnly"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取焦点后显示光标，设置为 true 才不受 readOnly 的影响")]),t._v("\n showCursor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])]),a("p",[t._v("接下来就是切换表情面板的操作")]),t._v(" "),a("div",{staticClass:"language-dart extra-class"},[a("pre",{pre:!0,attrs:{class:"language-dart"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("switchToEmojiPanel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n readOnly "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里你可以只刷新输入框")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等待下一帧")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WidgetsBinding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addPostFrameCallback")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("timeStamp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n controller"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updatePanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部切至 other 状态")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomPanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("other"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 关联外部的面板类型为表情面板")]),t._v("\n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PanelType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("emoji"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输入框获取焦点")]),t._v("\n forceHandleFocus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChatBottomHandleFocus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("requestFocus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("在 "),a("code",[t._v("updatePanelType")]),t._v(" 方法中，如果是切至 "),a("code",[t._v(".other")]),t._v(" 状态，是会帮你执行失去焦点操作的，所以这里提供了一个 "),a("code",[t._v("forceHandleFocus")]),t._v(" 参数，如果你对方法内部对焦点的处理不满意，你可以使用它来强制指定焦点的处理方式。")]),t._v(" "),a("h2",{attrs:{id:"三、最后"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#三、最后"}},[t._v("#")]),t._v(" 三、最后")]),t._v(" "),a("p",[t._v("好了，上述便是该库的更新内容, 惯例附上 "),a("code",[t._v("GitHub")]),t._v(" 地址: "),a("a",{attrs:{href:"https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container"),a("OutboundLink")],1),t._v(" ，如果接入上有什么问题，可以在链接中查看 "),a("code",[t._v("demo")]),t._v(" 演示代码。")]),t._v(" "),a("p",[t._v("开源不易，如果你也觉得这个库好用，请不吝给个 "),a("code",[t._v("Star")]),t._v(" 👍 ，并多多支持！")]),t._v(" "),a("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/148.2ecc958b.js b/assets/js/148.2ecc958b.js new file mode 100644 index 000000000..737f61fba --- /dev/null +++ b/assets/js/148.2ecc958b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[148],{498:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("iframe",{attrs:{src:"//player.bilibili.com/player.html?isOutside=true&aid=112942708232009&bvid=BV1iiY9e9EWY&cid=500001645863168&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"560px"}}),t._v(" "),s("h2",{attrs:{id:"一、问题回顾"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、问题回顾"}},[t._v("#")]),t._v(" 一、问题回顾")]),t._v(" "),s("p",[t._v("在今年 "),s("code",[t._v("2月份")]),t._v("，"),s("code",[t._v("Flutter")]),t._v(" 官方正式了 "),s("code",[t._v("3.19.0")]),t._v(" 版本，当时我们并没有着急尝鲜，直到 "),s("code",[t._v("3月中旬")]),t._v("，为了解决安卓端的崩溃率飙升问题，被迫无奈升级到 "),s("code",[t._v("3.19.3")]),t._v("， 结果踩了个坑，页面居然会多次 "),s("code",[t._v("rebuild")]),t._v(" ~")]),t._v(" "),s("p",[t._v("在一番探索之后定位到根本原因，给官方提了 "),s("code",[t._v("PR")]),t._v("，以及跟大家分享了补丁来临时处理这个问题。探索的相关内容总结和补丁在《"),s("a",{attrs:{href:"https://juejin.cn/post/7349124917378695180",target:"_blank",rel:"noopener noreferrer"}},[t._v("Flutter - 升级3.19之后页面多次rebuild？🤨"),s("OutboundLink")],1),t._v("》中，有兴趣的小伙伴可以看看。")]),t._v(" "),s("h2",{attrs:{id:"二、波折"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、波折"}},[t._v("#")]),t._v(" 二、波折")]),t._v(" "),s("p",[t._v("不过当时（日期："),s("code",[t._v("3.19")]),t._v("）所提 "),s("code",[t._v("PR")]),t._v(" 并不被接受，因为其修改内容是直接给了个选项 "),s("code",[t._v("createDependency")]),t._v("，代码如下:")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" of"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Object")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bool createDependency "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n _ModalScopeStatus"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("createDependency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dependOnInheritedWidgetOfExactType"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("_ModalScopeStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getElementForInheritedWidgetOfExactType"),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("_ModalScopeStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" _ModalScopeStatus"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("route "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如果将 "),s("code",[t._v("createDependency")]),t._v(" 参数设置为 "),s("code",[t._v("false")]),t._v("，则不与 "),s("code",[t._v("BuildContext")]),t._v(" 建立依赖关系，这被认定为是 "),s("code",[t._v("footgun")]),t._v("。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408111918340.webp",alt:""}})]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("footgun")]),t._v(": 指在尝试解决问题时，无意中导致更多问题或损害自己利益的行为")])]),t._v(" "),s("p",[t._v("因为审核人担心如果允许了这个参数的加入，则后续可能会有开发者提出因为这个参数没有正确设置为 "),s("code",[t._v("true")]),t._v("，而导致在确实需要重新构建时却无法正常自动刷新视图的 "),s("code",[t._v("bug")]),t._v(" 问题。最后建议提供类似 "),s("code",[t._v("ModalRoute.argumentsOf(context)")]),t._v(" 的方式，进而尽量避免造成 "),s("code",[t._v("rebuild")]),t._v("。")]),t._v(" "),s("p",[t._v("这种方式的好处就跟 "),s("code",[t._v("MediaQuery.of(context).viewInsets")]),t._v(" 对比 "),s("code",[t._v("MediaQuery.viewInsetsOf(context)")]),t._v(" 一样，后者只会在 "),s("code",[t._v("viewInsets")]),t._v(" 发生变化时才会 "),s("code",[t._v("rebuild")]),t._v("， 而前者只要是 "),s("code",[t._v("MediaQueryData")]),t._v(" 的值（如: "),s("code",[t._v("size")]),t._v("）有变化就会 "),s("code",[t._v("rebuild")]),t._v("。")]),t._v(" "),s("p",[t._v("很好的提议 👍，不过我当时（日期："),s("code",[t._v("4.16")]),t._v("）因为太忙，表明自己没时间去处理，并将 "),s("code",[t._v("PR")]),t._v(" 关闭了，暂时靠补丁苟着。")]),t._v(" "),s("p",[t._v("当时有人提出另外一种较为安全的临时处理方案，就是遍历找出 "),s("code",[t._v("_ModalScopeStatus")]),t._v("，从而拿到 "),s("code",[t._v("ModalRoute")]),t._v("，以此来绕过绑定 "),s("code",[t._v("BuildContext")]),t._v(" 的过程，相关代码如下。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// replace ModalRoute.of(context)")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyModalRoute")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("static")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("visitAncestorElements")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("runtimeType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_ModalScopeStatus'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("dynamic")]),t._v(" widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" element"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n route "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("route "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("使用方式也很简单，只需要将原来的 "),s("code",[t._v("ModalRoute.of(context)")]),t._v(" 替换为 "),s("code",[t._v("MyModalRoute.of(context)")]),t._v(" 即可。")]),t._v(" "),s("p",[t._v("不过后面有人发现，在使用 "),s("code",[t._v("代码混淆")]),t._v(" 功能时，该方案会失效。因为他是按字符串找到的 "),s("code",[t._v("_ModalScopeStatus")]),t._v("，但是在混淆的时候会重命名相关类名，所以还在 "),s("code",[t._v("3.19.x")]),t._v(" 小伙伴们，请自行根据自身情况，考虑是否使用。")]),t._v(" "),s("p",[t._v("时间过的很快，转眼来到 "),s("code",[t._v("5月份")]),t._v("，一看这个问题还没有处理，于是抽了点时间按照建议，做了些调整，于 "),s("code",[t._v("5.24")]),t._v(" 提交了 "),s("code",[t._v("PR")]),t._v(" ("),s("a",{attrs:{href:"https://github.com/flutter/flutter/pull/149022",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/flutter/flutter/pull/149022"),s("OutboundLink")],1),t._v(") ，并在 "),s("code",[t._v("5.30")]),t._v(" 完成合并。")]),t._v(" "),s("h2",{attrs:{id:"三、使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、使用"}},[t._v("#")]),t._v(" 三、使用")]),t._v(" "),s("p",[t._v("此 "),s("code",[t._v("PR")]),t._v(" 的改动也终于随 "),s("code",[t._v("Flutter 3.24.0")]),t._v(" 正式版发布了，新增了如下三个方法：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("isCurrentOf")]),t._v(": 对应 "),s("code",[t._v("isCurrent")]),t._v("，用于判断当前路由是否为栈顶路由。")]),t._v(" "),s("li",[s("code",[t._v("canPopOf")]),t._v(": 对应 "),s("code",[t._v("canPop")]),t._v("，用于判断当前路由是否可以弹出/关闭。")]),t._v(" "),s("li",[s("code",[t._v("settingsOf")]),t._v(": 对应 "),s("code",[t._v("settings")]),t._v("，当前路由的配置（路由名、参数）。")])]),t._v(" "),s("p",[t._v("之前取路由参数的方式如下代码所示")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" arguments "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("settings"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("arguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("需调整为")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" arguments "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("settingsOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("arguments"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("对，这样就可以了，不调整的话还是会造成 "),s("code",[t._v("rebuild")]),t._v(" 的 ~")]),t._v(" "),s("h2",{attrs:{id:"四、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、最后"}},[t._v("#")]),t._v(" 四、最后")]),t._v(" "),s("p",[t._v("其实对于我个人而言，我还是比较钟意添加 "),s("code",[t._v("createDependency")]),t._v(" 参数这种方式的，让开发者自由选择。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202408111918080.jpg",alt:""}})]),t._v(" "),s("p",[t._v("而且在做路由监听的时候依旧还是得用到 "),s("code",[t._v("ModalRoute.of(context)")]),t._v(" ~")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RouteObserver")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" routeObserver "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RouteObserver")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApp")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StatelessWidget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MaterialApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n navigatorObservers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("routeObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _MyPageState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("with")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RouteAware")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里用到了 ModalRoute.of(context)")]),t._v("\n routeObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModalRoute")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n routeObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unsubscribe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("好吧，本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/149.e70ed96c.js b/assets/js/149.e70ed96c.js new file mode 100644 index 000000000..24e425b5d --- /dev/null +++ b/assets/js/149.e70ed96c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[149],{499:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("iframe",{attrs:{src:"//player.bilibili.com/player.html?isOutside=true&aid=113101940726056&bvid=BV1DZpqeMEHV&cid=25632052186&p=1",scrolling:"no",border:"0",frameborder:"no",framespacing:"0",allowfullscreen:"true",width:"100%",height:"560px"}}),t._v(" "),s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在前不久的一个需求里，需要在点击地图页上的大头针时，页面底下显示对应的物件卡片，还可以左右切换，并且在切换的过程中需要突出展示当前的物件卡片，如下图所示。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409081514038.gif",alt:""}})]),t._v(" "),s("p",[t._v("接下来就来讲讲具体实现")]),t._v(" "),s("h2",{attrs:{id:"二、研发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、研发"}},[t._v("#")]),t._v(" 二、研发")]),t._v(" "),s("h3",{attrs:{id:"基础页面搭建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#基础页面搭建"}},[t._v("#")]),t._v(" 基础页面搭建")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// pageView 控制器")]),t._v("\nlate "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageController")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// item 数量")]),t._v("\nint pageItemCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n pageController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 初始化页的下标")]),t._v("\n initialPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 每一页占据的视口比例")]),t._v("\n viewportFraction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scaffold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n appBar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AppBar")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"PageView"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 底部地图")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// PageView，用于显示地图大头针对应的一些物件信息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("底部的卡片视图是使用 "),s("code",[t._v("PageView")]),t._v(" 来实现，具体代码如下所示：")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建 item")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n decoration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxDecoration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n borderRadius"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BorderRadius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("circular")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Page ')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token expression"}},[t._v("index")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置 item 的左右边距")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n margin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("symmetric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("horizontal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageItemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 固定 300 的高度")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("以上的视图布局对大家来说都很简单，大致看看就可以了，接下来就是如何实现这种偏移突出的效果。")]),t._v(" "),s("h3",{attrs:{id:"观察-pageview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#观察-pageview"}},[t._v("#")]),t._v(" 观察 "),s("code",[t._v("PageView")])]),t._v(" "),s("p",[t._v("这里使用到的是我写的一个滚动视图观察库 "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1),t._v(" 。")]),t._v(" "),s("p",[t._v("用法很简单:")]),t._v(" "),s("ol",[s("li",[t._v("使用 "),s("code",[t._v("ListViewObserver")]),t._v(" 将 "),s("code",[t._v("PageView")]),t._v(" 包裹起来")]),t._v(" "),s("li",[t._v("设置 "),s("code",[t._v("triggerOnObserveType")]),t._v(" 为 "),s("code",[t._v(".directly")]),t._v(" 不做显示 "),s("code",[t._v("item")]),t._v(" 变化对比，直接将获取到的观察数据返回")]),t._v(" "),s("li",[t._v("在观察结果回调 "),s("code",[t._v("onObserve")]),t._v(" 中，取出 "),s("code",[t._v("item")]),t._v(" 的相关数据（下标、可视区域占比等）进行计算")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 ListViewObserver 包裹 PageView ")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接将观察结果返回出来")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理观察结果")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" itemModel "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的可视区域占比")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemDisplayPercentage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算偏移")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" offsetY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" itemDisplayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" offsetYDelta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n pageItemOffsetYList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" offsetY"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 指定需要观察的 RenderSliver 对象")]),t._v("\n customTargetRenderSliverType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverFillViewport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("blockquote",[s("p",[s("code",[t._v("triggerOnObserveType")]),t._v(" 和 "),s("code",[t._v("customTargetRenderSliverType")]),t._v(" 在之前的【"),s("RouterLink",{attrs:{to:"/pages/5f9bf6/"}},[t._v("Flutter - 船新升级😱支持观察第三方构建的滚动视图💪")]),t._v("】一文中有详细的说明，这里就不再赘述。")],1)]),t._v(" "),s("p",[t._v("这里重要说明一下，"),s("code",[t._v("ListViewObserver")]),t._v(" 默认是处理 "),s("code",[t._v("ListView")]),t._v(" 和 "),s("code",[t._v("SliverList")]),t._v(" 的，但并不表示它只能处理它们，只要内部的树结构一致就可以处理，如果结构一致但 "),s("code",[t._v("RenderSliver")]),t._v(" 与 "),s("code",[t._v("SliverList")]),t._v(" 的不同，则可以通过 "),s("code",[t._v("customTargetRenderSliverType")]),t._v(" 指定相应的 "),s("code",[t._v("RenderSliver")]),t._v(" 类型即可，就比如这里的 "),s("code",[t._v("PageView")]),t._v("，其 "),s("code",[t._v("RenderSliver")]),t._v(" 的类型为 "),s("code",[t._v("RenderSliverFillViewport")]),t._v("。")]),t._v(" "),s("p",[t._v("在这里附上 "),s("code",[t._v("PageView")]),t._v(" 和 "),s("code",[t._v("ListView")]),t._v(" 的树结构截图，看最右侧的 "),s("code",[t._v("Widget Details Tree")]),t._v("，看完应该就能感受到什么叫结构一致了。")]),t._v(" "),s("p",[s("code",[t._v("PageView")]),t._v(" 结构")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409081515704.png",alt:""}})]),t._v(" "),s("p",[s("code",[t._v("ListView")]),t._v(" 结构")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409081515632.png",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"item-的偏移实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#item-的偏移实现"}},[t._v("#")]),t._v(" "),s("code",[t._v("item")]),t._v(" 的偏移实现")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// item 的最大偏移量")]),t._v("\ndouble offsetYDelta "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 记录 item 的偏移量")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" pageItemOffsetYList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 初始化")]),t._v("\n pageItemOffsetYList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n pageItemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 延迟 100ms，触发一次观察")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Future")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delayed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("milliseconds"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchOnceObserve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" itemWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// item 局部刷新")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueListenableBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n valueListenable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageItemOffsetYList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" double offsetY"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 偏移量发生变化")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Transform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("translate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n offset"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Offset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" offsetY"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" itemWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageItemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" itemModel "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的可视区域占比")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemDisplayPercentage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算偏移")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// item 的【可视占比区间】与【偏移区间】两者间的区间关系如下")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可视占比区间: [0, 1]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 偏移区间: [50, 0]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" offsetY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" itemDisplayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" offsetYDelta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新当前 item 的偏移量")]),t._v("\n pageItemOffsetYList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" offsetY"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("关键变量说明")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("offsetYDelta")]),t._v(": "),s("code",[t._v("item")]),t._v(" 的最大偏移量，这里是 "),s("code",[t._v("50")])]),t._v(" "),s("li",[s("code",[t._v("pageItemOffsetYList")]),t._v(": 记录各个 "),s("code",[t._v("item")]),t._v(" 的当前偏移量")])]),t._v(" "),s("p",[t._v("更新 "),s("code",[t._v("item")]),t._v(" 偏移说明")]),t._v(" "),s("ul",[s("li",[t._v("结合 "),s("code",[t._v("pageItemOffsetYList")]),t._v(" + "),s("code",[t._v("ValueListenableBuilder")]),t._v(" 来局部刷新 "),s("code",[t._v("item")])]),t._v(" "),s("li",[t._v("在 "),s("code",[t._v("onObserve")]),t._v(" 中计算 "),s("code",[t._v("item")]),t._v(" 的偏移量，并更新 "),s("code",[t._v("pageItemOffsetYList")]),t._v(" 中对应下标的值")]),t._v(" "),s("li",[s("code",[t._v("item")]),t._v(" 的【可视占比区间 ("),s("code",[t._v("[0, 1]")]),t._v(")】与【偏移区间 ("),s("code",[t._v("[50, 0]")]),t._v(")】成反比，所以用 "),s("code",[t._v("1")]),t._v(" 减去 "),s("code",[t._v("itemDisplayPercentage")]),t._v(" 成正向比例，再去乘以 "),s("code",[t._v("offsetYDelta")]),t._v(" 算出偏移")])]),t._v(" "),s("h2",{attrs:{id:"三、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、最后"}},[t._v("#")]),t._v(" 三、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/15.79ec5c92.js b/assets/js/15.79ec5c92.js new file mode 100644 index 000000000..d0fed777b --- /dev/null +++ b/assets/js/15.79ec5c92.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{367:function(e,t,a){"use strict";a.r(t);var i=a(14),n=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"简述"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#简述"}},[e._v("#")]),e._v(" 简述")]),e._v(" "),t("p",[e._v("Material Design从Android 5.0开始引入，是一种全新的设计语言，称为“原材料设计”，是谷歌提倡的一种设计风格、理念、原则。结合拟物设计和扁平化设计风格，融入了一些科技理念。")]),e._v(" "),t("p",[e._v("想深入了解的话，可以查这篇wiki："),t("a",{attrs:{href:"http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Material Design 中文版"),t("OutboundLink")],1)]),e._v(" "),t("p",[e._v("*"),t("em",[e._v("注：使用下文中介绍的控件，需在项目中引入v7包的支持。正如上面所说，Material Design从Android 5.0开始引入，故低版本的系统没有这类控件。")])]),e._v(" "),t("p",[e._v("如：使用Android Studio可以在gradle的dependencies中写入：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("compile 'com.android.support:appcompat-v7:25.3.0'\n")])])]),t("p",[e._v("Eclipse的请自行百度吧，毕竟就算导入了v7包，若编译版本和v7包的版本存在新旧问题时，v7包工程自身会报错的，还有其他一些细节要注意，这里就不做介绍了。")]),e._v(" "),t("h2",{attrs:{id:"一、swiperefreshlayout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#一、swiperefreshlayout"}},[e._v("#")]),e._v(" 一、SwipeRefreshLayout")]),e._v(" "),t("h3",{attrs:{id:"_1、使用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用"}},[e._v("#")]),e._v(" 1、使用")]),e._v(" "),t("p",[e._v("SwipeRefreshLayout是谷歌推出的一个下拉刷新控件，符合MD设计，使用方便，可通过其提供的方法设置控件的尺寸、颜色、刷新距顶悬浮距离等，具体使用如下：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("//设置 SwipeRefreshLayout 的尺寸\nmSrl.setSize(SwipeRefreshLayout.LARGE);\n//设置 SwipeRefreshLayout 刷新时的颜色切换（可以有无数种）\nmSrl.setColorSchemeColors(Color.RED, Color.YELLOW, Color.GREEN);\n//设置 SwipeRefreshLayout 的背景色\nmSrl.setBackgroundColor(Color.GRAY);\n//设置 SwipeRefreshLayout 的下拉距离\nmSrl.setDistanceToTriggerSync(100);\n//设置 SwipeRefreshLayout 正在刷新监听\nmSrl.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {\n @Override\n public void onRefresh() {\n ...\n\t\t刷新数据源\n\t\t...\n }\n});\n//手动停止刷新\nmSrl.setRefreshing(false);\n")])])]),t("h3",{attrs:{id:"_2、效果预览"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、效果预览"}},[e._v("#")]),e._v(" 2、效果预览：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107082748.gif",alt:"SwipeRefreshLayout"}})]),e._v(" "),t("h2",{attrs:{id:"二、listpopupwindow"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、listpopupwindow"}},[e._v("#")]),e._v(" 二、ListPopupWindow")]),e._v(" "),t("p",[e._v("popupWindow大家都知道，是Android中弹出式菜单，而ListPopupWindow顾名思义就是列表型的弹出式菜单，使用该控件可以做到类似下拉菜单的功能，但不限如此。")]),e._v(" "),t("h3",{attrs:{id:"_1、使用-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用-2"}},[e._v("#")]),e._v(" 1、使用")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("mListPopupWindow = new ListPopupWindow(this);\n//设置 ListPopupWindow 的数据适配器\nmListPopupWindow.setAdapter(mAdapter);\n//设置 ListPopupWindow 的显示位置（在指定控件下方）\nmListPopupWindow.setAnchorView(view);\n//设置 ListPopupWindow 的宽度\nmListPopupWindow.setWidth(200);\n//设置 ListPopupWindow 的高度\nmListPopupWindow.setHeight(500);\n//设置 ListPopupWindow 的条目点击事件（必须在show方法前设置，否则无效）\nmListPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {\n @Override\n public void onItemClick(AdapterView parent, View view, int position, long id) {\n Toast.makeText(getApplicationContext(), mItemArr[position], Toast.LENGTH_SHORT).show();\n mListPopupWindow.dismiss();\n }\n});\nmListPopupWindow.show();\n")])])]),t("h3",{attrs:{id:"_2、效果预览-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、效果预览-2"}},[e._v("#")]),e._v(" 2、效果预览：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107082820.gif",alt:"ListPopupWindow"}})]),e._v(" "),t("h2",{attrs:{id:"三、popupmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#三、popupmenu"}},[e._v("#")]),e._v(" 三、PopupMenu")]),e._v(" "),t("p",[e._v("PopupMenu代表弹出式菜单,它会在指定组件上弹出PopupMenu,默认情况下,PopupMenu会显示在该组件的下方或上方。与ListPopupWindow的区别在于，ListPopupWindow使用适配器来填充条目，而PopupMenu则是使用menu布局来填充条目。")]),e._v(" "),t("h3",{attrs:{id:"_1、使用-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用-3"}},[e._v("#")]),e._v(" 1、使用")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v('PopupMenu popupMenu = new PopupMenu(this, view);\n//设置 PopupMenu 的显示菜单项\npopupMenu.inflate(R.menu.main);\n// popupMenu.getMenuInflater().inflate(R.menu.main, popupMenu.getMenu());//与一行没什么区别\n\n//默认 PopupMenu 不显示条目icon，可以通过反射来强制使其显示icon\nField field = popupMenu.getClass().getDeclaredField("mPopup");\nfield.setAccessible(true);\nMenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);\nmHelper.setForceShowIcon(true);\n\n//设置 PopupMenu 的条目点击事件（点击后会自动dismiss）\npopupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {\n @Override\n public boolean onMenuItemClick(MenuItem item) {\n Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();\n return false;\n }\n});\n//显示 PopupMenu\npopupMenu.show();\n')])])]),t("h3",{attrs:{id:"_2、效果预览-3"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、效果预览-3"}},[e._v("#")]),e._v(" 2、效果预览：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107082908.gif",alt:"PopupMenu"}})]),e._v(" "),t("h2",{attrs:{id:"四、linearlayoutcompat"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#四、linearlayoutcompat"}},[e._v("#")]),e._v(" 四、LinearLayoutCompat")]),e._v(" "),t("p",[e._v("LinearLayoutCompat是对LinearLayout的扩展，可以为此布局中的子View之间添加分割线divider。可以通过自定义属性divider来指定分割线的样式，通过自定义属性showDividers来指定分割线的显示位置。")]),e._v(" "),t("h3",{attrs:{id:"_1、使用-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用-4"}},[e._v("#")]),e._v(" 1、使用")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v('\n\t\t...\n\t\t子控件\n\t\t...\n\n')])])]),t("h3",{attrs:{id:"_2、效果预览-4"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、效果预览-4"}},[e._v("#")]),e._v(" 2、效果预览：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107082927.gif",alt:"LinearLayoutCompat"}})]),e._v(" "),t("h2",{attrs:{id:"五、recyclerview"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#五、recyclerview"}},[e._v("#")]),e._v(" 五、RecyclerView")]),e._v(" "),t("p",[e._v("RecyclerView是v7包中最重要、最常用的控件之一，可实现线性列表、网格列表、瀑布流列表效果，却具有高度解耦、性能优化的优势，可以说是ListView、GridView的增强版。")]),e._v(" "),t("h3",{attrs:{id:"_1、使用-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用-5"}},[e._v("#")]),e._v(" 1、使用")]),e._v(" "),t("p",[e._v("RecyclerViewr的使用大体分两步：")]),e._v(" "),t("ul",[t("li",[e._v("设置适配器Adapter")]),e._v(" "),t("li",[e._v("设置布局管理器LayoutManager")])]),e._v(" "),t("h4",{attrs:{id:"_1-设置适配器adapter"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-设置适配器adapter"}},[e._v("#")]),e._v(" 1）设置适配器Adapter")]),e._v(" "),t("p",[e._v("RecyclerView使用的适配器必须继承RecyclerView.Adapter，并指定RecyclerView.ViewHolder，在onCreateViewHolder()中创建自定义的RecyclerView.ViewHolder，在onBindViewHolder()中对条目进行设置，理解上相对简单，代码如下：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("public class MyAdapter extends RecyclerView.Adapter {\n\n private List mData;\n\n public MyAdapter(List data) {\n mData = data;\n }\n\n @Override\n public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\n View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, null);\n return new MyViewHolder(itemView);\n }\n\n @Override\n public void onBindViewHolder(MyViewHolder holder, int position) {\n holder.mTv.setText(mData.get(position));\n }\n\n @Override\n public int getItemCount() {\n return mData.size();\n }\n\n class MyViewHolder extends RecyclerView.ViewHolder {\n\n TextView mTv;\n\n public MyViewHolder(View itemView) {\n super(itemView);\n mTv = (TextView) itemView.findViewById(android.R.id.text1);\n }\n }\n\n}\n")])])]),t("h4",{attrs:{id:"_2-设置布局管理器layoutmanager"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-设置布局管理器layoutmanager"}},[e._v("#")]),e._v(" 2）设置布局管理器LayoutManager")]),e._v(" "),t("p",[e._v("RecyclerView可以使用布局管理器有三种：")]),e._v(" "),t("ul",[t("li",[e._v("LinearLayoutManager：线性列表")]),e._v(" "),t("li",[e._v("GridLayoutManager：网格列表")]),e._v(" "),t("li",[e._v("StaggeredGridLayoutManager：瀑布流列表")])]),e._v(" "),t("p",[e._v("以LinearLayoutManager为例：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("LinearLayoutManager(Context context, int orientation, boolean reverseLayout)\n")])])]),t("p",[e._v("在创建LinearLayoutManage时，可以通过参数二指定列表的方向，通过参数三指定数据是否反转（本来数据是从上到下进行填充，当设置了reverseLayout为true时，数据则从下到上进行填充），GridLayoutManager及StaggeredGridLayoutManager的使用也差不多。")]),e._v(" "),t("p",[e._v("调用RecyclerView的setLayoutManager()即可设置布局管理器")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[e._v("mRv.setLayoutManager(new LinearLayoutManager(this));\n")])])]),t("h3",{attrs:{id:"_2、效果预览-5"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2、效果预览-5"}},[e._v("#")]),e._v(" 2、效果预览：")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210107082927.gif",alt:"RecyclerView"}})]),e._v(" "),t("h2",{attrs:{id:"最后附上demo链接"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#最后附上demo链接"}},[e._v("#")]),e._v(" 最后附上Demo链接")]),e._v(" "),t("p",[t("a",{attrs:{href:"https://github.com/GitLqr/MaterialDesignDemo",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/GitLqr/MaterialDesignDemo"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/150.7ec4fd25.js b/assets/js/150.7ec4fd25.js new file mode 100644 index 000000000..72891dc8c --- /dev/null +++ b/assets/js/150.7ec4fd25.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[150],{502:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在上一篇 "),s("RouterLink",{attrs:{to:"/pages/500d17/"}},[t._v("【Flutter - 轻松实现PageView卡片偏移效果】")]),t._v(" 中已经详细讲解过观察 "),s("code",[t._v("PageView")]),t._v(" 所需要的具体步骤，今天基于此我们继续再来实现一个炫酷的视差效果，如下图所示。")],1),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211656099.gif",alt:""}})]),t._v(" "),s("h2",{attrs:{id:"二、研发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、研发"}},[t._v("#")]),t._v(" 二、研发")]),t._v(" "),s("h3",{attrs:{id:"基础页面搭建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#基础页面搭建"}},[t._v("#")]),t._v(" 基础页面搭建")]),t._v(" "),s("p",[t._v("初始化 "),s("code",[t._v("PageController")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("late "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageController")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 图片数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" pageItemBgPicList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxxxxx'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nint "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" pageItemCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" pageItemBgPicList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n pageController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 初始化下标: 4")]),t._v("\n initialPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 视口占比: 0.9")]),t._v("\n viewportFraction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("构建 "),s("code",[t._v("PageView")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageItemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("构建 "),s("code",[t._v("item")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AlignmentDirectional")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SizedBox")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildNum")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Container")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n margin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EdgeInsets")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("symmetric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("horizontal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n clipBehavior"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clip")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("antiAlias"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n decoration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxDecoration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Colors")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("blue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("50")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n borderRadius"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BorderRadius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("circular")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 背景图片")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("network")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n pageItemBgPicList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxFit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cover"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"实现解析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#实现解析"}},[t._v("#")]),t._v(" 实现解析")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("network")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n pageItemBgPicList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxFit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cover"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// x 与 y均居中对齐")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// x 左对齐，y 居中对齐")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// alignment: Alignment(-1, 0),")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// x 右对齐，y 居中对齐")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// alignment: Alignment(1, 0),")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("上述的 "),s("code",[t._v("_buildPageItemBgPicView")]),t._v(" 只是简单展示了图片，使用的 "),s("code",[t._v("fit")]),t._v(" 为 "),s("code",[t._v("BoxFit.cover")]),t._v("，其作用是对图片进行等比例放大，然后填满整个容器。")]),t._v(" "),s("p",[t._v("这里附上各种填充模式的对比")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211657215.webp",alt:""}})]),t._v(" "),s("p",[t._v("接下来我们来讲讲 "),s("code",[t._v("alignment")]),t._v("，因为它是实现视差效果的关键。")]),t._v(" "),s("p",[s("code",[t._v("alignment")]),t._v(" 用于定义边界内的对齐方式，构造函数为 "),s("code",[t._v("Alignment(this.x, this.y)")]),t._v("，其 "),s("code",[t._v("x")]),t._v(" 和 "),s("code",[t._v("y")]),t._v(" 的取值范围都为 "),s("code",[t._v("[-1, 1]")]),t._v("。")]),t._v(" "),s("p",[t._v("例如:")]),t._v(" "),s("ul",[s("li",[t._v("当值为 "),s("code",[t._v("(-1.0, -1.0)")]),t._v(" 时，图像将与其布局边界的左上角对齐")]),t._v(" "),s("li",[t._v("当值为 "),s("code",[t._v("(1.0, 1.0)")]),t._v(" 时，图像将与其布局边界的右下角对齐。")])]),t._v(" "),s("p",[t._v("不过本篇只需要用到 "),s("code",[t._v("x")]),t._v("，以下图为例")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211657370.jpeg",alt:""}})]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("left_center")]),t._v(" "),s("th",[t._v("center")]),t._v(" "),s("th",[t._v("right_center")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211657058.png",alt:""}})]),t._v(" "),s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211658136.png",alt:""}})]),t._v(" "),s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211658794.png",alt:""}})])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("Alignment(-1, 0)")])]),t._v(" "),s("td",[s("code",[t._v("Alignment(0, 0)")])]),t._v(" "),s("td",[s("code",[t._v("Alignment(1, 0)")])])]),t._v(" "),s("tr",[s("td",[t._v("图片 "),s("code",[t._v("居左")]),t._v("对齐")]),t._v(" "),s("td",[t._v("图片 "),s("code",[t._v("居中")]),t._v(" 对齐")]),t._v(" "),s("td",[t._v("图片 "),s("code",[t._v("居右")]),t._v(" 对齐")])])])]),t._v(" "),s("p",[t._v("此处以中间的截图（"),s("code",[t._v("center")]),t._v("）为例进行说明:")]),t._v(" "),s("ul",[s("li",[t._v("中间白色边框的视图为 "),s("code",[t._v("item")])]),t._v(" "),s("li",[t._v("两侧的毛玻璃是图片在 "),s("code",[t._v("item")]),t._v(" 上的不可见区域")])]),t._v(" "),s("p",[t._v("这里再次附上效果图，方便理解")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211656099.gif",alt:""}})]),t._v(" "),s("ul",[s("li",[t._v("一开始, "),s("code",[t._v("Page4")]),t._v(" 在最右侧，此时 "),s("code",[t._v("alignment")]),t._v(" 为 "),s("code",[t._v("Alignment(-1, 0)")]),t._v("，图片展示最左侧的内容（"),s("code",[t._v("left_center")]),t._v("）")]),t._v(" "),s("li",[t._v("在慢慢移入到中间完全展示出来的过程中，"),s("code",[t._v("alignment.x")]),t._v(" 一直在增加，直至为 "),s("code",[t._v("0")]),t._v("，即 "),s("code",[t._v("Alignment(0, 0)")]),t._v("，图片展示中间的内容（"),s("code",[t._v("center")]),t._v("）")]),t._v(" "),s("li",[t._v("然后再继续慢慢向左侧移出，其 "),s("code",[t._v("alignment.x")]),t._v(" 继续增加，直至为 "),s("code",[t._v("1")]),t._v("，即 "),s("code",[t._v("Alignment(1, 0)")]),t._v("，图片展示最右侧的内容（"),s("code",[t._v("right_center")]),t._v("）")])]),t._v(" "),s("p",[t._v("所以视差的实现很简单，就是对 "),s("code",[t._v("alignment.x")]),t._v(" 进行不断的调整，范围为 "),s("code",[t._v("[-1, 1]")]),t._v("，那怎么在滑动的过程算出这个值呢？")]),t._v(" "),s("p",[t._v("这里又使用到的了我写的滚动视图观察库: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"观察-pageview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#观察-pageview"}},[t._v("#")]),t._v(" 观察 "),s("code",[t._v("PageView")])]),t._v(" "),s("p",[t._v("我们先来对 "),s("code",[t._v("item")]),t._v(" 进行改造")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 图片数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" pageItemBgPicList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-literal"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxxxxx'")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nint "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" pageItemCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" pageItemBgPicList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 存放了各个 item 的 alignment.x")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" pageItemBgPicAlignmentXList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据 item 的数量创建对应数量的 ValueNotifier")]),t._v("\n pageItemBgPicAlignmentXList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("List")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("generate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n pageItemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 ValueListenableBuilder 对对应下标的 alignment.x 进行监听与视图刷新")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueListenableBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n valueListenable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pageItemBgPicAlignmentXList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" double alignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("network")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n pageItemBgPicList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxFit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cover"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("alignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来就是对 "),s("code",[t._v("PageView")]),t._v(" 进行观察，用法很简单:")]),t._v(" "),s("ol",[s("li",[t._v("使用 "),s("code",[t._v("ListViewObserver")]),t._v(" 将 "),s("code",[t._v("PageView")]),t._v(" 包裹起来")]),t._v(" "),s("li",[t._v("设置 "),s("code",[t._v("triggerOnObserveType")]),t._v(" 为 "),s("code",[t._v(".directly")]),t._v(" 不做显示 "),s("code",[t._v("item")]),t._v(" 变化对比，直接将获取到的观察数据返回")]),t._v(" "),s("li",[t._v("在观察结果回调 "),s("code",[t._v("onObserve")]),t._v(" 中，取出 "),s("code",[t._v("item")]),t._v(" 的相关数据（下标、可视区域占比等）进行计算")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" itemModel "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 自身的显示占比")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemDisplayPercentage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算无符号的 alignment.x")]),t._v("\n double itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" itemDisplayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算有符号的 alignment.x")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("leadingMarginToViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("itemAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取值范围判断")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 赋值")]),t._v("\n pageItemBgPicAlignmentXList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n customTargetRenderSliverType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverFillViewport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"关于无符号的-alignment-x-的计算"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#关于无符号的-alignment-x-的计算"}},[t._v("#")]),t._v(" 关于无符号的 "),s("code",[t._v("alignment.x")]),t._v(" 的计算")]),t._v(" "),s("ol",[s("li",[t._v("无论是从左侧滑入到中间，还是从右侧滑入到中间， "),s("code",[t._v("item")]),t._v(" 的 "),s("code",[t._v("displayPercentage")]),t._v(" 都是 "),s("code",[t._v("0 -> 1")])]),t._v(" "),s("li",[t._v("对应的 "),s("code",[t._v("alignment.x")]),t._v(" 是 "),s("code",[t._v("1 -> 0")]),t._v(" 或 "),s("code",[t._v("-1 -> 0")]),t._v("，去除符号就是 "),s("code",[t._v("1 -> 0")])])]),t._v(" "),s("p",[t._v("所以这里用 "),s("code",[t._v("1")]),t._v(" 减去 "),s("code",[t._v("itemDisplayPercentage")]),t._v(" 即可得到无符号的 "),s("code",[t._v("alignment.x")]),t._v("。")]),t._v(" "),s("p",[t._v("那接下来的问题就是，当 "),s("code",[t._v("alignment.x == 1")]),t._v(" 时，怎么知道此时的 "),s("code",[t._v("item")]),t._v(" 是从左侧滑出还是右侧滑出呢？")]),t._v(" "),s("h4",{attrs:{id:"关于-alignment-x-符号的计算"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#关于-alignment-x-符号的计算"}},[t._v("#")]),t._v(" 关于 "),s("code",[t._v("alignment.x")]),t._v(" 符号的计算")]),t._v(" "),s("p",[t._v("在有了 "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1),t._v(" 之后，这一切又变得很简单，这里就不得不提到观察结果中两个非常有用的属性")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("leadingMarginToViewport")]),t._v(": "),s("code",[t._v("item")]),t._v(" 距离视口顶部的距离")]),t._v(" "),s("li",[s("code",[t._v("trailingMarginToViewport")]),t._v(": "),s("code",[t._v("item")]),t._v(" 距离视口尾部的距离")])]),t._v(" "),s("p",[t._v("这里我们用其中一个就够了，就比如使用 "),s("code",[t._v("leadingMarginToViewport")]),t._v("，当 "),s("code",[t._v("item")]),t._v(" 的左侧顶部触碰到 "),s("code",[t._v("PageView")]),t._v(" 的视口时，其值为 "),s("code",[t._v("0")]),t._v("，继续往左侧移出，其时该值就会成为负数，如果往右侧移出，该值则为正数，如下图所示")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("左侧滑出")]),t._v(" "),s("th",[t._v("完全展示")]),t._v(" "),s("th",[t._v("右侧滑出")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211659565.png",alt:""}})]),t._v(" "),s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211659079.png",alt:""}})]),t._v(" "),s("td",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211659546.png",alt:""}})])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("Alignment(1, 0)")])]),t._v(" "),s("td",[s("code",[t._v("Alignment(0, 0)")])]),t._v(" "),s("td",[s("code",[t._v("Alignment(-1, 0)")])])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("leadingMarginToViewport: -300")])]),t._v(" "),s("td",[s("code",[t._v("leadingMarginToViewport: 0")])]),t._v(" "),s("td",[s("code",[t._v("leadingMarginToViewport: 375")])])])])]),t._v(" "),s("p",[t._v("很显然，当 "),s("code",[t._v("leadingMarginToViewport > 0")]),t._v(" 时，"),s("code",[t._v("alignment.x < 0")]),t._v("，即 "),s("code",[t._v("alignment.x")]),t._v(" 符号的计算如下:")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("leadingMarginToViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("itemAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("好了，大功告成~")]),t._v(" "),s("blockquote",[s("p",[t._v("完整代码: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer/blob/main/example/lib/features/pageview/pageview_demo/pageview_parallax_page.dart",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer/blob/main/example/lib/features/pageview/pageview_demo/pageview_parallax_page.dart"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"三、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、最后"}},[t._v("#")]),t._v(" 三、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/151.446a607d.js b/assets/js/151.446a607d.js new file mode 100644 index 000000000..8fbe1c97f --- /dev/null +++ b/assets/js/151.446a607d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[151],{501:function(e,t,s){"use strict";s.r(t);var a=s(14),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"一、概述"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[e._v("#")]),e._v(" 一、概述")]),e._v(" "),t("p",[e._v("最近准备使用 "),t("code",[e._v("Flutter")]),e._v(" 的 "),t("code",[e._v("3.24")]),e._v(" 版本打包上架 "),t("code",[e._v("APP")]),e._v("，结果前天看到有人提了一个 "),t("code",[e._v("issue")]),e._v(": "),t("a",{attrs:{href:"https://github.com/flutter/flutter/issues/158423",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/flutter/flutter/issues/158423"),t("OutboundLink")],1),e._v(" ，说分别使用 "),t("code",[e._v("3.24.3")]),e._v(" 和 "),t("code",[e._v("3.24.4")]),e._v(" 提交苹果审核时，都惨遭被拒~")]),e._v(" "),t("p",[e._v("苹果反馈的信息如下：")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("Guideline 2.5.1 - Performance - Software Requirements\n\nThe app uses or references the following non-public or deprecated APIs:\n\nFrameworks/Flutter.framework/Flutter\n\nSymbols:\n\n• _kCTFontPaletteAttribute\n• _kCTFontPaletteColorsAttribute\n\nThe use of non-public or deprecated APIs is not permitted, as they can lead to a poor user experience should these APIs change and are otherwise not supported on Apple platforms.\n")])])]),t("p",[e._v("可以看到，是说 "),t("code",[e._v("Flutter")]),e._v(" 使用了未公开的 "),t("code",[e._v("API")]),e._v("，并且他使用 "),t("code",[e._v("strings")]),e._v(" 命令也验证了这一点。")]),e._v(" "),t("p",[t("code",[e._v("3.24.x")])]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[e._v("strings Runner.app/Frameworks/Flutter.framework/Flutter "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("|")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("grep")]),e._v(" kCT\nSkCTMShader\nkCTFontVariationAxisHiddenKey\nkCTFontPaletteAttribute\nkCTFontPaletteColorsAttribute\n")])])]),t("p",[t("code",[e._v("3.22.3")])]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[e._v("strings Runner.app/Frameworks/Flutter.framework/Flutter "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("|")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("grep")]),e._v(" kCT\nSkCTMShader\nkCTFontVariationAxisHiddenKey\n")])])]),t("p",[e._v("我先在 "),t("code",[e._v("Flutter")]),e._v(" 引擎源码中搜索，结果压根就搜索不到，随后打开了前几日编译好的引擎调试项目，结果一搜一个准，在 "),t("code",[e._v("third_party")]),e._v(" 依赖下的 "),t("code",[e._v("Skia")]),e._v(" 代码中，很快就定位到了引入未公开 "),t("code",[e._v("API")]),e._v(" 的相关提交记录 "),t("a",{attrs:{href:"https://skia-review.googlesource.com/c/skia/+/867836",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://skia-review.googlesource.com/c/skia/+/867836"),t("OutboundLink")],1),e._v(" 。")]),e._v(" "),t("p",[e._v("我一看完就啪的一声敲起来了，很快啊！上来就是一个 "),t("code",[e._v("Revert")]),e._v(" "),t("a",{attrs:{href:"https://skia-review.googlesource.com/c/skia/+/918416",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://skia-review.googlesource.com/c/skia/+/918416"),t("OutboundLink")],1),e._v(" 。")]),e._v(" "),t("p",[e._v("目前此次受影响的 "),t("code",[e._v("Flutter")]),e._v(" 版本范围暂时是 "),t("code",[e._v("3.24.0")]),e._v(" ~ "),t("code",[e._v("3.24.4")]),e._v("，得等待新版本的发布才可以解决。建议还没用上 "),t("code",[e._v("3.24")]),e._v(" 的小伙伴先不要升级，那如果已经是 "),t("code",[e._v("3.24")]),e._v(" 或者是一定要用 "),t("code",[e._v("3.24.4")]),e._v(" 及以下版本的小伙伴要怎么办呢？那就跟我一起来自编译引擎吧~")]),e._v(" "),t("h2",{attrs:{id:"二、编译引擎"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#二、编译引擎"}},[e._v("#")]),e._v(" 二、编译引擎")]),e._v(" "),t("h3",{attrs:{id:"环境"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#环境"}},[e._v("#")]),e._v(" 环境")]),e._v(" "),t("blockquote",[t("p",[e._v("注意：全程需要科学上网环境，请自行查找和配置")])]),e._v(" "),t("p",[e._v("首先拉取最新的 "),t("code",[e._v("depot_tools")]),e._v("，放到一个合适的位置，比如我放在 "),t("code",[e._v("~/development")]),e._v(" 目录下")]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" ~/development\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("git")]),e._v(" clone https://chromium.googlesource.com/chromium/tools/depot_tools.git\n")])])]),t("p",[e._v("将 "),t("code",[e._v("depot_tools")]),e._v(" 添加至环境变量，在你的终端配置文件里补充如下内容")]),e._v(" "),t("blockquote",[t("p",[e._v("终端配置文件因人而异，如："),t("code",[e._v("~/.bash_profile")]),e._v("、"),t("code",[e._v("~/.zshrc")]),e._v("、"),t("code",[e._v("~/.zprofile")]),e._v("，请自行判断")])]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('export PATH = "$HOME/development/depot_tools":$PATH\n')])])]),t("p",[e._v("然后 "),t("code",[e._v("source ~/.zshrc")]),e._v("（这里请根据自身情况修改终端配置文件路径）")]),e._v(" "),t("h3",{attrs:{id:"拉源码"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#拉源码"}},[e._v("#")]),e._v(" 拉源码")]),e._v(" "),t("p",[e._v("找个合适的目录，创建 "),t("code",[e._v("engine")]),e._v(" 目录并进入")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("mkdir engine\ncd engine\n")])])]),t("p",[e._v("开始拉取源码")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("fetch flutter\n")])])]),t("p",[e._v("它会在当前目录下创建 "),t("code",[e._v(".gclient")]),e._v(" 文件，写好配置，并执行 "),t("code",[e._v("gclient sync")])]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('solutions = [\n {\n "custom_deps": {},\n "deps_file": "DEPS",\n "managed": False,\n "name": "src/flutter",\n "safesync_url": "",\n "url": "https://github.com/flutter/engine.git",\n },\n]\n')])])]),t("p",[e._v("如果在拉取代码的过程中遇到如下问题")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("remote: Enumerating objects: 835563, done.\nremote: Counting objects: 100% (1612/1612), done.\nremote: Compressing objects: 100% (1011/1011), done.\nerror: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)\nerror: 1481 bytes of body are still expected\nfetch-pack: unexpected disconnect while reading sideband packet\nfatal: early EOF\nfatal: fetch-pack: invalid index-pack output\n\nsrc/flutter (ERROR)\n----------------------------------------\n[0:00:00] Started.\n")])])]),t("p",[e._v("别慌，执行下方命令让其接着拉，直至完成")]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[e._v("gclient "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("sync")]),e._v("\n")])])]),t("p",[e._v("拉取完成后，去查看我们使用的 "),t("code",[e._v("Flutter")]),e._v(" 版本对应的引擎版本，这里以 "),t("code",[e._v("3.24.4")]),e._v(" 为例，打开链接：https://github.com/flutter/flutter/blob/3.24.4/bin/internal/engine.version ，拿到 "),t("code",[e._v("db49896cf25ceabc44096d5f088d86414e05a7aa")])]),e._v(" "),t("p",[e._v("执行如下命令进行切换")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("cd src/flutter\ngit checkout db49896cf25ceabc44096d5f088d86414e05a7aa\n")])])]),t("p",[e._v("执行完成会输出如下内容")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('Previous HEAD position was b0a4ca92c4 Add FlPointerManager to process pointer events from GTK in a form suitable for Flutter. (#56443)\nHEAD is now at db49896cf2 [CP-stable]Add xcprivacy privacy manifest to macOS framework (#55366)\npost-checkout: The engine source tree has been updated.\n\nYou may need to run "gclient sync -D"\n')])])]),t("p",[e._v("按照提示执行")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("gclient sync -D\n")])])]),t("h3",{attrs:{id:"调整源码"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#调整源码"}},[e._v("#")]),e._v(" 调整源码")]),e._v(" "),t("p",[e._v("按路径 "),t("code",[e._v("engine/src/flutter/third_party/skia/src/ports/SkTypeface_mac_ct.cpp")]),e._v(" 打开文件，按下方内容进行修改（红：删除，绿：新增）")]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[e._v("static CFStringRef getCTFontPaletteAttribute() {\n"),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" static CFStringRef* kCTFontPaletteAttributePtr =\n")]),t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' static_cast(dlsym(RTLD_DEFAULT, "kCTFontPaletteAttribute"));\n')]),t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return *kCTFontPaletteAttributePtr;\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return nullptr;\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" //static CFStringRef* kCTFontPaletteAttributePtr =\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' // static_cast(dlsym(RTLD_DEFAULT, "kCTFontPaletteAttribute"));\n')]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" //return *kCTFontPaletteAttributePtr;\n")])]),e._v("}\nstatic CFStringRef getCTFontPaletteColorsAttribute() {\n"),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" static CFStringRef* kCTFontPaletteColorsAttributePtr =\n")]),t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' static_cast(dlsym(RTLD_DEFAULT, "kCTFontPaletteColorsAttribute"));\n')]),t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return *kCTFontPaletteColorsAttributePtr;\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" return nullptr;\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" //static CFStringRef* kCTFontPaletteColorsAttributePtr =\n")]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' // static_cast(dlsym(RTLD_DEFAULT, "kCTFontPaletteColorsAttribute"));\n')]),t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" //return *kCTFontPaletteColorsAttributePtr;\n")])]),e._v("}\n\n...\n\nstatic bool apply_palette(CFMutableDictionaryRef attributes,\n"),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" const SkFontArguments::Palette& palette) {\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" bool changedAttributes = false;\n")])]),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (palette.index != 0 || palette.overrideCount) {\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if ((palette.index != 0 || palette.overrideCount) && getCTFontPaletteAttribute()) {\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" SkUniqueCFRef paletteIndex(\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" CFNumberCreate(kCFAllocatorDefault, kCFNumberIntType, &palette.index));\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" CFDictionarySetValue(attributes, getCTFontPaletteAttribute(), paletteIndex.get());\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" changedAttributes = true;\n")]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (palette.overrideCount) {\n")])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" if (palette.overrideCount && getCTFontPaletteColorsAttribute()) {\n")])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" SkUniqueCFRef overrides(\n")])]),e._v("\n...\n")])])]),t("p",[e._v("相应修改来自: "),t("a",{attrs:{href:"https://skia-review.googlesource.com/c/skia/+/918518",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://skia-review.googlesource.com/c/skia/+/918518"),t("OutboundLink")],1)]),e._v(" "),t("h3",{attrs:{id:"编译"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#编译"}},[e._v("#")]),e._v(" 编译")]),e._v(" "),t("p",[e._v("来到 "),t("code",[e._v("engine/src")]),e._v(" 目录，使用 "),t("code",[e._v("gn")]),e._v(" 编译生成 "),t("code",[e._v("ninja")]),e._v(" 构建文件")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("./flutter/tools/gn --runtime-mode release --mac-cpu arm64\n./flutter/tools/gn --ios --runtime-mode release\n")])])]),t("p",[e._v("使用 "),t("code",[e._v("ninja")]),e._v(" 编译引擎的最终产物")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("ninja -C out/host_release_arm64\nninja -C out/ios_release\n")])])]),t("p",[e._v("如果你当前是 "),t("code",[e._v("MacOS 15")]),e._v(" 的 "),t("code",[e._v("Sequoia")]),e._v(" 系统，在执行 "),t("code",[e._v("ninja -C out/host_release_arm64")]),e._v(" 时会遇到如下错误")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("COPY '/System/Library/Fonts/A...arty/txt/assets/Apple Color Emoji.ttc'\nFAILED: gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc\nln -f '/System/Library/Fonts/Apple Color Emoji.ttc' 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc' 2>/dev/null || (rm -rf 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc' && cp -af '/System/Library/Fonts/Apple Color Emoji.ttc' 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc')\ncp: chflags: gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc: Operation not permitted\n[18/4139] SOLINK libvk_swiftshader.dylib libvk_swiftshader.dylib.TOC\nninja: build stopped: subcommand failed.\n")])])]),t("p",[e._v("别急，打开 "),t("code",[e._v("engine/src/build/toolchain/mac/BUILD.gn")]),e._v("，做如下修改，修改完再执行 "),t("code",[e._v("gn")]),e._v(" 和 "),t("code",[e._v("ninja")])]),e._v(" "),t("div",{staticClass:"language-diff extra-class"},[t("pre",{pre:!0,attrs:{class:"language-diff"}},[t("code",[t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' tool("copy") {\n')])]),t("span",{pre:!0,attrs:{class:"token deleted-sign deleted"}},[t("span",{pre:!0,attrs:{class:"token prefix deleted"}},[e._v("-")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' command = "ln -f {{source}} {{output}} 2>/dev/null || (rm -rf {{output}} && cp -af {{source}} {{output}})"\n')])]),t("span",{pre:!0,attrs:{class:"token inserted-sign inserted"}},[t("span",{pre:!0,attrs:{class:"token prefix inserted"}},[e._v("+")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' command = "ln -f {{source}} {{output}} 2>/dev/null || (rsync -a --delete {{source}} {{output}})"\n')])]),t("span",{pre:!0,attrs:{class:"token unchanged"}},[t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(' description = "COPY {{source}} {{output}}"\n')]),t("span",{pre:!0,attrs:{class:"token prefix unchanged"}},[e._v(" ")]),t("span",{pre:!0,attrs:{class:"token line"}},[e._v(" }\n")])])])])]),t("p",[e._v("相应的 "),t("code",[e._v("issue")]),e._v(": "),t("a",{attrs:{href:"https://github.com/flutter/flutter/issues/152978",target:"_blank",rel:"noopener noreferrer"}},[e._v("#152978"),t("OutboundLink")],1)]),e._v(" "),t("p",[e._v("好了，静静等待编译完成。")]),e._v(" "),t("p",[e._v("请注意，这将是个十分漫长且全程 "),t("code",[e._v("CPU")]),e._v(" 占用率为 "),t("code",[e._v("100%")]),e._v(" 的过程~")]),e._v(" "),t("p",[e._v("建议使用一台空闲的 "),t("code",[e._v("Mac")]),e._v(" 电脑去做这个事！否则你将啥活也干不了~")]),e._v(" "),t("h3",{attrs:{id:"验证"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#验证"}},[e._v("#")]),e._v(" 验证")]),e._v(" "),t("p",[e._v("进入 "),t("code",[e._v("engine/src/out/ios_release")])]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[e._v("strings Flutter.framework/Flutter "),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("|")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("grep")]),e._v(" kCT\n\nSkCTMShader\nkCTFontVariationAxisHiddenKey\n")])])]),t("p",[e._v("可以看到，没有 "),t("code",[e._v("kCTFontPaletteAttribute")]),e._v(" 和 "),t("code",[e._v("kCTFontPaletteColorsAttribute")]),e._v("。")]),e._v(" "),t("h3",{attrs:{id:"使用本地引擎"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#使用本地引擎"}},[e._v("#")]),e._v(" 使用本地引擎")]),e._v(" "),t("p",[e._v("执行如下命令对项目进行编译")]),e._v(" "),t("div",{staticClass:"language-shell extra-class"},[t("pre",{pre:!0,attrs:{class:"language-shell"}},[t("code",[e._v("flutter build ipa "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("\\")]),e._v("\n--local-engine-src-path"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v("/Users/lxf/engine/src "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("\\")]),e._v("\n--local-engine"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v("ios_release "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("\\")]),e._v("\n--local-engine-host"),t("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v("host_release_arm64\n")])])]),t("p",[e._v("如果你有使用 "),t("code",[e._v("realm")]),e._v(" 的话，可能会遇到如下错误")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('Installing realm (1.0.3)\n[!] /bin/bash -c\nset -e\nsource "/Users/lxf/app/ios/Flutter/flutter_export_environment.sh" && cd "$FLUTTER_APPLICATION_PATH" && "$FLUTTER_ROOT/bin/flutter" pub run realm install --target-os-type ios --flavor flutter\n\nYou must specify --local-engine or --local-web-sdk if you are using a locally built engine or web sdk.\n')])])]),t("p",[e._v("你需要对该文件\n"),t("code",[e._v("/Users/lxf/app/ios/.symlinks/plugins/realm/ios/realm.podspec")]),e._v(" 进行修改，在 "),t("code",[e._v('\\"$FLUTTER_ROOT/bin/flutter\\"')]),e._v(" 和 "),t("code",[e._v("pub")]),e._v(" 中间加上引擎相关参数。如下所示")]),e._v(" "),t("div",{staticClass:"language-podspec extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v('s.prepare_command = "source \\"#{project_dir}/Flutter/flutter_export_environment.sh\\" && cd \\"$FLUTTER_APPLICATION_PATH\\" && \\"$FLUTTER_ROOT/bin/flutter\\" --local-engine-src-path /Users/lxf/engine/src --local-engine ios_release --local-engine-host host_release_arm64 pub run realm install --target-os-type ios --flavor flutter"\n\n:script => \'source "$PROJECT_DIR/../Flutter/flutter_export_environment.sh" && cd "$FLUTTER_APPLICATION_PATH" && "$FLUTTER_ROOT/bin/flutter" --local-engine-src-path /Users/lxf/engine/src --local-engine ios_release --local-engine-host host_release_arm64 pub run realm install --target-os-type ios --flavor flutter\',\n')])])]),t("p",[e._v("如果你只是想对项目进行配置，则将 "),t("code",[e._v("ipa")]),e._v(" 改为 "),t("code",[e._v("ios")]),e._v("，并加上 "),t("code",[e._v("--config-only")]),e._v(" 参数即可。")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("flutter build ios \\\n--local-engine-src-path=/Users/lxf/engine/src \\\n--local-engine=ios_release \\\n--local-engine-host=host_release_arm64 \\\n--config-only\n")])])]),t("p",[e._v("以前使用本地引擎只需要 "),t("code",[e._v("--local-engine")]),e._v(" 参数，现在要求结合 "),t("code",[e._v("--local-engine-host")]),e._v(" 一块使用，这里附上相关 "),t("code",[e._v("issue")]),e._v("："),t("a",{attrs:{href:"https://github.com/flutter/flutter/issues/132245",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/flutter/flutter/issues/132245"),t("OutboundLink")],1),e._v(" ，想了解的可以点开看看")]),e._v(" "),t("h2",{attrs:{id:"三、最后"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#三、最后"}},[e._v("#")]),e._v(" 三、最后")]),e._v(" "),t("p",[e._v("过程不难，麻烦的是拉源码和编译真的好慢，而且空间占用还大~")]),e._v(" "),t("p",[e._v("好了，本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/152.0f4a4be0.js b/assets/js/152.0f4a4be0.js new file mode 100644 index 000000000..9aa53b8fd --- /dev/null +++ b/assets/js/152.0f4a4be0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[152],{504:function(t,s,a){"use strict";a.r(s);var n=a(14),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、概述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、概述"}},[t._v("#")]),t._v(" 一、概述")]),t._v(" "),s("p",[t._v("在 "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("scrollview_observer"),s("OutboundLink")],1),t._v(" 的 "),s("code",[t._v("1.23.0")]),t._v(" 中，新增了允许对观察结果进行监听的功能，也就是说你可以不需要在固定的观察结果回调（如："),s("code",[t._v("onObserve")]),t._v("、"),s("code",[t._v("onObserveAll")]),t._v(" ）中去处理数据了。")]),t._v(" "),s("p",[t._v("那具体是什么意思呢？我们通过实战来了解一下。")]),t._v(" "),s("h2",{attrs:{id:"二、实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、实战"}},[t._v("#")]),t._v(" 二、实战")]),t._v(" "),s("p",[t._v("这里以之前的 "),s("RouterLink",{attrs:{to:"/pages/77efcc/"}},[t._v("Flutter - 轻松搞定炫酷视差(Parallax)效果")]),t._v(" 为例")],1),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20230813121546/image/202409211656099.gif",alt:""}})]),t._v(" "),s("h3",{attrs:{id:"page"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#page"}},[t._v("#")]),t._v(" Page")]),t._v(" "),s("p",[t._v("这里附上原先 "),s("code",[t._v("PageView")]),t._v(" 的构建代码，以及使用 "),s("code",[t._v("ListViewObserver")]),t._v(" 对其进行观察，并在 "),s("code",[t._v("onObserve")]),t._v(" 回调中实现 "),s("code",[t._v("Parallax")]),t._v(" 效果的详细处理逻辑")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" displayingChildModelList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resultModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" itemModel "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" displayingChildModelList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 的下标")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出 item 自身的显示占比")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" itemDisplayPercentage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算无符号的 alignment.x")]),t._v("\n double itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" itemDisplayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算有符号的 alignment.x")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemModel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("leadingMarginToViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("itemAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取值范围判断")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n itemAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 赋值")]),t._v("\n pageItemBgPicAlignmentXList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("itemIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" itemAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n customTargetRenderSliverType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverFillViewport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在上代码中，我们在 "),s("code",[t._v("onObserve")]),t._v(" 回调中去处理了 "),s("code",[t._v("Parallax")]),t._v(" 效果的一切逻辑，但假设 "),s("code",[t._v("item")]),t._v(" 有多种类型呢？比如可能会在其中插一个不需要 "),s("code",[t._v("Parallax")]),t._v(" 效果的纯广告图片的 "),s("code",[t._v("item")]),t._v("，这个时候就得去取出对应下标的数据，判断是否需要该效果，否则就 "),s("code",[t._v("return")]),t._v(" 不做处理。")]),t._v(" "),s("p",[t._v("那此时就会想，我们能不能仅在需要 "),s("code",[t._v("Parallax")]),t._v(" 效果的 "),s("code",[t._v("item")]),t._v(" 内部去做呢？")]),t._v(" "),s("p",[t._v("可以，我们先将 "),s("code",[t._v("onObserve")]),t._v(" 回调去除，保留 "),s("code",[t._v("ListViewObserver")]),t._v(" 及其配置，即保留观察能力，为 "),s("code",[t._v("item")]),t._v(" 提供数据。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" observerController "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListObserverController")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PageView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("builder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n triggerOnObserveType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ObserverTriggerOnObserveType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("directly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n customTargetRenderSliverType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderObj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("is")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderSliverFillViewport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"item"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#item"}},[t._v("#")]),t._v(" Item")]),t._v(" "),s("p",[t._v("将 "),s("code",[t._v("item")]),t._v(" 抽成 "),s("code",[t._v("StatefulWidget")]),t._v("，并传入下标和对应的数据")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ParallaxItemView")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StatefulWidget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),t._v(" imgUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ParallaxItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n required "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ParallaxItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_ParallaxItemViewState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("附上视图布局代码，主要靠 "),s("code",[t._v("picAlignmentX")]),t._v(" 来控制背景的对齐偏移，进而实现视差效果。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" _ParallaxItemViewState "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ParallaxItemView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" picAlignmentX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueNotifier")]),s("span",{pre:!0,attrs:{class:"token generics"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" resultWidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Stack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AlignmentDirectional")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n children"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Positioned")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n left"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n top"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" resultWidget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_buildPageItemBgPicView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("int index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ValueListenableBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n valueListenable"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n builder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BuildContext")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" double alignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Widget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("network")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BoxFit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cover"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alignment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Alignment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("alignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("好了，现在来实现在 "),s("code",[t._v("item")]),t._v(" 中对观察结果数据的监听。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserverState")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" observerState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("didChangeDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过当前 item 的 context 找到 ListViewObserver 的 State")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 再调用 addListener 方法对其进行监听")]),t._v("\n observerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" handleObserverResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token metadata function"}},[t._v("@override")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 移除监听")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n observerState"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n onObserve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" handleObserverResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n observerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// 处理监听结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleObserverResult")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserveModel")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据 index 取出对应的观察结果数据")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("final")]),t._v(" model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayingChildModelMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取不到说明当前不在显示区内，重置 picAlignmentX")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算无符号的 alignment.x")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("displayPercentage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 计算有符号的 alignment.x")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("leadingMarginToViewport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取值范围判断")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n picAlignmentX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其实很简单，也就三步走")]),t._v(" "),s("ul",[s("li",[t._v("调用 "),s("code",[t._v("addListener")]),t._v(" 对观察结果进行监听")]),t._v(" "),s("li",[t._v("处理观察结果数据")]),t._v(" "),s("li",[t._v("在 "),s("code",[t._v("dispose")]),t._v(" 方法中调用 "),s("code",[t._v("removeListener")]),t._v(" 移除监听")])]),t._v(" "),s("p",[s("code",[t._v("handleObserverResult")]),t._v(" 方法中关于 "),s("code",[t._v("picAlignmentX")]),t._v(" 的计算在之前的 "),s("RouterLink",{attrs:{to:"/pages/77efcc/"}},[t._v("Flutter - 轻松搞定炫酷视差(Parallax)效果")]),t._v(" 一文中有详细讲解，这里就不再赘述。")],1),t._v(" "),s("h2",{attrs:{id:"三、其它说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、其它说明"}},[t._v("#")]),t._v(" 三、其它说明")]),t._v(" "),s("h3",{attrs:{id:"of"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#of"}},[t._v("#")]),t._v(" of")]),t._v(" "),s("p",[t._v("根据 "),s("code",[t._v("context")]),t._v(" 向上找最近的 "),s("code",[t._v("ObserverWidgetState")]),t._v("，如果找不到会抛异常。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobserverState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobserverState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"maybeof"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#maybeof"}},[t._v("#")]),t._v(" maybeOf")]),t._v(" "),s("p",[s("code",[t._v("of")]),t._v(" 的可选类型版本，如果向上找不到对应类型的 "),s("code",[t._v("ObserverWidgetState")]),t._v(" 则返回 "),s("code",[t._v("null")])]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("observerState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("maybeOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobserverState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GridViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("maybeOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobserverState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SliverViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("maybeOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"嵌套问题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#嵌套问题"}},[t._v("#")]),t._v(" 嵌套问题")]),t._v(" "),s("p",[s("code",[t._v("ObserverWidget")]),t._v(" 是可以嵌套使用的，如下代码所示")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[t._v("widget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getListView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scrollController"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n itemBuilder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n tag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tag2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwidget "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n tag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tag1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n child"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" observerController1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("一个 "),s("code",[t._v("ListView")]),t._v(" 被两个 "),s("code",[t._v("ListViewObserver")]),t._v(" 所包裹。")]),t._v(" "),s("p",[t._v("如果此时我们直接使用 "),s("code",[t._v("item")]),t._v(" 的 "),s("code",[t._v("BuildContext")]),t._v(" 去调用 "),s("code",[t._v("of")]),t._v("，则会拿到离它最近的 "),s("code",[t._v("tag2")]),t._v(" 的 "),s("code",[t._v("ListViewObserverState")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tag2 的 ListViewObserverState")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("itemContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("那如果我们想要拿到的是 "),s("code",[t._v("tag1")]),t._v(" 的 "),s("code",[t._v("ListViewObserverState")]),t._v("，该怎么做呢？")]),t._v(" "),s("p",[t._v("很简单，使用 "),s("code",[t._v("tag")]),t._v(" 参数即可~")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tag1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("当然，你不使用 "),s("code",[t._v("tag")]),t._v(" 参数，而是通过 "),s("code",[t._v("tag2")]),t._v(" 的 "),s("code",[t._v("ListViewObserver")]),t._v(" 对应的 "),s("code",[t._v("BuildContext")]),t._v(" 去调用 "),s("code",[t._v("of")]),t._v(" 也是可以的~")]),t._v(" "),s("div",{staticClass:"language-dart extra-class"},[s("pre",{pre:!0,attrs:{class:"language-dart"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ListViewObserver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("of")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tag2Context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h2",{attrs:{id:"四、最后"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#四、最后"}},[t._v("#")]),t._v(" 四、最后")]),t._v(" "),s("p",[t._v("通过上述示例的讲解，相信你对 "),s("code",[t._v("scrollview_observer")]),t._v(" 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 "),s("code",[t._v("Star")]),t._v(" 👍 ，并多多支持！")]),t._v(" "),s("p",[t._v("GitHub: "),s("a",{attrs:{href:"https://github.com/fluttercandies/flutter_scrollview_observer",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/fluttercandies/flutter_scrollview_observer"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("本篇到此结束，感谢大家的支持，我们下次再见！ 👋")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/153.a28139ca.js b/assets/js/153.a28139ca.js new file mode 100644 index 000000000..662f2062d --- /dev/null +++ b/assets/js/153.a28139ca.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[153],{506:function(t,s,a){"use strict";a.r(s);var n=a(14),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"一、简述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#一、简述"}},[t._v("#")]),t._v(" 一、简述")]),t._v(" "),s("p",[t._v("公司最近做的一个官网项目，要求把页面成国际化，实现中英文切换，为此，我在网上找了一些中英文切换的解决方案，大概为如下两种：")]),t._v(" "),s("h3",{attrs:{id:"_1、使用谷歌整站翻译api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、使用谷歌整站翻译api"}},[t._v("#")]),t._v(" 1、使用谷歌整站翻译Api")]),t._v(" "),s("ul",[s("li",[t._v("优点：只须调用接口，即可轻松完成整站翻译，翻译准确度还行。")]),t._v(" "),s("li",[t._v("缺点：需要梯子。")]),t._v(" "),s("li",[t._v("参考文章："),s("a",{attrs:{href:"http://www.cgtblog.com/qd/211.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("js代码实现网站中英文相互翻译"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"_2、自己编写中英文对照表-用js控制"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、自己编写中英文对照表-用js控制"}},[t._v("#")]),t._v(" 2、自己编写中英文对照表，用js控制")]),t._v(" "),s("ul",[s("li",[t._v("优点：一对一翻译，所以准确度最高。")]),t._v(" "),s("li",[t._v("缺点：需要编写大量中英文对照表，只适合于少量的固定翻译。")]),t._v(" "),s("li",[t._v("参考文章："),s("a",{attrs:{href:"http://blog.csdn.net/stpeace/article/details/10858171",target:"_blank",rel:"noopener noreferrer"}},[t._v("html页面如何实现中英文切换？"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("由于公司的要求是把整站进行翻译，且官网中存在新闻，即存在大量不可预料的数据，同时考虑到富文本数据不好翻译。所以，总的来说，第一种方案最为合适，不过可惜，需要梯子，没办法，只能别寻出路。好在微软也有一个类似谷歌整站翻译的Api：")]),t._v(" "),s("blockquote",[s("p",[s("a",{attrs:{href:"https://msdn.microsoft.com/en-us/library/dn341982.aspx",target:"_blank",rel:"noopener noreferrer"}},[t._v(" The Translator Web Widget API"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("其实，微软提供的Demo实现上也很简单，分如下几步：")]),t._v(" "),s("ol",[s("li",[t._v("引入The Translator Web Widget API")]),t._v(" "),s("li",[t._v("监听dom加载完毕，调用Microsoft.Translator.Widget.Translate()整站翻译。")])]),t._v(" "),s("h2",{attrs:{id:"二、实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#二、实现"}},[t._v("#")]),t._v(" 二、实现")]),t._v(" "),s("h3",{attrs:{id:"_1、封装language-js"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1、封装language-js"}},[t._v("#")]),t._v(" 1、封装language.js")]),t._v(" "),s("p",[t._v("根据上面的对微软提供的Demo的研究，我们对此进一步封装，因为中英文切换一般都是一次点击后，往后的统一每个页面都需要或不需要翻译，这就需要记录一个状态值，这里选用html5提供的storage来储存这个状态，并向外提供一个修改该状态并刷新页面的方法。故，该js（language.js）编写如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something ")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"script"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n script"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"text/javascript"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n script"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementsByTagName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'head'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n \n \n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sessionStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"language"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onreadystatechange")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("readyState "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'complete'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Microsoft"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Translator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Widget"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Translate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CHS'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onProgress"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onError"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onComplete"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onRestoreOriginal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onProgress")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onComplete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#WidgetFloaterPanels"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onRestoreOriginal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("translate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sessionStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"language"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sessionStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"language"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sessionStorage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"language"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//刷新当前页面.")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2、编写测试页面"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2、编写测试页面"}},[t._v("#")]),t._v(" 2、编写测试页面")]),t._v(" "),s("p",[t._v("编写一个测试页面（test.html）。要使用上面的language.js，必须进行以下三步：")]),t._v(" "),s("ol",[s("li",[t._v("设置页面编码为utf-8 "),s("meta",{attrs:{charset:"UTF-8"}})]),t._v(" "),s("li",[t._v("引入jquery和language.js")]),t._v(" "),s("li",[t._v("设置按钮的点击事件，去调用中英文切换函数：translate();")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Microsoft Widget API Sample"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("charset")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("UTF-8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("jquery-1.11.3.js"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("language.js"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("中英文切换")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n 你好\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#change"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("click")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("translate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("试试看效果吧，反正我觉得还行~")]),t._v(" "),s("h2",{attrs:{id:"三、其他"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#三、其他"}},[t._v("#")]),t._v(" 三、其他")]),t._v(" "),s("p",[t._v("上面编写的language.js中写死了中文转英文（zh-CHS转en），如果项目需要其他语言的转换，对language.js进行自定义扩展即可。")])])}),[],!1,null,null,null);s.default=p.exports}}]); \ No newline at end of file diff --git a/assets/js/154.3c61161f.js b/assets/js/154.3c61161f.js new file mode 100644 index 000000000..8e19c5926 --- /dev/null +++ b/assets/js/154.3c61161f.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[154],{503:function(t,a,s){"use strict";s.r(a);var n=s(14),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"一、简介"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#一、简介"}},[t._v("#")]),t._v(" 一、简介")]),t._v(" "),a("p",[t._v("微信小程序播放教育类视频要求具备有相关资质，但这些资质一般公司很难短时间申请下来（甚至有的公司压根就申请不了），而【短视频播放器小程序插件】含有《信息网络传播视听节目许可证》的资质证书备案，可以利用该插件来解决资质问题，相关截图如下：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205152148376.png",alt:""}})]),t._v(" "),a("blockquote",[a("p",[t._v("图片来源："),a("a",{attrs:{href:"https://cloud.tencent.com/document/product/266/36849",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://cloud.tencent.com/document/product/266/36849"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("采购流程于技术无关，以下内容着重讲解如何集成该微信小程序插件。")]),t._v(" "),a("blockquote",[a("p",[t._v("注：【短视频播放器小程序插件】授权费 3 万/年（有 14 天试用 Licence），如果有购买腾讯云其他服务的话，满足一定条件，会赠送 1 年 免费使用 Licence，详情找腾讯云客服咨询（2022 年 04 月如此，赠送情况可能随时会变）。")])]),t._v(" "),a("h2",{attrs:{id:"二、使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#二、使用"}},[t._v("#")]),t._v(" 二、使用")]),t._v(" "),a("ul",[a("li",[t._v("激活：在腾讯云控制台激活插件 Licence 之后，才能正常使用该播放器插件。")]),t._v(" "),a("li",[t._v("appid：后面插件用到的 appid 需要在【腾讯云控制台】>账号信息中查看获取。")]),t._v(" "),a("li",[t._v("云点播短视频播放器-开发文档："),a("a",{attrs:{href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx116d0dd5e6a39ac7&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx116d0dd5e6a39ac7&lang=zh_CN"),a("OutboundLink")],1)])]),t._v(" "),a("h3",{attrs:{id:"_1、绑定插件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1、绑定插件"}},[t._v("#")]),t._v(" 1、绑定插件")]),t._v(" "),a("p",[t._v("因为微信小程序插件没有实质代码或 SDK，所以无法在本地添加集成，需要在微信小程序平台，将 "),a("code",[t._v("小程序AppID")]),t._v(" 与 "),a("code",[t._v("插件AppID")]),t._v(" 进行绑定（即给小程序添加插件），开发者工具在编译时会自动引入，绑定有 2 种方式：")]),t._v(" "),a("ul",[a("li",[t._v("方式 1：登录微信小程序平台，在 "),a("code",[t._v("设置-第三方设置")]),t._v(" 中找到 "),a("code",[t._v("添加插件")]),t._v("，输入插件 AppID（"),a("code",[t._v("wx116d0dd5e6a39ac7")]),t._v(" ）搜索并添加：")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205152216296.png",alt:""}})]),t._v(" "),a("ul",[a("li",[t._v("方式 2：在 "),a("a",{attrs:{href:"https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx116d0dd5e6a39ac7&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("云点播短视频播放器文档"),a("OutboundLink")],1),t._v(" 页面直接点击 "),a("code",[t._v("添加插件")]),t._v("：")])]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205152218693.png",alt:""}})]),t._v(" "),a("blockquote",[a("p",[t._v("云点播短视频播放器文档："),a("a",{attrs:{href:"https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx116d0dd5e6a39ac7&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx116d0dd5e6a39ac7&lang=zh_CN"),a("OutboundLink")],1)])]),t._v(" "),a("h3",{attrs:{id:"_2、集成插件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2、集成插件"}},[t._v("#")]),t._v(" 2、集成插件")]),t._v(" "),a("p",[t._v("微信小程序原生工程需要 "),a("code",[t._v("在 app.json 里声明使用的插件及版本")]),t._v("，对应到 uniapp 工程，则是在 "),a("code",[t._v("manifest.json")]),t._v(" 文件中微信小程序特有配置（即 "),a("code",[t._v("mp-weixin")]),t._v(" 节点） 处，进行 "),a("code",[t._v("plugins")]),t._v(" 配置声明：")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// manifest.json 源码视图")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 小程序特有相关 */")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"mp-weixin"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"appid"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wxxxxxxxxxxx"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"plugins"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 云点播短视频播放器")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx116d0dd5e6a39ac7&token=1835838344&lang=zh_CN")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"cloudPlayer"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.2"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"provider"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx116d0dd5e6a39ac7"')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("manifest.json 配置项说明："),a("a",{attrs:{href:"https://uniapp.dcloud.io/collocation/manifest.html#%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%88%97%E8%A1%A8",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://uniapp.dcloud.io/collocation/manifest.html"),a("OutboundLink")],1)])]),t._v(" "),a("h3",{attrs:{id:"_3、页面内使用播放器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3、页面内使用播放器"}},[t._v("#")]),t._v(" 3、页面内使用播放器")]),t._v(" "),a("p",[t._v("微信小程序原生工程需要 "),a("code",[t._v("在 页面的 xxxx.json 里声明")]),t._v("，对应到 uniapp 工程，则是在 "),a("code",[t._v("pages.json")]),t._v(" 文件中，在需要使用插件的 "),a("code",[t._v("页面的 style")]),t._v(" 的微信小程序特有配置（即 "),a("code",[t._v("mp-weixin")]),t._v(" 节点）处，进行 "),a("code",[t._v("usingComponents")]),t._v(" 配置声明：")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pages.json")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n ..."),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/course/course"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"style"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"navigationBarTitleText"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"课程"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"mp-weixin"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 云点播短视频播放器")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"usingComponents"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"cloud-player"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"plugin://cloudPlayer/player"')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"globalStyle"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("pages.json 配置项说明："),a("a",{attrs:{href:"https://uniapp.dcloud.io/collocation/pages.html#style",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://uniapp.dcloud.io/collocation/pages.html#style"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("声明完哪个页面需要使用插件播放器之后，就可以在那个页面的布局文件中使用插件播放器了：")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[t._v("// 在wxml里插入\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("cloud-player")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("appid")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("xxxxx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fileid")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("xxxxxxxx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("playerid")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("myPlayerId"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("注：微信小程序原生工程中，页面是 "),a("code",[t._v("wxml")]),t._v(" 文件，uniapp 工程中是 "),a("code",[t._v("vue")]),t._v(" 文件。另外，目前这种声明方式只对单个配置过的页面有效，也就是说，如果其他页面也需要使用插件播放器，还需要在其他页面的"),a("code",[t._v("style")]),t._v("中单独进行配置，这就很麻烦了，不过现在不用烦恼，后面会解决这个问题。")])]),t._v(" "),a("h3",{attrs:{id:"_4、组件内使用播放器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4、组件内使用播放器"}},[t._v("#")]),t._v(" 4、组件内使用播放器")]),t._v(" "),a("p",[t._v("为了功能复用，以及方便代码维护，实际开发中，往往会自定义组件，对常用的布局、功能进行封装。微信小程序原生工程可以在自定义组件的 json 文件中进行配置，跟页面相同的 "),a("code",[t._v("usingComponents")]),t._v(" 配置即可：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource20220417121922/image/202205152254744.png",alt:""}})]),t._v(" "),a("blockquote",[a("p",[t._v("官方的 "),a("a",{attrs:{href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx116d0dd5e6a39ac7&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("云点播短视频播放器-开发文档"),a("OutboundLink")],1),t._v(" 只说明在了如何在网页中使用插件，但没有对组件中如何使用插件进行说明，很无语，希望后续官方能完善一下。另外，这是我发起工单询问之后，腾讯技术售后给我的 demo 工程中的代码，是否有效暂不确定 -_-!")])]),t._v(" "),a("p",[t._v("uniapp 遵循 vue 规范，想要在自定义组件要使用其他自定义组件，需要在 vue 文件中的 "),a("code",[t._v(" + + + + + + + + + + + + +
FSA全栈行动
后端
Python、Java、Django等技术
目录
# + 1. Linux音视频 +
1-1. Ubuntu安装nginx来搭建推流服务器 + 1-2. AppRTC实战 +
# + 2. Docker +
2-1. Docker - 安装、加速和基本使用 + 2-2. Docker - 操作镜像资源 + 2-3. Docker - 操作容器 + 2-4. Docker - 私有仓库Registry + 2-5. Docker - 数据管理 + 2-6. Docker - 网络管理 + 2-7. Docker - Dockerfile的使用 + 2-8. Docker - Compose的使用 +
# + 3. Python环境 +
3-1. Python-虚拟环境 + 3-2. Mac上pyenv的安装与使用 +
# + 4. Python爬虫 +
4-1. Python - 爬虫基础与requests模块 + 4-2. Python - 爬虫之数据提取 + 4-3. Python - 爬虫之Selenium + 4-4. Python - 爬虫之Scrapy +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
前端
内功心法

+ ← + 内功心法→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/categories/index.html b/categories/index.html new file mode 100644 index 000000000..ff6d3547e --- /dev/null +++ b/categories/index.html @@ -0,0 +1,454 @@ + + + + + + 分类 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
全部分类
+ 移动端 + 139 + Flutter开发 + 38 + Android云游戏 + 1 + Android仓库 + 1 + 人工智能 + 5 + ChatGPT + 2 + AI绘画 + 4 + 聚合平台 + 1 + Android第三方SDK + 3 + AndroidNDK + 3 + 前端 + 6 + uniapp + 3 + Android系统开发 + 1 + Android混淆 + 1 + vue + 1 + vite + 1 + Android性能优化 + 5 + iOS逆向 + 6 + Android热修复 + 7 + 《Kotlin快速入门进阶》 + 31 + 设计模式 + 7 + iOS工具 + 3 + 后端 + 16 + Python环境 + 2 + 《深入浅出设计模式Java版》 + 20 + Android插件化 + 6 + RePlugin + 5 + iOS开源项目 + 8 + 更多 + 4 + 逆向 + 1 + iOS疑难杂症 + 3 + 《Flutter复习》 + 1 + 提升效率工具 + 1 + Python爬虫 + 4 + 代理 + 2 + Android音视频 + 2 + Android脚本 + 7 + iOS之Swift + 3 + 《Flutter从入门到实战》 + 6 + Dart事件循环机制与异步 + 1 + Docker + 8 + ListView与GridView + 1 + 基础布局 + 1 + 基础Widget + 1 + StateWidget与生命周期 + 1 + Dart特性语法 + 1 + 函数式编程 + 1 + 尾递归优化 + 1 + 作用域函数 + 1 + 常见高阶函数 + 1 + 高阶函数与函数引用 + 1 + 枚举与密封类 + 1 + 内部类 + 1 + 数据类 + 1 + 属性代理 + 1 + 扩展成员 + 1 + 方法重载与默认参数 + 1 + 伴生对象与静态成员 + 1 + 类及成员的可见性 + 1 + 继承 + 1 + 实现 + 1 + 面向对象 + 1 + 抽象类 + 1 + 接口 + 1 + 参数 + 1 + 异常 + 1 + 分支 + 1 + 循环 + 1 + 运算符 + 1 + 中缀表达式 + 1 + 类成员 + 1 + 函数 + 1 + Lambda表达式 + 1 + 常量 + 1 + 变量 + 1 + 区间 + 1 + 数组 + 1 + 类 + 2 + 包 + 1 + Kotlin快速入门进阶 + 1 + 数据类型 + 1 + AndroidTv开发 + 2 + DroidPlugin + 1 + AndroidUI + 12 + Linux音视频 + 2 + iOS组件化 + 5 + Android注解AOP + 3 + Android源码 + 3 + iOS之RxSwift + 2 + iOS音视频 + 2 + 多语言 + 1 + iOSUI + 9 + iOS底层原理与应用 + 3

+ Flutter - 子部件任意位置观察滚动数据 +

LinXunFeng 2024-11-24 移动端Flutter开发 DartFlutter

+ Flutter - 危！3.24版本苹果审核被拒！ +

LinXunFeng 2024-11-13 移动端Flutter开发 DartFlutter

+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +

LinXunFeng 2024-09-21 移动端Flutter开发 DartFlutter

+ Flutter - 轻松实现PageView卡片偏移效果 +

LinXunFeng 2024-09-08 移动端Flutter开发 DartFlutter

+ Flutter - 升级到3.24后页面还会多次rebuild吗？🧐 +

LinXunFeng 2024-08-11 移动端Flutter开发 DartFlutter

+ Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻 +

LinXunFeng 2024-08-04 移动端Flutter开发 DartFlutterChat

+ Android - 云游戏本地悬浮输入框实现 +

FullStackAction 2024-07-07 移动端Android云游戏 云游戏串流输入法输入框悬浮softinputkeyboard键盘

+ Flutter - 支持观察NestedScrollView，兼容性更强 😈 +

LinXunFeng 2024-07-06 移动端Flutter开发 DartFlutter

+ Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻 +

LinXunFeng 2024-06-23 移动端Flutter开发 DartFlutterChat

+ Android - 利用 jitpack 免费发布闭源 aar +

FullStackAction 2024-06-21 移动端Android仓库 jitpackmaven闭源库aar
全部分类
+ 移动端 + 139 + Flutter开发 + 38 + Android云游戏 + 1 + Android仓库 + 1 + 人工智能 + 5 + ChatGPT + 2 + AI绘画 + 4 + 聚合平台 + 1 + Android第三方SDK + 3 + AndroidNDK + 3 + 前端 + 6 + uniapp + 3 + Android系统开发 + 1 + Android混淆 + 1 + vue + 1 + vite + 1 + Android性能优化 + 5 + iOS逆向 + 6 + Android热修复 + 7 + 《Kotlin快速入门进阶》 + 31 + 设计模式 + 7 + iOS工具 + 3 + 后端 + 16 + Python环境 + 2 + 《深入浅出设计模式Java版》 + 20 + Android插件化 + 6 + RePlugin + 5 + iOS开源项目 + 8 + 更多 + 4 + 逆向 + 1 + iOS疑难杂症 + 3 + 《Flutter复习》 + 1 + 提升效率工具 + 1 + Python爬虫 + 4 + 代理 + 2 + Android音视频 + 2 + Android脚本 + 7 + iOS之Swift + 3 + 《Flutter从入门到实战》 + 6 + Dart事件循环机制与异步 + 1 + Docker + 8 + ListView与GridView + 1 + 基础布局 + 1 + 基础Widget + 1 + StateWidget与生命周期 + 1 + Dart特性语法 + 1 + 函数式编程 + 1 + 尾递归优化 + 1 + 作用域函数 + 1 + 常见高阶函数 + 1 + 高阶函数与函数引用 + 1 + 枚举与密封类 + 1 + 内部类 + 1 + 数据类 + 1 + 属性代理 + 1 + 扩展成员 + 1 + 方法重载与默认参数 + 1 + 伴生对象与静态成员 + 1 + 类及成员的可见性 + 1 + 继承 + 1 + 实现 + 1 + 面向对象 + 1 + 抽象类 + 1 + 接口 + 1 + 参数 + 1 + 异常 + 1 + 分支 + 1 + 循环 + 1 + 运算符 + 1 + 中缀表达式 + 1 + 类成员 + 1 + 函数 + 1 + Lambda表达式 + 1 + 常量 + 1 + 变量 + 1 + 区间 + 1 + 数组 + 1 + 类 + 2 + 包 + 1 + Kotlin快速入门进阶 + 1 + 数据类型 + 1 + AndroidTv开发 + 2 + DroidPlugin + 1 + AndroidUI + 12 + Linux音视频 + 2 + iOS组件化 + 5 + Android注解AOP + 3 + Android源码 + 3 + iOS之RxSwift + 2 + iOS音视频 + 2 + 多语言 + 1 + iOSUI + 9 + iOS底层原理与应用 + 3
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..628cdc7938dbc80aaacf4f579754defab78699b5 GIT binary patch literal 16958 zcmeHMd2CeG9xjUFiaV|e5RIr9mxytTN-zNeAyGs?A^H$~(gy_PvHQXzrF{q#1SztJ z28yCk5Ck5y6gq8zu0UIs?i32sc5J8Hw6k^kz2A3+JKPycDP{VX_mJCj=iGCC%lBLF zB_yPi{Oj8{ME>>&d8%JXNVkxXkf-F5rI5LDab1nR-bw!##xM{t5HJuh5HJuh5HJuh z5HJuh5V$S`nwy)UU4evJTMyiOwci>o&cPm{fzrVvv^~upxj1_-^3$*D`SadxcfxA5 z!{hOuYnJm|=Vfbfp{&fN?)5U));7ZFYVz@{t#!cV_Wll}uhHWC*I)HY7T!}Po6QNQ z(|b-&|61=!uc^t6{qcoJOgw|6q%%lJID_!;bR;GftKVx@=U{70zMn2Ucm6^x=FLq* zK|uw!{gI3F=WF3{yYSm@1sFUy7TdNLi>w|$ky294*t986Fmod#y$t^tlYswxohiTl zbs?7CHDc?5MfBeilZ%E%2MUWT@$bn;FluyylHHHNHU6L;&0;@ZUORf=a5iJ+tTZ%H zCb^tWm)Oju^jG-HUWfcHE3d~lVY07T_PE^mas3I*oSBAi7afDe(tzYc7kv6FKEf+4 zqZ}JH76>hm$nJtmt|?Q}6mPxglqFTL`gL<5DytgAN1RAXzJTw(J0|yTrT6SP8G=iL z{#d*3scU|r75Vv9IF)O~`0+_%*Gl9TRHLejetgNdX}kaJEr8ivhcNLI`XfhEQxgUc ziNlKTbKn-eYHPgb_>B4xgN&mU*chG9C3TK`r%o09FVavCpF&=qRXftI*=x@xu{C|H4(1EhICr)N6DK93^gR(n-g9KAC91fSr+zh8f z{C{Su;=$ZdQ)kDybJfazG!xHI->+w8V$xSh2>n+g_Qw?=;=f0+bm=j~?k~pj6>#SF^}^GwFr6(q zhd#J%TLDs1D%Ae=|MBv)h&{(oG-3PpJeZP7v1d=QYE=At{h#(qODjcHwGGo}q^LYY44XVIvAxU^Ulxfo`V|NB0r65cmuK`t z)=pDm2|`1Y5f@*CHEVOQZ|_;PKNx?g->K78m^LF7*(WU6x4%T$Qu9gjP#DNQ%E{cz z_^0hD|FmgoXtX=9KfV;KbLyPzRp-QKSVO*DoC$Mzt>kc*aUJUNevKa_Mb1Y`~#IhtSx_SZ%=p z+6e+_ef;sqkpI)cd+)s$RN9(I4u=EJJo5~0z4cb~=+Q&^A&2(psx#%=x^*kwe*0~_ z^wLWhJ9aGQ&z~>vht?Kl<$lJxTY7n?)7j!4jVbq@IB^0GJ@k;$pLDqv%t3mSCr`#r zH{GOo5a%5`cC?8F&n{iM6rDPC@}1@RTW+}p{rdI8qD6~TzSoFx|L)zp@yjp2;E_ij z!ABo`)T%z*KWNY(MVmYpFJ9d0evQwy%;eF(e}6yu83Sz@t5&VLOn2(f>$TTjQ#icy z&O4~6s8Di~m&s(p!i5V}JTu->Q&X?Vim^0m)F?&gi6@@Gj2SaJME_~irupf=Wy_W; z%A|kr$}6wrKmtV&7&p$8kO6QgABSwty!|aPMzR;8O-4mgX6AQ*;cz8J0u3and&ExUhbI++9LRmFhwDJA-->-5* zLqmg#HSHPa?%lh$SaYc7x^?UD;fEjkXnp?q=N+Oy8GFCq`&IZ0{XV1 zq9V+iH4As%d8dz_rZ3m?^78z!rjP8}wM*%xw=M6pva)c`J@@$NOrJizL-bEcNm2P* zlXK3TIc?JaN}DJ3jJN+K!f{xIi-|rrL@IgObdcM4W z_0?Cw{L|8Vil#4T(xQ)32fdE$k8C!ZG9C9ZZwB@afjk)(`n44+Rw(_0jREPgZ`1P% zyr-;;Mf#;Sc#cYId70!XVgYvMB&=(ILJg6rXlzU>U?*RjCLtDJ@#v7`y)fmzjSo?S`a6jd}?Y7$x z78cfGpG({(PMoNGq-)o%3Io31FcxEDWAXUokNaUr`pk!XcKrBpO@yG$)TK|KK8h!K zvG!zUX3DqQz3QDPGBQ&2pL+ZM`RAXP())aQE&6r@hi#9_4xRBMT36B^KZWSrizyb9(cef3!m-Wx$~;>v=`|%`S;{Nc%4=Z0}f6sbM|D=2eB?nWNoSYoL9*yUyJAH}u;P%^ZS2cm} zy2OR=e|ijv4SPSmzC5G<{q)mM`<)3k4($K*{Pg#%PwYvUduPv{t!BpkyYIg1^Y56L z7!|+7OMjMmaO%{l>fMOzj0@Juvu7`TyC)Xe+1cpZx3Aw>Jss9&J!ZkypYLV-_M_+7 z(mnmOyS%T_Cs^A~o;;~Up=``$%+LJx(b8G25lh;VHrEEv(zjbXw|@Ql4%MGB(1wBU zC4qXd|6q;Mdiv<-XiW_t4#~;Ms+MbK=@aY^XnV#3Z5?P!{-!@^XY@1A^E*IC56WP% zSil~g??UV|7A#nR*I$2K>CE0IG&EH8wftVdcM;bAz(G3v*1_*SyvB_ihu?qy9fuDe zR(c2O&huR39=j`n-w?DnV1oG?X-;|BLD(!YHgYm$tt%Er@EiDb{>FJm>X_E3q zej8(KwuD(*=^FbC1PlZW1PlZW1PlZW1PlZW1PlZW1PlZW1pY1v@QbVeSJ%Ib=HNFa JWBiQ~_&>R^!ZQE> literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 000000000..5f5eac310 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + + FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动

+ Flutter - 子部件任意位置观察滚动数据 +

LinXunFeng 2024-11-24 移动端Flutter开发 DartFlutter

+ Flutter - 危！3.24版本苹果审核被拒！ +

LinXunFeng 2024-11-13 移动端Flutter开发 DartFlutter

+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +

LinXunFeng 2024-09-21 移动端Flutter开发 DartFlutter

+ Flutter - 轻松实现PageView卡片偏移效果 +

LinXunFeng 2024-09-08 移动端Flutter开发 DartFlutter

+ Flutter - 升级到3.24后页面还会多次rebuild吗？🧐 +

LinXunFeng 2024-08-11 移动端Flutter开发 DartFlutter

+ Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻 +

LinXunFeng 2024-08-04 移动端Flutter开发 DartFlutterChat

+ Android - 云游戏本地悬浮输入框实现 +

FullStackAction 2024-07-07 移动端Android云游戏 云游戏串流输入法输入框悬浮softinputkeyboard键盘

+ Flutter - 支持观察NestedScrollView，兼容性更强 😈 +

LinXunFeng 2024-07-06 移动端Flutter开发 DartFlutter

+ Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻 +

LinXunFeng 2024-06-23 移动端Flutter开发 DartFlutterChat

+ Android - 利用 jitpack 免费发布闭源 aar +

FullStackAction 2024-06-21 移动端Android仓库 jitpackmaven闭源库aar
文章分类
+ 移动端 + 139 + Flutter开发 + 38 + Android云游戏 + 1 + Android仓库 + 1 + 人工智能 + 5 + ChatGPT + 2 + AI绘画 + 4 + 聚合平台 + 1 + Android第三方SDK + 3 + AndroidNDK + 3 更多 ...
热门标签
Dart Flutter Chat 云游戏 串流 输入法 输入框 悬浮 softinput keyboard 键盘 jitpack maven 闭源库 aar ChatGPT AIGC Midjourney 302 AI 屏幕旋转 视频 缓存 视频缓存 第三方SDK OkHttp https SSL TLS FreeGPT35 FreeGPT35-Vercel 更多...
+ +
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/js/global.js b/js/global.js new file mode 100644 index 000000000..03fb50b5e --- /dev/null +++ b/js/global.js @@ -0,0 +1,7 @@ +window.onload = function () { + var footer = document.getElementsByClassName("footer")[0] + console.log(footer.childNodes) + footer.childNodes[1].nodeValue = '微信公众号 ' + footer.childNodes[2].href = 'https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/20210131111432.png' + footer.childNodes[2].innerHTML = 'FullStackAction' +} \ No newline at end of file diff --git a/mobile/index.html b/mobile/index.html new file mode 100644 index 000000000..162e11a8a --- /dev/null +++ b/mobile/index.html @@ -0,0 +1,288 @@ + + + + + + 移动端 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
移动端
Android、iOS、Flutter、Kotlin等技术
目录
# + 1. AndroidUI +
1-1. RecyclerView遇到notifyDataSetChanged无效时的解决方案 + 1-2. Material Design 兼容性控件学习 + 1-3. RecyclerView之ItemDecoration + 1-4. RecyclerView之使用ItemTouchHelper实现交互动画 + 1-5. MaterialDesign之SearchView全面解锁 + 1-6. MaterialDesign之学一波Palette + 1-7. MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习 + 1-8. MaterialDesign之对TabLayout的探索 + 1-9. 多RecyclerView同步滚动 + 1-10. Libgdx - 使用pixmap绘制透明圆角矩形 + 1-11. 使用PorterDuff解决clipPath无法抗锯齿问题 + 1-12. 解决ImageView图片挤压问题 +
# + 2. Android第三方SDK +
2-1. 安卓第三方登录之微信登录（图文详解） + 2-2. Android库发布至MavenCentral流程详解 + 2-3. Android - OkHttp 访问 https 的怪问题 +
# + 3. Android混淆 +
3-1. Android - 混淆 java-library 工程 +
# + 4. Android仓库 +
4-1. Android - 利用 jitpack 免费发布闭源 aar +
# + 5. Android系统开发 +
5-1. Android - 自动系统签名 +
# + 6. Android源码 +
6-1. LayoutInflater源码分析与应用 + 6-2. ArrayList源码分析 + 6-3. LinkedList与Queue源码分析 +
# + 7. Android注解AOP +
7-1. Android面向切面编程（AOP） + 7-2. 手撸一个简易Android数据库框架 + 7-3. 使用注解打造自己的IOC框架 +
# + 8. Android脚本 +
8-1. Gradle入门系列(一) - groovy基础语法 + 8-2. Gradle入门系列(二) - groovy高级语法 + 8-3. Gradle入门系列(三) - 初识Gradle与Project + 8-4. Gradle入门系列(四) - 初识Gradle Task + 8-5. Gradle入门系列(五) - Gradle其它模块与Plugin插件 + 8-6. Android脚本 - 不一样的Gradle多渠道配置总结 + 8-7. Android脚本 - 不一样的Gradle多渠道配置总结2 +
# + 9. AndroidTv开发 +
9-1. AndroidTV - 获取Mac地址 + 9-2. AndroidTV - 解决EditText焦点无法转移问题 +
# + 10. AndroidNDK +
10-1. AndroidNDK - makefile语法详解 + 10-2. AndroidNDK - Cmake详解 + 10-3. AndroidNDK - 编译 openssl +
# + 11. Android音视频 +
11-1. Android音视频 - Libyuv使用实战 + 11-2. Android音视频 - MediaCodec编码mp4踩坑记录 +
# + 12. Android热修复 +
12-1. 热修复与插件化基础 - dex与class + 12-2. 热修复与插件化基础 - Java与Android虚拟机 + 12-3. 热修复与插件化基础 - Java与Android的类加载器 + 12-4. 热修复 - 深入浅出原理与实现 + 12-5. 热修复 - Tinker的集成与使用 + 12-6. 热修复 - Bugly让热修复变得如此简单 + 12-7. 热修复 - Tinker多渠道加固配置 +
# + 13. Android性能优化 +
13-1. 性能优化 - 内存泄漏（1）入门篇 + 13-2. 性能优化 - 内存泄漏（2）工具分析篇 + 13-3. 性能优化 - 内存泄漏（3）代码分析篇 + 13-4. 解决WebView内存泄漏 + 13-5. Android - setVisibility() 失效，竟然是因为内存泄露 +
# + 14. Android云游戏 +
14-1. Android - 云游戏本地悬浮输入框实现 +
# + 15. Android插件化 +
# + 15-1. DroidPlugin +
+ 15-1-1. DroidPlugin手札 - home键强杀处理 +
# + 15-2. RePlugin +
+ 15-2-1. RePlugin集成Fresco + + 15-2-2. RePlugin强制退出App + + 15-2-3. RePlugin集成AndroidAutoSize + + 15-2-4. RePlugin集成ARouter + + 15-2-5. RePluginX - 兼容AndroidX并加入新特性开发纪要 +
# + 16. iOSUI +
16-1. iOS - Swift 仿微信小红点(无数字) + 16-2. iOS - 实现UINavigation全屏滑动返回(一) + 16-3. iOS - 实现UINavigation全屏滑动返回(二) + 16-4. iOS - Swift UICollectionView横向分页滚动，cell左右排版 + 16-5. iOS - Swift-UICollectionView横向分页的问题 + 16-6. iOS - Swift仿微信聊天图片显示 + 16-7. iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗 + 16-8. iOS - Swift UITableView的scrollToRow的坑 +
# + 17. iOS工具 +
17-1. iOS - 解决Transporter一直卡正在验证的问题 + 17-2. iOS - 解决SecurityEnvSDK与SGMain的冲突问题 + 17-3. iOS - 实现25秒完成测试包出包 +
# + 18. iOS底层原理与应用 +
18-1. iOS - 通过runtime获取某个类中所有的变量和方法 + 18-2. iOS - ARC与MRC的单例设计模式 + 18-3. iOS - 揭露Block的内部实现原理 +
# + 19. iOS组件化 +
19-1. iOS - Cocoapods-创建第三方框架 + 19-2. iOS-组件化开发（一）：远程私有库的基本使用 + 19-3. iOS-组件化开发（二）：远程私有库的更新与子库 + 19-4. iOS-组件化开发（三）：加载资源文件 + 19-5. iOS-组件化开发（四）：fastlane实现pod自动化 +
# + 20. iOS音视频 +
20-1. iOS - 给高仿微信添加直播聊天功能 + 20-2. iOS - 采集音视频及写入文件 + 20-3. iOS - 视频采集详解 +
# + 21. iOS疑难杂症 +
21-1. iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError) + 21-2. Fastlane - 解决报错Could not find a `ios` simulator + 21-3. iOS - 记录一次对屏幕旋转后崩溃的定位过程 +
# + 22. iOS之Swift +
22-1. iOS - Swift 面向协议编程（一） + 22-2. iOS - Swift面向协议编程（二） + 22-3. Swift - PropertyWrapper +
# + 23. iOS之RxSwift +
23-1. iOS - RxSwift项目实战记录 + 23-2. RxSwift + MJRefresh 打造自动处理刷新控件状态 +
# + 24. iOS开源项目 +
24-1. iOS - Swift3.0 高仿喜马拉雅FM + 24-2. iOS - Swift 高仿微信 + 24-3. iOS - 面向协议方式封装空白页功能 + 24-4. iOS - 打造Moya便捷解析库，提供RxSwift拓展 + 24-5. iOS - 面向协议封装全屏旋转功能 + 24-6. Swift - 优雅的适配大小 + 24-7. Swift - 掌控Moya的网络请求、数据解析与缓存 + 24-8. ReactorKit + RxDataSources列表多次刷新的解决方案 +
# + 25. iOS逆向 +
25-1. Mac远程登录到iOS设备 + 25-2. Mach-O文件结构分析 + 25-3. iOS逆向 - 应用脱壳 + 25-4. iOS逆向 - 运行时分析（一）class-dump + 25-5. iOS逆向 - 运行时分析（二）Cycript + 25-6. iOS逆向 - 运行时分析（三）Frida +
# + 26. Flutter开发 +
26-1. Dart - 抽象类的实例化 + 26-2. Flutter - 打印好用的Debug日志 + 26-3. Flutter - 混合开发 + 26-4. Flutter - 解决混合开发iOS脚本打包遇到的问题 + 26-5. Flutter - 低版本在iOS14上遇到的问题与解决方案 + 26-6. Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题 + 26-7. Flutter - 实现列表上下拉切换header + 26-8. Flutter - 获取ListView当前正在显示的Widget信息 + 26-9. Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥 + 26-10. Flutter - 快速实现聊天会话列表的效果，完美💯 + 26-11. Flutter - 聊天输入框更新文本时的必备优化点🔖 + 26-12. Flutter - 我给官方提PR，解决run命令卡住问题 😃 + 26-13. Flutter - 探索run命令到底做了什么 🤔 + 26-14. Flutter - 引擎调试（iOS篇）🛠 + 26-15. Flutter - 引擎调试bug到提交PR实战 🐞 + 26-16. Flutter - 船新升级😱支持观察第三方构建的滚动视图💪 + 26-17. Flutter - 瀑布流交替播放视频 🎞 + 26-18. Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖 + 26-19. Flutter - 滚动视图中的表单防遮挡 🗒 + 26-20. Flutter - 秒杀1/2曝光统计 📊 + 26-21. 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐 + 26-22. Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓 + 26-23. Flutter - 混编项目集成Shorebird热更新🐦（安卓篇） + 26-24. Flutter - 混编项目集成Shorebird热更新🐦（iOS篇） + 26-25. Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞 + 26-26. Flutter - 升级3.19之后页面多次rebuild？🤨 + 26-27. Flutter - 热更新 Shorebird 1.0 正式版来了 🐦 + 26-28. Flutter - 使用Pigeon实现视频缓存插件 🐌 + 26-29. Flutter - 轻松搞定屏幕旋转功能 😎 + 26-30. Flutter - 解决Connection closed before full header was received + 26-31. Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻 + 26-32. Flutter - 支持观察NestedScrollView，兼容性更强 😈 + 26-33. Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻 + 26-34. Flutter - 升级到3.24后页面还会多次rebuild吗？🧐 + 26-35. Flutter - 轻松实现PageView卡片偏移效果 + 26-36. Flutter - 轻松搞定炫酷视差(Parallax)效果 + 26-37. Flutter - 危！3.24版本苹果审核被拒！ + 26-38. Flutter - 子部件任意位置观察滚动数据 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
前端

前端→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/more/index.html b/more/index.html new file mode 100644 index 000000000..02ddb22e5 --- /dev/null +++ b/more/index.html @@ -0,0 +1,98 @@ + + + + + + 更多 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
更多
逆向、运维等技术
目录
# + 1. 代理 +
1-1. FQ - Terminal下的代理工具ProxyChains-NG + 1-2. FQ-各平台终端设置代理的方法 +
# + 2. 提升效率工具 +
2-1. Jsonnet - json数据模板语言 +
# + 3. 逆向 +
3-1. 逆向 - 用IDA破解adb时间限制 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
内功心法

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/note/designpattern/index.html b/note/designpattern/index.html new file mode 100644 index 000000000..c29ad7349 --- /dev/null +++ b/note/designpattern/index.html @@ -0,0 +1,106 @@ + + + + + + 深入浅出设计模式Java版 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
深入浅出设计模式Java版
本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。
目录
1. DesignPattern - 设计原则与设计模式初探 +
2. DesignPattern - 单例模式【创建型】 +
3. DesignPattern - 工厂模式【创建型】 +
4. DesignPattern - 原型模式【创建型】 +
5. DesignPattern - 建造者模式【创建型】 +
6. DesignPattern - 适配器模式【结构型】 +
7. DesignPattern - 桥接模式【结构型】 +
8. DesignPattern - 组合模式【结构型】 +
9. DesignPattern - 装饰器模式【结构型】 +
10. DesignPattern - 代理模式【结构型】 +
11. DesignPattern - 外观模式【结构型】 +
12. DesignPattern - 享元模式【结构型】 +
13. DesignPattern - 策略模式【行为型】 +
14. DesignPattern - 模板方法模式【行为型】 +
15. DesignPattern - 观察者模式【行为型】 +
16. DesignPattern - 责任链模式【行为型】 +
17. DesignPattern - 命令模式【行为型】 +
18. DesignPattern - 迭代器模式【行为型】 +
19. DesignPattern - 备忘录模式【行为型】 +
20. DesignPattern - 状态模式【行为型】 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/note/flutter/index.html b/note/flutter/index.html new file mode 100644 index 000000000..c8b333fe0 --- /dev/null +++ b/note/flutter/index.html @@ -0,0 +1,92 @@ + + + + + + Flutter从入门到实战 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
Flutter从入门到实战
本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。
目录
1. Flutter - Dart特性语法 +
2. Flutter - Dart事件循环机制与异步 +
3. Flutter - StateWidget与生命周期 +
4. Flutter - 基础Widget +
5. Flutter - 基础布局 +
6. Flutter - ListView与GridView +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/note/flutter/lxf/review/index.html b/note/flutter/lxf/review/index.html new file mode 100644 index 000000000..1b4eba1bc --- /dev/null +++ b/note/flutter/lxf/review/index.html @@ -0,0 +1,87 @@ + + + + + + Flutter复习 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
Flutter复习
本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。
目录
1. Dart的基础语法 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/note/kotlin/index.html b/note/kotlin/index.html new file mode 100644 index 000000000..d749aa368 --- /dev/null +++ b/note/kotlin/index.html @@ -0,0 +1,118 @@ + + + + + + Kotlin快速入门进阶 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
Kotlin快速入门进阶
本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。
目录
1. Kotlin - 数据类型 +
2. Kotlin - 类与构造器 +
3. Kotlin - 空类型和智能类型转换 +
4. Kotlin - 区间与数组 +
5. Kotlin - 常量与变量 +
6. Kotlin - 函数与Lambda表达式 +
7. Kotlin - 类成员 +
8. Kotlin - 运算符与中缀表达式 +
9. Kotlin - 分支与循环 +
10. Kotlin - 参数与异常 +
11. Kotlin - 面向对象之抽象类与接口 +
12. Kotlin - 面向对象之继承与实现 +
13. Kotlin - 类及成员的可见性 +
14. Kotlin - 伴生对象与静态成员 +
15. Kotlin - 方法重载与默认参数 +
16. Kotlin - 扩展成员 +
17. Kotlin - 属性代理 +
18. Kotlin - 数据类 +
19. Kotlin - 内部类 +
20. Kotlin - 枚举与密封类 +
21. Kotlin - 高阶函数与函数引用 +
22. Kotlin - 常见高阶函数 +
23. Kotlin - 作用域函数 +
24. Kotlin - 尾递归优化 +
25. Kotlin - 函数式编程 +
26. Kotlin - 改良设计模式 - 工厂模式 +
27. Kotlin - 改良设计模式 - 构建者模式 +
28. Kotlin - 改良设计模式 - 观察者模式 +
29. Kotlin - 改良设计模式 - 策略模式 +
30. Kotlin - 改良设计模式 - 迭代器模式 +
31. Kotlin - 改良设计模式 - 责任链模式 +
32. Kotlin - 改良设计模式 - 装饰者模式 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/00e6eb/index.html b/pages/00e6eb/index.html new file mode 100644 index 000000000..683faaa44 --- /dev/null +++ b/pages/00e6eb/index.html @@ -0,0 +1,110 @@ + + + + + + 解决WebView内存泄漏 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-04-01
目录

解决WebView内存泄漏

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 解决 WebView 内存泄漏

要解决 WebView 内存泄漏的要点如下：

  • 不要使用 xml 方式创建，而是使用代码把 WebView 给 new 出来
  • 不要让 WebView 持有对 Activity/Fragment 的 Context 引用（核心）
  • 销毁时，停止 WebView 的加载，并从父控件中将其移除

# 1、初始化 WebView

WebView 内存泄露的主要原因是引用了 Activity/Fragment 的 Context，加之 WebView 本身的设计问题，导致 Activity/Fragment 无法被即时释放，既然 WebView 无法即时释放 Context，那就让它引用全局的 Context 就好了：

// 让 WebView 使用 ApplicationContext
+val webview = WebView(this.applicationContext)
+

切记：不要在 xml 中使用 <WebView> 标签创建 WebView

# 2、销毁 WebView

为了保证 Activity/Fragment 界面销毁时，WebView 不要在后台继续进行没有意义的加载，并且避免父控件对 WebView 的引用导致发生意外泄露，需要进行如下 2 步：

  • 将 WebView 从其父控件中移除
  • 让 WebView 停止加载页面并释放
override fun onDestroy() {
+    // webview?.loadDataWithBaseURL(null, "", "text/html", "utf-8", null)
+    // webview?.clearView()
+    webview?.loadUrl("about:blank")
+    webview?.parent?.let {
+        (it as ViewGroup).removeView(webview)
+    }
+    webview?.stopLoading()
+    webview?.settings?.javaScriptEnabled = false
+    webview?.clearHistory()
+    webview?.clearCache(true)
+    webview?.removeAllViewsInLayout()
+    webview?.removeAllViews()
+    webview?.webViewClient = null
+    webview?.webChromeClient = null
+    webview?.destroy()
+    webview = null
+    super.onDestroy()
+}
+
+ +
+
#性能优化#内存泄漏#WebView
性能优化 - 内存泄漏（3）代码分析篇
Android - setVisibility() 失效，竟然是因为内存泄露

+ ← + Android - setVisibility() 失效，竟然是因为内存泄露→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/022231/index.html b/pages/022231/index.html new file mode 100644 index 000000000..4ecb9805c --- /dev/null +++ b/pages/022231/index.html @@ -0,0 +1,141 @@ + + + + + + Kotlin - 区间与数组 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-16
目录

Kotlin - 区间与数组

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 区间（Range）

区间是一个数学上的概念，表示范围。

# 区间的声明

Kotlin 中可以使用 .. 或 until 来声明区间：

val range: IntRange = 0..1024 // 闭区间[0,1024]，包括1024
+val rangeExclusive: IntRange = 0 until 1024 // 半开区间[0,1024)，不包括1024
+val emptyRange: IntRange = 0..-1 // 空区间[]
+

其实这里的 .. 操作符对应的是 Int 类中的一个 rangeTo() 方法：

/** Creates a range from this value to the specified [other] value. */
+public operator fun rangeTo(other: Byte): IntRange
+/** Creates a range from this value to the specified [other] value. */
+public operator fun rangeTo(other: Short): IntRange
+/** Creates a range from this value to the specified [other] value. */
+public operator fun rangeTo(other: Int): IntRange
+/** Creates a range from this value to the specified [other] value. */
+public operator fun rangeTo(other: Long): LongRange
+

# 区间常用操作

判断某个元素是否在区间内：

println(range.contains(50)) // true
+println(500 in range) // true
+

这里的 in 关键字对应的就是 IntRange 类中的 contains() 方法，因此上面的两行代码实质上是一样的。

判断区间是否为空：

println(rangeExclusive.isEmpty()) // false
+println(emptyRange.isEmpty()) // true
+

对区间进行遍历：

// 输出：0, 1, 2, 3 ..... 1020, 1021, 1022, 1023,
+for (i in rangeExclusive) {
+    print("$i, ")
+}
+

这里的 in 跟 for 配合使用，就可以实现区间的遍历效果。

# 区间的类型

所有的区间都是 ClosedRange 的子类，IntRange 最常用。通过源码不难发现，除了 IntRange ，ClosedRange 的子类还有 LongRange、CharRange 等等。

以 CharRange 为例，我们还可以写出 26 个大小写字母的区间：

// a b c d e f g h i j k l m n o p q r s t u v w x y z
+val lowerRange: CharRange = 'a'..'z'
+// A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+val upperRange: CharRange = 'A'..'Z'
+

# 数组（Array）

数组(Array)跟数(Number)没有关系，它指的是一系列对象。

# 创建数组

创建数组一般有 2 种方式：

  1. 使用 Array 类创建数组
  2. 使用库函数 arrayOfXXX() 创建数组

# 使用 Array 类创建数组

先看看 Array 的构造函数：

public class Array<T> {
+    /**
+     * Creates a new array with the specified [size], where each element is calculated by calling the specified
+     * [init] function. The [init] function returns an array element given its index.
+     */
+    public inline constructor(size: Int, init: (Int) -> T)
+
+    ...
+}
+

使用 Array 创建数组，需要指定元素类型（一般情况下可以省略），有 2 个必传参数，分别是数组长度 size，和元素初始化函数 init。

val array = Array<String>(5) { index -> "No.$index" }
+println(array.size) // 5
+for (str in array) { // No.0 No.1 No.2 No.3 No.4
+    print("$str ")
+}
+

当函数参数是最后一个形参时，可以把它写到括号外，这是 Kotlin 中的 lambda 写法，当然，你也可以不用 lambda 写法，就写在括号内：val array = Array<String>(5, { index -> "No.$index" })，关于 lambda 的相关知识在这里暂不细说。

# 使用库函数 arrayOfXXX() 创建数组

直接使用 Array 创建数组会稍稍有点麻烦，要指定个数，又要传入初始化函数， 而实际开发中，我们希望有更方便的写法来提高工作效率，Kotlin 就为此就提供了一系列创建数组的库函数 arrayOfXXX() ：

val arrayOfString: Array<String> = arrayOf("我", "是", "LQR")
+val arrayOfHuman: Array<Human> = arrayOf(Boy("温和", "英俊", "浑厚"), Girl("温柔", "甜美", "动人"))
+val arrayOfInt: IntArray = intArrayOf(1, 3, 5, 7)
+val arrayOfChar: CharArray = charArrayOf('H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd')
+

要注意，用于存放 String 类型或自定义类型的对象数组　的创建使用的是 arrayOf()，而基本数据类型数组的创建则有专门的库函数，如：intArrayOf()、charArrayOf() 等。intArrayOf()、charArrayOf() 等库函数是 Kotlin 为了避免基本数据装箱折箱的开销而专门创造出来的，比如：intArrayOf(1, 3, 5, 7) 创建出来的数组是 IntArray 类型，对应到 Java 中是 int[] ，而 arrayOf(1, 2, 3, 4) 创建出来的数组是 Array<Int> 类型，对应 Java 中是 Integer[]。

# 基本数据类型数组

为了避免不必要的装箱和拆箱，基本数据类型的数组是定制的：

Java Kotlin
int[] IntArray
short[] ShortArray
long[] LongArray
float[] FloatArray
double[] DoubleArray
char[] CharArray

注意：IntArray 和 Array<Int> 是完全不同的类型，无法直接相互转换！
+原话：Kotlin 也有无装箱开销的专门的类来表示原生类型数组: ByteArray、 ShortArray、IntArray 等等。这些类与 Array 并没有继承关系，但是它们有同样的方法属性集。

了解更多 Kotlin 中数组的相关知识，请访问：https://www.kotlincn.net/docs/reference/basic-types.html#数组 (opens new window)

# 数组常用操作

可以使用 .size 获取数组长度，使用 for-in 遍历数组：

println(arrayOfInt.size) // 4
+for (int in arrayOfInt) { // 1 3 5 7
+    print("$int ")
+}
+

Array 定义了 get 与 set 函数（按照运算符重载约定这会转变为 []），因此我们可以通过 [] 来获取或修改数组中的元素：

println(arrayOfHuman[1]) // 我是性格温柔，长相甜美，声音动人的人
+arrayOfHuman[1] = Boy("温和1", "英俊1", "浑厚1")
+println(arrayOfHuman[1]) // 我是性格温和1，长相英俊1，声音浑厚1的人
+

注意：自定义类型对象使用 println() 默认输出的是对象地址信息，如：com.charylin.kotlinlearn.Boy@7440e464 ，需要重写类的 toString() 方法来修改输出日志内容。

CharArray 提供了 joinToString() 方法，用于将字符数组拼接成字符串，默认以 , 作为拼接符：

println(arrayOfChar.joinToString()) // H, e, l, l, o, W, o, r, l, d
+println(arrayOfChar.joinToString("")) // HelloWorld
+

可以使用 slice() 方法对数组进行切片：

println(arrayOfInt.slice(1..2)) // [3, 5]
+
+ +
+
#Kotlin#Range#Array
Kotlin - 空类型和智能类型转换
Kotlin - 常量与变量

+ ← + Kotlin - 常量与变量→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/030ff5/index.html b/pages/030ff5/index.html new file mode 100644 index 000000000..238c5beaf --- /dev/null +++ b/pages/030ff5/index.html @@ -0,0 +1,398 @@ + + + + + + 热修复 - Bugly让热修复变得如此简单 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-12-12
目录

热修复 - Bugly让热修复变得如此简单

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

在上一篇《热修复——Tinker的集成与使用》 (opens new window)中，根据Tinker官方Wiki集成了Tinker，但那仅仅只是本地集成，有一个重要的问题没有解决，那就是补丁从服务器下发到用户手机上，如果你团队中的后台开发人员实力够强，那么完全可以自己做一个补丁管理系统，但我想应该没多少人愿意花精力在这个后台管理系统的开发上面吧，且开发有时候就是在造bug，鬼知道会挖出一个多大的坑呢？对于这样的一个问题，据我所知，市面上有3种Tinker的补丁管理系统，如下：

「Bugly」和「tinker-manager」是免费的，「tinkerpatch」是收费的，因为「tinkerpatch」收费，所以暂时不做考虑。Bugly由腾讯团队开发并维护，稳定性肯定没得说，而「tinker-manager」是GitHub上个人开发者开发维护的，稳定性没法保证（我没有贬低开发者的意思，毕竟势单力薄，人多力量大嘛），故本人觉得，Bugly是目前最优的Tinker热修复解决方案。在开始进入Bugly集成之前，你可以先点击下载Demo (opens new window)试试看看。

# 二、获取App ID

要使用Bugly的热修复功能，首先得注册并登录Bugly，然后点击进入「Bugly产品页面」 (opens new window)，或点击“我的产品 ”。

我这个账号之前是没有创建过产品，所以这里什么也没有，接着点击“新建产品”。

填写必要的信息后，点击“保存”。

通过“产品设置”，选择刚刚创建的产品（图中第3步），可以查看到产品对应的App ID。

这个App ID很重要，先记录好，后续会用到。

Demo的App ID为: 3062edb401。不要用我的，对你来说一点用处都没有，请使用你自己产品的App ID。

# 二、添加插件依赖

项目的build.gradle：

dependencies {
+    classpath 'com.android.tools.build:gradle:3.0.0'
+    // tinkersupport插件(1.0.3以上无须再配置tinker插件）
+    classpath "com.tencent.bugly:tinker-support:1.1.1"
+}
+

# 三、集成SDK

app的build.gradle：

apply from: 'tinker-support.gradle'
+android {
+    defaultConfig {
+		...
+        // 开启multidex
+        multiDexEnabled true
+	}
+    // recommend
+    dexOptions {
+        jumboMode = true
+    }
+    // 签名配置
+    signingConfigs {
+        release {
+            try {
+                storeFile file("./keystore/release.keystore")
+                storePassword "testres"
+                keyAlias "testres"
+                keyPassword "testres"
+            } catch (ex) {
+                throw new InvalidUserDataException(ex.toString())
+            }
+        }
+
+        debug {
+            storeFile file("./keystore/debug.keystore")
+        }
+    }
+
+    // 构建类型
+    buildTypes {
+        release {
+            minifyEnabled true
+            signingConfig signingConfigs.release
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+        debug {
+            debuggable true
+            minifyEnabled false
+            signingConfig signingConfigs.debug
+        }
+    }
+
+    sourceSets {
+        main {
+            jniLibs.srcDirs = ['libs']
+        }
+    }
+}
+
+dependencies {
+	...
+    implementation "com.android.support:multidex:1.0.1" // 多dex配置
+    implementation 'com.tencent.bugly:crashreport_upgrade:1.3.4'// 远程仓库集成方式（推荐）
+}
+

签名配置部分请根据你项目的实际情况修改，如：

# 四、配置Tinker

在app的build.gradle文件同级目录下创建一个tinker-support.gradle文件，内容如下：

apply plugin: 'com.tencent.bugly.tinker-support'
+
+def bakPath = file("${buildDir}/bakApk/")
+
+/**
+ * 此处填写每次构建生成的基准包目录
+ */
+def baseApkDir = "tinker-bugly-1211-16-01-34"
+def myTinkerId = "base-" + rootProject.ext.android.versionName // 用于生成基准包（不用修改）
+//def myTinkerId = "patch-" + rootProject.ext.android.versionName + ".0.0" // 用于生成补丁包（每次生成补丁包都要修改一次，最好是 patch-${versionName}.x.x）
+
+/**
+ * 对于插件各参数的详细解析请参考
+ */
+tinkerSupport {
+
+    // 开启tinker-support插件，默认值true
+    enable = true
+
+    // 是否启用加固模式，默认为false.(tinker-spport 1.0.7起支持）
+    // isProtectedApp = true
+
+    // 是否开启反射Application模式
+    enableProxyApplication = true
+
+    // 是否支持新增非export的Activity（注意：设置为true才能修改AndroidManifest文件）
+    supportHotplugComponent = true
+
+    // 指定归档目录，默认值当前module的子目录tinker
+    autoBackupApkDir = "${bakPath}"
+
+    // 是否启用覆盖tinkerPatch配置功能，默认值false
+    // 开启后tinkerPatch配置不生效，即无需添加tinkerPatch
+    overrideTinkerPatchConfiguration = true
+
+    // 编译补丁包时，必需指定基线版本的apk，默认值为空
+    // 如果为空，则表示不是进行补丁包的编译
+    // @{link tinkerPatch.oldApk }
+    baseApk = "${bakPath}/${baseApkDir}/app-release.apk"
+
+    // 对应tinker插件applyMapping
+    baseApkProguardMapping = "${bakPath}/${baseApkDir}/app-release-mapping.txt"
+
+    // 对应tinker插件applyResourceMapping
+    baseApkResourceMapping = "${bakPath}/${baseApkDir}/app-release-R.txt"
+
+    // 构建基准包和补丁包都要指定不同的tinkerId，并且必须保证唯一性
+    tinkerId = "${myTinkerId}"
+
+    // 构建多渠道补丁时使用
+    // buildAllFlavorsDir = "${bakPath}/${baseApkDir}"
+
+}
+
+/**
+ * 一般来说,我们无需对下面的参数做任何的修改
+ * 对于各参数的详细介绍请参考:
+ * https://github.com/Tencent/tinker/wiki/Tinker-%E6%8E%A5%E5%85%A5%E6%8C%87%E5%8D%97
+ */
+tinkerPatch {
+    ...
+}
+

# 1、overrideTinkerPatchConfiguration

当overrideTinkerPatchConfiguration = true时，tinkerPatch可以省略不写，Bugly会加载默认的Tinker配置。但请注意，如果你的so文件不是存放在libs目录下（与src目录同级），又或者资源文件的存放在你自定义的目录中，那么这时你要小心了，这些文件在制作补丁包时不会被检测，也就是说这些so文件和资源文件将不会被热修复，这种情况下就需要将overrideTinkerPatchConfiguration = false，并设置tinkerPatch的lib和res属性。

其它具体的配置与说明可以查看「Tinker-接入指南」 (opens new window)。

# 2、baseApkDir

baseApkDir是基准包（也称基线包）的目录，在生产补丁时需要根据基准包在bakApk下具体文件夹名字修改，如：bakApk/xxxx，到时生成补丁包时要将baseApkDir的值改为xxxx。（xxxx是Tinker自动生成的，根据时间戳来命名）。

# 3、tinkerId

tinkerId是Bugly热修复方案最最重要的一个因素，一般取值为git版本号、versionName等等（我习惯用versionName），它会将补丁包与基准包产生对应关系，假设基准包的tinkerId为 base-1.0，则生成的补丁包中的YAPATCH.MF文件关系如下：

Bugly要求baseApk（基准包）的tinkerId与补丁包的tinkerId要不一样。所以，在生成基准包时，请用如下tinkerId：

def myTinkerId = "base-" + rootProject.ext.android.versionName // 用于生成基准包（不用修改）
+

当生成补丁包时，请使用如下tinkerId：

def myTinkerId = "patch-" + rootProject.ext.android.versionName + ".0.0" // 用于生成补丁包（每次生成补丁包都要修改一次，最好是 patch-${versionName}.x.x）
+

对于同一个基准包，我们可能会多次生成补丁包上传到Bugly的热修复管理后台，这时，这些补丁包的tinkerId也要不一样，不然的话，当客户手机上的App在获取补丁时，会错乱（亲测，当同个基准包的补丁包的tinkerId一样时，App每次重启都会获取不同的补丁包，导致tinkerId相同的补丁包轮流下发）。所以，"patch-" + rootProject.ext.android.versionName + ".0.0"中的".0.0"（称为计数）就是为了区分每次生成的补丁包，如.0.1，.0.2等等，建议versionName更新时计数重置。

因为Tinker的配置放在了tinker-support.gradle文件中，与app的build.gradle不在同一个文件中，所以没办法通过android.defaultConfig.versionName直接获取App的versionName，这里我使用了config.gradle来提取共同的属性，rootProject.ext.android.versionName获取的是config.gradle中的versionName属性，详情请百度。

# 4、补丁新旧判定

def myTinkerId = "patch-" + rootProject.ext.android.versionName + ".0.0" // 用于生成补丁包（每次生成补丁包都要修改一次，最好是 patch-${versionName}.x.x）
+

对于一个基准包，可以在Bugly上发布多个补丁包（切记tinkerid不同），这里或许会让你误以为计数越大，表明补丁越新，这是错误的，这个计数仅仅只是区分不同的补丁包而已，它没有标记补丁新旧的作用，补丁新旧由Bugly来判定，最后上传的补丁便是最新的补丁，举个例子，我在昨天上传了tinkerid为"patch-1.0.0.9"的补丁1，在今天上传了tinkerid为"patch-1.0.0.1"的补丁2，虽然补丁2的计数比补丁1小，但补丁2比补丁1晚上传，所以补丁2是最新的补丁，即补丁新旧与计数无关。Bugly会下发并应用最新的补丁（即补丁2），但还是建议计数从小到大计算，这里仅仅只是说明Bugly如何判定补丁新旧罢了。

# 五、初始化SDK

Bugly的初始化工作需要在Application中完成，但对原生Tinker来说，默认的Application是无法实现热修复的。看过Tinker官方Wiki的人应该知道，Tinker针对Application无法热修复的问题，给予开发者两个选择，分别是：

  • 使用「继承TinkerApplication + DefaultApplicationLike」。
  • 使用「DefaultLifeCycle注解 + DefaultApplicationLike」。

这2种选择都需要对自定义的Application进行改造，对于自定义Application代码不多的情况来说还可以接受，但有些情况还是比较"讨厌"这2种选择的，对此，Bugly给出了它的2种解决方法，分别如下：

  • 使用原来的自定义Application，Bugly通过反射为App动态生成新的Application。
  • 使用「继承TinkerApplication + DefaultApplicationLike」。

DefaultLifeCycle注解在Bugly中被阉割了。

分别对应tinker-support.gradle文件中enableProxyApplication的值：true或false。

# 1、enableProxyApplication = true

Bugly将通过反射的方式针对项目中自定义的Application动态生成新的Application，下图是源码中的AndroidManifest.xml和编译好的apk中的AndroidManifest.xml：

既然将enableProxyApplication的值设置为true，那接下来的重点就是完成Bugly的初始化工作了。需要在自定义的Application的onCreate()中进行Bugly的配置，在attachBaseContext()中进行Bugly的安装：

public class MyApplication extends Application {
+
+    private Context mContext;
+
+    @Override
+    public void onCreate() {
+        super.onCreate();
+        mContext = getApplicationContext();
+        // 这里实现SDK初始化，appId替换成你的在Bugly平台申请的appId
+        // 调试时，将第三个参数改为true
+        configTinker();
+    }
+
+    @Override
+    protected void attachBaseContext(Context base) {
+        super.attachBaseContext(base);
+        // you must install multiDex whatever tinker is installed!
+        MultiDex.install(mContext);
+        // 安装tinker
+        // 此接口仅用于反射Application方式接入。
+        Beta.installTinker();
+    }
+
+}
+

注意：

  1. Bugly的安装必须在attachBaseContext()方法中，否则将无法从Bugly服务器获取最新补丁。
  2. tinker需要你开启MultiDex,你需要在dependencies中进行配置compile "com.android.support:multidex:1.0.1"才可以使用MultiDex.install方法。

最后在清单文件中，声明使用我们自定义的Application即可：

<application
+    android:name="com.lqr.MyApplication"
+    ...>
+

# 2、enableProxyApplication = false

这是Bugly推荐的方式，稳定性有保障（因为第1种方式使用的是反射，可能会存在不稳定的因素），它需要对Application进行改造，首先就是继承TinkerApplication，然后在默认的构造函数中，将第2个参数修改为你项目中的ApplicationLike继承类的全限定名称：

public class SampleApplication extends TinkerApplication {
+    public SampleApplication() {
+        super(ShareConstants.TINKER_ENABLE_ALL, "com.lqr.SampleApplicationLike",
+                "com.tencent.tinker.loader.TinkerLoader", false);
+    }
+}
+

注意：这个类集成TinkerApplication类，这里面不做任何操作，所有Application的代码都会放到ApplicationLike继承类当中
+参数解析
+参数1：tinkerFlags 表示Tinker支持的类型 dex only、library only or all suuport，default: TINKER_ENABLE_ALL
+参数2：delegateClassName Application代理类 这里填写你自定义的ApplicationLike
+参数3：loaderClassName Tinker的加载器，使用默认即可
+参数4：tinkerLoadVerifyFlag 加载dex或者lib是否验证md5，默认为false

接着就是创建ApplicationLike继承类：

public class SampleApplicationLike extends DefaultApplicationLike {
+
+    public static final String TAG = "Tinker.SampleApplicationLike";
+    private Application mContext;
+
+    public SampleApplicationLike(Application application, int tinkerFlags,
+                                 boolean tinkerLoadVerifyFlag, long applicationStartElapsedTime,
+                                 long applicationStartMillisTime, Intent tinkerResultIntent) {
+        super(application, tinkerFlags, tinkerLoadVerifyFlag, applicationStartElapsedTime, applicationStartMillisTime, tinkerResultIntent);
+    }
+
+    @Override
+    public void onCreate() {
+        super.onCreate();
+        mContext = getApplication();
+        configTinker();
+    }
+
+    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
+    @Override
+    public void onBaseContextAttached(Context base) {
+        super.onBaseContextAttached(base);
+        // you must install multiDex whatever tinker is installed!
+        MultiDex.install(base);
+        // 安装tinker
+        Beta.installTinker(this);
+    }
+
+    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
+    public void registerActivityLifecycleCallback(Application.ActivityLifecycleCallbacks callbacks) {
+        getApplication().registerActivityLifecycleCallbacks(callbacks);
+    }
+
+    @Override
+    public void onTerminate() {
+        super.onTerminate();
+        Beta.unInit();
+    }
+}
+

注意：
+SampleApplicationLike这个类是Application的代理类，以前所有在Application的实现必须要全部拷贝到这里，在onCreate方法调用SDK的初始化方法，在onBaseContextAttached中调用Beta.installTinker(this)。

最后在清单文件中，声明改造好的Application（注意不是ApplicationLike）：

<application
+    android:name="com.lqr.SampleApplication"
+    ...>
+

# 3、配置Bugly

这是Bugly官方给出的配置，应有尽有，注释也很nice，请仔细看看，对项目的功能拓展与用户体验有帮助：

private void configTinker() {
+    // 设置是否开启热更新能力，默认为true
+    Beta.enableHotfix = true;
+    // 设置是否自动下载补丁，默认为true
+    Beta.canAutoDownloadPatch = true;
+    // 设置是否自动合成补丁，默认为true
+    Beta.canAutoPatch = true;
+    // 设置是否提示用户重启，默认为false
+    Beta.canNotifyUserRestart = true;
+    // 补丁回调接口
+    Beta.betaPatchListener = new BetaPatchListener() {
+        @Override
+        public void onPatchReceived(String patchFile) {
+            Toast.makeText(mContext, "补丁下载地址" + patchFile, Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onDownloadReceived(long savedLength, long totalLength) {
+            Toast.makeText(mContext,
+                    String.format(Locale.getDefault(), "%s %d%%",
+                            Beta.strNotificationDownloading,
+                            (int) (totalLength == 0 ? 0 : savedLength * 100 / totalLength)),
+                    Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onDownloadSuccess(String msg) {
+            Toast.makeText(mContext, "补丁下载成功", Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onDownloadFailure(String msg) {
+            Toast.makeText(mContext, "补丁下载失败", Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onApplySuccess(String msg) {
+            Toast.makeText(mContext, "补丁应用成功", Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onApplyFailure(String msg) {
+            Toast.makeText(mContext, "补丁应用失败", Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onPatchRollback() {
+
+        }
+    };
+
+    // 设置开发设备，默认为false，上传补丁如果下发范围指定为“开发设备”，需要调用此接口来标识开发设备
+    Bugly.setIsDevelopmentDevice(mContext, false);
+    // 多渠道需求塞入
+    // String channel = WalleChannelReader.getChannel(getApplication());
+    // Bugly.setAppChannel(getApplication(), channel);
+    // 这里实现SDK初始化，appId替换成你的在Bugly平台申请的appId
+    Bugly.init(mContext, "e9d0b7f57f", true);
+}
+

这里就用到了一开始获取到的App ID了，将其传入Bugly.init()方法的第二个参数，切记，用你自己的App ID。

其中如下两个方法很重要：

  • Bugly.setIsDevelopmentDevice()

设置当前设备是不是开发设备，这跟Bugly上传补丁包时所选的"下发范围"有关。

  • Bugly.init(context, appid, isDebug)

这个方法除了设置App ID外，还可以设置是否输出Log，可以观察到Bugly在App启动时做了哪些联网操作。

# 六、AndroidManifest.xml

# 1、 权限配置

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
+<uses-permission android:name="android.permission.INTERNET"/>
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
+<uses-permission android:name="android.permission.READ_LOGS"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+

# 2、Activity配置

<activity
+    android:name="com.tencent.bugly.beta.ui.BetaActivity"
+    android:configChanges="keyboardHidden|orientation|screenSize|locale"
+    android:theme="@android:style/Theme.Translucent"/>
+

# 3、FileProvider配置

<provider
+    android:name="android.support.v4.content.FileProvider"
+    android:authorities="${applicationId}.fileProvider"
+    android:exported="false"
+    android:grantUriPermissions="true">
+    <meta-data
+        android:name="android.support.FILE_PROVIDER_PATHS"
+        android:resource="@xml/provider_paths"/>
+</provider>
+

如果你使用的第三方库也配置了同样的FileProvider, 可以通过继承FileProvider类来解决合并冲突的问题，示例如下：

<provider
+    android:name=".utils.BuglyFileProvider"
+    android:authorities="${applicationId}.fileProvider"
+    android:exported="false"
+    android:grantUriPermissions="true"
+    tools:replace="name,authorities,exported,grantUriPermissions">
+    <meta-data
+        android:name="android.support.FILE_PROVIDER_PATHS"
+        android:resource="@xml/provider_paths"
+        tools:replace="name,resource"/>
+</provider>
+

# 4、升级SDK下载路径配置

在res目录新建xml文件夹，创建provider_paths.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- /storage/emulated/0/Download/${applicationId}/.beta/apk-->
+    <external-path name="beta_external_path" path="Download/"/>
+    <!--/storage/emulated/0/Android/data/${applicationId}/files/apk/-->
+    <external-path name="beta_external_files_path" path="Android/data/"/>
+</paths>
+

注：1.3.1及以上版本，可以不用进行以上配置，aar已经在AndroidManifest配置了，并且包含了对应的资源文件。

# 七、混淆

# Bugly混淆规则
+-dontwarn com.tencent.bugly.**
+-keep public class com.tencent.bugly.**{*;}
+
+# 避免影响升级功能，需要keep住support包的类
+-keep class android.support.**{*;}
+

好了，集成完毕，接下来就是制作基准包、补丁包和上传补丁包了。

# 八、制作基准包

在app编码完成并测试完成后，就是打包上线了，上线前打的包就是基准包啦，下面我们就来制作基准包，分3步：

  1. 打开app下的tinker-support.gradle文件。
  2. 将带"base"的tinkerId注释解开，并注释掉带"patch"的tinkerId。
  3. 双击运行build下的assembleRelease。

通常主Module的名字是"app"，但我这个Demo是"tinker-bugly"，所以你执行第3步时，要根据具体项目找到要制作基准包的主Module。

AS在执行assembleRelease指令时，就是在编译基准包了，当编译完成时，app的build目录下会自动生成基准包文件夹，以时间戳来命名的（也就是说，每次执行assembleRelease指令都会在build目录创建不同的基准包文件夹）。

这3个文件对之后制作补丁包来说是相当重要的，你需要做的就是将这3个文件保存好，可以保存到云盘、Git服务器上等等，但就不要让它就这么放着，因为在你执行clean Project时，app的build目录会被删除，这样基准包及mapping与R文件都会丢失。

到这里，你就可以把它（基准包：tinker-bugly-release.apk）上架到应用市场了。试下Demo：

# tip:加固与多渠道打包

本篇不涉及具体的加固与多渠道打包。

# 1、加固

如果你的app需要加固，那就需要在制作基准包之前，将tinker-support.gradle文件的isProtectedApp = true的注释去掉，然后加固，重新签名，最后上架，它对加固平台也有一定的要求。

详情见「Bugly热更新使用范例文档最后：加固打包」 (opens new window)部分。

# 2、多渠道打包

分「gradle配置productFlavors方式」与「多渠道打包工具打多渠道包方式（推荐）」。

详情见「Bugly热更新使用范例文档：多渠道打包」 (opens new window)部分。

# 九、补丁包

现在要动态修复App了，对于代码修复、so库修复、资源文件修复，分别对应Demo中的"say something"、"get string from .so"、"我的头像"，修复过程无非是改代码，替换so文件，替换资源文件，这里就不演示了，直接开始制作补丁包，先将tinker-support.gradle文件打开。

# 1、基准包命名

确保基准包及相关文件的命名与配置文件中的一致：

# 2、修改baseApkDir与tinkerId

  1. 修改baseApkDir的值为基准包所有文件夹的名字。
  2. 注释掉带"base"的tinkerId，取消带"patch"的tinkerId的注释（多次生成补丁时，记得修改"计数"，区分不同的补丁）。

# 3、执行编译，生成补丁

打开侧边的Gradle标签，找到项目的主Module，双击tinker-support下的buildTinkerPatchRelease指令，生成补丁包。

当编译完成后，在app的build/outputs/patch目录下会在"patch_singed_7zip.apk"文件，它就是补丁包，双击打开它，可以看到其中有一个YAPATCH.MF，里面记录了基准包与补丁包的tinkerId（两者是肯定不同，如果一样则说明配置有问题了）。

# 十、上传补丁包

# 1、流程图解

首先，点击进入「Bugly产品页面」 (opens new window)，或点击“我的产品 ”查看我的产品。

点击你要管理的产品后，依次点击"应用升级"、"热更新"，可以查看到该产品的补丁下发情况（这个产品我还没上传过补丁，故一片空白）。

按下图顺序操作即可上传补丁包：

# 2、上传失败分析

有可能你在上传完补丁包时，页面会提示"未匹配到可应用补丁包的App版本，请确认补丁包的基线版本是否已经发布"。

遇到这种情况请先冷静，首先来说明一件事：Bugly怎么知道基线版本是否已经发布？

通常按我们理解的，基准包发布就是上架到应用市场，但应用市场又不会通知Bugly某某产品已经上架了，对吧。其实，Bugly的上架通知是这样的：当基准包在手机上启动时，Bugly框架就会让App联网通知Bugly的服务器，同时上传当前App的版本号、tinkerId等信息，它这么做的目的有如下两个：

  • 标记某个tinkerId的基准包已经被安装到手机上使用了（即发布）。
  • 获取该tinkerId的基准包最新的补丁信息。

所以，当出现了"未匹配到可应用补丁包的App版本，请确认补丁包的基线版本是否已经发布"这样的提示时，可以确定，这个基准包的tinkerId等信息没有被上传到Bugly服务器，对此，鄙人将踩过的坑总结起来，摸索出了自己的解决方法，分如下几步：

  • 检查App是否能够联网。
  • 检查App ID是否正确。
  • 结合enableProxyApplication的取值，检查AndroidManifest.xml中声明的Application是否写对。
  • 检查Bugly的安装是不是在attachBaseContext()或onBaseContextAttached()方法中完成。

像我就犯过这样的错，明明在tinker-support.gradle文件中设置了enableProxyApplication = true，结果在AndroidManifest.xml中却声明了TinkerApplication的继承类。

所以这里只需要将AndroidManifest.xml中声明我们自定义的Application即可（MyApplication）。

除了联网问题以外，其他的几种情况都需要重新生成基准包。这里再分享一个可以快速确定App是否有上传过版本信息的方法：

# 3、上传成功

先验证下上面的方法，当我把问题解决掉之后，把重新生成的基准包安装到手机上打开（此时Bugly框架会上传App的版本号、tinkerId到服务器），再查看"版本管理"，出现了，版本号为"1.0"（其实就是App的versionName）。

再回头来看看上传补丁，这次又会有什么不同呢？

耶，成功。点击"立即下发"，可以看到现在补丁处于"下发中"状态：

随便来看看用户手中的App是什么反应吧（真正将补丁下发到用户手机上的这段时间可能会有点久，不是立即下发的）：

再回头看看Bugly服务器上的补丁下发情况：

# 十一、其他

# 1、补丁管理

Bugly服务器除了可以上传下发补丁外，还可以对补丁进行管理：

  1. 停止下发：不再把该补丁下发到客户手机上（停止后可重新开启）。
  2. 撤回：将Bugly服务器上的某个补丁删掉，这个操作是不可逆的（不知道用户手机上被成功打上的补丁是否也会被卸载）。
  3. 编辑：可以修改"下发范围"（开发设备、全量设备、备注等等）。
  4. 历史：查看修改记录。

# 2、强调一下一些需要注意的地方

  1. 一个基准包可以有多个补丁包，Bugly会将最新的补丁进行下发（旧补丁默认会变成"停止下发状态"），客户手机上的App的旧补丁会被新补丁覆盖。
  2. 制作基础包时，请使用带"base"的tinkerId，执行的是assembleRelease指令。
  3. 制作基础包后，一定要将baseApk、mapping.txt、R.txt保存好，不能弄丢了。
  4. 制作补丁包时，先将baseApkDir的值修改为基准包所有文件夹的名字，然后启用带"patch"的tinkerId，同时修改"计数"，执行的是buildTinkerPatchRelease指令。
  5. 制作补丁包后，最后打开它检查YAPATCH.MF文件中的from和to信息，检查该补丁包对应的基准包的tinkerId是否正确。
  6. 建议上线的基准包将Bugly的Log输出关闭：Bugly.init(mContext, AppID, false);
  7. 如果是测试补丁包是否用效果，建议设置为开发设备：Bugly.setIsDevelopmentDevice(mContext, true);
  8. so文件需要手动先调用一下 TinkerLoadLibrary.installNavitveLibraryABI(this, CPU_ABI) 方法才能生效。

# 3、Bugly官方文档

# 4、本系列文章链接

# 最后贴下Demo链接

https://github.com/GitLqr/HotFixDemo (opens new window)

+ +
+
#热修复#Bugly#Tinker
热修复 - Tinker的集成与使用
热修复 - Tinker多渠道加固配置

+ ← + 热修复 - Tinker多渠道加固配置→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0422cb/index.html b/pages/0422cb/index.html new file mode 100644 index 000000000..700d14541 --- /dev/null +++ b/pages/0422cb/index.html @@ -0,0 +1,160 @@ + + + + + + Flutter - 获取ListView当前正在显示的Widget信息 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-05-29
目录

Flutter - 获取ListView当前正在显示的Widget信息

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

Flutter 中的 ListView 相信大家都用的很熟了，不过有没有人遇到过一些这样的需求：

  • 详情页滚动到某一指定模块后，停止滚动并根据该指定模块的大小弹出全屏新手引导
  • 详情页在滚动过程中，顶部的模块定位导航栏需要及时更新指示器下标
  • 视频列表在滚动过程中，适当位置的子部件会自动进行播放视频
  • 等等

在日常开发过程中这种类似的功能需求还是蛮多的，因此我封装了一个库：flutter_scrollview_observer (opens new window)

相信可以很好的帮助大家解决这些问题 😃

# 二、应用场景

下面我们来看看常见的应用场景：

# 1、获取最顶部的子部件信息

可以获取当前的第一个子部件和所有正在显示的子部件信息

# 2、视频列表自动播放

当子部件进入列表中间区域时，自动播放视频

# 3、模块定位

当滚动到一些特定模块时，顶部的 TabBar 的指示器切换到对应模块 tab

# 三、使用

# 1、基本使用

创建 ListView，并在其 builder 回调中，将 SliverListView 的 BuildContext 记录起来

BuildContext? _sliverListViewContext;
+...
+ListView _buildListView() {
+  return ListView.separated(
+    itemBuilder: (ctx, index) {
+      // 在 builder 回调中，将 BuildContext 记录起来
+      if (_sliverListViewContext != ctx) {
+        _sliverListViewContext = ctx;
+      }
+      return _buildListItemView(index);
+    },
+    separatorBuilder: (ctx, index) {
+      return _buildSeparatorView();
+    },
+    itemCount: 50,
+  );
+}
+

注：在使用过程中，需要记录 SliverListView 的 BuildContext，ListView 最终也是使用 SliverListView 来进行布局的

构建 ListViewObserver

  • child: 将构建的 ListView 做为 ListViewObserver 的子部件
  • sliverListContexts: 该回调中需要返回被观察的 ListView 的 BuildContext
  • onObserve: 该回调可以监听到当前正在显示的子部件的相关信息
ListViewObserver(
+  child: _buildListView(),
+  sliverListContexts: () {
+    return [if (_sliverListViewContext != null) _sliverListViewContext!];
+  },
+  onObserve: (resultMap) {
+    final model = resultMap[_sliverListViewContext];
+    if (model == null) return;
+
+    // 打印当前正在显示的第一个子部件
+    print('firstChild.index -- ${model.firstChild.index}');
+
+    // 打印当前正在显示的所有子部件下标
+    print('displaying -- ${model.displayingChildIndexList}');
+  },
+)
+

除了上述几个常用参数外，还有：

  • leadingOffset：顶部偏移，当列表的视窗会固定被其它视图挡住时使用
  • dynamicLeadingOffset：动态顶部偏移，当列表的视窗会动态被其它视图挡住时使用

这里看一下图就明白了

// 导航栏半透明
+flutter: firstChild.index -- 0
+flutter: displaying -- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+flutter: firstChild.index -- 0
+flutter: displaying -- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+
+// 导航栏完全不透明
+flutter: firstChild.index -- 2
+flutter: displaying -- [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+

滚动过程会改变顶部的导航栏透明度，在这个前提下：

  1. 当半透明时，我们希望列表的所有可见子部件从最顶部开始算起
  2. 当完成不透明时，我们希望列表的所有可见子部件从导航栏底部开始算起
ListViewObserver(
+  ...
+  dynamicLeadingOffset: () {
+    if (_navBgAlpha < 1) {
+      return 0;
+    }
+    return _safeAreaPaddingTop + _navContentHeight;
+  },
+  ...
+),
+
  • toNextOverPercent：内部逻辑在取到第一个子部件后，如果该子部件被挡住的大小与自身大小的比例超过了该值，则会取下一个子部件为第一个子部件。

# 2、手动触发

默认是 ListView 在滚动的时候才会观察到相关数据。

如果需要在非滚动状态下进行一次观察，可以使用 ListViewOnceObserveNotification 进行手动触发

ListViewOnceObserveNotification().dispatch(_sliverListViewContext);
+

注：如果频繁触发，且观察结果相同，则 onObserve 只会回调一次

# 3、子部件信息

观察到的模型数据：

class ListViewObserveModel {
+  /// 第一个子部件模型数据
+  final ListViewObserveDisplayingChildModel firstChild;
+
+  /// 正在显示的所有子部件模型数据
+  final List<ListViewObserveDisplayingChildModel> displayingChildModelList;
+
+  /// 正在显示的所有子部件下标
+  List<int> get displayingChildIndexList =>
+      displayingChildModelList.map((e) => e.index).toList();
+}
+

子部件模型数据：

class ListViewObserveDisplayingChildModel {
+  /// 子部件下标
+  final int index;
+
+  /// 子部件的 RenderObject
+  final RenderBox renderObject;
+}
+

GitHub: LinXunFeng/flutter_scrollview_observer (opens new window)

+ +
+
#Dart#Flutter
Flutter - 实现列表上下拉切换header
Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥

+ ← + Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/04a87c/index.html b/pages/04a87c/index.html new file mode 100644 index 000000000..b82f18e72 --- /dev/null +++ b/pages/04a87c/index.html @@ -0,0 +1,281 @@ + + + + + + Gradle入门系列(三) - 初识Gradle与Project | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-03
目录

Gradle入门系列(三) - 初识Gradle与Project

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 初识Gradle

# 一、Gradle的基本概念

一个开源的项目自动化构建工具，建立在Apache Ant和Apache Maven概念的基础上，并引入了基于Groovy的特定领域语言（DSL）,而不再使用XML形式管理构建脚本。同时，gradle还是一个编程框架，可以让开发者使用编程的思想来实现应用构建。gradle的组成：

  1. groovy核心语法
  2. build script block
  3. gradle api

# 二、Gradle的执行流程

生命周期 作用
Initialzation初始化阶段 解析整个工程中所有project（读取setting.gradle文件），构建所有的project对应的Project对象
Configuration配置阶段 解析所有的project对象中的task，构建好所有task的拓扑图
Execution执行阶段 执行具体的task及其依赖的task

生命周期监听：

// 配置阶段开始前的监听回调（即：在Initialzation与Configuration之间）
+this.beforeEvaluate {}
+// 配置阶段完成后的监听回调（即：在Configuration与Execution之间）
+this.afterEvaluate {}
+// gradle执行完毕后的回调监听（即：在Execution之后）
+this.gradle.buildFinished {}
+
+// 与 this.beforeEvaluate {} 一样
+this.gradle.beforeProject {}
+// 与 this.afterEvaluate {} 一样
+this.gradle.afterProject {}
+

# Gradle中的Project

# 一、Idea与Gradle 对于project概念的区别

在Idea中，一个项目就是Project，一个Project下可以包含多个模块（Module），一个Module下，又可以有多个Module，其树状结构如下：

虽然可以在Module中继续创建子Module，但一般情况下，我们不会这么做，最多就两层。

+Project
+--+Module
+----+Module
+----+Module
+--+Module
+--+Module
+

而对于Gradle而言，Idea中的无论是Project还是Module，都是project，故树状结构如下：

每个project下，都一定会有一个build.gradle

+project        // rootProject
+--+project      // subProject
+----+project
+----+project
+--+project
+--+project
+

# 二、project相关api

api 作用
getAllprojects() 获取工程中所有的project（包括根project与子project）
getSubProjects() 获取当前project下，所有的子project（在不同的project下调用，结果会不一样，可能返回null）
getParent() 获取当前project的父project（若在rooProject的build.gradle调用，则返回null）
getRootProject() 获取项目的根project（一定不会为null）
project(String path, Closure configureClosure) 根据path找到project，通过闭包进行配置（闭包的参数是path对应的Project对象）
allprojects(Closure configureClosure) 配置当前project和其子project的所有project
subprojects(Closure configureClosure) 配置子project的所有project（不包含当前project）
// rootProject build.gradle下配置：
+// 1、Project project(String path, Closure configureClosure);
+project('app') { Project project ->       // 一个参数时，可以省略不写，这里只是为了明确参数的类型
+  apply plugin : 'com.android.application'
+  group 'com.lqr'
+  version '1.0.0-release'
+  dependencies {}
+  android {}
+}
+
+// 2、allprojects(Closure configureClosure)
+allprojects {
+  group 'com.lqr'
+  version '1.0.0-release'
+}
+
+// 3、subprojects(Closure configureClosure)
+subprojects { Project project -> 
+  if(project.plugins.hasPlugin('com.android.library')){
+    apply from: '../publishToMaven.gradle'
+  }
+}
+

# 三、属性相关api

# 1、在gradle脚本文件中使用ext块扩展属性

父project中通过ext块定义的属性，子project可以直接访问使用

// rootProject : build.gradle
+// 定义扩展属性
+ext {
+  compileSdkVersion = 25
+  libAndroidDesign = 'com.android.support:design:25.0.0'
+}
+
+// app : build.gradle
+android {
+  compileSdkVersion = this.compileSdkVersion // 父project中的属性，子project可以直接访问使用
+  ...
+}
+dependencies {
+  compile this.libAndroidDesign // 也可以使用：this.rootproject.libAndroidDesign
+  ...
+}
+
+

# 2、在gradle.properties文件中扩展属性

hasProperty('xxx')：判断是否有在gradle.properties文件定义xxx属性。 +在gradle.properties中定义的属性，可以直接访问，但得到的类型为Object，一般需要通过toXXX()方法转型。

// gradle.properties
+// 定义扩展属性
+isLoadTest=true
+mCompileSdkVersion=25
+
+// setting.gradle
+// 判断是否需要引入Test这个Module
+if(hasProperty('isLoadTest') ? isLoadTest.toBoolean() : false) {
+  include ':Test'
+}
+
+// app : build.gradle
+android {
+  compileSdkVersion = mCompileSdkVersion.toInteger()
+  ...
+}
+

# 四、文件相关api

api 作用
getRootDir() 获取rootProject目录
getBuildDir() 获取当前project的build目录（每个project都有自己的build目录）
getProjectDir() 获取当前project目录
File file(Object path) 定位一个文件，相对于当前project开始查找
ConfigurableFileCollection files(Object... paths) 定位多个文件，与file类似
copy(Closure closure) 拷贝文件
fileTree(Object baseDir, Closure configureClosure) 定位一个文件树（目录+文件），可对文件树进行遍历
// 打印common.gradle文件内容
+println getContent('common.gradle')
+def getContent(String path){
+  try{
+    def file = file(path)
+    return file.text
+  }catch(GradleException e){
+    println 'file not found..'
+  }
+  return null
+}
+
+// 拷贝文件、文件夹
+copy {
+  from file('build/outputs/apk/')
+  into getRootProject().getBuildDir().path + '/apk/'
+  exclude {} // 排除文件
+  rename {} // 文件重命名
+}
+
+// 对文件树进行遍历并拷贝
+fileTree('build/outputs/apk/') { FileTree fileTree ->
+    fileTree.visit { FileTreeElement element ->
+        println 'the file name is: '+element.file.name
+        copy {
+            from element.file
+            into getRootProject().getBuildDir().path + '/test/'
+        }
+    }
+}
+

# 五、依赖相关api

配置工程仓库及gradle插件依赖

// rootProject : build.gradle
+buildscript { ScriptHandler scriptHandler ->
+    // 配置工程仓库地址
+    scriptHandler.repositories { RepositoryHandler repositoryHandler ->
+        repositoryHandler.jcenter()
+        repositoryHandler.mavenCentral()
+        repositoryHandler.mavenLocal()
+        repositoryHandler.ivy {}
+        repositoryHandler.maven { MavenArtifactRepository mavenArtifactRepository ->
+            mavenArtifactRepository.name 'personal'
+            mavenArtifactRepository.url 'http://localhost:8081/nexus/repositories/'
+            mavenArtifactRepository.credentials {
+                username = 'admin'
+                password = 'admin123'
+            }
+        }
+    }
+    // 配置工程的"插件"（编写gradle脚本使用的第三方库）依赖地址
+    scriptHandler.dependencies {
+        classpath 'com.android.tools.build:gradle:2.2.2'
+        classpath 'com.tencent.tinker-patch-gradle-plugin:1.7.7'
+    }
+}
+
+// ============ 上述脚本简化后 ============
+
+buildscript {
+    // 配置工程仓库地址
+    repositories {
+        jcenter()
+        mavenCentral()
+        mavenLocal()
+        ivy {}
+        maven {
+            name 'personal'
+            url 'http://localhost:8081/nexus/repositories/'
+            credentials {
+                username = 'admin'
+                password = 'admin123'
+            }
+        }
+    }
+    // 配置工程的"插件"（编写gradle脚本使用的第三方库）依赖地址
+    dependencies {
+        classpath 'com.android.tools.build:gradle:2.2.2'
+        classpath 'com.tencent.tinker-patch-gradle-plugin:1.7.7'
+    }
+}
+

配置应用程序第三方库依赖

compile: 编译依赖包并将依赖包中的类打包进apk。 +provided: 只提供编译支持，但打包时依赖包中的类不会写入apk。

// app : build.gradle
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar']) // 依赖文件树
+    // compile file() // 依赖单个文件
+    // compile files() // 依赖多个文件
+    compile 'com.android.support:appcompat-v7:26.1.0' // 依赖仓库中的第三方库（即：远程库）
+    compile project('mySDK') { // 依赖工程下其他Module（即：源码库工程）
+      exclude module: 'support-v4' // 排除依赖：排除指定module
+      exclude group: 'com.android.support' // 排除依赖：排除指定group下所有的module
+      transitive false // 禁止传递依赖，默认值为false
+    }
+  
+    // 栈内编译
+    provided('com.tencent.tinker:tinker-android-anno:1.9.1')
+}
+

provided的使用场景：

  1. 依赖包只在编译期起作用。（如：tinker的tinker-android-anno只用于在编译期生成Application，并不需要把该库中类打包进apk，这样可以减小apk包体积）
  2. 被依赖的工程中已经有了相同版本的第三方库，为了避免重复引用，可以使用provided。

# 六、外部命令api

// copyApk任务：用于将app工程生成出来apk目录及文件拷贝到本机下载目录
+task('copyApk') {
+    doLast {
+        // gradle的执行阶段去执行
+        def sourcePath = this.buildDir.path + '/outputs/apk'
+        def destinationPath = '/Users/lqr/Downloads'
+        def command = "mv -f ${sourcePath} ${destinationPath}"
+        // exec块代码基本是固定的
+        exec {
+            try {
+                executable 'bash'
+                args '-c', command
+                println 'the command is executed success.'
+            }catch (GradleException e){
+                println 'the command is executed failed.'
+            }
+        }
+    }
+}
+
+ +
+
#脚本#Gradle
Gradle入门系列(二) - groovy高级语法
Gradle入门系列(四) - 初识Gradle Task

+ ← + Gradle入门系列(四) - 初识Gradle Task→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/05278d/index.html b/pages/05278d/index.html new file mode 100644 index 000000000..2758133bc --- /dev/null +++ b/pages/05278d/index.html @@ -0,0 +1,163 @@ + + + + + + Docker - Dockerfile的使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-31
目录

Docker - Dockerfile的使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

Dockerfile: 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。

应用: 将部署过程中涉及到的所有步骤全部写入到 Dockerfile 中，到时只需要执行 Dockerfile 就可以自动完成相应的操作

# 快速入门

# 编辑Dockerfile

在当前目录下创建 Dockerfile 并进行编辑

vim Dockerfile
+

操作：启动 ubuntu 镜像，在启动起来后去更新 ubuntu 容器下的软件资源 +内容如下

# From: 启动运行一个镜像资源
+From ubuntu
+# Run: 在启动起来的容器中执行指令
+RUN apt-get update
+

# 运行Dockerfile

构建镜像命令

docker build -t [镜像名]:[版本号] [Dockerfile所在目录]
+

指定在当前目录下去查找 Dockerfile 文件，并将 Dockerfile 自动化处理后的（更新了软件资源）容器打成名为 lxf 的镜像资源

docker build -t lxf .
+

执行效果： + +待执行完成后，当前拥有的镜像资源就多出了 lxf 这一个，可以看到 lxf 这个镜像的大小是要比 ubuntu 的镜像要大一点的 +

# 基础指令详解

# FROM

格式：

FROM <image>
+FROM <image>:<tag>
+

说明：

  • FROM 是 Dockerfile 里的第一条而且只能是除了首行注释之外的第一条指令

# RUN

格式：

# shell模式
+RUN <command>
+
+# exec模式
+RUN ["executable", "param1", "param2"]
+

说明：

  • 表示当前镜像构建时候运行的命令

注释：

# shell 模式：类似于 /bin/bash -c command 
+RUN echo hello 
+
+# exec 模式：类似于 RUN ["/bin/bash", "-c", "command"] 
+RUN ["echo", "hello"]
+

执行多条指令

  • 一条条指令写
RUN echo hello
+RUN echo world
+
  • 将指令用 && 连接起来
RUN echo hello && echo world
+

# MAINTAINER

格式：

MAINTAINER <name>
+

说明：

  • 指定该 Dockerfile 文件的维护者信息

# EXPOSE

设置容器对外开放的端口

格式：

EXPOSE <port> [<port>...]
+

解释：

  • 设置 Docker 容器对外暴露的端口号， Docker 为了安全，不会自动对外打开端口，如果需要外部提供访问，还需要启动容器时增加 -p 或者 -P 参数对容器的端口进行分配。

# ENTRYPOINT

设置容器在启动后去执行一个命令

格式：

# exec 模式
+ENTRYPOINT ["executable", "param1","param2"]
+
+# shell模式
+ENTRYPOINT command param1 param2
+

解释：

  • 每个 Dockerfile 中只能有一个 ENTRYPOINT ，当指定多个时，只有最后一个起效。

EXPOSE 和 ENTRYPOINT 结合使用的例子，可以全文看完后再回到这里看该例子

# 使用django镜像资源
+From django
+# 切换目录
+WORKDIR /home
+# 创建一个名为lxf的django项目
+RUN django-admin startproject lxf
+# 切换目录
+WORKDIR /home/lxf
+# 对外开放8000端口
+EXPOSE 8000
+# 容器启动后，将django服务开启，并指定端口号为8000
+ENTRYPOINT python3 manage.py runserver 0.0.0.0:8000
+

执行构建镜像命令

docker build -t lxf .
+

+现在我们将构建好的 lxf 容器运行起来，并随机分配端口

docker run -dit -P lxf
+

+可以看到， Docker 为我们随机分配了 55001 端口映射到容器的 8000 端口，并且可以正常访问到容器的 django 服务 +

# 文件指令详解

# ADD

格式：

ADD <src>... <dest>
+ADD ["<src>",... "<dest>"]
+

说明：

  • 将指定的 <src> 文件复制到容器文件系统中的 <dest>
  • src 指的是宿主机，dest  指的是容器
  • 如果源文件是个压缩文件，则 Docker 会自动帮解压到指定的容器中(无论目标是文件还是目录，都会当成目录处理)。

如：将宿主机下的 ./data 目录下的所有文件(夹)，全部复制到容器的 /home 目录下

From ubuntu
+ADD ./data /home
+

注：目录本身即 data 目录并不会复制到容器中，只复制 data 目录下的文件(夹)，如果想连同 data 文件夹也复制过去，可以修改为如下指令

From ubuntu
+ADD ./data /home/data
+

# COPY

格式：

COPY <src>... <dest>
+COPY ["<src>",... "<dest>"]
+

解释：

  • 单纯复制文件场景， Docker 推荐使用 COPY
  • 如果源文件是个压缩文件， Docker 会直接将压缩文件复制进容器内，不会像 ADD 那样先解压再复制

注： COPY 与 ADD 基本上是一样的，只是面对源文件是压缩文件时处理方式不同而已， ADD 会先解压再将解压后的内容复制到容器， COPY 不会进行解压，而是直接将压缩包复制过去

# 环境指令详解

# ENV

设置环境变量

格式：

ENV <key> <value>
+ENV <key>=<value> ...
+

解释：

  • 设置环境变量，可以在 RUN 之前使用，然后 RUN 命令时调用，容器启动时这些环境变量都会被指定

如：设置了环境变量 name ，并赋值为 lxf ，使用 RUN 命令打印 name 变量的值，可以成功打印出来

ENV name=lxf
+RUN echo $name # 会打印出lxf
+

并且，当进入容器后也可以正常打印出该变量的值

root@5721971f92e4:/# echo $name
+lxf
+

# WORKDIR

切换目录

格式：

WORKDIR /path/to/workdir
+

解释：

  • 切换目录，为后续的 RUN 、 CMD 、 ENTRYPOINT 指令配置工作目录。
  • 相当于 cd 命令，可以使用多个 WORKDIR 指令进行多次切换，后续命令如果参数是相对路径，则会基于之前命令指定的路径
  • 如果我们指定切换到一个不存在的目录， Docker 会帮我们自动创建相应的目录

举例：

WORKDIR /a
+WORKDIR b
+WORKDIR c
+RUN pwd
+

最终路径为 /a/b/c

如果我们想要容器被运行起来时，自动进入到 /home ，可以按如下指令设置

 From ubuntu
+ WORKDIR /home
+

执行 Dockerfile 构建镜像完成后运行起来，此时容器便会自动进入到 /home 目录 + +对比一下之前没有设置使用过 WORKDIR ，运行起来的容器，会默认进入到根目录 +

+ +
+
#Docker
Docker - 网络管理
Docker - Compose的使用

+ ← + Docker - Compose的使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0790a0/index.html b/pages/0790a0/index.html new file mode 100644 index 000000000..1df42aaf0 --- /dev/null +++ b/pages/0790a0/index.html @@ -0,0 +1,170 @@ + + + + + + Kotlin - 尾递归优化 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-02-03
目录

Kotlin - 尾递归优化

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 尾递归

尾递归就是函数在调用完自己之后没有其他操作的递归，是递归的一种特殊形式。举个例子，"计算斐波那契数列第 n 项"的递归算法有哪些？

# 简单递归实现

斐波那契数列第 0、1 位都是 1，从第二位开始，每项是前两位之和，因此用递归算法很容易就能实现出来了：

fun fib1(n: Int): Int {
+    if (n == 0 || n == 1) return 1
+    return fib1(n - 1) + fib1(n - 2);
+}
+

这种写法虽然递归调用是在方法的最后一行，但其实这里还有结果相加的操作，并不符合尾递归的定义。

简单递归虽然容易理解，但实际上，该算法会有冗余计算，比如：fib1(2)会被执行多次，如果 n 越大，这种冗余计算就会越多：

# 尾递归实现

为了解决上述简单递归实现的弊端，我们可以把已经计算过的结果保存起来，传递给下次计算，所以可以将递归写法进行优化：

fun fib2(n: Int): Int {
+    return fibIter(1, 1, n);
+}
+
+fun fibIter(a: Int, b: Int, n: Int): Int {
+    // return if (n == 0) a else fibIter(b, a + b, n - 1) // 简便写法
+    if (n == 0) {
+        return a
+    } else {
+        return fibIter(b, a + b, n - 1)
+    }
+}
+

其中，fibIter() 的递归代码在方法的最后一行，调用完也没有其他的操作，符合尾递归的定义。

# 性能对比

理论归理论，我们还是得用实际代码来测试一下两种递归算法的运行耗时情况，这种才更能直观看出差别，为了方便测试，这里写了一个耗时测试方法：

fun timeConsume(operation: () -> Unit) {
+    val begin = System.currentTimeMillis()
+    operation()
+    val end = System.currentTimeMillis()
+    println("begin = ${begin}ms , end = ${end}ms , 耗时 ${end - begin}ms")
+}
+

分别将两种递归算法丢到耗时测试方法 timeConsume() 中，得到测试结果：

fun main(args: Array<String>) {
+    timeConsume {
+        println(fib1(45))
+    }
+    // 1836311903
+    // begin = 1612368480299ms , end = 1612368486217ms , 耗时 5918ms
+
+    timeConsume {
+        println(fib2(45))
+    }
+    // 1836311903
+    // begin = 1612368486217ms , end = 1612368486217ms , 耗时 0ms
+}
+

为了拿到斐波那契数列第 45 个元素值，fib1() 耗时近 6s，而 fib2() 耗时 0ms，这是何等的差距。

注意：测试 fib1(50) 会内存溢出。

# 尾递归优化(tailrec)

虽然上述尾递归算法的耗时很小，但我们知道，递归算法效率其实并不高，因为每递归一次就要开辟一个方法栈，这是有性能消耗的，还有可能因为递归次数过多导致出现内存溢出的情况，而迭代算法就没有这种问题：

fun fib3(n: Int): Int {
+    if (n == 0 || n == 1) return 1
+    var a = 1
+    var b = 1
+    for (i in 0 until n) {
+        val a_ = b
+        val b_ = a + b
+        a = a_
+        b = b_
+    }
+    return a
+}
+

同样的，我们来对尾递归算法和迭代算法进行耗时测试：

fun main(args: Array<String>) {
+    timeConsume {
+        println(fib2(12000))
+    }
+    // 690383169
+    // begin = 1612369032575ms , end = 1612369032578ms , 耗时 3ms
+
+    timeConsume {
+        println(fib3(12000))
+    }
+    // 690383169
+    // begin = 1612369032578ms , end = 1612369032579ms , 耗时 1ms
+}
+

理论与实际相结合，通过测试结果可以得知，尾递归算法和迭代算法的差距还是有的，如果电脑 CPU 性能较低，或者方法中存在内存操作，这个差距会更大。

注意：因为"计算斐波那契数列第 n 项"这个算法题目仅仅只是数值运行，对于这 2 个算法来说太 easy 了，都是毫秒级别的，所以，需要取较后的元素这样计算量会多一点才能看出差距，同时因为递归过多会出现内存溢出，因此 n 的取值也不能太大，测试 15000 会内存溢出，12000 则不会。

既然递归有这种缺点，那么我们以后就杜绝使用递归算法吧？当然不行，递归也有一个很大的优点，那就是代码逻辑理解容易，既然这样，那有没有办法让递归算法的性能跟迭代算法一样呢？还真有，Kotlin 提供了 tailrec 关键字，可以让 尾递归算法 在编译期自动进行代码优化，从而解决尾递归算法的缺点。我们将 fibIter() 加上 tailrec 关键字：

fun fib2(n: Int): Int {
+    return fibIter(1, 1, n);
+}
+
+// 只加了 tailrec 关键字
+tailrec fun fibIter(a: Int, b: Int, n: Int): Int {
+    return if (n == 0) a else fibIter(b, a + b, n - 1)
+}
+

再来测试 fib2() 与 fib3() 两个算法的耗时情况：

fun main(args: Array<String>) {
+    timeConsume {
+        println(fib2(50000))
+    }
+    // -1256600222
+    // begin = 1612370134450ms , end = 1612370134451ms , 耗时 1ms
+
+    timeConsume {
+        println(fib3(50000))
+    }
+    // -1256600222
+    // begin = 1612370134452ms , end = 1612370134453ms , 耗时 1ms
+}
+

这原本传入 15000 就会出现内存溢出的尾递归算法 fib2()，现在居然能传入 50000 了，耗时也与迭代算法 fib3() 一样，这就是 tailrec 关键字的厉害之处。

注意：tailrec 关键字只能优化尾递归算法，其它递归算法无法优化。

+ +
+
#tailrec
Kotlin - 作用域函数
Kotlin - 函数式编程

+ ← + Kotlin - 函数式编程→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/07f268/index.html b/pages/07f268/index.html new file mode 100644 index 000000000..2f5d0825b --- /dev/null +++ b/pages/07f268/index.html @@ -0,0 +1,289 @@ + + + + + + Android - 云游戏本地悬浮输入框实现 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2024-07-07
目录

Android - 云游戏本地悬浮输入框实现

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

云游戏输入法分两种情况，以云化原神为例，分为 云端输入法 和 本地输入法，运行效果如下：

云端输入法 本地输入法

云端输入法 就是运行在云端设备上的输入法，对于不同客户端来说（Android、iPhone），运行效果一致。 +本地输入法 则是运行在用户侧设备上的输入法，对于不同客户端来说（Android、iPhone），运行效果不一致。

从开发角度来说，云端输入法 是最省心的，无须关心输入法事件，只管同步触屏事件即可。但是，从功能性角度来说，本地输入法 可以有更好的体验，能为非触屏设备提供云游戏文字交互能力，例如 TV 端（遥控器操控）。

本地输入法 需要前后端配合开发，后端需提供输入法唤起事件回调，读取和注入文字的能力，这个以后有机会再做详细介绍。本篇主要讲述 前端（Android 客户端）实现，其实仔细分析一下就能看出，这个 本地输入法 功能，无非是在输入法之上显示了一个 悬浮输入框，并且与输入法同步显隐，所以，本篇的核心内容，就是如何来实现这么一个 悬浮输入框。

# 二、方案

在说明具体方案之前，需要先了解下 Android 窗口对于输入法的主要 adjust 策略：

分类 说明
adjustResize 始终调整 activity 主窗口的尺寸，以为屏幕上的软键盘腾出空间。
adjustPan 不通过调整 activity 主窗口的尺寸为软键盘腾出空间。相反，窗口的内容会自动平移，使键盘永远无法遮盖当前焦点，以便用户始终能看到自己输入的内容。这通常不如调整窗口尺寸可取，因为用户可能需关闭软键盘才能进入被遮盖的窗口部分，并与之进行交互。

悬浮输入框 并不是一个新课题，网上有其他 Android 开发者分享过自己实现 悬浮输入框 的方案，他们的做法，大致能分为以下几种：

方案 原理
基于 View 实现 通过监听输入法高度，调整页面底部 View 的 y 值偏移量
基于 Activity 实现
基于 Dialog 实现		 利用 adjustResize 特性，将处于窗口底部的输入框，自动被输入法顶上去

那么这几种方案会有什么问题呢？

方案 问题
基于 View 实现 Android SDK 没有提供监听与获取输入法高度的 API，早期主流做法是使用 ViewTreeObserver 的 OnGlobalLayoutListener，监听布局高度变化，进而计算出输入法高度，但是设备兼容性可能存在问题，在不同设备上拿到的输入法高度不一定准确，适配成本较高。
基于 Activity 实现 需要编写一个新的透明 Activity，在清单文件中注册 Activity 和指定 windowSoftInputMode 为 adjustResize，这个方案利用了 adjustResize 特性，非常讨巧，无须计算输入法高度，适配成本较低，但是，实现上比较复杂笨重，特别是输入框监听事件需要在两个 Activity 之间传递时，无法很优雅的实现。

而 基于 Dialog 实现 方案，可以很好的规避掉上述方案存在的问题。因为 Dialog 和 Activity 一样，拥有自己的 Window，而 windowSoftInputMode 实际上是作用于 Window 的，即 Dialog 可以设置自己的 windowSoftInputMode：

window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
+

另外，Dialog 可以很轻易地把输入框事件回调给外部（Activity、Fragment 等）。

注：Dialog 无须在清单文件中注册，在动态更新上也有一定的优势。

# 三、实现

经过上面的分析，我最终采用的是 基于 Dialog 实现 方案，来实现 悬浮输入框。要注意的地方大致有这几点：

  • Dialog 样式与布局
  • 监听输入法显隐
  • 兼容横竖屏切换

# 1、Dialog 样式与布局

系统默认的 Dialog 是有样式的，需要对其进行定制，修改为透明的 Dialog，另外还要修改窗口的 windowSoftInputMode，具体代码如下：

/**
+ * 基于 Dialog 实现的悬浮输入框
+ *
+ * @author LQR
+ * @since 2024/7/6
+ */
+public class FloatInputDialog extends AbsFloatInputDialog {
+
+    protected View rootView;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        rootView = initView();
+        initWindow();
+    }
+
+    protected View initView() {
+        // 自定义布局
+        View rootView = View.inflate(getContext(), getLayoutId(), null);
+        setContentView(rootView);
+        // 因为 window 高度设为 MATCH_PARENT，所以，需要对根布局监听点击事件，用于隐藏弹窗
+        rootView.setOnClickListener(v -> {
+            EditText inputView = getInputView();
+            if (inputView != null) {
+                SoftInputUtil.getInstance().hide(inputView);
+            }
+        });
+        return rootView;
+    }
+
+    protected void initWindow() {
+        Window window = getWindow();
+        // 输入法显示模式
+        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
+        // 背景透明
+        window.setBackgroundDrawableResource(android.R.color.transparent);
+        // 去除黑色半透明遮罩
+        window.setDimAmount(0);
+        // 清除 Dialog 底部背景模糊和黑暗度
+        window.clearFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND | WindowManager.LayoutParams.FLAG_DIM_BEHIND);
+        // 全屏
+        // 注意：窗口高度必须是 MATCH_PARENT，否则 ViewTreeObserver 的 OnGlobalLayoutListener 在输入法隐藏时（个别设备上认为窗口尺寸没变），可能不会回调
+        window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
+        // 屏幕底部显示
+        window.setGravity(Gravity.BOTTOM);
+    }
+}
+

代码中的注释很详细，相信不难理解，不过，有一点得注意的，initWindow() 需要在 initView() 之后执行，否则窗口的不会撑满整个屏幕。

# 2、监听输入法显隐

尽管该方案不需要精确获取输入法高度，但是，有必要监听输入法显隐，以达到输入框同步输入法显隐的目的。为了兼容较旧的 Android 系统（万恶的 4.x），我这里采用 ViewTreeObserver 的 OnGlobalLayoutListener 来实现监听功能，具体代码如下：

/**
+ * 输入法观察者
+ *
+ * @author LQR
+ * @since 2024/7/7
+ */
+public class SoftInputObserver extends Handler implements ViewTreeObserver.OnGlobalLayoutListener {
+
+    private int lastWindowHeight = 0;
+    private boolean isSoftInputShow = false;
+
+    public void onStart(View rootView) {
+        ...
+        rootView.getViewTreeObserver().addOnGlobalLayoutListener(this);
+    }
+
+    public void onStop() {
+        ...
+        rootView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
+    }
+
+    @Override
+    public void onGlobalLayout() {
+        if (rootView == null) return;
+        // 输入法有 显示/隐藏 动画，都会导致窗口高度发生变化
+        Rect rect = getWindowDisplayRect(rootView);
+        int windowCurrentHeight = rect.height();
+        int windowOriHeight = getWindowOriHeight();
+
+        // 屏幕旋转 & 输入法动画 结束
+        if (lastWindowHeight == windowCurrentHeight) {
+            onGlobalLayoutComplete();
+            return;
+        }
+        lastWindowHeight = windowCurrentHeight;
+    }
+
+    private void onGlobalLayoutComplete() {
+        if (rootView == null) return;
+        Rect rect = getWindowDisplayRect(rootView);
+        int windowCurrentHeight = rect.height();
+        int windowOriHeight = getWindowOriHeight();
+
+        if (windowCurrentHeight < windowOriHeight) {
+            // 窗口高度变小，说明输入法显示
+            if (!isSoftInputShow) {
+                onSoftInputShow();
+            }
+        } else if (windowCurrentHeight == windowOriHeight) {
+            // 窗口高度 变回 原大小，不一定是 输入法隐藏，有以下几种情况：
+            // 1、输入法还没有出现（隐 -> 显）
+            // 2、输入法完全收起来（显 -> 隐）
+            // 3、输入法显示动画过程中，点击空白处，触发隐藏输入法
+            if (isSoftInputShow) {
+                onSoftInputHide();
+            }
+        }
+    }
+}
+

因为 Dialog 中的 rootView 是撑满整个窗口的（MATCH_PARENT），而且 Dialog 的 windowSoftInputMode 为 adjustResize，一旦输入法显隐，那么窗口的尺寸就会变化，rootView 的尺寸同步变化，从而触发 onGlobalLayout() 的执行。一旦窗口高度不再变化，说明输入法显隐动画已经执行完毕，再根据窗口高度判定输入法显隐即可。

# 3、兼容横竖屏切换

在输入法显示的状态下，旋转屏幕，这时需要保证输入法继续显示，同样的，如果是在输入法隐藏状态下，那么旋转屏幕时，得保证输入法继续隐藏。因为上述输入法显隐是根据窗口高度变化来判断的，当旋转屏幕时，所依据的窗口高度就需要改变一下，具体代码如下：

/**
+ * 输入法观察者
+ *
+ * @author LQR
+ * @since 2024/7/7
+ */
+public class SoftInputObserver extends Handler implements ViewTreeObserver.OnGlobalLayoutListener {
+
+    private int preOrientation = 0;
+    private int orientation = 0;
+    private int verticalOriHeight = 0;
+    private int horizontalOriHeight = 0;
+
+    /**
+     * 尽可能晚，但必须在输入法显示之前调用，才能获取到窗口的原始尺寸
+     */
+    public void onShow() {
+        // 获取当前窗口原始尺寸
+        getWindowOrientationAndSize();
+    }
+
+    private void getWindowOrientationAndSize() {
+        if (rootView == null) return;
+        orientation = getWindowOrientation(rootView);
+        preOrientation = orientation;
+        log("getScreenOriAndSize, orientation = " + orientation);
+        // 获取窗口原始尺寸
+        Rect rect = getWindowDisplayRect(rootView);
+        switch (orientation) {
+            case Configuration.ORIENTATION_PORTRAIT: // 1
+                verticalOriHeight = rect.height();
+                horizontalOriHeight = rect.width();
+                log("current portrait, verticalOriHeight = " + verticalOriHeight + ", horizontalOriHeight = " + horizontalOriHeight);
+                break;
+            case Configuration.ORIENTATION_LANDSCAPE: // 2
+                horizontalOriHeight = rect.height();
+                verticalOriHeight = rect.width();
+                log("current landscape, verticalOriHeight = " + verticalOriHeight + ", horizontalOriHeight = " + horizontalOriHeight);
+                break;
+        }
+    }
+
+    private Rect getWindowDisplayRect(View rootView) {
+        Rect rect = new Rect();
+        rootView.getWindowVisibleDisplayFrame(rect);
+        return rect;
+    }
+
+    /**
+     * 获取当前窗口当前方向上原始高度
+     */
+    private int getWindowOriHeight() {
+        return orientation == Configuration.ORIENTATION_PORTRAIT ? verticalOriHeight : horizontalOriHeight;
+    }
+
+    private int getWindowOrientation(View rootView) {
+        return rootView.getResources().getConfiguration().orientation;
+    }
+}
+

然后，在清单文件中，把 悬浮输入框 所在 Activity 的 configChanges 做如下修改，使其在屏幕旋转时不会被销毁重建：

<activity
+    android:name=".MainActivity"
+    android:configChanges="screenSize|orientation">
+    ...
+</activity>
+

经过上面的处理，现在就可以兼容横竖屏切换场景了。但是，有个不起眼的小问题，Android 横屏状态下，EditText 获取焦点时，默认会进入全屏输入模式，像这样：

很显然，这不是 悬浮输入框，而且这种全屏输入模式，不会让我们的 Dialog 窗口高度发生变化，所以输入法显隐监听也就失效了。那么，现在就需要关掉 EditText 的全屏输入模式，具体代码如下：

/**
+ * 基于 Dialog 实现的悬浮输入框
+ *
+ * @author LQR
+ * @since 2024/7/6
+ */
+public class FloatInputDialog extends AbsFloatInputDialog {
+
+    protected View rootView;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        rootView = initView();
+        setupInputView();
+        initWindow();
+    }
+
+    protected void setupInputView() {
+        // 强制 输入框 横屏时 不要全屏
+        EditText inputView = getInputView();
+        if (inputView != null) {
+            // IME_FLAG_NO_EXTRACT_UI：使软键盘不全屏显示，只占用一部分屏幕
+            inputView.setImeOptions(inputView.getImeOptions() | EditorInfo.IME_FLAG_NO_EXTRACT_UI);
+        }
+    }
+}
+

至此，支持横竖屏切换的 悬浮输入框 就实现了。因为代码占用篇幅较多，文章中只摘抄了核心代码进行讲解，完整代码请稳步到 GitHub 仓库查看：

注：目前该项目已作为 library 上传到 jitpack 仓库，可快速集成，支持自定义输入框样式。

好了，如果你觉得文章对你有帮助的话，请不吝点个免费的赞~

+ +
+
#云游戏#串流#输入法#输入框#悬浮#softinput#keyboard#键盘
Android - setVisibility() 失效，竟然是因为内存泄露
DroidPlugin手札 - home键强杀处理

+ ← + DroidPlugin手札 - home键强杀处理→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/084bc4/index.html b/pages/084bc4/index.html new file mode 100644 index 000000000..e3ca2445f --- /dev/null +++ b/pages/084bc4/index.html @@ -0,0 +1,252 @@ + + + + + + Swift - 掌控Moya的网络请求、数据解析与缓存 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-10-27
目录

Swift - 掌控Moya的网络请求、数据解析与缓存

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
  • Moya 在Swift开发中起着重要的网络交互作用，但是还有不如之处，比如网络不可用时，返回的 Response 为 nil，这时还得去解析相应的 Error
  • Codable 可以帮助我们快速的解析数据，但是一旦声明的属性类型与json中的不一致，将无法正常解析; 而且对于模型中自定义属性名的处理也十分繁琐

解决的方案有很多，不过我比较习惯使用 MoyaMapper ，不仅可以解决上述问题，还提供了多种模型转换、数据互转、多种数据类型任意存储的便捷方法。掌控Moya的网络请求、数据解析与缓存简直易如反掌。

MoyaMapper是基于Moya和SwiftyJSON封装的工具，以Moya的plugin的方式来实现间接解析，支持RxSwift

GitHub: MoyaMapper (opens new window)

📖 详细的使用请查看手册 https://MoyaMapper.github.io (opens new window)

# 特点

  • 支持json 转 Model 自动映射 与 自定义映射
  • 无视 json 中值的类型，Model 中属性声明的是什么类型，它就是什么类型
  • 支持 Data 字典 JSON json字符串 Model 互转
  • 插件方式，全方位保障Moya.Response，拒绝各种网络问题导致 Response 为 nil，将各式各样的原因导致的数据加载失败进行统一处理，开发者只需要关注 Response
  • 可选 - 支持数据随意缓存( JSON 、 Number 、String、 Bool、 Moya.Response )
  • 可选 - 支持网络请求缓存

# 数据解析

# 一、插件注入

附：插件 MoyaMapperPlugin 的详细使用 (opens new window)

1、定义适用于项目接口的 ModelableParameterType

// statusCodeKey、tipStrKey、 modelKey 可以任意指定级别的路径，如： "error>used"
+struct NetParameter : ModelableParameterType {
+    var successValue = "000"
+    var statusCodeKey = "retStatus"
+    var tipStrKey = "retMsg"
+    var modelKey = "retBody"
+}
+

2、在 MoyaProvider 中使用 MoyaMapperPlugin 插件，并指定 ModelableParameterType

let lxfNetTool = MoyaProvider<LXFNetworkTool>(plugins: [MoyaMapperPlugin(NetParameter())])
+

❗ 使用 MoyaMapperPlugin 插件是整个 MoyaMapper 的核心所在！

# 二、Model声明

Model 需遵守 Modelable 协议

  • MoyaMapper 支持模型自动映射 和 自定义映射
  • 不需要考虑源json数据的真实类型，这里统一按 Model 中属性声明的类型进行转换

1、一般情况下如下写法即可

struct CompanyModel: Modelable {
+    
+    var name : String = ""
+    var catchPhrase : String = ""
+    
+    init() { }
+}
+

2、如果自定义映射，则可以实现方法 mutating func mapping(_ json: JSON)

struct CompanyModel: Modelable {
+    
+    var name : String = ""
+    var catchPhrase : String = ""
+    
+    init() { }
+    mutating func mapping(_ json: JSON) {
+        self.name = json["nickname"].stringValue
+    }
+}
+

3、支持模型嵌套

struct UserModel: Modelable {
+    
+    var id : String = ""
+    var name : String = ""
+    var company : CompanyModel = CompanyModel()
+    
+    init() { }
+}
+
# 三、Response 解析

1、以下示例皆使用了 MoyaMapperPlugin ，所以不需要指定 解析路径

2、如果没有使用 MoyaMapperPlugin 则需要指定 解析路径，否则无法正常解析

ps: 解析路径 可以使用 a>b 这种形式来解决多级路径的问题

解析方法如下列表所示

方法 描述 (支持RxSwift)
toJSON Response 转 JSON ( toJSON (opens new window) rx.toJSON (opens new window))
fetchString 获取指定路径的字符串( fetchString (opens new window) rx.fetchString (opens new window))
fetchJSONString 获取指定路径的原始json字符串 ( fetchJSONString (opens new window) rx.fetchJSONString (opens new window) )
mapResult Response -> MoyaMapperResult (Bool, String) ( mapResult (opens new window) rx.mapResult (opens new window) )
mapObject Response -> Model ( mapObject (opens new window) rx.mapObject (opens new window))
mapObjResult Response -> (MoyaMapperResult, Model) ( mapObjResult (opens new window) rx.mapObjResult (opens new window))
mapArray Response -> [Model] ( mapArray (opens new window) rx.mapArray (opens new window))
mapArrayResult Response -> (MoyaMapperResult, [Model]) ( mapArrayResult (opens new window) rx.mapArrayResult (opens new window))

❗除了 fetchJSONString 的默认解析路径是根路径之外，其它方法的默认解析路径为插件对象中的 modelKey

如果接口请求后 json 的数据结构与下图类似，则使用 MoyaMapper 是最合适不过了

// Normal
+let model = response.mapObject(MMModel.self)
+print("name -- \(model.name)")
+print("github -- \(model.github)")
+
+// 打印json
+print(response.fetchJSONString())
+
+// Rx
+rxRequest.mapObject(MMModel.self)
+    .subscribe(onSuccess: { (model) in
+        print("name -- \(model.name)")
+        print("github -- \(model.github)")
+    }).disposed(by: disposeBag)
+

附： fetchJSONString的详细使用 (opens new window)

// Normal
+let models = response.mapArray(MMModel.self)
+let name = models[0].name
+print("count -- \(models.count)")
+print("name -- \(name)")
+
+// 打印 json 模型数组中第一个的name
+print(response.fetchString(keys: [0, "name"]))
+
+// Rx
+rxRequest.mapArray(MMModel.self)
+    .subscribe(onSuccess: { models in
+        let name = models[0].name
+        print("count -- \(models.count)")
+        print("name -- \(name)")
+    }).disposed(by: disposeBag)
+

附：mapArray的详细使用说明 (opens new window)

// Normal
+let (isSuccess, tipStr) = response.mapResult()
+print("isSuccess -- \(isSuccess)")
+print("tipStr -- \(tipStr)")
+
+// Rx
+rxRequest.mapResult()
+    .subscribe(onSuccess: { (isSuccess, tipStr) in
+        print("isSuccess -- \(isSuccess)") // 是否为 "000"
+        print("retMsg -- \(retMsg)") // "缺少必要参数"
+    }).disposed(by: disposeBag)
+

附：mapResult的详细使用说明 (opens new window)

# 统一处理网络请求结果

在APP的实际使用过程中，会遇到各种各样的网络请求结果，如:服务器挂了、手机无网络，此时 Moya 返回的 Response 为 nil，这样我们就不得不去判断 Error。但是使用 MoyaMapperPlugin 就可以让我们只关注 Response

// MoyaMapperPlugin 的初始化方法
+public init<T: ModelableParameterType>(
+    _ type: T,
+    transformError: Bool = true
+)
+
+type : ModelableParameterType  用于定义字段路径，做为全局解析数据的依据
+transformError : Bool  是否当网络请求失败时，自动转换请求结果，默认为 true
+
  • 当请求失败的时候，此时的 result.response 为 nil，根据transformError是否为true 判断是否创建一个自定义的 response 并返回出去。

➡ 本来可以请求到的数据内容

➡ 现在关闭网络，再请求数据

  • 正常情况下，即不做任何不处理的时候， Response 为 nil

  • 经过 MoyaMapperPlugin 处理的后可得到转换后的 Response ，如图

这里将请求失败进行了统一处理，无论是服务器还是自身网络的问题，retStatus 都为 MMStatusCode.loadFail，但是 errorDescription 会保持原来的样子并赋值给 retMsg。

  • retStatus 值会从枚举 MMStatusCode 中取 loadFail.rawValue ，即 700
  • 取 类型为 ModelableParameterType 的 type 中 statusCodeKey 所指定的值 为键名，retMsg也同理

ps: 这个时候可以通过判断 retStatus 或 response.statusCode 是否与 MMStatusCode.loadFail.rawValue 相同来判断是否显示加载失败的空白页占位图

enum MMStatusCode: Int {
+    case cache = 230
+    case loadFail = 700
+}
+

枚举 MMStatusCode 中除了 loadFail ，还有 cache，我们已经知道 loadFail 在数据加载失败的时候会出现，那 cache 是在什么时候出来呢？不急，看下一节就知道了。

# 数据缓存

# 一、基本使用
// 缓存
+@discardableResult
+MMCache.shared.cache`XXX`(value : XXX, key: String, cacheContainer: MMCache.CacheContainer = .RAM)  -> Bool
+// 取舍
+MMCache.shared.fetch`XXX`Cache(key: String, cacheContainer: MMCache.CacheContainer = .RAM)
+

缓存成功会返回一个 Bool 值，这里可不接收

XXX 所支持类型
Bool -
Float -
Double -
String -
JSON -
Modelable [Modelable]
Moya.Response -
Int UInt
Int8 UInt8
Int16 UInt16
Int32 UInt32
Int64 UInt64

其中，除了 Moya.Response 之外，其它类型皆是通过 JSON 来实现缓存

所以，如果你想清除这些类型的缓存，只需要调用如下方法即可

@discardableResult
+func removeJSONCache(_ key: String, cacheContainer: MMCache.CacheContainer = .RAM) -> Bool
+
+@discardableResult
+func removeAllJSONCache(cacheContainer: MMCache.CacheContainer = .RAM) -> Bool
+

清除 Moya.Response 则使用如下两个方法

@discardableResult
+func removeResponseCache(_ key: String) -> Bool
+
+@discardableResult
+func removeAllResponseCache() -> Bool
+

再来看看MMCache.CacheContainer

enum CacheContainer {
+    case RAM 	// 只缓存于内存的容器
+    case hybrid // 缓存于内存与磁盘的容器
+}
+

这两种容器互不相通，即 即使key相同，使用 hybrid 来缓存后，再通过 RAM 取值是取不到的。

  • RAM : 仅缓存于内存之中，缓存的数据在APP使用期间一直存在
  • hybrid ：缓存于内存与磁盘中，APP重启后也可以获取到数据
# 二、缓存网络请求

内部缓存过程：

  1. APP首次启动并进行网络请求，网络数据将缓存起来
  2. APP再次启动并进行网络请求时，会先返回缓存的数据，等请求成功后再返回网络数据
  3. 其它情况只会加载网络数据
  4. 每次成功请求到数据后，都会对缓存的数据进行更新
// Normal
+func cacheRequest(
+    _ target: Target, 
+    cacheType: MMCache.CacheKeyType = .default, 
+    callbackQueue: DispatchQueue? = nil, 
+    progress: Moya.ProgressBlock? = nil, 
+    completion: @escaping Moya.Completion
+) -> Cancellable
+
+// Rx
+func cacheRequest(
+    _ target: Base.Target, 
+    callbackQueue: DispatchQueue? = nil, 
+    cacheType: MMCache.CacheKeyType = .default
+) -> Observable<Response>
+

实际上是对 Moya 请求后的 Response 进行缓存。 其实与 Moya 自带的方法相比较只多了一个参数 cacheType: MMCache.CacheKeyType ，定义着缓存中的 key ，默认为 default

下面是 MMCache.CacheKeyType 的定义

/**
+ let cacheKey = [method]baseURL/path
+ 
+ - default : cacheKey + "?" + parameters
+ - base : cacheKey
+ - custom : cacheKey + "?" + customKey
+ */
+public enum CacheKeyType {
+    case `default`
+    case base
+    case custom(String)
+}
+

如果你想缓存多页列表数据的最新一页数据，此时使用 default 是不合适的，因为 default 使用的 key 包含了 pageIndex，这样就达不到只缓存 最新一页数据 的目的， 所以这里应该使用 base 或者 custom(String)

我们可以来试一下带缓存的请求

/*
+ * APP第一次启动并进行网络请求，网络数据将缓存起来
+ * APP再次启动并进行网络请求时，会先加载缓存，再加载网络数据
+ * 其它情况只会加载网络数据
+ * 每次成功请求到数据都会进行数据更新
+ */
+lxfNetTool.rx.cacheRequest(.data(type: .all, size: 10, index: 1))
+    .subscribe(onNext: { response in
+        log.debug("statusCode -- \(response.statusCode)")
+    }).disposed(by: disposeBag)
+
+// 传统方式
+/*
+let _ = lxfNetTool.cacheRequest(.data(type: .all, size: 10, index: 1)) { result in
+    guard let resp = result.value else { return }
+    log.debug("statusCode -- \(resp.statusCode)")
+}
+*/
+

打印结果

// 首次使用APP
+statusCode -- 200
+
+// 关闭并重新打开APP，再请求一下
+statusCode -- 230
+statusCode -- 200
+
+// 然后再请求一下
+statusCode -- 200
+

这里的 230 就是 MMStatusCode.cache.rawValue

# CocoaPods

  • 默认安装

MoyaMapper默认只安装Core下的文件

pod 'MoyaMapper'
+
  • RxSwift拓展
pod 'MoyaMapper/Rx'
+
  • 缓存拓展
pod 'MoyaMapper/MMCache'
+
  • Rx缓存
pod 'MoyaMapper/RxCache'
+
+ +
+
#iOS#Swift
Swift - 优雅的适配大小
ReactorKit + RxDataSources列表多次刷新的解决方案

+ ← + ReactorKit + RxDataSources列表多次刷新的解决方案→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/084bf9/index.html b/pages/084bf9/index.html new file mode 100644 index 000000000..3451d3b90 --- /dev/null +++ b/pages/084bf9/index.html @@ -0,0 +1,127 @@ + + + + + + Docker - 操作镜像资源 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-24
目录

Docker - 操作镜像资源

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 搜索镜像资源

docker search nginx
+

+一般选择 STARS 数最大的

# 拉取镜像

比如拉取上提及的 nginx 镜像

docker image pull nginx
+

命令执行后就开始对镜像进行拉取了 +

# 查看当前拥有的镜像

镜像ID: 镜像的唯一标识，如果镜像ID相同，则说明是同一个镜像

TAG: 用来区分不同的发行版本，如果不指定具体标记，则默认使用latest来标记信息

docker image ls
+# 或
+docker images
+

# 查看镜像的详情信息

# docker image inspect 镜像名
+docker image inspect ubuntu
+

# 删除镜像

完整写法

docker image rm ubuntu
+

简洁写法

docker rmi ubuntu
+

除了可以根据镜像名来删除外，也可以使用镜像ID，如使用上述的 ubuntu 镜像ID

docker rmi f643c72bc252
+

如果我们对同一个镜像打了多个 tag ，导致同一个镜像ID存在多个镜像名称，那此时可以使用 name:tag 的格式来删除镜像，如：

docker rmi ubuntu:latest
+
+# docker rmi ubuntu_lxf:v1.0
+

# 镜像标签

# docker tag 当前镜像名:镜像版本 新的镜像名:新的版本
+docker tag ubuntu:latest ubuntu_lxf:latest
+
+# docker tag ubuntu:latest ubuntu_lxf:v1.0
+

+注：

  • ubuntu 和 ubuntu_lxf 的 IMAGE_ID 是相同的
  • 结合删除镜像的命令就可以实现镜像重命名功能

# 导出镜像

docker save 会保存镜像的所有历史记录和元数据信息

# docker save -o 包文件 镜像
+docker save -o ubuntu.tar ubuntu
+
+# docker save 镜像1 ... 镜像n > 包文件
+docker save ubuntu nginx > lxf_images.tar
+

# 导入镜像

先删除 ubuntu 镜像 +

# docker load -i 镜像包名
+docker load -i ubuntu.tar
+
+# docker load < 镜像包名
+docker load < ubuntu.tar
+
+# docker load --input 镜像包名
+docker load --input ubuntu.tar
+

+可以看到， ubuntu 镜像已经成功导入进来了

# 查看镜像历史

# docker image history 镜像名
+
+docker image history ubuntu
+

+ +
+
#Docker
Docker - 安装、加速和基本使用
Docker - 操作容器

+ ← + Docker - 操作容器→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/087ea3/index.html b/pages/087ea3/index.html new file mode 100644 index 000000000..f71ddaca5 --- /dev/null +++ b/pages/087ea3/index.html @@ -0,0 +1,558 @@ + + + + + + uniapp - 腾讯云点播小程序插件 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-05-15
目录

uniapp - 腾讯云点播小程序插件

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简介

微信小程序播放教育类视频要求具备有相关资质，但这些资质一般公司很难短时间申请下来（甚至有的公司压根就申请不了），而【短视频播放器小程序插件】含有《信息网络传播视听节目许可证》的资质证书备案，可以利用该插件来解决资质问题，相关截图如下：

图片来源：https://cloud.tencent.com/document/product/266/36849 (opens new window)

采购流程于技术无关，以下内容着重讲解如何集成该微信小程序插件。

注：【短视频播放器小程序插件】授权费 3 万/年（有 14 天试用 Licence），如果有购买腾讯云其他服务的话，满足一定条件，会赠送 1 年 免费使用 Licence，详情找腾讯云客服咨询（2022 年 04 月如此，赠送情况可能随时会变）。

# 二、使用

# 1、绑定插件

因为微信小程序插件没有实质代码或 SDK，所以无法在本地添加集成，需要在微信小程序平台，将 小程序AppID 与 插件AppID 进行绑定（即给小程序添加插件），开发者工具在编译时会自动引入，绑定有 2 种方式：

  • 方式 1：登录微信小程序平台，在 设置-第三方设置 中找到 添加插件，输入插件 AppID（wx116d0dd5e6a39ac7 ）搜索并添加：

云点播短视频播放器文档：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx116d0dd5e6a39ac7&lang=zh_CN (opens new window)

# 2、集成插件

微信小程序原生工程需要 在 app.json 里声明使用的插件及版本，对应到 uniapp 工程，则是在 manifest.json 文件中微信小程序特有配置（即 mp-weixin 节点） 处，进行 plugins 配置声明：

// manifest.json 源码视图
+{
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "wxxxxxxxxxxx",
+    "plugins": {
+      // 云点播短视频播放器
+      // 文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx116d0dd5e6a39ac7&token=1835838344&lang=zh_CN
+      "cloudPlayer": {
+        "version": "0.1.2",
+        "provider": "wx116d0dd5e6a39ac7"
+      }
+    }
+  }
+}
+

manifest.json 配置项说明：https://uniapp.dcloud.io/collocation/manifest.html (opens new window)

# 3、页面内使用播放器

微信小程序原生工程需要 在 页面的 xxxx.json 里声明，对应到 uniapp 工程，则是在 pages.json 文件中，在需要使用插件的 页面的 style 的微信小程序特有配置（即 mp-weixin 节点）处，进行 usingComponents 配置声明：

// pages.json
+{
+  "pages": [
+    ...,
+    {
+      "path": "pages/course/course",
+      "style": {
+        "navigationBarTitleText": "课程",
+        "mp-weixin": {
+          // 云点播短视频播放器
+          "usingComponents": {
+            "cloud-player": "plugin://cloudPlayer/player"
+          }
+        }
+      }
+    }
+  ],
+  "globalStyle": {
+    ...
+  }
+}
+

pages.json 配置项说明：https://uniapp.dcloud.io/collocation/pages.html#style (opens new window)

声明完哪个页面需要使用插件播放器之后，就可以在那个页面的布局文件中使用插件播放器了：

// 在wxml里插入
+<cloud-player
+  appid="xxxxx"
+  fileid="xxxxxxxx"
+  playerid="myPlayerId"
+></cloud-player>
+

注：微信小程序原生工程中，页面是 wxml 文件，uniapp 工程中是 vue 文件。另外，目前这种声明方式只对单个配置过的页面有效，也就是说，如果其他页面也需要使用插件播放器，还需要在其他页面的style中单独进行配置，这就很麻烦了，不过现在不用烦恼，后面会解决这个问题。

# 4、组件内使用播放器

为了功能复用，以及方便代码维护，实际开发中，往往会自定义组件，对常用的布局、功能进行封装。微信小程序原生工程可以在自定义组件的 json 文件中进行配置，跟页面相同的 usingComponents 配置即可：

官方的 云点播短视频播放器-开发文档 (opens new window) 只说明在了如何在网页中使用插件，但没有对组件中如何使用插件进行说明，很无语，希望后续官方能完善一下。另外，这是我发起工单询问之后，腾讯技术售后给我的 demo 工程中的代码，是否有效暂不确定 -_-!

uniapp 遵循 vue 规范，想要在自定义组件要使用其他自定义组件，需要在 vue 文件中的 <script> 标签中，配置 components ，例如：

<script>
+import leadHeader from "./lead-header.vue";
+export default {
+  components: {
+    leadHeader,
+  },
+};
+</script>
+

那么依葫芦画瓢，是否也可以这样配置插件播放器呢？例如：

<script>
+import cloudPlayer from "plugin://cloudPlayer/player";
+export default {
+  components: {
+    cloudPlayer,
+  },
+};
+</script>
+

可惜不行，编译时会报错 Error: Can't resolve 'plugin://cloudPlayer/player'，而且 uniapp 也没有提供对应的配置项。不过呢，uniapp 是可以直接使用微信小程序自定义组件的，这是否意味着，可以将用到插件的自定义组件改用 wxml+wcss 的方式进行编写，然后再引入到 uniapp 工程中呢？

uniapp 使用小程序原生组件：https://uniapp.dcloud.io/tutorial/miniprogram-subject.html#小程序自定义组件支持 (opens new window)

仔细想想，这个方案是有问题的。首先，对不熟悉微信小程序原生开发的人很不友好，其次，wxcomponents 目录下的小程序组件，要使用的话，还需要在 pages.json 中进行配置，这意味着 uniapp 自定义组件中是不能直接使用小程序组件的，无法解决 组件中引入组件 的情况，所以，这个方案不行。难道 uniapp 对此就无解了吗？非也，仔细阅读上面的 uniapp 官方文档，可以找到这么一句：当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

于是，在 pages.json 文件中做如下修改：

// pages.json
+{
+  "pages": [
+    ...,
+    {
+      "path": "pages/course/course",
+      "style": {
+        "navigationBarTitleText": "课程",
+        // "mp-weixin": {
+        //  "usingComponents": {
+        //    "cloud-player": "plugin://cloudPlayer/player"
+        //  }
+        // }
+      }
+    }
+  ],
+  "globalStyle": {
+    // #ifdef MP-WEIXIN
+    "usingComponents": {
+      "cloud-player": "plugin://cloudPlayer/player"
+    },
+    // #endif
+    ...
+  }
+}
+

可以发现，我把页面 style 下的 mp-weixin 配置给注释掉了，原因是在 globalStyle 下配置了 usingComponents 之后，就可以全局使用插件播放器，不管是页面或是组件中，都不需要再单独去配置 usingComponents，这样就可以在项目中随心所欲地使用播放器插件了，nice~

# 5、获取播放器 Context

当需要在业务逻辑中控制视频播放或暂停时，会用到 videoContext，如果使用默认的 <video> 标签，那么可以通过 uni.createVideoContext(videoId, this) 来获取视频播放器上下文，再通过上下文执行 play() 及 pause() 等方法，即可控制视频播放，详细说明见 uniapp 官方文档：

createVideoContext：https://uniapp.dcloud.io/api/media/video-context.html#createvideocontext (opens new window)

但是，uni.createVideoContext(videoId, this) 对腾讯云点播插件无效，需改用 requirePlugin(pluginName).getContext(videoId) 来获取，例如：

const plugin = requirePlugin("cloudPlayer");
+let player = plugin.getContext("myVideo");
+

该解决方案源自一篇社区帖子 《腾讯云点播 wx.createVideoContext("myVideo").pause()无法暂停》：https://developers.weixin.qq.com/community/develop/doc/0004eae9e6cd08e31d6d827e657800 (opens new window)

# 三、封装

腾讯云点播插件 <cloud-player> 与默认的 <video> 标签在使用上差异不多，就以下几点：

  • <cloud-player> 使用时需要配置 appid 属性。
  • <cloud-player> 使用时需要配置 width 和 height 属性。
  • <cloud-player> 视频源属性是 fileid，<video> 视频源属性是 src。
  • <cloud-player> id 属性是 playerid，<video> id 属性是 id。
  • <cloud-player> 上下文通过 requirePlugin(pluginName).getContext(videoId) 获取，<video> 上下文通过 uni.createVideoContext(videoId, this) 获取。

所以，为了代码可维护性，统一模板代码，我们可以自定义组件（名为 video-mix）对两者进行封装，用法上跟 <video> 标签差不多：

<video-mix
+  videoId="videoPlayer"
+  width="710rpx"
+  height="400rpx"
+  :fileid="curPlayEpisode.code"
+  src="http://xxxx/video1.mp4"
+  :poster="curPlayEpisode.cover_img"
+  :controls="true"
+  :autoplay="true"
+  :show-progress="showProgress"
+  @error="onVideoError"
+  @controlstoggle="onVideoControlsToggle"
+></video-mix>
+

注：我个人设想在微信小程序上使用腾讯云点播插件播放视频，在其他平台上还是继续使用 <video> 标签，于是设计为 fileid 和 src 共存。

以下是 video-mix.vue 的完整代码：

// video-mix.vue
+<template>
+  <view class="video-mix-container">
+    <!-- #ifdef MP-WEIXIN -->
+    <cloud-player
+      appid="GitLqr亲自打码"
+      :id="videoId"
+      :playerid="videoId"
+      :width="width"
+      :height="height"
+      :fileid="fileid"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :controls="controls"
+      :danmu-list="danmuList"
+      :danmu-btn="danmuBtn"
+      :enable-danmu="enableDanmu"
+      :page-gesture="pageGesture"
+      :show-progress="showProgress"
+      :show-fullscreen-btn="showFullscreenBtn"
+      :show-play-btn="showPlayBtn"
+      :show-center-play-btn="showCenterPlayBtn"
+      :enable-progress-gesture="enableProgressGesture"
+      :object-fit="objectFit"
+      :poster="poster"
+      :show-mute-btn="showMuteBtn"
+      :title="title"
+      :play-btn-position="playBtnPosition"
+      :enable-play-gesture="enablePlayGesture"
+      :auto-pause-if-navigate="autoPauseIfNavigate"
+      :auto-pause-if-open-native="autoPauseIfOpenNative"
+      :vslide-gesture="vslideGesture"
+      :vslide-gesture-in-fullscreen="vslideGestureInFullscreen"
+      :ad-unit-id="adUnitId"
+      :poster-for-crawler="posterForCrawler"
+      @play="onPlay"
+      @pause="onPause"
+      @ended="onEnded"
+      @timeupdate="onTimeUpdate"
+      @fullscreenchange="onFullScreenChange"
+      @waiting="onWaiting"
+      @error="onError"
+      @progress="onProgress"
+      @loadedmetadata="onLoadedMetaData"
+      @controlstoggle="onControlsToggle"
+    >
+    </cloud-player>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <video
+      :id="videoId"
+      :style="{ width: width, height: height }"
+      :src="src"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :controls="controls"
+      :danmu-list="danmuList"
+      :danmu-btn="danmuBtn"
+      :enable-danmu="enableDanmu"
+      :page-gesture="pageGesture"
+      :show-progress="showProgress"
+      :show-fullscreen-btn="showFullscreenBtn"
+      :show-play-btn="showPlayBtn"
+      :show-center-play-btn="showCenterPlayBtn"
+      :enable-progress-gesture="enableProgressGesture"
+      :object-fit="objectFit"
+      :poster="poster"
+      :show-mute-btn="showMuteBtn"
+      :title="title"
+      :play-btn-position="playBtnPosition"
+      :enable-play-gesture="enablePlayGesture"
+      :auto-pause-if-navigate="autoPauseIfNavigate"
+      :auto-pause-if-open-native="autoPauseIfOpenNative"
+      :vslide-gesture="vslideGesture"
+      :vslide-gesture-in-fullscreen="vslideGestureInFullscreen"
+      :ad-unit-id="adUnitId"
+      :poster-for-crawler="posterForCrawler"
+      @play="onPlay"
+      @pause="onPause"
+      @ended="onEnded"
+      @timeupdate="onTimeUpdate"
+      @fullscreenchange="onFullScreenChange"
+      @waiting="onWaiting"
+      @error="onError"
+      @progress="onProgress"
+      @loadedmetadata="onLoadedMetaData"
+      @controlstoggle="onControlsToggle"
+    ></video>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+export default {
+  name: "video-mix",
+  props: {
+    videoId: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "750rpx",
+    },
+    height: {
+      type: String,
+      default: "420rpx",
+    },
+    fileid: {
+      type: String,
+      default: "",
+    },
+    src: {
+      type: String,
+      default: "",
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    },
+    loop: {
+      type: Boolean,
+      default: false,
+    },
+    muted: {
+      type: Boolean,
+      default: false,
+    },
+    initialTime: {
+      type: Number,
+      default: 0,
+    },
+    controls: {
+      type: Boolean,
+      default: true,
+    },
+    danmuList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    danmuBtn: {
+      type: Boolean,
+      default: false,
+    },
+    enableDanmu: {
+      type: Boolean,
+      default: false,
+    },
+    pageGesture: {
+      type: Boolean,
+      default: false,
+    },
+    // direction: {
+    // 	type: Number,
+    // 	default: undefined,
+    // },
+    showProgress: {
+      type: Boolean,
+      default: true,
+    },
+    showFullscreenBtn: {
+      type: Boolean,
+      default: true,
+    },
+    showPlayBtn: {
+      type: Boolean,
+      default: true,
+    },
+    showCenterPlayBtn: {
+      type: Boolean,
+      default: true,
+    },
+    enableProgressGesture: {
+      type: Boolean,
+      default: true,
+    },
+    objectFit: {
+      type: String,
+      default: "contain",
+    },
+    poster: {
+      type: String,
+      default: "",
+    },
+    showMuteBtn: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    playBtnPosition: {
+      type: String,
+      default: "bottom",
+    },
+    enablePlayGesture: {
+      type: Boolean,
+      default: false,
+    },
+    autoPauseIfNavigate: {
+      type: Boolean,
+      default: true,
+    },
+    autoPauseIfOpenNative: {
+      type: Boolean,
+      default: true,
+    },
+    vslideGesture: {
+      type: Boolean,
+      default: false,
+    },
+    vslideGestureInFullscreen: {
+      type: Boolean,
+      default: true,
+    },
+    adUnitId: {
+      type: String,
+      default: "",
+    },
+    posterForCrawler: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: [
+    "play",
+    "pause",
+    "ended",
+    "timeupdate",
+    "fullscreenchange",
+    "waiting",
+    "error",
+    "progress",
+    "loadedmetadata",
+    "controlstoggle",
+  ],
+  data() {
+    return {
+      isVideoPlaying: false,
+      videoContext: null,
+    };
+  },
+  methods: {
+    onPlay(e) {
+      this.isVideoPlaying = true;
+      this.$emit("play", e);
+    },
+    onPause(e) {
+      this.isVideoPlaying = false;
+      this.$emit("pause", e);
+    },
+    onEnded(e) {
+      this.isVideoPlaying = false;
+      this.$emit("ended", e);
+    },
+    onTimeUpdate(e) {
+      this.$emit("timeupdate", e);
+    },
+    onFullScreenChange(e) {
+      this.$emit("fullscreenchange", e);
+    },
+    onWaiting(e) {
+      this.$emit("waiting", e);
+    },
+    onError(e) {
+      this.isVideoPlaying = false;
+      this.$emit("error", e);
+    },
+    onProgress(e) {
+      this.$emit("progress", e);
+    },
+    onLoadedMetaData(e) {
+      this.$emit("loadedmetadata", e);
+    },
+    onControlsToggle(e) {
+      this.$emit("controlstoggle", e);
+    },
+    isPlaying() {
+      return this.isVideoPlaying;
+    },
+    play() {
+      this._log("play");
+      this._fetchVideoContext().then(() => {
+        this.videoContext.play();
+      });
+    },
+    pause() {
+      this._log("pause");
+      this._fetchVideoContext().then(() => {
+        this.videoContext.pause();
+      });
+    },
+    stop() {
+      this._log("stop");
+      this._fetchVideoContext().then(() => {
+        this.videoContext.stop();
+      });
+    },
+    _fetchVideoContext() {
+      const operation = () =>
+        new Promise((resolve, reject) => {
+          if (!this.videoContext) {
+            // #ifdef MP-WEIXIN
+            // 这里的cloudPlayer是在json配置上引入的插件子组件名
+            const plugin = requirePlugin("cloudPlayer");
+            console.log('requirePlugin("cloudPlayer"): ', plugin);
+            this.videoContext = plugin.getContext(this.videoId);
+            console.log(
+              `plugin.getContext(${this.videoId}): `,
+              this.videoContext
+            );
+            // #endif
+            // #ifndef MP-WEIXIN
+            // this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件（在自定义组件中药加上this，如果是普通页面即不需要加）
+            this.videoContext = uni.createVideoContext(this.videoId, this);
+            console.log(
+              "uni.createVideoContext(this.videoId, this): ",
+              this.videoContext
+            );
+            // #endif
+          }
+
+          if (this.videoContext) {
+            resolve(this.videoContext);
+          } else {
+            reject("videoContext is empty");
+          }
+        });
+      return new Promise((resolve, reject) => {
+        this.$utils.promiseRetry(operation, 500, 3).then(resolve).catch(reject);
+      });
+    },
+    _log(msg) {
+      console.log(`video-mix : ${msg}`);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.video-mix-container {
+}
+</style>
+

上述代码中用到的工具方法：

// utils.js
+/* Promise 包装好的 setTimeout */
+export const promiseWait = (ms) => new Promise((r) => setTimeout(r, ms));
+/**
+ * Promise 重试
+ * @param {Function} operation 操作函数
+ * @param {Number} delay 时间间隔
+ * @param {Number} retries 重试次数
+ */
+export const promiseRetry = (operation, delay, retries) =>
+  new Promise((resolve, reject) => {
+    return operation()
+      .then(resolve)
+      .catch((reason) => {
+        if (retries > 0) {
+          return promiseWait(delay)
+            .then(promiseRetry.bind(null, operation, delay, retries - 1))
+            .then(resolve)
+            .catch(reject);
+        }
+        return reject(reason);
+      });
+  });
+
+ +
+
#uniapp#小程序#腾讯云点播#小程序插件
这可能是目前最方便的网站中英文切换（理论支持所有语言）
uniapp - 接入科大讯飞语音评测

+ ← + uniapp - 接入科大讯飞语音评测→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0909a3/index.html b/pages/0909a3/index.html new file mode 100644 index 000000000..05d549210 --- /dev/null +++ b/pages/0909a3/index.html @@ -0,0 +1,142 @@ + + + + + + iOS - Swift仿微信聊天图片显示 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift仿微信聊天图片显示

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 效果图

如图所示，图片左侧有个小箭头

效果图

# 原理

其实原理比较简单，准备一张图片MaskImgae，先对其进行拉伸，然后按照其轮廓对图片进行裁剪就行了

MaskImgae

# 步骤

这里摘重点说，布局什么的按自己意愿去弄吧。我固定了图片的显示大小为 102 * 152

# 1、对MaskImgae进行拉伸

// 设置拉伸范围
+let stretchInsets = UIEdgeInsetsMake(30, 28, 23, 28)
+// 待拉伸的图片
+let stretchImage = UIImage(named: "SenderImageNodeMask")
+// 进行拉伸
+let bubbleMaskImage = stretchImage.resizableImage(withCapInsets: stretchInsets, resizingMode: .stretch)
+

拉伸的效果如图

拉伸效果

# 2、对imageView设置裁剪区域

这里我的 imageView 叫 chatImgView +上面的拉伸效果图是临时把拉伸好的图片赋值给了chatImgView，只是为了给大家看到效果而已，各位看官如果有赋值请记得改回来~~

好，下面进行裁剪

// 新建一个图层
+let layer = CALayer()
+// 设置图层显示的内容为拉伸过的MaskImgae
+layer.contents = bubbleMaskImage.cgImage
+// 设置拉伸范围(注意：这里contentsCenter的CGRect是比例（不是绝对坐标）)
+layer.contentsCenter = self.CGRectCenterRectForResizableImage(bubbleMaskImage)
+// 设置图层大小与chatImgView相同
+layer.frame = CGRect(x: 0, y: 0, width: 102, height: 152)
+// 设置比例
+layer.contentsScale = UIScreen.main.scale
+// 设置不透明度
+layer.opacity = 1
+// 设置裁剪范围
+self.chatImgView.layer.mask = layer
+// 设置裁剪掉超出的区域
+self.chatImgView.layer.masksToBounds = true
+
func CGRectCenterRectForResizableImage(_ image: UIImage) -> CGRect {
+    // LXFLog("\(image.capInsets)")
+    // 这里的image.capInsets就是UIEdgeInsetsMake(30, 28, 23, 28)
+    return CGRect(
+        x: image.capInsets.left / image.size.width,
+        y: image.capInsets.top / image.size.height,
+        width: (image.size.width - image.capInsets.right - image.capInsets.left) / image.size.width,
+        height: (image.size.height - image.capInsets.bottom - image.capInsets.top) / image.size.height
+    )
+}
+

这样就完成了

# 解释一下下

# UIEdgeInsetsMake

MaskImgae 的大小为 56 * 50

// UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)
+UIEdgeInsetsMake(30, 28, 23, 28)
+

红色范围就是要拉伸的范围(随手一扣，不太准确，意思意思下就好了~~)

拉伸区域

# contentsCenter

这是对某个区域进行全面拉伸，如果不设置的话默认值为

CGRect(x: 0, y: 0, width: 1, height: 1)
+

就是直接进行缩放 +那我们先来看看，如果不对contentsCenter这个值进行设置会是什么效果

直接拉伸

我们来看下官方解释

var contentsCenter: CGRect { get set }
+Description	
+The rectangle that defines how the layer contents are scaled
+if the layer’s contents are resized. Animatable.
+

翻译：如果图层的内容是重新设置了尺寸的，那定义的这个矩形(contentsCenter)是为了告诉图层，图层的内容是如何被缩放的

那明了，我们的图片是被拉伸后再绘制到layer上的，为了正确显示我们的图片，我们得告诉layer它是怎么被进行拉伸的。是的，就是下面代码所指定的范围

UIEdgeInsetsMake(30, 28, 23, 28)
+

但是，正如上面提到过的，contentsCenter所要赋值的CGRect是比例，不是绝对坐标，所以现在我们得通过(30, 28, 23, 28)获取比例值，转换方法已经在上面给出了，就是CGRectCenterRectForResizableImage +我们来打印下 image.capInsets的内容

LXFLog("\(image.capInsets)")
+LXFLog("\(image.capInsets.top)")
+LXFLog("\(image.capInsets.bottom)")
+LXFLog("\(image.capInsets.left)")
+LXFLog("\(image.capInsets.right)")
+

打印结果

UIEdgeInsets(top: 30.0, left: 28.0, bottom: 23.0, right: 28.0)
+30.0
+23.0
+28.0
+28.0
+

好，现在结合 下面的图 与 CGRectCenterRectForResizableImage 方法中的代码就很明确比例是怎么取到的了

拉伸区域

附上相关项目：Swift 3.0 高仿微信 (opens new window)

+ +
+
#iOS#Swift
iOS - Swift-UICollectionView横向分页的问题
iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗

+ ← + iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/091864/index.html b/pages/091864/index.html new file mode 100644 index 000000000..5fcfaab9d --- /dev/null +++ b/pages/091864/index.html @@ -0,0 +1,252 @@ + + + + + + DesignPattern - 享元模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-09-06
目录

DesignPattern - 享元模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、享元模式介绍

享元模式（Flyweight Pattern）属于结构型模式，主要用于减少创建对象的数量，以减少内存占用和提高性能，它提供了减少对象数量从而改善应用所需的对象结构的方式；享元模式尝试重用现有的同类对象，如果未找到匹配的对象，则创建新对象。

  • 状态

    • 内部状态：不会随环境的改变而所有不同，是可以共享的
    • 外部状态：它随环境的改变而改变的，是不可以共享的，因此外部状态是由客户端来保持（因为环境的变化一般是由客户端引起）

  • 核心组成

    • 抽象享元角色：为具体享元角色规定了必须实现的方法，而外部状态就是以参数的形式通过些方法传入
    • 具体享元角色：实现抽象角色规定的方法，如果存在内部状态，就负责为内部状态提供存储空间
    • 享元工厂角色：负责创建和管理享元角色。（要想达到共享的目的，这个角色很关键）
    • 客户端角色：维护对所有享元对象的引用，而且还需要存储对应的外部状态

  • 应用场景

    • Java 中的 String，如果字符串常量池里有则返回，如果没有则创建一个字符串保存在字符串常量池里
    • 数据库连接池、线程池等
    • 如果系统有大量相似的对象，或者需要用缓冲池的时候可以使用享元模式，也就是大家常说的池化技术
    • 如果发现某个对象生成了大量细粒度的实例，并且这些实例除了几个参数外基本是相同的，如果把那些共享参数移到类外面，在方法调用时将他们传递进来，就可以通过共享对象，减少实例的个数

  • 优点

    • 大大减少了对象的创建，降低了程序内存的占用，提高效率

  • 缺点

    • 提高了系统的复杂度，需要分离出内部状态和外部状态

注意划分内部状态和外部状态，否则可能会引起线程安全问题，必须有一个工厂类加以控制

# 二、享元模式代码实现

创建 抽象享元角色，规定具体享元角色必须实现的方法：

/**
+ * 抽象享元角色：sql数据库连接
+ *
+ * @author GitLqr
+ */
+public abstract class SqlConnection {
+
+	protected boolean isConnected;
+
+	// 连接数据库
+	public abstract void connect();
+
+	// 断开连接
+	public abstract void disconnect();
+
+	// 增
+	public abstract void create(String sql);
+
+	// 删
+	public abstract void delete(String sql);
+
+	// 改
+	public abstract void update(String sql);
+
+	// 查
+	public abstract String select(String sql);
+}
+

说明：其中成员属性 isConnected 是内部状态，方法参数 sql 是外部状态

创建 具体享元角色：

/**
+ * 具体享元角色：Mysql数据库连接
+ *
+ * @author GitLqr
+ */
+public class MySqlConnection extends SqlConnection {
+
+	@Override
+	public void connect() {
+		if (isConnected)
+			return;
+		try {
+			System.out.println("准备连接 mysql数据库...");
+			Thread.sleep(1000);
+			System.out.println("成功连接 mysql数据库");
+			isConnected = true;
+		} catch (InterruptedException e) {
+			e.printStackTrace();
+		}
+	}
+
+	@Override
+	public void disconnect() {
+		System.out.println("已断开 mysql数据库连接");
+		isConnected = false;
+	}
+
+	@Override
+	public void create(String sql) {
+		System.out.println("使用mysql创建数据");
+	}
+
+	@Override
+	public void delete(String sql) {
+		System.out.println("使用mysql删除数据");
+	}
+
+	@Override
+	public void update(String sql) {
+		System.out.println("使用mysql更新数据");
+	}
+
+	@Override
+	public String select(String sql) {
+		System.out.println("使用mysql查询数据");
+		return null;
+	}
+}
+
+/**
+ * 具体享元角色：Oracle数据库连接
+ *
+ * @author GitLqr
+ */
+public class OracleConnection extends SqlConnection {
+
+	@Override
+	public void connect() {
+		if (isConnected)
+			return;
+		try {
+			System.out.println("准备连接 Oracle数据库...");
+			Thread.sleep(500);
+			System.out.println("成功连接 Oracle数据库");
+			isConnected = true;
+		} catch (InterruptedException e) {
+			e.printStackTrace();
+		}
+	}
+
+	@Override
+	public void disconnect() {
+		System.out.println("已断开 Oracle数据库连接");
+		isConnected = false;
+	}
+
+	@Override
+	public void create(String sql) {
+		System.out.println("使用oracle创建数据");
+	}
+
+	@Override
+	public void delete(String sql) {
+		System.out.println("使用oracle删除数据");
+	}
+
+	@Override
+	public void update(String sql) {
+		System.out.println("使用oracle更新数据");
+	}
+
+	@Override
+	public String select(String sql) {
+		System.out.println("使用oracle查询数据");
+		return null;
+	}
+}
+

创建 享元工厂角色：

注意：这个工厂类是享元模式的核心，由它管理所有享元对象

/**
+ * 享元工厂角色：sql连接工厂类
+ *
+ * @author GitLqr
+ */
+public class SqlConnectionFactory {
+
+	// 数据库连接缓存（存放各种数据库的连接对象）
+	private static Map<String, SqlConnection> connectionCache = new HashMap<>();
+
+	private SqlConnectionFactory() {
+	}
+
+	public static SqlConnection getConnection(String type) {
+		// 缓存池里有，直接提取返回
+		if (connectionCache.containsKey(type)) {
+			return connectionCache.get(type);
+		} else {
+			// 缓存池里没有，先创建享元对象
+			SqlConnection sqlConnection = null;
+			switch (type) {
+			case "mysql":
+				sqlConnection = new MySqlConnection();
+				break;
+			case "oracle":
+				sqlConnection = new OracleConnection();
+				break;
+			default:
+				break;
+			}
+			// 再将享元对象缓存起来
+			if (sqlConnection != null) {
+				connectionCache.put(type, sqlConnection);
+			}
+			// 最后返回享元对象
+			return sqlConnection;
+		}
+	}
+}
+
+ +
+
#设计模式#享元模式
DesignPattern - 外观模式【结构型】
DesignPattern - 策略模式【行为型】

+ ← + DesignPattern - 策略模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0c1879/index.html b/pages/0c1879/index.html new file mode 100644 index 000000000..759351e86 --- /dev/null +++ b/pages/0c1879/index.html @@ -0,0 +1,278 @@ + + + + + + AndroidTV - 获取Mac地址 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2020-10-10
目录

AndroidTV - 获取Mac地址

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、核心工具类

亲测 Android9、Android10 可用，
+注意：前提条件是，必须联网才能获取到Mac地址，否则为null。

/**
+ * @author LQR
+ * @time 2020/8/24
+ * @desc 获取Mac地址工具类
+ * <p>
+ * 必须在联网的情况下才能获取到mac地址
+ */
+public class MacUtil {
+
+    private static final String TAG = "MacUtil";
+
+    private MacUtil() {
+    }
+
+    /**
+     * 获取当前系统连接网络的网卡的mac地址
+     */
+    public static final String getMac() {
+        byte[] mac = null;
+        try {
+            Enumeration<NetworkInterface> netInterfaces = NetworkInterface.getNetworkInterfaces();
+            while (netInterfaces != null && netInterfaces.hasMoreElements()) {
+                NetworkInterface ni = netInterfaces.nextElement();
+                Enumeration<InetAddress> address = ni.getInetAddresses();
+                while (address.hasMoreElements()) {
+                    InetAddress ip = address.nextElement();
+                    if (ip.isAnyLocalAddress() || !(ip instanceof Inet4Address) || ip.isLoopbackAddress())
+                        continue;
+                    if (ip.isSiteLocalAddress()) {
+                        mac = ni.getHardwareAddress();
+                        Log.e(TAG, "获取Mac地址的网卡名：" + ni.getDisplayName());
+                    } else if (!ip.isLinkLocalAddress()) {
+                        mac = ni.getHardwareAddress();
+                        Log.e(TAG, "获取Mac地址的网卡名：" + ni.getDisplayName());
+                        break;
+                    }
+                }
+            }
+        } catch (SocketException e) {
+            e.printStackTrace();
+        }
+        return getMacString(mac);
+    }
+
+    /**
+     * 获取wifi模块的mac地址
+     */
+    public static String getWifiMac() {
+        return getNetworkInterfaceMac("wlan0");
+    }
+
+    public static String getP2pMac() {
+        return getNetworkInterfaceMac("p2p0");
+    }
+
+    public static String getIp6tnl0Mac() {
+        return getNetworkInterfaceMac("ip6tnl0");
+    }
+
+    public static String getIpVti0Mac() {
+        return getNetworkInterfaceMac("ip_vti0");
+    }
+
+    public static String getLoMac() {
+        return getNetworkInterfaceMac("lo");
+    }
+
+    public static String getTeql0Mac() {
+        return getNetworkInterfaceMac("teql0");
+    }
+
+    public static String getSit0Mac() {
+        return getNetworkInterfaceMac("sit0");
+    }
+
+    public static String getIp6Vti0Mac() {
+        return getNetworkInterfaceMac("ip6_vti0");
+    }
+
+    /**
+     * 获取有线网卡模块的mac地址
+     */
+    public static String getEthernetMac() {
+        return getNetworkInterfaceMac("eth0");
+    }
+
+    /**
+     * 获取指定网卡mac地址
+     */
+    private static String getNetworkInterfaceMac(String networkInterfaceName) {
+        try {
+            Enumeration<NetworkInterface> networkInterfaces = NetworkInterface.getNetworkInterfaces();
+            while (networkInterfaces.hasMoreElements()) {
+                NetworkInterface ni = networkInterfaces.nextElement();
+                if (networkInterfaceName.equals(ni.getName())) {
+                    return getMacString(getMacBytes(ni));
+                }
+            }
+        } catch (SocketException e) {
+            e.printStackTrace();
+        }
+        return null;
+    }
+
+    private static byte[] getMacBytes(NetworkInterface ni) {
+        byte[] mac = null;
+        try {
+            Enumeration<InetAddress> address = ni.getInetAddresses();
+            while (address.hasMoreElements()) {
+                InetAddress ip = address.nextElement();
+                if (ip.isAnyLocalAddress() || !(ip instanceof Inet4Address) || ip.isLoopbackAddress())
+                    continue;
+                if (ip.isSiteLocalAddress())
+                    mac = ni.getHardwareAddress();
+                else if (!ip.isLinkLocalAddress()) {
+                    mac = ni.getHardwareAddress();
+                    break;
+                }
+            }
+        } catch (SocketException e) {
+            e.printStackTrace();
+        }
+        return mac;
+    }
+
+    private static String getMacString(byte[] mac) {
+        if (mac != null) {
+            StringBuffer sb = new StringBuffer();
+            for (int i = 0; i < mac.length; i++) {
+                sb.append(parseByte(mac[i]));
+            }
+            return sb.substring(0, sb.length() - 1);
+        }
+        return null;
+    }
+
+    private static String parseByte(byte b) {
+        String s = "00" + Integer.toHexString(b) + "_";
+        return s.substring(s.length() - 3);
+    }
+}
+

# 二、Demo

# 1、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    tools:context=".MainActivity">
+
+    <TextView
+        android:id="@+id/tv_mac"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center" />
+
+    <TextView
+        android:id="@+id/tv_wifi_mac"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center" />
+
+    <TextView
+        android:id="@+id/tv_ethernet_mac"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center" />
+
+</LinearLayout>
+

# 2、MainActivity.java

public class MainActivity extends AppCompatActivity {
+
+    private TextView mTvMac;
+    private TextView mTvWifiMac;
+    private TextView mTvEthernetMac;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_main);
+        mTvMac = findViewById(R.id.tv_mac);
+        mTvWifiMac = findViewById(R.id.tv_wifi_mac);
+        mTvEthernetMac = findViewById(R.id.tv_ethernet_mac);
+
+        mTvMac.setText("当前上网网卡Mac：" + MacUtil.getMac());
+        mTvWifiMac.setText("wifi网卡Mac：" + MacUtil.getWifiMac());
+        mTvEthernetMac.setText("ethernet网卡Mac：" + MacUtil.getEthernetMac());
+    }
+}
+

# 3、效果

+ +
+
#AndroidTV#机顶盒#Mac
Android脚本 - 不一样的Gradle多渠道配置总结2
AndroidTV - 解决EditText焦点无法转移问题

+ ← + AndroidTV - 解决EditText焦点无法转移问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0d47a0/index.html b/pages/0d47a0/index.html new file mode 100644 index 000000000..39ae322cb --- /dev/null +++ b/pages/0d47a0/index.html @@ -0,0 +1,233 @@ + + + + + + LayoutInflater源码分析与应用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-04-23
目录

LayoutInflater源码分析与应用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

LayoutInflater直译为 布局填充器，它是用来创建布局视图的，常用inflate()将一个xml布局文件转换成一个View，下面先介绍下获取LayoutInflater的三种方式 和 创建View的两种方式。

# 1、获取LayoutInflater的三种方式

  1. LayoutInflater inflater = getLayoutInflater(); //调用Activity的getLayoutInflater()
  2. LayoutInflater inflater =(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  3. LayoutInflater inflater = LayoutInflater.from(context);

其实不管是哪种方式，最后都是通过方式2获取到LayoutInflater的，如：

# 2、创建View的两种方式

  1. View.inflate();
  2. LayoutInflater.from(context).inflate();

# 二、源码分析

上面两种创建View的方式都是开发中常用的，那两者有什么关系吗？下面对View.inflate()进行方法调用分析：

# 1、View.inflate()最终调用方法探究

# 1）按住Ctrl+鼠标左键查看View.inflate()方法

可以看到View.inflate()就是调用了LayoutInflater.from(context).inflate()。

好，到这一步要明确，不管我们研究哪种方式，实际上都研究方式2，即LayoutInflater.from(context).inflate()。

# 2）按住Ctrl+鼠标左键查看LayoutInflater.from(context).inflate(resource, root)方法。

嗯？LayoutInflater.from(context).inflate(resource, root)再调用了自己的重载inflate(resource, root, root != null)。

# 3）按住Ctrl+鼠标左键查看LayoutInflater.from(context).inflate(resource, root).inflate(resource, root, root != null)方法。

嗯？？LayoutInflater.from(context).inflate(resource, root).inflate(resource, root, root != null)再再调用了自己的重载inflate(parser, root, attachToRoot)。

# 4）按住Ctrl+鼠标左键查看LayoutInflater.from(context).inflate(resource, root).inflate(resource, root, root != null).inflate(parser, root, attachToRoot)方法。

这下总算是到头了，不过代码太长，这里就截了一半的图（这不是重点）。

好，重点来了，到这步我们可以明白一点，View.inflate()整个方法调用链如下：

View.inflate() = 
+	LayoutInflater.from(context)
+		.inflate(resource, root)
+		.inflate(resource, root, root != null)
+		.inflate(parser, root, attachToRoot)
+

# 2、LayoutInflater的inflate(parser, root, attachToRoot)做了什么？

由于代码太长，不方便截图，下面贴出代码中的重点代码：

public View inflate(XmlPullParser parser, @Nullable ViewGroup root, boolean attachToRoot) {
+    synchronized (mConstructorArgs) {
+
+				...
+				省略代码~
+				...
+
+                final View temp = createViewFromTag(root, name, inflaterContext, attrs);
+
+                ViewGroup.LayoutParams params = null;
+
+                if (root != null) {
+                    if (DEBUG) {
+                        System.out.println("Creating params from root: " +
+                                root);
+                    }
+                    // Create layout params that match root, if supplied
+                    params = root.generateLayoutParams(attrs);
+                    if (!attachToRoot) {
+                        // Set the layout params for temp if we are not
+                        // attaching. (If we are, we use addView, below)
+                        temp.setLayoutParams(params);
+                    }
+                }
+
+				...
+				省略代码~
+				...
+
+                // We are supposed to attach all the views we found (int temp)
+                // to root. Do that now.
+                if (root != null && attachToRoot) {
+                    root.addView(temp, params);
+                }
+
+                // Decide whether to return the root that was passed in or the
+                // top view found in xml.
+                if (root == null || !attachToRoot) {
+                    result = temp;
+                }
+
+				...
+				省略代码~
+				...
+
+        return result;
+    }
+}
+

该inflate方法中有以下四步操作：

  1. 通过使用XmlPullParser parser将xml布局文件转换成视图temp。
  2. 判断ViewGroup root对象是否为null，来决定要不要给temp设置LayoutParams。
  3. 判断boolean attachToRoot是否为true，来决定是否要把temp顺便加到ViewGroup root中。
  4. 最后返回视图temp。

到这里就把创建视图的流程分析完了，接下来是比较 View.inflate()和 LayoutInflater.from(context).inflate()的区别。

# 3、View.inflate()和 LayoutInflater.from(context).inflate()的区别

# 1）View.inflate()第三个参数的解析：

开发中常常会对第三个参数（ViewGroup root）传入null吧，通过上面对最终inflate方法的分析，可以知道，如果ViewGroup root取值为null，则得到的视图temp不会被设置LayoutParams。下面做个试验：

View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, null);
+ViewGroup.LayoutParams params = itemView.getLayoutParams();
+Log.e("CSDN_LQR", "params == null : " + (params == null));
+

打印结果如下：

同理，将第三个参数传入一个确实存在的ViewGroup时，结果就是视图temp能获取到LayoutParams，有兴趣的可以自己试试。

# 2）LayoutInflater.from(context).inflate()的优势：

*下面的场景分析将体现出LayoutInflater.from(context).inflate()的灵活性。

如果是在RecyclerView或ListView中使用View.inflate()创建布局视图，又想对创建出来的布局视图进行高度等参数设置时，会有什么瓶颈呢？

下面贴出我之前写过的一段用于瀑布流适配器的代码：

public class MyStaggeredAdapter extends RecyclerView.Adapter<MyStaggeredAdapter.MyViewHolder> {
+
+    private List<String> mData;
+    private Random mRandom = new Random();
+
+    public MyStaggeredAdapter(List<String> data) {
+        mData = data;
+    }
+
+    @Override
+    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+		//这里使用的是安卓自带的文本控件布局
+        View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, null);
+        return new MyViewHolder(itemView);
+    }
+
+    @Override
+    public void onBindViewHolder(MyViewHolder holder, int position) {
+		//为实现瀑布流效果，需要对条目高度进行设置（让各个条目的高度不同）
+        ViewGroup.LayoutParams params = holder.mTv.getLayoutParams();
+    	params.height = mRandom.nextInt(200) + 200;
+        holder.mTv.setLayoutParams(params);
+        holder.mTv.setBackgroundColor(Color.argb(255, 180 + mRandom.nextInt(60) + 30, 180 + mRandom.nextInt(60) + 30, 180 + mRandom.nextInt(60) + 30));
+        holder.mTv.setText(mData.get(position));
+    }
+
+    @Override
+    public int getItemCount() {
+        return mData.size();
+    }
+
+    class MyViewHolder extends RecyclerView.ViewHolder {
+
+        TextView mTv;
+
+        public MyViewHolder(View itemView) {
+            super(itemView);
+            mTv = (TextView) itemView.findViewById(android.R.id.text1);
+        }
+    }
+
+}
+

经过上面对View.inflate()的第三个参数解析之后，这代码的问题一眼就能看出来了吧，没错，就是ViewGroup.LayoutParams params = holder.mTv.getLayoutParams();这行代码获取到的LayoutParams为空，不信？走一个。

接下来理所当然的要让得到的LayoutParams不为空啦，所以将onCreateViewHolder()的代码修改如下：

@Override
+public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+	//这里使用的是安卓自带的文本控件布局
+    View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, parent);
+    return new MyViewHolder(itemView);
+}
+

传入的ViewGroup parent不为null，所以肯定获取的LayoutParams不为空，但是又有一个问题，看报错。

为什么会报这样的错呢？回看最终inflate()的四个步骤：

  1. 通过使用XmlPullParser parser将xml布局文件转换成视图temp。
  2. 判断ViewGroup root对象是否为null，来决定要不要给temp设置LayoutParams。
  3. 判断boolean attachToRoot是否为true，来决定是否要把temp顺便加到ViewGroup root中。
  4. 最后返回视图temp。

步骤2让条目获取的LayoutParams不为空没错，但是步骤3出问题了，当使用View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, parent)传入parent后，boolean attachToRoot的取值就是为true，所以创建出来的条目会顺便添加到ViewGroup中（这里的ViewGroup就是RecyclerView），而RecyclerView本身就会自动将条目添加到自身，这样就添加了两次，故报错。那为什么attachToRoot的取值是true呢？再看View.inflate()的整个方法调用链：

View.inflate() = 
+	LayoutInflater.from(context)
+		.inflate(resource, root)
+		.inflate(resource, root, root != null)
+		.inflate(parser, root, attachToRoot)
+

boolean attachToRoot的取值取决于root（也就是parent）是否为空，这就是View.inflate()的瓶颈，它没法灵活的指定boolean attachToRoot的取值。这里我就是只是想让创建出来的视图能得到LayoutParams，但不添加到ViewGroup中，这样的要求可以通过LayoutInflater.from(context).inflate()来实现。所以下面将onCreateViewHolder()的代码修改如下：

@Override
+public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+    View itemView = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1,parent,false);
+    ViewGroup.LayoutParams params = itemView.getLayoutParams();
+    Log.e("CSDN_LQR", "params == null : " + (params == null));
+    return new MyViewHolder(itemView);
+}
+

代码中LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1,parent,false)传入了parent（即ViewGroup不为null），所以创建出来的视图可以得到LayoutParams，同时又指定attachToRoot的取值为false，即不添加到ViewGroup中。到这里，上面重覆添加子控件的问题就解决了，总结一下吧：

  • View.inflate()第三个参数若不为null，则创建出来的视图一定能获得LayoutParams，反之，不一定。（下面会解释）
  • LayoutInflater.from(context).inflate()可以灵活的指定传入的ViewGroup是否为空来决定创建出来的视图能否获得LayoutParams，同时又可以指定attachToRoot的取值来决定创建出来的视图是否要添加到ViewGroup中。

# 三、小细节

*上面已经将LayoutInflater的源码分析完毕，现在还有一个小问题，其实跟本文主题没多大关系，当作拓展来看吧。

前面说到，View.inflate()第三个参数若不为null，则创建出来的视图一定能获得LayoutParams，反之，不一定。这话怎么理解？

也就是说，即使View.inflate()第三个参数为null，创建出来的视图也有可能获得LayoutParams咯？是的，说到底，这个LayoutParams的有无，实际取决于条目本身是否有父控件，且看上面用到的simple_list_item_1布局：

发现了吧，就一个TextView，没有父控件，那如果我给它加个父控件，同时使用最开始的方式也能顺利得到LayoutParams呢？代码如下：

@Override
+public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+	View itemView = View.inflate(parent.getContext(), R.layout.item_layout, null);
+    return new MyViewHolder(itemView);
+}
+
+@Override
+public void onBindViewHolder(MyViewHolder holder, int position) {
+    ViewGroup.LayoutParams params = holder.mTv.getLayoutParams();
+    Log.e("CSDN_LQR", "params == null : " + (params == null));
+    ...
+	控件设置
+	...
+}
+

item_layout的布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <TextView
+        android:id="@android:id/text1"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:minHeight="?android:attr/listPreferredItemHeightSmall"
+        android:textAppearance="?android:attr/textAppearanceListItemSmall"/>
+</LinearLayout>
+

运行，果然可以获得LayoutParams，打印结果如下：

# 四、最后

本人也是头次写类分析型的文章，如描述有误，请不吝赐教，同时还请各位看客多担待，指出后本人会尽快修改，谢谢。

+ +
+
#源码分析#LayoutInflater
Android - 自动系统签名
ArrayList源码分析

+ ← + ArrayList源码分析→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0d4d47/index.html b/pages/0d4d47/index.html new file mode 100644 index 000000000..d0e8ec759 --- /dev/null +++ b/pages/0d4d47/index.html @@ -0,0 +1,131 @@ + + + + + + iOS - Cocoapods-创建第三方框架 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-06
目录

iOS - Cocoapods-创建第三方框架

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、上传项目到github

将框架中的主要文件放入到一个指定文件夹中，比如叫Classes或者Lib都可以 +目录结构

  • 打开终端，cd到框架目录
cd /Users/lxf/xxxx/LXFPhotoHelper 
+
  • 初始化仓库
git init
+
  • 将当前目录添加到缓存区
git add .
+
  • 提交到本地仓库
git commit -m '描述'
+
  • 添加远程仓库地址
git remote add origin https://github.com/LinXunFeng/xxx.git
+
  • 提交到远程仓库
git push origin master
+

如果出现如下提示

fatal: unable to access 'https://github.com/xxx/xxx.git/': The requested URL returned error: 403
+

原因是本地缓存了用户名和密码 +编辑.git目录下的config文件

vi .git/config
+

找到url那一行，在github.com前加上用户名后保存，再重新执行推送操作

url = https://LinXunFeng@github.com/LinXunFeng/xxx.git
+
  • 打标签
// 具体说明可以执行`git tag --help`后查看
+// git tag -a '版本号' -m 'tag描述'
+// 注意一下，这里打的标签只是在本地
+git tag '0.0.1'
+
  • 推着所有标签至远程仓库
// 只推着指定版本
+// git push origin 版本号 
+git push --tags
+

# 二、创建并修改podspec文件

  • 创建Spec文件
// 名称一般与工程名称保持一致
+pod spec create 框架名称
+

podspec文件

  • 修改Spec文件
  s.name         = "LXFPhotoHelper（仓库名称）"
+  s.version      = "0.0.1（版本号，这里跟下面s.source中的tag有关）"
+  s.summary      = "对你自己仓库的简单描述，不要写太多字"
+  s.description  = "这个是详细描述，这里需要注意的是，这里文字的长度需要比  
+  s.summary的要长，不然会出现警告"
+  s.homepage     = "仓库首页地址，如https://github.com/LinXunFeng/LXFPhotoHelper"
+  s.license      = "MIT"
+  s.author       = { "LinXunFeng" => "598600855@qq.com" }
+  # source存放的地址是代码的真正地址
+  s.source       = { :git => "仓库对应的git地址，如https://github.com/LinXunFeng/LXFPhotoHelper.git", :tag => "#{s.version}" }
+  # pod install时真正下载下来的文件路径，这里指定的是你仓库下的Classes目录中的所有.h和.m文件（填写的是相对地址）
+  # ** 通配目录
+  s.source_files  = "Classes", "Classes/**/*.{h,m}"
+
+  # s.library = "sqlite3" # 框架依赖系统的sqlite3
+

也可以上官网的手册【Podspec Syntax Reference (opens new window)】上查看

这里需要我们注意的是s.version= "0.0.1"，这里的版本号要与刚刚打的tag一致

# 三、注册trunk

// --verbose 打印详情信息
+// pod trunk register 邮箱 '你的名称' --verbose
+pod trunk register 598600855@qq.com 'LinXunFeng' --verbose
+

然后去验证邮箱

验证成功

验证成功后会提示我们回到终端，并敲入pod trunk push 名称.podspec

# 四、上传Spec

执行pod trunk push后会有一个审核的过程，如果提示没有通过，有ERROR就修改好后重新push，如果只是WARN可以选择在pod trunk push后面加上--allow-warnings来忽略它们

pod trunk push LXFPhotoHelper.podspec --allow-warnings
+

如果出现如下信息，则说明你的框架名字已被占用，得重新改个名字～ +所以，在创建你自己的cocoapods仓库时最好是到cocoapods.org (opens new window)上先查一下有没有相同名字的

[!] You (xxx@qq.com) are not allowed to push new versions for this pod. The owners of this pod are yyy@qq.com.
+

上传成功后会自动帮我们更新本地仓库，如果无法搜索到自己的框架，可以先删掉本地的索引文件后再搜索一次

rm ~/Library/Caches/CocoaPods/search_index.json
+

当使用pod search 命令可以搜索自己的框架时, 那么就意味着审核通过了

+ +
+
#Git#GitHub#Cocoapods
iOS - 揭露Block的内部实现原理
iOS-组件化开发（一）：远程私有库的基本使用

+ ← + iOS-组件化开发（一）：远程私有库的基本使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0e461d/index.html b/pages/0e461d/index.html new file mode 100644 index 000000000..376027b82 --- /dev/null +++ b/pages/0e461d/index.html @@ -0,0 +1,143 @@ + + + + + + 这可能是目前最方便的网站中英文切换（理论支持所有语言） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-09-19
目录

这可能是目前最方便的网站中英文切换（理论支持所有语言）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

公司最近做的一个官网项目，要求把页面成国际化，实现中英文切换，为此，我在网上找了一些中英文切换的解决方案，大概为如下两种：

# 1、使用谷歌整站翻译Api

# 2、自己编写中英文对照表，用js控制

由于公司的要求是把整站进行翻译，且官网中存在新闻，即存在大量不可预料的数据，同时考虑到富文本数据不好翻译。所以，总的来说，第一种方案最为合适，不过可惜，需要梯子，没办法，只能别寻出路。好在微软也有一个类似谷歌整站翻译的Api：

The Translator Web Widget API (opens new window)

其实，微软提供的Demo实现上也很简单，分如下几步：

  1. 引入The Translator Web Widget API
  2. 监听dom加载完毕，调用Microsoft.Translator.Widget.Translate()整站翻译。

# 二、实现

# 1、封装language.js

根据上面的对微软提供的Demo的研究，我们对此进一步封装，因为中英文切换一般都是一次点击后，往后的统一每个页面都需要或不需要翻译，这就需要记录一个状态值，这里选用html5提供的storage来储存这个状态，并向外提供一个修改该状态并刷新页面的方法。故，该js（language.js）编写如下：

$(function(){ 
+      // do something 
+  var script=document.createElement("script");  
+  script.type="text/javascript";  
+  script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";  
+  document.getElementsByTagName('head')[0].appendChild(script);  
+  
+  
+  var value = sessionStorage.getItem("language");
+  document.onreadystatechange = function () {
+    if (document.readyState == 'complete') {
+      if(value==="1"){
+        Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
+      }
+    }
+  }
+  function onProgress(value) {
+  }
+  function onError(error) {
+  }
+  function onComplete() {
+    $("#WidgetFloaterPanels").hide();
+  }
+  function onRestoreOriginal() { 
+  }
+});
+
+function translate(){
+  var value = sessionStorage.getItem("language");
+  if(value==="1"){
+    sessionStorage.setItem("language", "0"); 
+  }else{
+    sessionStorage.setItem("language", "1");
+  }
+  window.location.reload();//刷新当前页面.
+}
+

# 2、编写测试页面

编写一个测试页面（test.html）。要使用上面的language.js，必须进行以下三步：

  1. 设置页面编码为utf-8
  2. 引入jquery和language.js
  3. 设置按钮的点击事件，去调用中英文切换函数：translate();
<!DOCTYPE html>
+<head>
+    <title>Microsoft Widget API Sample</title>
+    <meta charset="UTF-8"/>
+    <script type="text/javascript" src="jquery-1.11.3.js"></script>
+    <script type="text/javascript" src="language.js"></script>
+</head>
+<body>
+  <button id="change">中英文切换</button
+    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
+    <div style="text-align: center" >
+    你好
+    </div>
+</body>
+<script type="text/javascript">
+  $("#change").click(function(){
+    translate();
+  })
+</script>
+</html>
+

试试看效果吧，反正我觉得还行~

# 三、其他

上面编写的language.js中写死了中文转英文（zh-CHS转en），如果项目需要其他语言的转换，对language.js进行自定义扩展即可。

+ +
+
#language#中英文切换
uniapp - 腾讯云点播小程序插件

uniapp - 腾讯云点播小程序插件→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0ee6a4/index.html b/pages/0ee6a4/index.html new file mode 100644 index 000000000..c247f7bf1 --- /dev/null +++ b/pages/0ee6a4/index.html @@ -0,0 +1,167 @@ + + + + + + Flutter - 解决Connection closed before full header was received | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-06-04
目录

Flutter - 解决Connection closed before full header was received

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

我们的 App 是集成了 Sentry 进行错误跟踪和性能监控，在最近几个月里经常看到如下错误

ClientException: Connection closed before full header was received, uri=https://xxx.png
+

加载图片的时候报错了，但是尝试了很多次，自己始终无法复现出来~

# 二、摸索

后面进行搜索找到了 2019 年 12 月的一个 issue

  • https://github.com/flutter/flutter/issues/41573

不太一样的是人家是请求接口的时候出现的报错。

提出 issue 的作者当时是通过 Method Channel 的方式由原生端去请求来解决这个问题，即避开了使用 http 这个包。

有人说这种情况，改用 dio 即可~

也有人说这种情况，加个延迟就可以解决~

但我们这种加载图片场景哪有机会加延迟呢，当然用这种方式也不靠谱~

时隔两年后（2021 年 12 月），根据 issue 的种种描述，有人确定了问题，并提了一个 Dart 的 issue

  • https://github.com/dart-lang/sdk/issues/47841

大致上就是说 Dart 端拒绝了服务器发起的 TLS 重协商导致。

重协商是指在已经协商好的SSL/TLS TCP连接上重新协商, 用以更换算法、更换数字证书、重新验证对方身份、更新共享密钥等。 --摘自《SSL/TLS攻击介绍--重协商漏洞攻击 (opens new window)》

我想 Dart 不允许 TLS 重协商应该也是出于安全考虑吧~

# 三、解决

提 issue 的作者也为此，于 2022 年 2 月份提了 PR，给 SecurityContext 添加了 allowLegacyUnsafeRenegotiation 属性以允许重协商，在同年 4 月份得到合并了，但依旧出于安全考虑，默认为关闭状态，是否开启由开发者自己决定。

附上该属性的相关说明：https://api.flutter.dev/flutter/dart-io/SecurityContext/allowLegacyUnsafeRenegotiation.html

以及相关修复：Allow sockets to enable TLS renegotiation. · dart-lang/sdk@c286b76 (github.com) (opens new window)

注：该属性从 Dart 2.17.0 开始存在，对应的 Flutter 版本是 3.0.0。

加了 allowLegacyUnsafeRenegotiation 属性之后，我们可以按如下代码去使用

void main() async {
+  final context = SecurityContext.defaultContext;
+  context.allowLegacyUnsafeRenegotiation = true;
+  final httpClient = HttpClient(context: context);
+  final client = IOClient(httpClient);
+
+  await client.get(Uri.parse('https://your_uri.net'));
+}
+

代码取自：https://stackoverflow.com/a/73287131/8577739

# 四、调整 CachedNetworkImage

在我们的项目中，所使用的图片加载库为 cached_network_image，接下来我们就一起来看看如何调整以开启 TLS 重协商功能。

在 CachedNetworkImage 类中有一个 cacheManager 属性，如果我们不设置的话则后续默认使用的是 DefaultCacheManager 实例

class DefaultCacheManager extends CacheManager with ImageCacheManager {
+  static const key = 'libCachedImageData';
+
+  static final DefaultCacheManager _instance = DefaultCacheManager._();
+
+  factory DefaultCacheManager() {
+    return _instance;
+  }
+
+  DefaultCacheManager._() : super(Config(key));
+}
+

可以看到其继承于 CacheManager

class CacheManager implements BaseCacheManager {
+  ....
+  CacheManager(Config config)
+      : _config = config,
+        _store = CacheStore(config) {
+    _webHelper = WebHelper(_store, config.fileService);
+  }
+  ...
+}
+

CacheManager 接收一个 Config 对象

abstract class Config {
+  ...
+  /// [fileService] defines where files are fetched, for example online.
+  factory Config(
+    String cacheKey, {
+    Duration stalePeriod,
+    int maxNrOfCacheObjects,
+    CacheInfoRepository repo,
+    FileSystem fileSystem,
+    FileService fileService,
+  }) = impl.Config;
+
+  ...
+
+  FileService get fileService;
+}
+

这里我们就可以利用 fileService 来指定 httpClient，以此帮我们解决上述报错问题

static HttpClient httpClient() {
+  final context = SecurityContext.defaultContext;
+  context.allowLegacyUnsafeRenegotiation = true;
+  return HttpClient(context: context);
+}
+
+// 自定义 CacheManager
+class _LXFCachedNetworkImageManager extends CacheManager
+    with ImageCacheManager {
+  // 为了不影响之前的缓存，保持使用相同的 key
+  static String get key => DefaultCacheManager.key;
+
+  static final _LXFCachedNetworkImageManager _instance =
+      _LXFCachedNetworkImageManager._();
+
+  factory _LXFCachedNetworkImageManager() {
+    return _instance;
+  }
+  _LXFCachedNetworkImageManager._()
+      : super(
+          Config(
+            key,
+            // 指定 httpClient
+            fileService: HttpFileService(
+              httpClient: IOClient(httpClient()),
+            ),
+          ),
+        );
+}
+

使用时配置上 cacheManager 即可，如下所示

CachedNetworkImage(
+  imageUrl: '', 
+  cacheManager: _LXFCachedNetworkImageManager(),
+);
+

但每个地方都这样写实在是太不优雅了，所以大家自行进行封装吧~

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 轻松搞定屏幕旋转功能 😎
Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻

+ ← + Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0f2500/index.html b/pages/0f2500/index.html new file mode 100644 index 000000000..8d4b3f30b --- /dev/null +++ b/pages/0f2500/index.html @@ -0,0 +1,352 @@ + + + + + + MaterialDesign之对TabLayout的探索 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-05-23
目录

MaterialDesign之对TabLayout的探索

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

TabLayout是Android Support Design库的新控件，可以用来实现开源框架ViewPageIndicator的效果（在MaterialDesign没出来之前基本都用这玩意儿吧~），TabLayout相比它使用上更加简单，且不一定要跟ViewPager一起使用，毕竟谷歌做出来的，稳定性更是不用说啦，此外，本文还会仔细列出本人对该控件的探索过程，从而实现一些控件本身没法实现的自定义效果，下面来看看它都有哪些操作吧。

# 二、使用

# 1、创建Tab及Tab的点击事件

要使用TabLayout，一般会先在布局文件中放好，如：

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              xmlns:app="http://schemas.android.com/apk/res-auto"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <android.support.design.widget.TabLayout
+        android:id="@+id/tabLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
+</LinearLayout>
+

然后在Activity中找到它，对它进行设置，如果不跟ViewPager一起使用的话，可以对TabLayout手动添加多个tab，并设置其点击事件，如：

@Override
+protected void onCreate(@Nullable Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_tab_layout);
+    mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
+	// 添加多个tab
+	for (int i = 0; i < title.length; i++) {
+        TabLayout.Tab tab = mTabLayout.newTab();
+        tab.setText(title[i]);
+		// tab.setIcon(R.mipmap.ic_launcher);//icon会显示在文字上面
+        mTabLayout.addTab(tab);
+    }
+	// 给tab设置点击事件
+    mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
+        @Override
+        public void onTabSelected(TabLayout.Tab tab) {
+            Toast.makeText(getApplicationContext(), title[tab.getPosition()], Toast.LENGTH_SHORT).show();
+        }
+
+        @Override
+        public void onTabUnselected(TabLayout.Tab tab) {
+
+        }
+
+        @Override
+        public void onTabReselected(TabLayout.Tab tab) {
+
+        }
+    });
+}
+

这里比较有意思的是Tab的创建需要调用TabLayout对象的newTab()方法，而不是直接new出一个Tab。Tab除了可以设置文字外，还能设置Icon，甚至可以自定义View，分别调用的是setIcon()和setCustomView()，有兴趣的可以试试看，上面代码效果如下：

手动创建Tab，并设置点击事件

# 2、自定义TabLayout样式

这个TabLayout还是挺好看的，但开发中难免会要定制TabLayout的样式，如设置默认或选中文字的颜色和大小等，还好，TabLayout尽可能多的提供了这些自定义属性，可以让开发者很方便的修改样式，下面来看看都有哪些控件属性可以设置：

<!--设置Tab指示器-->
+app:tabIndicatorColor=""
+app:tabIndicatorHeight=""
+
+<!--设置Tab位置及显示模式-->
+app:tabGravity=""
+app:tabMode=""
+
+<!--设置Tab文字样式-->
+app:tabSelectedTextColor=""
+app:tabTextAppearance=""
+app:tabTextColor=""
+
+<!--设置Tab的宽度、背景、内间距-->
+app:tabMaxWidth=""
+app:tabMinWidth=""
+app:tabBackground=""
+app:tabPadding=""
+

# 1）设置Tab指示器

TabLayout的指示器默认颜色是color.xml中的colorAccent，通过TabLayout提供的自定义属性，可以设置指示器的高度和颜色，如果不想显示指示器（Indicator），可以将其高度设置为0dp或设置其颜色为透明，这里为演示，我就把显示指示器（Indicator）的高度提高，颜色改为刺眼的红眼，如下：

<android.support.design.widget.TabLayout
+    android:id="@+id/tabLayout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:tabIndicatorColor="@color/red"
+    app:tabIndicatorHeight="8dp"/>
+

设置Tab指示器样式

# 2）设置Tab位置及显示模式

TabLayout的显示模式（tabMode）默认是固定不可滚动（fixed），位置（tabGravity）默认填满（fill）整个TabLayout，我们先保持app:tabMode="fixed"，把tabGravity的值换成fill和center对比下，为了方便对比，我把背景也设置了。

<android.support.design.widget.TabLayout
+    android:id="@+id/tabLayout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:tabBackground="@color/colorPrimaryDark"
+    app:tabGravity="fill" // 再换成center
+    app:tabMode="fixed"/>
+

app:tabGravity="fill"

app:tabGravity="center"

当tab比较多的时候，一个屏幕宽度容纳不下，这时候就需要让TabLayout可以横向滚动了，只需要修改app:tabMode="scrollable"即可。注意，当app:tabMode="scrollable"时，app:tabGravity=""不管取什么值都不会生效。

<android.support.design.widget.TabLayout
+    android:id="@+id/tabLayout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:tabBackground="@color/colorPrimaryDark"
+    app:tabGravity="center"
+    app:tabMode="scrollable"/>
+

app:tabMode="scrollable"

# 3）设置Tab文字样式

上面的效果不好看，我想让它默认文字颜色为灰色，选中时文字为白色，文字大小为16sp，但TabLayout没有提供直接设置文字大小的属性，这时候就需要用到app:tabTextAppearance=""了。操作如下：

# 在Style.xml中声明文字样式
<style name="TabLayout.TabText" parent="TextAppearance.Design.Tab">
+    <item name="android:textSize">16sp</item>
+    <item name="textAllCaps">false</item>
+</style>
+

其中除了可以设置字体大小外，还可以设置英文是否都全部大写显示。textAllCaps的默认值为true，即英文全部大写。

# 在布局文件中设置TabLayout的文字相关属性
<android.support.design.widget.TabLayout
+    android:id="@+id/tabLayout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:tabBackground="@color/colorPrimaryDark"
+    app:tabGravity="center"
+    app:tabMode="scrollable"
+	...
+    app:tabSelectedTextColor="@android:color/white"
+    app:tabTextAppearance="@style/TabLayout.TabText"
+    app:tabTextColor="@android:color/darker_gray"/>
+

好了，看看效果如何：

设置Tab文字样式

好了，关于Tab的宽度、内间距等设置比较简单，自己需要的时候试试吧，这里就不演示了。

# 3、与ViewPager结合

上面通过对TabLayout的单独使用学习了TabLayout的样式自定义、创建Tab及设置Tab的点击事件等，可以说常用的也就那些了，下面来看看TabLayout如何与ViewPager的结合使用。这种需求也是很常见的，界面顶部有一个标签栏，中下部是与标签对应的内容，可以左右滑动，同时标签也跟随其切换，相反的，在切换标签时，内容部分也会跟着变化，不太明白的可以参考下“今日头条”APP的首页界面。这样的效果就可以用TabLayout+ViewPager+Fragment来实现。

# 1）先在布局文件中放好TabLayout和ViewPager：

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              xmlns:app="http://schemas.android.com/apk/res-auto"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <android.support.design.widget.TabLayout
+        android:id="@+id/tabLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:tabBackground="@color/colorPrimaryDark"
+        app:tabMode="scrollable"
+        app:tabSelectedTextColor="@android:color/white"
+        app:tabTextColor="@android:color/darker_gray"/>
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/viewPager"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</LinearLayout>
+

# 2）在代码中设置TabLayout与ViewPager相互关联：

@Override
+protected void onCreate(@Nullable Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_tab_layout);
+    mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
+    mViewPager = (ViewPager) findViewById(R.id.viewPager);
+    MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
+    mViewPager.setAdapter(adapter);
+
+    // 适配器必须重写getPageTitle()方法 
+    mTabLayout.setTabsFromPagerAdapter(adapter);
+    // 监听TabLayout的标签选择，当标签选中时ViewPager切换
+    mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
+    // 监听ViewPager的页面切换，当页面切换时TabLayout的标签跟着切换
+    mViewPager.setOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
+}
+

这三句代码不难理解，就字面上的意思，但是这三句代码都已经过时，因为要关联TabLayout与ViewPager就得写三句代码似乎是麻烦了一点点（其实我觉得还好吧），所以TabLayout提供了可以通过一句代码搞定两者关联的方法：setupWithViewPager()，因此，上面的代码可以简化如下：

@Override
+protected void onCreate(@Nullable Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_tab_layout);
+    mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
+    mViewPager = (ViewPager) findViewById(R.id.viewPager);
+    MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager());
+    mViewPager.setAdapter(adapter);
+
+	// 关联TabLayout与ViewPager，且适配器必须重写getPageTitle()方法 
+    mTabLayout.setupWithViewPager(mViewPager);
+}
+

来看下效果：

TabLayout与ViewPager相互关联

关联TabLayout与ViewPager相当简单，只要注意ViewPager适配器需重写getPageTitle()方法，这里顺便贴出Demo中适配器的代码：

class MyViewPagerAdapter extends FragmentPagerAdapter {
+
+    private final String[] title = new String[]{
+            "推荐", "热点", "视频", "深圳", "通信",
+            "互联网", "问答", "图片", "电影",
+            "网络安全", "软件"};
+
+    public MyViewPagerAdapter(FragmentManager fm) {
+        super(fm);
+    }
+
+    @Override
+    public Fragment getItem(int i) {
+        Fragment fragment = new TextFragment();
+        Bundle bundle = new Bundle();
+        bundle.putString("title", title[i]);
+        fragment.setArguments(bundle);
+        return fragment;
+    }
+
+    @Override
+    public int getCount() {
+        return title.length;
+    }
+
+    @Override
+    public CharSequence getPageTitle(int position) {
+        return title[position];
+    }
+}	
+

# 三、拓展

上面部分是TabLayout的正规使用说明，而这部分是对TabLayout的进一步探索，同时将列出本人在这个过程中的探索思路，可以说是对TabLayout的进一步自定义吧。废话不多说，下面就直接开车了。

假如，你手中的APP设计稿中有如下的三个需求那该怎么办：

  1. 为TabLayout添加分割线，且分割线距离上下存在间距。
  1. 选中时tab字体变大，未选中时tab字体变小。
  2. 指示器（Indicator）不要充满整个标签（Tab）

简单的说就是为TabLayout添加分割线、设置不同状态下的字体大小和指示器的“长度”，这些在TabLayout中并没有提供直接的修改方法，你可能会想，那我们对TabLayout进行源码分析，然后通过反射等手段拿到其中的控件来设置？不！有时候解决问题不要循规蹈矩，应该适当转变下思路，或许解决问题的方法并不需要去看源码那么困难（如果你是大神，就当我没说），下面看我操作：

# 1、分析TabLayout的结构

将APP运行起来，然后回到AS，在菜单栏中依次找到Tools-->Android-->Android Device Monitor，用过Eclipse开发的Android程序员应该都知道这久违的老伙计———Android 设备监测仪。

Android 设备监测仪

选中正在运行的APP，点击Dump View Hierarchy for UI Automator。

Dump View Hierarchy for UI Automator

可能会卡一下，然后它会自动把当前界面的控件结构展示出来。

界面控件结构图

从这个结构上我们可以知道TabLayout（就是HorizontalScrollView）并不是直接就包裹这些Tab的，而是包裹了一个LinearLayout，然后这些Tab放在这个LinearLayout中，此外，可以发现Tab里包含了一个TextView，到这里对前面2个需求是不是有点想法了呢？

# 2、为TabLayout添加分割线

LinearLayout自带就有设置分割线的方法，我们可以通过它来添加分割线，也没什么好说的，直接上代码：

mLinearLayout = (LinearLayout) mTabLayout.getChildAt(0);
+// 在所有子控件的中间显示分割线（还可能只显示顶部、尾部和不显示分割线）
+mLinearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
+// 设置分割线的距离本身（LinearLayout）的内间距
+mLinearLayout.setDividerPadding(20);
+// 设置分割线的样式
+mLinearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.divider_vertical));
+

divider_vertical.xml：

<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#ccc"/>
+    <size android:width="1dp" />
+</shape>
+

这样，分割线就有了。

为TabLayout添加分割线（有瑕疵）

看起来有点怪是吧，这是因为我们前面设置的app:tabBackground="@color/colorPrimaryDark"只是给Tab设置了背景色，而不是给Tab的父级控件LinearLayout设置，这个LinearLayout默认的背景色是白色，所以才会是这个样子，解决方法自然就是给LinearLayout设置跟Tab一样的背景色就好了。

mLinearLayout = (LinearLayout) mTabLayout.getChildAt(0);
+...
+mLinearLayout.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
+

这样就完美的为TabLayout设置分割线了。

为TabLayout添加分割线（完美）

# 3、为TabLayout设置不同状态下的字体大小（并不能成功）

用同样的方式拿到Tab中的文本控件，判断当前是否被选中，再对该文本控件进行字体大小设置就欧了。借助上面拿到的用来包裹Tab的LinearLayout（mLinearLayout），遍历LinearLayout中的子控件，拿到一个个的子view（即Tab），再从Tab中拿到文本控件设置文字大小。

// 默认让所有没有选中的Tab的文字设置为小字体
+for (int i = 0; i < mTabLayout.getTabCount(); i++) {
+    ((TextView) ((LinearLayout) mLinearLayout.getChildAt(i)).getChildAt(1)).setTextSize(10);
+	// 也可以这么写，一样的
+	// ((TextView) ((LinearLayout) ((LinearLayout) mTabLayout.getChildAt(0)).getChildAt(i)).getChildAt(0)).setTextSize(12);
+}
+// 再把当前被选中的Tab文字设置为大字体
+((TextView) ((LinearLayout) mLinearLayout.getChildAt(mTabLayout.getSelectedTabPosition())).getChildAt(1)).setTextSize(30);
+
+// 当选中的Tab切换时，再调整Tab的字体大小
+mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
+    @Override
+    public void onTabSelected(TabLayout.Tab tab) {
+        ((TextView) ((LinearLayout) mLinearLayout.getChildAt(tab.getPosition())).getChildAt(1)).setTextSize(30);
+    }
+
+    @Override
+    public void onTabUnselected(TabLayout.Tab tab) {
+        ((TextView) ((LinearLayout) mLinearLayout.getChildAt(tab.getPosition())).getChildAt(1)).setTextSize(12);
+    }
+
+    @Override
+    public void onTabReselected(TabLayout.Tab tab) {
+
+    }
+});
+

上面代码中把得到的Tab强转成LinearLayout，这是因为Tab实际上是TabView，而TabView继承自LinearLayout，所以可以这样转换，我们可以看下TabLayout的newTab()方法：

通过newTab()源码查看TabView本质

然而事实并不如意，完全没有效果，去看了下源码，也不是很确定，我的猜想是这样的，当我们对Tab中的文本控件设置字体大小后，TabView的onMeasuer()方法会被重新调用，而这个方法里就对文字大小重新进行赋值，导致文字大小没法按上面的方式进行修改。

TabLayout源码中对Tab文字大小做了限制

所以，文字的大小只能通过Style的方法去修改，且只能统一设置选中和未选中的文字大小，故，这个需求没法完成。

# 4、自定义指示器长度

其实这有点标题党的意思了，TabLayout的指示器长度没法指定，它原本多长就是多长，但可以通过设置Tab外间距的方式，让指示器看起来像是与Tab保持一定距离，这里我在网上找到了方法，方法如下：

// 设置TabLayout的“长度”
+setIndicator(mTabLayout,10,10);
+
+// 具体方法（通过反射的方式）
+public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
+    Class<?> tabLayout = tabs.getClass();
+    Field tabStrip = null;
+    try {
+        tabStrip = tabLayout.getDeclaredField("mTabStrip");
+    } catch (NoSuchFieldException e) {
+        e.printStackTrace();
+    }
+
+    tabStrip.setAccessible(true);
+    LinearLayout llTab = null;
+    try {
+        llTab = (LinearLayout) tabStrip.get(tabs);
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    }
+
+    int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
+    int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
+
+    for (int i = 0; i < llTab.getChildCount(); i++) {
+        View child = llTab.getChildAt(i);
+        child.setPadding(0, 0, 0, 0);
+        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
+        params.leftMargin = left;
+        params.rightMargin = right;
+        child.setLayoutParams(params);
+        child.invalidate();
+    }
+}
+

这个setIndicator()方法主要是通过反射的方式，先拿到mTabStrip（其实就是TabLayout直接包裹的LinearLayout），再遍历出mTabStrip中的子控件Tab，再设置Tab的外间距，为了证明就是设置了Tab的外间距，这里我分别对mTabStrip设置了背景色和不设置其背景色，来看看对比：

mTabStrip设置了背景色 mTabStrip不设置背景色

设置了背景色看起来效果还马马虎虎吧，但这样的方式没办法让指示器的长度比文字长度短（无奈~）。好了，不管这个了，既然我前面说了mTabStrip其实就是TabLayout直接包裹的LinearLayout，那通过这个LinearLayout来设置也是可以的，证明一下：

// 得到TabLayout包裹的LinearLayout并设置背景色
+mLinearLayout = (LinearLayout) mTabLayout.getChildAt(0);
+mLinearLayout.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
+...
+// 设置LinearLayout中子View(Tab)的外间距
+int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, Resources.getSystem().getDisplayMetrics());
+int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, Resources.getSystem().getDisplayMetrics());
+for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
+    View tabView = mLinearLayout.getChildAt(0);
+    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
+    params.leftMargin = left;
+    params.rightMargin = right;
+    tabView.setLayoutParams(params);
+}
+

通过查找控件方式，让指示器与Tab存在间距

好，到这里我对TabLayout的探索之旅就结束了，本文通过直接查找TabLayout中控件的方式，来自定义TabLayout本身没法直接设置的样式效果，从而来满足我们项目的需求。这仅仅是我个人对TabLayout的理解，可能存在些瑕疵，请多包涵，如果对“为TabLayout设置不同状态下的字体大小”和“自定义指示器长度”其他确实可行的方法，请留言告诉我一下吧，多多指教，谢谢。

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#TabLayout
MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习
多RecyclerView同步滚动

+ ← + 多RecyclerView同步滚动→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0f3155/index.html b/pages/0f3155/index.html new file mode 100644 index 000000000..317c4a1dc --- /dev/null +++ b/pages/0f3155/index.html @@ -0,0 +1,501 @@ + + + + + + Flutter - 基础Widget | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-27
目录

Flutter - 基础Widget

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、文本 Widget

# 1、纯文本(Text)

Text 控件常见属性：

  • textAlign: 文本对齐，默认是左对齐，可以根据实际情况修改为居中(TextAlign.center)或右对齐(TextAlign.right)
  • maxLines: 文字最多显示多少行，通常与 overflow 搭配使用
  • overflow: 内容溢出显示效果，可以设置显示省略号(TextOverflow.ellipsis)
  • textScaleFactor: 缩放因子，默认是 1。
  • style: 文本样式，直接使用 TextStyle()： +
    • fontSize: 文字大小
    • color: 文字颜色
    • fontWeight: 文字粗细
/// Text的使用Demo
+class TextWidgetDemo extends StatelessWidget {
+  final textContent = "《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。\n";
+  // final textContent = "《定风波》 苏轼 莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。";
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      textContent,
+      // 默认情况下，Text是包裹文字的，文字内容太少时可能看不出效果
+      textAlign: TextAlign.center,
+      // 文字最多显示2行
+      maxLines: 3,
+      // 文字超过2行时，显示...
+      overflow: TextOverflow.ellipsis,
+      // 缩放因子，默认是1
+      textScaleFactor: 1,
+      style: TextStyle(
+        fontSize: 30,
+        color: Colors.red,
+        fontWeight: FontWeight.bold, // 字体加粗
+      ),
+    );
+  }
+}
+

注意：Text 并不是最终渲染的 Widget，最终渲染的是 RichText。Text 的父类是 StatelessWidget，最终渲染的 Widget 是 build()方法创建出来的 RenderObjectWidget，即 RichText。

# 2、富文本(Text.rich())

Text.rich() 有一个必须参数 InlineSpan textSpan，InlineSpan 是抽象类且无工厂构造函数，无法直接创建，故需要使用其子类：

  • TextSpan : 用于构建纯文本的 Span
  • WidgetSpan : 用于构建内嵌 Widget 的 Span (比如:Icon)
/// Text.rich()的使用Demo
+class TextRichDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Text.rich(
+      TextSpan(
+        // text: "Hello lqr",
+        // style: TextStyle(color: Colors.red,fontSize: 20),
+        children: [
+          TextSpan(text: "Hello World", style: TextStyle(color: Colors.red)),
+          TextSpan(
+              text: "Hello Flutter", style: TextStyle(color: Colors.green)),
+          WidgetSpan(child: Icon(Icons.favorite, color: Colors.red)),
+          TextSpan(text: "Hello Dart", style: TextStyle(color: Colors.blue)),
+        ],
+      ),
+      style: TextStyle(fontSize: 26),
+    );
+  }
+}
+

# 二、按钮 Widget

# 1、常见 Button

  • RaisedButton : 突出的 Button（从 v1.25.0 过时，推荐使用 ElevatedButton）
  • FlatButton : 扁平的 Button（从 v1.25.0 过时，推荐使用 TextButton）
  • OutlineButton : 边框 Button（从 v1.25.0 过时，推荐使用 OutlinedButton）
  • FloatingActionButton : 浮动按钮，简称 FAB，一般用在 Scaffold 中 +
    • floatingActionButtonLocation : 可指定 FAB 在界面中的位置，比如底部居中: FloatingActionButtonLocation.centerFloat

在使用这些常见 Widget 时，经常会看到构造方法中有两类 "必传"参数：

  • 必传参数 : 指的是 Dart 语法中方法的必传参数，这种参数不传一定报错（编译不通过）。
  • required 参数 : 使用 @required(或 required 关键字)修饰的 可选参数，这种不传编译可以通过，但是会报警告。
class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("基础Widget")),
+      body: HomeContent(),
+      // 4. FloatingActionButton
+      floatingActionButton: FloatingActionButton(
+        child: Icon(Icons.add),
+        onPressed: () => print("FloatingActionButton Click"),
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+    );
+  }
+}
+
+...
+
+class ButtonDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        // 1. 突出的Button（从 v1.25.0 过时，推荐使用 ElevatedButton）
+        RaisedButton(
+          child: Text("RaisedButton"),
+          textColor: Colors.red, // 文字颜色（也可以在Text的style中设置）
+          color: Colors.blue, // 按钮背景色
+          onPressed: () => print("RaisedButton Click"),
+        ),
+
+        // 2. 扁平的Button（从 v1.25.0 过时，推荐使用 TextButton）
+        FlatButton(
+          child: Text("FlatButton"),
+          color: Colors.orange,
+          onPressed: () => print("FlatButton Click"),
+        ),
+
+        // 3. 边框Button（从 v1.25.0 过时，推荐使用 OutlinedButton）
+        OutlineButton(
+            child: Text("OutlineButton"),
+            onPressed: () => print("OutlineButton Click")),
+
+        // 4. FloatingActionButton，一般用在Scaffold中
+        // FloatingActionButton(onPressed: onPressed)
+
+        // 5. 自定义Button：图标-文字-背景-圆角
+        FlatButton(
+          color: Colors.amberAccent,
+          shape: RoundedRectangleBorder( // 圆角
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min, // 默认是max，占满父Widget；min是包裹内容
+            children: [
+              Icon(Icons.favorite, color: Colors.red), // 图标
+              Text("喜欢作者"), // 文字
+            ],
+          ),
+          onPressed: () => print("自定义Button"), // onPressed必传，否则样式可能会出问题
+        )
+      ],
+    );
+  }
+}
+

# 2、定制 Button

  • 默认间隔 : 默认情况下 Button 上下有一定有间隔，可以指定 materialTapTargetSize 来修改 +
    • MaterialTapTargetSize.padded：(默认值) 当按钮宽(或高)不足 48px 时，就把宽(或高)扩展到 48px
    • MaterialTapTargetSize.shrinkWrap：紧缩包裹，可以去除上下的间隔
  • 最小宽度 : ButtonTheme(也是个 Widget，包裹 Button) 或 minWidth(Button 的一个属性)
  • 内间距 : 修改 padding 属性值
class ButtonExtensionDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        /// 1. 默认情况下Button上下有一定有间隔
+        ///   MaterialTapTargetSize.padded：当按钮宽(或高)不足48px时，就把宽(或高)扩展到48px。
+        ///   MaterialTapTargetSize.shrinkWrap：紧缩包裹，可以去除上下的间隔。
+        FlatButton(
+          color: Colors.red,
+          child: Text("Flat Button1"),
+          textColor: Colors.white,
+          onPressed: () {},
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        ),
+        FlatButton(
+          color: Colors.red,
+          child: Text("Flat Button2"),
+          textColor: Colors.white,
+          onPressed: () {},
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        ),
+
+        /// 2. 修改按钮的最小宽度：ButtonTheme
+        FlatButton(
+          minWidth: 30,
+          height: 30,
+          color: Colors.red,
+          child: Text(""),
+          onPressed: () {},
+        ),
+        ButtonTheme(
+          minWidth: 30,
+          height: 30,
+          child: FlatButton(
+            color: Colors.red,
+            child: Text(""),
+            onPressed: () {},
+          ),
+        ),
+
+        /// 3. 修改按钮的内间距
+        FlatButton(
+          padding: EdgeInsets.all(0),
+          // 只能去除左右内间距，上下内间距可以指定一个固定height解决
+          color: Colors.red,
+          child: Text("Float Button3"),
+          textColor: Colors.white,
+          onPressed: () {},
+        ),
+      ],
+    );
+  }
+}
+

# 三、图片 Widget

Image 控件需要一个必传参数 ImageProvider image，常见子类如下：

  • NetworkImage : 用于加载网络图片 +
    • 简单写法 : Image.network('http://lqr.com/FSA_QR.png')
  • AssetImage : 用于加载 app 包内图片 +
    • 简单写法 : Image.asset('assets/images/FSA_QR.png')

# 1、NetworkImage

  • 常见属性: +
    • fit : 图片填充方式 +
      • BoxFit.fill : 拉伸
      • BoxFit.contain : 内容缩放至最长的一边贴边
      • BoxFit.cover : 内容缩放至最短的一边贴边
      • BoxFit.fitWidth : 宽度一定，高度自适应
      • BoxFit.fitHeight : 高度一定，宽度自适应
    • alignment : +
      • Alignment.bottomCenter : 底部居中
      • Alignment.center : 居中
      • Alignment(x, y) : 左上角是(-1, -1)，右下角是(1, 1)
    • color : color 不是背景色，而是用于图像混入的颜色，配合 colorBlendMode 使用
    • repeat : 重复模式，比如纵向重复 ImageRepeat.repeatY
class ImageDemo01 extends StatelessWidget {
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.count(
+      crossAxisSpacing: 8,
+      mainAxisSpacing: 8,
+      crossAxisCount: 3,
+      children: [
+        wrapItem(
+          Image(image: NetworkImage(imageUrl)),
+          "NetworkImage",
+        ),
+        wrapItem(
+          Image.network(imageUrl),
+          "Image.network()",
+        ),
+        Container(),
+        wrapItem(
+          Image.network(imageUrl, fit: BoxFit.fill), // 拉伸
+          "BoxFit.fill",
+        ),
+        wrapItem(
+          Image.network(imageUrl, fit: BoxFit.contain), // 内容缩放至最长的一边贴边
+          "BoxFit.contain",
+        ),
+        wrapItem(
+          Image.network(imageUrl, fit: BoxFit.cover), // 内容缩放至最短的一边贴边
+          "BoxFit.cover",
+        ),
+        wrapItem(
+          Image.network(imageUrl, fit: BoxFit.fitWidth), // 宽度一定，高度自适应
+          "BoxFit.fitWidth",
+        ),
+        wrapItem(
+          Image.network(imageUrl, fit: BoxFit.fitHeight), //高度一定，宽度自适应
+          "BoxFit.fitHeight",
+        ),
+        Container(),
+        wrapItem(
+          Image.network(imageUrl, alignment: Alignment.bottomCenter),
+          "Alignment.topLeft",
+        ),
+        wrapItem(
+          Image.network(imageUrl, alignment: Alignment.center),
+          "Alignment.center",
+        ),
+        wrapItem(
+          // 左上角是(-1, -1)，右下角是(1, 1)
+          Image.network(imageUrl, alignment: Alignment(0, -1)),
+          "Alignment(0, -1)",
+        ),
+        wrapItem(
+          // color不是背景色，而是用于图像混入的颜色，配合 colorBlendMode 使用
+          Image.network(imageUrl,
+              color: Colors.green, colorBlendMode: BlendMode.colorDodge),
+          "BlendMode.colorDodge",
+        ),
+        wrapItem(
+          Image.network(imageUrl, repeat: ImageRepeat.repeatY),
+          "ImageRepeat.repeatY",
+        ),
+      ],
+    );
+  }
+
+  Widget wrapItem(Widget widget, String tip) {
+    Text genTip(String tip) {
+      return Text(
+        tip,
+        style: TextStyle(
+          fontSize: 14,
+          color: Colors.white,
+          backgroundColor: Colors.black,
+        ),
+      );
+    }
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        Container(color: Colors.red[100], child: widget),
+        Positioned(left: 4, bottom: 4, child: genTip(tip)),
+      ],
+    );
+  }
+}
+

# 2、AssetImage

使用 AssetImage 加载包内图片步骤如下：

  1. 在 Flutter 项目中创建一个文件夹目录(比如 assets/image)，存储图片
  2. 在 pubspec.yaml 进行配置
assets:
+  # - assets/images/FSA_QR.png # 配置单张图片
+  - assets/images/　# 配置多张图片
+
  1. 使用图片
class ImageDemo02 extends StatelessWidget {
+
+  @override
+  Widget build(BuildContext context) {
+    // 简单写法
+    // Image.asset('assets/images/FSA_QR.png');
+
+    return Image(
+      image: AssetImage('assets/images/FSA_QR.png'),
+    );
+  }
+}
+

# 3、占位图(placeHolder)

在网络图片未加载出来之前显示的图片称为占位图，可以使用 FadeInImage 实现占位图功能：

class ImageExtensionDemo extends StatelessWidget {
+  final imageUrl =
+      "https://up.enterdesk.com/edpic_source/ab/a0/40/aba040ce2daa32fa9cb0cc624b385c0a.jpg";
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeInImage(
+      fadeInDuration: Duration(milliseconds: 1),
+      fadeOutDuration: Duration(milliseconds: 1),
+      placeholder: AssetImage("assets/images/FSA_QR.png"),
+      image: NetworkImage(imageUrl),
+    );
+  }
+}
+

Flutter 会自动进行图片缓存（默认最多缓存 1000 张，缓存空间最多 100m）
https://api.flutter.dev/flutter/widgets/Image-class.html (opens new window)
https://api.flutter.dev/flutter/painting/ImageCache-class.html (opens new window)

# 四、字体图标 Widget

Icon 字体图标和图片图标对比：

  • 字体图标是矢量图（放大的时候不会失真）
  • 字体图标可以设置颜色
  • 图标很多时，字体图标占据空间更小

Icon 控件接收一个必传参数 IconData icon，Icons 中配备了大量常用 icon (如 Icons.pets)，可以使用 Icons.xxx 或 IconData(编码,字体) 这 2 种方式来得到 IconData 对象。另外，IconData 的本质就是字体，因此也可以使用 Text 来显示字体图标：

class IconDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // return Icon(Icons.pets, size: 300, color: Colors.orange);
+    // return Icon(IconData(0xe90e, fontFamily: 'MaterialIcons'),size: 300,color: Colors.orange);
+
+    /// 1. 使用Text显示字体图标时，需要将字体编码 -> unicode编码
+    /// 2. 设置对应的字体fontFamily
+    // return Text("0xe90e", style: TextStyle(fontSize: 100, color: Colors.orange));
+    return Text(
+      "\ue90e",
+      style: TextStyle(
+        fontSize: 100,
+        color: Colors.orange,
+        fontFamily: 'MaterialIcons',
+      ),
+    );
+  }
+}
+

# 五、表单 Widget

# 1、TextField 配置

  • decoration : 用于自定义输入框样式，InputDecoration()： +
    • labelText : 输入框上的 label 文字
    • icon : 输入框左侧的 icon
    • hintText : 输入框中的提示文字
    • border : 边框，通常使用 OutlineInputBorder()
    • filled : 是否使用填充色，默认为 false
    • fillColor : 填充色(可以理解为输入框的背景色)
  • obscureText : 是否模糊文字，默认为 false，密文模式设置设置为 true
  • onChanged : 监听文字内容变化
  • onSubmitted : 监听提交事件
class TextFieldDemo1 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        TextField(),
+        TextField(
+          decoration: InputDecoration(
+            labelText: 'username(labelText)',
+            icon: Icon(Icons.people),
+            hintText: '请输入用户名(hintText)',
+          ),
+        ),
+        TextField(
+          decoration: InputDecoration(
+            hintText: '请输入用户名(hintText)',
+          ),
+        ),
+        SizedBox(height: 10),
+        TextField(
+          decoration: InputDecoration(
+            labelText: 'OutlineInputBorder',
+            icon: Icon(Icons.people),
+            border: OutlineInputBorder(),
+          ),
+        ),
+        TextField(
+          decoration: InputDecoration(
+            labelText: 'fillColor',
+            icon: Icon(Icons.people),
+            border: OutlineInputBorder(),
+            filled: true,
+            fillColor: Colors.red[100],
+          ),
+        ),
+        TextField(
+          decoration: InputDecoration(hintText: '监听事件'),
+          onChanged: (value) => print("onChange:$value"), // 监听文字内容变化
+          onSubmitted: (value) => print("onSubmitted:$value"), // 监听提交事件
+        ),
+        TextField(
+          obscureText: true, // 模糊文本
+          decoration: InputDecoration(
+            labelText: 'password',
+            icon: Icon(Icons.lock),
+            border: OutlineInputBorder(),
+          ),
+        )
+      ],
+    );
+  }
+}
+

# 2、TextField 内容获取

Flutter 是声明式 UI，也没有提供 ref 之类的方式去获取到 TextField 控件，因此无法通过 TextField 对象来获取输入框中的内容，不过，可以为 TextField 指定 controller，通过 controller 来获取对应输入框中的内容：

题外话：Vue 和 React 可以为控件指定 ref 值，用于在 js 或 jsx 中来获取到控件。

class TextFieldDemo2 extends StatelessWidget {
+  final usernameTextEditController = TextEditingController();
+  final passwordTextEditController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        children: [
+          TextField(
+            controller: usernameTextEditController,
+            decoration: InputDecoration(
+              labelText: 'username',
+              icon: Icon(Icons.people),
+              hintText: '请输入用户名',
+              border: OutlineInputBorder(),
+            ),
+          ),
+          SizedBox(height: 8),
+          TextField(
+            controller: passwordTextEditController,
+            obscureText: true,
+            decoration: InputDecoration(
+              labelText: 'password',
+              hintText: '请输入密码',
+              icon: Icon(Icons.lock),
+              border: OutlineInputBorder(),
+            ),
+          ),
+          SizedBox(height: 8),
+          Container(
+            // width: 300,
+            width: double.infinity,
+            height: 40,
+            child: FlatButton(
+              color: Colors.blue,
+              textColor: Colors.white,
+              child: Text("登录"),
+              onPressed: () {
+                // 1. 获取用户名和密码
+                final username = usernameTextEditController.text;
+                final password = passwordTextEditController.text;
+                print("账号：$username , 密码：$password");
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+

+ +
+
#Text#RaisedButton#FlatButton#OutlineButton#FloatingActionButton#NetworkImage#AssetImage#FadeInImage#Icon#IconData#TextField
Flutter - StateWidget与生命周期
Flutter - 基础布局

+ ← + Flutter - 基础布局→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/0fcdc8/index.html b/pages/0fcdc8/index.html new file mode 100644 index 000000000..4c202d789 --- /dev/null +++ b/pages/0fcdc8/index.html @@ -0,0 +1,245 @@ + + + + + + Flutter - Dart事件循环机制与异步 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-04-07
目录

Flutter - Dart事件循环机制与异步

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、Dart 异步

与 JavaScript 一样, Dart 是基于 事件循环机制 的 单线程模型, 所以 Dart 中没有多线程, 也就没有主线程与子线程之分.

# 1、同步与异步

  • 同步: 同一线程中, 按照代码的编写顺序, 自上而下依次执行 (直观感受: 需要等待)
  • 异步: 代码执行中, 某段代码的执行不会影响后面代码的执行 (直观感受: 无需等待)

# 2、单线程模型

# 单线程模型:

  • 一条执行线上, 同时且只能执行一个任务(事件), 其他任务都必须在后面排队等待被执行.
  • 为了不阻碍代码的执行, 每遇到的耗时任务都会被挂起放入任务队列, 待执行结束后再按放入顺序依次执行队列上的任务, 从而达到异步效果.

# 单线程模型 与 多线程 各自的优势:

  • 单线程模型的优势: 避免了多线程的缺点, 比较适合于需要等待对方传送数据或返回结果的耗时操作, 如网络请求, IO 操作等.
  • 多线程的优势: 尽可能利用处理器的多核实现并行计算的计算密集型操作.

# 多线程 的缺点:

  • 会带来额外的资源和性能消耗.
  • 多个线程操作共享内存时需要加锁控制, 锁竞争会降低性能和效率, 复杂情况下还容易造成死锁.

# 3、事件循环机制

对于用户点击, 滑动, 硬盘 IO 访问等事件, 你不知道何时发生或以什么顺序发生, 所以得有一个永不停歇且不能阻塞的循环来等待处理这些 "突发" 事件. 于是, 基于 事件循环机制 的 单线程模型 就出现了:

Dart 事件循环机制由 一个消息循环(Event Looper) 和 两个消息队列(Event Queue) 构成, 这两个消息队列分别是: 事件队列(Event queue) 和 微任务队列(MicroTask queue).

# Event Looper

Dart 在执行完 main 函数后, Event Looper 就开始工作, Event Looper 优先全部执行完 Microtask Queue 中的 event, 直到 Microtask Queue 为空时, 才会执行 Event Looper 中的 event, Event Looper 为空时才可以退出循环.

注意: Event Looper 为空时, 是 可以 而不是 一定 要退出, 视场景而定.

# Event Queue

Event Queue 的 event 来源于 外部事件 和 Future

  • 外部事件: 例如输入/输出, 手势, 绘制, 计时器, Stream 等
  • Future: 用于自定义 Event Queue 事件

对于外部事件, 一旦没有任何 microtask 要执行, Event loop才会考虑 event queue中的第一项，并且将会执行它.

通过 Future 实例向 Event Queue 添加事件:

Future(() {
+  // 事件任务
+});
+

# Microtask Queue

  • Microtask Queue 的优先级高于 Event Queue.
  • 使用场景: 想要在稍后完成一些任务(microtask) 但又希望在执行下一个事件(event)之前执行.

Microtask 一般用于非常短的内部异步动作, 并且任务量非常少, 如果微任务非常多, 就会造成 Event Queue 排不上队, 会阻塞 Event Queue 的执行(如: 用户点击没有反应). 所以, 大多数情况下优先考虑使用 Event Queue, 整个 Flutter 源代码仅引用 scheduleMicroTask() 方法 7 次.

通过 scheduleMicroTask() 函数向 Microtask Queue 添加任务:

scheduleMicrotask(() {
+  // 微任务
+});
+

# 二、Future

Dart 中的异步操作主要使用 Future 与 async/await, 整体与前端 ES6 中的 Promise, async/await 的使用差不多, 可以把 Future 理解为是一个自带 callback 效果的类.

# 1、基本使用

通过查看 Future 的构造函数知道, 创建时需要传入一个返回值类型是 FutureOr<T> 的函数:

factory Future(FutureOr<T> computation()) {
+  ...
+}
+

这个 FutureOr<T> 是一个联合类型, 最终类型可能是 Future 或是泛型 T 的具体类型. 当不指定泛型 T 时, 实例类型为 Future<dynamic>. 下面是一个模拟网络耗时请求的例子:

Future<String> getNetworkData() {
+  // 1. 将耗时操作包裹到Future的回调函数中
+  return Future<String>(() {
+    sleep(Duration(seconds: 2));
+
+    return "Hello lqr"; // 只要有返回结果, 那么就执行Future对应的then的回调(相当于Promise-resolve)
+    // throw Exception("error"); // 如果没有结果返回(有错误信息), 需要在Future回调中抛出一个异常(相当于Promise-reject)
+  });
+}
+

Future 实例有 3 个常用方法:

  • then((value){...}): 正常运行时执行
  • catchError((err){...}): 出现错误时执行
  • whenComplete((){...}): 不管成功与否都会执行

通过以上 3 个方法, 即可获得 Future 实例的执行状况与结果:

main(List<String> args) {
+  print("main start");
+
+  // 2. 拿到结果
+  var future = getNetworkData();
+  future.then((value) => print(value)) // Hello lqr
+      .catchError((err) => print(err))
+      .whenComplete(() => print("执行完成")); // 不管成功与否都会执行
+
+  print("main end");
+}
+

日志输出如下:

main start
+main end
+
+// 2秒后输出:
+Hello lqr
+执行完成
+

注意, 以上 3 个方法是可以分开写的, 但每次执行完一个方法时需要对 future 实例重新赋值(相当于包了一层), 否则后续方法无效:

var future = getNetworkData();
+
+// 错误写法:
+future.then((value) => print(value));
+future.catchError((error) => print(error)); // 无效
+
+// 正确写法:
+future = future.then((value) {
+  print(value);
+  return value;
+});
+future.catchError((error) => print(error)); // 有效
+

# 2、链式调用

Future 可以在 then()方法中返回另一个 Future 实例, 从而达到链式调用的效果, 这对那些有数据关联的网络请求很有用:

main(List<String> args) {
+  print("main start");
+
+  // 链式调用, 执行多个数据处理
+  Future(() {
+    return "第一次结果";
+  }).then((value) {
+    print(value);
+    return "第二次结果";
+  }).then((value) {
+    print(value);
+    return "第三次结果";
+  }).then((value) {
+    print(value);
+  }).catchError((error) {
+    print(error);
+  });
+
+  print("main end");
+}
+

强调: Future 构造函数要求传入一个返回值类型是 FutureOr<T> 的函数, 但因为 FutureOr<T> 是联合类型, 所以, 这里可以返回另一个 Future 实例, 或者是一个具体类型数据, 比如字符串.

# 3、其它 API

Future 除了默认构造器外, 还提供了几个常用的命名构造器:

  • Future.value(): 创建一个返回具体数据的 Future 实例
  • Future.error(): 创建一个返回错误的 Future 实例
  • Future.delayed(): 创建一个延时执行的 Future 实例
main(List<String> args) {
+  print("main start");
+
+  Future.value("Hello lqr").then((value) => print(value));
+
+  Future.error("出错了").catchError((error) => print(error));
+
+  Future.delayed(Duration(seconds: 3))
+      .then((value) => "Hello lqr")
+      .then((value) => print(value));
+
+  Future.delayed(Duration(seconds: 2), () => "Hello lqr")
+      .then((value) => print("welcome"))
+      .then((value) => throw Exception("出错了"))
+      .catchError((error) => print(error))
+      .whenComplete(() => print("执行完成")); // 不管成功与否都会执行
+
+  print("main end");
+}
+

# 三、async/await

async/await 是 Dart 提供的可以用 同步的代码格式 实现 异步的调用过程 的 语法糖.

# 1、基本使用

  • await 必须在 async 函数中使用
  • async 函数返回的结果必须是一个 Future
Future getNetworkData() async {
+  var userId = await getUserId();
+  var userInfo = await getUserInfo(userId);
+  return userInfo.username // 会自动包裹成Future
+}
+

如果不使用 async/await, 那么上面的代码则需要这么写:

Future getNetworkData() {
+  return getUserId().then((userId) {
+    return getUserInfo(userId);
+  }).then((userInfo) {
+    return userInfo.username;
+  });
+}
+

相比之下, 使用 async/await 写出来的代码在理解上会更加清晰.

# 四、isolate

所有的 Dart 代码都是在 isolate 中运行的, 它就是机器上的一个小空间, 具有自己的私有内存块和一个运行着 Event Looper 的单个线程. 每个 isolate 都是相互隔离的, 并不像线程那样可以共享内存. 一般情况下, 一个 Dart 应用只会在一个 isolate 中运行所有代码, 但如果有特殊需要, 可以开启多个:

注意: Dart 中没有线程的概念, 只有 isolate .

# 1、创建 isolate (Dart API)

Dart 默认提供了 Isolate.spawn(entryPoint, message) 用于开启 isolate, 通过源码可以知道形参 message 其实是 形参 entryPoint 对应的函数执行时需要的参数:

external static Future<Isolate> spawn<T>(
+    void entryPoint(T message), T message,
+    {bool paused = false,
+    bool errorsAreFatal = true,
+    SendPort? onExit,
+    SendPort? onError,
+    @Since("2.3") String? debugName});
+

使用 Isolate.spawn(entryPoint, message) 开启 isolate, 并指定要执行的任务:

import 'dart:isolate';
+
+main(List<String> args) {
+  print("main start");
+
+  Isolate.spawn(calc, 100);
+
+  print("main end");
+}
+
+void calc(int count) {
+  var total = 0;
+  for (var i = 0; i < count; i++) {
+    total += i;
+  }
+  print(total);
+}
+

# 2、isolate 通信 (单向)

isolate 间可以一起工作的唯一方法是通过来回传递消息. 一般情况下, 子isolate 会将运行结果通过管道以消息的形式发送到 主isolate, 并在 主isolate 的 Event Looper 中处理该消息, 这时就需要借助 ReceivePort 来处理消息的传递了:

  • 在启动 子isolate 时, 将 主isolate 的发送管道(SendPort)作为参数传递给 子isolate.
  • 子isolate 在执行完毕时, 可以利用管道(SendPort)给 主isolate 发送信息.
import 'dart:isolate';
+
+main(List<String> args) async {
+  print("main start");
+
+  // 1. 创建管道
+  var receivePort = ReceivePort();
+
+  // 2. 创建isolate
+  Isolate isolate = await Isolate.spawn(foo, receivePort.sendPort);
+
+  // 3. 监听管道
+  receivePort.listen((message) {
+    print(message);
+    // 不再使用时, 关闭管道
+    receivePort.close();
+    // 不再使用时, 将 isolate 杀死
+    isolate.kill();
+  });
+
+  print("main end");
+}
+
+void foo(SendPort sendPort) {
+  sendPort.send("Hello lqr");
+}
+

以上只实现了 isolate 的单向通信, 双向通信比较麻烦, 有兴趣可以再查看一些其他资料.

# 3、创建 isolate (Flutter API)

Flutter 提供了更为方便的开启 isolate 的 API: compute() 函数. 以下是示例代码:

main(List<String> args) async {
+  int result = await compute(powerNum, 5);
+  print(result);
+}
+
+int powerNum(int num) {
+  return num * num;
+}
+

compute() 是 Flutter 的 API, 不是 Dart 的 API, 所以, 上面的代码只能在 Flutter 项目中才能运行.

# 参考资料

+ +
+
#事件循环机制#单线程模型#Future#async#await#isolate
Flutter - Dart特性语法
Flutter - StateWidget与生命周期

+ ← + Flutter - StateWidget与生命周期→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/10277d/index.html b/pages/10277d/index.html new file mode 100644 index 000000000..c675f6984 --- /dev/null +++ b/pages/10277d/index.html @@ -0,0 +1,349 @@ + + + + + + Python - 爬虫之Selenium | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-03
目录

Python - 爬虫之Selenium

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、Selenium 的介绍

Selenium 是一个 Web 自动化测试工具，最初是为网站自动化测试而开发，Selenium 可以直接调用浏览器，它支持所有主流的浏览器（包括 PhantomJS 这些无界面的浏览器），可以接收指令，让浏览器自动加载页面，获取需要的数据，甚至页面截屏等。

# 1、Selenium 启动 Chrome

在下载好 chromedriver 以及安装好 selenium 模块后，执行下列代码：

from selenium import webdriver
+
+# 如果driver没有添加到环境变量，则需要将driver的绝对路径赋值给executable_path参数
+# driver = webdriver.Chrome(executable_path='/home/worker/Desktop/driver/chromedriver')
+
+# 如果driver添加了环境变量，则不需要设置executable_path
+driver = webdriver.Chrome()
+
+# 向一个url发起请求
+driver.get('https://www.baidu.com')
+
+# 把网页保存为图片，69版本以上的谷歌浏览器将无法使用截图功能
+driver.save_screenshot("screenshot.png")
+
+print(driver.title)  # 打印页面标题
+
+# 退出模拟浏览器
+driver.quit()  # 一定要退出！不退出会有残留进程！
+

# 2、Selenium 启动 PhantomJS

PhantomJS 是一个基于 Webkit 的"无界面"(headless)浏览器，它会把网站加载到内存并执行页面上的 JavaScript。下载地址：https://phantomjs.org/download (opens new window)

from selenium import webdriver
+
+driver = webdriver.PhantomJS()
+# driver = webdriver.PhantomJS(executable_path='/home/worker/Desktop/driver/phantomjs')
+
+# 向一个url发起请求
+driver.get('https://www.baidu.com')
+
+# 把网页保存为图片
+driver.save_screenshot('screenshot.png')
+
+# 退出模拟浏览器
+driver.quit()  # 一定要退出！不退出会有残留进程！
+

# 无头浏览器与有头浏览器的使用场景

  • 通常开发过程中需要查看运行过程中的各种情况所以通常使用有头浏览器
  • 在项目完成进行部署的时候，通常平台采用的系统都是服务器版的操作系统，服务器版的操作系统必须使用无头浏览器才能正常运行

# 3、Selenium 的工作原理

利用浏览器原生 API，封装成一套更加面向对象的 Selenium WebDriver API，直接操作浏览器页面里的元素，甚至操作浏览器本身（截屏、窗口大小、启动、关闭、安装插件、配置证书...）

  • webdriver 本质是一个 web-server，对外提供 webapi，其中封装了浏览器的各种功能
  • 不同的浏览器使用各自不同的 webdriver（由浏览器厂商提供）

# 二、Selenium 安装及简单使用

# 1、安装 selenium

pip/pip3 install selenium
+pip/pip3 install selenium==版本号
+

# 2、安装 driver

以 Chrome 浏览器为例：

  • 查看浏览器版本号

  • 下载对应版本的驱动

  • 配置环境变量【可选】

    • Mac/Linux： +
      • 执行 echo $PATH 查看已经配置的环境变量路径
      • 选择其中一个目录（比如：/usr/local/bin），把 chromedriver 拷贝过去即可
    • Windows： +
      • 右击此电脑 -> 属性 --> 高级系统设置 --> 环境变量
      • 把 chromedriver 所在目录，追加到 Path 变量下即可

注意：不同版本浏览器对应的 driver 是不一样的，尽量使用与浏览器版本号一致的 driver（一般大版本号一致是可以兼容的，例如 浏览器 91.0.4472.124，驱动 91.0.4472.19）。否则会报错，比如：This version of ChromeDriver only supports Chrome version 92 Current browser version is 91.0.4472.124

# 3、Selenium 的简单使用

使用 Selenium 启动 Chrome 浏览器，打开百度网页，在搜索框中输入文字后，点击搜索按钮：

import time
+from selenium import webdriver
+
+# chromedriver已经添加到环境变量
+# driver = webdriver.Chrome()
+# 通过指定chromedriver的路径来实例化driver对象
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+# 控制浏览器访问url地址
+driver.get('https://www.baidu.com')
+
+# 在百度搜索框中搜索 'python'
+driver.find_element_by_id('kw').send_keys('python')
+# 点击 "百度搜索"
+driver.find_element_by_id('su').click()
+
+time.sleep(6)
+# 退出浏览器
+driver.quit()
+
  • webdriver.Chrome(executable_path='./chromedriver') 中 executable 参数指定的是下载好的 chromedriver 文件路径
  • driver.find_element_by_id('kw').send_keys('python') 定位 id 属性值是 'kw' 的标签，并向其中输入字符串 'python'
  • driver.find_element_by_id('su').click() 定位 id 属性值是 'su' 的标签，并点击 +
    • click 函数作用：触发标签的 js 的 click 事件

# 三、Selenium 提取数据

# 1、driver 对象的常用属性和方法

  • driver.page_source：当前标签页浏览器渲染之后的网页源代码
  • driver.current_url：当前标签页的 url（可能是重写向后的 url）
  • driver.close()：关闭当前标签页，如果只有一个标签页则关闭整个浏览器
  • driver.quit()：关闭浏览器
  • driver.forward()：页面前进
  • driver.back()：页面后退
  • driver.screen_shot(img_name)：页面截图

举例：

from selenium import webdriver
+import time
+
+# 创建一个浏览器对象
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+# 访问指定的url地址
+driver.get('http://www.baidu.com')
+
+# 显示源码
+print(driver.page_source)
+# 显示响应对应的url
+print(driver.current_url)  # https://www.baidu.com/
+# 标签页标题
+print(driver.title)  # 百度一下，你就知道
+
+time.sleep(2)
+driver.get('http://www.douban.com')
+
+time.sleep(2)
+driver.back()
+
+time.sleep(2)
+driver.forward()
+
+# 保存网页快照，常用于验证是否运行或者验证码截图
+driver.save_screenshot('douban.png')
+
+time.sleep(2)
+# 关闭标签页
+# driver.close()
+# 关闭浏览器
+driver.quit()
+

# 2、driver 对象定位标签元素获取标签对象的方法

  • find_element_by_id：返回一个元素
  • find_element(s)_by_class_name：根据类名获取元素列表
  • find_element(s)_by_name：根据标签的 name 属性值返回包含标签对象元素的列表
  • find_element(s)_by_xpath：返回一 列表
  • find_element(s)_by_link_text：根据链接文本获取元素列表
  • find_element(s)_by_partial_link_text：根据部分链接文本获取元素列表
  • find_element(s)_by_tag_name：根据标签名获取元素列表
  • find_element(s)_by_css_selector：根据 css 选择器来获取元素列表

注意：

  • find_element 和 find_elements 的区别： +
    • find_element 返回匹配的第一个标签对象，匹配不到就抛出异常
    • find_elements 返回标签对象列表，匹配不到就返回空列表
  • by_link_text 和 by_partial_link_text 的区别： +
    • by_link_text：匹配全部文本
    • by_partial_link_text：匹配包含某个文本

举例：

from selenium import webdriver
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('http://www.baidu.com')
+
+# 根据xpath进行元素定位
+# driver.find_element_by_xpath('//*[@id="kw"]').send_keys('python3')
+# 根据css选择器进行元素定位
+# driver.find_element_by_css_selector('#kw').send_keys('python3')
+# 根据name属性值进行元素定位
+# driver.find_element_by_name('wd').send_keys('python3')
+# 根据class属性值进行元素定位
+# driver.find_element_by_class_name('s_ipt').send_keys('python3')
+
+# 根据id属性值进行元素定位
+# driver.find_element_by_id('su').click()
+
+# 根据链接文本进行元素定位
+# driver.find_element_by_link_text('hao123').click()
+# 根据部分链接文本进行元素定位
+# driver.find_element_by_partial_link_text('hao').click()
+
+# 根据标签名进行元素定位
+# 限制：目标元素在当前html中是唯一标签的时候或者是众多定位出来的标签中的第一个的时候才能使用
+driver.find_element_by_tag_name('title')
+

# 3、标签对象提取文本内容和属性值

find_element 只能获取元素，不能直接获取其中的数据，如果需要获取数据需要使用以下方法：

  • element.text：通过定位获取的标签对象的 text 属性，获取文本内容
  • element.get_attribute("属性名")：通过定位获取的标签对象的 get_attribute 函数，传入属性名，来获取标签属性值

举例：

from selenium import webdriver
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('https://sz.58.com/chuzu/')
+
+el_list = driver.find_elements_by_xpath('//li[@class="house-cell realverify"]//a[@class="strongbox"]')
+
+for el in el_list:
+    print(el.text, el.get_attribute('href'))
+
+# el.click()  # el必须是可点击的，否则会报错
+# el.send_keys(data)  # el必须是 text input 这类可输入的标签
+# el.clear()  # 对输入框做清空操作
+

# 四、Selenium 的其它使用方法

# 1、标签页切换

当 selenium 控制浏览器打开多个标签时，就需要进行标签页切换了，操作步骤如下：

  • 获取所有标签页的窗口句柄
  • 利用窗口句柄切换到句柄指向的标签页

窗口句柄：指向标签页对象的标识

方法：

# 1. 获取当前所有的标签页的句柄构成的列表
+current_windows = driver.window_handles
+
+# 2. 根据标签页句柄列表索引下标进行切换
+driver.switch_to.window(current_window[0])
+

举例：

from selenium import webdriver
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('https://jn.58.com/')
+
+print(driver.current_url)  # https://jn.58.com/
+print(driver.window_handles)  # ['CDwindow-C612EA61989BAA']
+
+# 定位到“租房”a标签
+el = driver.find_element_by_xpath('//span[@class="contentAdTilRt"]/a[text()="租房"]')
+el.click()
+
+print(driver.window_handles)  # ['CDwindow-C612EA61989BAA', 'CDwindow-45CEE57C52AAB2FE']
+
+# 切换到最新的标签页面
+driver.switch_to.window(driver.window_handles[-1])
+
+print(driver.current_url)  # https://jn.58.com/chuzu/
+

# 2、switch_to 切换 frame 标签

iframe 是 html 中常用的一种技术 ，即一个页面中嵌套了另一个网页，selenium 默认是访问不了 frame 中的内容的，需要使用代码切换到指定的 frame 中再进行后续的操作。

方法：

# 可以传入frame标签的id
+driver.switch_to.frame(frame_id)
+
+# 当id无法获取到时，也可以传入（通过xpath等方式）定位到的frame标签对象
+driver.switch_to.frame(frame_element)
+

举例：

from selenium import webdriver
+
+qq_username = ''
+qq_password = ''
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('https://qzone.qq.com/')
+
+# 切换到账号登录iframe
+driver.switch_to.frame('login_frame')  # <iframe id="login_frame" ...></iframe>
+# driver.switch_to.frame(driver.find_element_by_id('login_frame'))
+
+# 点击 账号密码登录
+driver.find_element_by_id("switcher_plogin").click()
+
+# 输入账号密码
+driver.find_element_by_id('u').send_keys(qq_username)
+driver.find_element_by_id('p').send_keys(qq_password)
+
+# 点击登录
+driver.find_element_by_id('login_button').click()
+

# 3、cookie 操作

# 1）获取 cookie

driver.get_cookies() 返回列表，其中包含了完整的 cookie 信息，即不光有 name、value，还有 domain 等其他维度的信息，所以如果想把获取的 cookie 信息和 requests 模块配合使用的话，需要转换为 name、value 作为键值对的 cookie 字典。

举例：

# 获取当前标签页的全部cookie信息
+print(driver.get_cookies())
+
+# 将cookie信息转可用于requests使用的cookie字典
+cookies_dict = {data['name']: data['value'] for data in driver.get_cookies()}
+

# 2）删除 cookie

# 删除一条cookie
+driver.delete_cookie('CookieName')
+# 删除所有的cookie
+driver.delete_all_cookies()
+

# 4、控制浏览器执行 js 代码

selenium 可以让浏览器执行我们规定的 js 代码，比如，页面向下滚动等等。

方法：

driver.execute_script(js_script)
+

举例：

from selenium import webdriver
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('https://sz.lianjia.com/')
+
+# js代码：向下滚动500像素
+js_script = 'scrollTo(0, 500)'
+driver.execute_script(js_script)
+
+# 点击Android App下载按钮（默认位置超过屏幕高度，不在视野中）
+el_apk = driver.find_element_by_xpath('//div[@class="hand-app"]/a[@class="android"]')
+el_apk.click()
+

注意：如果 Selenium 点击了不在视野内的元素会报错，所以需要等将页面滚动的元素可见。

# 5、页面等待【了解】

# 1）强制等待（常用）

强制等待很简单，直接使用 time 模块即可。

方法：

import time
+
+time.sleep()
+

这种方式的缺点是不智能，设置的时间太短，元素可能还没有加载出来；设置的时间太长，则会浪费时间。

# 2）隐式等待（常用）

隐式等待针对的是元素定位，隐式等待设置了一个时间，在一段时间内判断元素是否定位成功，如果成功，就进行下一步（可能提前，节省时间），如果在设置的时间内没有定位成功，则会报超时异常。

方法：

driver.implicitly_wait(timeout)
+

注意：timeout 的单位是秒

举例：

from selenium import webdriver
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+# 在这段设置代码之后，所有的元素定位操作都有最大等待时间10s，在10s内会定期进行元素定位，超过设置时间之后将会报错
+driver.implicitly_wait(10)
+
+driver.get('http://www.baidu.com')
+
+# 定位一个不存在的元素
+el = driver.find_element_by_xpath('//*[@id="lg"]/img[10000]')
+
+print(el)
+

# 3）显示等待（不常用）

每经过多少秒就查看一次等待条件是否达成，如果达成就停止等待，继续执行后续代码；如果没有达成就继续等待，直到超过规定的时间，报超时异常。

区别：

  • 隐式等待：针对之后 所有 的元素定位
  • 显示等待：针对 指定 的元素定位

举例：

from selenium import webdriver
+from selenium.webdriver.support.wait import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.by import By
+
+driver = webdriver.Chrome(executable_path='../selenium_drivers/chromedriver')
+
+driver.get('http://www.baidu.com')
+
+# 每0.5秒一次检查，通过链接文本内容定位标签是否存在，如果存在就向下继续执行；如果不存在，直到20秒上限就抛超时异常
+WebDriverWait(driver, 20, 0.5).until(EC.presence_of_element_located((By.LINK_TEXT, '好123')))
+
+print(driver.find_element_by_link_text('好123').get_attribute('href'))
+driver.quit()
+
  • 参数 20 表示最长等待 20 秒
  • 参数 0.5 表示 0.5 秒检查一次规定的标签是否存在
  • presence_of_element_located((By.LINK_TEXT, '好123')) 示通过链接文本内容定位标签

# 6、开启无界面模式

绝大多数服务器是没有界面的，所有需要使用 selenium 无头浏览器，有 2 种方式：

  • PhantomJS：本身就是无界面浏览器，但可能会被识别网站开发者反识别出来。（不推荐）
  • Chrome：新版 Chrome 支持无界面模式了，不过需要多一些配置。（推荐）

注意：MacOS 中 chrome 浏览器 59+版本，Linux 中 57+版本才能使用无界面模式。

方法：

# 创建配置对象
+options = webdriver.ChromeOptions()
+# 配置对象添加开启无界面模式的命令
+options.add_argument('--headless')
+# 配置对象添加禁用gpu的命令
+options.add_argument('--disable-gpu')
+
+# 实例化带有配置对象的driver对象
+driver = webdriver.Chrome(chrome_options=options)
+

# 7、使用代理 ip

selenium 控制浏览器也是可以使用代理 ip 的。

方法：

# 创建配置对象
+options = webdriver.ChromeOptions()
+
+# 配置代理ip
+options.add_argument('--proxy-server=http://150.138.253.70:808')
+
+# 实例化带有配置对象的driver对象
+driver = webdriver.Chrome(chrome_options=options)
+

注意：更换 ip 代理，必须重新启动浏览器。

# 8、替换 user-agent

selenium 控制谷歌浏览器时，User-Agent 默认是谷歌浏览器的，有时候我们可能需要对 User-Agent 进行替换，新版 Chrome 也支持配置 User-Agent。

方法：

# 创建配置对象
+options = webdriver.ChromeOptions()
+
+# 更换User-Agent
+options.add_argument('--user-agent=Opera/9.23 (X11; Linux x86_64; U; en)')
+
+# 实例化带有配置对象的driver对象
+driver = webdriver.Chrome(chrome_options=options)
+

安利：在线查看 User-Agent 小工具 http://service.spiritsoft.cn/ua.html (opens new window)

+ +
+
#Python爬虫#Selenium
Python - 爬虫之数据提取
Python - 爬虫之Scrapy

+ ← + Python - 爬虫之Scrapy→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1084c4/index.html b/pages/1084c4/index.html new file mode 100644 index 000000000..c9188db4b --- /dev/null +++ b/pages/1084c4/index.html @@ -0,0 +1,106 @@ + + + + + + 热修复与插件化基础 - Java与Android虚拟机 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-05-15
目录

热修复与插件化基础 - Java与Android虚拟机

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、Java虚拟机（JVM）

# 1、JVM整体结构

  1. 使用javac将java文件编译成class文件。
  2. 类加载器（ClassLoader）将class字节码加载进JVM对应的内存中。
  3. JVM将内存分配给方法区、堆区、栈区、本地方式栈4个部分，这4个部分分别存储字节码不同的部分。
  4. 垃圾回收器（gc）会管理整个内存空间中的垃圾。

# 2、Java代码的编译和执行过程

下图是Java代码编译的详细流程（即，javac的执行过程），了解即可，一般只要知道java文件是通过javac命令编译成class文件，再通过java命令运行的就可以了，如：

javac Hello.java
+java Hello
+

# 3、类加载器

# 1）Java中的类加载器

# 2）加载流程

  • Loading：类的信息从文件中获取并载入到JVM的内存中。
  • Verifying：检查读入的结构是否符合JVM规范的描述。
  • Preparing：分配一个结构用来存储类信息。
  • Resolving：把类的常量池中的所有符号引用变成直接引用。
  • Initializing：执行静态初始化程序，把静态变量初始化成指定的值。

# 4、内存管理

java中的内存管理指的是下图中“内存空间”部分的内存操作。

# 1）Java栈区：

作用：存放java方法执行时所有的数据。 +组成：由栈帧组成，一个栈帧代表一个方法的执行。

Java栈帧：每个方法从调用到执行完成就对应一个栈帧在虚拟机栈中入栈到出栈。它描述了一个方法的局部变量表、栈操作数、动态链接、方法出口。

# 2）本地方法栈

与Java栈区基于一致。

作用：本地方法栈是专门为native方法服务的。

# 3）方法区

存储被虚拟机加载的类信息、常量、静态常量、即时编译器编译后等数据（这些数据在程序启动后会永远占据内存）。

# 4）堆区

作用：所有通过new创建的对象的内存都在堆中分配。 +特点：是虚拟机中最大的一块内存，是GC要回收的部分。

对于堆区，其内存结构还有些不一样的地方，先看下图：

简单来说，堆区分为新生代（Young Generation）与老年代（Old Generation），程序在创始对象时，对象会先被分配到新生代中，当新生代区内存不足时，JVM会通过一定的算法规则将新生代中的对象转移至老年代中，当新生代与老年代都没有足够的内存空间时，JVM就会抛出OOM异常。

# 5、垃圾回收

# 1、垃圾收集算法

# 1）引用记数算法（jdk1.2之前）

在内存创建对象的同时，会为它创建一个引用记数器，并将引用记数器加1，每次有引用引用到此对象时，记数器就会累计加1，而当其中一个引用销毁时，记数器就会减1，当引用记数器为0时，说明该对象已经是垃圾对象，下次gc时，对象就会被回收了。

弊端： +对象A与对象B互相引用时，这2个对象的引用记数器永远是正数，当这2个对象都没有被其他对象所引用时（对象不可达），会因为它们的引用记数器不为0导致它们不会被gc回收。

# 2）可达性算法（jdk1.2 +）

也称为根搜索算法。把程序所有的引用关系看做是一张图（有向图），从GC Root节点开始寻找所有的引用节点，当所有的引用节点寻找完毕之后，剩余的节点被认为是没有引用的节点，即不可达的节点，就是垃圾对象。

上图中ObjD、E、F因为没有路径可达，所以是垃圾对象。

# 2、引用的类型

java中的引用类型有4种：强引用、软引用、弱引用、虚引用。其中，强引用和弱引用在开发中最常用。

弱引用的创建

// 强引用
+Object obj = new Object();
+// 弱引用，此时obj与wf都引用了Object对象
+WeakReference<Object> wf = new WeakReference<Object>(obj);
+// 断开强引用，此时只有wf引用这个Object对象
+obj = null;
+// 通用弱引用获取Object对象（可能为null）
+wf.get();
+

在使用wf.get()时，要判断获取到的对象是否为null，因为弱引用不会阻止对象的回收。

# 3、垃圾回收算法

# 1）标记-清除算法

从根集合遍历所有的引用，上图中，根集合引用了A，A引用了C，B是不可达的对象引用，在扫描阶段中，B会被标记为垃圾对象，当垃圾回收机制执行时，会直接将B对象置为空，此时内存块中就只剩下A、C对象引用，B就被垃圾回收给回收掉了。 +优点：不需要进行对象的移动，仅对不存活的对象进行处理，在存活对象比较多的情况下极为高效。 +缺点：由于标记-清除算法会直接回收掉不存活的对象，会造成内在碎片，不利于后续对象的分配

# 2）复制算法

从根集合开始遍历，上图中，遍历到A时是可达的，就把A复制到另一块空闲的内存中，继续遍历，发现B不可达，直接跳过，往后，发现C可达，就把C同样地复制到这块空闲内存中，等所有复制都处理完时，把原来的内存空间清空，只保留复制后的这块内存空间。 +优点：当存活对象比较少时，极为高效，且不会有产生内存碎片。 +缺点：需要一块内存作为交换空间来进行对象的移动。

# 3）标记-整理算法

从根集合开始遍历，通过对整个内存区的扫描，将可回收对象扫描出来，上图中，到了第二阶段，就将B标记为可回收对象，到了第三个阶段，直接扫描并消除内存中被标记的对象，同时，在回收不存活对象占用的空间时，会将内存中所有存活对象往左端空闲处移动，并更新对应的指针。

这三种算法各有优劣，JVM在处理垃圾时会整合去使用，并不是只使用其中某个算法。当内存中存活的对象比较少时，采用“复制算法”去处理垃圾对象；当内存中存活的对象比较多时，会采用“标记-整理算法”或“标记-清除算法”去处理垃圾对象。

# 4、触发回收

  • Java虚拟机无法再为新对象分配内存空间了
  • 手动调用System.gc()方法（强烈不推荐，不会马上执行，却会加大虚拟机压力）
  • 低优先级的GC线程，被启动了。

# 二、Android 虚拟机

# 1、Dalvik VM 与 JVM 的不同

  • 执行的文件不同，一个是class，一个是dex。
  • 类加载的系统与JVM区别较大。
  • 可以同时存在多个DVM，但JVM只能存在一个。
  • Dalvik是基于寄存器的，而JVM是基于栈的。

# 2、Dalvik VM 与 ART 的不同

  • DVM使用JIT来将字节码转换成机器码，效率低。
  • ART采用了AOT预编译技术，执行速度更快。
  • ART会占用更多的应用安装时间和存储空间。
+ +
+
#热修复#虚拟机#JVM#Dalvik#ART
热修复与插件化基础 - dex与class
热修复与插件化基础 - Java与Android的类加载器

+ ← + 热修复与插件化基础 - Java与Android的类加载器→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/117e5d/index.html b/pages/117e5d/index.html new file mode 100644 index 000000000..4e5bfd269 --- /dev/null +++ b/pages/117e5d/index.html @@ -0,0 +1,148 @@ + + + + + + Kotlin - 函数式编程 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-02-04
目录

Kotlin - 函数式编程

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 函数式编程

什么是函数式编程，以下是维基百科给出的答案：

函数式编程（英语：functional programming）或称函数程序设计、泛函编程，是一种编程范式，它将电脑运算视为函数运算，并且避免使用程序状态以及易变对象。其中，λ 演算（lambda calculus）为该语言最重要的基础。而且，λ 演算的函数可以接受函数当作输入（引数）和输出（传出值）。比起指令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

这种文趋趋的概念，了解过后有个印象就好了，下面这句话才重要：

在函数式编程中，函数是第一类对象，意思是说一个函数，既可以作为其它函数的参数（输入值），也可以从函数中返回（输入值），被修改或者被分配给一个变量。

这不就是高阶函数的定义吗？是的，不过，函数式编程是一种编程范式，而高阶函数是函数式编程的基本技术，换句话说：函数式编程包括但不限于高阶函数这一种技术，还有闭包、柯里化、偏函数等等。

# 闭包

闭包就是能够读取其他函数内部变量的函数。对于支持函数式编程的语言来说，可以在一个函数 A 内部再定义一个函数 B，函数 B 可以访问函数 A 中的成员，通常函数 A 的返回结果就是函数 B，并且闭包会延长函数 A 的生命周期（函数 A 中的成员不会被回收）。

个人理解：闭包中两个函数的关系，跟内部类与外部类的关系很像，不过闭包较为轻量。

我们可以使用闭包来实现斐波那契数列，斐波那契数列的核心要点就是缓存前面的结果，供后续计算使用，使用闭包正合适：

fun fib(): () -> Long {
+    var prev = 0L
+    var current = 1L
+    return fun(): Long {
+        val result = current
+        current += prev
+        prev = result
+        return result
+    }
+}
+fun main() {
+    val fib = fib() // fib是fib()内的匿名函数
+    println(fib())　// 1
+    println(fib()) // 1
+    println(fib()) // 2
+    println(fib()) // 3
+    println(fib()) // 5
+    println(fib()) // 8
+}
+

可以看到，每次调用这个 fib 匿名函数，出来的结果是不一样的，说明闭包确实可以让内部函数持有外部函数的成员，并且延长了外部函数作用域中变量的生命周期。

# 柯里化

什么是柯里化？贴一个维基百科对柯里化的定义：

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

假设有一个求和函数 add，它接收多个参数，满足函数柯里化的前提：

fun add(num1: Int, num2: Int): Int {
+    return num1 + num2
+}
+fun main() {
+    val result = add(1, 2)
+    println(result) // 3
+}
+

我们如何把上述函数 add 进行柯里化呢？根据柯里化的定义，我们需要把函数 add 进行两处修改：

  • 参数列表：把接收多个参数转变成接收单个参数。
  • 返回值：返回接收余下参数和结果的函数。
fun add(num1: Int): (Int) -> Int {
+    return fun(num2: Int): Int {
+        return num1 + num2
+    }
+}
+fun main() {
+    val result = add(1)(2)
+    println(result) // 3
+}
+

可以看到函数 add 的调用形式发现了变化，从 add(1, 2) 变换成了 add(1)(2)，这就是柯里化。另外，因为 Kotlin 支持智能类型推导，所以柯里化函数 add 还可以进行简化：

fun add(num1: Int) = fun(num2: Int) = num1 + num2
+

这变化也太神奇了吧，简化后的柯里化函数 add 让人眼前一亮。同样的，如果参数个数为 3，4，..n 个，对于 Kotlin 来说，柯里化他们也就是一把梭的事。

# 偏函数

偏函数（Partial function）就是把一个函数的某些参数给固定住（也就是设置默认值），返回一个新的函数，调用这个新函数会更简单。

注意：偏函数与函数默认参数很像，但两者是有区别的。默认参数是在原函数的基础上给某些参数指定默认值，调用的时候还是原来那个函数，而偏函数一般情况下则是通过某种手段生成的新函数，后续调用的是这个新的函数。

举个例子，有一个可以构建不同编码字符串的函数 buildString：

fun buildString(byteArray: ByteArray, charsetName: String): String {
+    return String(byteArray, charset(charsetName))
+}
+fun main() {
+    val result = buildString("lqr".toByteArray(), "UTF-8")
+    println(result)
+}
+

现在编程都会使用 UTF-8 作为默认编码，所以，为了不在每次调用这个函数的时候都要传入 charsetName 这个参数，可以为函数指定默认参数解决：

fun buildString(byteArray: ByteArray, charsetName: String = "UTF-8"): String {
+    return String(byteArray, charset(charsetName))
+}
+fun main() {
+    val result = buildString("lqr".toByteArray())
+    println(result)
+}
+

如果用偏函数来处理，会有什么不同呢？可惜了，Kotlin 本身还没有提供类似 python 那种 functools.partial 用于生成偏函数的功能，不过我们可以借助扩展函数实现类似的偏函数生成功能：

// 对Function2进行扩展，partial2可以生成带有默认参数2的偏函数，partial1则是可以生成带有默认参数1的偏函数
+fun <P1, P2, R> Function2<P1, P2, R>.partial2(p2: P2) = fun(p1: P1) = this(p1, p2)
+fun <P1, P2, R> Function2<P1, P2, R>.partial1(p1: P1) = fun(p2: P2) = this(p1, p2)
+
+fun main(args: Array<String>) {
+    val buildStrPartial2 = ::buildString.partial2("UTF-8")
+    val result = buildStrPartial2("lqr".toByteArray())
+    println(result)
+}
+

个人认为，现阶段在 Kotlin 中以这种方式使用偏函数还不如直接使用函数默认参数来的实在，对于偏函数，知道是个什么东西就好了。

+ +
+
#闭包 Closure#柯里化 Currying#偏函数 Partial
Kotlin - 尾递归优化
Kotlin - 改良设计模式 - 工厂模式

+ ← + Kotlin - 改良设计模式 - 工厂模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1195b1/index.html b/pages/1195b1/index.html new file mode 100644 index 000000000..8694d3d56 --- /dev/null +++ b/pages/1195b1/index.html @@ -0,0 +1,294 @@ + + + + + + RePluginX - 兼容AndroidX并加入新特性开发纪要 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-12-12
目录

RePluginX - 兼容AndroidX并加入新特性开发纪要

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、RePluginX

因 RePlugin 不支持 AndroidX，官方 github 已经好久不见有新的 Commits，一堆 issue 也没处理，难免让人觉得官方是否已经放弃了该项目。而公司开发需要使用到 RePlugin，但需要对其进行定制，向官方提交 pr 大概率是石沉大海，脑袋一拍，不如做做善事，自己基于 RePlugin 维护一个功能更强的 RePluginX，供有需要者使用，本人精力有限，欢迎有能力者一起维护~

注：如果 RePlugin 官方又开始活跃起来，积极加入一些新特性，且满足你的使用需求的话，强烈建议使用官方 RePlugin，毕竟开源不易。

# 1、版本信息

# 2、新特性

相比 RePlugin，RePluginX 支持以下新特性：

  • ✅ 支持 AnroidSupport、AndroidX 工程
  • ✅ 支持 RePlugin Transform 开关 配置 (enable)
  • ✅ 支持 坑位 Activity 的屏幕方向 配置 (screenOrientation)
  • ✅ 支持 多版本 AGP 2.x 3.x 4.x （7.x 暂未兼容）
  • 📝 未完待续...

注：后续 RePluginX 加入新特性时，我会在本文中继续追加。

AGP Gradle Wrapper Support
2.3.3 3.3 / 4.6 ✔️
3.2.1 4.6 ✔️
3.5.3 5.4.1 ✔️
4.1.1 6.5 ✔️
7.0.4 7.0.2 ❌

注：AGP 即 Android Gradle Plugin

# 二、lib 库兼容 AndroidX

RePluginX 即可以在 Support 工程中使用，也可以在 AndroidX 工程中使用，原理其实很简单：运行时判断工程使用的 android 兼容包类型，再加载其中一类代码即可。

原则：（宿主/插件）工程的类加载器只加载 support 和 androidx 其中的一种类，另一种类不能被类加载器加载。

关键实现步骤如下：

# 1、引入 android 兼容包

通过 provided / compileOnly 方式同时引入 support-v4 和 androidx.appcompat，这样 lib 就能正常使用各自兼容包的 api 来编写代码，而编译时又不会包含 support-v4 和 androidx.appcompat 的类，避免工程编译时出现类冲突问题。

provided 'com.android.support:support-v4:25.2.0'
+provided 'androidx.appcompat:appcompat:1.1.0'
+provided 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
+

注：因为 support-v4 包含有 localbroadcastmanager，而 androidx.appcompat 则不包含，所以需要单独引入 androidx.localbroadcastmanager。

# 2、判断 android 兼容包类型

RePuginX 的 lib 库需要在运行时，通过反射判断（宿主/插件）工程真正使用的 android 兼容包类型，判断逻辑代码如下：

/**
+ * 兼容层配置
+ *
+ * @author LQR
+ * @since 2021/12/8
+ */
+public final class CompatConfig {
+
+    private static volatile CompatConfig sInstance;
+
+    public static final boolean DEPENDENCY_ANDROIDX;
+    public static final boolean DEPENDENCY_SUPPORT;
+
+    static {
+        // FIX: 宿主工程（空壳）不一定会依赖 androidx.appcompat，但是一定会依赖 androidx.localbroadcastmanager
+        DEPENDENCY_ANDROIDX = findClassByClassName("androidx.localbroadcastmanager.content.LocalBroadcastManager");
+        DEPENDENCY_SUPPORT = findClassByClassName("android.support.v4.content.LocalBroadcastManager");
+        // DEPENDENCY_ANDROIDX = findClassByClassName("androidx.fragment.app.FragmentActivity");
+        // DEPENDENCY_SUPPORT = findClassByClassName("android.support.v4.app.FragmentActivity");
+    }
+
+    ...
+
+    private static boolean findClassByClassName(String className) {
+        boolean hasDependency;
+        try {
+            Class.forName(className);
+            hasDependency = true;
+        } catch (ClassNotFoundException e) {
+            hasDependency = false;
+        }
+        return hasDependency;
+    }
+}
+

# 3、替换掉直接引入的 android 兼容包相关代码

RePlugin 的 (host/plugin) lib 库存在着大量直接引用 support 的代码，比如 LocalBroadcastManager、@NonNull 等等，@NonNull 直接全部移除掉即可，而 LocalBroadcastManager 则需要做一层包装，针对不同的兼容包，加载对应的 LocalBroadcastManager。为了让 lib 库原来的代码尽量少改动，我创建了一个同名类 LocalBroadcastManager，由它来判断具体加载哪个兼容包下的 LocalBroadcastManager：

/**
+ * LocalBroadcastManager 兼容层
+ *
+ * @author LQR
+ * @since 2021/12/8
+ */
+public abstract class LocalBroadcastManager {
+
+    public static LocalBroadcastManager getInstance(Context context) {
+        if (CompatConfig.DEPENDENCY_ANDROIDX) {
+            return new LocalBroadcastManagerAndroidX(context);
+        } else if (CompatConfig.DEPENDENCY_SUPPORT) {
+            return new LocalBroadcastManagerSupport(context);
+        }
+        return null;
+    }
+
+    public abstract void registerReceiver(BroadcastReceiver receiver, IntentFilter filter);
+
+    public abstract void unregisterReceiver(BroadcastReceiver receiver);
+
+    public abstract boolean sendBroadcast(Intent intent);
+
+    public abstract void sendBroadcastSync(Intent intent);
+
+}
+
+/**
+ * AndroidX 的 LocalBroadcastManager
+ *
+ * @author LQR
+ * @since 2021/12/8
+ */
+public class LocalBroadcastManagerAndroidX extends LocalBroadcastManager {
+
+    private final androidx.localbroadcastmanager.content.LocalBroadcastManager localBroadcastManager;
+
+    public LocalBroadcastManagerAndroidX(Context context) {
+        localBroadcastManager = androidx.localbroadcastmanager.content.LocalBroadcastManager.getInstance(context);
+    }
+
+    @Override
+    public void registerReceiver(BroadcastReceiver receiver, IntentFilter filter) {
+        localBroadcastManager.registerReceiver(receiver, filter);
+    }
+
+    @Override
+    public void unregisterReceiver(BroadcastReceiver receiver) {
+        localBroadcastManager.unregisterReceiver(receiver);
+    }
+
+    @Override
+    public boolean sendBroadcast(Intent intent) {
+        return localBroadcastManager.sendBroadcast(intent);
+    }
+
+    @Override
+    public void sendBroadcastSync(Intent intent) {
+        localBroadcastManager.sendBroadcastSync(intent);
+    }
+}
+
+/**
+ * AndroidSupport 的 LocalBroadcastManager
+ *
+ * @author LQR
+ * @since 2021/12/8
+ */
+public class LocalBroadcastManagerSupport extends LocalBroadcastManager {
+
+    private final android.support.v4.content.LocalBroadcastManager localBroadcastManager;
+
+    public LocalBroadcastManagerSupport(Context context) {
+        localBroadcastManager = android.support.v4.content.LocalBroadcastManager.getInstance(context);
+    }
+
+    @Override
+    public void registerReceiver(BroadcastReceiver receiver, IntentFilter filter) {
+        localBroadcastManager.registerReceiver(receiver, filter);
+    }
+
+    @Override
+    public void unregisterReceiver(BroadcastReceiver receiver) {
+        localBroadcastManager.unregisterReceiver(receiver);
+    }
+
+    @Override
+    public boolean sendBroadcast(Intent intent) {
+        return localBroadcastManager.sendBroadcast(intent);
+    }
+
+    @Override
+    public void sendBroadcastSync(Intent intent) {
+        localBroadcastManager.sendBroadcastSync(intent);
+    }
+}
+

接着就是将 lib 库中所有的 LocalBroadcastManager 导包进行替换即可。

注：RePlugin 的 (host/plugin) gradle 插件源码中也有着许多关于 support 的处理部分，参照之，并对 androidx 加入同样的处理代码配置即可，感兴趣的可自行查看 RePluginX 的 gradle 插件源码部分：replugin-host-gradle (opens new window)、replugin-plugin-gradle (opens new window)

# 三、坑位屏幕方向

因公司业务涉及 TV 行 业，TV 产品须固定为横屏，而 RePlugin 默认的 Activity 坑位是竖屏方向（插件清单文件中指定横屏是无效的，不妨自己试试看），所以需要对 RePlugin 进行定制，RePluginX 为了让满足 Moblie、TV 两类产品的需要，于是，在 host 的 gradle 配置中加入了 screenOrientation 配置项，宿主工程可以要根据项目需要，配置坑位屏幕方向：

apply plugin: 'replugin-host-gradle'
+repluginHostConfig {
+    screenOrientation = 'landscape' // 坑位 Activity 方向（portrait / landscape）
+    ...
+}
+

要实现这个功能也简单，只需要修改 (host) gradle 插件的两处地方即可：

  1. RePlugin.groovy 文件
class RepluginConfig {
+
+    /**
+     * 屏幕方向
+     * 注意：默认是坚屏坑位：portrait，可配置为横屏坑位：landscape。
+     */
+    def screenOrientation = "portrait"
+    ...
+}
+
  1. ComponentsGenerator.groovy 文件
class ComponentsGenerator {
+    // def static final oriV = 'portrait'
+    def static oriV = 'portrait'
+
+    def static generateComponent(def applicationID, def config) {
+        updateConfig(applicationID, config)
+        ...
+    }
+
+    def static generateMultiProcessComponent(def applicationID, def config) {
+        updateConfig(applicationID, config)
+        ...
+    }
+
+    /**
+     * 更新配置
+     */
+    def static updateConfig(def applicationID, def config){
+        oriV = config.screenOrientation
+    }
+}
+

# 四、发布 jitpack

网上有很多发布 jitpack 的教程，基本操作如下：

Step 1： 工程根目录下的 build.gradle 中添加如下插件依赖：

classpath 'com.github.dcendents:android-maven-gradle-plugin:2.1'
+

Step 2： lib 库目录下的 build.gradle 中配置该插件：

apply plugin: 'com.github.dcendents.android-maven'
+group='com.github.username' // 例如：com.github.GitLqr
+

Step 3： 在工程的 github 网页中创建一个 release：

Step 4： 在 jitpack.io (opens new window) 搜索 username/repoName：

注：release 刚刚创建时，还需要等 jitpack.io 排队抓取，大概需要 5-10 分钟，可以通过图中 Status 栏判断当前的抓取状态，当 Log 栏出现文档 icon 时，说明抓取完毕，项目就可以正常依赖使用 lib 库了。

Step 5： 点击 Get it 按钮，根据依赖指引在项目工程中添加依赖即可：

以上几步便是 jitpack 的发布流程了，眼尖的你可能会发现图中有个 Subproject 下拉按钮，展开之后是长这样子的：

这里需要提一下，网上的教程所举案例基本上都是一个 repo 对应一个 lib 库(module)，是不会有 Subproject 下拉按钮的，而 RePluginX 则不一样，RePluginX 这个 repo 中包含了 2 个 lib 库和 2 个 gradle 插件：

是的，jitpack.io 支持一个 repo 多 module 发布，通过在 google 上搜索到的几篇文章，给出的结论是，不管是 gradle 插件，或是 lib 库，配置的方式跟上面的一样，jitpack.io 在抓取的时候会自动识别区分，但是依赖的规则会发生变化：

// 一个repo对应一个lib库
+compile 'com.github.USERNAME:REPO:VERSION'
+
+// 一个repo对应多个lib库
+compile 'com.github.USERNAME.REPO:MODULE:VERSION'
+

比如【replugin-host-gradle】、【replugin-host-library】... 的 build.gradle 中都是如下配置：

apply plugin: 'com.github.dcendents.android-maven'
+group='com.github.GitLqr'
+

之后各自的依赖配置如下：

classpath 'com.github.GitLqr.RePluginX:replugin-host-gradle:v0.0.4'
+implementation 'com.github.GitLqr.RePluginX:replugin-host-library:v0.0.4'
+classpath 'com.github.GitLqr.RePluginX:replugin-plugin-gradle:v0.0.4'
+implementation 'com.github.GitLqr.RePluginX:replugin-plugin-library:v0.0.4'
+

关于jitpack.io 一个 repo 发布多个 module 的相关文章：

# 五、管理多个工程

RePluginX 与 RePlugin 在工程结构上有些许变化：

Name RePlugin RePluginX
replugin-host-gradle project module
replugin-host-library project module
replugin-plugin-gradle project module
replugin-plugin-library project module
replugin-sample/host project project
replugin-sample/plugin/plugin-demo1 project project
replugin-sample/plugin/plugin-demo2 project project
replugin-sample/plugin/plugin-demo3-kotlin project project
replugin-sample/plugin/plugin-webview project project
  • 在 RePlugin 项目中，RePlugin 仅仅只是一个目录，该目录下包含了 n 个 project，例如【replugin-host-library】【replugin-plugin-library】分别是 2 个 project（有各自的 settings.gradle 文件）
  • 在 RePluginX 项目中，RePluginX 是一个真正的 project，【replugin-host-library】【replugin-plugin-library】 则是 RePluginX 的 2 个 module，RePluginX 现有 4 个 module，即【replugin-host-gradle】【replugin-host-library】【replugin-plugin-gradle】【replugin-plugin-library】。

接下来就比较有意思了，我们知道 RePlugin 仅仅只是一个目录，这意味了，其下的所有工程，都必须各自开一个 AndroidStudio 来进行编码、调试，如果你电脑内存够大，还配有多个显示器，那可能也觉得没什么大不了的，但如果没有以上条件，就会觉得相当难受了。另外，我个人认为，如果一个项目，能在一个 AS 窗口下管理宿主和插件，会比较舒服（我希望一个 AS 窗口对应一个项目，而不是具体哪个工程），RePluginX 通过 gradle 3.1 提供的 includeBuild 解决了这个问题，这是 RePluginX 根目录下 settings.gradle 文件中的内容：

// 当前工程 Module
+include ':replugin-host-gradle'
+include ':replugin-host-library'
+include ':replugin-plugin-gradle'
+include ':replugin-plugin-library'
+
+// Support Demo 工程
+includeBuild('./replugin-sample/host')
+includeBuild('./replugin-sample/plugin/plugin-demo1')
+includeBuild('./replugin-sample/plugin/plugin-demo2')
+includeBuild('./replugin-sample/plugin/plugin-demo3-kotlin')
+includeBuild('./replugin-sample/plugin/plugin-webview')
+includeBuild('./replugin-sample-extra/fresco/FrescoHost')
+includeBuild('./replugin-sample-extra/fresco/FrescoPlugin')
+
+// AndroidX Demo 工程
+includeBuild('./repluginx-sample/host')
+includeBuild('./repluginx-sample/plugin/plugin-demo1')
+

并且在各个 project 根目录下的 settings.gradle 文件中指定了 project 的名字，避免命名冲突：

// replugin-sample/host/settings.gradle
+rootProject.name = 'replugin-sample.host'
+
+// repluginx-sample/host/settings.gradle
+rootProject.name = 'repluginx-sample.host'
+

于是乎，在 AS 打开 RePluginX 工程并加载完成之后，可以看到运行窗口会出现以下配置列表：

这下就舒服了，强烈推荐业务项目也参照 RePluginX 管理多个 project 的方式，利用 includeBuild 将 宿主工程 和 插件工程 用一个工程来管理，除此之外 includeBuild 还可以配置替换掉子工程中的 Module 依赖，更多 includeBuild 的使用请移步查阅 gradle 官方文档：https://docs.gradle.org/current/userguide/composite_builds.html (opens new window)

# 六、最后

如果你觉得文章还不错，或是 RePluginX 这个项目能够对你有所帮助的话，不妨点个免费的 Star 或 Fork，这对我帮助很大，感谢。

+ +
+
#插件化#RePlugin#RePluginX#AndroidX#jitpack
RePlugin集成ARouter
iOS - Swift 仿微信小红点(无数字)

+ ← + iOS - Swift 仿微信小红点(无数字)→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/13365e/index.html b/pages/13365e/index.html new file mode 100644 index 000000000..027d1d258 --- /dev/null +++ b/pages/13365e/index.html @@ -0,0 +1,202 @@ + + + + + + Android - OkHttp 访问 https 的怪问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2024-04-21
目录

Android - OkHttp 访问 https 的怪问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

最近使用 OkHttp 访问 https 请求时，在个别 Android 设备上遇到了几个问题，搜罗网上资料，经过一番实践后，问题得到了解决，同时，我也同步升级了我的 https 证书忽略库 ANoSSL (opens new window) ，在此，对搜集到的资料和问题解决方案做个记录。

文章中的代码实现可到 GitHub 仓库中自行获取：

# 二、协议

要想让 OkHttp 支持 https 请求，需要先对 https 证书协议以及 OkHttp 的支持情况有个大概了解：

  1. 【服务端】https 证书是配置在服务端的，大体分为 SSL 和 TLS 两种协议，TLS (Transport Layer Security) 是 SSL 的升级版本，可以修复现有的 SSL 漏洞。
  2. 【客户端】OkHttp 支持过的 https 证书协议有 SSLv3 (1996)、TLSv1 (1999)、TLSv1.1 (2006)、TLSv1.2 (2008) 和 TLSv1.3 (2018)，但要注意，OkHttp 从 2014 年开始就放弃对 SSLv3 支持，2019 年（3.13.x）开始放弃对 TLSv1 和 TLSv1.1 的支持，以 TLSv1.2 为最低支持标准。

资料来源：

我找了几个网站，它们支持的 https 证书协议支持情况如下：

支持协议 www.baidu.com www.fresco-cn.org api.github.com
TLS1.3 No No Yes
TLS1.2 Yes Yes Yes
TLS1.1 Yes Yes No
TLS1.0 Yes Yes No
SSL3.0 Yes No No
SSL2.0 No No No

数据来源：

可以看到，这几个网站都支持 TLS1.2，而对于其他的 ssl 协议的支持力度各不相同，目前来说，TLS1.2 才是主流，但有可能存在个别网站不支持，所以，我们在使用 OkHttp 发起 https 请求之前，首先要搞清楚，就是服务端（接口）支持的 ssl 协议有哪些。确认好服务端的 ssl 协议支持情况后，就可以开始配置客户端的 OkHttp 了。

# 三、配置

这里有个问题，是否只要发送 https 请求，就一定需要给 OkHttp 配置 https 校验呢？答案是非必须的，正常情况下 OkHttp 会使用默认的系统配置，用于访问一般的 https 请求足以，但往往有一些特殊情况，就需要我们在工程中进行单独配置并实现校验规则，例如以下几种情况：

  1. 服务端使用了非 CA 认证的私有 https 证书
  2. 服务端使用了过期的 https 证书
  3. 客户端支持某个 ssl 协议但是默认没有启用

好了，下面开始对 OkHttp 进行配置，大体分两步：

  1. 配置 SSLSocketFactory：用于指定支持某种 ssl 协议的 SocketFactory
  2. 配置 HostnameVerifier：用于检查证书中的主机名与使用该证书的服务器的主机名是否一致
val sslSocketFactory = NoSSLSocketClient.getTLSSocketFactory()
+val x509TrustManager = NoSSLSocketClient.getX509TrustManager()
+val hostnameVerifier = NoSSLSocketClient.getHostnameVerifier()
+
+val okHttpClient = OkHttpClient.Builder()
+    .sslSocketFactory(
+        sslSocketFactory,
+        x509TrustManager // 必须指定该参数，否则 Android 10 及以上版本会闪退
+    )
+    .hostnameVerifier(hostnameVerifier)
+    .build()
+

这里主要看 sslSocketFactory 是怎么创建的，前面说过，https 证书大体分为 SSL 和 TLS 两种协议，这里的 SSLSocketFactory 也一样，以下是两种协议对应的创建方式，它们仅仅只是在获取 SSLContext 实例时传的参数不同而已：

// SSL（不推荐）
+public static SSLSocketFactory getSSLSocketFactory() {
+    try {
+        SSLContext sslContext = SSLContext.getInstance("SSL");
+        sslContext.init(null, getTrustManager(), new SecureRandom());
+        return sslContext.getSocketFactory();
+    } catch (Exception e) {
+        throw new RuntimeException(e);
+    }
+}
+
+// TLS（推荐）
+public static SSLSocketFactory getTLSSocketFactory() {
+    try {
+        SSLContext sslContext = SSLContext.getInstance("TLS");
+        sslContext.init(null, getTrustManager(), new SecureRandom());
+        return sslContext.getSocketFactory();
+    } catch (Exception e) {
+        throw new RuntimeException(e);
+    }
+}
+

注：因为 TLS 是 SSL 的升级版本，且 SSLv3 已经弃用，TLSv1.2 是现在的主流，所以推荐使用 SSLContext.getInstance("TLS")，除非服务端证书只支持 SSLv3，但是目前来说应该不太可能了。

# 四、问题

正确配置好 SSLSocketFactory 和 HostnameVerifier 之后，理论上就可以顺利访问 https 了，但是，在不同的安卓设备上，可能还是会出现访问不通甚至崩溃的情况。

# 1、Failure in SSL library, usually a protocol error

这个问题算是比较常见的，在搜索引擎里，随便一搜就是一堆，具体报错信息如下：

javax.net.ssl.SSLHandshakeException: javax.net.ssl.SSLProtocolException: SSL handshake aborted: ssl=0x4f859620: Failure in SSL library, usually a protocol error
+error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version (external/openssl/ssl/s23_clnt.c:741 0x4c203d5c:0x00000000)
+    at com.android.org.conscrypt.OpenSSLSocketImpl.startHandshake(OpenSSLSocketImpl.java:448)
+    at okhttp3.internal.io.RealConnection.connectTls(RealConnection.java:239)
+    ...
+    Suppressed: javax.net.ssl.SSLHandshakeException: javax.net.ssl.SSLProtocolException: SSL handshake aborted: ssl=0x4f859620: Failure in SSL library, usually a protocol error
+

从异常信息中可知，SSL 握手中断，提示通常是协议问题，实际情况也基本如它所言，我遇到的有以下两种可能：

  1. 【客户端】设备上使用了代理，比如 Charles、Fiddler 这些抓包工具
  2. 【客户端】使用的证书协议与服务端支持的不一致

第 1 种情况，可以先把代理去掉再排查，抓包工具不是本文的讨论的内容，这里就不展开了。 +第 2 种情况，是给 OkHttp 配置的协议搞错了，或者是设备 "不支持" 这个协议。

可以先确认 OkHttp 配置的 SSLSocketFactory 使用的协议是否为服务端支持的协议，前面提到过怎么查看服务端支持的协议，以及怎么给 OkHttp 配置对应协议的 SSLSocketFactory，相信这个很好排查确认。如果确认配置没有搞错，并且还是会报这个异常的话，就得考虑一下当前的客户端设备是否 "不支持" 这个协议了？

注意：这里的 "不支持" 加了双引号，具体原因下面马上解释。

下面是 Android 官方文档中，Socket 客户端证书支持的情况表格，从表格中可以看到 TLSv1.1 和 TLSv1.2 从 Android4.1(16) 开始就已经支持了，从 Android 5.0(20) 开始默认启用，而 SSLv3 在 Android7.1(25) 之后就不再支持：

Protocol Supported (API Levels) Enabled by default (API Levels)
SSLv3 1–25 1–22
TLSv1 1+ 1+
TLSv1.1 16+ 20+
TLSv1.2 16+ 20+
TLSv1.3 29+ 29+

表格来源：https://developer.android.com/reference/javax/net/ssl/SSLSocket (opens new window)

这里我们只讨论 TLS 的情况，目前 TLS1.2 是主流，一般我们工程中给 OkHttp 配置支持 TLS 的 SSLSocketFactory，这是不会错的，但是现在遇到了这个错误，需要考虑一下我们的 app 是否运行在了 Android4.x （或者一些魔改 ROM）的系统上，虽然从 Android4.1(16) 开始就已经支持 TLSv1.2，但是默认没有启用，直到 Android 5.0(20) 才开始默认启用，我们可以通过给 SSLSocketFactory 强制启用 TLSv1.2 来解决这个问题，这里需要自定义一个 SSLSocketFactory：

/**
+ * 注：这里重载了 n 个 createSocket(...) 方法，因为篇幅问题省略掉了
+ * 详见 https://github.com/GitLqr/ANoSSL/blob/main/anossl/src/main/java/com/gitlqr/anossl/TLSSocketFactory.java
+ */
+public class TLSSocketFactory extends SSLSocketFactory {
+    ...
+
+    @Override
+    public Socket createSocket(InetAddress address, int port, InetAddress localAddress, int localPort) throws IOException {
+        return enableTLSOnSocket(delegate.createSocket(address, port, localAddress, localPort));
+    }
+
+    private Socket enableTLSOnSocket(Socket socket) {
+        if ((socket instanceof SSLSocket)) {
+            ((SSLSocket) socket).setEnabledProtocols(new String[]{"TLSv1.2"});
+        }
+        return socket;
+    }
+}
+

至此，这个问题在我们项目里就不再出现了。另外，OkHttp 从 2014 年开始就放弃对 SSLv3 支持，2019 年（3.13.x）开始放弃对 TLSv1 和 TLSv1.1 的支持，以 TLSv1.2 为最低支持标准，这里也是一个坑点，如果服务端不支持 TLSv1.2，只支持 SSLv3 或 TLSv1.1 这些旧协议的话，那么你可以通过降低 OkHttp 版本（比如：3.12.x）来予以支持。

注：通常情况下，我们会以服务器配置的 https 证书为准，所以都是优先从客户端入手解决，实在没办法的话，再考虑让服务端配合调整，建议使用 TLSv1.2。

# 2、getEnabledProtocols() 返回值类型转换异常

这是一个相当奇葩的问题，具体报错信息如下：

java.lang.ClassCastException: int[] cannot be cast to java.lang.String[]
+    at com.android.org.conscrypt.OpenSSLSocketImpl.getEnabledProtocols(OpenSSLSocketImpl.java:802)
+    at okhttp3.ConnectionSpec.isCompatible(ConnectionSpec.java:207)
+    at okhttp3.internal.connection.ConnectionSpecSelector.configureSecureSocket(ConnectionSpecSelector.java:60)
+    at okhttp3.internal.connection.RealConnection.connectTls(RealConnection.java:313)
+    at okhttp3.internal.connection.RealConnection.establishProtocol(RealConnection.java:284)
+    at okhttp3.internal.connection.RealConnection.connect(RealConnection.java:169)
+    ...
+

定位到 OkHttp 源码 ConnectionSpec.java:207 处，调用了 socket.getEnabledProtocols() 这句代码，查看该接口方法声明如下：

// android.jar javax.net.ssl.SSLSocket
+public abstract class SSLSocket extends Socket {
+    /**
+     * Returns the names of the protocol versions which are currently
+     * enabled for use on this connection.
+     * @see #setEnabledProtocols(String [])
+     * @return an array of protocols
+     */
+    public abstract String [] getEnabledProtocols();
+
+    ...
+}
+

这里明明返回的就是 String[]，不是 int[]，但是为啥还给我报类型转换异常错误呢？难道是一些接口在魔改 ROM 里被修改了吗？网上找不到与之相关的问题，百思不得其解，最终没办法，只能另辟蹊径了，前面自定义 SSLSocketFactory 的时候，我们重载了各个 Socket createSocket() 方法来强制启用 TLSv1.2，这个返回的 Socket 正好就是 SSLSocket，于是抱着试一试的心态，自定义 SSLSocket 并重写 setEnabledProtocols() 方法得以解决：

/**
+ * 注：DelegateSSLSocket 只是一个包装类而已
+ * 详见：https://github.com/GitLqr/ANoSSL/blob/main/anossl/src/main/java/com/gitlqr/anossl/DelegateSSLSocket.java
+ */
+public class TLSSocketFactory extends SSLSocketFactory {
+
+    private final String[] enabledProtocols = {"TLSv1.2"};
+
+    ...
+
+    @Override
+    public Socket createSocket(InetAddress address, int port, InetAddress localAddress, int localPort) throws IOException {
+        return enableTLSOnSocket(delegate.createSocket(address, port, localAddress, localPort));
+    }
+
+    private Socket enableTLSOnSocket(Socket socket) {
+        if ((socket instanceof SSLSocket)) {
+            // 20240405：
+            // Android 4.4 及以下版本可能存在一些奇葩问题，需要自己实现了一个 DelegateSSLSocket 来解决，
+            // 但是 Android 5.0 及以上不要使用，OkHttp 在高版本中会调用一些 DelegateSSLSocket 没有复写的方法，导致 app 崩溃。
+            if (isLtAndroid5()) {
+                socket = new DelegateSSLSocket((SSLSocket) socket) {
+                    @Override
+                    public void setEnabledProtocols(String[] protocols) {
+                        // super.setEnabledProtocols(protocols);
+                        super.setEnabledProtocols(enabledProtocols);
+                    }
+                };
+            } else {
+                ((SSLSocket) socket).setEnabledProtocols(enabledProtocols);
+            }
+        }
+        return socket;
+    }
+}
+

目前发现该问题只出现在 极个别 的 Android 4.x 设备上，在高版本 Android 系统上并未发现，所以，为了降低风险，将上述代码做了系统版本控制，运行情况是否稳定还在观察中。

好了，以上便是本篇文章的全部内容了，如果对你有帮助的话，请不吝点个赞，也可以关注我，不定时发布实践心得。

+ +
+
#第三方SDK#OkHttp#https#SSL#TLS
Android库发布至MavenCentral流程详解
Android - 混淆 java-library 工程

+ ← + Android - 混淆 java-library 工程→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/13bf45/index.html b/pages/13bf45/index.html new file mode 100644 index 000000000..9d9681513 --- /dev/null +++ b/pages/13bf45/index.html @@ -0,0 +1,270 @@ + + + + + + LinkedList与Queue源码分析 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-08
目录

LinkedList与Queue源码分析

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

上篇已经分析了基于数组实现数据存储的ArrayList（线性表），而本篇的主角是LinkedList，这个使用了链表实现数据存储的集合，它的增、删、查、改方式又会是怎样的呢？下面就开始对LinkedList的源码进行分析吧。

# 二、分析

# List

在分析LinkedList之前，还是先瞄一眼List接口，虽然前篇已经看过一遍了，但为了明确下文的分析方向，还是先把List接口中的几个增删改查方法再列一次。

public interface List<E> extends Collection<E> {
+    boolean add(E e);
+    void add(int index, E element);
+    boolean remove(Object o);
+    E remove(int index);
+    E set(int index, E element);
+    E get(int index);
+	...
+}
+

# LinkedList

# 1、成员变量

public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, Deque<E>, Cloneable, java.io.Serializable{
+    transient int size = 0;
+    transient Node<E> first;
+    transient Node<E> last;
+	...
+}
+
  • size：数组元素个数
  • first：头节点
  • last：尾节点

LinkedList的成员变量很少，就上面那3个，其中first和last都是Node类型（即节点类型），用来表示链表的头和尾，这跟ArrayList就存在着本质的区别了。

要注意：
+first和last仅仅只是节点而已，跟数据元素没有关系，可以认为就是2个额外的"指针"，分别指着链表的头和尾。

# 2、构造函数

# 1）LinkedList
public LinkedList() {
+}
+

LinkedList的构造函数有2个，以平时最常用的构造函数为例，发现该构造函数什么事都没做。

# 2）Node
private static class Node<E> {
+    E item;
+    Node<E> next;
+    Node<E> prev;
+
+    Node(Node<E> prev, E element, Node<E> next) {
+        this.item = element;
+        this.next = next;
+        this.prev = prev;
+    }
+}
+

再来看看这个节点类型的类结构，它描述了一个带有两个箭头的数据节点，也就是说LinkedList是双向链表。

为什么Node这个类是静态的？答案是：这跟内存泄露有关，Node类是在LinkedList类中的，也就是一个内部类，若不使用static修饰，那么Node就是一个普通的内部类，在java中，一个普通内部类在实例化之后，默认会持有外部类的引用，这就有可能造成内存泄露。但使用static修饰过的内部类（称为静态内部类），就不会有这种问题，在Android中，有很多这样的情况，如Handler的使用。好像扯远了~

好了，那下面就看看LinkedList是怎么进行增、删、改、查的。

# 3、增

# 1）add(E e)
public boolean add(E e) {
+    linkLast(e);
+    return true;
+}
+void linkLast(E e) {
+    final Node<E> l = last;
+    final Node<E> newNode = new Node<>(l, e, null);
+    last = newNode;
+    if (l == null)
+        first = newNode;
+    else
+        l.next = newNode;
+    size++;
+    modCount++;
+}
+

因为LinkedList是链表结构，所以每添加一个元素就是让这个元素链接到链表的尾部。
+add(E e)的核心是linkLast()方法，它对元素进行了真正添加操作，分为以下几个步骤：

  1. 先让此时集合中的尾节点（即last"指针"指向的节点）赋给变量 l 。
  2. 然后，创建一个新节点，结合Node的构造函数，我们可以知道，在创建新节点（newNode）的同时，newNode的prev指向了l(即之前集合中的尾节点)，变量 l 就是newNode的前驱节点了，newNode的后继节点为null。
  3. 再将last指向newNode，也就是说newNode成为该链表新的末尾节点。
  4. 接着，判断变量 l 是否为null，若是null，说明之前集合中没有元素（此时newNode是集合中唯一一个元素），则将first指向newNode，也就是说此时的newNode既是头节点又是尾节点（要知道，这时newNode中的prev和next均是null，但被first和last同时指向）；
    +若变量 l 不是null，说明之前集合中已经存在了至少一个元素，则让之前集合中的尾节点（即变量 l ）的next指向newNode。（结合步骤2，此时的newNode与newNode的前驱节点 l 已经是相互指向了）
  5. 最后，跟ArrayList一样，让记录集合长度的size加1。

通过对add(E e)方法的分析，我们也知道了，原来LinkedList中的元素就是一个个的节点（Node），而真正的数据则存放在Node之中（数据被Node的item所引用）。

# 2）add(int index, E element)
public void add(int index, E element) {
+    checkPositionIndex(index);
+
+    if (index == size)
+        linkLast(element);
+    else
+        linkBefore(element, node(index));
+}
+

该add方法将添加集合元素分为2种情况，一种是在集合尾部添加，另一种是在集合中间或头部添加，因为第一种情况也是调用linkLast()方法，这里不再啰嗦，我们看看第二种情况，分析linkBefore(E e, Node succ)这个方法是怎么对元素进行添加操作的。

void linkBefore(E e, Node<E> succ) {
+    // assert succ != null;
+    final Node<E> pred = succ.prev;
+    final Node<E> newNode = new Node<>(pred, e, succ);
+    succ.prev = newNode;
+    if (pred == null)
+        first = newNode;
+    else
+        pred.next = newNode;
+    size++;
+    modCount++;
+}
+

往LinkedList集合中间或头部添加元素分为以下几个步骤：

  1. 先调用node(int index)方法得到指定位置的元素节点，也就是linkBefore()方法中的形参 succ。
  2. 然后，通过succ.prevt得到succ的前一个元素pred。（此时拿到了第index个元素succ，和第index-1个元素pred）
  3. 再创建一个新节点newNode，newNode的prev指向了pred，newNode的next指向了succ。（即newNode往succ和pred的中间插入，并单向与它们分别建立联系，eg：pred ← newNode → succ）
  4. 再让succ的prev指向newNode。（succ与跟newNode建立联系了，此时succ与newNode是双向关联，eg：pred ← newNode ⇋ succ）。
  5. 接着，判断pred是否为null，若是null，说明之前succ是集合中的第一个元素（即index值为0），现在newNode跑到了succ前面，所以只需要将first指向newNode（eg：first ⇌ newNode ⇋ succ）；
    +若pred不为null，则将pred的next指向newNode。（这时pred也主动与newNode建立联系了，此时pred与newNode也是双向关联，eg：pred ⇌ newNode ⇋ succ）
  6. 最后，让记录集合长度的size加1。

对于链表的操作还是有些复杂的，特别是这种双向链表，不过仔细理解下，也不是什么问题（看不懂的可以边看步骤边动手画一画）。到这里，对于LinkedList的第一个添加方法就分析完了。

# 下面是对node(int index)方法的分析：

这也是LinkedList获取元素的核心方法，相当重要，因为后面会出现很多次，这里就顺带先分析一下了。

Node<E> node(int index) {
+    // assert isElementIndex(index);
+
+    if (index < (size >> 1)) {
+        Node<E> x = first;
+        for (int i = 0; i < index; i++)
+            x = x.next;
+        return x;
+    } else {
+        Node<E> x = last;
+        for (int i = size - 1; i > index; i--)
+            x = x.prev;
+        return x;
+    }
+}
+

  细看node(int index)方法中的代码逻辑，可以看到，它是通过遍历的方式，将集合中的元素一个个拿出来，再通过该元素的prev或next拿到下一个遍历的元素，经过index次循环后，最终才拿到了index对应的元素。
+  跟ArrayList相比，因为ArrayList底层是数组实现，拥有下标这个特性，在获取元素时，不需要对集合进行遍历，所以查找某个元素会特别快（在数据量特别多的情况下，ArrayList和LinkedList在效率上的差别就相当明显了）。
+  不过，LinkedList对元素的获取还是做了一定优化的，它对index与集合长度的一半做比较，来确定是在集合的前半段还是后半段进行查找。

# 4、删

# 1）remove(int index)
public E remove(int index) {
+    checkElementIndex(index);
+    return unlink(node(index));
+}
+E unlink(Node<E> x) {
+    // assert x != null;
+    final E element = x.item;
+    final Node<E> next = x.next;
+    final Node<E> prev = x.prev;
+
+    if (prev == null) {
+        first = next;
+    } else {
+        prev.next = next;
+        x.prev = null;
+    }
+
+    if (next == null) {
+        last = prev;
+    } else {
+        next.prev = prev;
+        x.next = null;
+    }
+
+    x.item = null;
+    size--;
+    modCount++;
+    return element;
+}
+

在remove(int index)这个方法中，先通过index和node(int index)拿到了要被删除的元素x，然后调用了unlink(Node x)方法将其删除，自然，LinkedList删除元素的核心方法就是unlink(Node x)，删除操作分以下几个步骤：

  1. 通过要删除的元素x拿到它的前驱节点prev和后继节点next。

  2. 若前驱节点prev为null，说明x是集合中的首个元素，直接将first指向后继节点next即可；

    +若不为null，则让前驱节点prev的next指向后继节点next，再将x的prev置空。（这时prev与x的关联就解除了，并与next建立了联系）。

  3. 若后继节点next为null，说明x是集合中的最后一个元素，直接将last指向前驱节点prev即可；（下图分别对应步骤2中的两种情况）

    +若不为null，则让后继节点next的prev指向前驱节点prev，再将x的next置空。（这时next与x的关联就解除了，并与prev建立了联系）。

  4. 最后，让记录集合长度的size减1。
# 2）remove(Object o)
public boolean remove(Object o) {
+    if (o == null) {
+        for (Node<E> x = first; x != null; x = x.next) {
+            if (x.item == null) {
+                unlink(x);
+                return true;
+            }
+        }
+    } else {
+        for (Node<E> x = first; x != null; x = x.next) {
+            if (o.equals(x.item)) {
+                unlink(x);
+                return true;
+            }
+        }
+    }
+    return false;
+}
+

remove(Object o)这个删除元素的方法的形参o是数据本身，而不是LinkedList集合中的元素（节点），所以需要先通过节点遍历的方式，找到o数据对应的元素，然后再调用unlink(Node x)方法将其删除，关于unlink(Node x)的分析在第一个删除方法中已经提到了，可往回再看看。

# 5、查 & 改

LinkedList集合对数据的获取与修改均通过node(int index)方法来执行往后的操作，关于node(int index)方法的分析也已经在第一个添加方法的时候已经提过，这里也就不再啰嗦了。

# 1）set(int index, E element)
public E set(int index, E element) {
+    checkElementIndex(index);
+    Node<E> x = node(index);
+    E oldVal = x.item;
+    x.item = element;
+    return oldVal;
+}
+
# 2）get(int index)
public E get(int index) {
+    checkElementIndex(index);
+    return node(index).item;
+}
+

# 三、队列Queue

这里要顺带分析下java中的队列实现，why？因为java中队列的实现就是LinkedList，你可能会疑问，队列的英文是Queue，在java中也有对应的接口，怎么会跟LinkedList扯上关系呢？因为LinkedList实现了队列：

public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, Deque<E>, Cloneable, java.io.Serializable {
+	...
+}
+

代码中的Deque是Queue的一个子接口，它继承了Queue：

public interface Deque<E> extends Queue<E> {...}
+

从这两者的关系，不难得出，队列的实现方式也是链表。下面先来看看Queue的接口声明：

# 1、Queue

我们知道，队列是先进先出的，添加元素只能从队尾添加，删除元素只能从队头删除，Queue中的方法就体现了这种特性。

public interface Queue<E> extends Collection<E> {
+	boolean offer(E e);
+	E poll();
+	E peek();
+	...
+}
+
  • offer()：添加队尾元素
  • poll()：删除队头元素
  • peek()：获取队头元素

从上面这几个方法出发，来看看LinkedList是如何实现的。

# 2、LinkedList对Queue的实现

# 1）增

public boolean offer(E e) {
+    return add(e);
+}
+

可以看到，在LinkedList中，队列的offer(E e)方法实际上是调用了LinkedList的add(E e)，add(E e)已经在最前面分析过了，就是在链表的尾部添加一个元素~

# 2）删

public E poll() {
+    final Node<E> f = first;
+    return (f == null) ? null : unlinkFirst(f);
+}
+
+private E unlinkFirst(Node<E> f) {
+    // assert f == first && f != null;
+    final E element = f.item;
+    final Node<E> next = f.next;
+    f.item = null;
+    f.next = null; // help GC
+    first = next;
+    if (next == null)
+        last = null;
+    else
+        next.prev = null;
+    size--;
+    modCount++;
+    return element;
+}
+

poll()方法先拿到队头元素 f ，若 f 不为null，就调用unlinkFirst(Node f)其删除。unlinkFirst(Node f)在实现上跟unlink(Node x)差不多且相对简单，这里不做过多说明。

# 3）查

public E peek() {
+    final Node<E> f = first;
+    return (f == null) ? null : f.item;
+}
+

peek()先通过first拿到队头元素，然后取出元素中的数据实体返回而已。

# 四、总结

  1. LinkedList是基于链表实现的，并且是双向链表。
  2. LinkedList中的元素就是一个个的节点，而真正的数据则存放在Node之中。
  3. LinkedList通过遍历的方式获取集合中的元素，效率比ArrayList低。
  4. Queue队列的实现方式也是链表，java中，LinkedList是Queue的实现。
+ +
+
#源码分析#LinkedList#Queue
ArrayList源码分析
Android面向切面编程（AOP）

+ ← + Android面向切面编程（AOP）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/13fb2b/index.html b/pages/13fb2b/index.html new file mode 100644 index 000000000..e52128b16 --- /dev/null +++ b/pages/13fb2b/index.html @@ -0,0 +1,151 @@ + + + + + + Kotlin - 高阶函数与函数引用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-02-01
目录

Kotlin - 高阶函数与函数引用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 高阶函数

高阶函数是 参数或返回值是函数 的函数，我们之前已经接触过了几个高阶函数，如：

// _Arrays.kt
+public inline fun <T> Array<out T>.forEach(action: (T) -> Unit): Unit {
+    for (element in this) action(element)
+}
+public inline fun <T> Array<out T>.filter(predicate: (T) -> Boolean): List<T> {
+    return filterTo(ArrayList<T>(), predicate)
+}
+

其中 forEach 要求传入一个函数类型为 (T) -> Unit 的函数作为参数（即带一个参数且无返回值），而 filter 则是要求函数类型为 (T) -> Boolean 的函数作为参数（即带一个参数且返回值是 Boolean 类型）。

Kotlin 中，函数是第一公民。

# 函数类型

这里要搞明白什么是函数类型？我们经常会使用 String 、Int 等来描述一个变量的类型，这可以让我们很清楚的知道这个变量具体是个什么东西，而函数类型也一样，它明确描述了变量接收的是一个怎样的函数，函数类型的格式为：(参数1类型, 参数2类型, ..., 参数n类型)->返回值类型。

注意：当返回值类型为 Unit 时，这里的 Unit 不能省略，如：(String, String)->Unit。

举个例子：

val myFun1: (String) -> Unit = fun(value: String) { println(value) }
+val myFun2: (String) -> Unit = { value -> println(value) }
+

上述代码中，类型为 (String) -> Unit 的常量 myFun1，接收了一个同 函数类型 的匿名函数，而 myFun2 则是接收了一个同 函数类型 的 lambda 表达式，两者其实没啥区别，功能也一样。

lambda 表达式也是一种匿名函数。

# 函数引用

参考对象引用这个概念，我们可以把函数引用简单理解为指向函数的变量，如：

val myFun1: (String) -> Unit = fun(value: String) { println(value) }
+val myFun2: (String) -> Unit = { value -> println(value) }
+

这里的 myFun1 和 myFun2 都是函数的引用。这时回过头来看看 forEach 这个高阶函数，我们可以把函数类型为 (T) -> Unit 的函数引用传递给它，说到底不就是把一个变量作为参数传入而已嘛：

fun main(args: Array<String>) {
+    val myFun: (String) -> Unit = { value -> println(value) }
+    args.forEach(myFun)
+}
+

(T) -> Unit 中的 T 是泛型，此处 forEach 的调用者 args 的类型是 Array<String>，所以这里的实际函数类型是 (String) -> Unit，同理，如果 args 的类型是 Array<Int>，那么函数类型则应该是 (Int) -> Unit。

这里就有一个问题，如果不是匿名函数，而是具名函数，能否直接把函数名作为参数传入呢？

很遗憾，这是不行的，函数名不是函数引用，函数名不是函数引用，函数名不是函数引用，不过 Kotlin 提供了双冒号 :: 限定符，可以把函数名转成函数引用，因此代码可以这么写：

fun myFun(value:String){
+    println(value)
+}
+args.forEach(::myFun)
+

这就不会报错了，如果你仔细观察，就能发现函数 println 本身就符合 (T) -> Unit 要求：

/** Prints the given [message] and the line separator to the standard output stream. */
+@kotlin.internal.InlineOnly
+public actual inline fun println(message: Any?) {
+    System.out.println(message)
+}
+

所以，如果仅仅只是为了打印字符串，那么我们完全可以把 myFun 这一层丢弃，而直接引用 prinln 函数：

args.forEach(::println)
+

# 引用成员方法

到目前为止，我们使用过的函数引用都是一些顶层、局部、扩展函数，而不是类成员方法，如果直接引用类成员方法会报错：

KFunction2<MyPrinter, String, Unit> 是什么东西？？？我们知道顶层、局部、扩展函数的调用并不依赖于对象实例，而类成员方法则需要依赖对象实例，如果直接通过 类名::方法名 来引用一个成员方法，那么该函数引用对应的类型就会在参数列表第 1 位多一个 Receiver 参数（用于接收方法依赖的对象实例），其真实函数类型应该是 (MyPrinter, String) -> Unit，而通过 对象实例::方法名 则是 (String) -> Unit，因此，通过对象实例引用成员方法可以解决该问题：

class MyPrinter{
+    fun myFun(value: String) {
+        println(value)
+    }
+}
+fun main(args: Array<String>) {
+    val myPrinter = MyPrinter()
+    args.forEach(myPrinter::myFun)
+}
+

当然了，这不是说类中的方法就一定都是这样引用的，而是要考虑到方法的调用是否需要依赖于对象实例，像 object 或者 companion object 中的方法，就可以像函数那样直接调用，因为不依赖于对象实例，所以函数类型也不会多一个 Receiver 参数，因此可以直接通过 类名::方法名 来引用：

object MyPrinter {
+    fun myFun(value: String) {
+        println(value)
+    }
+}
+
+class MyPrinter {
+    companion object {
+        fun myFun(value: String) {
+            println(value)
+        }
+    }
+}
+
+fun main(args: Array<String>) {
+    args.forEach(MyPrinter::myFun)
+}
+

补充：方法可以认为是函数的一种特殊类型；从形式上，有 Receiver 的函数即为方法。

# 函数类型实例调用

函数引用可以通过其 invoke(……) 操作符调用：f.invoke(x) 或者 f(x)：

fun main(args: Array<String>) {
+    val myFun1: (String) -> Unit = fun(value: String) { println(value) }
+    myFun1.invoke("lqr") // lqr
+    myFun1("lqr") // lqr
+}
+

再来看看类成员方法引用的情况，前面说过，直接通过 类名::方法名 来引用一个成员方法，那么该函数引用对应的函数类型就会在参数列表第 1 位多一个 Receiver 参数，就比如这个 String 类中的 plus()方法，它的 Receiver 就是一个 String 对象实例：

val opear: (String, String) -> String = String::plus
+val result = opear("hello", " world")　// 等价于 "hello".plus(" world")
+println(result) // hello world
+

Receiver 除了可以作为函数类型的首个参数，还可以将其提取出来，通过 . 与原始函数类型连接，同时，调用方法也会因此发生一些变化，类似扩展函数：

val opear: String.(String) -> String = String::plus
+val result = "hello".opear(" haha")　// 等价于 "hello".plus(" world")
+println(result)
+
+ +
+
#高阶函数#函数引用
Kotlin - 枚举与密封类
Kotlin - 常见高阶函数

+ ← + Kotlin - 常见高阶函数→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/15960b/index.html b/pages/15960b/index.html new file mode 100644 index 000000000..66216e95a --- /dev/null +++ b/pages/15960b/index.html @@ -0,0 +1,148 @@ + + + + + + Mac远程登录到iOS设备 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-12-18
目录

Mac远程登录到iOS设备

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 安装OpenSSH

本文内容的前提是设备已越狱！

Secure Shell（SSH） 是建立在应用层基础上的安全协议，用于计算机之间的加密登录，可以在不安全的网络中为网络服务提供安全的传输环境

在 Cydia 搜索 OpenSSH ，找到后安装即可

OpenSSH

# 账号

root：最高权限账号，$HOME 为 /var/root

  • 账号：root
  • 密码：alpine

修改登录密码

  1. 登录 root 账号
  2. 修改 root 账号的密码，终端输入：passwd

# 远程登录

# 方式一：账号密码

前往iOS设备的 "设置" -> "Wi-Fi" 页面，找到当前已经连接的网络，查看其 IP 地址

IP地址

如上图显示的 IP 地址为 192.168.10.104，则在终端内输入：

ssh root@192.168.10.104
+

输入密码：alpine

ssh

# 方式二：免密码登录

相较于方式一，不用每次连接 SSH 时都提示输入密码

角色 设备 文件
客户端 Mac 公钥 ~/.ssh/id_rsa.pub
私钥 ~/.ssh/id_rsa
服务器端 iPhone 授权文件 ~/.ssh/authorized_keys

# 1、生成秘钥对

ssh-keygen -t rsa
+
+# OpenSSH默认生成的是RSA密钥，-t 参数是指定密钥类型
+# 所以上面的命令可以省略 -t 参数：ssh-keygen
+

# 2、将公钥上传至 iOS 设备

方式一：自动（推荐）

执行如下命令，输入密码即可

ssh-copy-id root@192.168.10.104
+

方式二：手动

# 该方式会直接覆盖 authorized_keys 文件
+scp ~/.ssh/id_rsa.pub root@192.168.10.104:/var/root/.ssh/authorized_keys
+

scp id_rsa.pub

鉴于会将 authorized_keys 文件覆盖，所以最好还是先将 id_rsa.pub 上传到设备后再追加到 authorized_keys

# 上传公钥至 root 的家目录
+scp ~/.ssh/id_rsa.pub root@192.168.10.104:~
+
+# 登录 iOS 设备
+ssh root@192.168.10.104
+
+# 向 authorized_keys 追加内容
+cat ~/id_rsa.pub >> ~/.ssh/authorized_keys
+
+# 移除上传的公钥
+rm ~/id_rsa.pub
+

authorized_keys追加内容

现在再次进行登录，便无须输入密码即可直接登录成功了

# 3、注意事项

如果 iOS 设备上不存在 /var/root/.ssh 目录，会报如下错误

scp: /var/root/.ssh/authorized_keys: No such file or directory
+

需要先登录设备创建该目录

xunfengteki-iPad:~ root# cd /var/root/
+xunfengteki-iPad:~ root# mkdir .ssh
+

如果在经过配置后还是要求输入密码，那可能是文件的权限不足，需要登录到 iOS 设备后，按如下命令对这些文件或目录进行权限调整即可

chmod 755 ~
+# 设置 .ssh 目录权限
+chmod 755 ~/.ssh
+# 设置 authorized_keys 权限
+chmod 644 ~/.ssh/authorized_keys
+

# USB连接设备

前面所提及的都是通过 Wi-Fi 方式连接设备，这种方式会有个很大的弊端，那就是当网络不通畅时会卡顿，为了保证传输速度，可以通过 USB 连接的方式解决这个问题

# 1、安装 usbmuxd

brew install usbmuxd
+

# 2、端口映射

本地端口 2222 映射 远程端口 22

iproxy 2222 22 [设备UDID]
+

如果有多台 iOS 设备连接到同一台 Mac 上，则需要在命令后面加上设备的 UDID，如果只有一台时，则可省略

# 3、连接设备

ssh -p 2222 root@127.0.0.1
+

USB连接

# 封装常用命令

Shuttle: 简易的终端命令快捷菜单，官网：http://fitztrev.github.io/shuttle/ (opens new window)

"iOS": [
+  {
+    "USB连接iPhone": [
+      {
+        "cmd": "iproxy 2222 22",
+        "inTerminal": "new",
+        "name": "1.USB映射SSH端口"
+      },
+      {
+        "cmd": "ssh root@localhost -p 2222",
+        "inTerminal": "new",
+        "name": "2.连接iPhone"
+      }
+    ]
+  }
+]
+

效果：

shuttle

现在只需要按顺序点击 iOS -> USB连接iPhone 下的 1.USB映射SSH端口 和 2.连接iPhone，即可快速使用 usb 连接我们的 iOS 设备，提升效率。

# 中文问题

iOS 的终端在默认情况下是不支持中文的输入和显示，当你输入中文时会自动清空当前输入的所有内容。

解决方案：在家目录下新建 .inputrc 文件

touch ~/.inputrc
+

文件内容：

# 不将中文字符转化为转文序列
+set convert-meta off
+
+# 允许向终端输出中文
+set output-meta on
+
+# 允许向终端输入中文
+set meta-flag on
+set input-meta on
+

如果想要 iOS 设备的终端上编辑文件内容，需要在 Cydia 搜索 Vi IMproved 并安装

安装完成后，在终端输入：

vi ~/.inputrc
+

按 i 切换到输入模式，将上述文件内容粘贴进去，按 Esc 切换到末行模式，输入 :wq 回车保存退出。

现在中文是可以输入了，但是显示还是有问题的，比如我创建了一个 测试.txt，显示的是 \346\265\213\350\257\225.txt

解决方案：通过 Cydia 搜索 Locale Profiles in UTF-8 并安装即可（软件源 BigBoss：http://apt.thebigboss.org/repofiles/cydia/）

这时退出 iOS 终端，还重新进入即可解决！

点击详情页底部的 文件系统内容

可以看到该插件帮我们在 /usr/share/locale 目录下安装了中文语言包，并在 /etc/profile.d/ 目录下创建了 localeutf8.sh 文件，设置当前语言为 en_US.UTF-8

xunfengtekiiPhone:~ root# cat /etc/profile.d/localeutf8.sh
+export LANG="en_US.UTF-8"
+
+ +
+
#iOS#逆向
ReactorKit + RxDataSources列表多次刷新的解决方案
Mach-O文件结构分析

+ ← + Mach-O文件结构分析→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/15d73d/index.html b/pages/15d73d/index.html new file mode 100644 index 000000000..16b96c021 --- /dev/null +++ b/pages/15d73d/index.html @@ -0,0 +1,377 @@ + + + + + + Flutter - 瀑布流交替播放视频 🎞 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-06-11
目录

Flutter - 瀑布流交替播放视频 🎞

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

最近忙的一个需求，是要做到如下效果：

  1. 瀑布流影音
  2. 用户滑动结束后，到达红色线处的为命中的视图，仅命中的视图才可进行影音播放
  3. 如果第二次滑动后命中的还是瀑布流上的原来两个 item ，则交替播放影音
  4. 瀑布流的中间会存在一个影音栏目模块，翻页播放视频
  5. 瀑布流与影音栏目的播放不可共存

具体效果如上图所示

# 二、布局

上图可以看到了这个需求的整体效果，下面我们来分析一下这个页面的布局实现

下面的代码如看到没有使用到的变量，请先忽略，这部分是了解整体的布局情况，所以把一些不相关的代码以 ... 代替了

# 1、滚动视图

滚动视图内有多种布局，所以这里使用 CustomScrollView 来组合各种 Sliver 的方式去搭建滚动视图

Widget _buildScrollView() {
+  return CustomScrollView(
+    slivers: [
+      // Banner
+      _buildBanner(),
+      _buildSeparator(8),
+      // 第一个瀑布流
+      _buildGridView(isFirst: true, childCount: 5),
+      _buildSeparator(8),
+      // 影音栏目
+      _buildSwipeView(),
+      _buildSeparator(15),
+      // 第二个瀑布流
+      _buildGridView(isFirst: false, childCount: 20),
+    ],
+  );
+}
+
Sliver 说明
Banner 一个简单的 SliverToBoxAdapter
瀑布流1 使用 SliverWaterfallFlow 构建的瀑布流
影音栏目 使用 PageView 构建的翻页视图
瀑布流2 同 瀑布流1

# 2、瀑布流

使用第三方库实现瀑布流：https://github.com/fluttercandies/waterfall_flow (opens new window)

import 'package:waterfall_flow/waterfall_flow.dart';
+
+Widget _buildGridView({
+  bool isFirst = false,
+  required int childCount,
+}) {
+  return SliverWaterfallFlow(
+    gridDelegate: const SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
+      crossAxisCount: 2,
+      mainAxisSpacing: 15,
+      crossAxisSpacing: 10,
+    ),
+    delegate: SliverChildBuilderDelegate(
+      (BuildContext context, int index) {
+        ...
+        return WaterfallFlowGridItemView(...);
+      },
+      childCount: childCount,
+    ),
+  );
+}
+

看一下 WaterfallFlowGridItemView 的核心布局

Widget _buildBody() {
+  return Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      isHit ? _buildVideo() : _buildCover(),
+      const SizedBox(height: 10),
+      Text('grid item $selfIndex'),
+      SizedBox(
+        height: 50.0 + 50.0 * (selfIndex % 2),
+      ),
+    ],
+  );
+}
+

如果是命中的item，则展示影音视图，否则展示封面

# 3、栏目影音

为什么用 SliverLayoutBuilder，后面会解释

Widget _buildSwipeView() {
+  if (isRemoveSwipe) return const SliverToBoxAdapter(child: SizedBox());
+  return SliverLayoutBuilder(
+    builder: (context, _) {
+      ...
+      return SliverToBoxAdapter(
+        child: WaterfallFlowSwipeView(...),
+      );
+    },
+  );
+}
+

接下来看一下 WaterfallFlowSwipeView 中的 build 方法

@override
+Widget build(BuildContext context) {
+  Widget resultWidget = PageView.builder(
+    controller: pageController,
+    padEnds: false,
+    itemBuilder: (context, index) {
+      final isHit = ...;
+      return Padding(
+        padding: const EdgeInsets.only(right: 10),
+        child: Container(
+          color: Colors.blue,
+          child: isHit ? _buildVideo() : const SizedBox.shrink(),
+        ),
+      );
+    },
+    itemCount: 4,
+    onPageChanged: (index) {
+      if (currentIndex == index) return;
+      setState(() {
+        currentIndex = index;
+      });
+    },
+  );
+  resultWidget = SizedBox(height: 200, child: resultWidget);
+  return resultWidget;
+}
+

如果是命中的item，则展示影音视图，否则什么都不展示。

# 三、滚动监听

页面的整体布局已经搞定了，现在要考虑如何实现这个功能最最关键的几个技术难点：

  1. 判断当前到达红线的是瀑布流还是影音栏目。
  2. 当瀑布流的同一水平位置上的多个视图，在列表来回滑动时，轮流播放。

这里我使用了我开发的一个列表滚动辅助库 scrollview_observer: https://github.com/LinXunFeng/flutter_scrollview_observer (opens new window)，

虽然 pub.dev 上有可以监听列表滚动位置的库，但是侵入性很强，并且功能还不够强大，应付不来上面的需求，特别是第2个功能点，简直是魔鬼需求，然而，用我开发的库 scrollview_observer 就可以轻松应付这2个技术难点。

  • 针对难点1: 只需要使用 SliverViewObserver 包裹 CustomScrollView 就可以对其进行观察，这样会适时返回可视区域中所有的 Sliver 和 item 信息，再配合 leadingOffset 参数设置观察的偏移量，即可轻松实现达到红线的需求，然后在 onObserveViewport 回调中可以得知达到红线的是瀑布流还是影音栏目。
  • 针对难点2: 在 SliverViewObserver 的 onObserveAll 回调参数中可以拿到此时瀑布流中被命中的所有 item 的信息，再通过简单的计算，即可完成轮流播放的功能。

接下来我们进入实战部分。

# 四、实现逻辑

我们上边使用 CustomScrollView 来实现滚动视图部分，其中分了上下两个瀑布流 Sliver，中间一个栏目影音 Sliver，在滚动视图结束滚动后，只需要做如下主要逻辑：

  1. 哪个 Sliver 到达了红线
  2. 如果是瀑布流，则获取命中的 item 下标，然后进行影音播放
  3. 如果是影音栏目，则按当前正在展示的 item 进行影音播放

先定义命中的 Sliver 类型，并使用两个属性来记录命中的下标和类型

enum WaterFlowHitType {
+  // 第一个瀑布流
+  firstGrid,
+  // 影音栏目
+  swipe,
+  // 第二个瀑布流
+  secondGrid,
+}
+
+// 命中的下标
+int hitIndex = 0;
+// 命中的类型
+WaterFlowHitType hitType = WaterFlowHitType.firstGrid;
+

# 1、SliverViewObserver 的使用

使用 SliverViewObserver 包裹 CustomScrollView 来进行观察。

// 红线距离滚动视图顶部的偏移量
+double observeOffset = 150;
+
+SliverViewObserver(
+  child: _buildBody(),
+  // 设置观察的偏移量
+  leadingOffset: observeOffset,
+  // 设置触发观察的时机，这里为滚动结束
+  autoTriggerObserveTypes: const [
+    ObserverAutoTriggerObserveType.scrollEnd,
+  ],
+  // 设置触发返回观察结果回调的时机，这里直接返回结果
+  triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+  extendedHandleObserve: (context) {
+    // 拓展原来的观察处理逻辑，瀑布流是使用第三方库构建的，
+    // 所以在这里需要告知 scrollview_observer 如何去观察它。
+    final _obj = ObserverUtils.findRenderObject(context);
+    if (_obj is RenderSliverWaterfallFlow) {
+      return ObserverCore.handleGridObserve(
+        context: context,
+        fetchLeadingOffset: () => observeOffset,
+      );
+    }
+    return null;
+  },
+  sliverContexts: () {
+    // 返回目标 Sliver 对应的 BuildContext
+    return [
+      if (grid1Context != null) grid1Context!,
+      if (swipeContext != null) swipeContext!,
+      if (grid2Context != null) grid2Context!,
+    ];
+  },
+  onObserveViewport: (result) {
+    // 观察 viewport，在这里可以知道第一个 Sliver 是哪个
+    ...
+  },
+  onObserveAll: (resultMap) {
+    // 观察瀑布流的 item
+    ...
+  },
+),
+

onObserveViewport 和 onObserveAll 同时存在时，onObserveViewport 回调先走！

在 sliverContexts 参数回调中，返回需要被观察的 Sliver，在这个场景下，瀑布流和影音栏目都需要被观察，所以这里返回了他们相应的 BuildContext，相应的，我们就需要先把它们记录起来。

记录瀑布流的 BuildContext

Widget _buildGridView({
+  bool isFirst = false,
+  required int childCount,
+}) {
+  return SliverWaterfallFlow(
+    ...
+    delegate: SliverChildBuilderDelegate(
+      (BuildContext context, int index) {
+        WaterFlowHitType selfType;
+        if (isFirst) {
+          // 记录BuildContext
+          if (grid1Context != context) grid1Context = context;
+          // 自身的类型
+          selfType = WaterFlowHitType.firstGrid;
+        } else {
+          if (grid2Context != context) grid2Context = context;
+          selfType = WaterFlowHitType.secondGrid;
+        }
+        // 瀑布流 item
+        return WaterfallFlowGridItemView(
+          selfIndex: index,
+          selfType: selfType,
+          hitIndex: hitIndex,
+          hitType: hitType,
+        );
+      },
+      ...
+    ),
+  );
+}
+

记录影音栏目的 BuildContext

实现 SliverLayoutBuilder 得到BuildContext

Widget _buildSwipeView() {
+  return SliverLayoutBuilder(
+    builder: (context, _) {
+      // 记录BuildContext
+      if (swipeContext != context) swipeContext = context;
+      return SliverToBoxAdapter(
+        child: WaterfallFlowSwipeView(hitType: hitType),
+      );
+    },
+  );
+}
+

# 2、找出命中的 Sliver

现在开始来处理观察 Viewport 的逻辑，通过观察 Viewport 就可以得知哪个是第一个 Sliver

// 记录到达红线的 Sliver
+BuildContext? firstChildCtxInViewport;
+
+onObserveViewport: (result) {
+  // 记录第一个 Sliver
+  firstChildCtxInViewport = result.firstChild.sliverContext;
+  if (firstChildCtxInViewport == grid1Context) {
+    // 第一个瀑布流
+    if (WaterFlowHitType.firstGrid == hitType) return;
+    // 记录命中类型
+    hitType = WaterFlowHitType.firstGrid;
+    // 重置命中的下标，在 onObserveAll 回调中给 hitIndex 赋值时会使用到
+    hitIndex = -1;
+    // 这里不调用 setState，只记录数据，在 onObserveAll 更新命中下标后再刷新页面
+  } else if (firstChildCtxInViewport == swipeContext) {
+    // 影音栏目
+    if (WaterFlowHitType.swipe == hitType) return;
+    // 直接刷新页面，播放影音栏目的视频
+    setState(() {
+      hitType = WaterFlowHitType.swipe;
+    });
+  } else if (firstChildCtxInViewport == grid2Context) {
+    // 第二个瀑布流
+    // 处理逻辑同第一个瀑布流
+    if (WaterFlowHitType.secondGrid == hitType) return;
+    hitType = WaterFlowHitType.secondGrid;
+    hitIndex = -1;
+  }
+},
+

通过上述 onObserveViewport 中的逻辑，我们已经确定了当前命中的 Sliver 是哪个，并通过 firstChildCtxInViewport 属性记录了起来。

当命中的是影音栏目时，则更新 hitType 为 WaterFlowHitType.swipe 并刷新页面，进行影音栏目的视频播放

@override
+Widget build(BuildContext context) {
+  Widget resultWidget = PageView.builder(
+    ...
+    itemBuilder: (context, index) {
+      // 判断当前的 item 是否命中
+      final isHit =
+            WaterFlowHitType.swipe == widget.hitType && currentIndex == index;
+      return Padding(
+        ...
+        child: Container(
+          ...
+          // 命中时播放视频
+          child: isHit ? _buildVideo() : const SizedBox.shrink(),
+        ),
+      );
+    },
+    ...
+    onPageChanged: (index) {
+      // 翻页后如果下标发生变化，则刷新影音栏目视图
+      if (currentIndex == index) return;
+      setState(() {
+        currentIndex = index;
+      });
+    },
+  );
+  ...
+  return resultWidget;
+}
+

此时 hitType 非瀑布流类型，所以瀑布流会将影音视图变成封面。

注：本例为功能示例，所以以上都是通过 setState 简单地进行视图变化处理，在实际应用场景中可根据自身的情况，实现局部刷新逻辑

影音栏目的播放逻辑就完成了，接下来就是处理瀑布流的影音。

# 3、处理瀑布流的命中 item 下标

通过 onObserveAll 观察 Sliver，通过它我们可以知道瀑布流 Slive 中哪些是命中的 item。

onObserveAll: (resultMap) {
+  // 根据记录的第一个 Sliver 的 BuildContext，取出相应的观察结果
+  final result = resultMap[firstChildCtxInViewport];
+  if (firstChildCtxInViewport == grid1Context) {
+    // 第一个瀑布流
+    // 如果当前的第一个 Sliver 不是相应的类型，则直接返回
+    if (WaterFlowHitType.firstGrid != hitType) return;
+    // 数据类型校验
+    if (result == null || result is! GridViewObserveModel) return;
+    // 取出命中的 item 的下标（瀑布流中一次命中的可能有多个）
+    final firstIndexList = result.firstGroupChildList.map((e) {
+      return e.index;
+    }).toList();
+    // 处理瀑布流命中的逻辑（由于第二个瀑布流中的处理逻辑相同，所以抽了方法）
+    handleGridHitIndex(firstIndexList);
+  } else if (firstChildCtxInViewport == grid2Context) {
+    // 第二个瀑布流
+    if (WaterFlowHitType.secondGrid != hitType) return;
+    if (result == null || result is! GridViewObserveModel) return;
+    final firstIndexList = result.firstGroupChildList.map((e) {
+      return e.index;
+    }).toList();
+    handleGridHitIndex(firstIndexList);
+  }
+},
+

在 handleGridHitIndex 方法中计算得到命中下标，并刷新页面。

/// 处理瀑布流命中的逻辑
+handleGridHitIndex(List<int> firstIndexList) {
+  if (firstIndexList.isEmpty) return;
+  // 根据上一次的命中下标，找出对应的结果数组中的下标
+  int targetIndex = firstIndexList.indexOf(hitIndex);
+  if (targetIndex == -1) {
+    // 没找着，置为0
+    targetIndex = 0;
+  } else {
+    // 找着了，则取下一个，为了实现交替播放
+    targetIndex = targetIndex + 1;
+    if (targetIndex >= firstIndexList.length) {
+      // 但是如果超过了结果数组的最大下标，则置为0
+      targetIndex = 0;
+    }
+  }
+  // 更新 hitIndex 并刷新页面
+  setState(() {
+    hitIndex = firstIndexList[targetIndex];
+  });
+}
+

# 五、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，如果你也觉得这个库好用，请不吝给个 Star 👍

GitHub: https://github.com/LinXunFeng/flutter_scrollview_observer (opens new window)

+ +
+
#Dart#Flutter
Flutter - 船新升级😱支持观察第三方构建的滚动视图💪
Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖

+ ← + Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1751fb/index.html b/pages/1751fb/index.html new file mode 100644 index 000000000..2ed599328 --- /dev/null +++ b/pages/1751fb/index.html @@ -0,0 +1,192 @@ + + + + + + Android - 混淆 java-library 工程 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-12-07
目录

Android - 混淆 java-library 工程

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、工程配置

AndroidStudio 可以创建好几种 Module 工程，如果 Module 使用的是 android 插件（com.android.application 或 com.android.library），那么通过在 buildTypes 中将 minifyEnabled 设为 true 即可开启混淆，但如果 Module 使用的是 java 插件（java-library），那就需要借助额外的工具了，因为 java-library 默认没有提供混淆配置域。

# 1、依赖混淆库

想要混淆 java-library 工程，需要在 build.gradle 文件中手动依赖一个第三方库 proguard-gradle：

import proguard.gradle.ProGuardTask
+
+buildscript {
+    repositories {
+        mavenCentral()
+    }
+    dependencies {
+        classpath "com.guardsquare:proguard-gradle:7.1.0"
+    }
+}
+

# 2、自定义混淆 Task

依赖混淆库之后，还要自定义混淆任务，配置一些混淆选项，这里说明几个重点配置项：

  • injars：要混淆的 jar 包（可以是文件或目录）
  • outjars：混淆后的 jar 包输出位置（可以是文件或目录）
  • printmapping：混淆后的代码与源码之间的映射关系日志
  • configuration：混淆规则文件（一般就是 proguard-rules.pro）
  • dontshrink：不要开启压缩（默认混淆时会压缩代码，将没被引用到的代码抹去，这会导致某些类文件丢失字段，比如 java bean）
task("proguardTask", type: ProGuardTask, dependsOn: jar) {
+    description = "Obfuscates source files"
+
+    def artifactName = "[you library name].jar" // 根据实际情况修改！！！
+    def inputFolder = "$buildDir/libs"
+    def obfuscatedFolder = "$buildDir/obfuscated"
+    def inputJar = "$inputFolder/$artifactName"
+    def outputJar = "$obfuscatedFolder/$artifactName"
+
+    injars inputJar
+    outjars outputJar
+
+    // For de-obfuscating stack traces later on
+    printseeds "$obfuscatedFolder/seeds.txt"
+    printmapping "$obfuscatedFolder/mapping.txt"
+
+    // dependencies
+    libraryjars "${System.getProperty('java.home')}/lib/rt.jar" //works for java 8
+    libraryjars configurations.runtime
+    libraryjars sourceSets.main.compileClasspath
+
+    configuration files("proguard-rules.pro")
+    // 不要压缩（压缩会把暂时没用到的代码抹去）
+    dontshrink
+
+    // 配置阶段触发：将之前生成的混淆jar包删除
+    delete obfuscatedFolder
+
+    // 执行阶段触发：当混淆jar包生成出来时，自动替换掉 build/libs 目录下的原始jar包
+    doLast {
+        delete "$inputJar"
+        copy {
+            from outputJar
+            into inputFolder
+        }
+    }
+}
+

proguard-gradle 这个库还有很多配置项，需要你感兴趣，可以到官网查阅手册了解：

# 3、关联混淆 Task

注意了，上面在声明混淆任务 proguardTask 时指定了一个依赖任务 dependsOn: jar，意思是当执行 proguardTask 任务时，需要先执行 jar 任务而已。反过来就不一定了，执行 jar 任务并不会执行 proguardTask 任务（此时 jar 任务不对 proguardTask 负责）。但是一般情况下，我们希望 jar 任务执行之后，顺便把 proguardTask 任务一并执行，这时就可以使用 finalizedBy() 方法对其进行关联：

jar.finalizedBy(proguardTask)
+

至此，只要 java-library 工程一触发 jar 任务（Mark 或 Build），proguardTask 任务也会一并执行了。

# 二、完整代码

以下是 java-library 工程 build.gradle 文件中的全部代码：

apply plugin: 'java-library'
+dependencies {
+    ...
+}
+
+import proguard.gradle.ProGuardTask
+
+buildscript {
+    repositories {
+        mavenCentral()
+    }
+    dependencies {
+        classpath "com.guardsquare:proguard-gradle:7.1.0"
+    }
+}
+
+task("proguardTask", type: ProGuardTask, dependsOn: jar) {
+    description = "Obfuscates source files"
+
+    def artifactName = "[you library name].jar" // 根据实际情况修改！！！
+    def inputFolder = "$buildDir/libs"
+    def obfuscatedFolder = "$buildDir/obfuscated"
+    def inputJar = "$inputFolder/$artifactName"
+    def outputJar = "$obfuscatedFolder/$artifactName"
+
+    injars inputJar
+    outjars outputJar
+
+    // For de-obfuscating stack traces later on
+    printseeds "$obfuscatedFolder/seeds.txt"
+    printmapping "$obfuscatedFolder/mapping.txt"
+
+    // dependencies
+    libraryjars "${System.getProperty('java.home')}/lib/rt.jar" //works for java 8
+    libraryjars configurations.runtime
+    libraryjars sourceSets.main.compileClasspath
+
+    configuration files("proguard-rules.pro")
+    // 不要压缩（压缩会把暂时没用到的代码抹去）
+    dontshrink
+
+    // 配置阶段触发：将之前生成的混淆jar包删除
+    delete obfuscatedFolder
+
+    // 执行阶段触发：当混淆jar包生成出来时，自动替换掉 build/libs 目录下的原始jar包
+    doLast {
+        delete "$inputJar"
+        copy {
+            from outputJar
+            into inputFolder
+        }
+    }
+}
+
+jar.finalizedBy(proguardTask)
+
+ +
+
#混淆#java-library#proguard
Android - OkHttp 访问 https 的怪问题
Android - 利用 jitpack 免费发布闭源 aar

+ ← + Android - 利用 jitpack 免费发布闭源 aar→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/17d6bb/index.html b/pages/17d6bb/index.html new file mode 100644 index 000000000..a32280c86 --- /dev/null +++ b/pages/17d6bb/index.html @@ -0,0 +1,139 @@ + + + + + + iOS - 通过runtime获取某个类中所有的变量和方法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - 通过runtime获取某个类中所有的变量和方法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

苹果官方的类中只提供给我们一小部分成员变量和方法,但有时候我们需要的恰好就没有提供,这样就会令开发人员十分懊恼了,那怎样才能获取该类中所有的变量及方法,用来查找是否有相对应的变量和方法呢? +我们可以使用苹果自带的 运行时(runtime) 来获取

# 运行时(Runtime):

  • 苹果官方一套C语言 (opens new window)库
  • 能做很多底层操作(比如访问隐藏的一些成员变量\成员方法....)

以下以 UITextField 为例

# 一. 包含运行时头文件

#import <objc/runtime.h>  
+

# 二. 获取所有的成员变量

unsigned int count = 0;
+    
+// 拷贝出所胡的成员变量列表
+Ivar *ivars = class_copyIvarList([UITextField class], &count);
+    
+for (int i = 0; i<count; i++) {
+    // 取出成员变量
+    Ivar ivar = *(ivars + i);
+        
+    // 打印成员变量名字
+    LXFLog(@"%s", ivar_getName(ivar));
+        
+    // 打印成员变量的数据类型
+    LXFLog(@"%s", ivar_getTypeEncoding(ivar));
+}
+    
+// 释放
+free(ivars);
+

Swift的写法如下

var count: UInt32 = 0
+let ivars = class_copyIvarList(UIViewController.self, &count)!
+for i in 0..<count {
+    let namePoint = ivar_getName(ivars[Int(i)])!
+    let name = String(cString: namePoint)
+    print(name)
+}
+
+

# 三. 获取所有的成员方法

// 下面的UITextField改为你想获取所有属性的类名 +// methCount: 这个类所有属性的个数

unsigned int methCount = 0;
+Method *meths = class_copyMethodList([UITextField class], &methCount);
+    
+for(int i = 0; i < methCount; i++) {
+        
+    Method meth = meths[i];
+        
+    SEL sel = method_getName(meth);
+        
+    const char *name = sel_getName(sel);
+        
+    NSLog(@"%s", name);
+}
+    
+free(meths);
+

最后,通过KVC的方式给相应的成员变量赋值即可! +如:

// 修改点位文字颜色
+UILabel *placeholderLabel = [self valueForKeyPath:@"_placeholderLabel"];
+placeholderLabel.textColor = [UIColor redColor];
+// 或者这样
+[self setValue:[UIColor grayColor] forKeyPath:@"_placeholderLabel.textColor"];
+
+ +
+
#iOS#Objective-C
iOS - 实现25秒完成测试包出包
iOS - ARC与MRC的单例设计模式

+ ← + iOS - ARC与MRC的单例设计模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/19fce1/index.html b/pages/19fce1/index.html new file mode 100644 index 000000000..c750c8a42 --- /dev/null +++ b/pages/19fce1/index.html @@ -0,0 +1,452 @@ + + + + + + AppRTC实战 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-06-07
目录

AppRTC实战

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

1、记录AppRTC的搭建过程，实现iOS、安卓、browser同异设备的视频通信 +2、以下直接以root身份进行操作，所有的需要下载的文件均放置于/root目录下，需要的话，可以自行决定存放位置，但是要注意修改相关的配置路径～

# 一、设备配置

  • 阿里云ESC服务器 Ubuntu 16.04 64位
  • 腾讯云域名

# 二、相关环境

# 1、JDK

add-apt-repository ppa:openjdk-r/ppa 
+apt-get update 
+apt-get install openjdk-8-jdk
+

# 2、nodejs

nodejs官网 (opens new window)

// 这里的版本8.x可以按自己的需求去修改
+curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
+apt-get install -y nodejs
+

至此已经安装了最新版的nodejs和npm了,可以使用-v来查看当前版本

node -v
+npm -v
+

安装grunt-cli，后面需要grunt来构建房间服务器

npm -g install grunt-cli
+

# 3、python与python-webtest

apt-get install python 
+apt-get install python-webtest
+

# libevent

apt-cache search libevent
+apt-get install libevent-dev
+

# 三、Room Server 房间服务器

git clone  https://github.com/webrtc/apprtc.git   
+cd apprtc
+npm install
+

# 1、配置 constants.py

# 当前目录 -- apprtc
+vim src/app_engine/constants.py
+
# 这部分为 添加
+TURN_BASE_URL = 'https://linxunfeng.top' # 修改为你自己当前服务器的域名，下面的亦是如此
+TURN_URL_TEMPLATE = '%s/turn.php?username=%s&key=%s' #如果turn.php未实现，可使用默认配置
+CEOD_KEY = 'lxf' # 这个很重要，后面配置turn时需要用到
+
+# 这部分为 修改
+ICE_SERVER_BASE_URL = 'https://linxunfeng.top'
+ICE_SERVER_URL_TEMPLATE = '%s/iceconfig.php?key=%s' #如果iceconfig.php未实现，可用默认配置，但是Android Apk会有问题
+ICE_SERVER_API_KEY = os.environ.get('ICE_SERVER_API_KEY')
+
+# Dictionary keys in the collider instance info constant.
+WSS_INSTANCE_HOST_KEY = 'linxunfeng.top:8089' #信令服务器端口号8089  
+WSS_INSTANCE_NAME_KEY = 'vm_name'
+WSS_INSTANCE_ZONE_KEY = 'zone'
+WSS_INSTANCES = [{
+    WSS_INSTANCE_HOST_KEY: 'linxunfeng.top:8089',
+    WSS_INSTANCE_NAME_KEY: 'wsserver-std',
+    WSS_INSTANCE_ZONE_KEY: 'us-central1-a'
+}, {
+    WSS_INSTANCE_HOST_KEY: 'linxunfeng.top:8089',
+    WSS_INSTANCE_NAME_KEY: 'wsserver-std-2',
+    WSS_INSTANCE_ZONE_KEY: 'us-central1-f'
+}]
+

# 2、编译

# 当前目录 -- apprtc
+grunt build
+

编译好后apprtc目录下就会多出一个名为out的目录，里面存放的就是编译好的room server

# 3、GoogleAppEngine的安装与配置

官网：GoogleAppEngine (opens new window)

可以在此路径找最新版本

GoogleAppEngine -> Python -> Download and install the original App Engine SDK for Python.

目前最新版本为：google_appengine_1.9.70.zip (opens new window)

  • 下载 GoogleAppEngine
wget https://storage.googleapis.com/appengine-sdks/featured/google_appengine_1.9.70.zip
+
  • 解压
unzip google_appengine_1.9.70.zip
+
  • 设置环境变量
vim /etc/profile
+
export PATH="$PATH:/root/google_appengine/"
+
  • 应用环境变量
source /etc/profile
+

# 4、开启 Room Server

  • 基本命令
# 当前路径 -- /root/google_appengine
+./dev_appserver.py --host=linxunfeng.top ../apprtc/out/app_engine/
+

如果你使用的是阿里云服务器，这里就不能用域名linxunfeng.top来启动room server，而是使用本地网卡地址，否则就会提示

raise BindError('Unable to bind %s:%s' % self.bind_addr) +google.appengine.tools.devappserver2.wsgi_server.BindError: Unable to bind linxunfeng.top:8080

  • 查看网卡
ifconfig
+
root@xxx:~/google_appengine# ifconfig
+eth0      Link encap:Ethernet  HWaddr 00:16:3e:08:b4:02  
+          inet addr:172.18.141.108  Bcast:172.18.143.255  Mask:255.255.240.0
+          ...
+
./dev_appserver.py --host=172.18.141.108 ../apprtc/out/app_engine/
+

这样就好了吗？不，虽然没有报错，但是你用浏览器打开你的域名看看... +这里直接给出最终命令，具体原因看 疑难杂症 - 1

  • 最终命令
./dev_appserver.py --enable_host_checking=false --host=172.18.141.108 ../apprtc/out/app_engine/
+
+# 如果想直接后台运行，则使用如下命令
+nohup ./dev_appserver.py --enable_host_checking=false --host=172.18.141.108 ../apprtc/out/app_engine/ &
+
  • 访问 room server
http://域名:8080
+

# 四、Collider Server 信令服务器

# 1、拷贝collider源码

# 当前路径 -- /root
+mkdir -p goWorkspace/src
+

把apprtc/src/collider/目录下的三个目录（collider、collidermain、collidertest）复制到goWorkspace/src/目录下

cp -rf apprtc/src/collider/* /goWorkspace/src
+

# 2、修改代码

  • 修改房间服务器的地址
# goWorkspace/src/collidermain/main.go
+var roomSrv = flag.String("room-server", "https://域名", "The origin of the room server")
+
  • 修改网站证书路径
# goWorkspace/src/collider/collider.go
+
+e = server.ListenAndServeTLS("/etc/letsencrypt/live/域名/fullchain.pem", "/etc/letsencrypt/live/域名/privkey.pem")
+
+# 如：
+e = server.ListenAndServeTLS("/etc/letsencrypt/live/linxunfeng.top/fullchain.pem", "/etc/letsencrypt/live/linxunfeng.top/privkey.pem")
+

相关的SSL证书fullchain.pem和privkey.pem在后面的nginx配置中会提到，这里先写上

# 3、安装与配置环境

  • 下载GO语言环境

FQ 到 GO官网 (opens new window)上下载最新版本

当前最新版本：go1.10.2.linux-amd64.tar.gz (opens new window)

# 当前路径 -- /root
+wget https://dl.google.com/go/go1.10.2.linux-amd64.tar.gz
+
  • 修改profile
vim /etc/profile
+

打开profile后添加如下内容

export GOROOT=/root/go
+export GOPATH=/root/goWorkspace
+export PATH=$PATH:$GOROOT/bin:$GOPATH/bin
+
  • 应用环境变量
source /etc/profile
+

# 4、编译

进入目录 goWorkspace/src/

go get collidermain
+go install collidermain
+

这里的编译过程需要翻墙，如果无法翻墙，请看以下内容，如果可以则直接跳至第5小点

# 当前路径 -- /root/goWorkspace/src
+mkdir -p golang.org/x 
+cd golang.org/x/
+git clone https://github.com/golang/net
+

git clone成功后再执行上面的两行编译命令

# 5、开启 Collider Server

进入goWorkspace下的bin目录，执行命令

# 当前路径 -- /root/goWorkspace/bin
+# -tls=true : 指需要数字证书
+./collidermain -port=8089 -tls=true
+
+# 如果想直接后台运行，则使用如下命令
+nohup ./collidermain -port=8089 -tls=true &
+

# 五、STUN\TURN服务器

# 1、安装coturn

apt-get install coturn
+

# 2、修改配置

  • coturn
vim /etc/default/coturn
+

把TURNSERVER_ENABLED=1的注释去掉

  • turnserver.conf
vim /etc/turnserver.conf
+
listening-device=eth0 #此处eth0是电脑网卡名称
+listening-port=3478 #turn服务器的端口号
+relay-device=eth0 #此处eth0是电脑网卡名称
+min-port=49152
+max-port=65535
+Verbose
+fingerprint
+lt-cred-mech
+use-auth-secret
+static-auth-secret=lxf #此处要和房间服务器配置时constants.py文件中的CODE_KEY保持一致。
+user=lxf:0x8638170519dd1309044bca55319ff929
+user=lxf:lxf
+stale-nonce
+cert=/usr/local/etc/turn_server_cert.pem
+pkey=/usr/local/etc/turn_server_pkey.pem
+no-loopback-peers
+no-multicast-peers
+mobility
+no-cli
+

上述文件中 0x8638170519dd1309044bca55319ff929：

turnadmin -k -u lxf -r north.gov -p lxf

-k 表示生成一个long-term credential key +-u 表示用户名 +-p 表示密码 +-r 表示Realm域

coturn的证书生成（即配置文件中cert和pkey)

openssl req -x509 -newkey rsa:2048 -keyout /usr/local/etc/turn_server_pkey.pem -out /usr/local/etc/turn_server_cert.pem -days 99999 -nodes
+

# 3、启动coturn服务器

service coturn start
+

用浏览器打开

http://域名:3478
+

显示如下内容则说明成功开启服务

TURN Server +use https connection for the admin session

# 六、配置nginx服务器

# 1、生成SSL证书

这里使用let’s encrypt颁发的免费SSL证书 certbot.eff.org (opens new window)

  • 安装软件
sudo apt-get update  
+apt-get install software-properties-common  
+add-apt-repository ppa:certbot/certbot  
+apt-get update 
+apt-get install python-certbot-nginx
+
  • 生成证书
certbot --nginx certonly
+

SSL证书生成的目录为：/etc/letsencrypt/live/域名/，里面存放着四个文件cert.pem,chain.pem,fullchain.pem,privkey.pem

# 2、安装php和php-fpm

  • 安装php和php-fpm
apt-get install php  
+apt-get install php7.0-fpm
+

# 3、安装与配置nginx

  • 安装nginx
apt-get install nginx
+
  • 修改nginx配置
vim /etc/nginx/sites-available/default
+

将下面的linxunfeng.top修改为你自己的域名

upstream roomserver {
+       server linxunfeng.top:8080;
+}
+server {
+       listen 80 ;
+       server_name linxunfeng.top; 
+       return  301 https://$server_name$request_uri;
+}
+server {
+        #listen 80 default_server;
+        #listen [::]:80 default_server;
+
+        # SSL configuration
+        #
+        # listen 443 ssl default_server;
+        # listen [::]:443 ssl default_server;
+        listen 443;
+        #
+        # Note: You should disable gzip for SSL traffic.
+        # See: https://bugs.debian.org/773332
+        #
+        # Read up on ssl_ciphers to ensure a secure configuration.
+        # See: https://bugs.debian.org/765782
+        #
+        # Self signed certs generated by the ssl-cert package
+        # Don't use them in a production server!
+        #
+        # include snippets/snakeoil.conf;
+
+        root /var/www/html;
+
+        # Add index.php to the list if you are using PHP
+        index index.html index.htm index.nginx-debian.html;
+
+        server_name linxunfeng.top; # 添加域名，如不添加，生成SSL证书时可能会有问题
+
+        #location / {
+                # First attempt to serve request as file, then
+                # as directory, then fall back to displaying a 404.
+        #       try_files $uri $uri/ =404;
+        #}
+
+        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+        #
+        location ~ \.php$ {
+                include snippets/fastcgi-php.conf;
+        #
+        #       # With php7.0-cgi alone:
+        #       fastcgi_pass 127.0.0.1:9000;
+        #       # With php7.0-fpm:
+                fastcgi_pass unix:/run/php/php7.0-fpm.sock;
+        }
+        location / { 
+                proxy_pass http://roomserver$request_uri;
+                proxy_set_header Host $host;
+        }
+
+        ssl on;
+        ssl_certificate /etc/letsencrypt/live/linxunfeng.top/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/linxunfeng.top/privkey.pem;
+        
+        # deny access to .htaccess files, if Apache's document root
+        # concurs with nginx's one
+        #
+        #location ~ /\.ht {
+        #       deny all;
+        #}
+}
+

# turn.php 与 iceconfig.php

在/var/www/html/目录下创建两个文件

touch turn.php iceconfig.php
+

# turn.php

<?php 
+    $request_username = $_GET["username"];
+    if (empty($request_username)) {
+        echo "username == null";
+        exit;
+    }
+    $request_key = $_GET["key"];
+    $time_to_live = 600;
+    $timestamp = time() + $time_to_live;//失效时间
+    $response_username = $timestamp.":".$_GET["username"];
+    $response_key = $request_key;
+    if (empty($response_key)) {
+        $response_key = "code_key";
+    } //constants.py中CEOD_KEY
+    $response_password = getSignature($response_username, $response_key);
+    $jsonObj = new Response();
+    $jsonObj->username = $response_username;
+    $jsonObj->password = $response_password;
+    $jsonObj->ttl = 86400;
+    //此处需配置自己的服务器
+    $jsonObj->uris= array("stun:linxunfeng.top:3478","turn:linxunfeng.top:3478?transport=udp","turn:linxunfeng.top?transport=tcp");
+    echo json_encode($jsonObj);
+/**
+ * 使用HMAC-SHA1算法生成签名值
+ *
+ * @param $str 源串
+ * @param $key 密钥
+ *
+ * @return 签名值
+ */
+function getSignature($str, $key)
+{
+    $signature = "";
+    if (function_exists('hash_hmac')) {
+        $signature = base64_encode(hash_hmac("sha1", $str, $key, true));
+    } else {
+        $blocksize = 64;
+        $hashfunc = 'sha1';
+        if (strlen($key) > $blocksize) {
+            $key = pack('H*', $hashfunc($key));
+        }
+        $key = str_pad($key, $blocksize, chr(0x00));
+        $ipad = str_repeat(chr(0x36), $blocksize);
+        $opad = str_repeat(chr(0x5c), $blocksize);
+        $hmac = pack(
+'H*',
+    $hashfunc(
+($key ^ $opad) . pack(
+'H*',
+    $hashfunc(
+($key ^ $ipad) . $str
+)
+)
+)
+);
+        $signature = base64_encode($hmac);
+    }
+    return $signature;
+}
+    class Response
+    {
+        public $username = "";
+        public $password = "";
+        public $ttl = "";
+        public $uris = array("");
+    }
+?> 
+
  • iceconfig.php
<?php 
+    $request_username = "lxf";  //配置成自己的turn服务器用户名
+    if (empty($request_username)) {
+        echo "username == null";
+        exit;
+    }
+    $request_key = "lxf";  //配置成自己的turn服务器密码
+    $time_to_live = 600;
+    $timestamp = time() + $time_to_live;//失效时间
+    $response_username = $timestamp.":".$_GET["username"];
+    $response_key = $request_key;
+    if (empty($response_key)) {
+        $response_key = "CEOD_KEY";
+    }//constants.py中CEOD_KEY
+    $response_password = getSignature($response_username, $response_key);
+    $arrayObj = array();
+    $arrayObj[0]['username'] = $response_username;
+    $arrayObj[0]['credential'] = $response_password;
+    //配置成自己的stun/turn服务器
+    $arrayObj[0]['urls'][0] = "stun:linxunfeng.top:3478";
+    $arrayObj[0]['urls'][1] = "turn:linxunfeng.top:3478?transport=tcp";
+    $arrayObj[0]['uris'][0] = "stun:linxunfeng.top:3478";
+    $arrayObj[0]['uris'][1] = "turn:linxunfeng.top:3478?transport=tcp";
+    $jsonObj = new Response();
+    $jsonObj->lifetimeDuration = "300.000s";
+    $jsonObj->iceServers = $arrayObj;
+    echo json_encode($jsonObj);
+/**
+ * 使用HMAC-SHA1算法生成签名值
+ *
+ * @param $str 源串
+ * @param $key 密钥
+ *
+ * @return 签名值
+ */
+function getSignature($str, $key)
+{
+    $signature = "";
+    if (function_exists('hash_hmac')) {
+        $signature = base64_encode(hash_hmac("sha1", $str, $key, true));
+    } else {
+        $blocksize = 64;
+        $hashfunc = 'sha1';
+        if (strlen($key) > $blocksize) {
+            $key = pack('H*', $hashfunc($key));
+        }
+        $key = str_pad($key, $blocksize, chr(0x00));
+        $ipad = str_repeat(chr(0x36), $blocksize);
+        $opad = str_repeat(chr(0x5c), $blocksize);
+        $hmac = pack(
+'H*',
+    $hashfunc(
+($key ^ $opad) . pack(
+'H*',
+    $hashfunc(
+($key ^ $ipad) . $str
+)
+)
+)
+);
+        $signature = base64_encode($hmac);
+    }
+    return $signature;
+}
+    class Response
+    {
+        public $username = "";
+        public $password = "";
+        public $ttl = "";
+        public $uris = array("");
+    }
+?> 
+
  • 重启Nginx服务器和php7.0-fpm
service nginx restart 
+service php7.0-fpm restart
+

# 七、各端运行测试

# 1、Browser

浏览器直接打开即可，如果不能访问摄像头之类的，请查看疑难杂症 - 2

https://域名
+

# 2、Android

webrtc-android-demo-apprtc (opens new window)

直接安装手机，打开软件，点击右上角的扳手跳转至设置界面，滚到界面最下方，找到Room server URL.，将其修改为刚刚搭建好的服务器域名即可，如

https://linxunfeng.top
+

# 3、iOS

GitHub - ISBX/apprtc-ios (opens new window)

打开AppRTC项目，分别修改以下两个文件

ARTCVideoChatViewController.m

#define SERVER_HOST_URL @"https://linxunfeng.top"
+

Pods -> Development Pods -> AppRTC -> Lib -> ARDAppClient.m

static NSString *kARDRoomServerHostUrl =
+    @"https://linxunfeng.top";
+static NSString *kARDDefaultSTUNServerUrl =
+    @"stun:linxunfeng.top:3478";
+static NSString *kARDTurnRequestUrl =
+    @"https://linxunfeng.top"
+    @"/turn?username=lxf&key=lxf";
+
// 搜索 kARDDefaultSTUNServerUrl 
+- (RTCICEServer *)defaultSTUNServer {
+  NSURL *defaultSTUNServerURL = [NSURL URLWithString:kARDDefaultSTUNServerUrl];
+  return [[RTCICEServer alloc] initWithURI:defaultSTUNServerURL
+                                  username:@"lxf"
+                                  password:@"lxf"];
+}
+

# 疑难杂症

# 1、Request host is not whitelist enabled

具体提示 +Request host is not whitelist enabled for this server. Please use the --host command-line flag to whitelist a specific host (recommended) or use --enable_host_checking to disable host checking. See the command-line flags help text for more information.

参考链接 (opens new window)

执行dev_appserver.py时，加上如下参数

 --enable_host_checking=false
+

完整指令

./dev_appserver.py --enable_host_checking=false --host=172.18.141.108 ../apprtc/out/app_engine/
+

# 2、浏览器无法访问摄像头

浏览器访问设备的摄像头是需要使用https链接或者localhost来访问

# 3、端口

阿里云等国内大厂提供的服务器基本上都有一个叫安全组的玩意儿，我们搭建AppRTC服务器的所有服务所需的端口均要添加至安全组

# 4、Failed to execute ‘pushState’ on ‘History’

Failed to start signaling: Failed to execute ‘pushState’ on ‘History’: A history state object with URL ‘http://linxunfeng.top/r/598600855’ cannot be created in a document with origin ‘https://linxunfeng.top’ and URL ‘https://linxunfeng.top/

解决方法有两种

  • 解决方法1：

房间服务器编译完成后，在/root/apprtc/out/app_engine/js/apprtc.debug.js文件中找到window.history.pushState({‘roomId’: roomId, ‘roomLink’: roomLink}, roomId, roomLink)，把这句话注释掉，重新运行即可。（如果重新编译，需要重新修改）

  • 解决方法2：

在/root/apprtc/src/web_app/js/appcontroller.js文件中找到window.history.pushState({‘roomId’: roomId, ‘roomLink’: roomLink}, roomId, roomLink)，把这句话注释掉，然后重新编译，重新运行房间服务器即可。

+ +
+
#iOS#Android#Ubuntu#Linux
Ubuntu安装nginx来搭建推流服务器
Docker - 安装、加速和基本使用

+ ← + Docker - 安装、加速和基本使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1af1e6/index.html b/pages/1af1e6/index.html new file mode 100644 index 000000000..d0bddb33b --- /dev/null +++ b/pages/1af1e6/index.html @@ -0,0 +1,203 @@ + + + + + + Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-06-23
目录

Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

相信大家接触【即时通信应用】的时候都会遇到这个问题，那就是如何去实现聊天页面的键盘和其它功能面板的丝滑切换，这种问题也有人向 Flutter 官方提出过 issue，如下这两个：

可以看到，从表情面板切到文本输入框时会抖动一下，影响用户体验。

但几年过去了依旧没有得到解决，再加上我自己也有这个小烦恼，所以我与 GitLqr (opens new window)（GitHub: https://github.com/GitLqr (opens new window)）一起开发了这个 chat_bottom_container，来帮助我们快速实现这个丝滑切换的效果。

# 二、效果

这里先附上效果图，好让大家直观感受一下~

下面我们一起来看看怎么使用吧。

# 三、集成

将 chat_bottom_container 添加到你的 pubspec.yaml 文件中

dependencies:
+  chat_bottom_container: latest_version
+

具体版本大家到 pub.dev 上复制粘贴最新的吧，附上链接：https://pub.dev/packages/chat_bottom_container (opens new window)

Android 端需要添加 jitpack 仓库到你的项目根目录下的 build.gradle 文件中:

allprojects {
+  repositories {
+    ...
+    maven { url 'https://jitpack.io' }
+  }
+}
+

在需要使用的地方导入 chat_bottom_container :

import 'package:chat_bottom_container/chat_bottom_container.dart';
+

# 四、使用

# 页面布局

首先第一件事，确定整体的页面布局

@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    // 设置为 false
+    resizeToAvoidBottomInset: false,
+    body: Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Expanded(
+          child: ListView.builder(
+            ...
+          ),
+        ),
+        // 输入框视图
+        _buildInputView(),
+        // 底部容器
+        _buildPanelContainer(),
+      ],
+    ),
+  );
+}
+

这里就两个注意点：

  1. 底部容器放在最底下
  2. resizeToAvoidBottomInset 必须设置为 false

# 底部容器

输入框视图的样式各种各样，这里就不说了，大家爱怎么实现都行，接下来我们来看看怎么使用 chat_bottom_container 这个库实现底部容器，代码如下：

/// 自定义底部面板类型
+enum PanelType {
+  // 收起
+  none,
+  // 键盘
+  keyboard,
+  // 表情
+  emoji,
+  // 其它工具
+  tool,
+}
+
+/// chat_bottom_container 的控制器，用来告知 chat_bottom_container 需要切面板类型了
+/// 注：这里传泛型传了 PanelType，是为了与外部的面板类型相关联
+final controller = ChatBottomPanelContainerController<PanelType>();
+
+/// 输入框的焦点对象
+final FocusNode inputFocusNode = FocusNode();
+
+/// 记录当前的底部面板类型
+PanelType currentPanelType = PanelType.none;
+
+Widget _buildPanelContainer() {
+  return ChatBottomPanelContainer<PanelType>(
+    controller: controller,
+    inputFocusNode: inputFocusNode,
+    otherPanelWidget: (type) {
+      // 返回自定义的面板视图
+      if (type == null) return const SizedBox.shrink();
+      switch (type) {
+        case PanelType.emoji: // 表情面板
+          return _buildEmojiPickerPanel();
+        case PanelType.tool: // 其它工具面板
+          return _buildToolPanel();
+        default:
+          return const SizedBox.shrink();
+      }
+    },
+    onPanelTypeChange: (panelType, data) {
+      // 可用来记录当前的面板类型（该操作非必须~）
+      // panelType: chat_bottom_container 内部定义的面板类型，就三种（.none|.keyboard|.other）
+      // data: 外部自定义的底部面板类型
+      switch (panelType) {
+        case ChatBottomPanelType.none:
+          currentPanelType = PanelType.none;
+          break;
+        case ChatBottomPanelType.keyboard:
+          currentPanelType = PanelType.keyboard;
+          break;
+        case ChatBottomPanelType.other:
+          if (data == null) return;
+          switch (data) {
+            case PanelType.emoji:
+              currentPanelType = PanelType.emoji;
+              break;
+            case PanelType.tool:
+              currentPanelType = PanelType.tool;
+              break;
+            default:
+              currentPanelType = PanelType.none;
+              break;
+          }
+          break;
+      }
+    },
+    // 底部面板容器背景色
+    panelBgColor: panelBgColor,
+  );
+}
+

chat_bottom_container 内部定义的面板类型，就三种

enum ChatBottomPanelType {
+  // 无
+  none,
+  // 键盘
+  keyboard,
+  // 其它
+  other,
+}
+

因为 chat_bottom_container 并不关心你外部除了键盘外还有多少种面板类型，所以这里统一视为是 ChatBottomPanelType.other。

而我们外部开发者不可能不在乎，所以我们在点击表情面板按钮时，调用 controller.updatePanelType 去切换底部面板类型，并为 data 这个参数传入外部自定义的底部面板类型，如下代码所示

controller.updatePanelType(
+  // 设置 ChatBottomPanelContainer 当前的底部面板类型
+  // 可传入 ChatBottomPanelType.keyboard | ChatBottomPanelType.other | ChatBottomPanelType.none
+  ChatBottomPanelType.other,
+  // 回调给外部开发者自定义的 PanelType，当 ChatBottomPanelType.other 时必传
+  data: PanelType.emoji, // PanelType.tool
+);
+

所以上面提到的泛型就是为了关联 otherPanelWidget 和 onPanelTypeChange 回调中的类型，方便我们拿来使用。

# 五、最后

好了，上述便是该库的核心使用步骤, 我已将上述的 Flutter 聊天底部面板容器库发布至 GitHub: https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container (opens new window) ，如果接入上有什么问题，可以在链接中查看 demo 演示代码。

开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter#Chat
Flutter - 解决Connection closed before full header was received
Flutter - 支持观察NestedScrollView，兼容性更强 😈

+ ← + Flutter - 支持观察NestedScrollView，兼容性更强 😈→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1cb0c1/index.html b/pages/1cb0c1/index.html new file mode 100644 index 000000000..23f4dbf3c --- /dev/null +++ b/pages/1cb0c1/index.html @@ -0,0 +1,116 @@ + + + + + + iOS - Swift UITableView的scrollToRow的坑 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift UITableView的scrollToRow的坑

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 简介

在tableView中，我们一般会用到scrollToRow这个来控制tableView滚到指定的某一行。一般写法如下所示

// MARK: 滚到底部
+func scrollToBottom(animated: Bool = false) {
+    if dataArr.count > 0 {
+        tableView.scrollToRow(at: IndexPath(row: dataArr.count - 1, section: 0), at: .bottom, animated: animated)
+    }
+}
+

# 情况

今天鄙人使用SnapKit来布局cell，然后用scrollToRow来滚到底部就遇到了一个很奇葩的现象。 +我设置了在键盘弹出后聊天消息列表会自动滚到底部。 +1.随便输入一条消息，点发送后，在聊天消息列表中并没有滚到最新消息那一行。 +2.退出键盘不做任何操作再打开键盘也是滚到刚才那里(即最新消息的上一条所在位置) +3.只有在退出键盘后把聊天消息列表的消息向上拉一点距离露出最新消息所在的cell之后，再点击才有用

# 分析

在无奈之下，经过了一步步的探索，终于发现了问题的所在 +首先我们要了解一下scrollToRow执行后会调用哪些函数及顺序 +会调用这两个方法

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
+
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
+

# 步骤一

我在 heightForRow 中写了具体的数据，也就是把高度写死，不再是动态获取。接着执行程序得到如下结果 +比如我原本有10条数据，现在加入了一条后执行了scrollToRow，它会 +1.先调用 heightForRow 11次，即包括最新加入的那一条 +2.然后再调用 cellForRow +3.最后在调一次 heightForRow +后面的2和3是针对最新消息的

# 步骤二

我在 heightForRow 中不再写死高度，而是从模型数据中动态获取高度(高度是在cell布局后获取的，再赋值到模型数据中的cellHeight变量)

执行程序得到这个结果：调用 heightForRow 11次，然后就没了
+

好吧，问题就出现在对heightForRow的第11次调用，前10次都有返回具体的高度，而最后一次是0~。

# 结论

现在清楚了，要想在调用 scrollToRow 到指定的那一行，前提条件是那一行的高度不能为0。 +所以在上面的情况中，发送完消息后，最新消息的cell的确是插入到了tableView，也有显示出来(后面我自己测的)，但就是无法滚到最新消息那一行，就是因为 heightForRow 返回的高度为0 +在上面的情况中，向上拉一点距离露出cell后scrollToRow才有效就是因为此时heightForRow返回的高度不再为0

# 解决方案

按本人自身的情况来说，有两种解决方法

# 第一种

在传入的模型数据中给予明确计算出来的数值就好。

# 第二种

我使用SnapKit来自动布局cell的位置然后再来获取高度，这做法主要就是为了避免运算。所以我不选用第一种解决方法 +好了，方法如下：

// dataArr是用来存放模型的数组
+let indexPath = IndexPath(row: dataArr.count - 1, section: 0)
+// 调用tableView的数据源办法
+_ = self.tableView(tableView, cellForRowAt: indexPath)
+

在插入最新消息后，调用tableView的数据源方法来让它先对cell进行布局，这样就获取到了cell的高度，然后再执行 scrollToRow 就好了。

完美

+ +
+
#iOS#Swift
iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗
iOS - 解决Transporter一直卡正在验证的问题

+ ← + iOS - 解决Transporter一直卡正在验证的问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/1d7592/index.html b/pages/1d7592/index.html new file mode 100644 index 000000000..bd9bd25e9 --- /dev/null +++ b/pages/1d7592/index.html @@ -0,0 +1,156 @@ + + + + + + Kotlin - 面向对象之抽象类与接口 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-20
目录

Kotlin - 面向对象之抽象类与接口

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 接口

接口是一种约定或协议，需要使用 interface 定义：

interface InputDevice {
+    fun input(event: Any)
+}
+

接口不能有状态，我们可以在接口中声明一个类似"属性"的变量 x，但它并不是一个属性，相当于只是声明 getX/setX 方法：

interface InputDevice {
+    //val version: String = "default" // IDE报错：Property initializers are not allowed in interfaces
+    val version: String // 相当于定义getVersion()和setVersion()方法，但它不是属性，因为接口没有状态
+    ...
+}
+

接口没有构造器，因此无法像类那样实例化，必须由类对其进行实现后使用：

fun main() {
+    // val inputDevice = InputDevice() // IDE报错：Interface InputDevice does not have constructors
+
+    val myInputDevice = MyInputDevice("1.0")
+    myInputDevice.input("")
+}
+
+class MyInputDevice(override val version: String) : InputDevice {
+    override fun input(event: Any) {
+        println("010101010101010101001010101010....")
+    }
+}
+

实现接口需要使用 : 来连接，注意，因为接口没有构造器，所以实现接口时不需要带 ()。

接口之间是可以继承的，子接口将拥有父接口的所有方法：

// USB输入设备
+interface USBInputDevice : InputDevice
+// 蓝牙输入设备
+interface BLEInputDevice : InputDevice
+

另外，在 Kotlin 中接口方法可以默认实现：

interface InputDevice {
+    ...
+    fun onLowPower() {
+        println("注意：当前电量低")
+    }
+}
+

与 Kotlin 不同，Java 中的接口不支持默认实现。

# 抽象类

抽象类可以理解为是实现了一部分协议的半成品，需要使用 abstract class 定义：

abstract class USBMouse(val name: String, override val version: String = "1.0") : USBInputDevice {
+
+    override fun input(event: Any) {
+        println("x , y ... ")
+    }
+
+    fun click(key: String) {
+        println("点击了 $key 键")
+    }
+
+    abstract fun isSupport(os: String): Boolean
+}
+

可以看到，抽象类是有构造器的，构造器中的 val 或 var 参数会变成成员属性，也就是说抽象类可以有状态。抽象类 USBMouse 实现了 USBInputDevice 接口，并实现了 input()方法，说明抽象类可以有方法实现。当然了，抽象类中方法实现不依赖于接口，它本身就可以像类那样定义自己的方法，如 click()。甚至它也可以像接口那样定义没有方法体的抽象方法 isSupport()，由具体子类去实现：

class LogitechMouse : USBMouse("罗技鼠标") {
+    override fun isSupport(os: String): Boolean {
+        return when (os) {
+            "windows" -> true
+            "MacOS" -> true
+            "iOS" -> false
+            else -> false
+        }
+    }
+}
+

类继承需要使用 : 来连接，注意，因为抽象类同普通类一样拥有构造器（不管有无构造参数），所以实现抽象类时需要带 ()。

抽象类无法直接实例化，必须要子类继承后使用：

fun main() {
+    // val mouse = USBMouse() // IDE报错：Cannot create an instance of an abstract class
+    val mouse = LogitechMouse()
+    if (mouse.isSupport("windows")) {
+        mouse.click("left")
+    }
+}
+

# 单继承多实现

Kotlin 不支持多继承！但支持多实现！比如，罗技 M720 鼠标本质是罗技鼠标，拥有 USB 和 BLE 两种连接功能：

class LogitechM720 : LogitechMouse(), USBInputDevice, BLEInputDevice {}
+
+fun main() {
+    val usbInputDevice: USBInputDevice = LogitechM720()
+    val bleInputDevice: BLEInputDevice = LogitechM720()
+    val usbMouse: USBMouse = LogitechM720()
+    val logitechMouse: LogitechMouse = LogitechM720()
+}
+

可以使用 接口或抽象类变量 接收 实现类实例。

# 抽象类和接口的共性与区别

共性 比较抽象，不能直接实例化
有需要子类（实现类）实现的方法
父类（接口）变量可以接收子类（实现类）的实例赋值
区别 抽象类有状态，接口没有状态
抽象类有方法实现，接口只能有无状态的默认实现
抽象类只能单继承，接口可以多实现
抽象类反映本质，接口体现能力
+ +
+
#abstract class#interface
Kotlin - 参数与异常
Kotlin - 面向对象之继承与实现

+ ← + Kotlin - 面向对象之继承与实现→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2069ac/index.html b/pages/2069ac/index.html new file mode 100644 index 000000000..3de80043c --- /dev/null +++ b/pages/2069ac/index.html @@ -0,0 +1,158 @@ + + + + + + iOS - 揭露Block的内部实现原理 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - 揭露Block的内部实现原理

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

想必大家对block都很熟悉了，虽然都会用，但是你真的知道它的原理吗？比如为什么要加上__block，这个修饰符到底有什么用？不加会有什么后果？block又是如何实现的等等。。。该篇文章就为大家揭晓关于Block的实现原理~

# 抛砖引玉

先给出问题，大家思考下结果吧，如果分别调用以下两个方法，结果如何？

void blockFunc1()
+{
+    int num = 100;
+    void (^block)() = ^{
+        NSLog(@"num equal %d", num);
+    };
+    num = 200;
+    block();
+}
+
void blockFunc2()
+{
+    __block int num = 100;
+    void (^block)() = ^{
+        NSLog(@"num equal %d", num);
+    };
+    num = 200;
+    block();
+}
+

答案是

blockFunc1 : num equal 100
+blockFunc2 : num equal 200
+

是不是有人答错了？再来两个函数。这两个的结果与blockFunc2一样，打印出来的 num 为 200

// 全局变量
+int num = 100;
+void blockFunc3()
+{
+    void (^block)() = ^{
+        NSLog(@"num equal %d", num);
+    };
+    num = 200;
+    block();
+}
+
void blockFunc4()
+{
+    static int num = 100;
+    void (^block)() = ^{
+        NSLog(@"num equal %d", num);
+    };
+    num = 200;
+    block();
+}
+

疑问： +我们发现num做为局部变量时加上 _ _block 修饰符、num做为全局变量以及num为静态局部变量时在block中输出结果是一样的，皆为被修改之后的值，而做为局部变量并且未加上__block的num在block中输出的值却还是未赋值之前的值。这是为什么呢？探索这个问题我们就需要看看底层结构是如何实现的了

# 探索内部原理

Objective-C是一个全动态语言，它的一切都是基于runtime实现的！在运行时会将OC转换成C，我们可以利用这个来查看关于block在内部是如何实现的 +新建一个Command Line Tool项目，将以上代码放入main.m中，如图

main.m

这里我们打开终端，cd到项目目录下，然后将用下面的命令将OC重写为C

clang -rewrite-objc main.m
+

rewrite-objc

这时我们可以发现当前目录下多了一个main.cpp文件，打开它并滚到最下面

打开main.cpp

main.cpp

这里我们可以看到blockFunc1的C语言实现方法

void blockFunc1()
+{
+    int num = 100;
+    void (*block)() = ((void (*)())&__blockFunc1_block_impl_0((void *)__blockFunc1_block_func_0, &__blockFunc1_block_desc_0_DATA, num));
+    num = 200;
+    ((void (*)(__block_impl *))((__block_impl *)block)->FuncPtr)((__block_impl *)block);
+}
+

去掉类型转换

void blockFunc1()
+{
+    int num = 100;
+    // *************************重点句***********************
+    void (*block)() = &__blockFunc1_block_impl_0(__blockFunc1_block_func_0, &__blockFunc1_block_desc_0_DATA, num));
+    // *****************************************************
+    num = 200;
+    ((void (*)(__block_impl *))((__block_impl *)block)->FuncPtr)((__block_impl *)block);
+}
+

这里我们可以看到

block实际上是指向结构体的指针

该结构体为

__blockFunc1_block_impl_0

我们来看下带__block的blockFunc2

blockFunc2

在 blockFunc1 中，block指向了一个名为__blockFunc1_block_impl_0的结构体，并且在初始化时输入了三个参数(__blockFunc1_block_impl_0最后的flags有默认参数，所以可以不用传参)，第三个参数就是我们写的num，与blockFunc2相比较，这里的num并没有带*号，所以说在这里它只是传值而非传址，而下面的【num = 200;】也就没什么卵用了。这就是blockFunc2、blockFunc3与blockFunc4为什么能打印出num改变后的值，而blockFunc1不行的原因。

在这里我们也可以看出：

编译器会将block的内部代码生成对应的函数

** SO **

我们总结下，block在内部会作为一个指向结构体的指针，当调用block的时候其实就是根据block对应的指针找到相应的函数，进而进行调用，并传入自身

# __block的实现

我们再来看看 _ block， _block也被转换成了结构体，并含有5个变量

struct __Block_byref_num_0 {
+  void *__isa;  // isa指针
+__Block_byref_num_0 *__forwarding;  // 实例本身
+ int __flags; 
+ int __size;
+ int num;  // 我们的num值
+};
+

图片对应着blockFunc2中的

__block int num = 100;
+

当创建num并用__block修饰的时候，会初始化这五个变量 +当我们执行

num = 200;
+

对应着

(num.__forwarding->num) = 200;
+

上面刚刚提到过 _ _forwarding是实例本身，即类型结构体__Block_byref_num_0的&num，再找到对应的num变量，将其原来的100修改为200~~

到此，关于Block内部实现的揭晓也就到此结束了，希望本文能让你对block有更深的理解，感谢你耐心的阅读！

+ +
+
#iOS#Objective-C
iOS - ARC与MRC的单例设计模式
iOS - Cocoapods-创建第三方框架

+ ← + iOS - Cocoapods-创建第三方框架→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/21e20f/index.html b/pages/21e20f/index.html new file mode 100644 index 000000000..aae56d114 --- /dev/null +++ b/pages/21e20f/index.html @@ -0,0 +1,428 @@ + + + + + + AndroidNDK - Cmake详解 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2020-02-19
目录

AndroidNDK - Cmake详解

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、Cmake语法详解

# 1、什么是CMake

  • 在Android Studio 2.2及以上，构建原生库的默认工具是CMake。
  • CMake是一个跨平台的构建工具，可以用简单的语句来描述所有平台的安装（编译过程）。能够输出各种各样的makefile或者project文件。CMake并不直接构建出最终的软件，而是产生其他工具的脚本（如makefile），然后再依据这个工具的构建方式使用。
  • CMake是一个比make更高级的编译配置工具，它可以根据不同的平台、不同的编译器，生成相应的makefile或vcproj项目，从而达到跨平台的目的。Android Studio利用CMake生成的是ninja。ninja是一个小型的关注速度的构建系统。我们不需要关心ninja的脚本，知道怎么配置CMake就可以了。
  • CMake其实是一个跨平台的支持产出各种不同的构建脚本的一个工具。

# 2、CMake源文件

  • CMake的源码文件可以包含命令、注释、空格和换行。
  • 以CMake编写的源文件以CmakeLists.txt命名或以.cmake为扩展名。
  • 可以通过add_subdirectory()命令把子目录的CMake源文件添加进来。
  • CMake源文件中所有有效的语句都是命令，可以是内置命令或自定义的函数/宏命令。

# 3、CMake注释

# 单行注释
+
+#[[多行注释
+多行注释
+多行注释]]
+
  • 单行注释：#注释内容（注释从#开始到行尾结束）
  • 钓竿注释：可以使用括号来实现多行注释：#[[多行注释]]

# 4、CMake变量

# 声明变量：set(变量名 变量值)
+set(var 123)
+# 引用变量：message 命令用来打印
+message("var = ${var}")
+
  • CMake中所有变量都是string类型。可以使用set()和unset()命令来声明或移除一个变量
  • 变量的引用：${变量名}

# 5、CMake列表（lists）

# 声明列表：set(列表名 值1 值2 ... 值N)
+# 或set(列表名 "值1;值2;...;值N")
+set(list_var 1 2 3 4 5)
+# 或者
+set(list_var2 "1;2;3;4;5")
+
+message("list_var = ${list_var}")
+
  • 列表也是字符串，可以把列表看作一个特殊的变量，这个变量有多个值。
  • 语法格式：set(列表名 值1 值2 ... 值N)、set(列表名 "值1;值2;...;值N")
  • 列表的引用：${列表名}

# 6、CMake流程控制-操作符

类型 名称
一元 EXIST,COMMAND,DEFINED
二元 EQUAL,LESS,LESS_EQUAL,GREATER,GREATER_EQUAL,STREQUAL,STRLESS,
STRLESS_EQUAL,STRGREATER,STRGREATER_EQUAL,VERSION_EQUAL,VERSION_LESS,
VERSION_LESS_EQUAL,VERSION_GREATER,VERSION_GREATER_EQUAL,MATCHES
逻辑 NOT,AND,OR

# 7、CMake流程控制-布尔常量值

类型 值
true 1,ON,YES,TRUE,Y,非0的值
false 0,OFF,NO,FALSE,N,IGNORE,NOTFOUND,空字符串，
以-NOTFOUND结尾的字符串

# 8、CMake流程控制-条件命令

set(if_tap OFF)
+set(elseif_tap ON)
+
+if(${if_tap})
+	message("if")
+elseif(${elseif_tap})
+	message("elseif")
+else(${if_tap})
+	message("else")
+endif(${if_tap})
+
  • 语法格式：
if(表达式)
+	COMMAND(ARGS...)
+elseif(表达式)
+	COMMAND(ARGS...)
+else(表达式)
+	COMMAND(ARGS...)
+endif(表达式)
+
  • elseif和else部分是可选的，也可以有多个elseif部分，缩进和空格对语句解析没有影响。

# 9、CMake流程控制-循环命令

set(a "")
+while(NOT a STREQUAL "xxx")
+	set(a "${a}x")
+	message("a = ${a}")
+endwhile()
+
  • 语法格式：
while(表达式)
+	COMMAND(ARGS...)
+endwhile(表达式)
+
  • break()命令可以跳出整个循环。
  • continue()可以跳出当前循环。

# 10、CMake流程控制-循环遍历

# 1）格式一

foreach(item 1 2 3)
+	message("item = ${item}")
+endforeach(item)
+
  • 语法格式：
foreach(循环变量 参数1 参数2 ... 参数N)
+	COMMAND(ARGS...)
+endforeach(循环变量)
+
  • 每次迭代设置循环变量为参数。
  • foreach也支持break()和continue()命令跳出循环。

# 2）格式二

foreach(item RANGE 3)
+	message("item = ${item}")
+endforeach(item)
+
  • 语法格式：
foreach(循环变量 RANGE total)
+	COMMAND(ARGS...)
+endforeach(循环变量)
+
  • 循环范围从0到total。

# 3）格式三

foreach(item RANGE 1 5 2)
+	message("item = ${item}")
+endforeach(item)
+
  • 语法格式：
foreach(循环变量 RANGE start stop step)
+	COMMAND(ARGS...)
+endforeach(循环变量)
+
  • 循环范围从start到stop，循环增量为step。

# 4）格式四

set(list_var 1 2 3)
+
+foreach(item IN LISTS list_var)
+	message("item = ${item}")
+endforeach(item)
+
  • foreach还支持对列表的循环。
  • 语法格式：
foreach(循环变量 IN LISTS 列表)
+	COMMAND(ARGS...)
+endforeach(循环变量)
+

# 11、CMake自定义函数命令

function(func x y z)
+	message("call function func")
+	message("x = ${x}")
+	message("y = ${y}")
+	message("z = ${z}")
+	message("ARGC = ${ARGC}")
+	message("arg1 = ${ARGV0} arg2 = ${ARGV1} arg3 = ${ARGV2}")
+	message("all args = ${ARGV}")
+endfunction(func)
+
+func(1 2 3)
+

ARGC：表示传入参数的个数。 +ARGV：表示所有参数。 +ARGV0：表示第一个参数，ARGV1、ARGV2以此类推。

  • 自定义函数命令格式：
function(<name> [arg1[arg2[arg3...]]])
+	COMMAND()
+endfunction(<name>)
+
  • 函数命令调用格式：name(实参列表)

# 12、CMake自定义宏命令

macro(ma x y z)
+	message("call macro ma")
+	message("x = ${x}")
+	message("y = ${y}")
+	message("z = ${z}")
+endmacro(ma)
+
+ma(1 2 3)
+

函数命令有自己的作用域。 +宏命令跟调用者的作用域一样。

  • 自定义宏命令格式：
macro(<name> [arg1[arg2[arg3...]]])
+	COMMAND()
+endmacro(<name>)
+
  • 宏命令调用格式：name(实参列表)

# 13、CMake变量的作用域

  • 全局层：cache变量，在整个项目范围可见，一般在set定义变量时，指定CACHE参数就能定义cache变量。
  • 目录层：在当前目录CMakeLists.txt中定义，以及在该文件包含的其他cmake源文件中定义的变量。
  • 函数层：在命令函数中定义的变量，属于函数作用域内的变量。

变量查找优先级：函数层 优于 目录层，目录层 优于 全局层，即：函数层 --> 目录层 --> 全局层

# 二、CMakeList.txt文件详解

# 1、CMakeLists.txt简析

使用AndroidStudio3.4创建一个C/C++Support的项目，默认在app/src/main目录下会生成cpp目录，里面包含CMakeLists.txt和native-lib.cpp。以下代码为CMakeLists.txt去掉英文注释格式化后的内容：

cmake_minimum_required(VERSION 3.4.1)
+
+# 添加一个库，根据native-lib.cpp源文件编译一个native-lib的动态库
+add_library(
+	native-lib
+	SHARED
+	native-lib.cpp)
+
+# 查找系统库，这里查找的是系统日志库，并赋值给变量log-lib
+find_library(
+	log-lib
+	log)
+
+# 设置依赖的库（第一个参数必须为目标模块，顺序不能换）
+target_link_libraries(
+	native-lib
+	${log-lib})
+
  • cmake_minimum_required：指定cmake最低支持的版本。这个命令是可选的，如果在CMakeLists.txt文件中使用了高版本特有的命令的话，就需要加上这条命令，来指定CMake的最低支持版本，如果CMake当前版本低于我们指定的版本就会报错。
  • aux_source_directory(. DIR_SRCS)：查找当前目录所有源文件，并将源文件名称列表保存到DIR_SRCS变量；但不能查找子目录中的源文件。
  • find_library：查找系统库，默认会在AndroidNDK目录\platforms\android-xx\arch-arm\usr\lib下查找。

# 2、常用命令-add_library

# 1）添加一个库

  • 添加一个库文件，名为<name>。
  • 指定STATIC，SHARED，MODULE参数来指定库的类型。STATIC：静态库，SHARED：动态库，MODULE：在使用dyld的系统有效，若不支持dyld，等同于SHARED。
  • EXCLUDE_FROM_ALL：表示该库不会被默认构建。
  • source1 source2 ... sourceN：用来指定库的源文件。
add_library(<name> [STATIC | SHARED | MODULE]
+ [EXCLUDE_FROM_ALL] source1 source2 ... sourceN)
+

# 2）导入预编译库

  • 添加一个已存在的预编译库，名为<name>。
  • 一般配合set_target_properties使用。
add_library(<name> <SHARED|STATIC|MODULE|UNKNOW> IMPORTED)
+
+# 比如
+add_library(test SHARED IMPORTED)
+set_target_properties(
+	test # 指明目标库名
+	PROPERTIES IMPORTED_LOCATION # 指明要设置的参数
+	库路径/${ANDROID_ABI}/libtest.so # 导入库的路径
+)
+

# 3、常用命令-set

设置CMake变量：

# 设置可执行文件的输出路径（EXECUTABLE_OUTPUT_PATH是全局变量）
+set(EXECUTABLE_OUTPUT_PATH [output_path])
+
+# 设置库文件的输出路径（LIBRARY_OUTPUT_PATH是全局变量）
+set(LIBRARY_OUTPUT_PATH [output_path])
+
+# 设置C++编译参数（CMAKE_CXX_FLAGS是全局变量）
+set(CMAKE_CXX_FLAGS "-Wall std=c++11")
+
+# 设置源文件集合（SOURCE_FILES是本地变量即自定义变量）
+set(SOURCE_FILES main.cpp test.cpp ...)
+

# 4、常用命令-include_directories

设置头文件目录。

# 可以用相对或绝对路径，也可以用自定义的变量值
+include_directories(./include ${MY_INCLUDE})
+

相当于g++选项中的-l参数。

# 5、常用命令-add_executable

添加可执行文件：

add_executable(<name> ${SRC_LIST})
+

# 6、常用命令-target_link_libraries

target_link_libraries(<name> lib1 lib2 lib3)
+
+# 如果出现互相依赖的静态库，CMake会允许依赖图中包含循环依赖，如：
+add_library(A STATIC a.c)
+add_library(B STATIC b.c)
+target_link_libraries(A B)
+target_link_libraries(B A)
+add_executable(main main.c)
+target_link_libraries(main A)
+
  • 将若干库链接到目标库文件。
  • 链接的顺序应当符合gcc链接顺序规则，被链接的库放在依赖它的库的后面，即如果上面的命令中，lib1依赖于lib2，lib2又依赖于lib3，则在上面命令中必须严格按照lib1 lib2 lib3的顺序排列，否则会报错。

# 7、常用命令-add_definitions

为当前路径以及子目录的源文件加入由-D引入的define flag

add_definitions(-DF00 -DDEBUG ...)
+

通常用于添加编译参数

# 8、常用命令-add_subdirectory

用于添加子目录的CMake源文件：

# sub_dir指定包含CMakeLists.txt和源码文件的子目录位置
+# binary_dir是输出路径，一般可以不指定
+add_subdirectory(sub_dir [binary_dir])
+

如果当前目录下还有子目录时可以使用add_subdirectory，子目录中也需要包含有CMakeLists.txt。

# 9、常用命令-file

文件操作命令：

# 将message写入filename文件中，会覆盖文件原有内容
+file(WRITE filename "message")
+# 将message写入filename文件中，会追加在文件末尾
+file(APPEND filename "message")
+# 从filename文件中读取内容并存储到var变量中，如果指定了numBytes和offset，
+# 则从offset处开始最多读numBytes个字节，另外如果指定了HEX参数，则内容会以十六进制形式存储在var变量中
+file(READ filename var [LIMIT numbytes] [OFFSET offset] [HEX])
+# 重命名文件
+file(RENAME <oldname> <newname>)
+# 删除文件，等于rm命令
+file(REMOVE [file1 ...])
+# 递归的执行删除文件命令，等于rm -r
+file(REMOVE_RECURSE [file1...])
+# 根据指定的url下载文件
+# timeout超时时间；下载的状态会保存到status中；下载日志会被保存到log；sum指定所下载文件预期的MD5值，如果指定会自动进行比对，
+# 如果不一致，则返回一个错误；SHOW_PROGRESS，进度信息会以状态信息的形式被打印出来
+file(DOWNLOAD url file [TIMEOUT timeout] [STATUS status] [LOG log] [EXPECTED_MD5 sum] [SHOW_PROGRESS])
+# 创建目录
+file(MAKE_DIRECTORY [dir1 dir2 ...])
+# 会把path转换为以unix的/开头的cmake风格路径，保存到result中
+file(TO_CMAKE_PATH path result)
+# 它会把cmake风格的路径转换为本地路径风格：windows下用"\"，而unix下用"/"
+file(TO_NATIVE_PATH path result)
+# 将会为所有匹配查询表达式的文件生成一个文件list，并将该list存储进变量variable里，如果一个表达式指定了RELATIVE，返回的结果
+# 将会是相对于定路径的相对路径，查询表达式例子：*.cxx，*.vt?
+# NOTE：按照官方文档的说法，不建议使用file的GLOB指令来收集工程的源文件
+file(GLOB variable [RELATIVE path] [globbing expressions]...)
+

使用这种方式来指定源文件的话，如果后面项目需要增加源文件，比如项目中原本有2个源文件a.c和b.c，后面新增一个c.c，如果我们直接增加c.c，然后进行编译是会报错的，因为CMakeLists文件没有改动，所以cmake不会重新生成makefile文件，所以我们需要简单的改动一下CMakeLists文件，可以在CMakeLists文件中添加一个空格，然后再编译，它就会生成makefile文件。

# 9、常用命令-set_directory_properties

设置某个路径的一种属性：

set_directory_properties(PROPERTIES prop1 value1 prop2 value2)
+

prop1，prop2代表属性，取值为：

  • INCLUDE_DIRECTORIES
  • LINK_DIRECTORIES
  • INCLUDE_REGULAR_EXPRESSION
  • ADDITIONAL_MAKE_CLEAN_FILES

# 10、常用命令-set_property

在给定的作用域内设置一个命名的属性：

set_property(<GLOBAL |
+			DIRECTORY [dir] |
+			TARGET [target ...] |
+			SOURCE [src1 ...] |
+			TEST [test1 ...] |
+			CACHE [entry1 ...]>
+			[APPEND]
+			PROPERTY <name> [value ...])
+

PROPERTY 参数是必须的。第一个参数决定了属性可以影响的作用域：

  • GLOBAL：全局作用域
  • DIRECTORY：默认当前路径，也可以用[dir]指定路径。
  • TARGET：目标作用域，可以是0个或多个已有目标。
  • SOURCE：源文件作用域，可以是0个或多个源文件。
  • TEST：测试作用域，可以是0个或多个已有的测试。
  • CACHE：必须指定0个或多个cache中已有的条目。

# 11、多个源文件处理

cmake_minimum_required(VERSION 3.4.1)
+# 查找当前目录所有源文件，并将名称保存到 DIR_SRCS 变量
+# 不能查找子目录
+aux_source_directory(. DIR_SRCS)
+# 也可以使用
+# file(GLOB DIR_SRCS *.c *.cpp)
+
+add_library(
+	native-lib
+	SHARED
+	${DIR_SRCS})
+

如果源文件很多，把所有文件一个个加入很麻烦，可以使用aux_source_directory命令或file命令，会查找指定目录下的所有源文件，然后将结果存进指定变量名。

# 12、多目录多源文件处理

cmake_minimum_required(VERSION 3.4.1)
+aux_source_directory(. DIR_SRCS)
+# 添加child子目录下的cmakelist
+add_subdirectory(child)
+
+add_library(
+	native_lib
+	SHARED
+	${DIR_SRCS})
+target_link_libraries(native-lib child)
+----------------------------------------
+
+# child目录下的CMakeLists.txt：
+cmake_minimum_required(VERSION 3.4.1)
+aux_source_directory(. DIR_LIB_SRCS)
+add_library(
+	child
+	SHARED
+	${DIR_LIB_SRCS})
+
  • 主目录中的CMakeLists.txt中添加add_subdirectory(child)命令，指明本项目包含一个子项目child。并在target_link_libraries指明本项目需要链接一个名为child的库。
  • 子目录child中创建CMakeLists.txt，这里child编译为共享库。

# 13、添加预编译库

# 1）Android6.0版本以前

假设我们本地项目引用了libimported-lib.so：

cmake_minimum_required(VERSION 3.4.1)
+# 使用 IMPORTED 标志告知 CMake 只希望将库导入到项目中
+# 如果是静态库则将shared改为static
+add_library(imported-lib
+			SHARED
+			IMPORTED)
+
+# 参数分别为：库、属性、导入地址、库所在地址
+set_target_properties(
+	imported-lib
+	PROPERTIES
+	IMPORTED_LOCATION
+	<路径>/libimported-lib.so)
+
+aux_source_directory(. DIR_SRCS)
+add_library(
+	native-lib
+	SHARED
+	${DIR_SRCS})
+
+target_link_libraries(native-lib imported-lib)
+
  • 添加add_library命令，第一个参数是模块名，第二个参数SHARED表示动态库，STATIC表示静态库，第三个参数IMPORTED表示以导入的形式添加。
  • 添加set_target_properties命令设置导入路径属性。
  • 将import-lib添加到target_link_libraries命令参数中，表示native-lib需要链接imported-lib模块

# 2）Android6.0版本以后

在Android6.0及以上版本，如果使用上节的方法添加预编译动态库的话，会有问题，我们可以使用另外一种方式来配置：

# set命令定义一个变量
+# CMAKE_C_FLAGS：c的参数，会传递给编译器
+# 如果是c++文件，需要用CMAKE_CXX_FLAGS
+# -L：库的查找路径
+set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -L[so所在目录")
+

# 14、添加头文件目录

为了确保CMake可以在编译时定位头文件，使用include_directories，相当于g++选项中的-I参数。这样就可以使用#include <xx.h>，否则需要使用#include "path/xx.h"：

cmake_minimum_required(VERSION 3.4.1)
+# 设置头文件目录
+include_directories(<文件目录>)
+set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -L[so所在目录]")
+aux_source_directory(. DIR_SRCS)
+add_library(
+	native-lib
+	SHARED
+	${DIR_SRCS})
+target_link_libraries(native-lib imported-lib)
+

# 15、build.gradle配置

可以在gradle中使用arguments设置一些配置：

android{
+	defaultConfig{
+		cmake{
+			// 使用的编译器clang/gcc
+			// cmake默认就是 gnustl_static
+			arguments "-DANDROID_TOOLCHAIN=clang","-DANDROID_STL=gnustl_static"
+			// 指定cflags和cppflags，效果和cmakelist使用一样
+			cFlags ""
+			cppFlags ""
+			// 指定需要编译的cpu架构
+			abiFilters "armeabi-v7a"
+		}
+	}
+	externalNativeBuild{
+		cmake{
+			// 指定CMakeLists.txt文件相对当前build.gradle的路径
+			path "xxx/CMakeLists.txt"
+		}
+	}
+}
+

# 三、实操

官网：https://www.fmod.com/ (opens new window) +SDK下载页面：https://www.fmod.com/download (opens new window)

需要先注册登录后，才能下载

# 1、库文件集成

在fmod官网下载好 fmodstudioapi20000android.tar.gz 后，解压，找到 api/core目录，其中inc是fmod的头文件，lib是fmod预编译好的so和jar文件。

# 1）集成so与jar

# 2）集成.h头文件

# 2、CMakeLists.txt文件配置：

fmod提供的so文件属于预编译库，需要在自己的工程中集成fmod并使用，大概可分为2步骤：

  1. 指定头文件目录。方便在native-lib.cpp中可以使用include <fmod.hpp>
  2. 指定预编译库目录。让native-lib在编译时，可以成功链接fmod。
# 指定cmake最小支持版本
+cmake_minimum_required(VERSION 3.4.1)
+
+# 设置头文件目录
+include_directories(${CMAKE_SOURCE_DIR}/inc)
+
+# 设置第三方so库路径（android6.0以后需要这样设置）
+set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -L${CMAKE_SOURCE_DIR}/../jniLibs/${CMAKE_ANDROID_ARCH_ABI}")
+
+# 添加一个库，根据native-lib.cpp源文件编译一个native-lib的动态库
+add_library(
+        native-lib
+        SHARED
+        native-lib.cpp)
+
+# 查找系统库，这里查找的是系统日志库，并赋值给变量log-lib
+find_library(
+        log-lib
+        log)
+
+# 设置以来的库（第一个参数必须为目标模块，顺序不能换）
+target_link_libraries(
+        native-lib
+        fmod
+        fmodL
+        ${log-lib})
+

${CMAKE_SOURCE_DIR} 可以获取到CMakeLists.txt文件当前所在目录路径。

# 3、build.gradle配置

因为该工具只在模拟器上运行，所以只需要x86平台的so库文件，可以使用 abiFilters 进行过滤。

手机一般都是arm平台，可根据实际情况修改abiFilters。

android {
+    defaultConfig {
+        ...
+        externalNativeBuild {
+            cmake {
+                cppFlags ""
+                abiFilters "x86" // 指定本地库的cpu架构
+            }
+        }
+        ndk {
+            abiFilters "x86" // 指定第三方库的cpu架构
+        }
+    }
+    externalNativeBuild {
+        cmake {
+            path "src/main/cpp/CMakeLists.txt"
+            version "3.10.2"
+        }
+    }
+}
+

# 4、编写native-lib.cpp

使用日志输出fmod版本号：

#include <jni.h>
+#include <string>
+#include <android/log.h>
+#include <fmod.hpp>
+
+using namespace FMOD;
+
+extern "C" JNIEXPORT jstring JNICALL
+Java_com_lqr_cmakefmod_MainActivity_stringFromJNI(
+        JNIEnv *env,
+        jobject /* this */) {
+    System *system;
+    System_Create(&system);
+    unsigned int version;
+    system->getVersion(&version);
+    __android_log_print(ANDROID_LOG_ERROR, "TEST", "FMOD Version: %08x", version);
+
+    std::string hello = "Hello from C++";
+    return env->NewStringUTF(hello.c_str());
+}
+

最终，在触发stringFromJNI()方法后，就可以在控制台看到fmod版本号的输出了。

+ +
+
#NDK#Cmake
AndroidNDK - makefile语法详解
AndroidNDK - 编译 openssl

+ ← + AndroidNDK - 编译 openssl→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/23e976/index.html b/pages/23e976/index.html new file mode 100644 index 000000000..f80e8694f --- /dev/null +++ b/pages/23e976/index.html @@ -0,0 +1,220 @@ + + + + + + AI - 发现一个超级好用的 AI 聚合平台 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2024-06-10
目录

AI - 发现一个超级好用的 AI 聚合平台

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

最近听朋友介绍，国内有个团队开发了一个全功能的 AI 聚合平台，包含主流的 GPT 和 绘画功能，以及一些其他的衍生功能，几乎应有尽有。于是，对 AI 很感兴趣的我，便也来瞧瞧这是个什么样的存在，以下便是我的真实使用感受。除此以外，作为一个程序员，我还使用了该平台提供的 API 接口，开发了一个简单的小程序。文章的末尾，我将提供免费的 AI 机器人，以及小程序体验地址，记得查收哦~

注：现在注册后填写问卷，还能免费获得 1 PTC，感兴趣的朋友可以试试看

# 一、功能版块

通过官方的帮助文档，可以知道，目前平台提供了五大功能，分别是：

  • 聊天机器人： +
    • 基于各家 AI API 开发，可根据需求选择模型。
    • 用户可以生成无数个聊天机器人，并一键分享给他人，无需登录，让所有人零门槛接触 AI。
  • 应用机器人： +
    • 应用机器人是聊天机器人的扩展，直接接入海量的 AI 应用商店。
    • 和聊天机器人不同之处在于功能非常专一，机器人只有对应的 AI 应用功能，不会被其他的功能打扰，更加适合分享给小白用户，减少了上手的难度。
  • 绘画机器人： +
    • 基于 Midjourney 开发，通过简单的文本提示来创建极高质量的图像和艺术作品。
    • 相比聊天机器人的绘画功能，该机器人生成速度更慢，功能更强大，生成的图片更加真实。适用于专业的艺术创作。
  • 工具超市： +
    • 集成了多种 AI 工具的平台，用户可以在这里快捷地生成、使用各种工具（例如：AI 翻译大师、老照片修复）。
  • API 超市： +
    • 开放丰富的 API 给开发者。

# 1、聊天机器人

这个聊天机器人可以认为是一个 GPT 超级全家桶，包括了 OpenAI 模型（3.5、4.0、4+）、Anthropic 模型（Claude 3）、Google 模型（gemini-1.5-pro）、国产模型（百度文心一言、阿里通义千问、智谱 GLM-4...）、开源模型（LLaMA3、Mixtral、Gemma） 等等。

点击【聊天机器人】栏目，选择想要使用的模型，然后点击【添加机器人】就会自动进行创建了：

创建完成后，会自动跳转到聊天界面，可以直接跟 AI 进行对话：

左上角有个【助手】按钮，可以让机器人扮演不同的角色来进行对话：

在这里我选择【简历写手】来对帮我丰富简历：

至此，我们在这个聚合平台上，可以创建无数个不同模型的聊天机器人，随意切换跟不同的聊天机器人进行聊天，特别是 OpenAI 模型，在该平台上，国内网络是直连使用的。

注：对于重度依赖 OpenAI ChatGPT 的用户来说，简直是福音，再也不用跟朋友圈那些二手贩子购买 ChatGPT 账号了，没优惠不说，账号还容易被封，现在这个平台，我感觉完全可以做为平替。

另外，作为一个聚合平台，它提供了【模型竞技场】功能，这一点让我挺惊讶的，可以在此处找到功能入口：

在【模型竞技场】中，你可以一个个模型进行尝试，对比各个模型的回答效果：

当然你也可以同时开启多个模型，让多个模型一起回答同一个问题：

孰强孰弱，一看便知。

另外，平台有机器人分享功能，这也是我比较喜欢的一点，就是把你配置好的聊天机器人，直接分享给别人使用：

注：分享码 可以通过【编辑】进行 修改 或 取消。

点击【分享】按钮，会自动复制分享链接，只需要把链接发给你的好友，用浏览器打开即可直接使用机器人了：

注意：分享出去的机器人，别人使用的话，是会消耗你账户里的额度的，不过你可以在【编辑】页面，对机器人的使用额度进行限制，这样就可以安心分享了。

在聊天页面【助手】按钮的右侧，还有个【应用商店】入口，点开有众多应用插件可用，【应用商店】里的专业插件，很适合小白用户，极易上手：

例如，我这里使用了【画图版】，平台会自动创建一个新的聊天会话，这个比单纯的聊天机器人更加专业一些，如果你想生成一张图片，但不知道怎么很好的去描述，那么，这个应用插件会相当有用：

如图所示，这个【应用】插件会将你的要求转换成更加具体的描述，然后再去生成图片：

其他的【应用】插件就不一一体验了，功能各不相同，有需要的可以仔细研究研究~

# 2、应用机器人

【应用机器人】其实就是【聊天机器人】的扩展，只是这里单独抽出来了，它的功能非常专一，【应用机器人】只有对应的 AI 应用功能，不会被其他的功能打扰。由于上面详细介绍过【聊天机器人】了，这里就简单演示一下吧：

如图，选择你所需要的【应用】，这里选择了【小红书营销专家】，然后就可以点击【添加机器人】按钮进行创建，创建好后会自动跳转，也可以在页面【已有机器人】部分，点击【聊天】按钮即可跳转使用：

# 3、绘画机器人

目前平台的绘画机器人模型只有 Midjourney，功能强大，但是生成速度稍慢些，添加机器人的方式也是一样的操作：

机器人创建完成后，可以看到绘画机器人左侧功能与聊天机器人不一样，是针对绘画相关的，其中探索页面，可以看到一些比较好的作图以及详细的生成指令，是一个不错的学习方式：

绘画功能，使用上跟 MJ 官网的差不多，这里就不展开了。

# 4、工具超市

工具超市是平台专门针对某些使用场景开发的工具集，现有的工具不多，暂时只有以下几个：

  • 工作效率： +
    • AI 调研大师：一键生成调研报告
    • AI 搜索大师：通过 AI 搜索，节省查找的时间
    • 模型竞技场：所有模型一起回答
  • 文字处理：AI 翻译大师
  • 图片处理： +
    • AI 老照片修复：老照片修复、高清放大、黑白上色
  • 视频相关： +
    • AI 视频素材创意站：输入关键词，AI 自动寻找合成视频素材
  • 代码相关： +
    • AI 网页复制器：一张截图，AI 自动复刻网页

其中【AI 老照片修复】这个工具我比较感兴趣，我们来试试看，在【工具超市】-【工具列表】中找到【AI 老照片修复】：

点击后，会弹出一个配置界面：

设置好配置参数后，点击【创建】按钮，即可自动跳转到工具使用页面：

目前【AI 老照片修复】工具支持【无损放大】、【人物增强】和【黑白上色】三大功能，这里我找了一张哥哥的图片来做测试。分辨率仅 72 x 72，大小 11 KB：

放大来看的话，映入眼帘的是硕大的马赛克，马上修复!!

一次性把所有功能都用上，启动！经过一两分钟的等待，修复后的图片就出现了，还可以拉动中间图标，查看图片修复前后的对比：

修复后的图片，脸上的胡渣子都看得清清楚楚，分辨率来到了 4096 × 6184，大小为 15MB：

大家看看效果如何？我个人是觉得很满意的，很强大！

下次如果你还想使用的时候，可以在【工具超市】-【工具管理】中找到它，点击【操作】里的【使用】按钮即可。

关于修复老照片所需要消耗的 PTC 如下图所示，用来修复家里的一些老旧照片，可是相当划算的：

# 5、API 超市

说完上面那些面向普通用户的功能，现在终于来到了面向开发者的 API 超市了，API 超市分为了这几个类别：

  • 语言大模型：OpenAI、Anthropic、Gemini、国产模型、开源模型
  • AI 绘图：DALL.E、Stability.ai、Midjourney、302.AI
  • 图片处理：302.AI、Clipdrop、Vectorizer.AI、Stability.ai
  • 声音处理：OpenAI、Suno
  • 视频生成：302.AI、Stability.ai
  • 信息检索：Tavily、SearchAPI
  • 数据向量化：OpenAI

可以看到，聚合了目前各主流平台，涵盖了各种主流的 AI 功能，这些功能，均可在【API 超市】-【API 列表】找到：

随意点击一个模型，即可跳转到对应的 API 文档页面：

API 指南：https://apifox.com/apidoc/project-4012774 (opens new window)

# 二、开发小程序

既然该平台有提供如此丰富的 API 接口，作为一个开发者，我就来做个简单的小 Demo 试试水吧。

# 1、API 管理

点击【API 超市】-【API 管理】，在右侧页面可以看到添加 API 的部分：

可以填写一个名称、过期时间以及额度，我觉得 过期时间 和 额度 这两项非常有用，当用来做一些对外的演示项目时，就不怕因项目外泄导致余额被刷光光了，灰常省心~

创建完成后，就可以在页面下方【已有 API】部分看到刚刚创建的 API 了，后面还有个【编辑】按钮，可以修改当前的 API 信息（包括 过期时间、额度），这里看到 API_KEY 这一栏，有个密钥，后续接口调用需要用到，点击眼睛 icon 可以查看，将 API_KEY 复制出来备用。

# 2、API 列表

点击【API 超市】-【API 列表】，找到图片处理分类，可以看到，图片处理 API 按不同平台提供的能力进行归类：

当然啦，不同的平台能力，价格也是不一样的，具体可以查看官网的价格说明：

随便点击一个能力平台，就会跳转到 API 文档说明页面，可以看到图片处理 API 也有很多：

# 3、背景消除 API

这里我打算做一个简易证件照小程序，就看看这个 Removebg（背景消除）API 吧：

可以看到，文档十分简洁！一下子就知道了 http 请求的全部要素（包括：url、请求方法、请求头、请求参数，响应数据 等），还提供了各种编程语言的示例代码，对小白来说，还挺贴心。

注：请求头需要带上校验字段 Authorization: Bearer ${API_KEY}，我们前面拿到的 API_KEY 就能在此处发挥作用了，用于 API 的鉴权和计费。

# 4、实战 - 界面功能

使用 uniapp 快速搭建一个简单页面：

<template>
+  <view class="index-container">
+    <view class="img-box" @click="onPickImg">
+      <view v-if="!img" class="add">+</view>
+      <image v-if="img" class="img" :src="img.path" mode="aspectFit" />
+    </view>
+    <view class="gen-btn" @click="onGenImg">生成证件照</view>
+    <PhotoDialog ref="photoDialog" />
+  </view>
+</template>
+

然后再实现一个选取图片功能：

const img = ref<ImgFile>();
+
+function onPickImg() {
+  uni.chooseImage({
+    count: 1,
+    sizeType: ["original", "compressed"],
+    sourceType: ["album", "camera"],
+    success: (res) => {
+      if (res.tempFiles instanceof Array) {
+        img.value = res.tempFiles[0] as any;
+      } else {
+        img.value = res.tempFiles as any;
+      }
+    },
+    fail: (error) => {
+      console.log(error);
+      uni.showToast({
+        title: "pick img fail",
+        icon: "error",
+        mask: true,
+      });
+    },
+  });
+}
+

啪的一下，效果就出来了：

# 5、实战 - API 对接

这里有一点需要注意的，AI 是使用 GPU 处理计算的，耗时与云端机器性能相关，有些 AI 功能会涉及大量 GPU 运算，所以耗时比较久也是常见的事，我们这里使用的 Removebg（背景消除）API 平均耗时 5-15s，但有时也可能超过 30s，这里官方给出的方案是，如果一个任务 30s 内没有完成的话，接口会直接返回，并带有任务 id，后续可以通过 Fetch 接口查询相应任务的执行结果：

注：Fetch 接口不消耗 PTC

这个 Fetch 接口对接起来也相当简单，我将此次 Demo 用到的 API 做个封装：

import * as http from "./http";
+
+const API_KEY = "Bearer ${API_KEY}"; // 注意替换成自己的 API_KEY
+
+const ai302Header = {
+  Authorization: API_KEY,
+};
+
+/**
+ * 302.AI的API，来自于我们在云GPU上自己部署的模型。部分模型为开源模型，部分模型为我们自己微调或开发的。
+ * 当一个任务超过30s没有完成，接口会自动返回任务id，请将id传递到这个接口，通过这个接口来获取任务结果。
+ * 价格：0 PTC/次
+ * @param id
+ */
+export function fetchTaskResult(id: string): Promise<AiTaskResult> {
+  return http.get(`https://api.302.ai/302/task/${id}/fetch`, {}, ai302Header);
+}
+
+/**
+ * 302.AI的API，来自于我们在云GPU上自己部署的模型。部分模型为开源模型，部分模型为我们自己微调或开发的。
+ * 背景消除。来自于：https://github.com/hustvl/ViTMatte
+ * 平均运行时长5-15s
+ * 价格：0.01 PTC/次
+ * @param imgFile
+ * @returns
+ */
+export function removeBg(imgFile: ImgFile): Promise<AiTaskResult> {
+  const filePath = imgFile.path;
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: `https://api.302.ai/302/submit/removebg`,
+      fileType: "image",
+      filePath: filePath,
+      header: ai302Header,
+      name: "image",
+      formData: {},
+      success: (res: { data: any; statusCode: number }) => {
+        const code = res.statusCode;
+        if (code >= 200 && code < 400) {
+          resolve(JSON.parse(res.data));
+        } else {
+          reject(`upload fail, statusCode = ${code}`);
+        }
+      },
+      fail: (err) => reject(err),
+    });
+  });
+}
+

接着，当点击【生成证件照】按钮时，触发 API 接口调用即可：

async function onGenImg() {
+  if (!img.value) {
+    return uni.showToast({
+      title: "please pick img first",
+      icon: "none",
+    });
+  }
+
+  try {
+    uni.showLoading({
+      title: "loading",
+    });
+    let res = await ai302Api.removeBg(img.value);
+    console.log("removeBg res: ", res);
+    // 说明 30s 内没有生成成功，执行 fetch 查询
+    if (res.status == "starting") {
+      console.log("removeBg timeout, startFetchTimer");
+      res = await startFetchTimer(res.id);
+      console.log("fetch res: ", res);
+    }
+    uni.hideLoading();
+
+    if (isAiResSuccess(res)) {
+      // 显示最终结果
+      showResImg(res.output);
+    } else {
+      // 说明最终结果没有成功
+      uni.showToast({
+        title: "removeBg fail",
+        icon: "error",
+      });
+    }
+  } catch (error) {
+    console.log(error);
+    uni.hideLoading();
+    uni.showToast({
+      title: "error happen..",
+      icon: "error",
+    });
+  }
+}
+

# 6、实战 - 最终效果

这便是最终 Demo 的演示效果：

说下我对 Demo 开发过程中的感受：

  • API 接口文档很简洁，对接很快
  • 接口响应速度一般，但总体上能接受
  • 最终图片背景消除效果很不错

在此附上我亲手给 小罗伯特·唐尼 生成的证件照，帅爆了，嘿嘿~

# 三、总结

目前来看，该平台上的功能还是蛮齐全的，其中【聊天机器人】、【应用机器人】、【绘画机器人】、【工具超市】都是网页功能，方便所有人使用，设计逻辑上都遵循 创建 -> 使用 -> 分享，不需要过多的学习成本，很容易就能上手，而【API 超市】则是针对开发者的，其 API 文档相当简洁明了，API 功能相当丰富，只需要根据文档对接 API ，就可以马上给自己的产品赋能，并且所有的功能都是按需付费，挺好的。

总的来说，国内直连，按需付费，功能丰富，大大降低了 AI 的 使用 和 接入 门槛，是一个相当不错的 AI 聚合平台。

我这边创建了两个机器人免费分享给大家体验，额度有限，先到先用哈：

+ +
+
#ChatGPT#AIGC#Midjourney#302 AI
AI - 免费搭建一个私有的 ChatGPT

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/242c2b/index.html b/pages/242c2b/index.html new file mode 100644 index 000000000..03cf84136 --- /dev/null +++ b/pages/242c2b/index.html @@ -0,0 +1,127 @@ + + + + + + iOS逆向 - 应用脱壳 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-02-19
目录

iOS逆向 - 应用脱壳

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

iOS 端 APP 在上线之前，会经过苹果商店进行 FairPlayDRM 数字版本加密保护，俗称 “加壳”，如果想对应用进行分析，就必须进行 “脱壳”，从而得到未加密的二进制文件

# 一、检测是否加壳

介绍两个常用的方式

# 1、使用 otool 检测

执行如下命令

otool -l Twitter | grep crypt
+

在得到的结果中，如果 cryptid 的值为 1，则说明已加壳，如果为 0 则说明未加壳

# 2、使用 MachOView 检测

使用 MachOView打开目标文件后，展开 Load Commands 找到 LC_ENCRYPTION_INFO_64，右侧可以看到 Crypt ID，同上，1 为已加壳，0 为未加壳

# 二、脱壳

以下罗列常用的脱壳工具，推荐度从上到下依次递减

# 1、CrackerXI

CrackerXI 的安装和使用都较为简单，是目前为止最为傻瓜式的脱壳工具

在 Cydia 中添加源地址 http://cydia.iphonecake.com/，添加完成后搜索 CrackerXI，找到后安装即可。

在进行脱壳前，需要进入 Settings 页面进行配置，配置如下图所示

切回 AppList 页面，点击需要脱壳的 App，在弹出的对话框中选择 YES，Full IPA 即可。

# 2、Clutch

https://github.com/KJCracks/Clutch

在 Release 页面找到最新版本的可执行文件，下载后改名为 Clutch，执行下方命令，将 Cluth 文件复制到 iOS 设备的 /usr/bin 目录下

scp -P 2222 -r ./Clutch root@localhost:/usr/bin/
+

登录到 iOS 设备，给 Cluth 文件添加执行权限

lxf-iPad:~ root# chmod +x /usr/bin/Clutch
+

至于怎么通过端口 2222 就可以从 Mac 上传输给 iOS 设备，以及如何登录到 iOS 设备，请查看本人的另一篇文章：Mac远程登录到iOS设备 (opens new window)

执行 Clutch 可查看帮助信息

lxf-iPad:~ root# Clutch
+Usage: Clutch [OPTIONS]
+-b --binary-dump <value> Only dump binary files from specified bundleID
+-d --dump <value>        Dump specified bundleID into .ipa file
+-i --print-installed     Print installed applications
+   --clean               Clean /var/tmp/clutch directory
+   --version             Display version and exit
+-? --help                Display this help and exit
+-n --no-color            Print with colors disabled
+

-i 参数可以打印从 AppStore 上下载安装的 App

lxf-iPad:~ root# Clutch -i
+Installed apps:
+1:   Twitter <com.atebits.Tweetie2>
+...
+

-d 参数可以进行脱壳，这里以 Twitter 为例

Clutch -d com.atebits.Tweetie2
+

脱壳后的 ipa 文件会存放至 /private/var/mobile/Documents/Dumped/ 目录下

# 3、dumpdecrypted

https://github.com/stefanesser/dumpdecrypted

下载源码，在 dumpdecrypted 目录下执行 make 命令编译生成 dumpdecrypted.dylib

# 进入 dumpdecrypted 目录
+cd xxx/dumpdecrypted
+
+# 进行编译
+make
+

编译完成后，目录下就有了 dumpdecrypted.dylib 文件

.
+├── Makefile
+├── README
+├── dumpdecrypted.c
+├── dumpdecrypted.dylib
+└── dumpdecrypted.o
+

将 dumpdecrypted.dylib 文件复制 iOS 设备

scp -P 2222 -r ./dumpdecrypted.dylib root@localhost:/usr/bin/
+

使用 ps 命令查看目标文件的完整路径

lxf-iPad:~ root# ps -ax | grep Twitter
+15153 ??         0:00.00 /var/containers/Bundle/Application/3A7C3480-C30B-40D7-A0A4-6C313E42B793/Twitter.app/Twitter
+15161 ttys000    0:00.02 grep Twitter
+

使用 DYLD_INSERT_LIBRARIES 环境变量将 dumpdecrypted.dylib 注入就可以脱壳。

DYLD_INSERT_LIBRARIES=dumpdecrypted.dylib /var/containers/Bundle/Application/3A7C3480-C30B-40D7-A0A4-6C313E42B793/Twitter.app/Twitter
+

执行完成后会在将脱壳后的文件存放到当前目录下

# 4、frida-ios-dump

https://github.com/AloneMonkey/frida-ios-dump (opens new window)

下载源码后，安装其 python 脚本所需依赖包

pip install -r requirements.tx
+

-h 参数查看帮助

python dump.py -h
+

-l 参数查看本机已应用 App

./dump.py -l
+

# 三、取出脱壳文件

# 1、爱思助手

以 CrackerXI 为例，按此路径便可找到脱壳后的文件

/private/var/mobile/Documents/CrackerXI/
+

找到后选中目的文件，点击左上角的 导出 按钮，或者右击文件，在弹出的菜单中选中 导出 按钮即可。

# 2、SCP

scp -P 2222 -r root@localhost:/private/var/mobile/Documents/CrackerXI/Twitter_8.61_LXF.ipa ./
+

# 四、验证

正如文章开头所说的，使用 otool 或 MachOView 查看 cryptid 的值，为 0 即为脱壳成功。

+ +
+
#iOS#逆向
Mach-O文件结构分析
iOS逆向 - 运行时分析（一）class-dump

+ ← + iOS逆向 - 运行时分析（一）class-dump→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/253dac/index.html b/pages/253dac/index.html new file mode 100644 index 000000000..b419d2425 --- /dev/null +++ b/pages/253dac/index.html @@ -0,0 +1,203 @@ + + + + + + ReactorKit + RxDataSources列表多次刷新的解决方案 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-12-08
目录

ReactorKit + RxDataSources列表多次刷新的解决方案

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

相信使用 ReactorKit + RxDataSources 的同学都有遇到列表会多次刷新的问题吧，本篇将提出我的解决方案，相互学习交流

# 一、常规使用

Reactor

enum Mutation {
+    case setSections([LXFSection])
+    ...
+}
+
+struct State {
+    var sections : [LXFSection] = []
+    ...
+}
+

View

reactor.state.map { $0.sections }
+    .bind(to: tableView.rx.items(dataSource: dataSource))
+    .disposed(by: disposeBag)
+

由于在 ReactorKit 中，View 对状态的订阅都是针对 State 来说的，而非 State 中的属性，所以只要 State 的值发生改变，View 中所有对 State 的订阅回调都会被调用，从而使视图进行更新。

但是一个属性的变化，理应只需要更新对应的视图即可，要达到这一效果，就需要使用 distinctUntilChanged 这个方法，对于 State 中遵守了 Equatable 协议的属性，直接加上 .distinctUntilChanged() 即可

但是看我们定义的 Section

import RxDataSources
+
+enum LXFSection {
+    case list([LXFSectionItem])
+}
+
+extension LXFSection: SectionModelType {
+    init(original: LXFSection, items: [LXFSectionItem]) {
+        switch original {
+        case .list: self = .list(items)
+        }
+    }
+    
+    var items: [LXFSectionItem] {
+        switch self {
+        case .list(let items): return items
+        }
+    }
+}
+
+enum LXFSectionItem {
+    case item(LXFCellReactor)
+}
+

需要自己给 LXFSection 遵守 Equatable 并实现协议方法，或者是在 distinctUntilChanged 回调中自己做判断 ，但都太麻烦了～

reactor.state.map { $0.sections }
+    .distinctUntilChanged({ (sectionArr1: [LXFSection], sectionArr2: [LXFSection]) in
+        return 判断 sectionArr1 和 sectionArr2 是否相等
+    })
+    .bind(to: tableView.rx.items(dataSource: dataSource))
+    .disposed(by: disposeBag)
+

那有没有其它办法呢？答案当然是有的

# 二、优化

创建一个名为 SwiftyTraceableValue 的结构体，定义如下：

public struct SwiftyTraceableValue<T> {
+    public var tracker: Int = 0
+    public var value: T
+}
+

内部属性说明：

属性 作用
tracker 用于判断是否数据是否有发生变化
value 存储原来的值

调整 Mutation

enum Mutation {
+    case setSections(TraceableValue<[LXFSection]>)
+    ...
+}
+

调整 State

struct State {
+    var sections : TraceableValue<[LXFSection]> = .init(value: [])
+    ...
+}
+

调整 Sections 数据的处理

let oldTracker = self?.currentState.sections.tracker ?? 0
+let oldSections = self?.currentState.sections.value ?? []
+items = oldSections.first?.items ?? [] + items
+let finalSections = [LXFSection.list(items)]
+let sections = TraceableValue(tracker: oldTracker + 1, value: finalSections)
+let setSections = Observable.just(Mutation.setSections(sections))
+

调整 View

reactor.state.map { $0.sections }
+	.distinctUntilChanged {
+        $0.tracker == $1.tracker
+    }
+    .map { $0.value }
+    .bind(to: tableView.rx.items(dataSource: dataSource))
+    .disposed(by: disposeBag)
+

至此，按如上的内容进行调整便可以解决列表多次刷新的问题，但是这改动也忒大了，而且还要自己管理 tracker 的值，这怎么能忍？

那有什么办法可以让我们不再手动管理 tracker 呢？🤔

这里我们可以使用 Swift 的 Property Wrapper😏

# 三、改进

我们将 SwiftyTraceableValue 使用 Property Wrapper 进行封装

@propertyWrapper
+public struct SwiftyTraceableValue<T> {
+    public  var tracker: Int = 0
+    public var value: T
+    
+    public var projectedValue: SwiftyTraceableValue {
+        return self
+    }
+    
+    public var wrappedValue: T {
+        get {
+            return self.value
+        } set {
+            self.tracker += 1
+            self.value = newValue
+        }
+    }
+    
+    public init(wrappedValue: T) {
+        self.value = wrappedValue
+    }
+}
+

这样，每次被赋值时即可自动为 tracker 加 1。这里 projectedValue 我们返回真实类型 SwiftyTraceableValue ，以便后续使用。

这里简单提一下属性包装器的使用，更加具体详细的内容可以看我另一篇文章《Swift - PropertyWrapper》

// 使用 @SwiftyTraceableValue 对属性进行修饰
+@SwiftyTraceableValue var sections : [LXFSection] = []
+
+// 获取 wrappedValue 的值
+sections
+
+// 获取 projectedValue 的值
+$sections
+

不仅如此，我们还为 SwiftyTraceableValue 专门扩展 ObservableType，将进行比较内容部分封装起来

public extension ObservableType {
+    func mapDistinctUntilTraceableValueChanged<T>(
+        _ transform: @escaping (Element) throws -> SwiftyTraceableValue<T>
+    ) -> Observable<T> {
+        return self
+            .map(transform)
+            .distinctUntilChanged { $0.tracker == $1.tracker }
+            .map { $0.value }
+    }
+}
+

大功造成，接下来看看如何使用吧

# 四、使用

以下内容是基于第一部分进行调整的，大家可以忘掉第二部分的修改了

最终我们只需要调整两处地方即可解决列表多次刷新的问题！

Reactor

struct State {
+    @SwiftyTraceableValue var sections : [LXFSection] = []
+    ...
+}
+

View

reactor.state.mapDistinctUntilTraceableValueChanged { $0.$sections }
+    .bind(to: tableView.rx.items(dataSource: dataSource))
+    .disposed(by: disposeBag)
+

现在，我将它做成了开源库，方便大家使用，好用的话请 Star 吧 😃

GitHub: +SwiftyTraceableValue (opens new window)

+ +
+
#iOS#Swift#RxSwift#ReactorKit
Swift - 掌控Moya的网络请求、数据解析与缓存
Mac远程登录到iOS设备

+ ← + Mac远程登录到iOS设备→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/26b199/index.html b/pages/26b199/index.html new file mode 100644 index 000000000..97c41203e --- /dev/null +++ b/pages/26b199/index.html @@ -0,0 +1,303 @@ + + + + + + Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-06-18
目录

Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在 【Flutter - 快速实现聊天会话列表的效果，完美💯】 一文中介绍了常规聊天场景下如何保持消息位置及其实现原理，本篇将在此基础上完成 ChatGPT 这种生成式消息保持位置的功能。

如上图所示，操作与现象：

  1. 点击右上角的按钮后，会插入一条消息，模拟向 ChatGPT 发出问题
  2. 然后间隔 1s 会自动插入一条生成式消息，模拟 ChatGPT 在不断回复我们的问题

# 二、布局

布局非常简单，就一个 ListView，不过需要结合 ChatObserver 做一些配置

# 1、ChatObserver 配置

// 实例化 ListObserverController
+// 由于滚动视图使用的是 ListView，所以选择 ListObserverController
+// 否则请选择相应的 ObserverController
+observerController = ListObserverController(controller: scrollController)
+  // 关闭模块定位的偏移缓存功能，因为IM经常添加或删除消息，偏移的缓存容易过时
+  // 如果你不会使用到模块定位功能，则可以不用理会
+  ..cacheJumpIndexOffset = false;
+
+// 实例化 ChatScrollObserver
+chatObserver = ChatScrollObserver(observerController)
+  // 滚动视图的偏移量超过 5 时才会启用保持IM消息位置的功能
+  ..fixedPositionOffset = 5
+  // 内部在切换 isShrinkWrap 的值时会触发该回调，
+  // 触发时局部刷新列表视图即可，这里因为是 Demo 的缘故，做法比较简单粗暴
+  ..toRebuildScrollViewCallback = () {
+    setState(() {});
+  };
+

# 2、ListView 配置

Widget _buildListView() {
+  Widget resultWidget = ListView.builder(
+    // 内含处理保持IM消息位置的核心逻辑
+    physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
+    padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 15),
+    // 切换滚动视图的高度模式，当消息不满一屏时，该值为 true，使消息在顶部展示，
+    // 消息超一屏时为 false，消息在底部展示，chatObserver 内部会适时变更该值
+    // 如果你希望一直都是底部展示，可以注释该行
+    shrinkWrap: chatObserver.isShrinkWrap,
+    // 消息从底部往上开始排序，所以来新消息时应该插入到 0 的位置
+    reverse: true,
+    controller: scrollController,
+    itemBuilder: ((context, index) {
+      return ChatItemWidget(...);
+    }),
+    itemCount: chatModels.length,
+  );
+  
+  // 对滚动视图监听
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+  );
+  
+  // 重点，如果你希望不满一屏时在顶部展示消息，而又不生效时，
+  // 记得如下所示设置 alignment 为 Alignment.topCenter
+  resultWidget = Align(
+    child: resultWidget,
+    alignment: Alignment.topCenter,
+  );
+  return resultWidget;
+}
+

基本的配置到这就完成了，接下来看看如何为生成式消息保持位置吧

# 三、实战

AppBar 右边的按钮，点击时模拟发出一条问题消息，然后等待1s后 ChatGPT 以不断更新消息的方式回答问题

IconButton(
+  onPressed: () async {
+    // 关闭上一条更新生成式消息
+    stopMsgUpdateStream();
+    // 模拟发送一条问题消息
+    _addMessage(isOwn: true);
+    // 等待1s
+    await Future.delayed(const Duration(seconds: 1));
+    // 插入生成式消息
+    insertGenerativeMsg();
+  },
+  icon: const Icon(Icons.add_comment),
+)
+

停止旧生成式消息的更新，控制同一时间只允许存在一条生成式消息

stopMsgUpdateStream() {
+  timer?.cancel();
+  timer = null;
+}
+

插入一条新消息方法

_addMessage({
+  required bool isOwn,
+}) {
+  // 在符合条件的情况下保持当前的IM消息位置
+  chatObserver.standby(changeCount: 1);
+  setState(() {
+    chatModels.insert(0, ChatDataHelper.createChatModel(isOwn: isOwn));
+  });
+}
+

插入生成式消息，模拟 ChatGPT 正在回答问题

insertGenerativeMsg() {
+  // 停止之前的生成式消息
+  stopMsgUpdateStream();
+  // 插入一条
+  _addMessage(isOwn: false);
+  // 开始模拟接收更新的消息数据
+  int count = 0;
+  timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
+    // 接收完毕
+    if (count >= 60) {
+      stopMsgUpdateStream();
+      return;
+    }
+    count++;
+    // 取出最新的生成式消息
+    final model = chatModels.first;
+    // 更新消息内容
+    final newString = '${model.content}-1+1';
+    // 替换消息
+    final newModel = ChatModel(isOwn: model.isOwn, content: newString);
+    chatModels[0] = newModel;
+    // 准备保持位置
+    chatObserver.standby(
+      // 重点，使用生成式消息的处理模式
+      mode: ChatScrollObserverHandleMode.generative,
+      // changeCount: 1,
+    );
+    // 后面会解释该模式的使用
+    // chatObserver.standby(
+    //   changeCount: 1,
+    //   mode: ChatScrollObserverHandleMode.specified,
+    //   refItemRelativeIndex: 2,
+    //   refItemRelativeIndexAfterUpdate: 2,
+    // );
+    // 刷新滚动视图，可局部刷新，Demo 缘故，做法比较简单粗暴
+    setState(() {});
+  });
+}
+

# 四、用法解析

其实上面那一堆代码中，重点在于 standby 方法的使用

standby({
+  // 滚动视图的 BuildContext
+  // 当布局复杂使 scrollview_observer 无法顺利自动找到滚动视图的 BuildContext 时才需要传入
+  // 如 CustomScrollView，或 ObserverWidget 包裹的 child 中有多个 ListView、GridView
+  BuildContext? sliverContext,
+  // 是否是删除消息的操作，它不会启用保持位置功能，而是可能切换 isShrinkWrap 的值
+  bool isRemove = false,
+  // 变更的IM消息数
+  int changeCount = 1,
+  // 处理模式
+  ChatScrollObserverHandleMode mode = ChatScrollObserverHandleMode.normal,
+  // 刷新滚动视图前，参照的相对item的下标
+  int refItemRelativeIndex = 0,
+  // 刷新滚动视图后，参照的相对item的下标
+  int refItemRelativeIndexAfterUpdate = 0,
+})
+

处理模式的定义如下

enum ChatScrollObserverHandleMode {
+  /// 常规模式
+  /// 插入或删除IM消息的时候使用
+  normal,
+
+  /// 生成式模式
+  /// 专门处理 ChatGPT 这种不断更新消息的情况
+  generative,
+
+  /// 指定模式
+  /// 在该模式下我们可以指定参照的IM消息的相对下标
+  specified,
+}
+

# 1、常规模式

常规模式为默认的处理模式，应用于日常的 IM 添加和删除消息的场景，比较简单

插入多条消息

_addMessage(int count) {
+  // 进入待命状态，保持IM消息位置
+  chatObserver.standby(changeCount: count);
+  // 一次性插入多条消息，并刷新滚动视图
+  setState(() {
+    needIncrementUnreadMsgCount = true;
+    for (var i = 0; i < count; i++) {
+      chatModels.insert(0, ChatDataHelper.createChatModel());
+    }
+  });
+}
+

删除消息

chatObserver.standby(isRemove: true);
+setState(() {
+  chatModels.removeAt(index);
+});
+

# 2、生成式模式(仿ChatGPT)

专门处理 ChatGPT 这种生成式消息的场景

final model = chatModels.first;
+final newString = '${model.content}-1+1';
+final newModel = ChatModel(isOwn: model.isOwn, content: newString);
+// 更新生成式消息的数据
+chatModels[0] = newModel;
+// 进入待命状态
+chatObserver.standby(
+  mode: ChatScrollObserverHandleMode.generative,
+  // changeCount: 1,
+);
+// 刷新列表
+setState(() {});
+
  • 指定处理模式 mode 为 .generative
  • changeCount 默认值为 1，传与不传一样

内部会根据 changeCount 来计算并记录参照消息的相对下标（关于相对下标的内容会在 指定模式 一节中说明），这意味着该模式支持连续的多条生成式消息保持位置，比如最新的两条消息都是生成式的情况是支持。

而如果最新的三条消息，0 和 2 都是生成式消息而 1 不是，又或者同一时间插入消息和更新生成式消息，此时该模式是无法很好的支持保持消息位置这一功能的，那有什么办法呢？你可以使用 指定模式

# 3、指定模式

顾名思义，可以指定参照的 IM 消息的相对下标，从而可以自由的使用保持消息位置的功能，当然了，自由也意味着传入的数据和需要了解的会更多！

我们先来了解一下什么是参照的 IM 消息的相对下标？

注: 滚动视图内已渲染的 item 不一定会被显示出来，如果下文中提及的滚动视图渲染的 item 让你不好理解，你可以直接认为是屏幕中正在展示的 item。

假如当前是正在看最新消息的情况，滚动视图内渲染了 item0 到 item4，其相对下标为 0 到 4。

     trailing        relativeIndex
+-----------------  -----------------
+|     item4     |          4
+|     item3     |          3
+|     item2     |          2
+|     item1     |          1
+|     item0     |          0 
+-----------------  -----------------
+     leading
+

如果此时你在翻看历史消息，滚动视图内渲染了 item10 到 item14，其相对下标也为 0 到 4。

     trailing        relativeIndex
+-----------------  -----------------
+|     item14    |          4
+|     item13    |          3
+|     item12    |          2
+|     item11    |          1
+|     item10    |          0 
+-----------------  -----------------
+     leading
+

这里 0 到 4 的下标即为相对下标，我们来使用该模式（.specified）来完成 .generative 模式的功能

在上述示例中，离发出问题间隔了1秒后，ChatGPT 会开始回答问题，此时我们插入生成式的消息，并不断更新该消息内容。

注意: 插入消息的方法内已经做了保持消息位置的处理，所以我们的关注点在于更新消息

     trailing        relativeIndex
+-----------------  -----------------
+|     item4     |          4
+|     item3     |          3
+|     item2     |          2
+|     item1     |          1
+|     item0     |          0 
+-----------------  -----------------
+     leading
+

假设此时 item0 为生成式消息，它的消息内容在不断变多，如果放任不管，item0 以上的消息会逐渐被往上顶，因此在这里我们的目的是不管 item0 如何变化，都需要保持 item1 及以上消息的位置，所以 item1 就成为了我们的参照消息，它此刻的下标为 1，而生成式消息的变化前后，item1 的下标一直都是 1！

改造的代码如下：

chatObserver.standby(
+  changeCount: 1,
+  // 设置处理模式为 .specified
+  mode: ChatScrollObserverHandleMode.specified,
+  // 滚动视图更新前，参照消息的相对下标
+  refItemRelativeIndex: 1,
+  // 滚动视图更新后，参照消息的相对下标
+  refItemRelativeIndexAfterUpdate: 1,
+);
+

注意，refItemRelativeIndex 和 refItemRelativeIndexAfterUpdate 应该指向同一条消息！

其实参照消息在理论上只要是 item0 以上的已经渲染的消息即可，即上述的参照消息的相对下标也可以是 2、 3 和 4。

注: 如果更新滚动视图后参照的消息无法得到渲染，则该功能就会失效，所以建议还是选择当前发生变化的消息的上一条消息的相对下标~

比较有意思的是，假设我们在发出问题后，往上翻页了，1秒后滚动视图渲染的消息是 item10 到 item14

     trailing        relativeIndex
+-----------------  -----------------
+|     item14    |          4
+|     item13    |          3
+|     item12    |          2
+|     item11    |          1
+|     item10    |          0 
+-----------------  -----------------
+     leading
+

此时你的参照消息的相对下标就可以为 0 了，但是你需要判断当前已渲染的第一个 item 是否为生成式消息，这就很麻烦，没有必要。

总结来说，参照的消息不可以为发生变化的消息本身，而是为滚动视图在更新前后都会被渲染的 item 即可！

# 五、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，如果你也觉得这个库好用，请不吝给个 Star 👍

GitHub: https://github.com/LinXunFeng/flutter_scrollview_observer (opens new window)

+ +
+
#Dart#Flutter
Flutter - 瀑布流交替播放视频 🎞
Flutter - 滚动视图中的表单防遮挡 🗒

+ ← + Flutter - 滚动视图中的表单防遮挡 🗒→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/29287b/index.html b/pages/29287b/index.html new file mode 100644 index 000000000..4d9031fbd --- /dev/null +++ b/pages/29287b/index.html @@ -0,0 +1,193 @@ + + + + + + DesignPattern - 模板方法模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-09-13
目录

DesignPattern - 模板方法模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、模板方法模式介绍

模板方法模式（Template Method）定义一个操作中的算法骨架，将算法的一些步骤延迟到子类中，使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤，属于行为型模式

  • 核心组成

    • 抽象模板(Abstract Template)：定义一个模板方法，这个模板方法一般是一个具体方法，给出一个顶级算法骨架，而逻辑骨架的组成步骤在相应的抽象操作中，推迟到子类实现 +
      • 模板方法：定义了算法的骨架，按某种顺序调用其包含的基本方法
      • 基本方法：是整个算法中的一个步骤，包括抽象方法和具体方法
    • 具体模板(Concrete Template)：实现父类所定义的一个或多个抽象方法，它们是一个顶级算法逻辑的组成步骤

  • 应用场景

    • javaweb 里的 Servlet，HttpService 类提供了一个 service()方法
    • 有多个子类共有逻辑相同的方法，可以考虑作为模板方法
    • 设计一个系统时，知道了算法所需的关键步骤，且确定了这些步骤的执行顺序，但某些步骤的具体实现还未知，可以延迟到子类进行完成

  • 优点

    • 扩展性好，对不变的代码进行封装，对可变的进行扩展，符合 开闭原则
    • 提高代码复用性，将相同部分的代码放到抽象的父类中，将不同的代码放入不同的子类中
    • 通过一个父类调用其子类的操作，通过对子类的具体实现扩展不同的行为，实现了反射控制

  • 缺点

    • 每一个不同的实现都需要一个子类来实现，导致类的个数增加，会使系统变得复杂

补充：如果是 Android 开发，BaseActivity 就是一个抽象模板，onCreate() 就是模板方法，onCreate() 中通常会调用 initView()、initEvent()、initData()，这 3 个便是基本方法，可以是抽象方法，或者是具体方法。

# 二、模板方法模式代码实现

创建抽象模板：

/**
+ * 抽象模板：项目管理
+ *
+ * @author GitLqr
+ */
+public abstract class AbstractProjectManager {
+
+	/**
+	 * 定义模板方法，声明final，防止子类覆盖，流程是固定的： 需求评审 - 设计 - 开发 - 测试 - 上线 - 运维
+	 */
+	public final void processProject() {
+		review();
+		design();
+		coding();
+		test();
+		online();
+	}
+
+	/**
+	 * 每个项目都需要评审
+	 */
+	public void review() {
+		System.out.println("项目需求评审");
+	}
+
+	/**
+	 * 每个项目都需要设计
+	 */
+	public void design() {
+		System.out.println("UI UE进行设计");
+	}
+
+	/**
+	 * 抽象方法，由具体子类进行实现，具体编码耗时不一样
+	 */
+	public abstract void coding();
+
+	/**
+	 * 抽象方法，由具体子类进行实现，测试有多种：自动化测试、安全测试、压力测试、手工测试
+	 */
+	public abstract void test();
+
+	/**
+	 * 抽象方法，由具体子类进行实现，上线有全量发布、灰度发布、停机发布
+	 */
+	public abstract void online();
+}
+

创建具体模板：

/**
+ * 具体模板：支付服务项目管理
+ *
+ * @author GitLqr
+ */
+public class PayServiceProjectManager extends AbstractProjectManager {
+
+	@Override
+	public void coding() {
+		System.out.println("开发耗时30天");
+	}
+
+	@Override
+	public void test() {
+		System.out.println("功能测试，安全测试，压力测试");
+	}
+
+	@Override
+	public void online() {
+		System.out.println("全量上线");
+	}
+}
+
+/**
+ * 具体模板：用户服务项目管理
+ *
+ * @author GitLqr
+ */
+public class UserServiceProjectManager extends AbstractProjectManager {
+
+	@Override
+	public void coding() {
+		System.out.println("开发耗时10天");
+	}
+
+	@Override
+	public void test() {
+		System.out.println("功能测试，压力测试，手工测试");
+	}
+
+	@Override
+	public void online() {
+		System.out.println("灰度发布，全量上线");
+	}
+}
+

使用：

public static void main(String[] args) {
+    AbstractProjectManager projectManager;
+
+    projectManager = new PayServiceProjectManager();
+    projectManager.processProject();
+
+    System.out.println("=================");
+
+    projectManager = new UserServiceProjectManager();
+    projectManager.processProject();
+}
+
+ +
+
#设计模式#模板方法模式
DesignPattern - 策略模式【行为型】
DesignPattern - 观察者模式【行为型】

+ ← + DesignPattern - 观察者模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/294865/index.html b/pages/294865/index.html new file mode 100644 index 000000000..0b48bd892 --- /dev/null +++ b/pages/294865/index.html @@ -0,0 +1,277 @@ + + + + + + Android面向切面编程（AOP） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-16
目录

Android面向切面编程（AOP）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

# 1、AOP的概念

如果你用java做过后台开发，那么你一定知道AOP这个概念。如果不知道也无妨，套用百度百科的介绍，也能让你明白这玩意是干什么的：

AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续，是软件开发中的一个热点，也是Spring框架中的一个重要内容，是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。

# 2、项目场景

项目开发过程中，可能会有这样的需求，需要我们在方法执行完成后，记录日志（后台开发中比较常见~），或是计算这个方法的执行时间，在不使用AOP的情况下，我们可以在方法最后调用另一个专门记录日志的方法，或是在方法体的首尾分别获取时间，然后通过计算时间差来计算整个方法执行所消耗的时间，这样也可以完成需求。那如果不只一个方法要这么玩怎么办？每个方法都写上一段相同的代码吗？后期处理逻辑变了要怎么办？最后老板说这功能不要了我们还得一个个删除？

很明显，这是不可能的，我们不仅仅是代码的搬运工，我们还是有思考能力的软件开发工程师。这么low的做法绝对不干，这种问题我们完全可以用AOP来解决，不就是在方法前和方法后插入一段代码吗？AOP分分钟搞定。

# 3、AOP的实现方式

要注意了，AOP仅仅只是个概念，实现它的方式（工具和库）有以下几种：

  • AspectJ: 一个 JavaTM 语言的面向切面编程的无缝扩展（适用Android）。
  • Javassist for Android: 用于字节码操作的知名 java 类库 Javassist 的 Android 平台移植版。
  • DexMaker: Dalvik 虚拟机上，在编译期或者运行时生成代码的 Java API。
  • ASMDEX: 一个类似 ASM 的字节码操作库，运行在Android平台，操作Dex字节码。

本篇的主角就是AspectJ，下面就来看看AspectJ方式的AOP如何在Android开发中进行使用吧。

# 二、AspectJ的引入

对于eclipse与Android Studio的引入是不一样的，本篇只介绍Android Studio如何引入AspectJ，eclipse请自行百度。Android Studio需要在app模块的build.gradle文件中引入，总共分为3个步骤：

# 1）添加核心依赖

dependencies {
+    ...
+    compile 'org.aspectj:aspectjrt:1.8.9'
+}
+

# 2）编写gradle编译脚本

buildscript {
+    repositories {
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'org.aspectj:aspectjtools:1.8.9'
+        classpath 'org.aspectj:aspectjweaver:1.8.9'
+    }
+}
+

AspectJ需要依赖maven仓库。

# 3）添加gradle任务

dependencies {
+    ...
+}
+// 贴上面那段没用的代码是为了说明：下面的任务代码与dependencies同级
+
+import org.aspectj.bridge.IMessage
+import org.aspectj.bridge.MessageHandler
+import org.aspectj.tools.ajc.Main
+final def log = project.logger
+final def variants = project.android.applicationVariants
+
+variants.all { variant ->
+    if (!variant.buildType.isDebuggable()) {
+        log.debug("Skipping non-debuggable build type '${variant.buildType.name}'.")
+        return;
+    }
+
+    JavaCompile javaCompile = variant.javaCompile
+    javaCompile.doLast {
+        String[] args = ["-showWeaveInfo",
+                         "-1.8",
+                         "-inpath", javaCompile.destinationDir.toString(),
+                         "-aspectpath", javaCompile.classpath.asPath,
+                         "-d", javaCompile.destinationDir.toString(),
+                         "-classpath", javaCompile.classpath.asPath,
+                         "-bootclasspath", project.android.bootClasspath.join(File.pathSeparator)]
+        log.debug "ajc args: " + Arrays.toString(args)
+
+        MessageHandler handler = new MessageHandler(true);
+        new Main().run(args, handler);
+        for (IMessage message : handler.getMessages(null, true)) {
+            switch (message.getKind()) {
+                case IMessage.ABORT:
+                case IMessage.ERROR:
+                case IMessage.FAIL:
+                    log.error message.message, message.thrown
+                    break;
+                case IMessage.WARNING:
+                    log.warn message.message, message.thrown
+                    break;
+                case IMessage.INFO:
+                    log.info message.message, message.thrown
+                    break;
+                case IMessage.DEBUG:
+                    log.debug message.message, message.thrown
+                    break;
+            }
+        }
+    }
+}
+

直接粘贴到build.gradle文件的末尾即可，不要嵌套在别的指令中。

# 三、AOP的基本知识

在使用AspectJ之前，还是需要先介绍下AOP的基本知识，熟悉的看官可以跳过这部分。

# 1、AOP术语

  1. 通知、增强处理（Advice）：就是你想要的功能，也就是上面说的日志、耗时计算等。
  2. 连接点（JoinPoint）：允许你通知（Advice）的地方，那可就真多了，基本每个方法的前、后（两者都有也行），或抛出异常是时都可以是连接点（spring只支持方法连接点）。AspectJ还可以让你在构造器或属性注入时都行，不过一般情况下不会这么做，只要记住，和方法有关的前前后后都是连接点。
  3. 切入点（Pointcut）：上面说的连接点的基础上，来定义切入点，你的一个类里，有15个方法，那就有十几个连接点了对吧，但是你并不想在所有方法附件都使用通知（使用叫织入，下面再说），你只是想让其中几个，在调用这几个方法之前、之后或者抛出异常时干点什么，那么就用切入点来定义这几个方法，让切点来筛选连接点，选中那几个你想要的方法。
  4. 切面（Aspect）：切面是通知和切入点的结合。现在发现了吧，没连接点什么事，连接点就是为了让你好理解切点搞出来的，明白这个概念就行了。通知说明了干什么和什么时候干（什么时候通过before，after，around等AOP注解就能知道），而切入点说明了在哪干（指定到底是哪个方法），这就是一个完整的切面定义。
  5. 织入（weaving） 把切面应用到目标对象来创建新的代理对象的过程。

上述术语的解释引用自《AOP中的概念通知、切点、切面》 (opens new window)这篇文章，作者的描述非常直白，很容易理解，点个赞。

# 2、AOP注解与使用

  • @Aspect：声明切面，标记类
  • @Pointcut(切点表达式)：定义切点，标记方法
  • @Before(切点表达式)：前置通知，切点之前执行
  • @Around(切点表达式)：环绕通知，切点前后执行
  • @After(切点表达式)：后置通知，切点之后执行
  • @AfterReturning(切点表达式)：返回通知，切点方法返回结果之后执行
  • @AfterThrowing(切点表达式)：异常通知，切点抛出异常时执行

@Pointcut、@Before、@Around、@After、@AfterReturning、@AfterThrowing需要在切面类中使用，即在使用@Aspect的类中。

# 1）切点表达式是什么？

这就是切点表达式：execution (* com.lqr..*.*(..))。切点表达式的组成如下：

execution(<修饰符模式>? <返回类型模式> <方法名模式>(<参数模式>) <异常模式>?)
+

除了返回类型模式、方法名模式和参数模式外，其它项都是可选的。
+修饰符模式指的是public、private、protected，异常模式指的是NullPointException等。

对于切点表达式的理解不是本篇重点，下面列出几个例子说明一下就好了：

@Before("execution(public * *(..))")
+public void before(JoinPoint point) {
+    System.out.println("CSDN_LQR");
+}
+

匹配所有public方法，在方法执行之前打印"CSDN_LQR"。

@Around("execution(* *to(..))")
+public void around(ProceedingJoinPoint joinPoint) {
+    System.out.println("CSDN");
+	joinPoint.proceed();
+    System.out.println("LQR");
+}
+

匹配所有以"to"结尾的方法，在方法执行之前打印"CSDN"，在方法执行之后打印"LQR"。

@After("execution(* com.lqr..*to(..))")
+public void after(JoinPoint point) {
+    System.out.println("CSDN_LQR");
+}
+

匹配com.lqr包下及其子包中以"to"结尾的方法，在方法执行之后打印"CSDN_LQR"。

@AfterReturning("execution(int com.lqr.*(..))")
+public void afterReturning(JoinPoint point, Object returnValue) {
+    System.out.println("CSDN_LQR");
+}
+

匹配com.lqr包下所有返回类型是int的方法，在方法返回结果之后打印"CSDN_LQR"。

@AfterThrowing(value = "execution(* com.lqr..*(..))", throwing = "ex")
+public void afterThrowing(Throwable ex) {
+    System.out.println("ex = " + ex.getMessage());
+}
+

匹配com.lqr包及其子包中的所有方法，当方法抛出异常时，打印"ex = 报错信息"。

# 2）@Pointcut的使用

@Pointcut是专门用来定义切点的，让切点表达式可以复用。

你可能需要在切点执行之前和切点报出异常时做些动作（如：出错时记录日志），可以这么做：

@Before("execution(* com.lqr..*(..))")
+public void before(JoinPoint point) {
+    System.out.println("CSDN_LQR");
+}
+
+@AfterThrowing(value = "execution(* com.lqr..*(..))", throwing = "ex")
+public void afterThrowing(Throwable ex) {
+    System.out.println("记录日志");
+}
+

可以看到，表达式是一样的，那要怎么重用这个表达式呢？这就需要用到@Pointcut注解了，@Pointcut注解是注解在一个空方法上的，如：

@Pointcut("execution(* com.lqr..*(..))")
+public void pointcut() {}
+

这时，"pointcut()"就等价于"execution(* com.lqr..*(..))"，那么上面的代码就可以这么改了：

@Before("pointcut()")
+public void before(JoinPoint point) {
+    System.out.println("CSDN_LQR");
+}
+
+@AfterThrowing(value = "pointcut()", throwing = "ex")
+public void afterThrowing(Throwable ex) {
+    System.out.println("记录日志");
+}
+

# 四、实战

经过上面的学习，下面是时候实战一下了，这里我们来一个简单的例子。

# 1、切点

这是界面上一个按钮的点击事件，就是一个简单的方法而已，我们拿它来试刀。

public void test(View view) {
+    System.out.println("Hello, I am CSDN_LQR");
+}
+

# 2、切面类

要织入一段代码到目标类方法的前前后后，必须要有一个切面类，下面就是切面类的代码：

@Aspect
+public class TestAnnoAspect {
+
+    @Pointcut("execution(* com.lqr.androidaopdemo.MainActivity.test(..))")
+    public void pointcut() {
+
+    }    
+
+	@Before("pointcut()")
+    public void before(JoinPoint point) {
+        System.out.println("@Before");
+    }
+
+    @Around("pointcut()")
+    public void around(ProceedingJoinPoint joinPoint) throws Throwable {
+        System.out.println("@Around");
+    }
+
+ 	@After("pointcut()")
+    public void after(JoinPoint point) {
+        System.out.println("@After");
+    }
+
+    @AfterReturning("pointcut()")
+    public void afterReturning(JoinPoint point, Object returnValue) {
+        System.out.println("@AfterReturning");
+    }
+
+    @AfterThrowing(value = "pointcut()", throwing = "ex")
+    public void afterThrowing(Throwable ex) {
+        System.out.println("@afterThrowing");
+        System.out.println("ex = " + ex.getMessage());
+    }
+}
+

# 3、各通知的执行结果

先来试试看，这几个注解的执行结果如何。

不对啊，按钮的点击事件中有打印"Hello, I am CSDN_LQR"的，这里没有，怎么肥事？

这里因为@Around环绕通知会拦截原方法内容的执行，我们需要手动放行才可以。代码修改如下：

@Around("pointcut()")
+public void around(ProceedingJoinPoint joinPoint) throws Throwable {
+    System.out.println("@Around");
+	joinPoint.proceed();// 目标方法执行完毕
+}
+

也不对啊，少了一个@AfterThrowing通知。这个通知只有在切点抛出异常时才会执行，我们可以让代码出现一个简单的运行时异常：

public void test(View view) {
+    System.out.println("Hello, I am CSDN_LQR");
+    int a = 1 / 0;
+}
+

这下@AfterThrowing通知确实被调用了，而且也打印出了错误信息（divide by zero）。但@AfterReturning通知反而不执行了，原因很简单，都抛出异常了，切点肯定是不能返回结果的。也就是说：@AfterThrowing通知与@AfterReturning通知是冲突的，在同个切点上不可能同时出现。

# 4、方法耗时计算的实现

因为@Around是环绕通知，可以在切点的前后分别执行一些操作，AspectJ为了能肯定操作是在切点前还是在切点后，所以在@Around通知中需要手动执行joinPoint.proceed()来确定切点已经执行，故在joinPoint.proceed()之前的代码会在切点执行前执行，在joinPoint.proceed()之后的代码会切点执行后执行。于是，方法耗时计算的实现就是这么简单：

@Around("pointcut()")
+public void around(ProceedingJoinPoint joinPoint) throws Throwable {
+    long beginTime = SystemClock.currentThreadTimeMillis();
+    joinPoint.proceed();
+    long endTime = SystemClock.currentThreadTimeMillis();
+    long dx = endTime - beginTime;
+    System.out.println("耗时：" + dx + "ms");
+}
+

# 5、JoinPoint的作用

发现没有，上面所有的通知都会至少携带一个JointPoint参数，这个参数包含了切点的所有信息，下面就结合按钮的点击事件方法test()来解释joinPoint能获取到的方法信息有哪些：

MethodSignature signature = (MethodSignature) joinPoint.getSignature();
+String name = signature.getName(); // 方法名：test
+Method method = signature.getMethod(); // 方法：public void com.lqr.androidaopdemo.MainActivity.test(android.view.View)
+Class returnType = signature.getReturnType(); // 返回值类型：void
+Class declaringType = signature.getDeclaringType(); // 方法所在类名：MainActivity
+String[] parameterNames = signature.getParameterNames(); // 参数名：view
+Class[] parameterTypes = signature.getParameterTypes(); // 参数类型：View
+

# 6、注解切点

前面的切点表达式结构是这样的：

execution(<修饰符模式>? <返回类型模式> <方法名模式>(<参数模式>) <异常模式>?)
+

但实际上，上面的切点表达式结构并不完整，应该是这样的：

execution(<@注解类型模式>? <修饰符模式>? <返回类型模式> <方法名模式>(<参数模式>) <异常模式>?)
+

这就意味着，切点可以用注解来标记了。

# 1）自定义注解

如果用注解来标记切点，一般会使用自定义注解，方便我们拓展。

@Target(ElementType.METHOD)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface TestAnnoTrace {
+    String value();
+    int type();
+}
+
  • @Target(ElementType.METHOD)：表示该注解只能注解在方法上。如果想类和方法都可以用，那可以这么写：@Target({ElementType.METHOD,ElementType.TYPE})，依此类推。
  • @Retention(RetentionPolicy.RUNTIME)：表示该注解在程序运行时是可见的（还有SOURCE、CLASS分别指定注解对于那个级别是可见的，一般都是用RUNTIME）。

其中的value和type是自己拓展的属性，方便存储一些额外的信息。

# 2）使用自定义注解标记切点

这个自定义注解只能注解在方法上（构造方法除外，构造方法也叫构造器，需要使用ElementType.CONSTRUCTOR），像平常使用其它注解一样使用它即可：

@TestAnnoTrace(value = "lqr_test", type = 1)
+public void test(View view) {
+    System.out.println("Hello, I am CSDN_LQR");
+}
+

# 3）注解的切点表达式

既然用注解来标记切点，那么切点表达式肯定是有所不同的，要这么写：

@Pointcut("execution(@com.lqr.androidaopdemo.TestAnnoTrace * *(..))")
+public void pointcut() {}
+

切点表达式使用注解，一定是@+注解全路径，如：@com.lqr.androidaopdemo.TestAnnoTrace。

亲测可用 ，不贴图了。

# 4）获取注解属性值

上面在编写自定义注解时就声明了两个属性，分别是value和type，而且在使用该注解时也都为之赋值了，那怎么在通知中获取这两个属性值呢？还记得JoinPoint这个参数吧，它就可以获取到注解中的属性值，如下所示：

MethodSignature signature = (MethodSignature) joinPoint.getSignature();
+Method method = signature.getMethod();
+// 通过Method对象得到切点上的注解
+TestAnnoTrace annotation = method.getAnnotation(TestAnnoTrace.class);
+String value = annotation.value();
+int type = annotation.type();
+

# 最后贴下Demo地址

https://github.com/GitLqr/AndroidAopDemo (opens new window)

+ +
+
#注解#AOP
LinkedList与Queue源码分析
手撸一个简易Android数据库框架

+ ← + 手撸一个简易Android数据库框架→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2a27e8/index.html b/pages/2a27e8/index.html new file mode 100644 index 000000000..812f990b4 --- /dev/null +++ b/pages/2a27e8/index.html @@ -0,0 +1,197 @@ + + + + + + Material Design 兼容性控件学习 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-04-22
目录

Material Design 兼容性控件学习

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 简述

Material Design从Android 5.0开始引入，是一种全新的设计语言，称为“原材料设计”，是谷歌提倡的一种设计风格、理念、原则。结合拟物设计和扁平化设计风格，融入了一些科技理念。

想深入了解的话，可以查这篇wiki：Material Design 中文版 (opens new window)

*注：使用下文中介绍的控件，需在项目中引入v7包的支持。正如上面所说，Material Design从Android 5.0开始引入，故低版本的系统没有这类控件。

如：使用Android Studio可以在gradle的dependencies中写入：

compile 'com.android.support:appcompat-v7:25.3.0'
+

Eclipse的请自行百度吧，毕竟就算导入了v7包，若编译版本和v7包的版本存在新旧问题时，v7包工程自身会报错的，还有其他一些细节要注意，这里就不做介绍了。

# 一、SwipeRefreshLayout

# 1、使用

SwipeRefreshLayout是谷歌推出的一个下拉刷新控件，符合MD设计，使用方便，可通过其提供的方法设置控件的尺寸、颜色、刷新距顶悬浮距离等，具体使用如下：

//设置 SwipeRefreshLayout 的尺寸
+mSrl.setSize(SwipeRefreshLayout.LARGE);
+//设置 SwipeRefreshLayout 刷新时的颜色切换（可以有无数种）
+mSrl.setColorSchemeColors(Color.RED, Color.YELLOW, Color.GREEN);
+//设置 SwipeRefreshLayout 的背景色
+mSrl.setBackgroundColor(Color.GRAY);
+//设置 SwipeRefreshLayout 的下拉距离
+mSrl.setDistanceToTriggerSync(100);
+//设置 SwipeRefreshLayout 正在刷新监听
+mSrl.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
+    @Override
+    public void onRefresh() {
+        ...
+		刷新数据源
+		...
+    }
+});
+//手动停止刷新
+mSrl.setRefreshing(false);
+

# 2、效果预览：

SwipeRefreshLayout

# 二、ListPopupWindow

popupWindow大家都知道，是Android中弹出式菜单，而ListPopupWindow顾名思义就是列表型的弹出式菜单，使用该控件可以做到类似下拉菜单的功能，但不限如此。

# 1、使用

mListPopupWindow = new ListPopupWindow(this);
+//设置 ListPopupWindow 的数据适配器
+mListPopupWindow.setAdapter(mAdapter);
+//设置 ListPopupWindow 的显示位置（在指定控件下方）
+mListPopupWindow.setAnchorView(view);
+//设置 ListPopupWindow 的宽度
+mListPopupWindow.setWidth(200);
+//设置 ListPopupWindow 的高度
+mListPopupWindow.setHeight(500);
+//设置 ListPopupWindow 的条目点击事件（必须在show方法前设置，否则无效）
+mListPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
+    @Override
+    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
+        Toast.makeText(getApplicationContext(), mItemArr[position], Toast.LENGTH_SHORT).show();
+        mListPopupWindow.dismiss();
+    }
+});
+mListPopupWindow.show();
+

# 2、效果预览：

ListPopupWindow

# 三、PopupMenu

PopupMenu代表弹出式菜单,它会在指定组件上弹出PopupMenu,默认情况下,PopupMenu会显示在该组件的下方或上方。与ListPopupWindow的区别在于，ListPopupWindow使用适配器来填充条目，而PopupMenu则是使用menu布局来填充条目。

# 1、使用

PopupMenu popupMenu = new PopupMenu(this, view);
+//设置 PopupMenu 的显示菜单项
+popupMenu.inflate(R.menu.main);
+// popupMenu.getMenuInflater().inflate(R.menu.main, popupMenu.getMenu());//与一行没什么区别
+
+//默认 PopupMenu 不显示条目icon，可以通过反射来强制使其显示icon
+Field field = popupMenu.getClass().getDeclaredField("mPopup");
+field.setAccessible(true);
+MenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);
+mHelper.setForceShowIcon(true);
+
+//设置 PopupMenu 的条目点击事件（点击后会自动dismiss）
+popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
+    @Override
+    public boolean onMenuItemClick(MenuItem item) {
+        Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
+        return false;
+    }
+});
+//显示 PopupMenu
+popupMenu.show();
+

# 2、效果预览：

PopupMenu

# 四、LinearLayoutCompat

LinearLayoutCompat是对LinearLayout的扩展，可以为此布局中的子View之间添加分割线divider。可以通过自定义属性divider来指定分割线的样式，通过自定义属性showDividers来指定分割线的显示位置。

# 1、使用

<android.support.v7.widget.LinearLayoutCompat
+    android:id="@+id/llc"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:layout_gravity="center"
+    android:orientation="vertical"
+    app:divider="@drawable/line"
+    app:showDividers="beginning">
+		...
+		子控件
+		...
+</android.support.v7.widget.LinearLayoutCompat>
+

# 2、效果预览：

LinearLayoutCompat

# 五、RecyclerView

RecyclerView是v7包中最重要、最常用的控件之一，可实现线性列表、网格列表、瀑布流列表效果，却具有高度解耦、性能优化的优势，可以说是ListView、GridView的增强版。

# 1、使用

RecyclerViewr的使用大体分两步：

  • 设置适配器Adapter
  • 设置布局管理器LayoutManager

# 1）设置适配器Adapter

RecyclerView使用的适配器必须继承RecyclerView.Adapter，并指定RecyclerView.ViewHolder，在onCreateViewHolder()中创建自定义的RecyclerView.ViewHolder，在onBindViewHolder()中对条目进行设置，理解上相对简单，代码如下：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
+
+    private List<String> mData;
+
+    public MyAdapter(List<String> data) {
+        mData = data;
+    }
+
+    @Override
+    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
+        View itemView = View.inflate(parent.getContext(), android.R.layout.simple_list_item_1, null);
+        return new MyViewHolder(itemView);
+    }
+
+    @Override
+    public void onBindViewHolder(MyViewHolder holder, int position) {
+        holder.mTv.setText(mData.get(position));
+    }
+
+    @Override
+    public int getItemCount() {
+        return mData.size();
+    }
+
+    class MyViewHolder extends RecyclerView.ViewHolder {
+
+        TextView mTv;
+
+        public MyViewHolder(View itemView) {
+            super(itemView);
+            mTv = (TextView) itemView.findViewById(android.R.id.text1);
+        }
+    }
+
+}
+

# 2）设置布局管理器LayoutManager

RecyclerView可以使用布局管理器有三种：

  • LinearLayoutManager：线性列表
  • GridLayoutManager：网格列表
  • StaggeredGridLayoutManager：瀑布流列表

以LinearLayoutManager为例：

LinearLayoutManager(Context context, int orientation, boolean reverseLayout)
+

在创建LinearLayoutManage时，可以通过参数二指定列表的方向，通过参数三指定数据是否反转（本来数据是从上到下进行填充，当设置了reverseLayout为true时，数据则从下到上进行填充），GridLayoutManager及StaggeredGridLayoutManager的使用也差不多。

调用RecyclerView的setLayoutManager()即可设置布局管理器

mRv.setLayoutManager(new LinearLayoutManager(this));
+

# 2、效果预览：

RecyclerView

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#SwipeRefreshLayout#ListPopupWindow#PopupMenu#LinearLayoutCompat#RecyclerView
RecyclerView遇到notifyDataSetChanged无效时的解决方案
RecyclerView之ItemDecoration

+ ← + RecyclerView之ItemDecoration→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2afdff/index.html b/pages/2afdff/index.html new file mode 100644 index 000000000..5f9664a1b --- /dev/null +++ b/pages/2afdff/index.html @@ -0,0 +1,137 @@ + + + + + + Flutter - 轻松搞定屏幕旋转功能 😎 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-06-02
目录

Flutter - 轻松搞定屏幕旋转功能 😎

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在常规的纯 Flutter 项目中，我们只需要通过 SystemChrome.setPreferredOrientations 方法就可以轻松驾驭屏幕旋转的需求，但相信很多还在整混编项目的老铁在 iOS 上碰了壁，因为一般情况下，原生项目里都会把方向选项全部去掉，只保留 Portrait，如下图所示

如果你原来就是一位 iOS 开发者，那自然是小问题，通过 MethodChannel 与原生进行通信，然后一顿代码输出就搞定了，但如果你不是 iOS 开发者呢，那就有点无从下手了。

今天就跟大家分享一个我自己做的 Flutter 屏幕旋转插件，只需几步即可轻松搞定这个功能。

等等，为啥不说安卓？那是因为 SystemChrome.setPreferredOrientations 不管是纯 Flutter 还是混编，对安卓一直都有效~

好吧，接下来就是手把手教学时刻。

# 二、集成

大胆的将 switch_orientation 添加到你的 pubspec.yaml 文件中

dependencies:
+  switch_orientation: latest_version
+

具体版本大家到 pub.dev 上复制粘贴最新的吧，附上链接：https://pub.dev/packages/switch_orientation (opens new window)

# 三、配置

安卓不需要配置，仅 iOS 需要

# Swift 项目

如果你的原生项目是 Swift 项目，那是最好了。

打开 AppDelegate.swift 文件

  • 导入 LXFProtocolTool
  • 重写 supportedInterfaceOrientationsForWindow 方法，并返回 UIApplication.shared.lxf.currentVcOrientationMask

具体代码如下所示

import LXFProtocolTool
+
+@UIApplicationMain
+@objc class AppDelegate: FlutterAppDelegate {
+  ...
+  
+  override func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
+    return UIApplication.shared.lxf.currentVcOrientationMask
+  }
+}
+

# OC 项目

如果你的原生项目是 OC 项目，则需要按如下步骤创建相应文件与添加代码

选择 New File...

选择 Swift File，点击 Next

文件名看你自己的用途，我这里是用来存储对 AppDelegate 的拓展，所以命名为 AppDelegate+Extension.swift，点击 Create

接下来这一步很关键，一定要点击 Create Bridging Header 来创建桥头文件，它的命名规则为 项目名-Bridging-Header.h。

当然，如果你的项目之前创建过桥头文件，它就不会有该提示了，跳过这一步即可~

在 AppDelegate+Extension.swift 文件中添加如下代码，供 OC 访问。

import Foundation
+import LXFProtocolTool
+
+extension AppDelegate {
+    @objc func lxf_supportedInterfaceOrientations() -> UIInterfaceOrientationMask {
+        UIApplication.shared.lxf.currentVcOrientationMask
+    }
+}
+

在桥接文件 项目名-Bridging-Header.h 中添加如下代码

其作用就是让 Swift 文件可以访问指定的 OC 文件里的代码。

#import "AppDelegate.h"
+

回到 AppDelegate.m 文件

  • 导入 项目名-Swift.h，这样就可以在 OC 中访问 Swift 代码
  • 在 supportedInterfaceOrientationsForWindow 方法中调用 lxf_supportedInterfaceOrientations 并将结果返回

具体代码如下所示

#import "AppDelegate.h"
+#import "LXFOCProject-Swift.h"
+
+@interface AppDelegate ()
+@end
+
+@implementation AppDelegate
+...
+
+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [self lxf_supportedInterfaceOrientations];
+}
+
+@end
+

OK，大功告成，接下来就可以愉快地去使用了~

# 四、使用

跟 SystemChrome.setPreferredOrientations 的使用方式一模一样，只要将 SystemChrome 替换成 SwitchOrientation 即可。

仅竖屏

SwitchOrientation.setPreferredOrientations([
+  DeviceOrientation.portraitUp,
+]);
+

仅横屏

SwitchOrientation.setPreferredOrientations([
+  DeviceOrientation.landscapeLeft,
+  DeviceOrientation.landscapeRight,
+]);
+

横竖屏

SwitchOrientation.setPreferredOrientations([
+  DeviceOrientation.portraitUp,
+  DeviceOrientation.portraitDown,
+  DeviceOrientation.landscapeLeft,
+  DeviceOrientation.landscapeRight,
+]);
+

# 五、最后

我已将上述的 Flutter 屏幕旋转插件发布至 GitHub: https://github.com/LinXunFeng/flutter_switch_orientation (opens new window)

另外，如果你的原生项目有全屏旋转的需要，也可以继续使用我的原生库: https://github.com/LinXunFeng/LXFProtocolTool (opens new window)，功能强大且简单易用。

好了，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter#屏幕旋转
Flutter - 使用Pigeon实现视频缓存插件 🐌
Flutter - 解决Connection closed before full header was received

+ ← + Flutter - 解决Connection closed before full header was received→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2c5ae4/index.html b/pages/2c5ae4/index.html new file mode 100644 index 000000000..3687000f8 --- /dev/null +++ b/pages/2c5ae4/index.html @@ -0,0 +1,548 @@ + + + + + + Flutter - 基础布局 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-28
目录

Flutter - 基础布局

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、单子布局 Widget

单子布局, 顾名思义就是只能包含一个子控件的 widget

# 1、Align(Center)

Center 可以将子控件居中显示, 默认会尽可能拉伸填满父控件:

class CenterDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Icon(Icons.pets),
+    );
+  }
+}
+

通过查看 Center 的源码可以得知, Center 本质上就是无法指定 alignment 的 Align:

class Center extends Align {
+  /// Creates a widget that centers its child.
+  const Center({ Key? key, double? widthFactor, double? heightFactor, Widget? child })
+    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
+}
+class Align extends SingleChildRenderObjectWidget {
+  /// Creates an alignment widget.
+  ///
+  /// The alignment defaults to [Alignment.center].
+  const Align({
+    Key? key,
+    this.alignment = Alignment.center,
+    this.widthFactor,
+    this.heightFactor,
+    Widget? child,
+  }) : assert(alignment != null),
+       assert(widthFactor == null || widthFactor >= 0.0),
+       assert(heightFactor == null || heightFactor >= 0.0),
+       super(key: key, child: child);
+

因此, 完全可以使用 Align 来代替 Center:

  • widthFactor: 指定 Align 的宽度是子控件宽度的几倍
  • heightFactor: 指定 Align 的高度是子控件高度的几倍
  • alignment : +
    • Alignment.bottomCenter : 底部居中
    • Alignment.center : 居中
    • Alignment(x, y) : 左上角是(-1, -1)，右下角是(1, 1)
class AlignDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Center其实就是指定了alignment为center的Align
+    // return Center(
+    //   child: Icon(Icons.pets),
+    // );
+    return Align(
+      widthFactor: 5, // 宽度是child宽度的5倍
+      heightFactor: 5, // 高度是child高度的5倍
+      alignment: Alignment.center,
+      child: Icon(Icons.pets),
+    );
+  }
+}
+

一般情况下, 会直接在外层嵌套 Container 直接指定确切的宽度值, 而不会使用 widthFactor

# 2、Padding

一般的 Widget 是没有 padding 属性的(Container 除外), 如果希望对子 widget 有 padding 效果的话, 可以为子 widget 套一层 Padding, Padding 只有 2 个属性, 分别是 child 和 padding, padding 属性对应 EdgeInsetsGeometry 类型的对象, 一般会结合 EdgeInsets 的几个常量命名构造函数来使用:

  • padding: 内间距 +
    • EdgeInsets.all(8.0): 统一指定内间距
    • EdgeInsets.symmetric(horizontal: 8, vertical: 8): 纵向、横向分开指定内间距
    • EdgeInsets.fromLTRB(8, 8, 8, 8): 上下左右分开指定内间距
    • EdgeInsets.only(left: 8): 只指定一个方向内间距
class PaddingDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: EdgeInsets.all(8.0),
+          child: item("hello lqr"),
+        ),
+        Divider(height: 1, color: Colors.black),
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+          child: item("hello gitlqr"),
+        ),
+        Divider(height: 1, color: Colors.black),
+        Padding(
+          padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
+          child: item("hello charylin"),
+        ),
+        Divider(height: 1, color: Colors.black),
+        Padding(
+          padding: EdgeInsets.only(left: 8),
+          child: item("hello charylin"),
+        ),
+        Divider(height: 1, color: Colors.black),
+      ],
+    );
+  }
+
+  Widget item(String content) {
+    return Text(
+      content,
+      style: TextStyle(
+        fontSize: 30,
+        backgroundColor: Colors.red,
+        color: Colors.white,
+      ),
+    );
+  }
+}
+

# 3、Container

Container 是 Flutter 中最特殊的 widget, 可以指定尺寸、内外间距、2D 转换等:

  • width: 宽度
  • height: 高度
  • alignment: 子 widget 对齐方式
  • padding: 内间距, EdgeInsetsGeometry 类型, 一般使用子类 EdgeInsets
  • margin: 外间距, EdgeInsetsGeometry 类型, 一般使用子类 EdgeInsets
  • transform: 2D 转换, Matrix4 类型
  • color: 背景色(注意:与 decoration 中的 color 冲突,只能选择一个设置)
  • decoration:BoxDecoration() +
    • color: 背景色
    • border: 边框样式, BoxBorder 类型, 常用 Border.all(width: 5) 来指定
    • borderRadius: 边框圆角, BorderRadiusGeometry 类型, 常用 BorderRadius.circular(8) 来指定
    • boxShadow:BoxShadow() +
      • color: 阴影颜色
      • offset: 阴影偏移量
      • spreadRadius: 延伸，在 offset 的基础上对 x,y 分别增加
class ContainerDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          // width、height不指定，默认是包裹内容
+          width: 200,
+          height: 200,
+          child: Icon(Icons.pets, size: 50, color: Colors.white),
+          // 子元素所在位置
+          alignment: Alignment.topLeft,
+          padding: EdgeInsets.all(20),
+          margin: EdgeInsets.all(10),
+          // 旋转5度，缩小一半
+          transform: Matrix4.rotationZ(degree2Radia(5)).scaled(0.5),
+          color: Colors.red,
+        ),
+        Container(
+          width: 200,
+          height: 200,
+          child: Icon(Icons.accessibility, size: 50, color: Colors.white),
+          // color与decoration冲突，两者只有选择其中一个
+          // color: Colors.red,
+          decoration: BoxDecoration(
+              color: Colors.red, // 背景色
+              border: Border.all(width: 5, color: Colors.blueAccent), // 边框
+              borderRadius: BorderRadius.circular(8), // 圆角
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.blueGrey, // 阴影颜色
+                  offset: Offset(10, 10), // 阴影偏移量
+                  spreadRadius: 5, // 延伸，相当于offset为 15,15
+                ),
+              ]),
+        )
+      ],
+    );
+  }
+
+  double degree2Radia(double degree) {
+    return degree * pi / 180;
+  }
+}
+

# 二、多子布局 Widget

多子布局, 顾名思义就是只能包含多个子控件的 widget

# 1、Flex

Flutter 中的 Flex 与 css 中的 flex 布局很类似, 可以很灵活的控制内部子 widget 的摆放, 不过一般情况下不会直接使用, 而是使用其子类 Row / Column:

  • Row/Column 继承自 Flex
  • Row = Flex(direction: Axis.horizontal) +
    • mainAxis(主轴): 水平向右
    • crossAxis(交叉轴): 竖直向下
  • Column = Flex(direction: Axis.vertical) +
    • mainAxis(主轴): 竖直向下
    • crossAxis(交叉轴): 水平向右

默认情况下, Row 在水平方向上会尽可能占据比较大的空间, 这是因为其 mainAxisSize 属性默认为 MainAxisSize.max 导致:

Column 与 Row 除了方向不同, 其它基本一致, 故掌握 Row 的情况后, Column 自然也会掌握

class ButtonRowDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    /// Row特点:
+    ///   - 水平方向尽可能占据比较大的空间
+    ///     * 如果水平方向希望包裹内容,可以设置 mainAxisSize = min
+    ///   - 垂直方向包裹内容
+    return Column(
+      children: [
+        RaisedButton(
+          child: Row(
+            children: [Icon(Icons.bug_report), Text("bug报告(MainAxisSize.max)")],
+          ),
+          onPressed: () {},
+        ),
+        RaisedButton(
+          child: Row(
+            mainAxisSize: MainAxisSize.min, // 包裹内容。包裹是max占满父widget
+            children: [Icon(Icons.bug_report), Text("bug报告(MainAxisSize.min)")],
+          ),
+          onPressed: () {},
+        ),
+      ],
+    );
+  }
+}
+

# 2、Row

Row 比较重点的是主轴及交叉轴的对齐:

  • MainAxisAlignment: +
    • start: 主轴的开始位置挨个摆放元素
    • end: 主轴的结束位置挨个摆放元素
    • center: 主轴的中心点对齐
    • spaceBetween: 左右两边的间距为 0，其它元素之间平分间距
    • spaceAround: 左右两边的间距是其它元素之间的间距的一半
    • spaceEvenly: 所有的间距平分空间
  • CrossAxisAlignment: +
    • start: 交叉轴的起始位置对齐
    • end: 交叉轴的结束位置对齐
    • center: 中心点对齐(默认值)
    • baseline: 基线对齐(必须有文本的时候才起效果) +
      • 使用 baseline 对齐必须指定 textBaseline, 否则会报错.
    • stretch: 先让 Row 占据交叉轴尽可能大的空间, 将所有子 widget 交叉轴的高度, 拉伸到最大
class RowDemo1 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        itemRow("start", MainAxisAlignment.start, "center", CrossAxisAlignment.center),
+        itemRow("end", MainAxisAlignment.end, "center", CrossAxisAlignment.center),
+        itemRow("center", MainAxisAlignment.center, "center", CrossAxisAlignment.center),
+        itemRow("spaceBetween", MainAxisAlignment.spaceBetween, "center", CrossAxisAlignment.center),
+        itemRow("spaceAround", MainAxisAlignment.spaceAround, "center", CrossAxisAlignment.center),
+        itemRow("spaceEvenly", MainAxisAlignment.spaceEvenly, "center", CrossAxisAlignment.center),
+      ],
+    );
+  }
+
+  Widget itemRow(
+      String mainAxisAlignmentStr,
+      MainAxisAlignment mainAxisAlignment,
+      String crossAxisAlignmentStr,
+      CrossAxisAlignment crossAxisAlignment) {
+    return Container(
+      height: 120,
+      margin: const EdgeInsets.only(bottom: 8.0),
+      color: Colors.pink[100],
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          Row(
+            mainAxisAlignment: mainAxisAlignment,
+            crossAxisAlignment: crossAxisAlignment,
+            // textDirection: TextDirection.ltr, // rtl: 从右到左排版; ltr: 从左到右排版(默认)
+            children: [
+              Container(width: 80, height: 60, color: Colors.red),
+              Container(width: 120, height: 100, color: Colors.green),
+              Container(width: 90, height: 80, color: Colors.blue),
+              Container(width: 50, height: 120, color: Colors.orange),
+            ],
+          ),
+          Positioned(
+            left: 0,
+            bottom: 0,
+            child: Text(
+              "GitLqr >>> main:$mainAxisAlignmentStr , cross:$crossAxisAlignmentStr",
+              style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+

class RowDemo2 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // 基线对齐
+    return Column(
+      children: [
+        itemRow("spaceEvenly", MainAxisAlignment.spaceEvenly, "start", CrossAxisAlignment.start),
+        itemRow("spaceEvenly", MainAxisAlignment.spaceEvenly, "center", CrossAxisAlignment.center),
+        itemRow("spaceEvenly", MainAxisAlignment.spaceEvenly, "end", CrossAxisAlignment.end),
+        itemRow("spaceEvenly", MainAxisAlignment.spaceEvenly, "stretch", CrossAxisAlignment.stretch),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.baseline,
+          // alphabetic 与 ideographic 这2种基线几乎没差
+          textBaseline: TextBaseline.ideographic,
+          children: [
+            Container(width: 80,height: 60, color: Colors.red, child: Text("Hellxo", style: TextStyle(fontSize: 20))),
+            Container(width: 120, height: 100, color: Colors.green, child: Text("Woxrld", style: TextStyle(fontSize: 30)),),
+            Container(width: 90, height: 80, color: Colors.blue, child: Text("abxc", style: TextStyle(fontSize: 12))),
+            Container(width: 50, height: 120, color: Colors.orange, child: Text("cxba", style: TextStyle(fontSize: 40))),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget itemRow(
+      String mainAxisAlignmentStr,
+      MainAxisAlignment mainAxisAlignment,
+      String crossAxisAlignmentStr,
+      CrossAxisAlignment crossAxisAlignment) {
+    return Container(
+      height: 140,
+      margin: const EdgeInsets.only(bottom: 8.0),
+      color: Colors.pink[100],
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          Row(
+            mainAxisAlignment: mainAxisAlignment,
+            crossAxisAlignment: crossAxisAlignment,
+            // textDirection: TextDirection.ltr, // rtl: 从右到左排版; ltr: 从左到右排版(默认)
+            children: [
+              Container(width: 80, height: 60, color: Colors.red),
+              Container(width: 120, height: 100, color: Colors.green),
+              Container(width: 90, height: 80, color: Colors.blue),
+              Container(width: 50, height: 120, color: Colors.orange),
+            ],
+          ),
+          Positioned(
+            left: 0,
+            bottom: 0,
+            child: Text(
+              "GitLqr >>> main:$mainAxisAlignmentStr , cross:$crossAxisAlignmentStr",
+              style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+

最后一组是 CrossAxisAlignment.baseline 的效果, 可以看到不管文字多大, 字母 x 的底部都是在一条线上的, 这就是基线对齐.
值得注意的是, 使用 CrossAxisAlignment.baseline 必须同时指定基线 textBaseline(默认值为null), 其值 TextBaseline.ideographic 与 TextBaseline.alphabetic 几乎没差

# 3、Column

Column 与 Row 都是继承自 Flex, 两者除了在方向上有区别外, 其他特性几乎完全一样, 这里只补充一点它们排版方向上的不同之处:

  • Row: 排版方向 TextDirection +
    • rtl: 从右到左排版
    • ltr: 从左到右排版(默认)
  • Column: 排版方向 VerticalDirection +
    • up: 从下到上排版
    • down: 从上到下排版(默认)
class ColumnDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: [
+      Expanded(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          verticalDirection: VerticalDirection.down,
+          // up: 从下到上排版; down: 从上到下排版(默认)
+          children: [
+            Container(width: 80, height: 60, color: Colors.red),
+            Container(width: 120, height: 100, color: Colors.green),
+            Container(width: 90, height: 80, color: Colors.blue),
+            Container(width: 50, height: 120, color: Colors.orange),
+            Text(
+              "GitLqr >>> VerticalDirection.down",
+              style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
+            ),
+          ],
+        ),
+      ),
+      Expanded(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          verticalDirection: VerticalDirection.up,
+          // up: 从下到上排版; down: 从上到下排版(默认)
+          children: [
+            Container(width: 80, height: 60, color: Colors.red),
+            Container(width: 120, height: 100, color: Colors.green),
+            Container(width: 90, height: 80, color: Colors.blue),
+            Container(width: 50, height: 120, color: Colors.orange),
+            Text(
+              "GitLqr >>> VerticalDirection.up",
+              style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
+            ),
+          ],
+        ),
+      ),
+    ]);
+  }
+}
+

# 4、Flexible(Expanded)

  • Flexible 中的属性:

    • fit: 填充模式 +
      • tight: 子控件强制填满可用空间
      • loose: 子控件只占用本身大小
    • flex: 当 fit 为 tight 时才会生效 (重点: width 比 = flex 比) +
      • 不指定 flex 时: 按等分的方式来拉伸 Flexible 直至填满可用空间, 相当于 flex 都是 1
      • 有指定 flex 时: 按 flex 的比例来拉伸 Flexible 直至填满可用空间, 此时原本的 width 已经无效了

  • Expanded = Flexible(fit: FlexFit.tight)

    • 当 Flex(Row/Column)还有可用空间时, 拉伸子控件大小
    • 当子控件超出 Flex(Row/Column)空间时, 缩小子控件大小
class ExpandedDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        item1(),
+        tip("Flexible fit: FlexFit.tight flex: 1"),
+        item2(),
+        tip("Expanded flex: 1 , flex: 1 (width: 120)"),
+        item3(),
+        tip("Expanded flex: 1 , flex: 2 (width: 10000)"),
+      ],
+    );
+  }
+
+  Widget item1() {
+    return Row(
+      children: [
+        Flexible(
+          fit: FlexFit.tight,
+          flex: 1,
+          child: Container(width: 80, height: 60, color: Colors.red),
+        ),
+        Flexible(
+          fit: FlexFit.tight,
+          flex: 1,
+          child: Container(width: 120, height: 100, color: Colors.green),
+        ),
+        Container(width: 90, height: 80, color: Colors.blue),
+        Container(width: 50, height: 120, color: Colors.orange),
+      ],
+    );
+  }
+
+  Widget item2() {
+    return Row(
+      children: [
+        Expanded(
+          flex: 1,
+          child: Container(width: 80, height: 60, color: Colors.red),
+        ),
+        Expanded(
+          flex: 1,
+          child: Container(width: 120, height: 100, color: Colors.green),
+        ),
+        Container(width: 90, height: 80, color: Colors.blue),
+        Container(width: 50, height: 120, color: Colors.orange),
+      ],
+    );
+  }
+
+  Widget item3() {
+    return Row(
+      children: [
+        Expanded(
+          flex: 1,
+          child: Container(width: 80, height: 60, color: Colors.red),
+        ),
+        Expanded(
+          flex: 2,
+          child: Container(width: 10000, height: 100, color: Colors.green),
+        ),
+        Container(width: 90, height: 80, color: Colors.blue),
+        Container(width: 50, height: 120, color: Colors.orange),
+      ],
+    );
+  }
+
+  Widget tip(String content) {
+    return Text(
+      "GitLqr >>> $content",
+      style: TextStyle(
+        fontSize: 20,
+        color: Colors.white,
+        backgroundColor: Colors.black54,
+      ),
+    );
+  }
+}
+

# 5、Stack

Stack 可以让子 Widget 堆叠在一起, 默认的大小是包裹内容的, 其属性有:

  • alignment: 指定从什么位置开始摆放 所有的子 Widget
    • Positioned(Widget): 对 单个子 Widget 进行定位
  • fit: expand(很少用) 将子元素拉伸到尽可能大
  • overflow: 超出部分如何处理, 比如: 超出仍显示的话, 可以使用 Overflow.visible
class StackDemo1 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: AlignmentDirectional.bottomStart,
+      // fit: StackFit.expand,
+      overflow: Overflow.visible,
+      children: [
+        Image.asset("assets/images/FSA_QR.png"),
+        Positioned(
+          left: 20,
+          bottom: -50,
+          child: Container(width: 150, height: 150, color: Colors.red),
+        ),
+        Positioned(
+          right: 0,
+          child: Text(
+            "lqr",
+            style: TextStyle(fontSize: 30, color: Colors.white, backgroundColor: Colors.black),
+          ),
+        )
+      ],
+    );
+  }
+}
+

# 三、综合案例

class StackDemo2 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Image.asset("assets/images/FSA_QR.png"),
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: Container(
+            padding: EdgeInsets.symmetric(horizontal: 8.0),
+            color: Color.fromARGB(160, 0, 0, 0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  "欢迎关注公众号: FSA全栈行为",
+                  style: TextStyle(fontSize: 20, color: Colors.white),
+                ),
+                IconButton(
+                  icon: Icon(Icons.favorite),
+                  color: Colors.red,
+                  onPressed: () => print("点击了收藏"),
+                )
+              ],
+            ),
+          ),
+        )
+      ],
+    );
+  }
+}
+

+ +
+
#Align#Center#Padding#Container#Flex#Row#Column#Flexible#Expanded#Stack
Flutter - 基础Widget
Flutter - ListView与GridView

+ ← + Flutter - ListView与GridView→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2ed5f7/index.html b/pages/2ed5f7/index.html new file mode 100644 index 000000000..4f1b5f352 --- /dev/null +++ b/pages/2ed5f7/index.html @@ -0,0 +1,175 @@ + + + + + + DesignPattern - 桥接模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-09
目录

DesignPattern - 桥接模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、桥接模式介绍

桥接模式是一种结构型模式，将抽象部分与实现部分分离，使它们都可以独立的变化，通俗来说，是通过组合来桥接其它的行为/维度。

  • 应用场景 +
    • 系统需要在构件的抽象化角色和具体化角色之间增加更多的灵活性
    • 不想使用因继承导致系统类的个数急剧增加的系统
    • 有时候一个类，可能会拥有多个变化维度，比如啤酒，有不同的容量和品牌，可以使用继承组合的方式进行开发，假如维度很多，就容易出现类的膨胀，使用桥接模式就可以解决这个问题，且解耦
  • 优点 +
    • 抽象和实现的分离
    • 优秀的扩展能力，符合开闭原则
  • 缺点 +
    • 增加系统的理解与设计难度
    • 使用聚合关联关系建立在抽象层，要求开发者针对抽象进行设计与编程，比如抽象类手机，里面聚合了颜色类

补充：桥接模式用于设计的前期，精细化的设计，让系统更加灵活

# 二、桥接模式代码实现

# 1、举例说明

在编码之前，先举个例子，手机有很规格，比如品牌、内存、机身颜色等等，那么在设计数据库表的时候，绝对不可能在 phone 表中用字段直接描述以上规格，就比如机身颜色来说，除了有常见的红绿蓝等颜色，还有类似 “亮黑”、“晴雪”、“墨羽” 等自定义的颜色，并且后期还可能重命名，可想而知，在 Phone 表中用一个字段来描述颜色维护性是有多差，更别说内存了（内存还分品牌、容量、带宽...），这时把就得考虑把颜色单独放一张 Color 表，两表之间通过 外键关联，以后不管是增加或重命名颜色，都很灵活。

表与表之间通过 外键关联(一般是 Int 类型) 就是一种桥接模式，那么在实际编码中，一般是通过 组合 的方式实现这种桥接关系，即在 Phone 类中持有 Color 对象。另外，因为对象除了可以描述属性，还可以有行为方法，所以说，桥接模式可以桥接其它的行为/维度。

# 2、代码实现

创建 颜色接口，以及 具体颜色类：

/**
+ * 颜色接口
+ *
+ * @author GitLqr
+ */
+public interface IColor {
+	String getColor();
+}
+
+public class BlueColor implements IColor {
+	@Override
+	public String getColor() {
+		return "蓝色";
+	}
+}
+
+public class RedColor implements IColor {
+	@Override
+	public String getColor() {
+		return "红色";
+	}
+}
+

创建抽象角色手机类，持有 Color 对象：

/**
+ * 抽象角色：手机
+ *
+ * @author GitLqr
+ */
+public abstract class Phone {
+
+	/**
+	 * 通过组合的方式来桥接其他行为
+	 */
+	protected IColor color;
+
+	public void setColor(IColor color) {
+		this.color = color;
+	}
+
+	/**
+	 * 手机的方法
+	 */
+	public abstract void run();
+}
+

创建具体角色手机类：

/**
+ * 手机实例：小米手机
+ *
+ * @author GitLqr
+ */
+public class MiPhone extends Phone {
+
+	public MiPhone(IColor color) {
+		this.setColor(color);
+	}
+
+	@Override
+	public void run() {
+		System.out.println(color.getColor() + "小米手机运行中...");
+	}
+}
+
+/**
+ * 手机实例：苹果手机
+ *
+ * @author GitLqr
+ */
+public class IPhone extends Phone {
+
+	public IPhone(IColor color) {
+		this.setColor(color);
+	}
+
+	@Override
+	public void run() {
+		System.out.println(color.getColor() + "苹果手机运行中...");
+	}
+}
+

使用：

public static void main(String[] args) {
+    Phone miPhone = new MiPhone(new BlueColor());
+    miPhone.run(); // 蓝色小米手机运行中...
+
+    Phone iPhone = new IPhone(new RedColor());
+    iPhone.run(); // 红色苹果手机运行中...
+}
+
+ +
+
#设计模式#桥接模式
DesignPattern - 适配器模式【结构型】
DesignPattern - 组合模式【结构型】

+ ← + DesignPattern - 组合模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/2ffb7f/index.html b/pages/2ffb7f/index.html new file mode 100644 index 000000000..8f0655f7a --- /dev/null +++ b/pages/2ffb7f/index.html @@ -0,0 +1,116 @@ + + + + + + Docker - 安装、加速和基本使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-24
目录

Docker - 安装、加速和基本使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

Docker 容器是一个开源的应用容器引擎，让开发者可以以统一的方式打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何安装了docker引擎的服务器上

本文主要以 Mac 平台为例

# 安装

# 方式一: Homebrew

brew cask install docker
+

# 方式二: 桌面程序

我使用该方式

访问 https://www.docker.com/get-started，在 Docker Desktop 下选择你当前系统对应的软件进行下载安装

# 镜像加速

# 镜像

# Daocloud

实测，速度不咋地

打开 daocloud.io (opens new window) 网站，注册并登录，点击加速器按钮，或者直接打开 https://www.daocloud.io/mirror，打开的页面上会显示与你账号相关的加速地址

# 其它

实测，速度杠杠的，推荐使用

镜像 地址
Docker中国区官方镜像 https://registry.docker-cn.com
网易 http://hub-mirror.c.163.com
ustc https://docker.mirrors.ustc.edu.cn
{
+  "registry-mirrors": [
+    "https://registry.docker-cn.com",
+    "http://hub-mirror.c.163.com",
+    "https://docker.mirrors.ustc.edu.cn"
+  ]
+}
+

# 配置

该部分内容取自 daocloud

# Linux

curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://xxx.m.daocloud.io
+

该脚本可以将 --registry-mirror 加入到你的 Docker 配置文件 /etc/docker/daemon.json 中。适用于 Ubuntu14.04、Debian、CentOS6 、CentOS7、Fedora、Arch Linux、openSUSE Leap 42.1，其他版本可能有细微不同。更多详情请访问文档。

# macOS

Docker For Mac

右键点击桌面顶栏的 docker 图标，选择 Preferences ，在 Daemon 标签（Docker 17.03 之前版本为 Advanced 标签）下的 Registry mirrors 列表中加入下面的镜像地址:

http://xxx.m.daocloud.io
+

点击 Apply & Restart 按钮使设置生效。

Docker Toolbox 等配置方法请参考帮助文档 (opens new window)。

我自己的版本是 3.1.0(51484) ，与上述的不太一致。

如图所示，切换到 Docker Engine 下，在右侧所示的 JSON 内容中添加 registry-mirrors

"registry-mirrors": ["你的加速器地址"]
+

最后点击 Apply&Restart 按钮即可。

# Windows

Docker For Windows

在桌面右下角状态栏中右键 docker 图标，修改在 Docker Daemon 标签页中的 json ，把下面的地址:

http://xxx.m.daocloud.io
+

加到" registry-mirrors"的数组里。点击 Apply 。

Docker Toolbox 等配置方法请参考帮助文档 (opens new window)。

# 基本使用

# 查看版本

docker -v
+

输出结果

Docker version 20.10.2, build 2291f61
+

# 查看Docker信息

docker info
+

可以使用该命名查看当前的镜像地址数组

 ...
+ Registry: https://index.docker.io/v1/
+ Labels:
+ Experimental: true
+ Insecure Registries:
+  127.0.0.0/8
+ Registry Mirrors:
+  https://registry.docker-cn.com/
+  http://hub-mirror.c.163.com/
+  https://docker.mirrors.ustc.edu.cn/
+ Live Restore Enabled: false
+ ...
+
+ +
+
#Docker
AppRTC实战
Docker - 操作镜像资源

+ ← + Docker - 操作镜像资源→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/326c98/index.html b/pages/326c98/index.html new file mode 100644 index 000000000..b1091bf65 --- /dev/null +++ b/pages/326c98/index.html @@ -0,0 +1,199 @@ + + + + + + Flutter - 滚动视图中的表单防遮挡 🗒 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-08-13
目录

Flutter - 滚动视图中的表单防遮挡 🗒

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

最近遇到的一个需求上的优化点，在一个详情页中存在提交反馈信息的表单模块，这里简单的模拟了一下，这是运行后的效果

优化前

设计师验收的时候觉得这里有一点需要做下优化，那就是表单视图并不大，提交按钮需要完整的显示出来，讲道理要手动去计算偏移量还是挺麻烦的，但是如果结合我的 LinXunFeng/flutter_scrollview_observer (opens new window) 这个库就完全难不倒我们，咔咔两下就搞定了，优化后的效果如下：

优化后

Demo 链接：https://github.com/LinXunFeng/flutter_scrollview_observer/blob/main/example/lib/features/scene/scrollview_form_demo/scrollview_form_demo_page.dart (opens new window)

接下来我讲一下具体的实现步骤。

# 二、布局

布局比较容易，简单过一下

# 滚动视图

使用 ListView 构建滚动视图

ScrollController scrollController = ScrollController();
+
+Widget _buildScrollView() {
+  Widget resultWidget = ListView.builder(
+    controller: scrollController,
+    itemBuilder: (context, index) {
+      if (formIndex == index) {
+        return _buildForm();
+      }
+      return _buildImage();
+    },
+    itemCount: 10,
+  );
+  ...
+  return resultWidget;
+}
+

# 表单模块

FocusNode formFocusNode = FocusNode();
+  
+Widget _buildForm() {
+  Widget resultWidget = Form(
+    child: Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        const Text(
+          'Feedback',
+          style: TextStyle(
+            fontSize: 20,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        // 输入框
+        TextField(
+          focusNode: formFocusNode,
+        ),
+        // 提交按钮
+        Container(
+          width: double.infinity,
+          color: Colors.white,
+          alignment: Alignment.center,
+          margin: const EdgeInsets.only(top: 10.0),
+          child: TextButton(
+            child: const Text('Submit'),
+            onPressed: () {
+              // 使输入框失去焦点
+              formFocusNode.unfocus();
+            },
+          ),
+        ),
+      ],
+    ),
+  );
+  ...
+  return resultWidget;
+}
+

# 三、实战

由于滚动视图使用的是 ListView，所以我们使用对应 ListViewObserver 将其包裹一层做观察

// 将滚动视图的 ScrollController 传给 ListObserverController
+ListObserverController observerController = ListObserverController(controller: scrollController);
+
+resultWidget = ListViewObserver(
+  controller: observerController,
+  // 关闭自动触发功能
+  autoTriggerObserveTypes: const [],
+  child: _buildScrollView(),
+  // 不实现观察回调
+  // onObserve: (resultModel) {}
+);
+

注：请留意一下注释掉的 onObserve 回调，下面会做相关的版本更新说明。

// 表单模块的下标
+final int formIndex = 3;
+
+// 监听输入框的焦点状态
+formFocusNode.addListener(handleFormFocus);
+
+...
+
+handleFormFocus() async {
+  // 我们只处理获得焦点的情况
+  if (!formFocusNode.hasFocus) return;
+  // 获得焦点后，等待键盘完全展示出来
+  await Future.delayed(const Duration(milliseconds: 600));
+  // 触发观察滚动视图
+  final result = await observerController.dispatchOnceObserve(
+    isForce: true, // 强制观察，不用对比上次的观察结果
+    isDependObserveCallback: false, // 不依赖观察回调，这样就可以正常返回观察结果
+  );
+  // 如果观察不成功则不用继续下去了
+  if (!result.isSuccess) return;
+
+  // 根据下标从观察结果中找出表单对应的数据
+  final formResultModel =
+      result.observeResult?.displayingChildModelList.firstWhere((element) {
+    return element.index == formIndex;
+  });
+  if (formResultModel == null) return;
+  
+  // 进行滚动，使表单视图底部紧贴键盘显示出来
+  observerController.controller?.animateTo(
+    // 相减的逻辑在正文内说明
+    formResultModel.scrollOffset - formResultModel.trailingMarginToViewport,
+    duration: const Duration(milliseconds: 200),
+    curve: Curves.ease,
+  );
+}
+

一些额外说明：

  • 等待键盘完全展示出来的时长（600 ms）是测试出来的同时适用于iOS和安卓的一个值，如果你有更好的方式，可以留言分享一下 😁
  • 在 1.16.0 版本之前，如果对应的观察回调（如：onObserve）没有实现的话，内部的观察逻辑就无法进行下去，提前结束。而在 1.16.0 版本之后对 dispatchOnceObserve 方法进行了增强，可以通过对 isDependObserveCallback 设置为 false 避开这个逻辑，并且返回值也改造成了 Future<ListViewOnceObserveNotificationResult>，可直接拿到观察结果，相当方便！
  • scrollOffset 是当前滚动视图的偏移量
  • trailingMarginToViewport 是指当前 item 到 viewport 的底部距离，即 表单模块视图的底部 到 滚动视图的视窗底部 的间距。
  • 由于上述功能我们是依赖于键盘弹出来的视图高度发生变化的特性，键盘出来时视窗大小受到挤压缩小，所以 Scaffold 这里的 resizeToAvoidBottomInset 属性请不要设置为 false。如果设置了 false，则滚动的偏移量需要手动加上键盘的高度~
return Scaffold(
+  resizeToAvoidBottomInset: true,
+  body: ...,
+);
+

在理解完上面的内容后，我们再来看一下最终偏移量计算的逻辑，即

observerController.controller?.animateTo(
+  formResultModel.scrollOffset - formResultModel.trailingMarginToViewport,
+  duration: const Duration(milliseconds: 200),
+  curve: Curves.ease,
+);
+

图解

咱们配图食用，当键盘完全展示出来后，滚动视图的的视窗变小了， 由红色区域变成了蓝色区域，而此时表单模块也完全展示出来了，其底部到视窗之间的间距就是 trailingMarginToViewport，为正数，但是我们需要让它紧贴底部，所以此时滚动视图的偏移量是多了的，需要减去这个 trailingMarginToViewport，这便是最终偏移量计算的逻辑。

+ +
+
#Dart#Flutter
Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖
Flutter - 秒杀1/2曝光统计 📊

+ ← + Flutter - 秒杀1/2曝光统计 📊→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/328069/index.html b/pages/328069/index.html new file mode 100644 index 000000000..fb5328128 --- /dev/null +++ b/pages/328069/index.html @@ -0,0 +1,124 @@ + + + + + + Android - 自动系统签名 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-02-11
目录

Android - 自动系统签名

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、系统签名

以下是两类应用开发场景：

  • 普通应用开发：使用公司自定义 keystore 进行签名，如：微信、支付宝
  • 系统应用开发：使用 AOSP 系统签名或厂商自定义 keystore 进行签名，如：设置、录音

系统应用开发相对于普通应用开发拥有更高的权限，可以使用一些系统级别的 API，比如：

  • 静默安装（android.permission.INSTALL_PACKAGES）
  • 屏幕抓取（SurfaceControl#createDisplay）
  • 设备音频抓取（AudioSource.REMOTE_SUBMIX）
  • 应用外悬浮窗
  • ...

系统应用开发只适用于以下几类开发者：

  • Android 系统定制开发者（自主拥有系统签名）
  • Android 系统厂商合作开发者（能拿到厂商的自定义系统签名）

温馨提示：如果你不属于以上类别，那么你要清楚，没有系统签名一切都是空谈。

# 1、配置

系统应用开发需要在清单文件根节点指定 sharedUserId：

<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    android:sharedUserId="android.uid.system">
+    ...
+</manifest>
+

# 2、签名

配置完 android:sharedUserId="android.uid.system" 之后，此时的 app 是无法成功安装到设备的，控制台会提示 INSTALL_FAILED_SHARED_USER_INCOMPATIBLE，这是因为此时 app 已经被识别为系统应用，但是其签名信息却不是系统签名，于是无法通过系统检验。进行系统签名需要准备好如下几个文件：

  • platform.pk8：签名证书
  • platform.x509.pem：签名证书
  • signapk.jar：签名工具

如果你的设备是纯纯的原生系统（AOSP），那么可以在以下网址中找到这几个签名文件：

注：如果是 Android 系统厂商合作开发 这种场景（自定义过系统签名），那么以上文件应该让合作厂商提供。

签名文件准备好之后，就可以通过以下命令对 app-unsigned.apk 进行系统签名了：

java -jar signapk.jar platform.x509.pem platform.pk8 app-unsigned.apk signed.apk
+

命令执行之后，生成出来的 signed.apk 文件就已经是经过系统签名的了。

# 3、安装

执行 adb install signed.apk 命令后，发现这次就可以正常安装了。通过 adb install 这种方式，就跟我们平时普通应用开发一样，apk 会被安装到 /data/app/ 目录下，但是因为指定了 android:sharedUserId="android.uid.system"，所以，这时的 app 会被认为是系统应用，可以使用系统权限。

注：除了 android.uid.system 以外，sharedUserId 还可以指定其他值，详情说明可通过以下文章了解：https://www.cnblogs.com/scarecrow-blog/p/4876628.html (opens new window)

另外，如果你是 Android 系统定制开发者，你也可以将该 apk 文件放置到 /system/app 或 /system/priv-app 目录下，之后 系统烧录 或 OTA 升级时就会自动携带上该系统应用。

# 二、自动签名

经过上面的几个步骤后，我们确定能将自己开发好的系统应用成功安装到设备上，但是，你会发现签名环节太麻烦了，每次都要手动对 apk 进行签名，非常不利于开发和调试。当然，我们可以通过编写 gradle 脚本，在项目每次编译完成时，执行自动签名任务，但是这种方式并不是最优解，还有一种更简单的方式。

# 1、生成系统签名文件

我们知道，Android 项目中可以在 build.gradle 文件的 signingConfigs 域中配置我们的自定义签名文件（*.jks），在配置好 buildTypes 之后，每次编译时 gradle 都会自动对 apk 进行签名，那这个签名文件（*.jks）能不能是系统签名文件呢？答案是可以的。keytool-importkeypair 这个工具可以将系统签名信息（*.pk8、*.pem）导入到现有签名文件中（*.jks），以下是它的仓库地址：

将仓库中的 keytool-importkeypair 文件下载下来，然后执行以下命令：

# 语法：
+# keytool-importkeypair [-k keystore] [-p storepass] -pk8 pk8 -cert cert -alias key_alias
+
+# 示例：
+keytool-importkeypair -k platform.jks -p 123456 -pk8 platform.pk8 -cert platform.x509.pem -alias platform
+

注：上面示例中 platform.jks 是我自己创建的签名文件（不知道怎么创建签名文件的请自行 ChatGPT~），请根据你自己项目的实际情况，修改 keystore、storepass、key_alias 等参数。

有一点需要特别注意，keytool-importkeypair 是 shell 脚本，在 Unix 系统下可以直接运行，但是在 Windows 系统下（cmd 或 PowerShell）是无法直接运行的，这时可以借助 Git Bash 来执行该命令。

注：如果你的 Git Bash 出现乱码，可以在右键->Options->Text，将 Locale 设置为 zh_CN，Character set 设置为 GBK 即可。如果还是乱码，那么改成 UTF8 等其他字符集逐个试试吧~。

执行命令后，原本的 platform.jks 文件会被覆盖成拥有系统签名信息的签名文件了。

# 2、配置系统签名文件

接下来就跟普通应用开发一样，在 app 工程的 build.gradle 文件中配置一下签名就好了：

android {
+    ...
+    signingConfigs {
+        platform {
+            storeFile file('../config/signing/platform.jks')
+            storePassword "123456"
+            keyAlias "platform"
+            keyPassword "123456"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled true
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+            signingConfig signingConfigs.platform
+        }
+        debug {
+            initWith(buildTypes.release)
+            debuggable true
+            minifyEnabled false
+        }
+    }
+    ...
+}
+

注：initWith(otherBuildType) 可以让当前 buildType（debug）复制其他 buildType（release）的配置，减少相同配置的代码量。虽然这很方便，但是一定要注意，如果是 debug 构建类型，一定要指定其 debuggable 为 true（因为 release 的 debuggable 默认为 false），否则你的工程可能会无法进入 debug 模式。

至此，我们就可以像普通应用开发那样，愉快的开发系统应用了。

+ +
+
#系统开发#系统权限#系统签名#自动签名#system signature
Android - 利用 jitpack 免费发布闭源 aar
LayoutInflater源码分析与应用

+ ← + LayoutInflater源码分析与应用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/32a06e/index.html b/pages/32a06e/index.html new file mode 100644 index 000000000..4b2cfc28f --- /dev/null +++ b/pages/32a06e/index.html @@ -0,0 +1,142 @@ + + + + + + FQ-各平台终端设置代理的方法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-06-15
目录

FQ-各平台终端设置代理的方法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# Windows

# 1、cmd

cmd命令行:(不用socks5)(临时设置)(也可放置环境变量)
+set http_proxy=http://127.0.0.1:1080
+set https_proxy=http://127.0.0.1:1080
+

恢复

# 恢复
+set http_proxy=
+set https_proxy=
+

# 2、PowerShell

打开 $Profile

code $Profile
+

编写如下内容

$env:http_proxy="http://127.0.0.1:1080"
+$env:https_proxy="http://127.0.0.1:1080"
+

# 3、GitBash

export http_proxy=socks:***
+export https_proxy=socks:**
+

如果专门针对 git 可使用如下方式

git config --global http.proxy http://127.0.0.1:1080
+git config --global https.proxy http://127.0.0.1:1080
+git config --global http.proxy 'socks5://127.0.0.1:1080' 
+git config --global https.proxy 'socks5://127.0.0.1:1080'
+

取消代理

git config --global --unset http.proxy
+git config --global --unset https.proxy
+

命令别名

alias gitproxy='git config --global http.proxy http://127.0.0.1:7890;git config --global https.proxy http://127.0.0.1:7890'
+alias gitunproxy='git config --global --unset http.proxy;git config --global --unset https.proxy'
+

查看信息 Git 配置信息

git config --global -l
+
+git config --global --list
+

或者打开配置文件查看源码

cat ~/.gitconfig
+

设置完毕会出多如下两行

[http]
+    proxy = socks5://127.0.0.1:1080
+[https]
+    proxy = socks5://127.0.0.1:1080
+

# Ubuntu

export http_proxy=http://127.0.0.1:1080
+

# mac

# Clash X 代理

终端

Clash X command + C Copy Shell Command 输出为

export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7891
+

在终端的对应 profile 文件，编辑加入对应的内容，我就很随意的加在 bash_profile 了，大雾

export https_proxy=http://127.0.0.1:7890
+export http_proxy=http://127.0.0.1:7890
+export all_proxy=socks5://127.0.0.1:7891
+##上面的三行命令表示,每次新建一个终端会话时,默认让终端去走代理,这样就不需要每次都复制拷贝一下了,很方便,同时,代理程序去智能分流(国内 IP 直连,国外走代理)，避免了连接国内 IP 地址时“绕远”.
+
+
+alias setproxy="export https_proxy=http://127.0.0.1:7890;export http_proxy=http://127.0.0.1:7890;export all_proxy=socks5://127.0.0.1:7891;echo \"Set proxy successfully\" "
+alias unsetproxy="unset http_proxy;unset https_proxy;unset all_proxy;echo \"Unset proxy successfully\" " 
+alias ipcn="curl myip.ipip.net"
+alias ip="curl ip.sb"
+
+
+## 上面这几个 alias 是自定义的命令
+## unsetproxy 取消代理
+## setproxy 设置代理
+## ip & ipcn 查看 终端IP & 实际IP
+

Git代理配置

Host *
+    ProxyCommand nc -X 5 -x localhost:7891 %h %p
+##第一行代表所有的 ssh 的主机
+##第二行代表让所有的 ssh 的主机在连接的时候,通过你本地的端口为 7891 的 socks5 代理去连接,一般来讲,本地的 socks5 都是由FQ工具提供
+##诸如 Surge ClashX 或者 Ssr,所以,7891这个端口需要换成对应的服务端口即可
+

原文章链接：mac Clash X 代理 终端 (opens new window)

记录我自己放在 .zshrc 里的配置：

# git proxy
+alias gitproxy="git config --global http.proxy http://127.0.0.1:7890;git config --global https.proxy https://127.0.0.1:7890"
+alias gitunproxy="git config --global --unset http.proxy;git config --global --unset https.proxy"
+
+ +
+
#FQ#Terminal
FQ - Terminal下的代理工具ProxyChains-NG
Jsonnet - json数据模板语言

+ ← + Jsonnet - json数据模板语言→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/334ef0/index.html b/pages/334ef0/index.html new file mode 100644 index 000000000..fc4da8b82 --- /dev/null +++ b/pages/334ef0/index.html @@ -0,0 +1,132 @@ + + + + + + Kotlin - 方法重载与默认参数 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-29
目录

Kotlin - 方法重载与默认参数

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 方法重载（Overloads）

当一个类中有两个或多个具有相同方法名和不同的参数类型的方法时，就是重载：

class Person {
+    fun say() {
+        println("hahaha")
+    }
+    fun say(what: String) {
+        println(what)
+    }
+    fun say(obj: Any) {
+        println("this is ${obj.javaClass.simpleName}")
+    }
+}
+
+fun main() {
+    val person = Person()
+    person.say() // hahaha
+    person.say("hehehe") // hehehe
+    person.say(person) // this is Person
+}
+

方法签名由方法名和参数类型决定，与方法的其他属性无关。

# 默认参数

在 Kotlin 中，方法可以使用默认参数，一般情况下，方法重载可以转换成带默认参数的方法：

class Person {
+    fun say(what: String = "hahaha") {
+        println(what)
+    }
+    fun say(obj: Any) {
+        println("this is ${obj.javaClass.simpleName}")
+    }
+}
+
+fun main() {
+    val person = Person()
+    person.say() // hahaha
+    person.say("hehehe") // hehehe
+    person.say(person) // this is Person
+}
+

可以看到这里只是把 say() 和 say(what:String) 使用默认参数整合了，但 say(obj:Any) 还在，其实 say(obj:Any) 的设计是不合理的，因为 String 是 Any 的子类，在调用方法时会有歧义，开发中，最好避免这种写法。

# JvmOverloads

现在 Person 类中的 say()是重载方法，而且其中一个 say 有默认参数，我们来看看在 Java 中调用如何：

可以发现，Java 中识别不到不带参数的 say()方法，这是因为 Java 并不知道 Kotlin 中有默认参数这种特性，它只能认为 say(what:String) 和 say(obj:Any) 是重载方法，把 say(what:String) 中的默认参数给忽略了，Kotlin 提供了 @JvmOverloads 可以将带有默认参数的方法转换成对应的重载方法：

class Person {
+    @JvmOverloads
+    fun say(what: String = "hahaha") {
+        println(what)
+    }
+
+    fun say(obj: Any) {
+        println("this is ${obj.javaClass.simpleName}")
+    }
+}
+

ok，这下 Java 中就识别到了不带参数的 say()方法了

+ +
+
#Overloads#JvmOverloads
Kotlin - 伴生对象与静态成员
Kotlin - 扩展成员

+ ← + Kotlin - 扩展成员→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/337d0f/index.html b/pages/337d0f/index.html new file mode 100644 index 000000000..e903e3d6a --- /dev/null +++ b/pages/337d0f/index.html @@ -0,0 +1,106 @@ + + + + + + Docker - 网络管理 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-31
目录

Docker - 网络管理

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

默认情况下，容器和宿主机之间网络是隔离的

现在启动了一个 nginx 容器 + +如图所示 nginx 使用了 80 端口，但是我们去浏览器里访问 localhost:80 是无法访问到 nginx 服务的 + +这个时候可以通过端口映射的方式，将容器中的端口，映射到宿主机的某个端口上，从而使我们能够通过宿主机的 ip+端口 的方式来访问容器里的内容

# 随机端口映射

-P ：自动绑定所有对外提供服务的容器端口，映射的端口会从没有使用的端口池中自动随机选择，如果连续启动多个容器的话，则下一个容器的端口默认是当前容器的端口号+1

命令

docker run -d -P [镜像名称]
+

在刚才的命令基本上加 -P

docker run -dit -P --name lxfnginx nginx
+

+这样宿主机的 55000 端口就映射到了窗口的 80 端口，访问也是成功的。 +

# 指定端口映射

命令

docker run -d -p [宿主机ip]:[宿主机端口]:[容器端口] --name [容器名称] [镜像名称]
+

将宿主机上的 8000 端口映射到 nginx 容器的 80 端口

docker run -dit -p 8000:80 --name lxfnginx nginx
+

+再去访问 localhost:8000 时也是可以正常访问到的 +

0.0.0.0 表示地址全匹配，即 127.0.0.1 或者宿主机的局域网IP 192.168.1.x 这种都可以访问到 nginx 服务，如果我们想指定绑定的 IP ，可以在映射端口前加上 IP 即可

docker run -dit -p 192.168.1.234:8000:80 --name lxfnginx nginx
+

+虽然图中显示的是 127.0.0.1:55000->80 ，但是经过测试

  • 192.168.1.234:8000 是可以正常访问
  • 127.0.0.1:55000 和 127.0.0.1:8000 无法访问

# 多端口映射

命令

docker run -d -p [宿主机端口1]:[容器端口1]  -p [宿主机端口2]:[容器端口2] --name [容器名称] [镜像名称] 
+

如下命令所示

docker run -d -p 7000:443 -p 8000:80 --name lxfnginx nginx
+

# 共享网络

共享网络: 容器与宿主机共享网络信息

默认情况下，容器的网络信息与宿主机是相互独立的，这样会有什么问题呢？

假如运行一个提供了 django 服务的容器，宿主机本地提供了 MySql 服务，此时容器想访问宿主机的数据库，是无法访问到的，这个时候容器就需要共享宿主机的网络

在启动容器时，加上 --network=host 即可共享网络，命令如下

docker run -dit --network=host lxf_django
+

这样，容器与宿主机的网络就是共享的状态，此时的容器也就可以访问到宿主机的数据库了

+ +
+
#Docker
Docker - 数据管理
Docker - Dockerfile的使用

+ ← + Docker - Dockerfile的使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/3420a3/index.html b/pages/3420a3/index.html new file mode 100644 index 000000000..4bfa122f8 --- /dev/null +++ b/pages/3420a3/index.html @@ -0,0 +1,148 @@ + + + + + + Kotlin - 内部类 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-31
目录

Kotlin - 内部类

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 内部类

内部类就是定义在类内部的类，Kotlin 中的内部类大致分为 2 种：

  • 静态内部类
  • 非静态内部类

# 静态内部类

在某个类中像普通类一样声明即可，可以认为静态内部类与外部类没有关系，只是定义在了外部类"体内"而已，在使用静态内部类时需要"带上"外部类：

class Outer {
+    val a: Int = 0
+
+    class Inner {
+        val a: Int = 5
+    }
+}
+
+fun main() {
+    val outer = Outer()
+    println(outer.a)
+    val inner = Outer.Inner()
+    println(inner.a)
+}
+

注意，在 Java 中，这种写法就是在定义 非静态内部类，而 静态内部类 需要在声明时使用 static 修饰。

# 非静态内部类

非静态内部类与静态内部类有的区别有：

  • 非静态内部类 会持有外部类的引用，而 静态内部类 不会(可以认为两者没有关系)。
  • 非静态内部类 使用时需要基于外部类对象（Outer().Inner()），而 静态内部类 则是基于外部类（Outer.Inner()）。

因为 非静态内部类 会持有外部类的引用，所以内部类可以直接使用外部类成员；当非静态内部类与外部类存在同名成员时，可以使用 @标记 来解决歧义：

class Outer {
+    val b: Int = 3
+    val a: Int = 0
+
+    inner class Inner {
+        val a: Int = 5
+        fun test() {
+            println("Outer b = $b") // 3，因为持有外部类的引用，所以直接使用外部类成员
+            println("Outer a = ${this@Outer.a}") // 0，使用 @Outer 指定this是外部类对象
+            println("Inner a = ${this@Inner.a}") // 5，使用 @Inner 指定this是内部类对象
+            println("Inner a = ${this.a}") // 5，不使用 @标记 默认this就是内部类对象
+        }
+    }
+}
+
+fun main() {
+    val inner = Outer().Inner()
+    inner.test()
+}
+

为了区分 Kotlin 与 Java 中静态内部类和非静态内部类声明上的不同，以下分别使用 Kotlin 和 Java 各自编写内部类代码：

// Kotlin - 非静态内部类
+class Outer {
+    inner class Inner {...}
+}
+
+// Kotlin - 静态内部类
+class Outer {
+    class Inner {...}
+}
+
// Java - 非静态内部类
+public class Outer {
+    public class Inner {...}
+}
+
+// Java - 静态内部类
+public class Outer {
+    public static class Inner {...}
+}
+

# 匿名内部类

匿名内部类就是没有定义名字的内部类，一般格式为 object : 接口或(和)类，实际开发中，方法的回调接口(即 callback)一般不会专门声明一个类再创建对象来使用，而是直接使用匿名内部类：

val textArea = TextArea()
+textArea.addTextListener(object : TextListener {
+    override fun textValueChanged(e: TextEvent?) {...}
+})
+

Kotlin 的匿名内部类很强大，在使用时，可以有多个接口或父类，如：

val textArea = TextArea()
+textArea.addTextListener(object : TextField(), TextListener {
+    override fun textValueChanged(e: TextEvent?) {...}
+})
+

这个匿名内部类既是 TextField 的子类，也是 TextListener 的实现类，不过可能实际应用场景会比较少，了解即可。

Java 中的匿名内部类就没这么强大了，只能是 单个 接口(或父类) 的 实现类(子类)。

+ +
+
#inner#object#静态内部类#非静态内部类#匿名内部类
Kotlin - 数据类
Kotlin - 枚举与密封类

+ ← + Kotlin - 枚举与密封类→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/34334d/index.html b/pages/34334d/index.html new file mode 100644 index 000000000..d86b91a71 --- /dev/null +++ b/pages/34334d/index.html @@ -0,0 +1,156 @@ + + + + + + DesignPattern - 状态模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-12-13
目录

DesignPattern - 状态模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、状态模式介绍

状态模式（State Pattern）属于行为型模式。对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为，允许一个对象在其内部状态改变时改变它的行为。

注意：状态模式与策略模式是孪生兄弟，它们的 UML 图是一样的，但实际上解决的是不同情况的两种场景问题，状态模式不同状态下做的事情不同，而策略模式做的都是同一件事。

  • 核心组成

    • Context 上下文：定义了客户程序需要的接口并维护一个具体状态角色的实例，将与状态相关的操作委托给当前的 ConcreteState 对象来处理
    • State 抽象状态类：定义一个接口以封装与 Context 的一个特定状态相关的行为
    • ConcreteState 具体状态类：实现抽象状态定义的接口

  • 应用场景

    • 一个对象的行为取决于它的状态，并且它必须在运行时根据状态改变它的行为
    • 代码中包含大量与对象状态有关的条件语句，比如一个操作中含有庞大的多分支的条件 if-else 语句，且这些分支依赖于该对象的状态
    • 电商订单状态：未支付、已支付、派送中，收货完成等状态，各个状态下处理不同的事情

  • 优点

    • 只需要改变对象状态即可改变对象的行为
    • 可以让多个环境对象共享一个状态对象，从而减少系统中对象的个数

  • 缺点

    • 状态模式的使用会增加系统类和对象的个数
    • 状态模式的结构与实现都较为复杂，如果使用不当将导致程序结构和代码的混乱
    • 状态模式对“开闭原则”的支持并不太好，对于可以切换状态的状态模式，增加新的状态类需要修改那些负责状态转换的源代码

# 二、状态模式代码实现

以 电商订单状态变更，调用各种服务 为例

创建抽象状态：

/**
+ * 抽象状态
+ *
+ * @author GitLqr
+ */
+public interface State {
+
+	// 处理状态相关的行为
+	void handle();
+}
+

定义具体状态：

/**
+ * 具体状态类：新订单
+ *
+ * @author GitLqr
+ */
+public class NewOrderState implements State {
+	@Override
+	public void handle() {
+		System.out.println("新订单，未支付");
+		System.out.println("调用商户客服服务，有新订单\n");
+	}
+}
+/**
+ * 具体状态类：订单已支付
+ *
+ * @author GitLqr
+ */
+public class PayOrderState implements State {
+	@Override
+	public void handle() {
+		System.out.println("订单已经支付");
+		System.out.println("调用商户客服服务，订单已经支付");
+		System.out.println("调用物流服务，未发货\n");
+	}
+}
+/**
+ * 具体状态类：订单已发货
+ *
+ * @author GitLqr
+ */
+public class SendOrderState implements State {
+	@Override
+	public void handle() {
+		System.out.println("订单已经发货");
+		System.out.println("调用短信服务，通知用户已经发货");
+		System.out.println("更新物流信息\n");
+	}
+}
+

创建上下文：

/**
+ * 上下文：订单状态更新 就执行 状态对应的行为
+ *
+ * @author GitLqr
+ */
+public class OrderContext {
+	private State state;
+
+	public void setState(State state) {
+		this.state = state;
+		System.out.println("订单状态变更！！");
+		this.state.handle();
+	}
+}
+

使用：

public static void main(String[] args) {
+    OrderContext orderContext = new OrderContext();
+    orderContext.setState(new NewOrderState());
+    orderContext.setState(new PayOrderState());
+    orderContext.setState(new SendOrderState());
+}
+
+ +
+
#设计模式#状态模式
DesignPattern - 备忘录模式【行为型】

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/34e11b/index.html b/pages/34e11b/index.html new file mode 100644 index 000000000..a438aa9d1 --- /dev/null +++ b/pages/34e11b/index.html @@ -0,0 +1,121 @@ + + + + + + FQ - Terminal下的代理工具ProxyChains-NG | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2019-01-01
目录

FQ - Terminal下的代理工具ProxyChains-NG

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

是不是你也遇到过，在 Shadowsocks 使用 全局 模式下，终端依旧无法 ping 通谷歌？这是因为 Shadowsocks 仅针对代理应用软件，但是一些终端下执行的命令是无法代理的。所以本篇就来介绍一下如何使你的终端也走代理进行访问。

# 方案一：终端下的all_proxy

这里以 zshrc + Shadowsocks 为例

  • 打开 Shadowsocks，模式选为 PAC自动模式 或 全局模式

  • 如果不是使用 .zshrc 就 编辑 ~/.bashrc，下面的同理

# 1、打开 .zshrc

vim ~/.zshrc
+

# 2、添加命令

alias proxy='export all_proxy=socks5://127.0.0.1:1086'
+alias unproxy='unset all_proxy'
+

# 3、使用

先应用一下配置

source ~/.zshrc
+

终端下敲入

proxy
+

这样就应用上代理了，使用 curl 获取一下 cip.cc 来查看当前所使用的 ip

curl cip.cc
+

如果不想使用代理了，就使用如下命令

unproxy
+

# 4、总结

这种方式我个人是亲测无效的，不知道是不是我人品问题，还是我的 MAC 有问题，有兴趣的小伙伴可以试试。

# 方案二：ProxyChains-NG

proxychains-ng是proxychains的加强版，主要有以下功能和不足：

  • 支持http/https/socks4/socks5
  • 支持认证
  • 远端dns查询
  • 多种代理模式
  • 不支持udp/icmp转发
  • 少部分程序和在后台运行的可能无法代理

详情可见 GitHub地址 (opens new window)

# 环境

这里以 MAC + homebrew 为例，如果你还没有安装的话可以参考下方命令，详细可见官网 Homebrew (opens new window)

# 将命令粘贴至终端并回车进行安装
+/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+

# 关闭SIP

macOS 10.11 后下由于开启了 SIP（System Integrity Protection） 会导致命令行下 proxychains-ng 代理的模式失效，如果你要使用 proxychains-ng 这种简单的方法，就需要先关闭 SIP。

具体的关闭方法如下：

  • 部分关闭 SIP

重启Mac，按住Option键进入启动盘选择模式，再按⌘ + R进入Recovery模式。 +实用工具（Utilities）-> 终端（Terminal）。 +输入命令csrutil enable --without debug运行。 +重启进入系统后，终端里输入 csrutil status，结果中如果有 Debugging Restrictions: disabled 则说明关闭成功。

  • 完全关闭 SIP

重启Mac，按住Option键进入启动盘选择模式，再按⌘ + R进入Recovery模式。 +实用工具（Utilities）-> 终端（Terminal）。 +输入命令csrutil disable运行。 +重启进入系统后，终端里输入 csrutil status，结果中如果有 System Integrity Protection status:disabled. 则说明关闭成功。

# 安装

brew install proxychains-ng
+

# 配置

使用 Homebrew 安装完成后的配置文件路径为 /usr/local/etc/proxychains.conf

打开它，找到 [ProxyList]

[ProxyList]
+socks5  127.0.0.1 1086
+

proxychains-ng支持多种代理模式,默认是选择 strict_chain。

  • dynamic_chain ：动态模式,按照代理列表顺序自动选取可用代理
  • strict_chain ：严格模式,严格按照代理列表顺序使用代理，所有代理必须可用
  • round_robin_chain ：轮询模式，自动跳过不可用代理
  • random_chain ：随机模式,随机使用代理

给proxychains4增加一个别名，在 ~/.zshrc或~/.bashrc末尾加入如下行：

alias pc='proxychains4'
+

这样就可以使用 pc 来 指代 proxychains4，简化输入。

pc curl cip.cc
+

如果你使用 iTerm 的话可以配置快捷键来实现前缀补全功能

在 iTerm -> Preferences -> Profiles -> Keys 中，新建一个快捷键，例如 ⌥ + p ，Action 选择 Send Hex Code，键值为 0x1 0x70 0x63 0x20 0xd，保存生效。
+

更多的Hex Code可以到 manytricks (opens new window) 上查找。

使用场景：敲了一长串的命令后想使用代理功能时，就可以直接使用快捷键 ⌥ + p ，这样就会自动在命令的最前面加上 pc

# 测试

proxychains4 curl cip.cc
+
+// 如果你设置了别名的话可以使用 pc 指代 proxychains4
+pc curl cip.cc
+

可以看到这就代理上了

IP	: xxx.xxx.xxx.xxx
+地址	: 美国  加利福尼亚州  洛杉矶
+运营商	: it7.net
+
+数据二	: 美国
+
+数据三	: 美国加利福尼亚洛杉矶
+
+URL	: http://www.cip.cc/xxx.xxx.xxx.xxx
+
+ +
+
#FQ#Terminal
FQ-各平台终端设置代理的方法

FQ-各平台终端设置代理的方法→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/37adf1/index.html b/pages/37adf1/index.html new file mode 100644 index 000000000..0b6a13204 --- /dev/null +++ b/pages/37adf1/index.html @@ -0,0 +1,131 @@ + + + + + + Kotlin - 运算符与中缀表达式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-18
目录

Kotlin - 运算符与中缀表达式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 基本运算符

常见的基本运算符有 +-*/%^? ，在 Kotlin 中，这些运算符都会有对应的具名函数：

表达式 翻译为
a + b a.plus(b)
a - b a.minus(b)
a * b a.times(b)
a / b a.div(b)
a % b a.rem(b)、 a.mod(b) （已弃用）
a..b a.rangeTo(b)

除此之处，还有一些常用的操作符（统称运算符），例如 in、[]、() 等：

表达式 翻译为
a in b b.contains(a)
a !in b !b.contains(a)
a[i] a.get(i)
a() a.invoke()

了解更多操作符对应的具名函数，请点击：https://www.kotlincn.net/docs/reference/operator-overloading.html (opens new window)

# 操作符重载

根据 Kotlin 官网给出的操作符和与之对应的具名函数，我们可以自定义一个计算复数的类 Complex ：

class Complex(var real: Double, var imaginary: Double) {
+    // 复数相加：实部与虚部分别相加
+    operator fun plus(other: Complex): Complex {
+        return Complex(real + other.real, imaginary + other.imaginary)
+    }
+
+    // 复数与整数相加，只处理实部
+    operator fun plus(other: Int): Complex {
+        return Complex(real + other, imaginary)
+    }
+
+    // 复数使用()时，求弦长（三角形的斜边长度）
+    operator fun invoke(): Double {
+        return Math.hypot(real, imaginary)
+    }
+
+    override fun toString(): String {
+        return "$real + ${imaginary}i"
+    }
+}
+
+fun main() {
+    val c1 = Complex(3.0, 4.0) // 3 + 4i
+    val c2 = Complex(2.0, 7.5) // 2 + 7.5i
+    println(c1 + c2) // 5.0 + 11.5i
+    println(c1 + 2) // 5.0 + 4.0i
+    println(c1()) // 5.0
+}
+

一个类的同名运算符重载是可以有多个的，但参数类型或返回值类型要有所区别。

  • 何类都可以定义或重载父类的基本运算符
  • 运算符重载是通过重载与运算符对应的具名函数来定义
  • 运算符重载对参数个数作要求，对参数和返回值类型不作要求
  • 不能像 Scala 那样定义任意运算符,如：$在 Kotlin 中就没有与之对应的具名函数。

# 中缀表达式

上面已经说到了，Kotlin 不能像 Scala 那样定义任意运算符，那有没有办法定义一种具名函数，使其代码的书写跟运算符一样的呢？答案是：使用中缀表达式。

class Book {
+    infix fun on(any: Any?): Boolean {
+        return false
+    }
+}
+
+class Desktop
+
+fun main() {
+    val book = Book()
+    val desktop = Desktop()
+    // println(book.on(desktop)) // 中缀表达式 本质还是函数
+    println(book on desktop)
+}
+
  • 中缀表达式是 只有一个参数，且用 infix 修饰 的函数
  • 中缀表达式的作用是让函数调用时，可以省略 . 和 ()

中缀表达式一般只用于 dsl，滥用反而会让代码变得不够清晰。

+ +
+
#operator#infix
Kotlin - 类成员
Kotlin - 分支与循环

+ ← + Kotlin - 分支与循环→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/39525c/index.html b/pages/39525c/index.html new file mode 100644 index 000000000..946d1388b --- /dev/null +++ b/pages/39525c/index.html @@ -0,0 +1,221 @@ + + + + + + Kotlin - 属性代理 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-30
目录

Kotlin - 属性代理

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 自定义属性代理

代理也叫委托，Kotlin 支持属性代理，把一个属性的获取与赋值交给一个“中介”(下称 Delegate)去管理，属性代理的语法是： val/var <属性名>: <类型> by <表达式> ，by 后面是 Delegate 对象，被代理属性的 get()和 set() 会给 Delegate 对象对应的 getValue() 和 setValue() 分别代理，因此 Delegete 可以这么写：

注意：Delegate 并不需要实现任何接口，仅需提供 getValue() 和 setValue() 即可。

class Delegate {
+    private var _value: String? = null
+
+    operator fun getValue(thisRef: Any?, property: KProperty<*>): String {
+        println("getValue() thisRef=$thisRef, property=${property.name}")
+        return _value ?: ""
+    }
+
+    operator fun setValue(thisRef: Any?, property: KProperty<*>, value: String) {
+        println("setValue() thisRef=$thisRef, property=${property.name}, value=$value")
+        _value = value
+    }
+}
+

该 Delegate 的 getValue() 和 setValue() 方法对自己的 _value 属性进行获取与赋值，并分别在这 2 个方法中打印输出各参数值，下面我们将一个类成员属性交给 Delegate 对象代理：

class Animal {
+    var name: String by Delegate()
+}
+fun main() {
+    val animal = Animal()
+    animal.name = "旺财" // setValue() thisRef=com.charylin.kotlinlearn.Animal@1b28cdfa, property=name, value=旺财
+    println(animal.name) // getValue() thisRef=com.charylin.kotlinlearn.Animal@1b28cdfa, property=name
+                    　　　// 旺财
+}
+

当代理属性被赋值与访问时，就会输出 Delegate 对象 setValue() 和 getValue() 中的日志，从输出的日志可以看出，thisRef 是代理属性的实例对象，property 是代理属性的包装。可见，属性代理相比单纯的属性操作更加强大，在某些场景下，属性值的访问会比较复杂，如文件或 Redis，属性代理可以将文件或 Redis 的操作全部交给 Delegate 完成，而业务代码不需要知道具体实现，这对代码解耦与简化很有帮助。

# 延迟属性 lazy

Kotlin 官方提供了 lazy 代理，可以延迟初始化 val 常量，且只会初始化一次：

class Animal {
+    val age: Int by lazy {
+        println("设置age")
+        18　// lambda表达式会把最后语句的执行结果作为返回值
+    }
+}
+fun main() {
+    val animal = Animal()
+    println(animal.age) // 设置age
+                        // 18
+    println(animal.age) // 18
+}
+

可以看到 println("设置age") 只被输出了一次，这是怎么办到的呢？按住 ctrl ＋鼠标左键，点击 lazy 查看源代码：

// LazyJVM.kt
+public actual fun <T> lazy(initializer: () -> T): Lazy<T> = SynchronizedLazyImpl(initializer)
+

lazy() 函数需要传入一个 lambda 表达式，返回值是 Lazy<T>，返回结果 SynchronizedLazyImpl(initializer) 就是 Lazy<T> 的实现类对象，我们知道 by 后面接的是 Delegate 对象，lazy() 函数返回的 SynchronizedLazyImpl 就是真正的 Delegate ，再来看看 Lazy 与 SynchronizedLazyImpl 的源代码：

// Lazy.kt
+public interface Lazy<out T> {
+    public val value: T
+    ...
+}
+
+// LazyJVM.kt
+private class SynchronizedLazyImpl<out T>(initializer: () -> T, lock: Any? = null) : Lazy<T>, Serializable {
+    private var initializer: (() -> T)? = initializer
+    @Volatile private var _value: Any? = UNINITIALIZED_VALUE
+    ...
+
+    override val value: T
+        get() {
+            val _v1 = _value
+            if (_v1 !== UNINITIALIZED_VALUE) {
+                // 已经初始化过了，直接返回
+                return _v1 as T
+            }
+
+            return synchronized(lock) {
+                ...
+                // 执行initializer()初始化_value值
+                val typedValue = initializer!!()
+                _value = typedValue
+                initializer = null
+            }
+        }
+    ...
+}
+

SynchronizedLazyImpl 重写了 value 属性的 getter 方法，其中会判断 value 是否有初始化过，已经初始化就直接返回结果，未初始化才执行 initializer，所以，这就是 by lazy{} 的初始化逻辑只会执行一次的原因。前面说过，Delegate 对象需要有 getValue() 和 setValue() 方法，那么 Lazy 的这 2 个方法在哪呢？按住 ctrl ＋鼠标左键，点击 by 可以找到：

// Lazy.kt
+@kotlin.internal.InlineOnly
+public inline operator fun <T> Lazy<T>.getValue(thisRef: Any?, property: KProperty<*>): T = value
+

发现，Lazy 只有 getValue()，没有 setValue()，这不难理解，var 变量延迟初始化使用的是 lateinit，val 常量使用的 by lazy，val 常量不可修改，所以不需要提供 setValue()。

# 可观察属性 Observable

除了 by lazy 外，Kotlin 为还提供了可观察属性 Observable，这个属性代理可以监听属性值的变化，需要通过 by Delegates.observable() 来设置，这是 Delegates.observable() 的源码，具体实现就不深入了，该函数要求传入 2 个参数，分别是初始值 initialValue 和用于监听值变化的 lambda 表达式：

// Delegates.kt
+public object Delegates {
+    /**
+    * Returns a property delegate for a read/write property that calls a specified callback function when changed.
+    * @param initialValue the initial value of the property.
+    * @param onChange the callback which is called after the change of the property is made. The value of the property
+    *  has already been changed when this callback is invoked.
+    *
+    *  @sample samples.properties.Delegates.observableDelegate
+    */
+    public inline fun <T> observable(initialValue: T, crossinline onChange: (property: KProperty<*>, oldValue: T, newValue: T) -> Unit):
+            ReadWriteProperty<Any?, T> =
+        object : ObservableProperty<T>(initialValue) {
+            override fun afterChange(property: KProperty<*>, oldValue: T, newValue: T) = onChange(property, oldValue, newValue)
+        }
+    ...
+}
+

下面我们来使用 Delegates.observable() 监听属性值的变化：

class Animal {
+    var gender: Boolean by Delegates.observable(true) { prop, old, new ->
+        println("prop = ${prop.name}, old = $old, new = $new")
+    }
+}
+
+fun main() {
+    val animal = Animal()
+    println(animal.gender) // true
+    animal.gender = false // prop = gender, old = true, new = false
+    println(animal.gender) // false
+}
+

可以看到，当修改了属性值时，会触发 Delegates.observable() 参数 2 的 lambda 表达式，输出了相应的日志信息，随后属性值也发生了改变。Kotlin 还提供了 Delegates.vetoable() 可观察属性代理，vetoable 比 observable 要强大一点，它除了能监听属性值变化，还可以控制属性是否要修改，通过查看 Delegates.vetoable() 源码注释可以知道，其参数 2 的 lambda 表达式（也就是 callback）返回值将决定属性值是否被更新：

// Delegates.kt
+public object Delegates {
+    /**
+     * Returns a property delegate for a read/write property that calls a specified callback function when changed,
+     * allowing the callback to veto the modification.
+     * @param initialValue the initial value of the property.
+     * @param onChange the callback which is called before a change to the property value is attempted.
+     *  The value of the property hasn't been changed yet, when this callback is invoked.
+     *  If the callback returns `true` the value of the property is being set to the new value,
+     *  and if the callback returns `false` the new value is discarded and the property remains its old value.
+     *
+     *  @sample samples.properties.Delegates.vetoableDelegate
+     *  @sample samples.properties.Delegates.throwVetoableDelegate
+     */
+    public inline fun <T> vetoable(initialValue: T, crossinline onChange: (property: KProperty<*>, oldValue: T, newValue: T) -> Boolean):
+            ReadWriteProperty<Any?, T> =
+        object : ObservableProperty<T>(initialValue) {
+            override fun beforeChange(property: KProperty<*>, oldValue: T, newValue: T): Boolean = onChange(property, oldValue, newValue)
+        }
+    ...
+}
+

我们将上面例子中的 gender 属性代理修改成 Delegates.vetoable()，并在 callback 中返回 false，以阻止属性值的修改：

class Animal {
+    var gender: Boolean by Delegates.vetoable(true) { prop, old, new ->
+        println("prop = ${prop.name}, old = $old, new = $new")
+        false // lambda表达式最后语句的结果作为返回值
+    }
+}
+
+fun main() {
+    val animal = Animal()
+    println(animal.gender) // true
+    animal.gender = false // prop = gender, old = true, new = false
+    println(animal.gender) // true
+}
+

至此属性代理的原理及常用属性代理就讲解完了，如需了解更多属性代理的应用，请点击：https://www.kotlincn.net/docs/reference/delegated-properties.html (opens new window)

+ +
+
#by lazy#Delegates.observable#Delegates.vetoable
Kotlin - 扩展成员
Kotlin - 数据类

+ ← + Kotlin - 数据类→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/398f01/index.html b/pages/398f01/index.html new file mode 100644 index 000000000..36b58f3ab --- /dev/null +++ b/pages/398f01/index.html @@ -0,0 +1,183 @@ + + + + + + iOS - 面向协议方式封装空白页功能 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-07
目录

iOS - 面向协议方式封装空白页功能

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

为了良好的交互体验，相信大家在对待scrollView无数据时的提示页都会使用一些第三方来定制，最典型的就是使用DZNEmptyDataSet (opens new window)。但是每个界面都写一堆与DZNEmptyDataSetDelegate，DZNEmptyDataSetSource相关的代码就不太好，那一般情况下自然的就会采用继承的方式来避免。而Swift除了可以面向对象编程，它还可以面向协议编程。那可不可以也用协议来解决情况呢？嘿嘿，这个可以有，那我们接下来就来试试怎么通过协议的方式来避免上述情况，并且实现一行代码添加空白页功能

# 前言

如果对面向协议有疑问的同学可以看下我之前的两篇文章

iOS - Swift 面向协议编程（一）

iOS - Swift 面向协议编程（二）

之前的文章中提到了，协议除了起规范作用，还有别一个用处，就是赋予能力。我们现在的目的就是让目标控制器或者目标视图在遵守我们的协议后，就可以有实现空白页的功能。

# 一、基本实现

# 1、创建协议

// MARK:- 空视图占位协议
+public protocol LXFEmptyDataSetable {
+    
+}
+

# 2、确定面向类

确定我们面向的类，一般tableView或者collectionView都是写在控制器里，那我们面向的类就规定为UIViewController，或许也有人写在UIView里，不过这里先按UIViewController来写吧

// MARK:- UIViewController - 空视图占位协议
+public extension LXFEmptyDataSetable where Self : UIViewController {
+    // 3、的实现的方法写在这里
+}
+

# 3、定义功能方法

将scrollView传递进来，让我们定义的方法来暗地里做些操作

func lxf_EmptyDataSet(_ scrollView: UIScrollView) {
+    scrollView.emptyDataSetDelegate = self
+    scrollView.emptyDataSetSource = self
+}
+

# 4、设置数据源和代理

在3、定义功能方法中将delegate和source设置为了self ，而协议是无法遵守再次遵守其它协议的，那让什么来遵守对应的协议呢？要明白这里的self指的是UIViewController,考虑到UIView的可能，这里我就让万物对象之父NSObject来遵守，并实现对应的数据源方法和代理方法

extension NSObject : DZNEmptyDataSetDelegate, DZNEmptyDataSetSource {
+    public func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
+        // 返回提示图片
+    }
+    public func title(forEmptyDataSet scrollView: UIScrollView!) -> NSAttributedString! {
+        // 设置富文本标题
+    }
+    public func verticalOffset(forEmptyDataSet scrollView: UIScrollView!) -> CGFloat {
+        // 设置纵向偏移
+    }
+}
+

# 二、定制空白页

通过上述步骤后，只要让UIViewController遵守我们的协议，再调用一下lxf_EmptyDataSet方法就可以实现数据空白页了。但是，这样直接写死的方式很不好，有时候一些场景是需要我们做出定制的，那怎么实现定制呢？协议又不能有自己的变量来存放我们的定制。

这里先做出一个限定，我们要使用重载方法来完成该功能，实现即可高定制，又可使用默认定制。

回到刚刚的话题，使用UserDefaults来实现可以吗？可以，但是比较麻烦，因为UserDefaults是单例，整个进程共用这一份资源，如果你当前controller遵守了我们的协议LXFEmptyDataSetable并做出了定制，那么当下一个controller在遵守协议后使用了默认定制时，那你要怎么办？还要区分scrollView，那就得保存当前scrollView，在退出当前controller后还要把对应的东西置空。好咯好咯，那你说到底要怎么搞才最合适？

解决方案：拓展UIScrollView！！！有没有发现？，非常地恰巧，我们定义的方法lxf_EmptyDataSet需要外界将UIScrollView传递进来，在DZNEmptyDataSet的数据源方法和代理方法也有scrollView。那让UIScrollView来携带我们的定制就好啦。

# 1、定义定制相关的枚举

这里我定义了常用的定制相关的枚举

public enum LXFEmptyDataSetAttributeKeyType {
+    /// 纵向偏移(-50)  CGFloat
+    case verticalOffset
+    /// 提示语(暂无数据)  String
+    case tipStr
+    /// 提示语的font(system15)  UIFont
+    case tipFont
+    /// 提示语颜色(D2D2D2)  UIColor
+    case tipColor
+    /// 提示图(LXFEmptyDataPic) UIImage
+    case tipImage
+    /// 允许滚动(true) Bool
+    case allowScroll
+}
+

# 2、拓展UIScrollView

为UIScrollView定义一个定制相关的属性字典

extension UIScrollView {
+    private struct AssociatedKeys {
+        static var lxf_emptyAttributeDict:[LXFEmptyDataSetAttributeKeyType : Any]?
+    }
+    /// 属性字典
+    var lxf_emptyAttributeDict: [LXFEmptyDataSetAttributeKeyType : Any]? {
+        get {
+            return objc_getAssociatedObject(self, &AssociatedKeys.lxf_emptyAttributeDict) as? [LXFEmptyDataSetAttributeKeyType : Any]
+        }
+        set {
+            objc_setAssociatedObject(self, &AssociatedKeys.lxf_emptyAttributeDict, newValue as [LXFEmptyDataSetAttributeKeyType : Any]?, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+        }
+    }
+}
+

# 3、完善lxf_EmptyDataSet方法

这里我们让外界通过闭包的方式来定制自己的空白页

// MARK:- UIViewController - 空视图占位协议
+public extension LXFEmptyDataSetable where Self : UIViewController {
+    func lxf_EmptyDataSet(_ scrollView: UIScrollView, attributeBlock: (()->([LXFEmptyDataSetAttributeKeyType : Any]))? = nil) {
+        scrollView.lxf_emptyAttributeDict = attributeBlock != nil ? attributeBlock!() : nil
+        scrollView.emptyDataSetDelegate = self
+        scrollView.emptyDataSetSource = self
+    }
+}
+

# 4、使用定制属性字典

这里以返回提示图片的方法为例吧

public func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
+    guard let tipImg = scrollView.lxf_emptyAttributeDict?[.tipImage] as? UIImage else {
+        return UIImage(named: "LXFEmptyDataPic")
+    }
+    return tipImg
+}
+

# 5、外界的使用姿势

class LXFEmptyDemoController: UIViewController {
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        initUI()
+    }
+}
+
+extension LXFEmptyDemoController: LXFEmptyDataSetable {
+    fileprivate func initUI() {
+        let tableView = UITableView()
+        // ...
+        
+        // 高定制
+        self.lxf_EmptyDataSet(tableView) { () -> ([LXFEmptyDataSetAttributeKeyType : Any]) in
+            return [
+                .tipStr:"哟哟哟",
+                .verticalOffset:-150,
+                .allowScroll: false
+            ]
+        }
+        
+        // 默认定制
+        // self.lxf_EmptyDataSet(tableView)
+    }
+}
+

大功告成

# 三、开源库

我对这个过程进行一次整理，并做成一个名为 LXFProtocolTool (opens new window) 的库并上传至gitHub。可以使用Cocoapods的方式来安装使用

pod 'LXFProtocolTool'
+

我也将 iOS - Swift 面向协议编程（二） 中提及的通过协议便捷加载xib的功能也集成了进来。大家可以根据自己的需要在Podfile写明要安装的功能

  • Xib加载
pod 'LXFProtocolTool/LXFNibloadable'
+
  • 空白视图
pod 'LXFProtocolTool/LXFEmptyDataSetable'
+

创建这个库的目的是为了通过协议的方式来方便快捷地实现一些的实用功能，目前功能不多，不过往后会逐渐增加，或许你有什么想实现的功能也可以提出来，喜欢的就给个Star鼓励下我吧 🚀 🚀 🚀

+ +
+
#iOS#Swift
iOS - Swift 高仿微信
iOS - 打造Moya便捷解析库，提供RxSwift拓展

+ ← + iOS - 打造Moya便捷解析库，提供RxSwift拓展→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/399558/index.html b/pages/399558/index.html new file mode 100644 index 000000000..af41631d9 --- /dev/null +++ b/pages/399558/index.html @@ -0,0 +1,91 @@ + + + + + + RePlugin集成Fresco | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-05

RePlugin集成Fresco

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# Fresco版本说明

目前fresco最新版本2.3.0，但无法直接在插件中集成

  • 从1.14开始要求使用AndroidX ，向下选择1.13.0

  • 从1.10.0开始没有armeabi, 向下选择1.9.0

  • 从1.8.0开始强制使用SoLoader，向下选择1.7.1

# 插件集成Fresco遇到的问题

这里需要重点说明一下SoLoader问题，fresco在1.8.0版本开始，就使用SoLoader替换了SoLoaderShim，原文：

SoLoader has been released for a while now, and updated just last week. We've made the decision to add a hard dependency on it and make SoLoader the one and only native code loader that we use in Fresco. API-wise, this means SoLoaderShim is gone. If you were using some other native loading library (e.g. ReLinker), you can either:

keep both and just delete your SoLoaderShim implementation, but this will make your APK size bigger +switch to SoLoader for the rest of your app as well and remove the other dependency

插件中的SoLoader在加载时会使用到一个宿主无权操作的路径：/data/user/0/插件包名/lib-main（但这个路径并不存在！），导致宿主在加载插件时，直接报错，因此插件并不会成功启动。

# 插件集成Fresco的解决方案

解决办法有2种：

  • 方案1：fresco降级，使用1.7.1版本。

  • 方案2：宿主compile fresco，插件provided fresco。

方案2需要修改fresco源码，因为provided不支持依赖aar，详情见：https://mp.weixin.qq.com/s/ICjLCTWIeHy58ayp_cEvSQ。

方案2示例中没有具体的操作步骤说明，感觉去折腾Fresco的源码也有点麻烦，1.7.1跟1.9.0相差似乎也不是很大。所以，最终选择方案一，在插件工程中集成1.7.1版本的Fresco：

compile "com.facebook.fresco:fresco:1.7.1"
+

有时间了再回头研究怎么使用方案2集成～

+ +
+
#插件化#RePlugin
DroidPlugin手札 - home键强杀处理
RePlugin强制退出App

+ ← + RePlugin强制退出App→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/3a12b8/index.html b/pages/3a12b8/index.html new file mode 100644 index 000000000..50be81f18 --- /dev/null +++ b/pages/3a12b8/index.html @@ -0,0 +1,275 @@ + + + + + + uniapp - tensorflowjs 之小程序环境集成 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-04-08
目录

uniapp - tensorflowjs 之小程序环境集成

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简介

tensorflowjs（简称 tfjs）是一个用于使用 JavaScript 进行机器学习开发的库。以下是 tfjs 的官网与 github 仓库：

本系列主要记录如何在微信小程序环境下集成使用 tfjs，作为本系列的开篇，也是后续篇章的基础，讲解工程环境集成，喜欢的请点赞关注收藏~

# 二、集成环境

官方说 tfjs 是谷歌开发的机器学习开源项目，致力于为 javascript 提供利用硬件加速的机器学习模型训练和部署。这句话中，硬件加速 这 4 个字是重点，机器学习涉及到大量运算，靠 js 的运算效率（cpu）是达不到理想效果的，所以需要借助额外的技术来提升运算速度，tfjs 使用的 硬件加速 技术有以下两种：

  • webgl：基于 OpenGL 的 js 接口实现，采用 GPU 加速。
  • wasm（WebAssembly）：是一种运行在现代网络浏览器中的新型代码，提供了一种在网络平台以接近本地速度的方式运行多种语言（诸如 C、C++和 Rust 等低级源语言）编写的代码。

注：上述描述摘抄自 维基百科、MDN。

以上两种 web 技术在微信小程序上都有对应的实现和支持。tfjs 对这些 硬件加速 统称为后端（backend），相对应的，分为 webgl后端、wasm 后端，这里暂且不管使用哪种硬件加速技术，我们需要先安装一个微信小程序插件，用来初始化 tfjs。

# 1、添加插件

tfjs 官方封装了一个微信小程序插件 tfjsPlugin，开发者只需按文档步骤集成即可，以下是该小程序插件的仓库及介绍：

注：该插件利用小程序 WebGL API 给第三方小程序调用时提供 GPU 加速。

在使用该插件之前，需要在小程序管理后台，按 "设置-第三方设置-添加插件" 步骤，输入 wx6afed118d9e81df9 找到插件并添加：

# 2、注册插件

uniapp 工程需要在 manifest.json 文件中，找到 mp-weixin 配置项，添加 plugins 信息进行插件注册：

  /* 小程序特有相关 */
+  "mp-weixin": {
+    ...
+    "plugins": {
+      "tfjsPlugin": {
+        "version": "0.2.0",
+        "provider": "wx6afed118d9e81df9"
+      }
+    },
+    "usingComponents": true
+  },
+

注：当前该插件的最新版本是 0.2.0 发布于 2021-04-29 12:40:00。这个库已经很久没更新了，不过目前使用上也没遇到什么大问题~

# 3、添加 tfjs 依赖

经过以上两步之后，工程就可以使用 tfjsPlugin 插件了，在此之前，还有几个 npm 库需要安装：

"@tensorflow/tfjs-backend-webgl": "^3.13.0",
+"@tensorflow/tfjs-converter": "^3.13.0",
+"@tensorflow/tfjs-core": "^3.13.0",
+"fetch-wechat": "^0.0.3",
+
  • @tensorflow/tfjs-backend-webgl：webgl 后端
  • @tensorflow/tfjs-converter：GraphModel 导入和执行包
  • @tensorflow/tfjs-core：基础包
  • fetch-wechat：Polyfill fetch 函数

其中 fetch-wechat 最新版本是 0.0.3，直接使用 npm i fetch-wechat 命令安装，而且另外 3 个 @tensorflow/tfjs-xxx 库最新版本是 4.4.0，需要使用 npm i @tensorflow/tfjs-xxx@^3.13.0 命令指定版本安装。之所以不使用最新的 4.4.0 版本，是因为运行时会报如下错误：

TypeError: env(...).platform.isTypedArray is not a function
+

搜索一番，没找到任何有用的解决方案，不清楚是不是当前 tfjsPlugin 插件太久没更新，没有适配 4.x 的缘故？不过呢，目前 3.13.0 版本已经非常稳定了，不用太纠结~

# 三、webgl 后端

集成环境之后，就可以来初始化并使用 tfjs 了，下面我们来配置 tfjsPlugin 插件，开启 webgl 硬件加速。

# 1、初始化插件

在 App.vue 文件中，找到 onLaunch() 回调函数，初始化 tfjsPlugin 插件，代码如下：

import { fetchFunc } from "fetch-wechat";
+import * as tf from "@tensorflow/tfjs-core";
+import * as webgl from "@tensorflow/tfjs-backend-webgl";
+const plugin = requirePlugin("tfjsPlugin");
+
+const ENABLE_DEBUG = true; // 是否开启debug，输出调试日志
+
+onLaunch(() => {
+  initTfjs();
+});
+
+function initTfjs() {
+  plugin.configPlugin(
+    {
+      // polyfill fetch function
+      fetchFunc: fetchFunc(),
+      // inject tfjs runtime
+      tf,
+      // inject webgl backend
+      webgl,
+      // provide webgl canvas
+      canvas: uni.createOffscreenCanvas({}),
+      // backendName: "wechat-webgl-" + Date.now(),
+    },
+    ENABLE_DEBUG
+  );
+}
+

注：没有限定必须在 App.vue 的 onLaunch() 中初始化，只要在使用 tfjs 相关 API 之前初始化都可以。

在上述代码中，给插件函数 plugin.configPlugin() 传入了一个初始化对象，其中指定了 webgl 和 canvas 这两个属性，之后，插件就会自动开启 webgl 硬件加速。

# 2、解决 requirePlugin 报错

如果你的 uniapp 工程使用了 typescript ，那么上述代码中 requirePlugin("tfjsPlugin") 处会有红线报错：

Cannot find name 'requirePlugin'.ts(2304)
+

此处报错是因为 ts 不认识 requirePlugin() 函数，解决这个问题有两种方法：

  • 自定义 requirePlugin 函数声明
  • 配置微信小程序官方 types

# 1）自定义 requirePlugin 函数声明

在工程的 env.d.ts 文件中，追加如下声明即可：

declare function requirePlugin(pluginName: string): any;
+

注：在工程 src 目录下的任意 d.ts 文件中声明都是可以的，我习惯将自定义声明写在 env.d.ts 文件中。

声明之后，报错就消失了，这种方法简单粗暴。

# 2）配置微信小程序官方 types

安装 types：

npm install @types/wechat-miniprogram -D
+

配置 tsconfig.json：

{
+  ...
+  "compilerOptions": {
+    ...
+    "types": ["@dcloudio/types", "@types/wechat-miniprogram"]
+  },
+}
+

这种方法很优雅，但其实官方 types 中的声明跟我们自己声明的完全一样，用哪种方法都可以~

# 3、测试

tfjsPlugin 插件初始化的同时，也会把 tfjs 初始化好，接下来就可以使用 tfjs 的 API 了：

import * as tf from "@tensorflow/tfjs-core";
+
+console.log(tf.getBackend()); // wechat-webgl
+tf.tensor([1, 2, 3, 4]).print(); // Tensor [1, 2, 3, 4]
+

如果集成环境与插件初始化都没问题的话，那么 tf.getBackend() 拿到的后端字符串就是 wechat-webgl，否则为 undefined，并且 tf.tensor() 会报错 Error: No backend found in registry.。至此，使用 webgl 后端的 tfjs 就可以正常使用了。

# 四、wasm 后端

上面已经成功开启了 webgl 后端，下面我们来探索如何开启 wasm 后端。几年前，微信小程序在 Android 手机上提供了 WebAssembly 的支持，但后来又废弃了，改为一个类似 WebAssembly 的 WXWebAssembly，以下是 WXWebAssembly 的相关链接：

# 1、环境集成

要想使用 wasm 后端，还需要安装一个 tfjs 的 wasm 后端依赖：

npm i @tensorflow/tfjs-backend-wasm@^3.13.0
+

此外，因为 WXWebAssembly 目前只支持加载包内 wasm 文件（即 网络链接，或者下载后的本地链接都不行），所以还需要把 node_modules/@tensorflow/tfjs-backend-wasm/wasm-out 目录中的 tfjs-backend-wasm.wasm 文件复制到工程 static 目录下（放其他目录的话，编译时可能会被自动过滤掉），然后给 tfjs 关联一下 wasm 文件路径：

import { setWasmPaths } from "@tensorflow/tfjs-backend-wasm";
+
+const usePlatformFetch = true;
+setWasmPaths(
+  {
+    "tfjs-backend-wasm.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-threaded-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+  },
+  usePlatformFetch
+);
+

其中 simd.wasm 和 threaded-simd.wasm 是性能增强版的 wasm 文件，关于它们之间的性能对比，可以看下面这篇文章：

虽然但是，这些性能增强的 wasm 文件在微信小程序环境下运行存在兼容性问题，所以这里全部指定为最原始的 wasm 文件；另外，这些 wasm 文件必须放在小程序包内，会增大小程序包体大小，如果对包体大小有较高要求，还需要去了解如何拆分或压缩 wasm 文件。

# 2、初始化插件

将所需的依赖和 wasm 文件集成好之后，就可以来初始化 tfjsPlugin 插件并开启 wasm 后端了，完整代码如下：

import { fetchFunc } from "fetch-wechat";
+import * as tf from "@tensorflow/tfjs-core";
+import { setWasmPaths } from "@tensorflow/tfjs-backend-wasm";
+const plugin = requirePlugin("tfjsPlugin");
+
+const ENABLE_DEBUG = false;
+const usePlatformFetch = true;
+setWasmPaths(
+  {
+    "tfjs-backend-wasm.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-threaded-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+  },
+  usePlatformFetch
+);
+
+onLaunch(() => {
+  console.log("App Launch");
+  initTfjs();
+});
+
+function initTfjs() {
+  plugin.configPlugin(
+    {
+      // polyfill fetch function
+      fetchFunc: fetchFunc(),
+      // inject tfjs runtime
+      tf,
+      // // inject webgl backend
+      // webgl,
+      // // provide webgl canvas
+      // canvas: uni.createOffscreenCanvas({}),
+      // backendName: "wechat-webgl-" + Date.now(),
+    },
+    ENABLE_DEBUG
+  );
+
+  tf.setBackend("wasm").then(() => {
+    console.log(tf.getBackend()); // wasm
+    tf.tensor([1, 2, 3, 4]).print(); // Tensor [1, 2, 3, 4]
+  });
+}
+

注：plugin.configPlugin() 参数对象中的 webgl 和 canvas 这两个属性不注释掉也是可以的，不影响，这个文章末尾解释。

上述代码中，tf.setBackend("wasm") 是最关键的代码，顾名思义，它的作用就是修改 tfjs 的硬件加速后端为 wasm，其返回结果是一个 Promise，即异步操作，需要等待操作完成后，才能调用 tfjs 相关 API，否则会报错。

# 3、解决 wasm 报错

实际上，按照上述步骤还不能成功运行程序，控制台会报如下错误：

Error: The highest priority backend 'wasm' has not yet been initialized. Make sure to await tf.ready() or await tf.setBackend() before calling other methods
+

这是一个大坑，很多人按照官方仓库 tfjs-wechat 的说明文档操作，可是死活也没办法成功开启 wasm 后端，这是因为微信小程序把 WebAssembly 废弃，改为 WXWebAssembly，而 tfjs-backend-wasm 这个库中的代码还是使用的 WebAssembly，所以 wasm 后端是不可能初始化成功的。

在 tfjs 的官方仓库 issue 中找到一个解决方法：

他的解决思路是编写一个 rollup 插件，将编译代码中的 WebAssembly 相关部分，修改为 WXWebAssembly，uniapp 的 vue3 工程使用的是 vite，我们知道 vite 是兼容 rollup 的，所以可以直接在工程的 vite.config.ts 文件中使用此插件，代码如下：

import { defineConfig } from "vite";
+import uni from "@dcloudio/vite-plugin-uni";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [uni(), codeTransform()],
+});
+
+function codeTransform() {
+  return {
+    name: "codeTransform",
+    transform(code, file) {
+      // 修复wasm
+      if (
+        file.endsWith("tfjs-backend-wasm-threaded-simd.worker.js") ||
+        file.endsWith("tfjs-backend-wasm-threaded-simd.js")
+      ) {
+        code = code.replace(`require("worker_threads")`, "null");
+        code = code.replace(`require("perf_hooks")`, "null");
+      }
+      if (file.endsWith("backend_wasm.js")) {
+        code = code.replace(`env().getAsync('WASM_HAS_SIMD_SUPPORT')`, "false");
+        code = code.replace(
+          `env().getAsync('WASM_HAS_MULTITHREAD_SUPPORT')`,
+          "false"
+        );
+        code = code.replace(
+          `return (imports, callback) => {`,
+          `return (imports, callback) => {
+            WebAssembly.instantiate(path, imports).then(output => {
+                callback(output.instance, output.module);
+            });
+            return {};`
+        );
+      }
+      code = code.replace(`WebAssembly.`, `WXWebAssembly.`);
+      code = code.replace(`typeof WebAssembly`, `typeof WXWebAssembly`);
+      return { code };
+    },
+  };
+}
+

工程重新编译运行之后（让插件生效），就可以正常开启 wasm 后端了。

# 五、其他

此处再对 tfjs 后端做一些补充，本系列代码会同步保存到 github 仓库上：

# 1、动态修改后端

有一点需要明白，插件的 plugin.configPlugin() 初始化函数，它只是一个配置，不管你使用哪个后端，都可以配置上 webgl 和 canvas 这 2 个属性，而 tf.setBackend() 也只是指定 tfjs 后端的一个 API 罢了，如果没有调用，则默认使用 webgl 后端，所以，只要提前配置好 webgl 参数 和 wasm 路径，那么在程序运行时，是可以做到动态修改后端的：

setWasmPaths(
+  {
+    "tfjs-backend-wasm.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+    "tfjs-backend-wasm-threaded-simd.wasm": "/static/tfjs-backend-wasm.wasm",
+  },
+  usePlatformFetch
+);
+
+async function initTfjs() {
+  plugin.configPlugin(
+    {
+      // polyfill fetch function
+      fetchFunc: fetchFunc(),
+      // inject tfjs runtime
+      tf,
+      // inject webgl backend
+      webgl,
+      // provide webgl canvas
+      canvas: uni.createOffscreenCanvas({}),
+      // backendName: "wechat-webgl-" + Date.now(),
+    },
+    ENABLE_DEBUG
+  );
+
+  await tf.setBackend("wasm");
+  console.log(tf.getBackend()); // wasm
+  tf.tensor([1, 2, 3, 4]).print(); // Tensor [1, 2, 3, 4]
+
+  await tf.setBackend("wechat-webgl");
+  console.log(tf.getBackend()); // wechat-webgl
+  tf.tensor([1, 2, 3, 4]).print(); // Tensor [1, 2, 3, 4]
+}
+

# 2、对比

既然 tfjs 有 webgl 后端和 wasm 后端，那应该使用哪个比较好呢？首先 iOS 的系统环境相差不大，而且目前 WXWebAssembly 对 iOS 平台的支持不如 Android 平台完善，建议统一使用 webgl 后端；其次再来说说 Android 平台，Android 因其开放性，国内 Android 手机厂商会进行个性化定制，甚至有的会进行魔改，所以情况会比较复杂，从我个人目前收集到的资料和反馈来看，优先使用 webgl 后端，大部分的 Android 手机使用 webgl 后端比使用 wasm 后端性能要高得多，个别手机厂商（比如华为）则相反，甚至使用 webgl 后端会出现 tfjs 无法正常使用的情况，建议程序运行时要适当判断机型调整后端，或者界面上提供切换后端的功能。

+ +
+
#uniapp#小程序#tensorflowjs#tfjs#小程序插件
uniapp - 接入科大讯飞语音评测
vite - 多渠道差异化打包插件

+ ← + vite - 多渠道差异化打包插件→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/3b59d7/index.html b/pages/3b59d7/index.html new file mode 100644 index 000000000..46ec845b9 --- /dev/null +++ b/pages/3b59d7/index.html @@ -0,0 +1,227 @@ + + + + + + Kotlin - 改良设计模式 - 责任链模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-16
目录

Kotlin - 改良设计模式 - 责任链模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 责任链模式 +
    • 作用：避免请求的发送者和接收者之间的耦合关系，将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。
    • 举例：OKHttp 的拦截器、Servlet 中的 FilterChain

# 二、使用责任链模式

  • 例子：学生会经费申请
  • 重点：1 个请求会在 n 个处理器组成的处理器链上传递

以学生会经费申请会例，学生会会有一些日常开销以及活动开支，需要向学院的学生会基金申请经费，如果金额在 100 元之内，由分部长审批；如果金额在 100 到 500 元之间，由会长审批；如果金额在 500 到 1000 元之间，由学院辅导员审批；而如果金额超过 1000 元，则默认打回申请。像这种需要一层层往后传递请求的情况，非常适合采用责任链模式来设计程序：

/**
+ * 经费申请事件
+ *
+ * @author GitLqr
+ */
+data class ApplyEvent(val money: Int, val title: String)
+
+/**
+ * 经费审批处理器
+ *
+ * @author GitLqr
+ */
+interface ApplyHandler {
+    val successor: ApplyHandler?
+    fun handleEvent(event: ApplyEvent)
+}
+

注意：责任链模式需要将处理器对象连成一条链，最简单粗暴的方式就是让前驱处理器持有后继处理器 successor

接着，根据案例需要，编写各个角色对应的处理器类：

/**
+ * 部长
+ *
+ * @author GitLqr
+ */
+class GroupLeader(override val successor: ApplyHandler?) : ApplyHandler {
+    override fun handleEvent(event: ApplyEvent) {
+        when {
+            event.money <= 100 -> println("Group Leader handled application: ${event.title}.")
+            successor != null -> successor.handleEvent(event)
+            else -> println("Group Leader: This application cannot be handled.")
+        }
+    }
+}
+
+/**
+ * 会长
+ *
+ * @author GitLqr
+ */
+class President(override val successor: ApplyHandler?) : ApplyHandler {
+    override fun handleEvent(event: ApplyEvent) {
+        when {
+            event.money <= 500 -> println("President handled application: ${event.title}.")
+            successor != null -> successor.handleEvent(event)
+            else -> println("President: This application cannot be handled.")
+        }
+    }
+}
+
+/**
+ * 学院
+ *
+ * @author GitLqr
+ */
+class College(override val successor: ApplyHandler?) : ApplyHandler {
+    override fun handleEvent(event: ApplyEvent) {
+        when {
+            event.money <= 1000 -> println("College handled application: ${event.title}.")
+            successor != null -> successor.handleEvent(event)
+            else -> println("College: This application cannot be handled.")
+        }
+    }
+}
+

最后，创建各个角色处理器实例，并按顺序组成一条链，由链头开始接收、转发需要被处理的经费申请事件：

// 使用
+// val college = College(null)
+// val president = President(college)
+// val groupLeader = GroupLeader(president)
+val groupLeader = GroupLeader(President(College(null)))
+groupLeader.handleEvent(ApplyEvent(10, "buy a pen")) // 买只钢笔
+groupLeader.handleEvent(ApplyEvent(200, "team building")) // 团建
+groupLeader.handleEvent(ApplyEvent(600, "hold a debate match")) // 举行辩论赛
+groupLeader.handleEvent(ApplyEvent(1200, "annual meeting of the college")) // 学院年会
+
+// 输出
+Group Leader handled application: buy a pen.
+President handled application: team building.
+College handled application: hold a debate match.
+College: This application cannot be handled.
+

从输出结果可以看到，经费申请事件会在处理器链上传递，直到被一个合适的处理器处理并终止。

注意：这话是针对当前案例说的，责任链模式没有硬性要求一个请求只能被一个处理器处理，你可以在前面的处理器中对请求进行加工，提取数据等等操作，并且可以选择是否放行，交由后面的处理器继续处理，这需要根据实际情况，灵活应变。

# 三、改良责任链模式

  • 例子：学生会经费申请
  • 重点：偏函数 Partial Function

在对上述案例进行改良之前，我们先来了解一下偏函数是什么，在不同的编程语言中，对偏函数的理解还不一样，在 Python 中，偏函数是使用 functools.partial 把一个函数的某些参数给固定住（也就是设置默认值），返回一个新的函数，调用这个新函数会更简单。而在 Scala 中，偏函数是使用 PartialFunction 构建一个仅仅处理输入参数的部分分支的函数，换句话说，就是带有判断条件的函数，只有满足条件的参数，才会被函数处理。

以上结论来自以下两篇文章：

题外话：对 Scala 偏函数有兴趣的可以看一下上面的文章，写的很通透。

回过头来，责任链模式的核心机理是，整个链条上的每个处理环节都有对其输入的校验标准，当输入的参数处于某个责任链节的有效接收范围之内，该环节才能对其做出正常的处理操作。那么，我们是不是可以把链条上的每个处理环节看做是一个个的偏函数呢？是的，不过 Kotlin 中并没有内置偏函数 API，好在有一个第三方 Kotlin 函数库【funKTionale】 (opens new window)，其中的 partialfunctions.kt 就有 Scala 中偏函数的类似实现：

// https://github.com/MarioAriasC/funKTionale/blob/master/funktionale-utils/src/main/kotlin/org/funktionale/utils/partialfunctions.kt
+
+class PartialFunction<in P1, out R>(private val definetAt: (P1) -> Boolean, private val f: (P1) -> R) : (P1) -> R {
+    override fun invoke(p1: P1): R {
+        if (definetAt(p1)) {
+            return f(p1)
+        } else {
+            throw IllegalArgumentException("Value: ($p1) isn't supported by this function")
+        }
+    }
+
+    fun isDefinedAt(p1: P1) = definetAt(p1)
+}
+

这个 PartialFunction 类第一眼看上去感觉好复杂，分成如下几步，方便理解：

  • PartialFunction 继承自一个函数类型 (P1) -> R，编译器会强制要求实现 invoke() 方法，这意味着 PartialFunction 实例对象可以像调用函数那样使用。
  • 构造参数 1 definetAt: (P1) -> Boolean 用于判断 P1 参数是否满足被处理的条件。
  • 构造参数 2 f: (P1) -> R 用于处理 P1 参数并返回 R 类型值。
  • 成员方法 invoke 中，当 P1 满足条件时，则将 P1 交给 构造参数 2 f: (P1) -> R 处理；否则抛出异常。
  • 成员方法 isDefinedAt 只是构造参数 1 definetAt 的拷贝。

所以，用一句话概括 PartialFunction 实例对象，就是一个带有判断条件的"函数"，只有满足条件的参数，才会被"函数"处理。现在我们用一个个 PartialFunction 实例来代替处理器是完全没问题的，问题是怎么把它们链接起来呢？【funKTionale】 (opens new window)中还为 PartialFunction 扩展了一个 orElse 函数，这就是把偏函数组合起来的关键：

// https://github.com/MarioAriasC/funKTionale/blob/master/funktionale-utils/src/main/kotlin/org/funktionale/utils/partialfunctions.kt
+
+infix fun <P1, R> PartialFunction<P1, R>.orElse(that: PartialFunction<P1, R>): PartialFunction<P1, R> {
+    return PartialFunction({ this.isDefinedAt(it) || that.isDefinedAt(it) }) {
+        when {
+            this.isDefinedAt(it) -> this(it)
+            that.isDefinedAt(it) -> that(it)
+            else -> throw IllegalArgumentException("function not definet for parameter ($it)")
+        }
+    }
+}
+

同样，也分成如下几步，方便理解：

  • orElse 是 PartialFunction 的扩展函数，故内部可以使用 this 获取原本的 PartialFunction 实例（也就是 receiver）。
  • orElse 只接收一个 PartialFunction 类型参数 that，并且返回一个 PartialFunction 类型实例，故 orElse 可以嵌套调用。
  • orElse 返回值是一个使用了两个 PartialFunction 实例对象 （即 this 和 that）组合出来的一个新的 PartialFunction 实例对象，
  • orElse 返回值的意图是，只要原本的 this 和 that 中有一个条件成立，那么就让条件成立的那个来处理参数 P1 ，否则抛出异常。其实，这个 that 就相当于是责任链模式中的 successor。
  • orElse 使用 infix 修饰，故支持中缀表达式写法。

注意：你可能一时看不懂 PartialFunction({ xxx }){ yyy } 这个奇怪的语法，其实很简单，在创建一个 PartialFunction 实例时，可以传入两个 Lambda 表达式，所以正常写法应该是这样的 PartialFunction({ xxx }, { yyy }) ，不过，在 Kotlin 中，当 Lambda 表达式作为最后一个参数传入时，可以写到函数外部，所以就出现了 PartialFunction({ xxx }){ yyy } 这种写法。

好了，现在用 PartialFunction 来改良原本的责任链模式代码：

/**
+ * 使用自运行Lambda来构建一个个 PartialFunction 实例：部长、会长、学院
+ *
+ * @author GitLqr
+ */
+val groupLeader = {
+    val definetAt: (ApplyEvent) -> Boolean = { it.money <= 200 }
+    val handler: (ApplyEvent) -> Unit = { println("Group Leader handled application: ${it.title}.") }
+    PartialFunction(definetAt, handler)
+}()
+val president = {
+    val definetAt: (ApplyEvent) -> Boolean = { it.money <= 500 }
+    val handler: (ApplyEvent) -> Unit = { println("President handled application: ${it.title}.") }
+    PartialFunction(definetAt, handler)
+}()
+val college = {
+    val definetAt: (ApplyEvent) -> Boolean = { true }
+    val handler: (ApplyEvent) -> Unit = {
+        when {
+            it.money <= 1000 -> println("College handled application: ${it.title}.")
+            else -> println("College: This application is refused.")
+        }
+    }
+    PartialFunction(definetAt, handler)
+}()
+

注意：自运行 Lambda 相当于是 js 中的立即执行函数。

接下来就是用 orElse 将一个个 PartialFunction 实例链接起来：

// 使用
+// val applyChain = groupLeader.orElse(president.orElse(college))
+val applyChain = groupLeader orElse president orElse college // 中缀表达式
+applyChain(ApplyEvent(10, "buy a pen")) // 买只钢笔
+applyChain(ApplyEvent(200, "team building")) // 团建
+applyChain(ApplyEvent(600, "hold a debate match")) // 举行辩论赛
+applyChain(ApplyEvent(1200, "annual meeting of the college")) // 学院年会
+
+// 输出
+Group Leader handled application: buy a pen.
+Group Leader handled application: team building.
+College handled application: hold a debate match.
+College: This application is refused.
+

使用 PartialFunction 之后，不仅可以不幅度减少代码量，结合 orElse 能获得更好的语法表达。以上，就是使用偏函数改良责任链模式的全部内容了。为了加深对偏函数的理解，这里引用数据工匠记的 Scala 《偏函数（Partial Function）》原文中的话：

为什么要用偏函数呢？以我个人愚见，还是一个重用粒度的问题。函数式的编程思想是以一种“演绎法”而非“归纳法”去寻求解决空间。也就是说，它并不是要去归纳问题然后分解问题并解决问题，而是看透问题本质，定义最原初的操作和组合规则，面对问题时，可以通过组合各种函数去解决问题，这也正是“组合子（combinator）”的含义。偏函数则更进一步，将函数求解空间中各个分支也分离出来，形成可以被组合的偏函数。

+ +
+
#设计模式#责任链模式
Kotlin - 改良设计模式 - 迭代器模式
Kotlin - 改良设计模式 - 装饰者模式

+ ← + Kotlin - 改良设计模式 - 装饰者模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/41ce5a/index.html b/pages/41ce5a/index.html new file mode 100644 index 000000000..7166df0d1 --- /dev/null +++ b/pages/41ce5a/index.html @@ -0,0 +1,190 @@ + + + + + + Kotlin - 改良设计模式 - 装饰者模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-18
目录

Kotlin - 改良设计模式 - 装饰者模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 装饰者模式 +
    • 作用：在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。
    • 本质：该模式通过创建一个包装对象，来包裹真实的对象。
    • 核心操作： +
      • 创建一个装饰类，包含一个被装饰类的实例
      • 装饰类重写所有被装饰类的方法
      • 在装饰类中对需要增强的功能进行扩展

# 二、使用装饰者模式

  • 例子：枪支部件
  • 重点：装饰器类设计（实现被装饰类相同的接口，构造器接收被装饰类的接口实例对象）

像绝地求生这种大型射击游戏，里面的枪支系统是很复杂的，有很多种枪，而且几乎每种枪上都可以装配各种各样的部件，比如消声器、八倍镜之类的，部件的作用各不相同，有的可以增加火力，有的可以提高精确度，等等，现在我们来简单设计一下这个枪支系统，枪有很多种，所以需要定义一个接口来描述枪都有哪些能力，供后续扩展各种新枪：

/**
+ * 枪支接口
+ *
+ * @author GitLqr
+ */
+interface Gun {
+    /**
+     * 攻击力
+     */
+    fun attack(): Float
+
+    /**
+     * 噪音
+     */
+    fun noise(): Float
+
+    /**
+     * 生产日期
+     */
+    fun prodDate(): String
+}
+
+/**
+ * Ump9
+ *
+ * @author GitLqr
+ */
+class Ump9Gun : Gun {
+    override fun attack() = 100f
+
+    override fun noise() = 20f
+
+    override fun prodDate() = "2020-02-18"
+}
+

这里只实现了 Ump9 这个型号的枪，后续还可以根据需要扩展，现在来想想枪支部件怎么设计？在 Java 中，给一个类扩展行为有两种选择：

  • 设计一个继承它的子类
  • 使用装饰者模式对该类进行装饰

那么枪支部件合适用继承方式来设计吗？显然不合适，因为一个部件可以装配在不只一种枪上，所以继承这种方式排除。另一种方式，使用装饰者模式有一个很大的优势，在于符合“组合优于继承”的设计原则，我们知道，部件可以和任意枪组合，显示，使用装饰者模式来设计枪支部件是一个不错的选择：

/**
+ * 枪支部件
+ *
+ * @author GitLqr
+ */
+abstract class GunPart(protected val gun: Gun) : Gun
+
+/**
+ * 消声器
+ *
+ * @author GitLqr
+ */
+class Muffler(gun: Gun) : GunPart(gun) {
+    override fun attack() = gun.attack() - 5
+
+    override fun noise() = 0f
+
+    override fun prodDate() = gun.prodDate()
+}
+
+/**
+ * 燃烧子弹
+ *
+ * @author GitLqr
+ */
+class FireBullet(gun: Gun) : GunPart(gun) {
+    override fun attack() = gun.attack() + 200
+
+    override fun noise() = gun.noise()
+
+    override fun prodDate() = gun.prodDate()
+}
+

程序设计时，装饰器（部件）会引用被装饰实例（枪），并实现被装饰实例的所有接口，然后在需要增强的接口方法中加入增强逻辑。因为枪支部件 GunPart 接收 Gun 类型构造参数，而且本身也是 Gun 接口的实现类，所以，可以让多种枪支部件 GunPart 嵌套修饰枪实例：

// 使用
+var ump9: Gun = Ump9Gun()
+println("装配前：ump9 攻击力 ${ump9.attack()}，噪音 ${ump9.noise()}")
+ump9 = Muffler(FireBullet(ump9)) // 装配了 燃烧子弹、消声器 的ump9
+println("装配后：ump9 攻击力 ${ump9.attack()}，噪音 ${ump9.noise()}")
+
+// 输出
+装配前：ump9 攻击力 100.0，噪音 20.0
+装配后：ump9 攻击力 295.0，噪音 0.0
+

# 三、改良装饰者模式

  • 例子：枪支部件
  • 重点：类委托（by 关键字）

在上面的例子中，装饰者模式可以很好的解决实例组合的情况，但是代码还是显得比较啰唆，因为需要重写所有的装饰对象方法，所以可能会存在大量样板代码。比如 FireBullet 只装饰增强 attack() 方法，而 noise()、prodDate() 均不做修改，但还要是把这两个方法重写一遍。Kotlin 中有类委托特性，利用 by 关键字，将装饰类的所有方法委托给一个被装饰的类对象，然后只需覆写装饰的方法即可：

/**
+ * 枪支部件
+ *
+ * @author GitLqr
+ */
+abstract class GunPart(protected val gun: Gun) : Gun by gun
+
+/**
+ * 消声器
+ *
+ * @author GitLqr
+ */
+class Muffler(gun: Gun) : GunPart(gun) {
+    override fun attack() = gun.attack() - 5
+    override fun noise() = 0f
+}
+
+/**
+ * 燃烧子弹
+ *
+ * @author GitLqr
+ */
+class FireBullet(gun: Gun) : GunPart(gun) {
+    override fun attack() = gun.attack() + 200
+}
+

可以看到，使用类委托之后，装饰类 FireBullet 中的样板代码不用重写了，从而减少了代码量。

+ +
+
#设计模式#装饰者模式
Kotlin - 改良设计模式 - 责任链模式

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/42026f/index.html b/pages/42026f/index.html new file mode 100644 index 000000000..a045f91bf --- /dev/null +++ b/pages/42026f/index.html @@ -0,0 +1,184 @@ + + + + + + RxSwift + MJRefresh 打造自动处理刷新控件状态 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-10-24
目录

RxSwift + MJRefresh 打造自动处理刷新控件状态

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

本文是基于 iOS-RxSwift项目实战记录 所述，如果你还未阅读过，建议你最好还先阅读一遍，并下载Demo熟悉一下 : )

# 前言

MVVM的模式中，多出了ViewModel这个角色，将逻辑处理、网络请求等繁杂操作中ViewController中抽离出来，ViewController得以瘦身。 +结合RxSwift架构，我们一般就会在ViewModel中定义一个input收集繁杂操作所需的信息，通过一个transform方法将input作为参数传入，进而得到一个output供controller使用。

在使用RxSwift开发时会大量的使用到这种形式，其中就包括我们的网络请求。 +结合 iOS-RxSwift项目实战记录 中所述的“MJRefresh在RxSwift中的使用”，在output中定义了一个变量

let refreshStatus = Variable<LXFRefreshStatus>(.none)
+

controller通过output将其进行监听，从而当值发生变化时，controller就能实时获取当前应所处的刷新状态

vmOutput.refreshStatus.asObservable().subscribe(onNext: {[weak self] status in
+    switch status {
+    case .beingHeaderRefresh:
+        self?.tableView.mj_header.beginRefreshing()
+    case .endHeaderRefresh:
+        self?.tableView.mj_header.endRefreshing()
+    case .beingFooterRefresh:
+        self?.tableView.mj_footer.beginRefreshing()
+    case .endFooterRefresh:
+        self?.tableView.mj_footer.endRefreshing()
+    case .noMoreData:
+        self?.tableView.mj_footer.endRefreshingWithNoMoreData()
+    default:
+        break
+    }
+}).addDisposableTo(rx_disposeBag)
+

如果在一个项目多处使用到了这种方式，我们就可以看到弊端——重复代码，过于冗余。

难道我们每次都要在controller中进行如此操作吗？

# 面向协议

关于协议的内容可以看下我之前的这两篇文章 +iOS - Swift 面向协议编程（一）

iOS - Swift 面向协议编程（二）

总结协议的两大作用：1、规范 2、定制能力

定义协议 Refreshable

/* ============================ Refreshable ================================ */
+// 需要使用 MJExtension 的控制器使用
+
+protocol Refreshable {
+    
+}
+extension Refreshable where Self : UIViewController {
+    func initRefreshHeader(_ scrollView: UIScrollView, _ action: @escaping () -> Void) -> MJRefreshHeader {
+        scrollView.mj_header = MJRefreshNormalHeader(refreshingBlock: { action() })
+        return scrollView.mj_header
+    }
+    
+    func initRefreshFooter(_ scrollView: UIScrollView, _ action: @escaping () -> Void) -> MJRefreshFooter {
+        scrollView.mj_footer = MJRefreshAutoNormalFooter(refreshingBlock: { action() })
+        return scrollView.mj_footer
+    }
+}
+

在controller中遵循 Refreshable 协议，通过initRefreshHeader方法或者initRefreshFooter方法给tableView或者collectionView赋予头部或尾部刷新的能力，并且书写下拉刷新时需要执行的代码

// 以下拉刷新为例
+let refreshHeader = initRefreshHeader(liveCollectionView) { [weak self] in
+    // 下拉后需要执行的操作 
+    self?.vmOutput?.requestCommand.onNext(())
+}
+

接下来再讲讲output，只要有网络请求的地方，就会需要需要监听请求状态，既然这样，那么可以为output定义一个协议OutputRefreshProtocol，专门用来规范必需声明的属性

/* ============================ OutputRefreshProtocol ================================ */
+// viewModel 中 output使用
+
+protocol OutputRefreshProtocol {
+    // 告诉外界的tableView当前的刷新状态
+    var refreshStatus : Variable<LXFRefreshStatus> {get}
+}
+

接着让output去遵循该协议，并进行初始化刷新状态的值为.none

struct LXFLiveOutput: OutputRefreshProtocol {
+    var refreshStatus: Variable<LXFRefreshStatus>
+    
+    let sections: Driver<[LXFLiveSection]>
+    init(sections: Driver<[LXFLiveSection]>) {
+        self.sections = sections
+        refreshStatus = Variable<LXFRefreshStatus>(.none)
+    }
+}
+

到此为止，其实跟之前没啥两样，只是使controller更方便初始化刷新控件而已。接下来才是本文的重点。

# 重点

刷新的状态无非也就那么几种，下拉重载数据，上拉加载更多，请求完成时结束下拉或上拉等等。。。那我们何必要在每个controller中再去管理这等琐事？？ +而至此，刷新控件的状态是由变量 refreshStatus 来决定，此时 refreshStatus 又声明在 OutputRefreshProtocol 协议中，我们何不再定义一个方法，将刷新控件的状态交给refreshStatus自己来帮我们处理呢～

extension OutputRefreshProtocol {
+    func autoSetRefreshHeaderStatus(header: MJRefreshHeader?, footer: MJRefreshFooter?) -> Disposable {
+        return refreshStatus.asObservable().subscribe(onNext: { (status) in
+            switch status {
+            case .beingHeaderRefresh:
+                header?.beginRefreshing()
+            case .endHeaderRefresh:
+                header?.endRefreshing()
+            case .beingFooterRefresh:
+                footer?.beginRefreshing()
+            case .endFooterRefresh:
+                footer?.endRefreshing()
+            case .noMoreData:
+                footer?.endRefreshingWithNoMoreData()
+            default:
+                break
+            }
+        })
+    }
+}
+

这时需要我们将刷新控件的对象 header / footer 传入到方法中，实现自动控制刷新控件状态。

# 总结使用

一、output中遵守协议 OutputRefreshProtocol， 并初始化 refreshStatus 的值为 none

struct LXFLiveOutput: OutputRefreshProtocol {
+    var refreshStatus: Variable<LXFRefreshStatus>
+    
+    let sections: Driver<[LXFLiveSection]>
+    init(sections: Driver<[LXFLiveSection]>) {
+        self.sections = sections
+        refreshStatus = Variable<LXFRefreshStatus>(.none)
+    }
+}
+

二、controller 遵守协议 Refreshable，通过协议中的方法初始化刷新控件及对应的操作，并将刷新控件对象作为参数传入到自动处理状态方法中

extension LXFLiveViewController: Refreshable 
+
let refreshHeader = initRefreshHeader(liveCollectionView) { [weak self] in
+    self?.vmOutput?.requestCommand.onNext(())
+}
+vmOutput?.autoSetRefreshHeaderStatus(header: refreshHeader, footer: nil).disposed(by: rx.disposeBag)
+

三、viewModel中根据实际情况实时更新 refreshStatus 的刷新状态

image.png

# 案例

协议：Refreshable.swift (opens new window) +ViewModel：LXFLiveViewModel (opens new window) +Controller：LXFLiveViewController (opens new window)

LXFBiliBili (opens new window)

LXFBiliBili

+ +
+
#iOS#RxSwift#Swift
iOS - RxSwift项目实战记录
iOS - Swift3.0 高仿喜马拉雅FM

+ ← + iOS - Swift3.0 高仿喜马拉雅FM→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/43645f/index.html b/pages/43645f/index.html new file mode 100644 index 000000000..311873f9f --- /dev/null +++ b/pages/43645f/index.html @@ -0,0 +1,90 @@ + + + + + + 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-10-15
目录

一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、大事件

2023年10月13日的那一天，发生了我职业生涯中的两件大事：

# 1、加入 Flutter 组织

经过 @AlexV525 大佬的细心查验，我最终获得了他的推荐，并收到 @Hixie 发来的加入 Flutter 组织的邀请邮件，正式成为了该组织成员。

推荐

邀请

# 2、加入FlutterCandies 组织

我带着 flutter_scrollview_observer (opens new window) 开源库加入到 FlutterCandies 组织。

邀请

flutter_scrollview_observer

正所谓独乐乐不如众乐乐，我将这两个好消息告诉了移动端的同事们，并请他们每个人喝一杯下午茶 😄

现在回想起来，一切都好似梦幻般的在进行中，我竟然在这一天内加入到 Flutter 和 FlutterCandies 两大组织，简直太魔幻，那天我失眠了~

# 二、两年时间

这些荣誉让我不禁回想起这两年关于 Flutter 的开发经历~

# 1、入门小白

其实我也并不是完全小白，早到2018年年末就接触学习了 Flutter 的相关知识，不过学完并没有机会去运用，平日里还是在痛苦的搞 iOS 原生开发，加上项目是 OC 与 Swift 混编，导致日常代码无提示，编译慢，且造成电脑极其卡顿，无法同时做其它事情，效率低下，基于此种种原因，事业部最终决定转 Flutter 来提升开发效率。

所以从2022年开始，我们就分配了使用 Flutter 对现有业务进行重构的技术推动任务，就这样，我开始正式接触 Flutter 框架，那时还需要花费大量时间才能完成一个页面~ 😂

# 2、维护开源库

慢慢的，我们开始将 Flutter 应用于项目新需求页面的研发，而在第一个 Flutter 需求里要求视频列表页滚动停止后，位于指定偏移的影音视图能够自动播放，一上来就是高难度，经过摸索 RenderObject 的相关知识，最终成功攻克。

类似效果： +

当然攻克需求难点不是最终目的，我一想到后面要用到类似功能时又要再写一遍 RenderObject 相关的东西就头疼，于是做了一个决定，封装成 Flutter 组件并开源！是的，这便是 flutter_scrollview_observer (opens new window) 这个开源库的诞生背景。

后面需求提及的功能越来越复杂，我也不断去加强 flutter_scrollview_observer (opens new window) 的功能，帮助我快速完成功能研发，我也在 Flutter 开源的道路上越走越远~

截止到今天关于开源库 flutter_scrollview_observer (opens new window) 有这三大功能点：

  1. 监听滚动视图中正在显示的子部件 (opens new window)
  2. 滚动到指定下标位置 (opens new window)
  3. 聊天会话 (opens new window)

相关技术文章有：

  1. Flutter - 获取ListView当前正在显示的Widget信息
  2. Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥
  3. Flutter - 快速实现聊天会话列表的效果，完美💯
  4. Flutter - 船新升级😱支持观察第三方构建的滚动视图💪
  5. Flutter - 瀑布流交替播放视频 🎞
  6. Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖
  7. Flutter - 滚动视图中的表单防遮挡 🗒
  8. Flutter - 秒杀1/2曝光统计 📊

# 3、提交 PR

说起来也是机缘巧合，我当时学习 iOS 逆向知识的时候因追求个性化，修改了 LLDB 的提示符，导致我在相当长的一段时间内无法直接运行 Flutter 项目，然后发现可以先跑原生项目，再 Attach 去调试，靠着这种曲线救国的方式度日 😭

后面我实在受不了了，再加上过年期间需求不那么紧急，就决定对 flutter_tools 进行一番探索，最终找到问题所在，并对原逻辑进行调整，支持自定义 LLDB 提示符的场景，接着迈出了 Flutter PR 的第一步！

截止到今天关于 Flutter PR 的相关总结技术文章有：

  1. Flutter - 我给官方提PR，解决run命令卡住问题 😃
  2. Flutter - 探索run命令到底做了什么 🤔
  3. Flutter - 引擎调试（iOS篇）🛠
  4. Flutter - 引擎调试bug到提交PR实战 🐞

接下来在整个 2023 年里，我的日常开源活动就是维护 flutter_scrollview_observer (opens new window) 这个开源组件，写文章，以及提 Flutter PR ☕。

# 三、结语

好了，回忆与感慨到此结束，加入组织并不是终点，而是一个美好的开始。

最后再提一下 scrollview_observer 的新地址： https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

希望大家能够多多支持，点个 Star，我是 LinXunFeng，本篇到此结束，我们下次再见！

+ +
+
#Dart#Flutter
Flutter - 秒杀1/2曝光统计 📊
Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓

+ ← + Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/443e18/index.html b/pages/443e18/index.html new file mode 100644 index 000000000..64e0c8ef8 --- /dev/null +++ b/pages/443e18/index.html @@ -0,0 +1,118 @@ + + + + + + iOS - 实现UINavigation全屏滑动返回(一) | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-11
目录

iOS - 实现UINavigation全屏滑动返回(一)

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 要点

interactivePopGestureRecognizer 是UINavigationController自带手势，当我们自定义了导航条的返回按钮后，这个手势就自动失效了，也就是说无法滑动返回。

# 条件

很多情况下我们不得不自定义导航条的返回按钮，但是我们也要滑动返回上一级的效果。

# 思路

既然自动失效，那我们就告诉它什么时候生效。

  • 在非根控制器下生效(用于滑动返回上一级)

  • 在根控制器下失效(防止根控制器被移除，当然系统不会让我们把它移除，只是会出现bug)

    苹果官方文档说明 +翻译：第一个被添加的控制器成为永远不会被出栈的根控制器

# 步骤

自定义一个 UINavigationController ，即继承于 UINavigationController ，名字为 LXFNavigationController ，将代理设为自己，遵守协议 UINavigationControllerDelegate ，实现代理方法 navigationController:didShowViewController:animated:

# 代码

LXFNavigationController.m

/** 系统手势代理 */
+@property(nonatomic, strong) id popGesture;
+
- (void)viewDidLoad {
+ [super viewDidLoad];
+
+  // 记录系统手势代理
+  self.popGesture = self.interactivePopGestureRecognizer;
+  self.delegate = self;
+}
+
#pragma mark - UINavigationControllerDelegate
+// 当控制器显示完毕的时候调用
+- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated {
+    // 根据 栈 先进后出
+    if (self.viewControllers[0] == viewController) { // 根控制器
+        // 还原代理
+        self.interactivePopGestureRecognizer.delegate = self.popGesture;
+    } else { // 非控制器
+        // 清空手势代理就能实现滑动返回，iOS6不支持
+        self.interactivePopGestureRecognizer.delegate = nil;
+    }
+    // 如果当前控制器为根控制器，则使手势失效，不然手势会将根控制器移除
+    if (self.viewControllers.count == 1) {
+        self.interactivePopGestureRecognizer.enabled = NO;
+    } else {
+        self.interactivePopGestureRecognizer.enabled = YES;
+    }
+}
+

只有左侧边缘滑动才有效

附上Demo (opens new window)

# 最后说两句

这样就可以了，但是注意了，现在实现的是滑动返回功能，并没有全屏滑动返回~~接下来看下一篇吧 +iOS - 实现UINavigation全屏滑动返回(二)

+ +
+
#iOS#Objective-C#Swift
iOS - Swift 仿微信小红点(无数字)
iOS - 实现UINavigation全屏滑动返回(二)

+ ← + iOS - 实现UINavigation全屏滑动返回(二)→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4517cb/index.html b/pages/4517cb/index.html new file mode 100644 index 000000000..d82b441ed --- /dev/null +++ b/pages/4517cb/index.html @@ -0,0 +1,855 @@ + + + + + + Flutter - 探索run命令到底做了什么 🤔 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-02-19
目录

Flutter - 探索run命令到底做了什么 🤔

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、背景

上一篇 Flutter - 我给官方提PR，解决run命令卡住问题 😃 中，虽然我提的 pr 最终成功 merge 了，但是我心中还存在着几点疑问，如：

  1. 只能删除 snapshot 文件才能使修改的 flutter_tools 代码生效吗？
  2. 终端内执行 flutter 命令后的流程是怎样的？

现在就让我们带着疑问一起来了解一下从 flutter run 到 flutter_tools 调用 launchAndAttach 的过程吧。

# 二、终端

流程图如下：

# flutter 文件

在终端内执行 flutter 命令，必然是与其环境变量相关的

# export PATH=~/developer/flutter/bin:$PATH
+export PATH=~/fvm/default/bin:$PATH
+

在上述路径下找到名为 flutter 文件，并打开

#!/usr/bin/env bash
+
+...
+
+# /Users/lxf/fvm/versions/3.1.0/bin/flutter
+PROG_NAME="$(follow_links "${BASH_SOURCE[0]}")"
+
+# /Users/lxf/fvm/versions/3.1.0/bin
+BIN_DIR="$(cd "${PROG_NAME%/*}" ; pwd -P)"
+
+
+# To define `shared::execute()` function
+source "$BIN_DIR/internal/shared.sh"
+
+# $@: 代表输入的所有参数，但是每个区分对待
+shared::execute "$@"
+

将 internal/shared.sh 脚本的内容引入，然后执行其 shared::execute 方法，并通过 "$@" 将我们在终端下输入的其它参数传递进去，即：

# 在终端上输入的内容
+flutter run -v -d 设备id
+
+# 实际上命令后续的参数是传递给了 shared::execute
+shared::execute run -v -d 设备id
+

# shared.sh 文件

打开 internal/shared.sh 来看一看

#!/usr/bin/env bash
+
+...
+
+function upgrade_flutter () (
+  // 创建cache目录
+  mkdir -p "$FLUTTER_ROOT/bin/cache"
+
+  # 取出当前flutter源码HEAD提交的SHA1值
+  local revision="$(cd "$FLUTTER_ROOT"; git rev-parse HEAD)"
+  # 拼接，如 bcea432bce54a83306b3c00a7ad0ed98f777348d:
+  local compilekey="$revision:$FLUTTER_TOOL_ARGS"
+
+  # 判断缓存是否需要更新的几个步骤:
+  #  * 没有snapshot文件, 或者
+  #  * stamp文件不存在, 或者
+  #  * stamp文件内容为空, 或者
+  #  * stamp文件内的SHA1与当前HEAD的SHA1不同, 或者
+  #  * pubspec.yaml 的修改时间比 pubspec.lock 的新
+  if [[ ! -f "$SNAPSHOT_PATH" || ! -s "$STAMP_PATH" || "$(cat "$STAMP_PATH")" != "$compilekey" || "$FLUTTER_TOOLS_DIR/pubspec.yaml" -nt "$FLUTTER_TOOLS_DIR/pubspec.lock" ]]; then
+    _wait_for_lock
+
+    # A different shell process might have updated the tool/SDK.
+    if [[ -f "$SNAPSHOT_PATH" && -s "$STAMP_PATH" && "$(cat "$STAMP_PATH")" == "$compilekey" && "$FLUTTER_TOOLS_DIR/pubspec.yaml" -ot "$FLUTTER_TOOLS_DIR/pubspec.lock" ]]; then
+      exit $?
+    fi
+
+    # 拉取dart_sdk
+    rm -f "$FLUTTER_ROOT/version"
+    touch "$FLUTTER_ROOT/bin/cache/.dartignore"
+    "$FLUTTER_ROOT/bin/internal/update_dart_sdk.sh"
+
+    >&2 echo Building flutter tool...
+
+    # Prepare packages...
+    VERBOSITY="--verbosity=error"
+    if [[ "$CI" == "true" || "$BOT" == "true" || "$CONTINUOUS_INTEGRATION" == "true" || "$CHROME_HEADLESS" == "1" ]]; then
+      PUB_ENVIRONMENT="$PUB_ENVIRONMENT:flutter_bot"
+      VERBOSITY="--verbosity=normal"
+    fi
+    export PUB_ENVIRONMENT="$PUB_ENVIRONMENT:flutter_install"
+    if [[ -d "$FLUTTER_ROOT/.pub-cache" ]]; then
+      export PUB_CACHE="${PUB_CACHE:-"$FLUTTER_ROOT/.pub-cache"}"
+    fi
+    pub_upgrade_with_retry
+
+    # 编译产出snapshot文件
+    "$DART" --verbosity=error --disable-dart-dev $FLUTTER_TOOL_ARGS --snapshot="$SNAPSHOT_PATH" --packages="$FLUTTER_TOOLS_DIR/.packages" --no-enable-mirrors "$SCRIPT_PATH"
+    # 将 compilekey 写入到 stamp 文件
+    echo "$compilekey" > "$STAMP_PATH"
+  fi
+  exit $?
+)
+
+# This function is intended to be executed by entrypoints (e.g. `//bin/flutter`
+# and `//bin/dart`). PROG_NAME and BIN_DIR should already be set by those
+# entrypoints.
+function shared::execute() {
+  export FLUTTER_ROOT="$(cd "${BIN_DIR}/.." ; pwd -P)"
+
+  # If present, run the bootstrap script first
+  BOOTSTRAP_PATH="$FLUTTER_ROOT/bin/internal/bootstrap.sh"
+  if [ -f "$BOOTSTRAP_PATH" ]; then
+    source "$BOOTSTRAP_PATH"
+  fi
+
+  FLUTTER_TOOLS_DIR="$FLUTTER_ROOT/packages/flutter_tools"
+  SNAPSHOT_PATH="$FLUTTER_ROOT/bin/cache/flutter_tools.snapshot"
+  STAMP_PATH="$FLUTTER_ROOT/bin/cache/flutter_tools.stamp"
+  SCRIPT_PATH="$FLUTTER_TOOLS_DIR/bin/flutter_tools.dart"
+  DART_SDK_PATH="$FLUTTER_ROOT/bin/cache/dart-sdk"
+  DART="$DART_SDK_PATH/bin/dart"
+
+  ...
+
+  # 更新依赖、pub-cache目录
+  upgrade_flutter 7< "$PROG_NAME"
+
+  # BIN_NAME 的值为 flutter
+  BIN_NAME="$(basename "$PROG_NAME")"
+  case "$BIN_NAME" in
+    flutter*)
+      # 执行 flutter_tools.snapshot
+      # exec
+      # /Users/lxf/fvm/versions/3.1.0/bin/cache/dart-sdk/bin/dart
+      # --disable-dart-dev
+      # --packages="/Users/lxf/fvm/versions/3.1.0/packages/flutter_tools/.packages"
+      # /Users/lxf/fvm/versions/3.1.0/bin/cache/flutter_tools.snapshot 
+      exec "$DART" --disable-dart-dev --packages="$FLUTTER_TOOLS_DIR/.packages" $FLUTTER_TOOL_ARGS "$SNAPSHOT_PATH" "$@"
+      ;;
+    dart*)
+      exec "$DART" "$@"
+      ;;
+    *)
+      >&2 echo "Error! Executable name $BIN_NAME not recognized!"
+      exit 1
+      ;;
+  esac
+}
+
  • basename：去掉文件名前面的目录并打印出来
  • DART：dart 可执行文件的文件路径
  • FLUTTER_TOOLS_DIR：flutter_tools 目录路径
  • FLUTTER_TOOL_ARGS：单独的空格分隔
  • SNAPSHOT_PATH：flutter_tools.snapshot 文件路径
  • SCRIPT_PATH：编译的入口文件

所以最终执行的命令为：

exec \
+/Users/lxf/fvm/versions/3.1.0/bin/cache/dart-sdk/bin/dart \
+--disable-dart-dev \
+--packages="/Users/lxf/fvm/versions/3.1.0/packages/flutter_tools/.packages" \
+/Users/lxf/fvm/versions/3.1.0/bin/cache/flutter_tools.snapshot \
+... 其它传递进来的参数
+

可以看到就是去执行 flutter_tools.snapshot

当然了，在到这里之前会执行 upgrade_flutter 方法，其主要是以下几个动作：

  1. 创建 bin/cache 目录
  2. 拉取 dart-sdk
  3. 创建或更新 flutter_tools.snapshot

为了确保 flutter_tools.snapshot 是存在的且为 "最新"，其中判断是否需要对缓存进行更新有几个点:

  • 没有 flutter_tools.snapshot 文件, 或者
  • flutter_tools.stamp 文件不存在, 或者
  • flutter_tools.stamp 文件内容为空, 或者
  • flutter_tools.stamp 文件内的 SHA1与当前 HEAD 的 SHA1 不同, 或者
  • pubspec.yaml 的修改时间比 pubspec.lock 的新

终端执行 flutter 命令的流程也就到这了，这部分让我们知道了 flutter 命令实际上就是去执行 flutter_tools.snapshot 文件，以及在 upgrade_flutter 方法的最后是去编译产出该 snapshot 文件，其编译的入口文件为 flutter/packages/flutter_tools/bin/flutter_tools.dart。

那接下来让我们一起去看看 flutter_tools 的源码。

# 三、flutter_tools 源码

下面以命令 flutter run -v -d 设备ID 为例

整体流程图如下：

温馨提醒：请放大食用，最好可以边对照流程图边看下面的源码分析

# 1、准备阶段

在真正执行 flutter run 命令前会有一个准备阶段

# 入口文件

flutter_tools.dart 为 flutter_tools 的入口文件，代码如下：

文件路径：bin/flutter_tools.dart

import 'package:flutter_tools/executable.dart' as executable;
+
+void main(List<String> args) {
+  executable.main(args);
+}
+

作用就是去执行 executable.dart 文件里的 main 方法

# main

文件路径：lib/executable.dart

Future<void> main(List<String> args) async {
+  ...
+
+  await runner.run(
+    args,
+    () => generateCommands(
+      verboseHelp: verboseHelp,
+      verbose: verbose,
+    ),
+    ...
+  );
+}
+

generateCommands 生成的是 List<FlutterCommand>，对应 lib/src/commands 目录下的所有命令，这里面包含了我们需要关注的 RunCommand，对应 flutter run

List<FlutterCommand> generateCommands({
+  required bool verboseHelp,
+  required bool verbose,
+}) => <FlutterCommand>[
+  AnalyzeCommand(verboseHelp: verboseHelp, fileSystem: globals.fs, platform: globals.platform, processManager: globals.processManager, logger: globals.logger, terminal: globals.terminal, artifacts: globals.artifacts!, allProjectValidators: <ProjectValidator>[]),
+  AssembleCommand(verboseHelp: verboseHelp, buildSystem: globals.buildSystem),
+  AttachCommand(verboseHelp: verboseHelp),
+  BuildCommand(verboseHelp: verboseHelp),
+  ChannelCommand(verboseHelp: verboseHelp),
+  CleanCommand(verbose: verbose),
+  ConfigCommand(verboseHelp: verboseHelp),
+  CustomDevicesCommand(customDevicesConfig: globals.customDevicesConfig, operatingSystemUtils: globals.os, terminal: globals.terminal, platform: globals.platform, featureFlags: featureFlags, processManager: globals.processManager, fileSystem: globals.fs, logger: globals.logger),
+  CreateCommand(verboseHelp: verboseHelp),
+  DaemonCommand(hidden: !verboseHelp),
+  DebugAdapterCommand(verboseHelp: verboseHelp),
+  DevicesCommand(verboseHelp: verboseHelp),
+  DoctorCommand(verbose: verbose),
+  DowngradeCommand(verboseHelp: verboseHelp),
+  DriveCommand(verboseHelp: verboseHelp, fileSystem: globals.fs, logger: globals.logger, platform: globals.platform),
+  EmulatorsCommand(),
+  FormatCommand(verboseHelp: verboseHelp),
+  GenerateCommand(),
+  GenerateLocalizationsCommand(fileSystem: globals.fs, logger: globals.logger),
+  InstallCommand(),
+  LogsCommand(),
+  MakeHostAppEditableCommand(),
+  PackagesCommand(),
+  PrecacheCommand(verboseHelp: verboseHelp, cache: globals.cache, logger: globals.logger, platform: globals.platform, featureFlags: featureFlags),
+  RunCommand(verboseHelp: verboseHelp),
+  ScreenshotCommand(),
+  ShellCompletionCommand(),
+  TestCommand(verboseHelp: verboseHelp),
+  UpgradeCommand(verboseHelp: verboseHelp),
+  SymbolizeCommand(stdio: globals.stdio, fileSystem: globals.fs),
+  // Development-only commands. These are always hidden,
+  IdeConfigCommand(),
+  UpdatePackagesCommand(),
+];
+

runner.run 对应的是 runner.dart 文件里的 run 方法

# run

文件路径：lib/runner.dart

/// Runs the Flutter tool with support for the specified list of [commands].
+Future<int> run(
+  List<String> args,
+  List<FlutterCommand> Function() commands, {
+    bool muteCommandLogging = false,
+    bool verbose = false,
+    bool verboseHelp = false,
+    bool reportCrashes,
+    String flutterVersion,
+    Map<Type, Generator> overrides,
+  }) async {
+  ...
+
+  return runInContext<int>(() async {
+    ...
+
+    final FlutterCommandRunner runner = FlutterCommandRunner(verboseHelp: verboseHelp);
+    commands().forEach(runner.addCommand);
+
+    ...
+
+    String getVersion() => flutterVersion ?? globals.flutterVersion.getVersionString(redactUnknownBranches: true);
+    Object firstError;
+    StackTrace firstStackTrace;
+    return runZoned<Future<int>>(() async {
+      try {
+        await runner.run(args);
+        ...
+    }, onError: (Object error, StackTrace stackTrace) async { // ignore: deprecated_member_use
+      ...
+    });
+  }, overrides: overrides);
+}
+

最终调用并返回 runInContext 的运行结果，传入的参数为回调函数，下面会执行

# runInContext

runInContext 方法的代码如下:

文件路径：lib/src/context_runner.dart

Future<T> runInContext<T>(
+  FutureOr<T> Function() runner, {
+  Map<Type, Generator> overrides,
+}) async {
+
+  // Wrap runner with any asynchronous initialization that should run with the
+  // overrides and callbacks.
+  bool runningOnBot;
+  FutureOr<T> runnerWrapper() async {
+    runningOnBot = await globals.isRunningOnBot;
+    return runner();
+  }
+
+  return context.run<T>(
+    name: 'global fallbacks',
+    body: runnerWrapper,
+    overrides: overrides,
+    fallbacks: <Type, Generator>{
+      ...
+    },
+  );
+}
+

返回了 context.run，并且将 runnerWrapper 传递给了 body 参数，而 runnerWrapper 最终调用 runner，下面是 context.run 方法的实现：

Future<V> run<V>({
+  required FutureOr<V> Function() body,
+  String? name,
+  Map<Type, Generator>? overrides,
+  Map<Type, Generator>? fallbacks,
+  ZoneSpecification? zoneSpecification,
+}) async {
+  final AppContext child = AppContext._(
+    this,
+    name,
+    Map<Type, Generator>.unmodifiable(overrides ?? const <Type, Generator>{}),
+    Map<Type, Generator>.unmodifiable(fallbacks ?? const <Type, Generator>{}),
+  );
+  return runZoned<Future<V>>(
+    () async => await body(),
+    zoneValues: <_Key, AppContext>{_Key.key: child},
+    zoneSpecification: zoneSpecification,
+  );
+}
+

可以看到执行了 body，实际上就是执行 runnerWrapper，最终执行传进来的 runner 回调函数。

在调用 runInContext 时就传进了一个回调函数，在这个函数内创建了 FlutterCommandRunner 实例 runner，调用 commands 拿到上面提到的 generateCommands 方法返回的所有 FlutterCommand，并通过 addCommand 方法逐一添加到 runner 实例的 _commands 中，以及将相应的 command 和参数解析添加进 argParser 实例。 +最后调用 FlutterCommandRunner 实例 runner 的 run 方法。

我们先来看一下 addCommand 方法

# CommandRunner.addCommand

文件路径：args/lib/command_runner.dart

Map<String, Command<T>> get commands => UnmodifiableMapView(_commands);
+final _commands = <String, Command<T>>{};
+
+ArgParser get argParser => _argParser;
+final ArgParser _argParser;
+
+...
+
+/// Adds [Command] as a top-level command to this runner.
+void addCommand(Command<T> command) {
+  var names = [command.name, ...command.aliases];
+  for (var name in names) {
+    _commands[name] = command;
+    argParser.addCommand(name, command.argParser);
+  }
+  command._runner = this;
+}
+

以命令的名字和别名分别做为 key，command 做为 value，这就是为什么执行命令时不论使用的是命令的名字还是别名，执行的结果都是一样的，因为都指向同一个 Command。

如 ConfigCommand 对应的 flutter config --help 或是 flutter configure --help，输出的结果一致


+class ConfigCommand extends FlutterCommand {
+  ConfigCommand({ bool verboseHelp = false }) {
+    argParser.addFlag('analytics', help: 'Enable or disable reporting anonymously tool usage statistics and crash reports.');
+    argParser.addFlag('clear-ios-signing-cert', negatable: false, help: 'Clear the saved development certificate choice used to sign apps for iOS device deployment.');
+    argParser.addOption('android-sdk', help: 'The Android SDK directory.');
+    argParser.addOption('android-studio-dir', help: 'The Android Studio install directory.');
+    argParser.addOption('build-dir', help: 'The relative path to override a projects build directory.', valueHelp: 'out/');
+    argParser.addFlag('machine', negatable: false, hide: !verboseHelp, help: 'Print config values as json.');
+		...
+  }
+
+  @override
+  final String name = 'config';
+	...
+
+  @override
+  final List<String> aliases = <String>['configure'];
+  ...
+}
+

回来继续看 FlutterCommandRunner 实例 runner 的 run 方法

# FlutterCommandRunner.run

文件路径：lib/src/runner/flutter_command_runner.dart

@override
+Future<void> run(Iterable<String> args) {
+  ...
+  return super.run(args);
+}
+

FlutterCommandRunner 的 run 方法里主要还是调用了super.run，super.run 如下

Future<T?> run(Iterable<String> args) =>
+      Future.sync(() => runCommand(parse(args)));
+
+ArgResults parse(Iterable<String> args) {
+  try {
+    return argParser.parse(args);
+  } on ArgParserException catch (error) {
+    if (error.commands.isEmpty) usageException(error.message);
+
+    var command = commands[error.commands.first]!;
+    for (var commandName in error.commands.skip(1)) {
+      command = command.subcommands[commandName]!;
+    }
+
+    command.usageException(error.message);
+  }
+}
+

其先帮我们调用 argParser.parse 解析 args，再将解析后的数据传递给 runCommand 方法

# FlutterCommandRunner.runCommand

runCommand 方法

文件路径：lib/src/runner/flutter_command_runner.dart

@override
+Future<void> runCommand(ArgResults topLevelResults) async {
+  ...
+  await context.run<void>(
+    overrides: contextOverrides.map<Type, Generator>((Type type, Object? value) {
+      return MapEntry<Type, Generator>(type, () => value);
+    }),
+    body: () async {
+      ...
+      await super.runCommand(topLevelResults);
+    },
+  );
+}
+

注意：这里的 runCommand 是 FlutterCommandRunner 内重写了父类的 runCommand，最后在 body 内调用了父类(CommandRunner)的 runCommand 方法。

# CommandRunner.runCommand

文件路径：args/lib/command_runner.dart

Future<T?> runCommand(ArgResults topLevelResults) async {
+  var argResults = topLevelResults;
+  var commands = _commands;
+  Command? command;
+  var commandString = executableName;
+
+  while (commands.isNotEmpty) {
+    ...
+
+    // 取出匹配的command
+    argResults = argResults.command!;
+    command = commands[argResults.name]!;
+    command._globalResults = topLevelResults;
+    command._argResults = argResults;
+    // 取出子命令数组赋值给commands
+    commands = command._subcommands as Map<String, Command<T>>;
+    commandString += ' ${argResults.name}';
+
+    if (argResults.options.contains('help') && argResults['help']) {
+      command.printUsage();
+      return null;
+    }
+  }
+	...
+
+  return (await command.run()) as T?;
+}
+

匹配出 run 命令对应 RunCommand 实例的 command，并执行其 run 方法，即最后一行的 command.run()。

注：RunCommand 继承自 FlutterCommand，且没有重写 run 方法，所以这里的 command.run() 调用的就是 FlutterCommand 的 run 方法。

# 2、命令执行

# FlutterCommand.run

文件路径：lib/src/runner/flutter_command.dart

@override
+Future<void> run() {
+  ...
+
+  return context.run<void>(
+    name: 'command',
+    overrides: <Type, Generator>{FlutterCommand: () => this},
+    body: () async {
+      ...
+      try {
+        commandResult = await verifyThenRunCommand(commandPath);
+      } finally {
+        ...
+      }
+    },
+  );
+}
+

verifyThenRunCommand 方法进行校验并真正开始执行相应的命令

@mustCallSuper
+Future<FlutterCommandResult> verifyThenRunCommand(String? commandPath) async {
+  globals.preRunValidator.validate();
+  // 更新cache下的artifacts
+  if (shouldUpdateCache) {
+    // First always update universal artifacts, as some of these (e.g.
+    // ios-deploy on macOS) are required to determine `requiredArtifacts`.
+    final bool offline;
+    if (argParser.options.containsKey('offline')) {
+      offline = boolArg('offline');
+    } else {
+      offline = false;
+    }
+    await globals.cache.updateAll(<DevelopmentArtifact>{DevelopmentArtifact.universal}, offline: offline);
+    await globals.cache.updateAll(await requiredArtifacts, offline: offline);
+  }
+  globals.cache.releaseLock();
+
+  // 查找 pubspec.yaml 并更正项目路径
+  await validateCommand();
+
+  final FlutterProject project = FlutterProject.current();
+  project.checkForDeprecation(deprecationBehavior: deprecationBehavior);
+
+  if (shouldRunPub) {
+    final Environment environment = Environment(
+      artifacts: globals.artifacts!,
+      ...
+    );
+
+    await generateLocalizationsSyntheticPackage(
+      environment: environment,
+      buildSystem: globals.buildSystem,
+    );
+
+    // 对项目执行 pub get，下载依赖
+    await pub.get(
+      context: PubContext.getVerifyContext(name),
+      generateSyntheticPackage: project.manifest.generateSyntheticPackage,
+      checkUpToDate: cachePubGet,
+    );
+    await project.regeneratePlatformSpecificTooling();
+    if (reportNullSafety) {
+      await _sendNullSafetyAnalyticsEvents(project);
+    }
+  }
+
+  setupApplicationPackages();
+
+  if (commandPath != null) {
+    Usage.command(commandPath, parameters: CustomDimensions(
+      commandHasTerminal: globals.stdio.hasTerminal,
+    ).merge(await usageValues));
+  }
+
+  // 真正去执行相应的命令
+  return runCommand();
+}
+

这个方法主要做了以下几点：

  1. 更新 flutter/bin/cache 下的 artifacts
  2. 校验当前目录下是否有 pubspec.yaml 文件，没有就往父路径里找，并修正项目路径
  3. 执行 pub get 下载项目依赖
  4. runCommand() 执行的是 RunCommand 下的 runCommand

注：从这个地方开始才真正去执行 run 命令！

# RunCommand.runCommand

文件路径：lib/src/commands/run.dart

@override
+Future<FlutterCommandResult> runCommand() async {
+  // Enable hot mode by default if `--no-hot` was not passed and we are in
+  // debug mode.
+  final BuildInfo buildInfo = await getBuildInfo();
+  // 加载模式
+  final bool hotMode = shouldUseHotMode(buildInfo);
+  final String applicationBinaryPath = stringArg(FlutterOptions.kUseApplicationBinary);
+
+  ...
+
+  // 根据 hotMode 来创建 HotRunner 或 ColdRunner
+  final ResidentRunner runner = await createRunner(
+    applicationBinaryPath: applicationBinaryPath,
+    flutterDevices: flutterDevices,
+    flutterProject: flutterProject,
+    hotMode: hotMode,
+  );
+
+  ...
+  try {
+    final int result = await runner.run(
+      appStartedCompleter: appStartedTimeRecorder,
+      enableDevTools: stayResident && boolArg(FlutterCommand.kEnableDevTools),
+      route: route,
+    );
+    ...
+  } on RPCError catch (error) {
+    ...
+  }
+  return FlutterCommandResult(
+    ExitStatus.success,
+    timingLabelParts: <String>[
+      if (hotMode) 'hot' else 'cold',
+      getModeName(getBuildMode()),
+      ...
+    ],
+    endTimeOverride: appStartedTime,
+  );
+}
+

这部分主要是根据 hotMode 来创建 HotRunner 或 ColdRunner（忽略 web~），然后执行 HotRunner 的 run 方法

@visibleForTesting
+Future<ResidentRunner> createRunner({
+  @required bool hotMode,
+  @required List<FlutterDevice> flutterDevices,
+  @required String applicationBinaryPath,
+  @required FlutterProject flutterProject,
+}) async {
+  if (hotMode && !webMode) {
+    return HotRunner(
+      ...
+    );
+  } else if (webMode) {
+    return webRunnerFactory.createWebRunner(
+      ...
+    );
+  }
+  return ColdRunner(
+    ...
+  );
+}
+

那 hotMode 是怎么来的呢？我们点进 shouldUseHotMode 方法里看一下

ArgResults? get argResults => _argResults;
+ArgResults? _argResults;
+bool boolArgDeprecated(String name) => argResults?[name] as bool? ?? false;
+bool get traceStartup => boolArgDeprecated('trace-startup');
+
+bool shouldUseHotMode(BuildInfo buildInfo) {
+  final bool hotArg = boolArgDeprecated('hot');
+  final bool shouldUseHotMode = hotArg && !traceStartup;
+  return buildInfo.isDebug && shouldUseHotMode;
+}
+

hot 和 trace-startup 是从 _argResults 取值，而 ArgResults 内部实现 [] 操作符，代码如下：

class ArgResults {
+  ...
+  dynamic operator [](String name) {
+    if (!_parser.options.containsKey(name)) {
+      throw ArgumentError('Could not find an option named "$name".');
+    }
+
+    return _parser.options[name]!.valueOrDefault(_parsed[name]);
+  }
+  ...
+}
+

所以 hot 和 trace-startup 是从 options 取值

而 RunCommand 在被实例化时就把 hot 和 trace-startup 选项也添加进去了

const bool kHotReloadDefault = true;
+
+...
+
+abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
+  RunCommandBase({ required bool verboseHelp }) {
+    ...
+    argParser
+      ..addFlag('trace-startup',
+        negatable: false,
+        help: 'Trace application startup, then exit, saving the trace to a file. '
+              'By default, this will be saved in the "build" directory. If the '
+              'FLUTTER_TEST_OUTPUTS_DIR environment variable is set, the file '
+              'will be written there instead.',
+      )
+      ...
+    }
+}
+...
+
+class RunCommand extends RunCommandBase {
+  RunCommand({ bool verboseHelp = false }) : super(verboseHelp: verboseHelp) {
+      ...
+      ..addFlag('hot',
+        defaultsTo: kHotReloadDefault,
+        help: 'Run with support for hot reloading. Only available for debug mode. Not available with "--trace-startup".',
+      )
+      ...
+  }
+  ...
+}
+

addFlag 方法的代码如下：

void addFlag(String name,
+    {String? abbr,
+    String? help,
+    bool? defaultsTo = false,
+    bool negatable = true,
+    void Function(bool)? callback,
+    bool hide = false,
+    List<String> aliases = const []}) {
+  _addOption(...);
+}
+...
+void _addOption(
+    String name,
+    String? abbr,
+    String? help,
+    String? valueHelp,
+    Iterable<String>? allowed,
+    Map<String, String>? allowedHelp,
+    defaultsTo,
+    Function? callback,
+    OptionType type,
+    {bool negatable = false,
+    bool? splitCommas,
+    bool mandatory = false,
+    bool hide = false,
+    List<String> aliases = const []}) {
+  var allNames = [name, ...aliases];
+  ...
+
+  var option = newOption(...);
+  _options[name] = option;
+  _optionsAndSeparators.add(option);
+  for (var alias in aliases) {
+    _aliases[alias] = name;
+  }
+}
+

由此可见，调用 addFlag 方法其实是在往 _options 里添加 option，而 RunCommand 在初始化的时候就已经做了这个操作。

options 和 _options 两者的关系：options 是 _options 的不可修改引用，代码如下：

class ArgParser {
+  final Map<String, Option> _options;
+
+  /// The options that have been defined for this parser.
+  final Map<String, Option> options;
+
+  ...
+  ArgParser._(Map<String, Option> options, Map<String, ArgParser> commands,
+    this._aliases,
+    {bool allowTrailingOptions = true, this.usageLineLength})
+    : _options = options,
+      options = UnmodifiableMapView(options),
+      ...
+}
+

所以说，对 options 取值其实就是对 _options 取值！

// Enable hot mode by default if `--no-hot` was not passed and we are in
+// debug mode.
+

hot 选项默认为 true，如果你想将选项 hot 置为 false，可以使用选项 --no-hot，这是官方的 args (opens new window) 库提供的语法

再来看一下 buildInfo.isDebug

class BuildInfo {
+  ...
+  bool get isDebug => mode == BuildMode.debug;
+  ...
+}
+

总结：hotMode 的值由 hot 选项、trace-startup 选项和当前的编译模式共同决定。

# HotRunner.run

文件路径：lib/src/run_hot.dart

HotRunner 的 run 方法：

@override
+Future<int> run({
+  Completer<DebugConnectionInfo> connectionInfoCompleter,
+  Completer<void> appStartedCompleter,
+  bool enableDevTools = false,
+  String route,
+}) async {
+  ...
+
+  final List<Future<bool>> startupTasks = <Future<bool>>[];
+  for (final FlutterDevice device in flutterDevices) {
+    // 初始化前端编译器
+    await runSourceGenerators();
+    if (device.generator != null) {
+      ...
+      startupTasks.add(
+        // 编译项目代码
+        // outputPath: 编译产物路径，如：xx/xx/app.dill
+        device.generator.recompile(
+          mainFile.uri,
+          <Uri>[],
+          suppressErrors: applicationBinary == null,
+          checkDartPluginRegistry: true,
+          outputPath: dillOutputPath ??
+            getDefaultApplicationKernelPath(
+              trackWidgetCreation: debuggingOptions.buildInfo.trackWidgetCreation,
+            ),
+          packageConfig: debuggingOptions.buildInfo.packageConfig,
+          projectRootPath: FlutterProject.current().directory.absolute.path,
+          fs: globals.fs,
+        ).then((CompilerOutput output) {
+          compileTimer.stop();
+          totalCompileTime += compileTimer.elapsed;
+          return output?.errorCount == 0;
+        })
+      );
+    }
+
+    final Stopwatch launchAppTimer = Stopwatch()..start();
+    startupTasks.add(device.runHot(
+      hotRunner: this,
+      route: route,
+    ).then((int result) {
+      totalLaunchAppTime += launchAppTimer.elapsed;
+      return result == 0;
+    }));
+  }
+
+  ...
+
+  // 附加
+  return attach(
+    connectionInfoCompleter: connectionInfoCompleter,
+    appStartedCompleter: appStartedCompleter,
+    enableDevTools: enableDevTools,
+  );
+}
+

一共执行了两个任务：

  • 执行 device.generator.recompile，从项目中的 main.dart 开始进行编译，产出 app.dill 文件
  • 执行 device.runHot，编译运行 App

# FlutterDevice.runHot

文件路径：lib/src/resident_runner.dart

Future<int> runHot({
+  HotRunner hotRunner,
+  String route,
+}) async {
+  ...
+  
+  // Start the application.
+  final Future<LaunchResult> futureResult = device.startApp(
+    package,
+    mainPath: hotRunner.mainPath,
+    debuggingOptions: hotRunner.debuggingOptions,
+    platformArgs: platformArgs,
+    route: route,
+    prebuiltApplication: prebuiltMode,
+    ipv6: hotRunner.ipv6,
+    userIdentifier: userIdentifier,
+  );
+  
+  final LaunchResult result = await futureResult;
+  
+  ...
+  return 0;
+}
+

这里的 device.runHot 以 iOS 的为例，所以此时 device 的类型为 IOSDevice，找到该类的 startApp 方法

文件路径：lib/src/ios/devices.dart

@override
+Future<LaunchResult> startApp(
+  IOSApp package, {
+  String? mainPath,
+  String? route,
+  required DebuggingOptions debuggingOptions,
+  Map<String, Object?> platformArgs = const <String, Object?>{},
+  bool prebuiltApplication = false,
+  bool ipv6 = false,
+  String? userIdentifier,
+  @visibleForTesting Duration? discoveryTimeout,
+}) async {
+  String? packageId;
+
+  if (!prebuiltApplication) {
+    _logger.printTrace('Building ${package.name} for $id');
+
+    // Step 1: 编译xcode项目
+    final XcodeBuildResult buildResult = await buildXcodeProject(
+        app: package as BuildableIOSApp,
+        buildInfo: debuggingOptions.buildInfo,
+        targetOverride: mainPath,
+        activeArch: cpuArchitecture,
+        deviceID: id,
+    );
+    ...
+    packageId = buildResult.xcodeBuildExecution?.buildSettings['PRODUCT_BUNDLE_IDENTIFIER'];
+  }
+
+  packageId ??= package.id;
+
+  // Step 2: 检查编译后的app文件是否存在
+  final Directory bundle = _fileSystem.directory(package.deviceBundlePath);
+  if (!bundle.existsSync()) {
+    _logger.printError('Could not find the built application bundle at ${bundle.path}.');
+    return LaunchResult.failed();
+  }
+
+  // Step 3: 尝试给设备安装app
+  final String dartVmFlags = computeDartVmFlags(debuggingOptions);
+  final List<String> launchArguments = <String>[
+    '--enable-dart-profiling',
+    ...
+  ];
+
+  final Status installStatus = _logger.startProgress(
+    'Installing and launching...',
+  );
+  try {
+    ProtocolDiscovery? observatoryDiscovery;
+    int installationResult = 1;
+    if (debuggingOptions.debuggingEnabled) {
+      ...
+      // 调试模式下开启observatory服务
+      observatoryDiscovery = ProtocolDiscovery.observatory(
+        deviceLogReader,
+        portForwarder: portForwarder,
+        hostPort: debuggingOptions.hostVmServicePort,
+        devicePort: debuggingOptions.deviceVmServicePort,
+        ipv6: ipv6,
+        logger: _logger,
+      );
+    }
+    // 通过ios-deploy安装App到设备（并附加）
+    if (iosDeployDebugger == null) {
+      installationResult = await _iosDeploy.launchApp(
+        deviceId: id,
+        bundlePath: bundle.path,
+        appDeltaDirectory: package.appDeltaDirectory,
+        launchArguments: launchArguments,
+        interfaceType: interfaceType,
+      );
+    } else {
+      installationResult = await iosDeployDebugger!.launchAndAttach() ? 0 : 1;
+    }
+    ...
+    return LaunchResult.succeeded(observatoryUri: localUri);
+  } on ProcessException catch (e) {
+    await iosDeployDebugger?.stopAndDumpBacktrace();
+    _logger.printError(e.message);
+    return LaunchResult.failed();
+  } finally {
+    installStatus.stop();
+  }
+}
+

这部分的几个主要操作：

  1. 编译 Xcode 项目
  2. 检查编译后的 app 文件是否存在
  3. 调试模式下开启 observatory 服务
  4. 通过 ios-deploy 安装 App 到设备（并附加）

在第4点所对应的代码处，会调用 launchAndAttach 方法，即上一篇中 pr 主要修改的地方。

到此对 flutter run 命令的探索就结束了，相信大家对开头提出的疑问已经有了答案，感谢你的耐心观看。

+ +
+
#Dart#Flutter
Flutter - 我给官方提PR，解决run命令卡住问题 😃
Flutter - 引擎调试（iOS篇）🛠

+ ← + Flutter - 引擎调试（iOS篇）🛠→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/46b6cc/index.html b/pages/46b6cc/index.html new file mode 100644 index 000000000..5e905e460 --- /dev/null +++ b/pages/46b6cc/index.html @@ -0,0 +1,220 @@ + + + + + + iOS-组件化开发（四）：fastlane实现pod自动化 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-06
目录

iOS-组件化开发（四）：fastlane实现pod自动化

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

在第一次组件化的时候，需要执行很多操作，这些操作可以在【iOS-组件化开发（一）：远程私有库的基本使用】，这里就不再赘述，在组件化后的重复性操作就是升级，而升级这个过程是一模一样的。那么，我们有什么办法可以很方便的搞定这一过程来节约我们大量的时间呢？

# 一、升级必备操作

修改完核心代码后，一共还需要做以下几步：
+1、修改spec文件（修改s.version，s.description等）
+2、pod install （使Example与pod下来的库产生关联）
+3、提交本地仓库代码至远程仓库
+4、打标签，并提交至远程
+5、验证spec，并提至私有索引库

# 二、Fastlane

# 1、简介

Fastlane文档说明 (opens new window) +Fastlane是一个ruby脚本集合，它可以按照我们指定的路线，在指定位置执行我们所要执行的操作。这里我们称这样的路线为「航道(lane)」，这样的操作称为「Action」

Action是Fastlane自动化流程中的最小执行单元，用来执行Fastlane脚本中的命令，关于更多的描述可以到Actions - fastlane docs (opens new window)查看，里面也介绍了常用的action有哪些，顺带附上action的源码地址 (opens new window)，这个源码在后面自定义起参考作用

# 2、 安装

  • 确保ruby为最新版本
brew update
+brew install ruby
+
  • 安装fastlane
sudo gem install -n /usr/local/bin fastlane
+
  • 查看当前fastlane版本
fastlane --version
+
  • 查看所有action
fastlane actions
+

# 三、fastlane初始化

cd到你的本地组件仓库的根目录

  • 初始化fastlane fastlane init 不过这个步骤对我们来说可以跳过，在init后提示你输入一些东西，包括上传需要用到的APPLE ID什么的一堆东西，由于我们并不涉及这些，所以我们使用更方便的方式
# 创建一个fastlane文件夹
+# 进入fastlane目录
+# 创建一个Fastfile文件
+mkdir fastlane
+cd fastlane
+touch Fastfile
+

目录结构

# 1、修改Fastfile

desc '描述航道作用'
+lane :航道名称 do |options|
+
+// options 可以用来传递参数
+// 示例：varName = options[:name]
+
+// 航道上需要执行的操作
+
+end
+

航道上要扫描的操作可以到Actions (opens new window)上查找，可以通过关键字搜索，如下图

cocoapods

点进去可以看到具体的使用及参数说明

使用说明

这里附上本人的Fastfile内容：

desc 'LXFUpdatePodTool 航道用来自动化升级维护私有库'
+lane : LXFUpdatePodTool do |options|
+
+tagNum = options[:tag]
+podspecName = options[:specName]
+
+# 航道上需要执行的操作
+# 具体action到 https://docs.fastlane.tools/actions 上面查找
+# 这里的路径以仓库根目录为准
+
+# 1、修改spec文件（修改s.version，s.description等）
+# 2、pod install （使Example与pod下来的库产生关联）
+cocoapods(
+  clean: true,
+  podfile: "./Example/Podfile"
+)
+
+
+# 3、提交本地仓库代码至远程仓库
+git_add(path: ".")
+git_commit(path: ".", message: "upgrade repo")
+push_to_git_remote
+
+
+# 4、打标签，并提交至远程
+add_git_tag(
+  tag: tagNum
+)
+push_git_tags
+
+
+# 5、验证spec，并提至私有索引库
+pod_lib_lint(allow_warnings: true)
+# 因为本地索引库repo的名字是基本上不会去改变的，所以这里直接写死 LXFSpecs
+# podspec的名字需要由外界传入
+pod_push(path: "#{podspecName}.podspec", repo: "LXFSpecs")
+
+
+end
+

# 2、验证Fastfile

fastlane lanes
+

Fastfile验证成功

# 3、执行fastlane

需要在组件仓库的根目录下执行

根目录

fastlane LXFUpdatePodTool tag:0.1.1 specName:LXFMain
+

开始执行

上传完成

整个执行过程不超过30秒～

# 四、自定义Action

以上的过程已经可以完成一整个自动化更新了，但是有一点需要注意的是，这个输入的tag可能会面临一个问题，那就是本地和远程都可能已经存在，即发生冲突，这个时候我们可以选择自动删除本地和远程冲突的那个tag，再重新上传当前tag

# 1、创建一个新的action

fastlane new_action
+

按要求输入Action名称

输入action名称

完成后fastlane目录下就会多出一个名为actions的文件夹，里面存放的就是你自定义action

# 2、编辑自定义action

打开remove_git_tag.rb，开始自定义我们的action吧，什么？不会语法怎么办？可以参考别人的嘛，上面给出的action的源码地址 (opens new window)就有用武之地了，比如pod_push (opens new window)。这里我直接贴出我已经完成的主要代码

# 可以使用 fastlane action remove_git_tag 来参看详细描述
+
+def self.run(params)
+  # 这里写要执行的操作 
+  # params[:参数名称] 参数名称与下面self.available_options中的保持一致
+  tagNum = params[:tagNum]
+  rmLocalTag = params[:rmLocalTag]
+  rmRemoteTag = params[:rmRemoteTag]
+
+  command = []
+  if rmLocalTag
+    # 删除本地标签
+    # git tag -d 标签名称
+    command << "git tag -d #{tagNum}"
+  end
+  if rmRemoteTag
+    # 删除远程标签
+    # git push origin :标签名称
+    command << "git push origin :#{tagNum}"
+  end
+
+  result = Actions.sh(command.join('&'))
+  UI.success("Successfully remove tag 🚀 ")
+  return result
+
+end
+
+def self.description
+  # 对当前脚本的简单描述
+  "删除tag"
+end
+
+def self.details
+  # 对当前脚本的具体描述
+  "使用当前action来删除本地和远程冲突的tag"
+end
+
+def self.available_options
+  # 用来传递参数
+  [ 
+    FastlaneCore::ConfigItem.new(key: :tagNum,
+                                  description: "输入即将删除的tag",
+                                  is_string: true),
+    FastlaneCore::ConfigItem.new(key: :rmLocalTag,
+                                  description: "是否删除本地tag",
+                                  optional:true,
+                                  is_string: false,
+                                  default_value: true),
+    FastlaneCore::ConfigItem.new(key: :rmRemoteTag,
+                                  description: "是否删除远程tag",
+                                  optional:true,
+                                  is_string: false,
+                                  default_value: true)
+  ]
+end
+
+def self.authors
+  # 作者姓名
+  ["LinXunFeng"]
+end
+

# 3、查看action描述

同样，这里先cd到组件库的根目录下执行，原因是这个自定义action只存在当前根目录下的fastlane中，其它fastlane的非自定义的action就不用在当前根目录下操作～

fastlane action remove_git_tag
+

查看具体描述

# 4、测试执行

先来看看当前组件库已存在的tag

git tag
+

已存在的tag

可以看到，我是已经有一个0.1.1版本的了。这时我们再来执行一次LXFUpdatePodTool航道

fastlane LXFUpdatePodTool tag:0.1.1 specName:LXFMain
+

自动清除

# 五、工具拿走

LXFUpdatePodTool (opens new window) 已经传到我的GitHub上，需要的同学就拿走吧，顺手给个Star咯 Orz

+ +
+
#iOS#Git#GitHub#Cocoapods#组件化
iOS-组件化开发（三）：加载资源文件
iOS - 给高仿微信添加直播聊天功能

+ ← + iOS - 给高仿微信添加直播聊天功能→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4784fc/index.html b/pages/4784fc/index.html new file mode 100644 index 000000000..dceb4e4e0 --- /dev/null +++ b/pages/4784fc/index.html @@ -0,0 +1,154 @@ + + + + + + Flutter - 热更新 Shorebird 1.0 正式版来了 🐦 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2024-04-17
目录

Flutter - 热更新 Shorebird 1.0 正式版来了 🐦

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

等了这么久，就在 4月9号 这一天，Shorebird 的 1.0 正式版终于来了！本次最关心的还是对 iOS 的热更新支持得如何了，因为在之前的版本中，iOS 的性能表现简直差到无法使用~

先给个结论：iOS 端终于能用了！通过测试，iOS 端打完补丁后的性能表现已达上线水平 🥳

需要注意的是：

iOS 热更新稳定版本需要使用最新版本的 Shorebird CLI (1.0.0) 和最新稳定版本的 Flutter (3.19.5)。

但是

对，但是，先不要着急用！

# 二、踩坑

我在发布的当天就升级到 1.0 来尝尝鲜，结果在打完补丁后，有几个页面灰屏了！！！

当时脑袋嗡嗡的，我就只改了文本的颜色，不至于吧~ 😕

根据控制台的报错的内容定位到了项目里以下两处代码（已简化）

bool _isExist(SomeType type) {
+  try {
+    final model = state.models.firstWhere(
+      (element) => element.type == type,
+    );
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
String value = '';
+...
+try {
+  return json.decode(value);
+} catch (e) {
+  return null;
+}
+

推测 tryCatch 失效了，然后我建了一个最小的 Demo 做测试，竟然一切正常。。。

然后开始忙需求去了，直到 4月15号 小伙伴说官方有提到相关说明，如下图所示

还真是 tryCatch 导致的，现在我们能做的就是静静的等待下个版本了。

# 三、脚本适配（混编）

关于基本使用，这里就不再赘述，有需要的小伙伴可以看我之前的两篇文章

我们接下来讲一讲升级到正式版后的一些调整

以下是 Shorebird 的 1.0 与 0.22.1 版本之间的命令改动

# ios-framework-alpha 改名为 ios-framework

- shorebird release ios-framework-alpha --release-version 7.0.0+1
++ shorebird release ios-framework --release-version 7.0.0+1
+

# flutter versions use 废弃

现在你再按如下命令执行，会提示你找不到 use

shorebird flutter versions use 3.19.3
+Could not find a subcommand named "use" for "shorebird flutter versions".
+
+Usage: shorebird flutter versions <subcommand> [arguments]
+-h, --help    Print this usage information.
+
+Available subcommands:
+  list   List available Flutter versions.
+
+Run "shorebird help" to see global options.
+

如果你需要指定 Flutter 版本，就得在 release 命令中使用 --flutter-version

# 安卓
+shorebird release aar --release-version=7.0.0+1 --flutter-version=3.19.5
+
+# iOS
+shorebird release ios-framework --release-version=7.0.0+1 --flutter-version=3.19.5
+

# release 的 --force 废弃

The --force flag has been deprecated
+If you believe you have a valid reason to use the --force flag, please reach out to the Shorebird team by filing an issue at https://github.com/shorebirdtech/shorebird/issues/new
+
- shorebird release aar -f --release-version 7.0.0+1
++ shorebird release aar --release-version 7.0.0+1
+

# Flutter 3.19 补丁

在【Flutter - 升级3.19之后页面多次rebuild？🤨 (opens new window)】一文中有讲到补丁需要去到 Flutter 源码目录下执行。我们知道，Shorebird 的热更新是魔改 Flutter 实现的，所以我们就需要去找到用来打包时的魔改版 Flutter 的目录位置。

下载的 Flutter 源码统一存放在如下目录

~/.shorebird/bin/cache/flutter
+
+.
+├── 5b9d29d67adb059103beefb65710ee3dabae2f85
+├── 771d07b2cf97cf107bae6eeedcf41bdc9db772fa
+├── a3d5f7c614aa1cc4d6cb1506e74fd1c81678e68e
+├── a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da
+└── b9b23902966504a9778f4c07e3a3487fa84dcb2a
+

但是目录中都是以 hash 码命名的目录，要找到对应版本的目录，可以查看如下文件里的值

~/.shorebird/bin/internal/flutter.version
+
+# a6d1747d7f573b2ba2e2b96db1b76ed2f3f024da
+

如果原先的 flutter versions use 还能用的话，一切就很简单了，先切到对应的 Flutter 版本，然后 cat 一下该文件，拿到 hash 码就可以进入到对应版本的 Flutter 目录，但是它已经被废弃了，所以得换另一个思路。

我们依旧可以通过 flutter.version 拿到 hash 码，但是它是当前最新受支持的 Flutter 版本的，不过不慌，拿到后进入到该 Flutter 目录，因为它是以 git 的方式拉取下来的，所以有分支记录。

我们可以通过 git rev-parse 命令拿到指定版本的 hash。

git rev-parse --verify refs/remotes/origin/flutter_release/3.19.3
+
+# 得到如下输出
+# 0addba5b750987523c04ebe69e9755509369615a
+

# 四、脚本使用（混编）

专门服务于混编项目的 Python 脚本，用于切换原生端集成 Flutter 的方式（源码 或 二进制），以及封装 Shorebird 命令的使用。

我们日常研发依旧使用的是源码依赖的方式，只会在打最终测试包时才需要通过脚本切到二进制依赖，并结合 Jenkins 来辅助完成这种万年不变的无聊步骤~

Github: https://github.com/LinXunFeng/script_box/tree/main/flutter (opens new window)

# switch_flutter_integrate.py

切换 Flutter 项目的集成方式

参数 描述
-p 原生工程路径
-f 平台（ios / android）
# 二进制依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'binary' -f 'ios'
+
+# 源码依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'source' -f 'ios' 
+

# shorebird.py

自动获取版本号，并执行 Shorebird 相关命令

参数 描述
-p 原生工程路径
-s Flutter 工程路径
-m 模式 （release / patch）
-f 平台（ios / android）
--flutter_version Flutter 版本号，如：3.19.3
--patch_fix 是否打 3.19 补丁，如需要请传 1
# release
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f ios
+# 指定 Flutter 版本，以及打 3.19 的补丁
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f ios --flutter_version=3.19.3 --patch_fix=1
+
+# patch
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m patch -f ios
+
+ +
+
Flutter - 升级3.19之后页面多次rebuild？🤨
Flutter - 使用Pigeon实现视频缓存插件 🐌

+ ← + Flutter - 使用Pigeon实现视频缓存插件 🐌→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/48f6d3/index.html b/pages/48f6d3/index.html new file mode 100644 index 000000000..3cf1f30e0 --- /dev/null +++ b/pages/48f6d3/index.html @@ -0,0 +1,157 @@ + + + + + + Ubuntu安装nginx来搭建推流服务器 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

Ubuntu安装nginx来搭建推流服务器

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 安装nginx

安装两个依赖库

sudo apt-get install autoconf automake
+sudo apt-get install libpcre3 libpcre3-dev
+

安装zlib库

sudo apt-get install openssl
+sudo apt-get install libssl-dev
+

如果安装命令回车之后出现如下信息，请参考【Ubuntu “无法获得锁”解决方案】 (opens new window)解决，但是我亲测对我没用，直接重启搞定

E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
+E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它？
+

进入家目录，新建一个文件夹，这里以lxf为例

cd ~
+mkdir lxf
+

下载所需源码

// 下载nginx-rtmp源码
+wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
+// 修改压缩包的名字
+mv master.zip module.zip
+
// 下载nginx
+wget https://github.com/nginx/nginx/archive/master.zip
+
// 下载nginx的依赖pcre源码
+wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz
+

下载完成之后使用unzip命令进行解压

unzip master.zip 
+unzip module.zip
+tar -zxvf pcre-8.39.tar.gz
+

配置编译文件，准备编译安装

// 先进入nginx-master目录
+cd nginx-master/
+

在nginx-master目录下有一个auto文件夹，里面有一个名为configure的配置文件，我们先来通过它进行一些配置

// prefix:指定安装目录
+// add-module:指定模块文件夹
+auto/configure --prefix=/usr/local/nginx --with-pcre=../pcre-8.39 --with-http_ssl_module --with-http_v2_module --with-http_flv_module --with-http_mp4_module --add-module=../nginx-rtmp-module-master/
+

配置好之后会多出一个Makefile文件(一种配置文件，定义了一系列的规则来指定编译操作)与objs文件夹

// 编译
+make
+// 安装
+sudo make install
+

当你make后，看到则代表编译成功

make成功

再执行【sudo make install】，看到这个则代表安装完成

安装完成

现在我们去测试一下

 cd /usr/local/nginx/sbin/
+sudo ./nginx -t
+

看到successful说明配置文件正确！，如果是failed的话看看你是不是没加sudo

配置文件正确

启动nginx服务器

sudo ./nginx
+

默认端口是80，所以直接到浏览器中直接敲入本地地址 127.0.0.1，显示【Welcome to nginx!】就代表nginx已经成功安装

# 配置nginx

创建推流存放文件夹

// 为里以 /usr/local/var/www/hls 为例
+cd /usr/local
+sudo mkdir -p var/www/hls
+

进入nginx的conf目录，使用vim编辑nginx.conf文件

cd /usr/local/nginx/conf
+sudo vim nginx.conf
+

配置Nginx，支持http协议拉流

location /hls {
+  types {
+    application/vnd.apple.mpegurl    m3u8;
+    video/mp2t ts;
+  }
+  root /usr/local/var/www;
+   add_header Cache-Control    no-cache;
+}
+

配置Nginx，支持rtmp协议推流

rtmp {
+    server {
+        listen 1935;
+        application rtmplive {
+            live on;
+            max_connections 1024;
+        }
+        application hls{
+            live on;
+            hls on;
+            hls_path /usr/local/var/www/hls;
+            hls_fragment 1s;
+        }
+    }
+}
+

hls

rtmp

重启nginx服务器

cd /usr/local/nginx/sbin/
+sudo ./nginx -s reload
+

如果执行【sudo ./nginx -s reload】出现下面这个问题

nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)
+

就使用nginx -c的参数指定nginx.conf文件的位置，接着再reload一下就好了

sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
+

我Ubuntu地址为192.168.123.191

推流至RTMP到服务器 rtmp://192.168.123.191:1935/rtmplive/lxf

ffmpeg -re -i 异形.契约.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://192.168.123.191:1935/rtmplive/lxf
+

推流至HLS到服务器 http://192.168.123.191/hls/lxf.m3u8

ffmpeg -re -i 异形.契约.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://192.168.123.191:1935/hls/lxf
+

如果出现如下错误说明你的电脑没安装ffmpeg

-bash: ffmpeg: command not found
+

使用Homebrew来安装FFmpeg

// 安装Homebrew
+ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+// 安装FFmpeg
+brew install ffmpeg
+

开始推流，终端上就开始不断的刷新推流信息

开始推流

我们可以用电脑上的VLC这个软件来测试是否推流成功

VLC

打开流

OK，rmtp打开正常，hls就不演示了，一样的

rmtp打开成功

+ +
+
#Ubuntu#Linux
AppRTC实战

AppRTC实战→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4b18ae/index.html b/pages/4b18ae/index.html new file mode 100644 index 000000000..a536137e9 --- /dev/null +++ b/pages/4b18ae/index.html @@ -0,0 +1,219 @@ + + + + + + Flutter - 混合开发 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-07-12
目录

Flutter - 混合开发

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

目前大多数公司都有自己开发多年的项目，不可能直接用 Flutter 从头开发一套，那样不实现，除非是小项目，因此只能是在原有的基础上用 Flutter 来开发新业务或重构旧业务，而这里就需要用到 Flutter 的 混合开发

# 一、创建Flutter模块

使用混合开发就不能像之前一样直接上来就创建一个 Flutter 项目，而是要使用 Flutter模板

# flutter_module_lxf 可以随便你命名
+flutter create --template module flutter_module_lxf
+
+# --template 可以替换为 -t
+# flutter create -t module flutter_module_lxf
+

创建出来的 Flutter 模块依然是可以像之前创建的Flutter项目 一样打开和运行的。

目录下有也有 ios 和 android 目录，只不过前面加了个点 ，成了点目录。

# 二、iOS

# 集成

通过 Cocoapods ，将 Flutter 模块编译成一个库，再到原生项目中进行引入和使用即可

在 Podfile 中添加两行配置

# 指定我们刚刚创建的 Flutter 模块的路径
+flutter_application_path = '../flutter_module_lxf'
+
+# 拼接脚本文件的路径: .ios/Flutter/podhelper.rb
+load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
+

在每个需要引用 Flutter 的 Target 下，都需要添加一行配置

install_all_flutter_pods(flutter_application_path)
+

添加后如下所示：

flutter_application_path = '../flutter_module_lxf'
+load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
+
+use_frameworks!
+target 'LXFFlutterHybridDemo' do
+  
+  install_all_flutter_pods(flutter_application_path)
+  
+end
+

添加完成后，执行一次 pod install

混合开发混合开发

# 使用

两个步骤

  1. 获取 Flutter引擎 FlutterEngine
  2. 通过 FlutterEngine 创建 FlutterViewController

# 基本使用

AppDelegate 类中声明一个 FlutterEngine 变量，在 didFinishLaunchingWithOptions 方法中启动 Flutter引擎

// AppDelegate.swift
+
+import Flutter
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+  
+    // 创建 Flutter引擎
+    lazy var flutterEngine = FlutterEngine(name: "lxf")
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        
+        // 启动 Flutter引擎
+        flutterEngine.run()
+        
+        return true
+    }
+  
+  ...
+}
+

ViewController 中添加一个按钮，点击弹出 Flutter模块

// ViewController.swift
+
+override func viewDidLoad() {
+  super.viewDidLoad()
+
+  let btn = UIButton(type: .custom)
+  btn.frame = CGRect(x: 100, y: 200, width: 200, height: 44)
+  btn.backgroundColor = .black
+  btn.addTarget(self, action: #selector(showFlutterVc), for: .touchUpInside)
+  btn.setTitle("弹出Flutter模块", for: .normal)
+  self.view.addSubview(btn)
+}
+
+@objc func showFlutterVc() {
+  // 创建FlutterViewController
+  // 这里的 engine 可以传 nil，Flutter会帮我们自动创建一个引擎，但是性能较差
+  let flutterVc = FlutterViewController(engine: fetchFlutterEngine(), nibName: nil, bundle: nil)
+  self.present(flutterVc, animated: true, completion: nil)
+}
+
+func fetchFlutterEngine() -> FlutterEngine {
+  return (UIApplication.shared.delegate as! AppDelegate).flutterEngine
+}
+

如果遇到报 Command PhaseScriptExecution failed with a nonzero exit code 错误，如下图所示：

请先用 Android Studio 或 VSCode 打开 Flutter模块 项目并运行到iOS设备上，让其帮我们对iOS项目进行一些初始化配置。成功运行后就可以关闭 Flutter模块 项目的运行了，接着再用 Xcode 打开原生项目运行即可。

# 修改初始路由

官方文档里面提到，修改初始路由，需要在 Flutter引擎 在 run 之前，通过 invokeMethod 调用 setInitialRoute 方法进行设置，代码如下

// 修改初始路由
+flutterEngine.navigationChannel.invokeMethod("setInitialRoute", arguments: "/other")
+// 启动 Flutter引擎
+flutterEngine.run()
+

但是，我发现这样写并没有起任何作用，在 Flutter 的官方 issue 上也有人提到这个问题： 【setInitialRoute is broken for iOS add-to-app #59895】 (opens new window)，目前只能官方进行修复和调整 API

临时可以使用如下方式实现：

let flutterVc = FlutterViewController(project: FlutterDartProject(), nibName: nil, bundle: nil)
+flutterVc.setInitialRoute("/other")
+self.present(flutterVc, animated: true, completion: nil)
+

虽然这么写可以实现这个功能，但是会有明显的类似卡顿的现象，因为使用这种方式去创建 FlutterViewController 之前，会隐式创建和启动一个 FlutterEngine，而我们弹出 FlutterViewController 时 FlutterEngine 还没加载完毕，所以我们会看到先弹出了一个透明的界面，再显示 /other 路由对应的界面视图。

# 使用 FlutterAppDelegate

使用 FlutterAppDelegate这个不是必要的操作，但是如果你想让 Flutter模块 也能使用原生的功能的话，建议使用

原生功能

  • 处理 openURL 的回调
  • 列表视图在点击状态栏后滚到顶部
class AppDelegate: FlutterAppDelegate 
+

更具体的使用，请阅读 官方文档 (opens new window)

# 三、Android

修改安卓项目 根目录下的 settings.gradle 文件

// settings.gradle
+
+include ':app'                                    // assumed existing content
+setBinding(new Binding([gradle: this]))                                // new
+evaluate(new File(                                                     // new
+  settingsDir.parentFile,                                              // new
+  // 这里的 flutter_module_lxf 请修改为你自己创建的Flutter模板目录名称
+  'flutter_module_lxf/.android/include_flutter.groovy'                 // new
+))  
+

修改安卓项目 app 目录下的 build.gradle 文件

// app/build.gradle
+
+dependencies {
+  ...
+  // 配置flutter依赖
+  implementation project(':flutter')
+}
+

如果在编译的时候遇到如下错误

Default interface methods are only supported starting with Android N (--min-api 24): void androidx.lifecycle.DefaultLifecycleObserver.onCreate(androidx.lifecycle.LifecycleOwner)
+

请确认是否指定了使用 Java 8 进行编译 【官方文档 - Java 8 requirement】 (opens new window)

修改安卓项目 app 目录下的 build.gradle 文件

// app/build.gradle
+
+android {
+	...
+  compileOptions {
+      sourceCompatibility 1.8
+      targetCompatibility 1.8
+  }
+  ...
+}
+

修改 app/src/main/AndroidManifest.xml 文件

// app/src/main/AndroidManifest.xml
+
+<activity
+  android:name="io.flutter.embedding.android.FlutterActivity"
+  android:theme="@style/AppTheme"
+  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
+  android:hardwareAccelerated="true"
+  android:windowSoftInputMode="adjustResize"
+  />
+

添加一个按钮，点击弹出 Flutter模块

<!--  activity_main.xml  -->
+
+<Button
+    android:id="@+id/btn"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:textSize="20sp"
+    android:text="弹出Flutter模块"
+    android:background="#000000"
+    android:textColor="#ffffff"
+    android:gravity="center"
+    android:onClick="btnClick"
+    />
+
// MainActivity.java
+
+public void btnClick(View v) {
+    startActivity(
+        FlutterActivity.createDefaultIntent(this)
+    );
+}
+

# 四、调试与热重载

由于当前我们是使用原生开发工具(如：Xcode)来运行项目，每次修改我们的 +Flutter模块 的代码，也就需要重新运行才能看到效果，不像之前按下 Cmd + s 就能进行热重载。这样 Flutter模块 的开发效率极其低下，那有没有办法可以让我们像之前开发 Flutter 项目时那样进行 热重载 呢？答案是有的

Flutter 官方提供了 flutter attach ，以辅助我们开发，到终端下执行

flutter attach
+

如果当前有多个设备，会提示我们需要指定 attach 哪个设备

按要求加上指定参数即可

flutter attach -d FE305309-9E79-418D-BA3F-7EFECF2980BC
+

如图，这样就关联上了，你在 dart 文件里面对界面进行任何修改后，按 r 进行热重载，按 R 进行热启动。

如果你使用的是 Android Studio，可以直接选择对应的设备后，点击右边的 Flutter Attach 按钮，执行成功后就可以跟之前一样按 Cmd + s 进行热重载了。

# 五、资料

+ +
+
#Dart#Flutter
Flutter - 打印好用的Debug日志
Flutter - 解决混合开发iOS脚本打包遇到的问题

+ ← + Flutter - 解决混合开发iOS脚本打包遇到的问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4bbcbf/index.html b/pages/4bbcbf/index.html new file mode 100644 index 000000000..5d6ce8aea --- /dev/null +++ b/pages/4bbcbf/index.html @@ -0,0 +1,385 @@ + + + + + + Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-10-29
目录

Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

相信大家都很熟悉微信的通讯录列表功能，而实现该效果可能会直接选用现有的已封装好的开源库，比如：azlistview (opens new window)，这些库都很优秀，能快速帮助我们完成功能研发，但是会有一些小问题，比如：

  • 依赖了一些其它第三方开源库（如：scrollable_positioned_list），但限定的版本可能与自己项目中的冲突
  • 可能不支持一些刷新组件（如：easy_refresh）
  • 功能和布局的自定义受限（如：无法自定义 Header 和 Footer，列表 item 无复选功能）

更要命的是，如果哪天产品实然要求能在 ListView 模式和 GridView 模式之间切换显示，就真的想寄了。 😭

所以说保持使用 Flutter 官方提供的滚动视图才是最可靠的，灵活度高，那本篇文章就跟着我的步伐，一起来实战快速手搓一个微信通讯录列表吧。

先来看看效果：

# 二、难点分析

上面的效果一眼看下来呢，涉及到的难点就是如下两个：

  1. 数据定位，防跳动
  2. 字母列表交互

# 1、数据定位

滑动右侧字母列表，跳转到对应字母的数据模块位置时，需要考虑数据长度问题，如果数据量够，那数据内容自然是从顶部开始展示，但如果数据量不够，则以列表的最大偏移去显示，说白了就是显示列表的底部数据，且保持页面不动，这里就需要考虑如何避免跳动问题了。

不过我们今天的主角 flutter_scrollview_observer (opens new window) 已经帮我们处理了这个跳动问题，所以这一点就不再是难点，我们在代码中尽管去调 jumpTo 就可以了。

# 2、字母列表

在手指触摸字母列表视图时，需要实时返回所对应的下标，以及字母视图所对应的偏移，这样才能使游标视图悬浮到对应位置。

手指触摸可以使用 GestureDetector 这个官方组件，该组件提供了一些触摸回调，比如 onVerticalDragUpdate，我们可以通过回调里的 details 参数拿到此时手指在列表中的偏移量，直接通过 details.localPosition.dy 就可以取到了。

重点来了，怎么根据上述取到的手指偏移量，知道此时对应的下标呢？🧐

转换一下思路，我们可以通过 flutter_scrollview_observer (opens new window) 来获取当前显示的第一个 item，如果不干预计算，那第一个 item 肯定永远是 A，所以我们还需要实时指定一个开始计算的偏移量，就可以正常获取到我们理想的第一个正在显示 item 的数据了。

接下来让我们一起来开始实战吧~

# 三、实战

# 1、联系人数据

由于我们的重点在于如何处理视图显示上，所以数据我们进行简单生成，真实数据如何处理相信难不倒大家。

/// 联系人模型
+class AzListContactModel {
+  // 章节（这里存放的是对应的字母）
+  final String section;
+  // 该字母下的所有联系人姓名
+  final List<String> names;
+
+  AzListContactModel({
+    required this.section,
+    required this.names,
+  });
+}
+
+/// 存放联系人模型的数组
+List<AzListContactModel> contactList = [];
+
+/// 生成联系人数据
+generateContactData() {
+  // 以 ASCII码 的方式去遍历生成 A-Z 的数据
+  final a = const Utf8Codec().encode("A").first;
+  final z = const Utf8Codec().encode("Z").first;
+  int pointer = a;
+  while (pointer >= a && pointer <= z) {
+    final character = const Utf8Codec().decode(Uint8List.fromList([pointer]));
+    contactList.add(
+      AzListContactModel(
+        section: character,
+        // 为测试数据量不够的情况，所以这里设置了最大生成 8 个元素
+        names: List.generate(Random().nextInt(8), (index) {
+          return '$character-$index';
+        }),
+      ),
+    );
+    pointer++;
+  }
+}
+

# 2、页面布局

// 滚动视图对应的 controller
+ScrollController scrollController = ScrollController();
+
+// SliverViewObserver 对应的 controller
+// 这里需要传入 scrollController，这样 observerController 的 jumpTo 方法才能生效，内部的跳转功能就是用 scrollController 去实现的
+SliverObserverController observerController = SliverObserverController(controller: scrollController);
+
+// 存放字母下标和所对应的 sliver 的 BuildContext
+Map<int, BuildContext> sliverContextMap = {};
+

联系人滚动视图使用 CustomScrollView 去实现，slivers 里存放了所有字母对应的联系人列表 SliverList

Stack(
+  children: [
+    // 观察滚动视图
+    SliverViewObserver(
+      controller: observerController,
+      sliverContexts: () {
+        // 返回 字母模块 所对应的所有 sliver 的 BuildContext
+        // 因为我们要观察所有列表，所以这里返回的是全部
+        return sliverContextMap.values.toList();
+      },
+      // 联系人滚动视图
+      child: CustomScrollView(
+        ...
+        controller: scrollController,
+        slivers: contactList.mapIndexed((i, e) {
+          return _buildSliver(index: i, model: e);
+        }).toList(),
+      ),
+    ),
+    // 悬浮游标
+    _buildCursor(),
+    // 字母列表视图
+    Positioned(
+      top: 0,
+      bottom: 0,
+      right: 0,
+      child: _buildIndexBar(),
+    ),
+  ],
+),
+

构建每一个字母下的联系人列表 SliverList

Widget _buildSliver({
+  required int index,
+  required AzListContactModel model,
+}) {
+  // 没有数据，则返回 SliverToBoxAdapter
+  final names = model.names;
+  if (names.isEmpty) return const SliverToBoxAdapter();
+  
+  // 创建 SliverList（当然你可以创建 SliverGrid）
+  Widget resultWidget = SliverList(
+    delegate: SliverChildBuilderDelegate(
+      (context, itemIndex) {
+        // 存放 SliverList 对应的 BuildContext
+        if (sliverContextMap[index] == null) {
+          sliverContextMap[index] = context;
+        }
+        // 返回 item 视图，这个没什么特别的
+        return AzListItemView(name: names[itemIndex]);
+      },
+      childCount: names.length,
+    ),
+  );
+  // 通过 flutter_sticky_header 这个库来实现字母悬浮视图
+  resultWidget = SliverStickyHeader(
+    header: Container(
+      height: 44.0,
+      color: const Color.fromARGB(255, 243, 244, 246),
+      padding: const EdgeInsets.symmetric(horizontal: 16.0),
+      alignment: Alignment.centerLeft,
+      child: Text(
+        model.section,
+        style: const TextStyle(color: Colors.black54),
+      ),
+    ),
+    sliver: resultWidget,
+  );
+  return resultWidget;
+}
+

# 3、字母列表

构建字母列表视图的主要代码如下：

/// 字母列表视图的父视图的key
+/// 服务于后面获取字母视图偏移量
+final indexBarContainerKey = GlobalKey();
+
+/// 从联系人数据里取出所有的字母
+List<String> get symbols => contactList.map((e) => e.section).toList();
+
+Widget _buildIndexBar() {
+  return Container(
+    key: indexBarContainerKey,
+    ...
+    child: AzListIndexBar(
+      // 父视图的key，有印象即可，下面会用到
+      parentKey: indexBarContainerKey,
+      // 字母数据
+      symbols: symbols,
+      onSelectionUpdate: (index, cursorOffset) {
+        // 开始触摸以及触摸滑动 的处理回调
+        ...
+      },
+      onSelectionEnd: () {
+        // 结束/取消 触摸 的处理回调
+        ...
+      },
+    ),
+  );
+}
+

上面的两个处理回调是用来更新游标视图的，所以这里先不讲它。

接着来讲讲 AzListIndexBar 的重点代码

/// 观察滚动视图所需的控制器
+ListObserverController observerController = ListObserverController();
+
+/// 记录当前手指所在的偏移量
+double observeOffset = 0;
+
+// 字母列表视图的整体布局
+@override
+Widget build(BuildContext context) {
+  // ListViewObserver 用来观察 ListView 滚动视图
+  Widget resultWidget = ListViewObserver(
+    // 被观察的滚动视图
+    child: _buildListView(),
+    controller: observerController,
+    // 动态返回当前手指所在的偏移量，用于指定开始计算的偏移，使观察可以得到理想的第一个 item
+    dynamicLeadingOffset: () => observeOffset,
+  );
+  // 触摸监听
+  resultWidget = GestureDetector(
+    // 按下
+    onVerticalDragDown: _onGestureHandler,
+    // 移动
+    onVerticalDragUpdate: _onGestureHandler,
+    // 取消
+    onVerticalDragCancel: _onGestureEnd,
+    // 放开
+    onVerticalDragEnd: _onGestureEnd,
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+

从简单的开始讲，手指放开后，需要隐藏游标，但这个相对于字母列表视图来说是份外之事，所以回调告知即可。

// 结束/取消 触摸
+_onGestureEnd([_]) {
+  // 直接告诉外部，结束滑动了
+  widget.onSelectionEnd?.call();
+}
+

手指按下和滑动的时候，需要显示并更新游标上的标题，所以在字母列表视图侧，可以提供一些数据给到外部

// 处理开始触摸以及触摸滑动
+// 该方法是核心
+_onGestureHandler(dynamic details) async {
+  // details 的类型有可能是 DragDownDetails，也有可能是 DragUpdateDetails
+  // 这两个类型没有父类，不过都有一个相同类型的 localPosition，存放了当前手指在列表上的偏移量，所以这里为了方便，类型声明为 dynamic
+  if (details is! DragUpdateDetails && details is! DragDownDetails) return;
+  observeOffset = details.localPosition.dy;
+
+  // 触发一次观察
+  // 通过 await 就可以在该处拿到观察结果
+  final result = await observerController.dispatchOnceObserve(
+    // 在上面的 ListViewObserver 中，我们并没有实现 onObserve 和 onObserveAll 回调
+    // 在默认情况下，如果回调没有实现，则不会去观察，所以在这里设置了不依赖回调的实现，直接观察
+    isDependObserveCallback: false,
+  );
+  final observeResult = result.observeResult;
+  // 观察结果为null，说明此次的 第一个item 没有发生变化，比如：上一次观察时为字母A，此次观察还是字母A
+  // 默认内部对观察结果有做对比处理，如果你希望每次观察不用对比，直接将数据返回，则可以在上述的 dispatchOnceObserve 方法中给 isForce 设置为 true
+  if (observeResult == null) return;
+
+  // 取出 第一个item 的数据
+  final firstChildModel = observeResult.firstChild;
+  if (firstChildModel == null) return;
+  // 第一个item的下标
+  final firstChildIndex = firstChildModel.index;
+
+  // 取出字母视图对应的 RenderObject
+  final firstChildRenderObj = firstChildModel.renderObject;
+  // 计算当前字母的中心点相对于父视图左上角的偏移量，我们主要拿 y 值
+  // ancestor: 传入祖先视图的 RenderObject 做为参考坐标系
+  final firstChildRenderObjOffset = firstChildRenderObj.localToGlobal(
+    Offset.zero,
+    ancestor: widget.parentKey.currentContext?.findRenderObject(),
+  );
+  // 计算好后，通过 onSelectionUpdate 回调将数据返出去
+  final cursorOffset = Offset(
+    firstChildRenderObjOffset.dx,
+    firstChildRenderObjOffset.dy + firstChildModel.size.width * 0.5,
+  );
+  widget.onSelectionUpdate?.call(
+    firstChildIndex,
+    cursorOffset,
+  );
+}
+

# 4、更新游标

现在我们回头来看看两个触摸处理结果回调

/// 游标的数据模型
+class AzListCursorInfoModel {
+  /// 字母
+  final String title;
+  
+  /// 字母中心点的偏移量
+  final Offset offset;
+
+  AzListCursorInfoModel({
+    required this.title,
+    required this.offset,
+  });
+}
+
// 存放游标的数据模型
+ValueNotifier<AzListCursorInfoModel?> cursorInfo = ValueNotifier(null);
+
+Widget _buildIndexBar() {
+  return Container(
+    ...
+    child: AzListIndexBar(
+      parentKey: indexBarContainerKey,
+      symbols: symbols,
+      onSelectionUpdate: (index, cursorOffset) {
+        // 更新游标数据，来显示游标
+        cursorInfo.value = AzListCursorInfoModel(
+          title: symbols[index],
+          offset: cursorOffset,
+        );
+        // 取出字母对应的联系人列表视图 SliverList 的 BuildContext
+        final sliverContext = sliverContextMap[index];
+        if (sliverContext == null) return;
+        // 跳到对应的字母章节的第一个 item 的位置
+        // jumpTo 方法内部处理了跳动问题，尽管调用即可！
+        observerController.jumpTo(
+          index: 0,
+          sliverContext: sliverContext,
+        );
+      },
+      onSelectionEnd: () {
+        // 清除游标数据，即隐藏游标
+        cursorInfo.value = null;
+      },
+    ),
+  );
+}
+

构建游标视图代码

Widget _buildCursor() {
+  // 根据 cursorInfo 数据的变化来局部实现
+  return ValueListenableBuilder<AzListCursorInfoModel?>(
+    valueListenable: cursorInfo,
+    builder: (
+      BuildContext context,
+      AzListCursorInfoModel? value,
+      Widget? child,
+    ) {
+      Widget resultWidget = Container();
+      double top = 0;
+      double right = indexBarWidth + 8;
+      if (value == null) {
+        // 没有游标数据，隐藏
+        resultWidget = const SizedBox.shrink();
+      } else {
+        // 有游标数据，显示 AzListCursor 视图
+        double titleSize = 80;
+        // 根据当前字母视图的中心点偏移量 y 值，减去游标视图的高度，来得出游标的顶部偏移量
+        top = value.offset.dy - titleSize * 0.5;
+        resultWidget = AzListCursor(size: titleSize, title: value.title);
+      }
+      resultWidget = Positioned(
+        top: top,
+        right: right,
+        child: resultWidget,
+      );
+      return resultWidget;
+    },
+  );
+}
+

游标视图 AzListCursor 里没什么重要的内容，所以不讲解了，大家可以随意发挥。

Demo链接：azlist_demo (opens new window)

+ +
+
#Dart#Flutter
一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐
Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）

+ ← + Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4c1e21/index.html b/pages/4c1e21/index.html new file mode 100644 index 000000000..7ab03048b --- /dev/null +++ b/pages/4c1e21/index.html @@ -0,0 +1,93 @@ + + + + + + AI - 免费搭建一个私有的 ChatGPT | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2024-04-14
目录

AI - 免费搭建一个私有的 ChatGPT

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

2024 年 4 月初，OpenAI 正式开放了 ChatGPT3.5 的免注册使用功能，这对于无法注册账号的人来说可真是福音，只需访问官网（https://chat.openai.com/ (opens new window)）即可直接使用，但是，对于普通用户来说，还是有点条件的：

  1. 需要会点魔法
  2. 官网很简洁，没有预置一些场景，使用起来不方便

对此，目前已有一套成熟的应对之法，可以让我们很流畅地使用 ChatGPT 3.5，这是最终的使用效果：

作为开发者，我们知道一个网站的本质无非就是通过网络请求获取数据，然后配合网页显示 UI 进行交互。OpenAI 官网也是如此，如果我们知道接口的请求规则，搭建一个中间人帮忙转发，再配合自定义客户端进行 UI 交互，就可以提供相同甚至更强的功能。看起来似乎很复杂，但是不用担心，因为上述的各个环节都已经有现成的了，而且都是免费的，我们只需要按部就班将它们组合起来即可，下面正式开始教你一步步搭建你自己的智能 AI 助手。

# 一、部署 API 服务

API 服务指的就是上面提到的 "中间人"，它的功能可以使用以下任意一个库来实现：

FreeGPT35-Vercel 使用起来非常简单，只能部署在 Vercel 平台上，而 aurora 更加高级，提供了更多的部署方式和配置，有兴趣的可以自己了解下，这里我秉承简单够用的原则，就直接选用 FreeGPT35-Vercel 了。

# 1、Fork 仓库

打开仓库地址，点击右上角的 Fork：

因为 FreeGPT35-Vercel 只能部署到 Vercel 平台，Vercel 免费部署需要访问自己 GitHub 账号下的仓库，所以，我们需要先把 FreeGPT35-Vercel 给 Fork 自己的 GitHub 账号下，仓库名随意，建议不变，记下，后续会用到。如图所示，点击 Create fork 按钮：

注意：把 Copy the mian branch only 的钩去掉

# 2、导入 Vercel

Fork 之后，打开 Vercel 平台（https://vercel.com/ (opens new window)），使用 GitHub 账号关联登录，会来到你的主页，之后点击 Add New...，找到 Project 选项，点击准备创建新项目：

在页面搜索栏中输入我们 GitHub 账号下刚刚 Fork 的那个仓库的名字（FreeGPT35-Vercel）：

回车，你会发现啥也没有，这是因为 GitHub 对一些第三方 App 有权限控制，点击 Configure GitHub App 按钮，在新开的页面中找到 Repository access，对 Vercel 进行仓库访问授权配置，然后点击 Save 按钮即可：

注：你可以选择 All repositories 对 Vercel 完全开放，这样 Vercel 就可以访问你 GitHub 账号下的所有仓库，但我个人建议你还是选择 Only select repositories，只对选中的仓库开放访问。

授权之后，回到 Vercel 创建新项目页面，这次就能搜索到仓库了，点击 Import 导入：

导入成功后，会来到配置页面（可以配置环境变量），直接点击 Deploy 部署：

显示 Congratulations 就是部署成功了：

回到项目主页，可以看到有一个 Vercel 的二级域名（Domains），用于访问当前项目的，记下，后面会用到：

# 3、配置

FreeGPT35-Vercel 需要用到 KV 数据库（Redis）存储一些数据，切换到 Storage 选项卡，找到 KV 数据库，点击 Create：

数据库名字随意，建议不变，地区建议选择 San Francisco，点击 Create，之后 Connect：

注意：免费的 Vercel 账户，只能创建一个 KV 数据库，所以，Connect 的时候，请务必确认当前 KV 数据库的 Projects 选项卡连接了 API 服务项目（比如我的项目名是 free-gpt-35-vercel）

创建成功后，即可看到如下页面：

注：可以看到，Vercel 提供的 KV 数据库，每月只有 30k 次访问，对于高频使用 ChatGPT 的人来说，是完全不够用的，后面有办法解决，这里先忽略。

前面项目部署成功之后，Vercel 会生成一个它的二级域名，用于访问项目，域名包含一些随机字母，并且很长，另外，在某些网络环境下可能域名解析不出来，这时，你可以给 Vercel 绑定一个你自己有域名，当然不绑定也无所谓，这里我就不绑定域名了，有需要的请自行了解怎么绑定域名：

配置完成后，需要重新部署一次项目，回到项目主页，找到 Deployments 选项卡，找到最近部署记录 item 的最右侧更多图标，点击 Redeploy：

至此，API 服务的部署就暂时告一段落了。

# 二、部署 ChatGPT 客户端

API 服务部署完成后，就可以了部署 ChatGPT 客户端了，这类客户端还有蛮多的，例如：

因为 ChatGPT-Next-Web 的 star 数较多，简单易用，并且支持 Vercel 网站以及跨平台客户端多种形式部署，所以，我选择 ChatGPT-Next-Web，这里只演示如何部署到 Vercel 平台，其他平台客户端怎么使用就请自行查阅文档吧。

同样的，先把 ChatGPT-Next-Web Fork 到自己的 GitHub 账号下：

然后在 Vercel 平台上，将该项目导入，流程与上面部署 API 服务是一样的，这里就跳过了。导入成功后，就来到了配置页面，在这里我们需要配置一下环境变量：

  • OPENAI_API_KEY（必填项）：OpanAI 密钥。因为部署了 API 服务，所以我们不需要，随便写，例如 GitLqr。
  • BASE_URL（可选）：OpenAI 接口代理 URL。这里填写我们上面部署好的 API 服务地址，例如 https://你的API服务域名。
  • CODE（可选）：访问密码，可选，可以使用逗号隔开多个密码。 +

    警告：如果不填写此项，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。

环境变量说明：https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/blob/main/README_CN.md (opens new window)

环境变量配置完成后，点击 Deploy 按钮，等待部署完成：

回到项目主页，可以看到当前项目的 Vercel 二级域名（Domains）：

注：有条件的话，可以到 Settings 里绑定你自己的域名，当然不绑定也是可以的。

打开这个项目域名，就可以访问我们自己的 ChatGPT 网站了：

因为我配置了访问密码（环境变量 CODE），所以才有 "访问密码不正确或为空" 的提示，如果不配置的话，则没有这个提示，这里点击 登录，然后只需要输入密码即可：

登录成功后，就可以开始使用 ChatGPT 了：

# 三、完善

部署完 API 服务 和 ChatGPT 客户端后，第一次使用时，会遇到这样的报错信息：

这是因为 ChatGPT 官方的免登录 API 接口有个限制，它需要使用 Token 参数，我们前面部署的 API 服务提供了一个接口，可以让我们手动获取一次新的 token，该接口 url 的拼接规则为 https://你的API服务域名/api/cron，在浏览器打开该链接，正常的话，会有如下提示：

{
+  "message": "成功获取并存储会话信息"
+}
+

之后，再回到 ChatGPT 客户端就可以正常访问了。但是目前的体验还是很不好，有两个问题：

  1. Token 会失效，每次都要手动刷新一次很麻烦
  2. Vercel 提供的 KV 数据库每月只有 30k 次访问，高频使用的话会不够用

针对上面两个问题，FreeGPT35-Vercel 的文档中也提供了相应的解决方案。

# 1、自动刷新 Token

FreeGPT35-Vercel 文档中推荐使用 cron-job 来实现自动刷新 Token

打开网址，注册一个账号，然后登录。来到仪表盘（Dashboard），点击右上角 CREATE CRONJOB 按钮创建定时任务：

配置一下刷新 Token 的 URL，指定每 2 分钟执行一次，然后 CREATE 创建该定时任务，这样就实现自动刷新 Token 了：

# 2、访问次数

FreeGPT35-Vercel 文档中推荐使用 Upstash 来替代 Vercel 的 KV 数据库，满足高频使用 ChatGPT 场景

打开网址，注册一个账号，然后登录。来到了 Redis 实例主页，点击 Create database 按钮创建一个新实例：

名字任意，Region 推荐选 N. California, USA，勾选 Eviction，然后点击 Create 创建：

实例创建成功后，会跳转到实例详情页面，往下滑，找到 REST API，把这 2 个 API 参数的 键值对 复制下来，后面要用 ：

回到 Vercel，打开 API 服务项目，切换到 Settings 选项卡，把上面复制的 键值对 添加到环境变量中：

点击 Save 按钮之后，页面下方的环境变量列表中，会出现刚刚添加的那 2 个新变量：

添加完环境变量，需要对项目重新部署才会生效，切换到 Deployments 选项卡，重新部署一次最近的记录：

怎么验证 Upstash 真的使用上了呢？回到 Upstash 网站，可以看到刚刚创建的 Redis 实例，点击它：

切换到 Usage，可以看到当前最新的使用情况，有消耗，说明生效中：

至此，一个完全免费、只属于你自己的智能 AI 助手就部署成功了，完结撒花~

+ +
+
#ChatGPT#AIGC#FreeGPT35#FreeGPT35-Vercel#ChatGPT-Next-Web
AI - stable-diffusion 艺术化二维码
AI - 发现一个超级好用的 AI 聚合平台

+ ← + AI - 发现一个超级好用的 AI 聚合平台→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4d2b48/index.html b/pages/4d2b48/index.html new file mode 100644 index 000000000..35f01f2a9 --- /dev/null +++ b/pages/4d2b48/index.html @@ -0,0 +1,472 @@ + + + + + + Flutter - StateWidget与生命周期 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-23
目录

Flutter - StateWidget与生命周期

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、程序入口

一般情况下，Flutter 的主入口是 main.dart。

# 1、界面的本质(Widget)

在 main 函数中通过 runApp 函数启动一个 Flutter 界面，而 runApp(Widget app) 函数接收的参数 Widget app 就是界面了，即界面是一个 Widget：

main() {
+  runApp(Center(
+    child: Text("Hello world",
+        textDirection: TextDirection.ltr,
+        style: TextStyle(fontSize: 30, color: Colors.orange)),
+  ));
+}
+

在 Flutter 中，所有的界面、控件都是 Widget

# 2、MaterialApp

为了快速开发一个标准 material 的界面，Flutter 提供了 MaterialApp 这个 Widget：

import 'package:flutter/material.dart';
+
+main() {
+  // 1. runApp 函数
+  runApp(MaterialApp(
+    // debugShowCheckedModeBanner: false, // 控制界面右上角是否显示`debug`提示
+    home: Scaffold(
+      appBar: AppBar(
+        title: Text("第一个Flutter程序"),
+      ),
+      body: Center(
+        child: Text(
+          "Hello World",
+          textDirection: TextDirection.ltr,
+          style: TextStyle(fontSize: 30, color: Colors.orange),
+        ),
+      ),
+    ),
+  ));
+}
+

Scaffold 也是 Widget，翻译为脚手架，可以帮助开发者搭建出带 AppBar 的界面

# 二、State Widget

万物基于 Widget 的 Flutter 把 Widget 分为两类，分别是：

  • StatelessWidget: 无状态的 Widget，内容是确定没有状态(data)的改变
  • StatefulWidget: 有状态的 Widget，在运行过程中有一些状态(data)需要改变

# 1、StatelessWidget

上面的 demo 中，runApp(Widget app)、MaterialApp({this.home})、Scaffold({this.body}) 这 3 个方法接收的主要参数都是 Widget 类型，并且不涉及状态的保存，因此可以把它们抽成对应的 3 个 StatelessWidget 来使用，这样就可以有效的避免 嵌套地狱 的发生：

这种抽取出一个个 Widget 的方式，类似于大前端中的组件化开发

import 'package:flutter/material.dart';
+
+main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("第一个Flutter程序"),
+      ),
+      body: ContentBody(),
+    );
+  }
+}
+
+class ContentBody extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        "Hello World",
+        textDirection: TextDirection.ltr,
+        style: TextStyle(fontSize: 30, color: Colors.orange),
+      ),
+    );
+  }
+}
+

AndroidStudio 中的 State Widget 快速创建模板：

  • stless：输入 stless 直接生成 StatelessWidget
  • stful：输入 stful 直接生成 StatefulWidget

# 2、StatefulWidget

Flutter 是声明式开发，即一旦状态发生变化，界面会自动改变，这里说的状态就是数据。StatefulWidget 就是可以有状态的 Widget，一个简单的例子：写一个同意协议控件：

/// flag：状态
+/// Stateful不能定义状态 -> 创建一个单独的State类，这个State类负责维护状态
+class ContentBody extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return ContentBodyState();
+  }
+}
+
+/// 使用State类来保存状态
+class ContentBodyState extends State<ContentBody> {
+  var flag = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Checkbox(
+            value: flag,
+            onChanged: (value) {
+              /// flag = value; // 无效代码，不会刷新界面
+              /// 必须使用 setState() 方法强制界面刷新
+              setState(() {
+                flag = value;
+              });
+            },
+          ),
+          Text("同意协议", style: TextStyle(fontSize: 20)),
+        ],
+      ),
+    );
+  }
+}
+

 注意：

  • Flutter 中的状态（State）和 React 中的状态概念一致。
  • 单单修改数据是不行的，还必须调用 setState() 通知界面在下一帧重新绘制才行。

# 3、为什么 State Widget 本身不能定义状态？

无论 StatelessWidget 还是 StatefulWidget，其父类都是 Widget，来看看 Widget 的定义：

@immutable
+abstract class Widget extends DiagnosticableTree {
+    ...
+}
+

Widget 有 @immutable 注解，就意味着 Widget 的所有子类即使有成员属性，也一定是使用 final 修饰的，试问 final 变量会有变化吗？

/// 所有的Widget类中都不能定义状态，类成员属性必须是final
+class ContentBody extends StatelessWidget {
+  // IDE报错：This class (or a class that this class inherits from) is marked as '@immutable', but one of more of its instance fields aren't final: ContentBody.flag
+
+  // 错误代码
+  // @immutable 注释过的类，成员属性必须是final的
+  var flag = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Checkbox(value: flag, onChanged: (value) => flag = value),
+          Text("同意协议", style: TextStyle(fontSize: 20)),
+        ],
+      ),
+    );
+  }
+}
+

# 三、综合案例

# 1、StatelessWidget 综合案例(商品列表)

import 'package:flutter/material.dart';
+
+main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("商品列表"),
+      ),
+      body: HomeContent(),
+    );
+  }
+}
+
+class HomeContent extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Column 会越界relayoutBoundary，改成ListView就好了
+    return ListView(
+      children: [
+        HomeProductItem("Apple1", "Macbook1",
+            "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
+        SizedBox(height: 6),
+        HomeProductItem("Apple2", "Macbook2",
+            "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
+        SizedBox(height: 6),
+        HomeProductItem("Apple3", "Macbook3",
+            "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
+      ],
+    );
+  }
+}
+
+class HomeProductItem extends StatelessWidget {
+  final String title;
+  final String desc;
+  final String imageURL;
+  final style1 = TextStyle(fontSize: 25, color: Colors.orange);
+  final style2 = TextStyle(fontSize: 20, color: Colors.green);
+
+  HomeProductItem(this.title, this.desc, this.imageURL);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        border: Border.all(
+          width: 5, // 设置边框的宽度
+          color: Colors.pink, // 设置边框的颜色
+        ),
+      ),
+      child: Column(
+        // crossAxisAlignment: CrossAxisAlignment.start,
+        // crossAxisAlignment: CrossAxisAlignment.center,
+        // crossAxisAlignment: CrossAxisAlignment.end,
+        // crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          // Text(title, style: style1, textAlign: TextAlign.center),
+          Text(title, style: style1),
+          SizedBox(height: 8),
+          Text(desc, style: style2),
+          SizedBox(height: 8),
+          Image.network(imageURL),
+        ],
+      ),
+    );
+  }
+}
+

# 2、StatefulWidget 综合案例(计数器)

import 'package:flutter/material.dart';
+
+main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("title")),
+      body: HomeContent("hello world"),
+    );
+  }
+}
+
+/// 为什么Flutter在设计的时候StatefulWidget的build方法放在State中
+/// 1. build出来的Widget是需要依赖State中的变量(状态/数据)
+/// 2. 在Flutter的运行过程中：
+///   Widget是不断的销毁和创建的
+///   当我们自己的状态发生改变时，并不希望重新创建一个新的State
+class HomeContent extends StatefulWidget {
+  final String message;
+
+  HomeContent(this.message);
+
+  @override
+  _HomeContentState createState() => _HomeContentState();
+}
+
+class _HomeContentState extends State<HomeContent> {
+  int _counter = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          _getButtons(),
+          Text("当前计数:$_counter", style: TextStyle(fontSize: 25)),
+          Text("传递的信息:${widget.message}")
+        ],
+      ),
+    );
+  }
+
+  Widget _getButtons() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        ElevatedButton(
+          child: Text("+", style: TextStyle(fontSize: 20)),
+          style: TextButton.styleFrom(backgroundColor: Colors.pink),
+          onPressed: () {
+            setState(() {
+              _counter++;
+            });
+          },
+        ),
+        ElevatedButton(
+          child: Text("-", style: TextStyle(fontSize: 20)),
+          style: TextButton.styleFrom(backgroundColor: Colors.purple),
+          onPressed: () {
+            setState(() {
+              _counter--;
+            });
+          },
+        ),
+      ],
+    );
+  }
+}
+

# 四、生命周期

# 1、StatelessWidget 的生命周期

因为 StatelessWidget 没有状态，所以它的生命周期很简单：先调用 构造函数，再调用 build()，没了：

import 'package:flutter/material.dart';
+
+main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("title")),
+      body: HomeContent("hello world"),
+    );
+  }
+}
+
+// StatelessWidget 的生命周期
+class HomeContent extends StatelessWidget {
+  final String message;
+
+  HomeContent(this.message) {
+    print("构造函数被调用");
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    print("调用build方法");
+    return Text(message);
+  }
+}
+

日志输出：

I/flutter ( 3092): 构造函数被调用
+I/flutter ( 3092): 调用build方法
+

# 2、StatefulWidget 的生命周期

方法 说明
createState Framework 会通过调用 StatefulWidget.createState 来创建一个 State。
initState 新创建的 State 会和一个 BuildContext 产生关联，此时认为 State 已经被安装好了，initState 函数将会被调用。通常，我们可以重写这个函数，进行初始化操作。
didChangeDependencies 在 initState 调用结束后，这个函数会被调用。事实上，当 State 对象的依赖关系发生变化时，这个函数总会被 Framework 调用。
build 经过以上步骤，系统认为一个 State 已经准备好了，就会调用 build 来构建视图。我们需要在这个函数中返回一个 Widget。
deactivate deactivate 当 State 被暂时从视图树中移除时，会调用这个函数。页面切换时，也会调用它，因为此时 State 在视图树中的位置发生了变化，需要先暂时移除后添加。
dispose 当 State 被永久地从视图树中移除时，Framework 会调用该函数。在销毁前触发，我们可以在这里进行最终的资源释放。在调用这个函数之前，总会先调用 deactivate 函数。
didUpdateWidget 当 Widget 的配置发生变化时，会调用这个函数。比如，热重载的时候就会调用这个函数。调用这个函数后，会调用 build 函数。
setState 当需要更新 State 的视图时，需要手动调用这个函数，它会触发 build 函数。
// StatefulWidget 的生命周期
+class HomeContent extends StatefulWidget {
+  HomeContent(String message) {
+    print("1. 调用 HomeContent 的 constructor 方法");
+  }
+
+  @override
+  _HomeContentState createState() {
+    print("2. 调用 HomeContent 的 createState 方法");
+    return _HomeContentState();
+  }
+}
+
+class _HomeContentState extends State<HomeContent> {
+  _HomeContentState() {
+    print("3. 调用 _HomeContentState 的 constructor 方法");
+  }
+
+  @override
+  void initState() {
+    // 注意：这里必须调用super(@mustCallSuper)
+    super.initState();
+    print("4. 调用 _HomeContentState 的 initState 方法");
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    print("调用 _HomeContentState 的 didChangeDependencies 方法");
+  }
+
+  @override
+  void didUpdateWidget(covariant HomeContent oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    print("调用 _HomeContentState 的 didUpdateWidget 方法");
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    print("5. 调用 _HomeContentState 的 build 方法");
+    return Container();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    print("6. 调用 _HomeContentState 的 dispose 方法");
+  }
+}
+

日志结果：

// 界面初始化
+I/flutter ( 3092): 1. 调用 HomeContent 的 constructor 方法
+I/flutter ( 3092): 2. 调用 HomeContent 的 createState 方法
+I/flutter ( 3092): 3. 调用 _HomeContentState 的 constructor 方法
+I/flutter ( 3092): 4. 调用 _HomeContentState 的 initState 方法
+I/flutter ( 3092): 调用 _HomeContentState 的 didChangeDependencies 方法
+I/flutter ( 3092): 5. 调用 _HomeContentState 的 build 方法
+
+// 点击计数按钮
+I/flutter ( 3092): 5. 调用 _HomeContentState 的 build 方法
+

没有打印 dispose()中的日志，是因为这里 Demo 中没有将 Widget 移除

+ +
+
#runApp#MaterialApp#StatelessWidget#StatefulWidget
Flutter - Dart事件循环机制与异步
Flutter - 基础Widget

+ ← + Flutter - 基础Widget→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/4e6b65/index.html b/pages/4e6b65/index.html new file mode 100644 index 000000000..7223b3a15 --- /dev/null +++ b/pages/4e6b65/index.html @@ -0,0 +1,165 @@ + + + + + + RePlugin强制退出App | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-05
目录

RePlugin强制退出App

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# RePlugin强制退出

需求：插件中按“退出”按钮，就完全退出整个app，包括宿主。

# 一、前提

以下所有的理论，都是基于宿主跟插件使用同个进程这个大前提下，即不需要常驻进程。

apply plugin: 'replugin-host-gradle'
+repluginHostConfig {
+    useAppCompat = true
+    persistentEnable = false // 设置为“不需要常驻进程”
+}
+

"不需要常驻进程" 的目的是为了减少整个app的内存开销。

# 二、问题

在插件中使用System.exit(0)或android.os.Process.killProcess(android.os.Process.myPid())强杀app后，会重启宿主app。

流程：宿主MainActivity --安装启动--> 插件MainActivity --点击"退出"--> 触发主动强杀进程

# 三、分析

其实这跟Replugin是没有任何关系，从Android5.0开始（也可能是4.x），Android不允许在代码中主动强杀前台进程。

底层原理请看：《Android5.1.1源码 - App服务进程被杀后自动重启的原因》 (opens new window)

在当前案例中，共有2个Activity，插件MainActivity中触发了finish()与System.exit(0)，这里要特别注意，仅仅只是关闭了插件MainActivity，而宿主MainActivity什么都没做，此时的app还是处于前台进程，紧接着System.exit(0)把整个app进程杀死，这时便会触发Android守卫前台进程的规则，将刚刚"go died"的app重新拉起来。

# 四、解析方案

知道原理之后，这个问题也就迎刃而解了。解决方案就是让app不再是前台进程后，再执行System.exit(0)即可。换句话说就是把app中所有的【Activity】和【Service】全部关闭，再执行System.exit(0)。

注意：Service跟Activity一样，也能让app处于前台进程，但如果是bindService()启动的话（与app同生共死），则不会有这种问题，所以要特别小心那些使用startService()启动的服务，下面只写Activity的解决办法，Service请自行处理。

当然了，如果能确保宿主在启动插件后，app进程不再有除插件以外的Activity存在的话，则不需要如下操作，以当前例子来说明，即宿主MainActivity通过 RePlugin.startActivity() 启动了插件MainActivity，同时通过 finish() 将宿主MainActivity自己关闭。

流程：宿主MainActivity --安装启动插件，并finish()--> 插件MainActivity --点击"退出"--> 触发主动强杀进程

如果无法确保上述条件，或是业务逻辑需要保留宿主的Activity一直存活，则需要继续往下看。收集所有Activity并逐个finish()的做法有多种，比如：使用Application#registerActivityLifecycleCallbacks ，或者是反射Application ，为了方便这里使用的是反射Application，AppUtil.kt代码如下 ：

// AppUtil.kt
+/**
+ * 杀死进程
+ */
+fun killApp(application: Application) {
+    getActivitiesByApplication(application)?.let {
+        for (activity in it) {
+            activity.finish()
+        }
+        exitProcess(0)
+    }
+}
+
+/**
+ * 获取当前App中所有的Activity
+ */
+fun getActivitiesByApplication(application: Application): List<Activity> {
+    val list: MutableList<Activity> = ArrayList()
+    try {
+        val applicationClass = Application::class.java
+        val mLoadedApkField: Field = applicationClass.getDeclaredField("mLoadedApk")
+        mLoadedApkField.isAccessible = true
+        val mLoadedApk: Any = mLoadedApkField.get(application)
+        val mLoadedApkClass: Class<*> = mLoadedApk.javaClass
+        val mActivityThreadField: Field = mLoadedApkClass.getDeclaredField("mActivityThread")
+        mActivityThreadField.isAccessible = true
+        val mActivityThread: Any = mActivityThreadField.get(mLoadedApk)
+        val mActivityThreadClass: Class<*> = mActivityThread.javaClass
+        val mActivitiesField: Field = mActivityThreadClass.getDeclaredField("mActivities")
+        mActivitiesField.isAccessible = true
+        val mActivities: Any = mActivitiesField.get(mActivityThread)
+        // 注意这里一定写成Map，低版本这里用的是HashMap，高版本用的是ArrayMap
+        if (mActivities is Map<*, *>) {
+            val arrayMap = mActivities as Map<Any, Any>
+            for ((_, value) in arrayMap) {
+                val activityClientRecordClass: Class<*> = value.javaClass
+                val activityField: Field =
+                    activityClientRecordClass.getDeclaredField("activity")
+                activityField.isAccessible = true
+                val o: Any = activityField.get(value)
+                list!!.add(o as Activity)
+            }
+        }
+    } catch (e: Exception) {
+        e.printStackTrace()
+    }
+    return list
+}
+

# 方式一：插件通知宿主"自杀"

好处：宿主才是真正的app，能直接管理所有真实的四大组件，代码可扩展性强。

坏处：插件工程中可能需要判断是否是单品的情况。

# 1）宿主代码

在宿主中接收来自插件的"自杀"消息，关闭所有的acitivty后"自杀"：

// MyApplication.kt
+class MyApplication : RePluginApplication() {
+
+    override fun onCreate() {
+        super.onCreate()
+        registerKillProcessReceiver()
+    }
+    
+    private fun registerKillProcessReceiver() {
+        LocalBroadcastManager.getInstance(this).registerReceiver(object : BroadcastReceiver() {
+            override fun onReceive(context: Context?, intent: Intent?) {
+                killApp(this@MyApplication)
+            }
+
+        }, IntentFilter("killprocess"))
+    }
+}
+

# 2）插件代码

在插件中把"自杀"的消息通知给宿主，然后静静等待死亡：

btn_exit_system.setOnClickListener {
+    LocalBroadcastManager.getInstance(this).sendBroadcast(Intent("killprocess"))
+}
+

# 方式二：插件控制宿主"自杀"

既然宿主和插件是同个进程，也就意味着插件能获取到宿主Application，直接在插件中干掉宿主就好了。

好处：单品中不需要修改任何代码，也一样能用。

坏处：反射Api的方式可能存在风险；作为插件可能无法掌控整个app。

# 1）插件代码

btn_exit_process.setOnClickListener {
+    killApp(application)
+}
+
+ +
+
#插件化#RePlugin
RePlugin集成Fresco
RePlugin集成AndroidAutoSize

+ ← + RePlugin集成AndroidAutoSize→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/500d17/index.html b/pages/500d17/index.html new file mode 100644 index 000000000..6f84aa082 --- /dev/null +++ b/pages/500d17/index.html @@ -0,0 +1,269 @@ + + + + + + Flutter - 轻松实现PageView卡片偏移效果 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-09-08
目录

Flutter - 轻松实现PageView卡片偏移效果

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在前不久的一个需求里，需要在点击地图页上的大头针时，页面底下显示对应的物件卡片，还可以左右切换，并且在切换的过程中需要突出展示当前的物件卡片，如下图所示。

接下来就来讲讲具体实现

# 二、研发

# 基础页面搭建

/// pageView 控制器
+late PageController pageController;
+
+/// item 数量
+int pageItemCount = 10;
+
+@override
+void initState() {
+  super.initState();
+  pageController = PageController(
+    // 初始化页的下标
+    initialPage: 4,
+    // 每一页占据的视口比例
+    viewportFraction: 0.9,
+  );
+}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    appBar: AppBar(
+      title: const Text("PageView"),
+    ),
+    body: Stack(
+      children: [
+        // 底部地图
+        _buildMap(),
+        // PageView，用于显示地图大头针对应的一些物件信息
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: _buildPageView(),
+        ),
+      ],
+    ),
+  );
+}
+

底部的卡片视图是使用 PageView 来实现，具体代码如下所示：

Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    controller: pageController,
+    itemBuilder: (context, index) {
+      // 构建 item
+      Widget resultWidget = Container(
+        decoration: BoxDecoration(
+          color: Colors.blue[100],
+          borderRadius: BorderRadius.circular(4),
+        ),
+        alignment: Alignment.center,
+        child: Text("Page $index"),
+      );
+      // 设置 item 的左右边距
+      resultWidget = Container(
+        margin: const EdgeInsets.symmetric(horizontal: 8),
+        child: resultWidget,
+      );
+      return resultWidget;
+    },
+    itemCount: pageItemCount,
+  );
+  // 固定 300 的高度
+  resultWidget = SizedBox(
+    height: 300,
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+

以上的视图布局对大家来说都很简单，大致看看就可以了，接下来就是如何实现这种偏移突出的效果。

# 观察 PageView

这里使用到的是我写的一个滚动视图观察库 https://github.com/fluttercandies/flutter_scrollview_observer (opens new window) 。

用法很简单:

  1. 使用 ListViewObserver 将 PageView 包裹起来
  2. 设置 triggerOnObserveType 为 .directly 不做显示 item 变化对比，直接将获取到的观察数据返回
  3. 在观察结果回调 onObserve 中，取出 item 的相关数据（下标、可视区域占比等）进行计算
final observerController = ListObserverController();
+
+Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    ...
+  );
+
+  // 使用 ListViewObserver 包裹 PageView 
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+    // 直接将观察结果返回出来
+    triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+    // 处理观察结果
+    onObserve: (resultModel) {
+      final displayingChildModelList = resultModel.displayingChildModelList;
+      for (var itemModel in displayingChildModelList) {
+        // 取出 item 的下标
+        final itemIndex = itemModel.index;
+        // 取出 item 的可视区域占比
+        final itemDisplayPercentage = itemModel.displayPercentage;
+        // 计算偏移
+        final offsetY = (1 - itemDisplayPercentage) * offsetYDelta;
+        pageItemOffsetYList[itemIndex].value = offsetY;
+      }
+    },
+    // 指定需要观察的 RenderSliver 对象
+    customTargetRenderSliverType: (renderObj) {
+      return renderObj is RenderSliverFillViewport;
+    },
+  );
+  
+  ...
+  return resultWidget;
+}
+

triggerOnObserveType 和 customTargetRenderSliverType 在之前的【Flutter - 船新升级😱支持观察第三方构建的滚动视图💪】一文中有详细的说明，这里就不再赘述。

这里重要说明一下，ListViewObserver 默认是处理 ListView 和 SliverList 的，但并不表示它只能处理它们，只要内部的树结构一致就可以处理，如果结构一致但 RenderSliver 与 SliverList 的不同，则可以通过 customTargetRenderSliverType 指定相应的 RenderSliver 类型即可，就比如这里的 PageView，其 RenderSliver 的类型为 RenderSliverFillViewport。

在这里附上 PageView 和 ListView 的树结构截图，看最右侧的 Widget Details Tree，看完应该就能感受到什么叫结构一致了。

PageView 结构

ListView 结构

# item 的偏移实现

// item 的最大偏移量
+double offsetYDelta = 50;
+// 记录 item 的偏移量
+List<ValueNotifier<double>> pageItemOffsetYList = [];
+
+@override
+void initState() {
+  super.initState();
+  ...
+  // 初始化
+  pageItemOffsetYList = List.generate(
+    pageItemCount,
+    (index) {
+      return ValueNotifier<double>(0);
+    },
+  );
+  
+  // 延迟 100ms，触发一次观察
+  Future.delayed(const Duration(milliseconds: 100)).then((_) {
+    observerController.dispatchOnceObserve();
+  });
+}
+
+Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    controller: pageController,
+    itemBuilder: (context, index) {
+      Widget itemWidget = Container(
+        ...
+      );
+      
+      // item 局部刷新
+      Widget resultWidget = ValueListenableBuilder(
+        valueListenable: pageItemOffsetYList[index],
+        builder: (BuildContext context, double offsetY, Widget? child) {
+          // 偏移量发生变化
+          return Transform.translate(
+            offset: Offset(0, offsetY),
+            child: itemWidget,
+          );
+        },
+      );
+      
+      resultWidget = Container(
+        ...
+      );
+      return resultWidget;
+    },
+    itemCount: pageItemCount,
+  );
+
+  resultWidget = ListViewObserver(
+    ...
+    onObserve: (resultModel) {
+      final displayingChildModelList = resultModel.displayingChildModelList;
+      for (var itemModel in displayingChildModelList) {
+        // 取出 item 的下标
+        final itemIndex = itemModel.index;
+        // 取出 item 的可视区域占比
+        final itemDisplayPercentage = itemModel.displayPercentage;
+        // 计算偏移
+        // item 的【可视占比区间】与【偏移区间】两者间的区间关系如下
+        // 可视占比区间: [0, 1]
+        // 偏移区间: [50, 0]
+        final offsetY = (1 - itemDisplayPercentage) * offsetYDelta;
+        // 更新当前 item 的偏移量
+        pageItemOffsetYList[itemIndex].value = offsetY;
+      }
+    },
+    ...
+  );
+  
+  resultWidget = SizedBox(
+    height: 300,
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+

关键变量说明

  • offsetYDelta: item 的最大偏移量，这里是 50
  • pageItemOffsetYList: 记录各个 item 的当前偏移量

更新 item 偏移说明

  • 结合 pageItemOffsetYList + ValueListenableBuilder 来局部刷新 item
  • 在 onObserve 中计算 item 的偏移量，并更新 pageItemOffsetYList 中对应下标的值
  • item 的【可视占比区间 ([0, 1])】与【偏移区间 ([50, 0])】成反比，所以用 1 减去 itemDisplayPercentage 成正向比例，再去乘以 offsetYDelta 算出偏移

# 三、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍

GitHub: https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 升级到3.24后页面还会多次rebuild吗？🧐
Flutter - 轻松搞定炫酷视差(Parallax)效果

+ ← + Flutter - 轻松搞定炫酷视差(Parallax)效果→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/526c58/index.html b/pages/526c58/index.html new file mode 100644 index 000000000..9640b093f --- /dev/null +++ b/pages/526c58/index.html @@ -0,0 +1,405 @@ + + + + + + DroidPlugin手札 - home键强杀处理 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-21
目录

DroidPlugin手札 - home键强杀处理

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

DroidPlugin是360开源的插件化框架，github地址为：https://github.com/DroidPluginTeam/DroidPlugin (opens new window)。 +因公司业务及项目历史原因，来公司的这段时间一直在使用DroidPlugin进行业务开发，期间遇到的一些问题在此进行总结记录。

# 一、背景

为了方便访客知道本章在解决什么问题，这里先把需求背景说明清楚。

  1. 公司业务需求，需要在产品App中以插件的方式安装游戏apk，之前的Android开发团队选用了360的DroidPlugin来实现这个需求。
  2. 需求方（金主）要求当用户在按下home键后，我们的app不得驻留进程，也就是说，这个使用了DroidPlugin开发的产品app，需要在接收到home事件时，将与该app相关的所有进程全部杀死。

这里的所有进程指的是产品app本身的【宿主进程】，与作为插件安装的游戏【插件进程】。

# 二、home事件与进程自杀处理

# 1、怎么监听home事件

在我们每次点击Home按键时系统会发出action为Intent.ACTION_CLOSE_SYSTEM_DIALOGS的广播，用于关闭系统Dialog，此广播可以来监听Home按键，这种方式是我目前用过的最好的。

/**
+ * @创建者 LQR
+ * @时间 2019/1/7
+ * @描述 home键监听
+ */
+public class HomeEventWatcher extends BroadcastReceiver {
+
+    private Context mContext;
+
+    private HomeEventWatcher(Context context) {
+        mContext = context;
+    }
+
+    private static HomeEventWatcher INSTATNCE;
+
+    public static final HomeEventWatcher get(Context context) {
+        if (INSTATNCE == null) {
+            synchronized (HomeEventWatcher.class) {
+                if (INSTATNCE == null) {
+                    INSTATNCE = new HomeEventWatcher(context.getApplicationContext());
+                }
+            }
+        }
+        return INSTATNCE;
+    }
+
+    /**
+     * 注册事件监听（在onCreate()中执行）
+     */
+    public HomeEventWatcher register() {
+        if (mHomeClickListener != null && mContext != null) {
+            IntentFilter filter = new IntentFilter(Intent.ACTION_CLOSE_SYSTEM_DIALOGS);
+            mContext.registerReceiver(this, filter);
+        }
+        return this;
+    }
+
+    /**
+     * 反注册事件监听（在onDestroy()中执行）
+     */
+    public void unRegister() {
+        mContext.unregisterReceiver(this);
+    }
+
+    /*------------------ 点击事件监听 begin ------------------*/
+    private static final class Home {
+        private static final String SYSTEM_DIALOG_REASON_KEY      = "reason";
+        private static final String SYSTEM_DIALOG_REASON_HOME_KEY = "homekey";
+    }
+
+    private OnHomeClickListener mHomeClickListener;
+
+    public HomeEventWatcher setHomeClickListener(OnHomeClickListener homeClickListener) {
+        mHomeClickListener = homeClickListener;
+        return this;
+    }
+
+    @Override
+    public void onReceive(Context context, Intent intent) {
+        String intentAction = intent.getAction();
+        // Log.i("MyAPP", "intentAction =" + intentAction);
+
+        // 按下home键事件
+        if (TextUtils.equals(intentAction, Intent.ACTION_CLOSE_SYSTEM_DIALOGS)) {
+            String reason = intent.getStringExtra(Home.SYSTEM_DIALOG_REASON_KEY);
+            // Log.i("MyAPP", "reason =" + reason);
+            if (TextUtils.equals(Home.SYSTEM_DIALOG_REASON_HOME_KEY, reason)) {
+                if (mHomeClickListener != null) {
+                    mHomeClickListener.onHomeClick();
+                }
+            }
+        }
+        // 其他按键事件
+        // ...
+    }
+
+    /*------------------ 点击事件监听 end ------------------*/
+    public interface OnHomeClickListener {
+        void onHomeClick();
+    }
+}
+

# 2、强杀进程

以下方法二选一：

android.os.Process.killProcess(android.os.Process.myPid());
+System.exit(0);
+

注意，最好在确保app进程处于后台进程时再执行，因为部分设备会自动重启那些被强杀的前台进程。或者，想办法关闭所有的Activity，然后直接执行强杀，至于如何关闭所有Activity，下面会提供一种简单粗暴的方法。

# 3、adb指令

这里提供2个adb指令，方便查看进程状况、强制结束进程。

adb shell " procrank | grep com.xxx.yyy "	// 查看进程状况（若进程不存在，则终端不显示任何信息）
+adb shell am force-stop com.xxx.yyy        // 强制结束进程
+

注意： +1）com.xxx.yyy不是包名，而是applicationId，通常情况下，包名与applicationId一致。 +2）使用DroidPlugin运行的插件，会多出来一个插件进程，进程名一般为 宿主进程名+PluginP07。

# 三、DroidPlugin强杀躺坑

下面正式进入本章核心内容，情景前提：产品app在接收到home事件时，会执行进程自杀逻辑，杀死与当前app相关的所有进程。

# 1、杀不死的宿主进程

# 1）现象

启动产品app，然后直接按home键，使用AndroidStudio观察进程并查看日志输出，看到控制台输出了强杀日志，而app进程在杀死后重启了。

# 2）分析

通过日志可以确定强杀代码有被执行到，并且进程也被杀死过，这个进程重启不是项目代码触发的，应该是DroidPlugin设置了类似保活机制的东西，导致Android系统拉起被强杀的产品app。通过查阅DroidPlugin源码，可以知道DroidPlugin会启动一个Service，用来管理插件（安装、卸载等），这个Service使用了start和bind方式启动，并且设置前台进程保活，代码如下：

// =================== com.morgoo.droidplugin.pm.PluginManager ===================
+public void connectToService() {
+    if (mPluginManager == null) {
+        try {
+            Intent intent = new Intent(mHostContext, PluginManagerService.class);
+            intent.setPackage(mHostContext.getPackageName());
+            mHostContext.startService(intent);
+
+            String auth = mHostContext.getPackageName() + ".plugin.servicemanager";
+            Uri uri = Uri.parse("content://" + auth);
+            Bundle args = new Bundle();
+            args.putString(PluginServiceProvider.URI_VALUE, "content://" + auth);
+            Bundle res = ContentProviderCompat.call(mHostContext, uri,
+                    PluginServiceProvider.Method_GetManager,
+                    null, args);
+            if (res != null) {
+                IBinder clientBinder = BundleCompat.getBinder(res, PluginServiceProvider.Arg_Binder);
+                onServiceConnected(intent.getComponent(), clientBinder);
+            } else {
+                mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+            }
+        } catch (Exception e) {
+            Log.e(TAG, "connectToService", e);
+        }
+
+    }
+}
+
+// =================== com.morgoo.droidplugin.PluginManagerService ===================
+@Override
+public void onCreate() {
+    super.onCreate();
+    keepAlive();
+    getPluginPackageManager(this);
+}
+private void keepAlive() {
+    try {
+        Notification notification = new Notification();
+        notification.flags |= Notification.FLAG_NO_CLEAR;
+        notification.flags |= Notification.FLAG_ONGOING_EVENT;
+        startForeground(0, notification); // 设置为前台服务避免kill，Android4.3及以上需要设置id为0时通知栏才不显示该通知；
+    } catch (Throwable e) {
+        e.printStackTrace();
+    }
+}
+
+

# 3）方案

应该大致可以确定，宿主进程杀不死的原因，就是这个PluginManagerService导致的，处理方式有2种。

  • 宿主自杀前先关闭PluginManagerService
/**
+ * 停止插件服务
+ */
+private void stopPluginServer() {
+    Intent intent = new Intent();
+    intent.setClass(PluginManager.getInstance().getHostContext(), PluginManagerService.class);
+    CONTEXT.getApplicationContext().stopService(intent);
+}
+
  • 取消PluginManagerService保活，并且不使用start方式启动。因为bind方式启动的Service，其生命周期与app一致，按home键时会触发强杀进程，不需要手动关闭。
// =================== com.morgoo.droidplugin.pm.PluginManager ===================
+public void connectToService() {
+    if (mPluginManager == null) {
+        try {
+            Intent intent = new Intent(mHostContext, PluginManagerService.class);
+            intent.setPackage(mHostContext.getPackageName());
+            // mHostContext.startService(intent);
+			...
+            mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+        } catch (Exception e) {
+            Log.e(TAG, "connectToService", e);
+        }
+
+    }
+}
+
+// =================== com.morgoo.droidplugin.PluginManagerService ===================
+@Override
+public void onCreate() {
+    super.onCreate();
+    // keepAlive();
+    getPluginPackageManager(this);
+}
+
+

# 2、启动App直接进入强杀前运行的插件

# 1）现象

游戏运行中，按下home键强杀app，点击App icon再次启动App，直接进入刚刚的游戏。

# 2）分析

在插件游戏运行过程中，打开终端或cmd，使用adb查看当前栈信息：

adb shell dumpsys activity activities top  
+

可以看到，游戏进程（插件进程）与产品app进程（宿主进程）共用一个Activity栈，由此可以推测，因为宿主App在被强杀的时候，系统保存了宿主进程的Activity栈信息，所以，在产品app下次启动时，系统会恢复栈记录。

# 3）方案

根据前面的推测，针对目前的问题，方案无非就2个，要么让宿主进程在被强杀时不要被系统保存栈记录，要么让宿主进程与插件进程不要共用一个栈。要注意，方案一才是关键，但这个与第3个坑有关联，所以，这里就只说下方案二吧。很简单，修改产品app（宿主）入口Activity的启动模式即可，如把 launchMode 修改为 singleInstance，这样的话，下次通过icon启动产品app时，系统会单独使用一个栈来存放这个入口Activity，从而避免与插件共用一个栈的问题。修改完成后，启动产品app，再启动游戏插件，这时，通过adb命令查看当前栈信息：

adb shell dumpsys activity activities top  
+

可以看到产品app与游戏插件不在一个栈内，这时，按home键，再启动就不会再进入游戏界面了。但是，方案二并不是正确的解决办法，方案一才是，因为进程强杀前的栈信息还是会被保留下来的，如果项目采用的是Activity + Fragment架构，这时，效果会很"神奇"，这绝对不是产品希望看到的。那要怎样才能让进程在被强杀时不要被系统保存栈记录呢？请继续往下看。

# 3、启动插件B时直接启动插件A

# 1）现象

进入产品app，启动游戏A，按home键，再进入产品app，启动游戏B，这时，直接启动了游戏A。

# 2）分析

这就是前面问题2说到的，状态保存问题，插件进程在按下home时被强杀，这时，系统认为该游戏插件是意外退出，会保存当前游戏的状态，以便下次启动时恢复。要知道，DroidPlugin使用组件预先占坑的方式，预先在宿主清单文件中声明好多个Activity、Service等，并且会对组件进行复用，所以，当下次启动另一个游戏时，刚好复用了前一个游戏使用过的组件（Activity），于是在恢复状态的时候，就把前一个游戏恢复回来了。

以上分析个人猜测，不知说法是否正确，如有问题请不吝赐教~

# 3）方案

游戏（插件）退出时，销毁游戏所有的Activity，销毁当前进程所有Activity的方法如下：

/**
+ * 关闭当前App所有Activity
+ */
+public void finishAllActivities(Application application) {
+    List<Activity> activities = getActivitiesByApplication(application);
+    if (activities != null && activities.size() > 0) {
+        for (int i = activities.size() - 1; i >= 0; i--) {
+            Activity activity = activities.get(i);
+            activity.finish();
+            Log.e("lqr", "finish activity : " + activity);
+        }
+    }
+}
+
+/**
+ * 获取当前App中所有Activity
+ */
+public List<Activity> getActivitiesByApplication(Application application) {
+    List<Activity> list = new ArrayList<>();
+    try {
+        Class<Application> applicationClass = Application.class;
+        Field mLoadedApkField = applicationClass.getDeclaredField("mLoadedApk");
+        mLoadedApkField.setAccessible(true);
+        Object mLoadedApk = mLoadedApkField.get(application);
+        Class<?> mLoadedApkClass = mLoadedApk.getClass();
+        Field mActivityThreadField = mLoadedApkClass.getDeclaredField("mActivityThread");
+        mActivityThreadField.setAccessible(true);
+        Object mActivityThread = mActivityThreadField.get(mLoadedApk);
+        Class<?> mActivityThreadClass = mActivityThread.getClass();
+        Field mActivitiesField = mActivityThreadClass.getDeclaredField("mActivities");
+        mActivitiesField.setAccessible(true);
+        Object mActivities = mActivitiesField.get(mActivityThread);
+        // 注意这里一定写成Map，低版本这里用的是HashMap，高版本用的是ArrayMap
+        if (mActivities instanceof Map) {
+            @SuppressWarnings("unchecked")
+            Map<Object, Object> arrayMap = (Map<Object, Object>) mActivities;
+            for (Map.Entry<Object, Object> entry : arrayMap.entrySet()) {
+                Object value = entry.getValue();
+                Class<?> activityClientRecordClass = value.getClass();
+                Field activityField = activityClientRecordClass.getDeclaredField("activity");
+                activityField.setAccessible(true);
+                Object o = activityField.get(value);
+                list.add((Activity) o);
+            }
+        }
+    } catch (Exception e) {
+        e.printStackTrace();
+        list = null;
+    }
+    return list;
+}
+

注意：这个关闭所有Activity的方法可以用来解决问题2最后遗留的问题。

要注意，DroidPlugin会为每个插件单独创建进程，也就是说，如果你项目中使用了DroidPlugin，就会涉及到多进程，在启动插件时，宿主的Application内的逻辑会执行多次（宿主、插件进程一创建就会执行），所以，建议在项目的自定义Application中对进程进行区分，根据不同进程分别处理（如：第三方面SDK只需要在产品app宿主进程中初始化），判断当前进程是否为插件进程的方法如下：

/**
+ * 判断当前进程是否为插件进程
+ *
+ * @param context   上下文
+ * @param hostAppId 宿主appid
+ * @return
+ */
+public boolean adjustPluginProcess(Context context, String hostAppId) {
+    ActivityManager am = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
+    List<ActivityManager.RunningAppProcessInfo> runningAppProcesses = am.getRunningAppProcesses();
+    if (runningAppProcesses != null && runningAppProcesses.size() > 0) {
+        for (ActivityManager.RunningAppProcessInfo info : runningAppProcesses) {
+            // Step 1. 找到当前进程
+            if (info.pid == Process.myPid()) {
+                // Log.e("lqr", "info.processName = " + info.processName);
+                // Step 2. 判断当前进程是否为插件进程（依据）
+                return !info.processName.equals(hostAppId);
+            }
+        }
+    }
+    return false;
+}
+

Q：为什么要传入宿主的appid？ +A：这里说的appid指的就是applicationId。因为appid不等同于包名，我们常说的一个设备上不能安装相同包名的app这种说法是不严谨的，应该是不能安装相同appid的app，此外，一个项目在多渠道的情况下，是可以通过gradle来指定修改appid的，如果你的项目中有使用过多渠道打包，相信应该能够明白，综上，包名不能作为判断宿主进程的依据，所以只能使用appid来判断。 +Q：为什么不以进程名是否带有 "PluginP" 字样来判断是否为插件进程？ +A：亲测这种方式不准确，在有些设备上，插件进程的进程名是这样的规则，但有些设备不是，直接是插件原本的applicationId。

通过上面的代码，根据项目的具体情况，分别处理宿主进程与插件进程吧，建议2个进程在监听到home事件时，都关闭所有Activity，这样系统就不会保存栈状态了（一定要先关闭插件的，再关闭宿主的！！）。

# 4、部分4.x设备安装插件失败-500

公司是做盒子应用开发的，在部分4.x的盒子上确实出现了使用DroidPlugin无法正常安装插件的情况，但旧版的DroidPlugin就不会，我比对了2个版本的DroidPlugin，最终定位到在com.morgoo.droidplugin.pm包下的PluginManager，其中有这么一个方法:

新版的DroidPlugin适配了高版本的Android系统（如：Android8.0）

// =================== 旧版DroidPlugin ===================
+public void connectToService() {
+    if (mPluginManager == null) {
+        try {
+            Intent intent = new Intent(mHostContext, PluginManagerService.class);
+            intent.setPackage(mHostContext.getPackageName());
+            mHostContext.startService(intent);
+            mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+        } catch (Exception e) {
+            Log.e(TAG, "connectToService", e);
+        }
+    }
+}
+
+// =================== 新版DroidPlugin ===================
+public void connectToService() {
+    if (mPluginManager == null) {
+        try {
+            Intent intent = new Intent(mHostContext, PluginManagerService.class);
+            intent.setPackage(mHostContext.getPackageName());
+            mHostContext.startService(intent);
+
+            String auth = mHostContext.getPackageName() + ".plugin.servicemanager";
+            Uri uri = Uri.parse("content://" + auth);
+            Bundle args = new Bundle();
+            args.putString(PluginServiceProvider.URI_VALUE, "content://" + auth);
+            Bundle res = ContentProviderCompat.call(mHostContext, uri,
+                    PluginServiceProvider.Method_GetManager,
+                    null, args);
+            if (res != null) {
+                IBinder clientBinder = BundleCompat.getBinder(res, PluginServiceProvider.Arg_Binder);
+                onServiceConnected(intent.getComponent(), clientBinder);
+            } else {
+                mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+            }
+        } catch (Exception e) {
+            Log.e(TAG, "connectToService", e);
+        }
+
+    }
+}
+

正是因为这部分多出来的代码，导致新版的DroidPlugin无法在个别4.x设备上正常安装插件，所以，我们可以对源码进行修改，区分4.x以下及高版本的代码逻辑即可，如：

public void connectToService() {
+	if (mPluginManager == null) {
+		try {
+			Intent intent = new Intent(mHostContext, PluginManagerService.class);
+			intent.setPackage(mHostContext.getPackageName());
+			// mHostContext.startService(intent);
+
+			if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
+				mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+			} else {
+				String auth = mHostContext.getPackageName() + ".plugin.servicemanager";
+				Uri uri = Uri.parse("content://" + auth);
+				Bundle args = new Bundle();
+				args.putString(PluginServiceProvider.URI_VALUE, "content://" + auth);
+				Bundle res = ContentProviderCompat.call(mHostContext, uri,
+						PluginServiceProvider.Method_GetManager,
+						null, args);
+				if (res != null) {
+					IBinder clientBinder = BundleCompat.getBinder(res, PluginServiceProvider.Arg_Binder);
+					onServiceConnected(intent.getComponent(), clientBinder);
+				} else {
+					mHostContext.bindService(intent, this, Context.BIND_AUTO_CREATE);
+				}
+			}
+
+		} catch (Exception e) {
+			Log.e(TAG, "connectToService", e);
+		}
+
+	}
+}
+

# 四、最后

以上，就是本人在实际开发中，使用DroidPlugin的项目在强杀时的踩坑记录分享，如果有什么更好的解决方案，希望可以一起交流，如文章中说明有问题欢迎指出交流，不喜勿喷。

+ +
+
#插件化#DroidPlugin
Android - 云游戏本地悬浮输入框实现
RePlugin集成Fresco

+ ← + RePlugin集成Fresco→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/531d2b/index.html b/pages/531d2b/index.html new file mode 100644 index 000000000..cc4db5c5e --- /dev/null +++ b/pages/531d2b/index.html @@ -0,0 +1,300 @@ + + + + + + Flutter - 实现列表上下拉切换header | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-04-17
目录

Flutter - 实现列表上下拉切换header

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 背景

这是之前需求需要实现的效果：

  1. 一进入页面显示的是品牌广告视图（代号: A），上拉超过一定的距离后，向上翻到相册视图（代号: B）
  2. 下拉超过一定距离后切换为 A，快速下拉回到顶部的情况下不会切换到 A ！

这里的 A 和 B 对应的就是下图效果图中的 AAA 和 BBB 视图

# 实现逻辑

定义正在展示的视图类型

enum VerticalFlipShowingType {
+  aaa,
+  bbb,
+}
+

添加变量 headerFlipShowingType 用来记录当前 header 正在显示的类型，默认为 aaa

/// 当前header翻页视图显示的视图类型
+VerticalFlipShowingType headerFlipShowingType = VerticalFlipShowingType.aaa;
+

主体结构

Scaffold(
+  body: CustomScrollView(
+      slivers: [
+      
+        SliverToBoxAdapter(child: _buildHeaderWidget()), // header（AAA + BBB）
+        
+        SliverList( // 正常的列表 （显示：index -- 下标）
+          delegate: SliverChildBuilderDelegate(
+            (ctx, index) {
+              return ListTile(title: Text("index -- $index"));
+            },
+            childCount: 40,
+          ),
+        )
+      ],
+    ),
+  ),
+  
+  // 右下角的浮动按钮，用来切换 header
+  floatingActionButton: FloatingActionButton(
+    onPressed: () {
+      setState(() {
+          headerFlipShowingType =
+              headerFlipShowingType == VerticalFlipShowingType.aaa
+                  ? VerticalFlipShowingType.bbb
+                  : VerticalFlipShowingType.aaa;
+      });
+    },
+    ...
+  ),
+);
+

从上到下，依次为 header，正常的列表数据，以及右下角按钮，点击按钮以测试切换效果

接下来是 header 的构建方法内容，为了方便理解，先来看看整体结构

Widget _buildHeaderWidget() {
+  return SizedBox( // 限制 Stack 的高度，否则报错
+      height: headerFlipShowingType == VerticalFlipShowingType.aaa
+          ? headerFlipHeightA
+          : headerFlipHeightB
+      child: Stack(
+        clipBehavior: Clip.none, // 子视图超出 Stack 不裁剪，依旧显示
+        children: [
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: headerFlipHeight, // AAA 与 BBB 加起来的总高度
+            child: ListView(
+              padding: EdgeInsets.zero, // 消除顶部刘海造成的安全区域偏移
+              physics: const NeverScrollableScrollPhysics(), // 不可滚动
+              children: [
+                SizedBox(
+                  height: headerFlipHeightA,
+                  child: const HeaderFlipWidget(
+                    text: "AAA",
+                    color: Color(0xFFFA5252),
+                  ),
+                ),
+                SizedBox(
+                  height: headerFlipHeightB,
+                  child: const HeaderFlipWidget(
+                    text: "BBB",
+                    color: Color(0xFF228BE6),
+                  ),
+                ),
+              ],
+            ),
+          )
+        ],
+      ),
+  );
+}
+
  • 在 header 中，AAA 和 BBB 视图都是存放到 ListView
  • 包裹Stack 的 SizedBox 就是为了控制 header 的高度，且 header 的高度会跟随当前展示的类型而改变，如：当前展示 AAA，则高度为 AAA 视图的高度，展示 BBB 时，则高度为 BBB 视图的高度
  • 使用 Stack + Positioned 这个组合，将 Positioned 的 bottom 设置为 0，即 ListView 的底部紧贴 Stack 的底部，使得 ListView 只能向上超出 Stack
  • Stack 设置了 clipBehavior 为 Clip.none，因此在正在显示 BBB 视图的情况下，下拉列表可以看到 AAA 的视图内容
  • 固定 Positioned 的 高度为 AAA 和 BBB 视图的总高，目的是为了结合后面提及的透明 Container（或者说 AnimatedContainer B）， 方便控制 BBB 视图的显示

如果这里还不太理解 AAA 和 BBB 的显示逻辑也不用担心，下面会进行详细说明

我们来看看此时的效果：

为了完整显示 AAA 视图，且不显示 BBB 视图，在 AAA 的前边添加一个透明的 Container，并把高度设置为 BBB 的高度（显示 BBB 视图时，透明的 Container 的高度设置为 0）

ListView(
+  padding: EdgeInsets.zero,
+  physics: const NeverScrollableScrollPhysics(),
+  children: [
+    Container( // 添加了透明的 Container
+      height: headerFlipShowingType == VerticalFlipShowingType.aaa
+          ? headerFlipHeightB
+          : 0,
+    ),
+    SizedBox(
+      height: headerFlipHeightA,
+      child: const HeaderFlipWidget(
+        text: "AAA",
+        color: Color(0xFFFA5252),
+      ),
+    ),
+    SizedBox(
+      height: headerFlipHeightB,
+      child: const HeaderFlipWidget(
+        text: "BBB",
+        color: Color(0xFF228BE6),
+      ),
+    ),
+  ],
+)
+

我们再来看看此时的效果：

可以，不过变化很僵硬，加点动画就可以了

完整的 header 的构建方法代码如下

改动的地方在 AnimatedContainer A 和 AnimatedContainer B 注释处

Widget _buildHeaderWidget() {
+  var duration = const Duration(milliseconds: 200);
+  // AnimatedContainer A： 控制整个header以动画的方式改变高度
+  return AnimatedContainer(
+    duration: duration,
+    height: headerFlipShowingType == VerticalFlipShowingType.aaa
+        ? headerFlipHeightA
+        : headerFlipHeightB,
+    child: Stack(
+      clipBehavior: Clip.none,
+      children: [
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: headerFlipHeight,
+          child: ListView(
+            padding: EdgeInsets.zero,
+            physics: const NeverScrollableScrollPhysics(),
+            children: [
+              // AnimatedContainer B：控制 AAA 和 BBB 切换时的互推效果
+              AnimatedContainer(
+                duration: duration,
+                height: headerFlipShowingType == VerticalFlipShowingType.aaa
+                    ? headerFlipHeightB
+                    : 0,
+              ),
+              SizedBox(
+                height: headerFlipHeightA,
+                child: const HeaderFlipWidget(
+                  text: "AAA",
+                  color: Color(0xFFFA5252),
+                ),
+              ),
+              SizedBox(
+                height: headerFlipHeightB,
+                child: const HeaderFlipWidget(
+                  text: "BBB",
+                  color: Color(0xFF228BE6),
+                ),
+              ),
+            ],
+          ),
+        )
+      ],
+    ),
+  );
+}
+
  • AnimatedContainer A: 控制整个 header 以动画的方式改变高度
  • AnimatedContainer B: 控制 AAA 和 BBB 切换时的互推效果（切到 AAA 时，将 BBB 往下推，切到 BBB 时，将 AAA 往上推）

# 加深理解

为了更易于理解 AAA 和 BBB 的显示逻辑，我做了如下一张图

  • 从左往右看：便是上拉时，从 AAA 切换到 BBB 的过程
  • 从右往左看：便是下拉时，从 BBB 切换到 AAA 的过程

整个过程最主要的就是 AnimatedContainer A 和 AnimatedContainer B 的高度变化

  • 前置条件：Positioned 的 高度（即 ListView 的高度）为 AAA 和 BBB 视图的总高
  • 当显示 AAA 时，即图一，Stack 的高度为 AAA 的高度，AnimatedContainer B 的高度为 BBB的高度，此时的 BBB 视图超出了 ListView 的视窗，所以其不显示，注意看图一半透明的 BBB
  • 在切换显示 BBB 的过程中，即图二到图三，AnimatedContainer B 的高度不断减小至 0，使得 BBB 逐渐进入 ListView 的视窗内，直到完全展示，Stack 的高度也从 AAA 的高度减小至 BBB 的高度，使得 AAA 超出 ListView 的视窗，这样便只会展示 BBB 了

# 完善逻辑

上述的 header 视图切换是靠右下角按钮的点击，实际使用时，是要靠列表滚动时来判断是否进行切换的

/// 偏移量阈值
+final double headerFlipThreshold = 50;
+
+/// 可监听滚动，控制偏移量
+final ScrollController scrollController = ScrollController();
+

在 CustomScrollView 中传入 scrollController，并用 NotificationListener 包裹起来，监听其滚动

Scaffold(
+  body: NotificationListener<ScrollNotification>( // 监听滚动
+    onNotification: (ScrollNotification notification) {
+      _handleListScroll(notification);
+      return false; // return true 会导致进度条将失效
+    },
+    child: CustomScrollView(
+      controller: scrollController, // 传入 scrollController
+      ...
+    ),
+  ),
+  floatingActionButton: ...
+);
+

接下来就是处理滚动

void _handleListScroll(ScrollNotification notification) {
+  var offset = notification.metrics.pixels;
+  if (headerFlipShowingType == VerticalFlipShowingType.aaa) {
+    if (offset > headerFlipThreshold) {
+      setState(() {
+        headerFlipShowingType = VerticalFlipShowingType.bbb;
+      });
+      scrollController.jumpTo(0);
+    }
+  } else {
+    if (offset < -headerFlipThreshold) {
+      setState(() {
+        headerFlipShowingType = VerticalFlipShowingType.aaa;
+      });
+      scrollController.jumpTo(0);
+    }
+  }
+}
+
  • 根据偏移量是否超过阈值，来控制是否切换 header
  • 当切换 header 后，我们需要使用 scrollController 来设置列表的偏移量为 0

到这里也就差不多了，不过，现在还有个细节需要处理，请看图

如图操作所示，快速下拉滚动会直接从 BBB 切换到 AAA，这并不是我们想要的。

我们想要的是：当前正在显示 BBB，且从最顶部开始下拉才能切到 AAA

代码改动：

/// 是否是从最顶部开始滚动的
+bool isStartScrollAtTop = false;
+
void _handleListScroll(ScrollNotification notification) {
+  var offset = notification.metrics.pixels;
+  if (notification is ScrollStartNotification) { // 开始滚动
+    isStartScrollAtTop = offset == 0; // 记录是否是从最顶部开始滚动
+  } else {
+    if (headerFlipShowingType == VerticalFlipShowingType.aaa) {
+      if (offset > headerFlipThreshold) {
+        setState(() {
+          headerFlipShowingType = VerticalFlipShowingType.bbb;
+        });
+        scrollController.jumpTo(0);
+      }
+    } else {
+      if (!isStartScrollAtTop) { // 不是从最顶部开始滚动，则不切换到 AAA
+        return;
+      }
+      if (offset < -headerFlipThreshold) {
+        setState(() {
+          headerFlipShowingType = VerticalFlipShowingType.aaa;
+        });
+        scrollController.jumpTo(0);
+      }
+    }
+  }
+}
+

大功告成，最后附上 Demo 链接：flutter_demo/vertical_flip_page.dart (github.com) (opens new window)

+ +
+
#Dart#Flutter
Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题
Flutter - 获取ListView当前正在显示的Widget信息

+ ← + Flutter - 获取ListView当前正在显示的Widget信息→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/541c9c/index.html b/pages/541c9c/index.html new file mode 100644 index 000000000..4530424f5 --- /dev/null +++ b/pages/541c9c/index.html @@ -0,0 +1,817 @@ + + + + + + Dart的基础语法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-07
目录

Dart的基础语法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

相关代码存放于：https://github.com/LinXunFeng/DartStudy (opens new window)

# 一、变量/常量

# 明确声明

// 明确声明
+String name = 'lxf';
+int age = 18;
+double height = 1.8;
+print('$name, $age, $height'); // lxf, 18, 1.8
+

# 类型推导

# var

runtimeType : 用于获取变量当前的类型

var count = 1; // count的类型为int
+print(count.runtimeType); // int
+// count = "abc"; // 报错，无法为int类型赋值一个字符串
+

# dynamic

dynamic 声明的变量可以赋值为任意类型

在开发中一般不这种做，因为会带来潜在的危险

dynamic type = 'lxf';
+print(type.runtimeType); // String
+
+type = 18;
+print(type.runtimeType); // int
+
+// type.abc(); // 编译期不会报错，运行时找不到方法报错
+

# final & const

final 和 const 都用来定义变量

final gender = 'male';
+// gender = 'female' // 报错
+const country = 'China';
+// country = 'USA'; // 报错
+

区别：

  • const : 必须赋值，接收一个常量值（即编译期间就需要确定的值）
  • final : 可以通过计算/函数动态获取值（即运行时能确定的值）
String getName() {
+  return 'lxf';
+}
+
+main(List<String> args) {
+	final myName = getName();
+  // const myName = getName(); // 报错
+}
+

# 二、数据类型

  • int: 整数
  • double: 浮点数

注：int 和 double 表示的范围不是固定的，具体取决于运行 Dart 的平台

# 整型

// 整型
+int age = 18;
+int hexAge = 0x12;
+print(age); // 18
+print(hexAge); // 18
+

# 浮点型

// 浮点类型 double
+double height = 1.8;
+print(height); // 1.8
+

# 布尔类型

var isFlag = true;
+print('$isFlag ${isFlag.runtimeType}'); // true bool
+
  • Dart中没有非0即真或非空即真
var msg = 'lxf';
+if (msg) { // 报错 Conditions must have a static type of 'bool'.
+  print(msg);
+}
+

# 字符串

// 字符串
+var s1 = 'hello lxf';
+var s2 = "hello lxf";
+

多行字符串

// 多行字符串
+var s3 = '''
+  hello
+  hey
+  lxf''';
+

字符串拼接

  • 字符串和其他变量或表达式拼接: 使用 ${expression}, 如果表达式是一个标识符, 那么 {} 可以省略
var s4 = s1 + s2;
+print(s4); // hello lxfhello lxf
+
+var s5 = 's1 = $s1 and s4 = ${s1 + s2}';
+print(s5); // s1 = hello lxf and s4 = hello lxfhello lxf
+

# 三、集合

# List

  • 使用 [] 字面量
var letters = ['a', 'b', 'c', 'd'];
+print('$letters ${letters.runtimeType}'); // [a, b, c, d] List<String>
+
+List<int> numbers = [1, 2, 3, 4];
+print('$numbers ${numbers.runtimeType}'); // [1, 2, 3, 4] List<int>
+

List 特有的操作

// 由于List的元素是有序的，所有它还提供了一个删除指定索引位置上元素的方法removeAt
+// List根据index删除元素
+numbers.removeAt(3);
+print('$numbers'); // [2, 3, 4]
+

# Set

  • 使用 {} 字面量
  • 与 List 的两个不同点：Set 是无序的，且元素不重复
var lettersSet = {'a', 'b', 'c', 'd'};
+print('$lettersSet ${lettersSet.runtimeType}'); // {a, b, c, d} _CompactLinkedHashSet<String>
+
+Set<int> numbersSet = {1, 2, 3, 4};
+print('$numbersSet ${numbersSet.runtimeType}'); // {1, 2, 3, 4} _CompactLinkedHashSet<int>
+

# Map

var infoMap1 = {'name': 'lxf', 'age': 18};
+print('$infoMap1 ${infoMap1.runtimeType}');
+// {name: lxf, age: 18} _InternalLinkedHashMap<String, Object>
+
+Map<String, Object> infoMap2 = {'height': 1.8, 'country': 'China'};
+print('$infoMap2 ${infoMap2.runtimeType}');
+// {height: 1.8, country: China} _InternalLinkedHashMap<String, Object>
+

Map 特有的操作

// 1.根据key获取value
+print(infoMap1['name']); // lxf
+
+// 2.获取所有的entries
+print('${infoMap1.entries} ${infoMap1.entries.runtimeType}');
+// (MapEntry(name: lxf), MapEntry(age: 18)) MappedIterable<String, MapEntry<String, Object>>
+
+// 3.获取所有的keys
+print('${infoMap1.keys} ${infoMap1.keys.runtimeType}');
+// (name, age) _CompactIterable<String>
+
+// 4.获取所有的values
+print('${infoMap1.values} ${infoMap1.values.runtimeType}');
+// (lxf, 18) _CompactIterable<Object>
+
+// 5.判断是否包含某个key或者value
+print('${infoMap1.containsKey('age')} ${infoMap1.containsValue(18)}');
+// true true
+
+// 6.根据key删除元素
+infoMap1.remove('age');
+print('${infoMap1}'); // {name: lxf}
+

# 集合共有的操作

// 长度
+print(letters.length); // 4
+print(lettersSet.length); // 4
+print(infoMap1.length); // 2
+
+// 添加、删除、包含元素
+numbers.add(5);
+numbersSet.add(5);
+print('$numbers $numbersSet'); // [1, 2, 3, 4, 5] {1, 2, 3, 4, 5}
+
+numbers.remove(1);
+numbersSet.remove(1);
+print('$numbers $numbersSet'); // [2, 3, 4, 5] {2, 3, 4, 5}
+
+print(numbers.contains(2)); // true
+print(numbersSet.contains(2)); // true
+

# 四、函数

函数也是对象，类型为 Function

# 函数定义

注意点：Dart 不支持函数重载！（函数重载：函数名称相同，参数不同）

返回值 函数的名称(参数列表) {
+  函数体
+  return 返回值
+}
+

普通函数

num sum1(num num1, num num2) {
+  return num1 + num2;
+}
+
+print(sum1(1, 2)); // 3
+

省略了类型注释也可以正常工作，但是不建议这么做

sum2(num1, num2) {
+  return num1 + num2;
+}
+
+print(sum2(1, 2)); // 3
+

如果函数的实现只有一个表达式，则可以使用箭头语法

sum3(num num1, num num2) => num1 + num2;
+
+print(sum3(1, 2)); // 3
+

# 可选参数

# 命名可选参数

  • 定义：命名可选参数: {param1, param2, ...}

  • 注意：

    • 如果确定传入的参数不能为 null，则需要加 required 关键字
    • 如果传入的参数可能为 null，则参数类型后面需要加 ?
// 命名可选参数
+printInfo1(String name, {int? age, double? height}) {
+  print('name = $name age = $age height = $height');
+}
+
+// 确定参数不能为null，需要添加 required 关键字
+// printInfo1(String name, {required int age, required double height}) {}
+

参数默认值

printInfo3(String name, {int age = 18, double height = 1.8}) {
+  print('name = $name age = $age height = $height');
+}
+

调用

// 命名可选参数
+printInfo1('lxf'); // name = lxf age = null height = null
+printInfo1('lxf', age: 18); // name = lxf age = 18 height = null
+printInfo1('lxf', age: 18, height: 1.8); // name = lxf age = 18 height = 1.8
+printInfo1('lxf', height: 1.8); // name = lxf age = null height = 1.8
+
+// 参数默认值
+printInfo3('lxf'); // name = lxf age = 18 height = 1.8
+

# 位置可选参数

  • 定义：位置可选参数: [param1, param2, ...]
  • 注意：位置可选参数无法使用 required 关键字
// 位置可选参数
+printInfo2(String name, [int? age, double? height]) {
+  print('name = $name age = $age height = $height');
+}
+

参数默认值

printInfo4(String name, [int age = 18, double height = 1.8]) {
+  print('name = $name age = $age height = $height');
+}
+

调用

// 位置可选参数
+printInfo2('lxf'); // name = lxf age = null height = null
+printInfo2('lxf', 18); // name = lxf age = 18 height = null
+printInfo2('lxf', 18, 1.8); // name = lxf age = 18 height = 1.8
+
+// 参数默认值
+printInfo4('lxf'); // name = lxf age = 18 height = 1.8
+

# 五、运算符

# 常见的运算符

var num = 10;
+print(num / 3); // 除法：3.3333333333333335
+print(num ~/ 3); // 整除：3
+print(num % 3); // 取模：1
+

# 赋值运算符

??= : 当变量为 null 时，使用后面的内容进行赋值

// 赋值运算符
+var name = null;
+name ??= 'lxf';
+print(name); // lxf
+
+var name1 = 'lin';
+name1 ??= 'lxf';
+print(name1); // lin
+

# 条件运算符

?? : 当变量为 null 时，则使用后面的值，否则使用变量的值

var temp = null;
+var other = temp ?? 'lxf';
+print(other); // lxf
+

# 级联

.. : 可以对对象进行连续操作

class Person {
+  String name;
+
+  Person(this.name);
+
+  void run() {
+    print("$name is running");
+  }
+
+  void eat() {
+    print('$name is eating');
+  }
+
+  void swim() {
+    print('$name is swimming');
+  }
+}
+
+main(List<String> args) {
+  final p1 = Person('lxf');
+  p1.run();
+  p1.eat();
+  p1.swim();
+
+  final p2 = Person('lin')
+    ..run()
+    ..eat()
+    ..swim();
+}
+

# 六、流程控制

# if 和 else

不支持非空即真或非0即真，必须是明确的 bool 类型

var isHot = true;
+if (isHot) {
+  print('热门');
+} else {
+  print('冷门');
+}
+

# for

// for
+for (var i = 0; i < 10; i++) {
+  print(i);
+}
+
+// for in 遍历集合
+var names = ['lxf', 'lin'];
+for (var name in names) {
+  print(name);
+}
+

# while

var index = 0;
+while (index < 5) {
+  print('index -- $index');
+  index++;
+}
+

# do-while

var index = 0;
+do {
+  print('index -- $index');
+  index++;
+} while (index < 10);
+

# break

  • 退出循环
var i = 1;
+while (i <= 10) {
+  if (i % 5 == 0) {
+    print("满足条件，退出循环");
+    break;
+  }
+  // 继续下一个循环
+  i++;
+}
+

# continue

  • 终止当前迭代并开始后续迭代
  • 不会退出循环
var num = 0;
+var count = 0;
+
+for (num = 0; num <= 20; num++) {
+  if (num % 2 == 0) {
+    continue;
+  }
+  count++;
+}
+print("累加次数: $count"); // 累加次数: 10
+

# switch-case

var direction = 'east';
+switch (direction) {
+  case 'east':
+    print('东面');
+    break;
+  case 'south':
+    print('南面');
+    break;
+  case 'west':
+    print('西面');
+    break;
+  case 'north':
+    print('北面');
+    break;
+  default:
+    print('其他方向');
+}
+

# 六、类

类的定义如下：

class 类名 {
+  类型 成员名;
+  返回值类型 方法名(参数列表) {
+    方法体
+  }
+}
+

# late 关键字

作用：显式声明一个非空的变量，但不初始化，延迟变量的初始化

默认的构造函数是无参构建函数，这意味着属性无法从默认构建函数得到初始化，这时有两个选择，

选择一：自定义一个构造函数对属性进行初始化

选择二：使用 late 关键字修饰属性，延迟变量的初始化

加上 late 关键字可以通过静态检查，但是会带来运行时风险，你需要保证属性在使用前有进行初始化！

class Person {
+  late String name;
+  late int age;
+}
+
+main(List<String> args) {
+  var p1 = Person();
+  p1.name = 'lxf';
+  print(p1.name); // lxf
+  print(p1.age); // 报错：LateInitializationError: Field 'age' has not been initialized.
+}
+

# 构造方法

# 普通构造方法

当类中没有指定构造方法时，默认会有一个无参的构造方法

class Person {
+  String? name;
+  int? age;
+}
+
+
+main(List<String> args) {
+  var p1 = Person(); // 默认的构造方法
+}
+

可以根据自已的需求，定义自已的构建方法，不过需要注意的是：

当定义了自已的构建方法，则默认的无参构造方法会失效，无法使用！

class Person {
+  String name;
+  int age;
+
+  Person(this.name, this.age);
+}
+

# 命名构造方法

由于 Dart 不支持方法重载，所以没办法创建相同名称的构造方法，如果希望能实现更多的构造方法，这时就需要使用命名构造方法

class Person {
+  String? name;
+  int? age;
+
+  Person.withArgs(String name, int age) {
+    this.name = name;
+    this.age = age;
+  }
+}
+
+
+main(List<String> args) {
+  // var p1 = Person(); // 默认构造方法失效
+  var p1 = Person.withArgs('lxf', 18);
+  print(p1.name);
+  print(p1.age);
+}
+

# 重定向构造方法

在一个构造方法中，调用另一个构造方法进行初始化

class Person {
+  String name;
+  int age;
+
+  Person(this.name, this.age);
+
+  // 重定向构造方法
+  Person.from(String name): this(name, 0);
+}
+

# 常量构造方法

使用 const 修饰构造方法，当传入相同参数时，可以确保创建出来的对象是相同的

注意点：

  • 拥有常量构造方法的类中，所有的成员变量必须是final修饰的
  • 为了创建出相同的对象，在使用常量构造方法时，需要使用 const 关键字
class Person {
+  // 拥有常量构造方法的类中，所有的成员变量必须是final修饰的
+  final String name;
+
+  const Person(this.name);
+}
+
+main(List<String> args) {
+  var p1 = const Person('lxf');
+  var p2 = const Person('lxf');
+  var p3 = const Person('lxf1');
+  
+  const p4 = Person4('lxf');
+  
+  // 判断是不是同一个对象
+  print(identical(p1, p2)); // true
+  print(identical(p1, p3)); // false
+  print(identical(p1, p4)); // true
+}
+  
+

# 工厂构造方法

class Person {
+  late String name;
+
+  static final Map<String, Person> _cache = <String, Person>{};
+
+  // 工厂构造方法
+  factory Person(String name) {
+    var p = _cache[name];
+    if (p == null) {
+      p = Person._internal(name);
+      _cache[name] = p;
+    }
+    return p;
+  }
+
+  Person._internal(this.name);
+}
+
+main(List<String> args) {
+  var p1 = Person5('lxf');
+  var p2 = Person5('lxf');
+  // 判断是不是同一个对象
+  print(identical(p1, p2)); // true
+}
+

注意：当工厂构造方法与默认构造方法重名时，无法被继承，会报错

The default constructor of superclass 'Father' (called by the implicit default constructor of 'Son') must be a generative constructor, but factory found.
+
+父类的构造器必须是一个生成的构造器，而不能是工厂构造器
+

如下方代码所示

class Father {
+
+  factory Father() {
+    return Father._internal();
+  }
+
+  Father._internal();
+}
+
+class Son extends Father {} // 编译报错
+

需要添加一个生成构造器，并将工厂构造器改为命名构造器

class Father {
+
+  Father();
+
+  factory Father.factory() {
+    return Father._internal();
+  }
+  Father._internal();
+}
+
+class Son extends Father {}
+

# getter 和 setter

当希望类中定义的属性不轻易给外部访问时，就可以用到 getter 和 setter

class Marker {
+  String _color;
+
+  String get color => _color;
+
+  set color(String color) {
+    _color = color;
+  }
+
+  Marker(this._color);
+}
+
+main(List<String> args) {
+  final m = Marker('red');
+  m.color = 'blue';
+  print(m.color); // blue
+}
+

# 继承

继承使用 extends 关键字，子类中使用 super 来访问父类

class Animal {
+  String name;
+
+  Animal(this.name);
+
+  eat() {
+    print("吃吃吃");
+  }
+}
+
+class Dog extends Animal {
+  Dog(String name) : super(name);
+}
+
+main(List<String> args) {
+  var dog = Dog("Spike");
+  dog.eat(); // 吃吃吃
+  print(dog.name); // Spike
+}
+

重写父类的方法，@override 是注释，用来标明当前为重写的方法，可有可无，但一般保留着

class Dog extends Animal {
+  Dog(String name) : super(name);
+
+  // 重写父类的eat方法
+  @override
+  eat() {
+    print("$name 在吃");
+  }
+}
+

# 抽象类

抽象类：使用 abstract 声明的类，用于定义通用接口，无法被实例化，方法可以没有实现，该方法称为抽象方法，交由子类去实现

abstract class Building {
+  getHeight();
+
+  getArea() {
+    print("hello");
+  }
+}
+
+class Tower extends Building {
+  @override
+  getHeight() {
+    print("55m");
+  }
+}
+
+main(List<String> args) {
+  var tower = Tower();
+  tower.getArea(); // hello
+  tower.getHeight(); // 55m
+}
+

# 隐式接口

  • Dart 没有关键字可以用来声明接口，所有的类都是隐式接口

  • 当一个类被当作接口使用时，那么实现这个接口的类必须实现接口中的所有方法

  • 实现接口使用 implements 关键字

  • 被实现的接口方法不可以使用 super 调用接口中的方法

class Runner {
+  run() {
+    print("running");
+  }
+}
+
+abstract class Fly {
+  fly();
+}
+
+class SuperPerson implements Runner, Fly {
+  @override
+  run() {
+    // 实现接口的方法不可以调用super
+    // 报错：The method 'run' is always abstract in the supertype.
+    // super.run();
+    print('自由自在的奔跑');
+  }
+
+  @override
+  fly() {
+    print('起飞');
+  }
+}
+

# Mixin混入

Dart 不支持多继承，使用接口时需要实现接口中的所有方法，而我们需要在当前类可以复用其它类中的实现时就需要用到 Mixin混入 的方式。

  • 定义：To implement a mixin, create a class that extends Object and declares no constructors. Unless you want your mixin to be usable as a regular class, use the mixin keyword instead of class.
  • 取自官方链接：https://dart.dev/guides/language/language-tour#adding-features-to-a-class-mixins
  • 大致意思：创建一个继承自 Object 的类，且没有声明构造函数，则该类就可被混入。除非你希望你的混入类可以被当作常规类使用，否则请使用 mixin 关键字，而不是 class

特性：

  • mixin 关键字声明混入（非必要，也可以用 class）

  • 混入类继承自 Object，且不可以有构造方法

  • on 关键字限定指定类的子类可以使用当前混入（不加默认限定为 Object）

  • 使用 mixin 后无法被继承

  • 使用 with 进行混入

  • 父类与混入的方法重名时，使用的是混入的方法

// mixin Runner {} // 可以不使用on，默认是 on Object
+
+mixin Runner on Animal {
+  run() {
+    print('跑起来了');
+  }
+}
+
+class Animal {
+  run() {
+    print('Animal run');
+  }
+}
+
+class SuperPeople extends Animal with Runner {} // 必须继承 Animal 才可以混入 Runner
+
+// 报错：'Runner' can't be mixed onto 'Object' because 'Object' doesn't implement 'Animal'.
+// class Person with Runner {}
+
+// 报错：Classes can only extend other classes.
+// class Person extends Runner {} // Runner无法被继承
+
+main(List<String> args) {
+  var p = SuperPeople();
+  p.run(); // 跑起来了（使用的是混入的方法，而不是父类中的）
+}
+

# 当前类、父类与混入的实现优先级

总结：当前类 > 混入 > 父类

class A {
+  void method() {
+    print('I am A');
+  }
+}
+
+class B {
+  void method() {
+    print('I am B');
+  }
+}
+
+class C extends A with B {
+  // void method() {
+  //   print('I am C');
+  // }
+}
+
+main(List<String> args) {
+  var c = C();
+  /**
+   * C 有无自己的 method 方法实现：
+   *  - 有：打印：I am C
+   *  - 无：打印：I am B
+   */
+  c.method();
+}
+

# 七、枚举

// 定义枚举
+enum Color { red, blue, green }
+
+main(List<String> args) {
+  print(Color.red); // Color.red
+
+  print(Color.red.index); // 0 枚举的下标从0开始
+  print(Color.blue.index); // 1
+
+  print(Color.values); // [Color.red, Color.blue, Color.green]
+
+  var color = Color.green;
+  switch (color) {
+    case Color.red:
+      print("红");
+      break;
+    case Color.blue:
+      print("蓝");
+      break;
+    case Color.green:
+      print("绿");
+      break;
+  }
+}
+

# 八、泛型

# List 使用泛型

// List
+var myList = ['lxf', 18];
+print(myList.runtimeType); // List<Object>
+
+// List使用泛型，限制类型
+var numList = <int>[10, 20];
+List<String> nameList = ["lxf", "lin"]; // 一般使用这种
+
+// 报错: The element type 'int' can't be assigned to the list type 'String'.
+// List<String> nameList = ["lxf", "lin", 18];
+

# Map 使用泛型

// Map
+var msgMap = {1: 'one', 'name': 'lxf', 'age': 18};
+print(msgMap.runtimeType); // _InternalLinkedHashMap<Object, Object>
+
+// Map使用泛型，限制类型
+var infoMap = <String, String>{'name': 'lxf', 'age': '18'};
+// Map<String, String> profileMap = {'name': 'lxf', 'age': '18'}; // 一般使用这种
+
+// 报错：The element type 'int' can't be assigned to the map value type 'String'.
+// Map<String, String> profileMap = {'name': 'lxf', 'age': 18};
+

# 类定义泛型

将类的属性以泛型做为类型声明，由外部来决定最终的类型

class Point<T> {
+  T x;
+  T y;
+
+  Point(this.x, this.y);
+}
+
+main(List<String> args) {
+  Point p = Point<double>(10.5, 20.5);
+  print(p.x.runtimeType); // double
+}
+

如果希望属性的类型只能是数字，可以使用 extends 来限制泛型 T 只能为 num 的子类

class Size<T extends num> {
+  T width;
+  T height;
+
+  Size(this.width, this.height);
+}
+
+main(List<String> args) {
+  Size s = Size<int>(20, 10);
+  // 报错：A value of type 'Size<String>' can't be assigned to a variable of type 'Size<num>'.
+  // Size s1 = Size<String>("20", "10"); 
+}
+

# 九、库的使用

# 库的导入

# Dart 标准库

Dart 标准库的导入前缀为 dart:

import 'dart:io';
+import 'dart:html';
+import 'dart:math';
+

# 自定义库

libs/math_utils.dart 文件的内容：

num sum(num num1, num num2) {
+  return num1 + num2;
+}
+
+num multiply(num num1, num num2) {
+  return num1 * num2;
+}
+

使用

// 导入自定义库
+import 'libs/math_utils.dart';
+
+main(List<String> args) {
+  print(sum(10, 20)); // 30
+  print(multiply(10, 20)); // 200
+}
+

# 第三方库

在项目目录下创建 pubspec.yaml 文件，在 dependencies 下添加需要依赖的第三方的库名与版本

第三库的使用说明可在 https://pub.flutter-io.cn (opens new window) 上查找

name: dartStudy
+description: this is lxf's study project
+dependencies:
+  dio: ^4.0.0
+environment:
+  sdk: ">=2.10.0 <3.0.0"
+

填写好依赖后，在终端下执行 dart pub get 命令，终端会自动拉取对应版本的第三方文件，之后在代码中就可以导入并使用

// 导入第三方库
+import 'package:dio/dio.dart';
+
+main(List<String> args) {
+  getHttp();
+}
+
+void getHttp() async {
+  try {
+    var response = await Dio().get('http://www.google.cn');
+    print(response);
+  } catch (e) {
+    print(e);
+  }
+}
+

# 延迟加载

  • 作用：在需要的时候才进行加载
  • 好处：减少 App 的启动时间
  • 使用：使用 deferred as
// 延迟加载
+import 'package:dio/dio.dart' deferred as diolib;
+

在使用延迟加载的库中，需要调用 loadLibrary 以加载声明为延迟加载的库

main(List<String> args) async {
+  // 调用loadLibrary方法来加载延迟加载的库
+  await diolib.loadLibrary();
+  diolib.Dio().get('http://www.google.cn');
+}
+

# 给库起别名

一般在与别的库的内容冲突时使用

import 'libs/math_utils.dart' as MathUtils; // 别名
+
+main(List<String> args) {
+  print(MathUtils.sum(10, 20)); // 30
+  print(MathUtils.multiply(10, 20)); // 200
+}
+

# 指定库内容的显示与隐藏

import 'libs/math_utils.dart' show sum, multiply; // show: 显示指定的内容（即部分引入）
+import 'libs/math_utils.dart' hide sum; // hide: 隐藏指定的内容
+

# library、part 和 part of

作用：

  • library：定义库名
  • part：关联分库文件
  • part of：声明隶属哪个库，使用的是 library 定义的库名

特点：

  • library、part 和 part of 都必须定义在文件的第一行，否则会报错
  • 主库可以访问分库中的私有成员
  • 如果需要导入其它库，只能在主库中导入，无法在分库中导入，且 import 只能放在 library 和 part 之间
  • 如果外部需要使用到分库的内容，只需要导入主库即可

文件目录结构：

├── 16_库的定义.dart
+└── lib
+    └── part
+        ├── fitsize.dart
+        ├── fitsize_part1.dart
+        └── fitsize_part2.dart
+

fitsize.dart 文件内容

// 定义库名
+library fitsize;
+
+// 关联分库
+part 'fitsize_part1.dart';
+part 'fitsize_part2.dart';
+
+void fit() {
+  // 可以访问分库下的私有成员
+
+  part1PublicMethod(); // part1 public method
+  _part1PrivateMethod(); // part1 private method
+
+  part2PublicMethod(); // part2 public method
+  _part2PrivateMethod(); // part2 private method
+}
+

fitsize_part1.dart 文件内容

part of fitsize; // 声明为主库的一部分
+
+part1PublicMethod() {
+  print("part1 public method");
+}
+
+_part1PrivateMethod() {
+  print("part1 private method");
+}
+

fitsize_part2.dart 文件内容

part of fitsize; // 声明为主库的一部分
+
+part2PublicMethod() {
+  print("part2 public method");
+}
+
+_part2PrivateMethod() {
+  print("part2 private method");
+}
+

这样三个 dart 文件就组成了 fitsize 库，如果外部需要使用到分库的内容，只需要导入主库即可。

如果需要导入其它库，只能在主库中导入，无法在分库中导入，且 import 只能放在 library 和 part 之间，否则会报错。

// fitsize.dart 主库文件
+
+// 定义库名
+library fitsize;
+
+import 'dart:io'; // 导入其它库，只能放在这个位置
+
+// 关联分库
+part 'fitsize_part1.dart';
+part 'fitsize_part2.dart';
+

# export

官方不再推荐使用 part 关键字，而是推荐使用 export

  • 使用：在一个 dart 文件里使用 export 关键字，将其它库文件导出
  • 作用：这样外部在使用时只需要导入一个文件即可使用完整的库内容

文件目录结构：

├── 16_库的定义.dart
+└── lib
+    └── export
+        ├── lxf_utils.dart
+        └── source
+            ├── lxf_file_util.dart
+            └── lxf_math_util.dart
+

lxf_utils.dart 文件内容：

// 定义库名
+library lxf_utils;
+
+// 导出所有的库
+export './source/lxf_math_util.dart';
+export './source/lxf_file_util.dart';
+

lxf_math_util.dart 文件内容：

num sum(num num1, num num2) {
+  return num1 + num2;
+}
+

lxf_file_util.dart 文件内容：

writeFile(String name, String dir_path) {
+  print('写入文件 $dir_path$name ');
+}
+

导入并调用

import 'lib/export/lxf_utils.dart' as utils;
+
+main(List<String> args) {
+  print(utils.sum(1, 2)); // 3
+  utils.writeFile('lxf.jpg', '/lxf/Desktop/'); // 写入文件 /lxf/Desktop/lxf.jpg
+}
+
+ +
+
#dart
最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/56dd3d/index.html b/pages/56dd3d/index.html new file mode 100644 index 000000000..af3d7fe30 --- /dev/null +++ b/pages/56dd3d/index.html @@ -0,0 +1,234 @@ + + + + + + iOS - 打造Moya便捷解析库，提供RxSwift拓展 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-05-24
目录

iOS - 打造Moya便捷解析库，提供RxSwift拓展

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

1、相信大家在使用Swift开发时，Moya (opens new window)是首选的网络工具，在模型解析这一块，Swift版模型解析的相关第三方库有很多，本人最习惯用的就是SwiftyJSON (opens new window)。

2、下面会开始讲解整个主要的开发功能与思想。

3、以下内容是基于大家会使用Moya和SwiftJSON的前提下所著，还不会的同学可以先简单了解后再来阅读本篇文章哦～

# 二、功能开发与思想讲解

# 1、尝试模型解析

Moya请求服务器返回的数据以Response类返回给我们，那我们就给Response类做一个扩展，这里以解析模型为例

// 需要传入一个参数，告知我们要转换出什么模型
+public func mapObject<T: Modelable>(_ type: T.Type) -> T {
+    // 模型解析过程
+    。。。
+  
+    return T
+}
+

Q: 那中间的解析过程该怎么写呢？

A: 可以让开发者遵守某个协议，实现指定的转换方法并描述转换关系。其转换过程我们不需要知道，交给开发者即可。

那接着我们来定义一个协议Modelable，并声明转换方法

public protocol Modelable {
+    mutating func mapping(_ json: JSON)
+}
+

开发者创建一个MyMoel的结构体，遵守协议Modelable,并实现mapping，书写转换关系

struct MyModel: Modelable {
+    var _id = ""
+    
+    mutating func mapping(_ json: JSON) {
+        self._id = json["_id"].stringValue
+    }
+}
+

以目前的现状来分析一下：mapObject可以让开发者传入模型类型，而我们的协议方法却并非是个类方法。那我们需要先得到这个模型类型的对象，再来调用mapping方法

# 2、模型解析的驱动开发

Q: 怎么得到这个对象？

A: 可以在协议中声明一个初始化方法来创建对象。是的，我们在mapObject中创建对应模型类型的对象，调用mapping方法来转换数据，再把模型对象传出去即可。

那我们在Modelable中声明一个init方法，并传入一个参数，区别于其它初始化方法

public protocol Modelable {
+    mutating func mapping(_ json: JSON)
+    init(_ json: JSON)
+}
+

OK，现在把mapObject方法补齐模型解析过程

public func mapObject<T: Modelable>(_ type: T.Type) -> T {
+    let modelJson = JSON(data)["modelKey"]
+    // 模型解析过程
+    var obj = T.init(modelJson)
+    obj.mapping(modelJson)
+    return obj
+}
+

# 3、自定义解析键名

Q: 这样是搞定解析了，但是网络请求回来的json格式错综复杂，有什么办法可以让开发者来自行指定model对应的键名呢？

A: 嗯嗯，既然解析过程是在 Response 扩展里操作的，那我们可以通过协议定义键名属性，并且使用 Runtime 给Response动态添加一个属性，来记录遵守协议后的相应类名

public protocol ModelableParameterType {
+    /// 请求成功时状态码对应的值
+    static var successValue: String { get }
+    /// 状态码对应的键
+    static var statusCodeKey: String { get }
+    /// 请求后的提示语对应的键
+    static var tipStrKey: String { get }
+    /// 请求后的主要模型数据的键
+    static var modelKey: String { get }
+}
+
// MARK:- runtime
+extension Response {
+    private struct AssociatedKeys {
+        static var lxf_modelableParameterKey = "lxf_modelableParameterKey"
+    }
+    var lxf_modelableParameter: ModelableParameterType.Type {
+        get {
+            let value = objc_getAssociatedObject(self, &AssociatedKeys.lxf_modelableParameterKey) as AnyObject
+            guard let type = value as? ModelableParameterType.Type else { return NullParameter.self }
+            return type
+        } set {
+            objc_setAssociatedObject(self, &AssociatedKeys.lxf_modelableParameterKey, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+        }
+    }
+}
+

这里有个坑：_SwiftValue问题 (献上 参考链接 (opens new window)) +如果我们存储的不是OC对象，那么objc_getAssociatedObject取出来的值的类型统统为_SwiftValue，直接as? ModelableParameterType.Type绝对是nil，需要在取出来后as AnyObject再转换为其它类型才会成功～～

现在开发者就可以创建一个类来遵守ModelableParameterType协议，并自定义解析键名

struct NetParameter : ModelableParameterType {
+    static var successValue: String { return "false" }
+    static var statusCodeKey: String { return "error" }
+    static var tipStrKey: String { return "errMsg" }
+    static var modelKey: String { return "results" }
+}
+

# 4、插件注入

Q: 厉害了，不过要在什么时机下存储这个自定义键名的NetParameter？

A: 额，这个～～～ 哦，对了，可以通过Moya提供的插件机制！

翻出Moya中的Plugin.Swift，找到这个process方法，看看方法说明。

/// 在结束之前，可以被用来修改请求结果
+/// Called to modify a result before completion.
+func process(_ result: Result<Moya.Response, MoyaError>, target: TargetType) -> Result<Moya.Response, MoyaError>
+

那好，我们也做一个插件MoyaMapperPlugin给开发者使用，在创建MoyaMapperPlugin时把自定义解析键名的类型传进来

public struct MoyaMapperPlugin: PluginType {
+    var parameter: ModelableParameterType.Type
+    
+    public init<T: ModelableParameterType>(_ type: T.Type) {
+        parameter = type
+    }
+    
+    // modify response
+    public func process(_ result: Result<Response, MoyaError>, target: TargetType) -> Result<Response, MoyaError> {
+        _ = result.map { (response) -> Response in
+            // 趁机添加相关数据 
+            response.lxf_modelableParameter = parameter
+            return response
+        }
+        return result
+    }
+}
+

使用：开发者在创建MoyaProvider对象时，顺便注入插件。(OS: 这一步堪称“注入灵魂”)

MoyaProvider<LXFNetworkTool>(plugins: [MoyaMapperPlugin(NetParameter.self)])
+

# 5、总结

以上就是主要的踩坑过程了。模型数组解析和指定解析也跟这些差不多的，这里就不再赘述。本人已经将其封装成一个开源库 MoyaMapper (opens new window)，包含了上述已经和未曾说明的功能，下面会讲解如何去使用。以上部分可以称为开胃菜，目的就是平滑过渡到下面MoyaMapper的具体使用。

可能单单使用MoyaMapper的默认子库Core，作用体会上并不会很深。但是，如果你也是使用RxSwift来开发项目的话，请安装'MoyaMapper/Rx'吧，绝对一个字：「爽」

# 二、MoyaMapper的使用

MoyaMapper

MoyaMapper是基于Moya和SwiftyJSON封装的工具，以Moya的plugin的方式来实现间接解析，支持RxSwift

JSON数据对照

# 1、定义并注入自定义键名类

  1. 定义一个遵守ModelableParameterType协议的结构体
// 各参数返回的内容请参考上面JSON数据对照图
+struct NetParameter : ModelableParameterType {
+    static var successValue: String { return "false" }
+    static var statusCodeKey: String { return "error" }
+    static var tipStrKey: String { return "" }
+    static var modelKey: String { return "results" }
+}
+

此外，这里还可以做简单的路径处理，以应付各种情况，以'>'隔开

// 假设返回的json数据关于请求状态的相关数据如下所示，
+error: {
+    'errorStatus':false
+    'errMsg':'error Argument type'
+}
+
+
// 我们指明解析路径：error对象下的errMsg字段，一层层表示下去即可
+static var tipStrKey: String { return "error>errMsg" }
+
  1. 以plugin的方式传递给MoyaProvider
// MoyaMapperPlugin这里只需要传入类型
+MoyaProvider<LXFNetworkTool>(plugins: [MoyaMapperPlugin(NetParameter.self)])
+

# 2、定义解析模型

创建一个遵守Modelable协议的结构体

struct MyModel: Modelable {
+    
+    var _id = ""
+    ...
+    
+    init(_ json: JSON) { }
+    
+    mutating func mapping(_ json: JSON) {
+        self._id = json["_id"].stringValue
+        ...
+    }
+}
+
+遵守Modelable协议，实现协议的两个方法，在`mapping`方法中描述模型字段的具体解析
+
+

# 3、解析数据

# 0x00 请求结果与模型解析

// Result
+public func mapResult(params: ModelableParamsBlock? = nil) -> MoyaMapperResult
+
+// Model
+public func mapObject<T: Modelable>(_ type: T.Type, modelKey: String? = nil) -> T
+// Result+Model
+public func mapObjResult<T: Modelable>(_ type: T.Type, params: ModelableParamsBlock? = nil) -> (MoyaMapperResult, T)
+
+// Models
+public func mapArray<T: Modelable>(_ type: T.Type, modelKey: String? = nil) -> [T]
+// Result+Models
+public func mapArrayResult<T: Modelable>(_ type: T.Type, params: ModelableParamsBlock? = nil) -> (MoyaMapperResult, [T])
+

上面的五个方法，观其名，知其意，这里就不过多解释了，主要注意两点：

  • result
// 元祖类型
+// 参数1：根据statusCodeKey取出的值与successValue是否相等
+// 参数2：根据tipStrKey取出的值
+result：(Bool, String)
+
  • params
// params: ModelableParamsBlock? = nil
+// 这里只有在特殊场景下才需要使用到。如：项目中需要在某处使用特定接口，但是返回的json格式跟自己项目的不一样，并且只有这么一两处用得着该额外接口，那就需要我们这个参数了，以Block的方式返回解析参数类型。
+

# 0x01、特定解析

// Model
+public func toJSON(modelKey: String? = nil) -> JSON
+// 获取指定路径的值
+public func fetchJSONString(path: String? = nil, keys: [JSONSubscriptType]) -> String
+

这两个方法，如果没有指定路径，默认都是针对modelKey的

// fetchJSONString(keys: <[JSONSubscriptType]>)
+1、通过 keys 传递数组, 该数组可传入的类型为 Int 和 String
+2、默认是以 modelKey 所示路径，来获取相应的数值。如果modelKey并非是你所想要使用的解析路径，可以使用下方的重载方法重新指定路径即可
+
+// response.fetchJSONString(path: <String?>, keys: <[JSONSubscriptType]>)
+

MoyaMapper也提供了Rx子库，为方便RxSwift的流式编程下便捷解析数据

MoyaMapper默认只安装Core下的文件
+pod 'MoyaMapper'
+
+RxSwift拓展
+pod 'MoyaMapper/Rx'
+

具体使用还不是很明白的同学可以下载并运行Example看看

如果MoyaMapper (opens new window)有什么不足的地方，欢迎提出issues，感谢大家的支持

+ +
+
#iOS#Swift#RxSwift
iOS - 面向协议方式封装空白页功能
iOS - 面向协议封装全屏旋转功能

+ ← + iOS - 面向协议封装全屏旋转功能→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/577e7c/index.html b/pages/577e7c/index.html new file mode 100644 index 000000000..bdca2bc96 --- /dev/null +++ b/pages/577e7c/index.html @@ -0,0 +1,224 @@ + + + + + + iOS逆向 - 运行时分析（二）Cycript | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-03-19
目录

iOS逆向 - 运行时分析（二）Cycript

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、Cycript

Cycript 是一款混合了 OC 和 JS 语法解释器的脚本语言（即可以使用 OC 和 JS 的语法来写脚本），其主要用来注入运行时程序进行调试，在程序重启后，所有通过 Cycript 进行的程序修改内容都会失效，对原生程序和代码毫无副作用。

官网地址：http://www.cycript.org (opens new window)

# 二、安装与简单使用

在 Cydia 中搜索 Cycript，找到安装即可。

在 iOS 设备上输入 cycript，会显示 cy# 提示符

lxf-iPad:~ root# cycript
+cy#
+

这是一个 JS 控制台，输入的内容都由 JS 内核运行。

cy# var name = 'lxf'
+"lxf"
+cy# print(name)
+lxf
+

常用快捷键

快捷键 作用
ctrl + c 取消当前输入或中断执行中的命令
ctrl + d 退出 Cycript
ctrl + l clear 清屏

使用 -p 参数注入指定程序，前提是你的程序得在运行中。

下面展示一下注入 Twitter 后，查看其沙盒路径

lxf-iPad:~ root# cycript -p Twitter
+cy# NSHomeDirectory()
+@"/var/mobile/Containers/Data/Application/2FA6975C-9DB0-4B08-9FE9-365473E86748"
+cy#
+

# 三、实战

目标：如上图所示，我们来将 linxunfeng.top 改成 fullstackaction.com

要修改它就得先找到它，可以使用 recursiveDescription 函数可以递归打印任意视图的层次结构

[[UIApp keyWindow] recursiveDescription].toString()
+

如果我们不清楚完整的函数名时，可以使用敲击 tab 键列出所有匹配项

# cy# [[UIApp keyWindow] recursive【敲击tab键】
+
+cy# [[UIApp keyWindow] recursive
+recursiveDescription             recursivelyForceDisplayIfNeeded
+

看着上面图中打印出来的内容，任谁看了都觉得很烦恼，这里可以使用简化版的方法 _autolayoutTrace

[[UIApp keyWindow] _autolayoutTrace].toString()
+

相比上面的 recursiveDescription 来对，会清晰很多

往下翻，可以找到该段落

\u2022T1ProfileHeaderViewContro...:0x1164bac50
+   UIView:0x1164bae30
+   |   T1ProfileUserInfoViewCont...:0x117748050
+   |   ProfileHeaderBio:0x116498070
+   |   T1TranslateButton:0x116474cc0
+   |   ProfileHeaderTranslatedBi...:0x11773ed70
+   |   ProfileTranslationActivit...:0x11773f170
+   |   UIImageView:0x11773f3f0
+   |   ProfileHeaderLocation:0x11641f090
+   |   UIButtonLabel:0x11641f3b0
+   |   ProfileHeaderWebSite:0x113526840
+   |   |   UIImageView:0x1164e3b60
+   |   |   UIButtonLabel:0x11355bbe0'linxunfeng.top'
+   |   ProfileHeaderBirthday:0x11355bee0
+   |   |   UIButtonLabel:0x11355c200
+   |   ProfileHeaderCreatedDate:0x11355c500
+   |   |   UIImageView:0x1164e4100
+   |   |   UIButtonLabel:0x11355c820'2017\u5e748\u6708 \u52a0\u5165'
+   |   TFNAttributedTextView:0x11641f6b0
+   |   |   T1AccessibilityProxyView:0x11641af00
+   T1ProfileFriendsFollowing...:0x1164dc870
+   |   TFNSolidColorView:0x1164dca50
+   |   T1FlexibleLayoutView:0x1135df410
+   |   |   TFNAttributedTextView:0x1135df810
+   |   |   |   T1AccessibilityProxyView:0x1164e06a0
+   |   |   T1UserFacepileView:0x1164df730
+   |   |   TFNAttributedTextView:0x1164dfb50
+   |   T1ProfileFriendsFollowingHighlightView:0x1164dff50
+

这里说明一下，Cycript 对中文的显示不太友好

可以将上面的输出内容拷贝到一些 Unicode转中文 的工具里，直接转换输出

•T1ProfileHeaderViewContro...:0x1164bac50
+   UIView:0x1164bae30
+   |   T1ProfileUserInfoViewCont...:0x117748050
+   |   ProfileHeaderBio:0x116498070
+   |   T1TranslateButton:0x116474cc0
+   |   ProfileHeaderTranslatedBi...:0x11773ed70
+   |   ProfileTranslationActivit...:0x11773f170
+   |   UIImageView:0x11773f3f0
+   |   ProfileHeaderLocation:0x11641f090
+   |   UIButtonLabel:0x11641f3b0
+   |   ProfileHeaderWebSite:0x113526840
+   |   |   UIImageView:0x1164e3b60
+   |   |   UIButtonLabel:0x11355bbe0'linxunfeng.top'
+   |   ProfileHeaderBirthday:0x11355bee0
+   |   |   UIButtonLabel:0x11355c200
+   |   ProfileHeaderCreatedDate:0x11355c500
+   |   |   UIImageView:0x1164e4100
+   |   |   UIButtonLabel:0x11355c820'2017年8月 加入'
+   |   TFNAttributedTextView:0x11641f6b0
+   |   |   T1AccessibilityProxyView:0x11641af00
+   T1ProfileFriendsFollowing...:0x1164dc870
+   |   TFNSolidColorView:0x1164dca50
+   |   T1FlexibleLayoutView:0x1135df410
+   |   |   TFNAttributedTextView:0x1135df810
+   |   |   |   T1AccessibilityProxyView:0x1164e06a0
+   |   |   T1UserFacepileView:0x1164df730
+   |   |   TFNAttributedTextView:0x1164dfb50
+   |   T1ProfileFriendsFollowingHighlightView:0x1164dff50
+

如果内容较少，如

UIButtonLabel:0x11355c820'2017\u5e748\u6708 \u52a0\u5165'
+

可以使用 echo -e 进行转换输出

echo -e '2017\u5e748\u6708 \u52a0\u5165'
+2017年8月 加入
+

回到正题，我们已经找到了目的控件，接下来就是修改它

UIButtonLabel:0x11355bbe0'linxunfeng.top'
+

在 Cycript 中，如果我们知道一个对象的内存地址，就可以通过 # 操作符来获取该对象。

不过它的类型是：UIButtonLabel，我们可以看看它的父控件

   |   ProfileHeaderWebSite:0x113526840
+   |   |   UIImageView:0x1164e3b60
+   |   |   UIButtonLabel:0x11355bbe0'linxunfeng.top'
+

打印 ProfileHeaderWebSite:0x113526840 这个对象

cy# #0x113526840
+#"<UIButton: 0x113526840; frame = (20 12.186; 123 18); clipsToBounds = YES; opaque = NO; gestureRecognizers = <NSArray: 0x282f56df0>; layer = <CALayer: 0x2822821c0>>"
+

可以看到是个 UIButton，那怎么改标题不是很明白了吗？

[#0x113526840 setTitle:@"fullstackaction.com" forState:UIControlStateNormal]
+

但是并没有任何效果~，没事，那就换设置富文本试试

var siteAttr = [[NSAttributedString alloc] initWithString:@"fullstackaction.com" attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:10],NSForegroundColorAttributeName:[UIColor blueColor]}];
+
+[#0x113526840 setAttributedTitle:siteAttr forState:UIControlStateNormal]
+

大功告成😃

# 四、高级用法

# 1、choose - 查找对象

用法：choose(类名)

有时候上面提到的 recursiveDescription 和 _autolayoutTrace，对我们来说输出内容太多了，且我们知道目标对象的类名，此时就可以通过 choose 这个函数，获取符合条件（当前类及子类）的所有记录，从而快速拿到对象的地址来操作对象

cy# choose(UILabel)
+[#"<T1AccessibleBadgesLabel: 0x11773a1d0; baseClass = UILabel; frame = (265.5 0; 100.24 20.2871); text = '\xe2\x81\xa8LinXunFeng\xe2\x81\xa9'; clipsToBounds = YES; alpha = 0; gestureRecognizers = <NSArray: 0x282f254d0>; layer = <_UILabelLayer: 0x2803585a0>>",#"<T1ScrollingHorizontalLabelCellLabel: 0x117740a70; baseClass = UILabel; frame = (4 0; 35 20.5); text = '\xe5\xaa\x92\xe4\xbd\x93'; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x28035a8a0>>",#"<T1ScrollingHorizontalLabelCellLabel: 0x117742180; baseClass = UILabel; frame = (4 0; 87 20.5); text = '\xe6\x8e\xa8\xe6\x96\x87\xe5\x92\x8c\xe5\x9b\x9e\xe5\xa4\x8d'; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x28035ad50>>",#"<T1ScrollingHorizontalLabelCellLabel: 0x117743890; baseClass = UILabel; frame = (4 0; 35 20.5); text = '\xe6\x8e\xa8\xe6\x96\x87'; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x28035b110>>",#"<T1ScrollingHorizontalLabelCellLabel: 0x116438ef0; baseClass = UILabel; frame = (4 0; 35 20.5); text = '\xe5\x96\x9c\xe6\xac\xa2'; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x28033e580>>",#"<T1AccessibleBadgesLabel: 0x116484790; baseClass = UILabel; frame = (0 0; 139.113 28.6406); text = '\xe2\x81\xa8LinXunFeng\xe2\x81\xa9'; clipsToBounds = YES; userInteractionEnabled = NO; gestureRecognizers = <NSArray: 0x282f27f60>; layer = <_UILabelLayer: 0x28035d9f0>>"]
+

# 2、分类拓展

在 Cycript 中也可以使用 OC 的 Category，为类拓展方法，如

cy# @implementation NSString (LXF)
+    + website { return "fullstackaction.com"; }
+    @end
+
cy# [NSString website]
+@"fullstackaction.com"
+

# 3、封装函数

在实战过程中，往往会遇到一些层次很深的情况，如果靠我们自己手动去循环的查找，会变成非常麻烦，如查找当前最顶层的控制器，这时，我们可以利用 Cycript 来编写自定义函数解决这个问题

cy# function topVc(vc) {
+        if (vc.presentedViewController) {
+              return _topVc(vc.presentedViewController);
+        } else if ([vc isKindOfClass:[UITabBarController class]]) {
+                return _topVc(vc.selectedViewController);
+        } else if ([vc isKindOfClass:[UINavigationController class]]) {
+                return _topVc(vc.visibleViewController);
+        } else {
+              var count = vc.childViewControllers.count;
+              for (var i = count - 1; i >= 0; i--) {
+                    var childVc = vc.childViewControllers[i];
+                    if (childVc && childVc.view.window) {
+                          vc = _topVc(childVc);
+                          break;
+                    }
+              }
+              return vc;
+        }
+    }
+

打印最顶层的控制器

cy# topVc(UIApp.keyWindow.rootViewController)
+#"<T1TabBarViewController: 0x107864270>"
+

每次都在终端里写一次，那岂不是也非常麻烦？我们可以将这些代码写到一个 .cy 文件中

我们可以在 /usr/lib/cycript0.9/com/saurik/substrate/ 找到一个名为 MS.cy 的文件

(function(exports) {
+
+exports.getImageByName = MSGetImageByName;
+exports.findSymbol = MSFindSymbol;
+
+exports.hookFunction = function(func, hook, old) {
+    ...
+};
+
+exports.hookMessage = function(isa, sel, imp, old) {
+    ...
+};
+
+})(exports);
+

参考它写一个即可。附上自己封装的 cy 文件：https://github.com/LinXunFeng/lxf_cycript (opens new window)

下载下来后，将 lxf.cy 拷贝至 /usr/lib/cycript0.9/com/lxf/ 路径下

然后在 cycript 环境下执行：

cy# @import com.lxf.lxf; 0
+

注：分号后面的0 是为了隐藏脚本导入后的脚本内容输出

导入后，使用 lxf.函数名() 即可

cy# lxf.topVc()
+#"<T1TabBarViewController: 0x107864270>"
+

如果不太记得函数名字，可以使用 tab键 查看

cy# lxf.【敲击tab键】
+__defineGetter__      __lookupSetter__      appPath               classMethods          findVc                isString              keyWindow             methods               rootVc                toLocaleString        valueOf
+__defineSetter__      __proto__             cachesPath            constructor           hasOwnProperty        ivarNames             loadFramework         printIvars            subViews              toString
+__lookupGetter__      appId                 classMethodNames      documentPath          isPrototypeOf         ivars                 methodNames           propertyIsEnumerable  subViewsSimple        topVc
+cy# lxf.
+
+ +
+
#iOS#逆向
iOS逆向 - 运行时分析（一）class-dump
iOS逆向 - 运行时分析（三）Frida

+ ← + iOS逆向 - 运行时分析（三）Frida→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/58ae6a/index.html b/pages/58ae6a/index.html new file mode 100644 index 000000000..13ffe20f1 --- /dev/null +++ b/pages/58ae6a/index.html @@ -0,0 +1,276 @@ + + + + + + DesignPattern - 适配器模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-05
目录

DesignPattern - 适配器模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、适配器模式介绍

适配器模式（Adapter Pattern）属于结构型模式，作为两个不兼容的接口之间的桥梁。

  • 常见的几类适配器 +
    • 接口的适配器模式【空实现】：不想实现一个接口中所有的方法时，可以创建一个 Adapter，实现所有方法，在写别的类的时候，继承这个 Adapter 类即可。
    • 类的适配器模式【继承(旧) + 实现(新)】：想将一个类转换成满足另一个新接口的类时，可以使用类的适配器模式，创建一个新类，继承原有的类，实现新的接口即可。
    • 对象的适配器模式【组合】：想将一个对象转换成满足另一个新接口的对象时，可以创建一个适配器类，持有原类的一个实例，在适配器类的方法中，调用实例的方法就行。
  • 应用场景 +
    • 电脑需要读取内存卡的数据，读卡器就是适配器
    • 日常使用的转换头，如电源转换头，电压转换头
    • 系统需要使用现在的类，而这些类的接口不符合系统的需要（如：JDK 中 InputStreamReader 就是适配器）
    • JDBC 使用的就是适配器模式，jDBC 给出一个客户端通用的抽象接口，每一个具体数据库厂商，如 SQL Server、Oracle、MySQL 等，会开发对应的 JDBC 驱动，这个 JDBC 驱动就是一个介于 JDBC 接口和数据库引擎接口之间的适配器软件。
  • 优点 +
    • 可以让任何两个没有关联的类一起运行，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作
    • 增加灵活度，提高复用性，适配器类可以在多个系统使用，符合开闭原则
  • 缺点 +
    • 整体类的调用链路增加，本来 A 可以直接调用 C，使用适配器后，是 A 调用 B，B 再调用 C

补充：适配器模式用于设计完成之后，发现类、接口之间无法一起工作，需要进行填坑。

# 二、适配器模式代码实现

# 1、接口适配器模式

有些接口中有多个抽象方法，当我们写该接口的实现类时，必须实现该接口的所有方法，有时会觉得比较冗余，因为并不是所有的方法都是我们需要的，只需要实现部分接口就可以了。

创建支付网关接口：

/**
+ * 支付网关接口
+ *
+ * @author GitLqr
+ */
+public interface IPayGateway {
+
+	/**
+	 * 下单
+	 */
+	void order();
+
+	/**
+	 * 退款
+	 */
+	void refund();
+
+	/**
+	 * 查询
+	 */
+	void query();
+
+	/**
+	 * 发红包
+	 */
+	void sendRedPack();
+
+    ...
+}
+

创建接口适配器类：

/**
+ * 接口适配器：提供所有接口的默认实现
+ *
+ * @author GitLqr
+ */
+public class PayGatewayAdapter implements IPayGateway {
+
+	@Override
+	public void order() {
+	}
+
+	@Override
+	public void refund() {
+	}
+
+	@Override
+	public void query() {
+	}
+
+	@Override
+	public void sendRedPack() {
+	}
+
+}
+

创建具体业务类：

/**
+ * 视频VIP订购：只有订购和退款功能
+ *
+ * @author GitLqr
+ */
+public class VideoVipOrder extends PayGatewayAdapter {
+	@Override
+	public void order() {
+		System.out.println("视频VIP 订购成功");
+	}
+
+	@Override
+	public void refund() {
+		System.out.println("视频VIP 退款成功");
+	}
+}
+

说明：相比于实现 IPayGateway 接口，继承 PayGatewayAdapter 适配器类，可以让 VideoVipOrder 中代码简洁不少。

# 2、类的适配器模式

想将一个类转换成满足另一个新接口的类时，可以使用类的适配器模式，创建一个新类，继承原有的类，实现新的接口即可。

创建 旧类：

说明：【旧类】对应的是工程中原本就存在的类，能够稳定运行，但是不支持一些新功能。实际开发中，这些旧类实现可能相当复杂（可能是屎山），不能轻易改动！！

/**
+ * 旧类：端口，只能支持usb
+ *
+ * @author GitLqr
+ */
+public class Port {
+	public void usb(Object usbDevice) {
+		System.out.println("插入 usb 设备");
+	}
+}
+

创建 新功能接口：

说明：该【新功能接口】一般拥有 旧类 中的方法，方便后续面向接口编程。

/**
+ * 新接口：需要支持旧端口类型（usb）的同时，支持更多的新端口类型（如 typec、usb4）
+ *
+ * @author GitLqr
+ */
+public interface INewPort {
+
+	void usb(Object usbDevice);
+
+	void typec(Object typecDevice);
+
+	void usb4(Object usb4Device);
+}
+

创建 新类：

说明：【新类】需要继承【旧类】，同时实现【新功能接口】

/**
+ * 新类：端口适配器【扩展坞】
+ *
+ * @author GitLqr
+ */
+public class PortAdapter extends Port implements INewPort {
+
+	@Override
+	public void typec(Object typecDevice) {
+		System.out.println("插入 type-c 设备");
+	}
+
+	@Override
+	public void usb4(Object usb4Device) {
+		System.out.println("插入 雷电4 设备");
+	}
+
+}
+

使用：

public static void main(String[] args) {
+	...
+    INewPort newPort = new PortAdapter();
+    newPort.usb(usbDevice); // 老功能 也能正常使用
+    newPort.typec(typecDevice);
+    newPort.usb4(usb4Device);
+}
+

# 3、对象的适配器模式

想将一个对象转换成满足另一个新接口的对象时，可以创建一个适配器类，持有原类的一个实例，在适配器类的方法中，调用实例的方法就行。

对象的适配器更像是一种包装（或增强），实际功能还需要借助原对象来执行处理，就比如充电器插头问题，插头转换器只是改变了充电器插头的类型，实际上给手机充电的，还是充电器本身。

创建 充电器类：

/**
+ * 充电器
+ *
+ * @author GitLqr
+ */
+public class Charger {
+
+	void charge() {
+		System.out.println("充电中...");
+	}
+}
+

创建 新接口（支持多种插头转换）：

/**
+ * 接口：各式插头
+ *
+ * @author GitLqr
+ */
+public interface IPlugConverter {
+
+	/**
+	 * 双脚插头充电
+	 */
+	void chargeOnTwoPin();
+
+	/**
+	 * 三脚插头充电
+	 */
+	void chargeOnThreePin();
+
+	/**
+	 * 三脚插头充电（港版插座）
+	 */
+	void chargeOnThreePinHK();
+
+}
+

创建 满足 新接口 的 适配器类：

/**
+ * 充电器插头适配器
+ *
+ * @author GitLqr
+ */
+public class ChargerPlugAdapter implements IPlugConverter {
+
+	private Charger charger;
+
+	public ChargerPlugAdapter(Charger charger) {
+		super();
+		this.charger = charger;
+	}
+
+	@Override
+	public void chargeOnTwoPin() {
+		charger.charge();
+	}
+
+	@Override
+	public void chargeOnThreePin() {
+		System.out.println("使用三脚插头");
+		charger.charge();
+	}
+
+	@Override
+	public void chargeOnThreePinHK() {
+		System.out.println("使用港版三脚插头");
+		charger.charge();
+	}
+
+}
+
+ +
+
#设计模式#适配器模式
DesignPattern - 建造者模式【创建型】
DesignPattern - 桥接模式【结构型】

+ ← + DesignPattern - 桥接模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5944f7/index.html b/pages/5944f7/index.html new file mode 100644 index 000000000..c61487a3e --- /dev/null +++ b/pages/5944f7/index.html @@ -0,0 +1,183 @@ + + + + + + AndroidTV - 解决EditText焦点无法转移问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2020-03-31
目录

AndroidTV - 解决EditText焦点无法转移问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

经反馈，在AndroidTV9.0 盒子上发现EditText一旦获取了焦点之后，遥控器上的方向键就无效了，即焦点无法再转移到其他焦点控件上，但这个问题在Android7.0及以下盒子上却不会出现，应该是Android8.0及以上源码做了修改，故查看EditText源码，得知确实是官方源码对方向键进行了处理~

# 一、源码分析

EditText源码中搜索onKeyDown，定位到父类TextView中的onKeyDown()：

@Override
+public boolean onKeyDown(int keyCode, KeyEvent event) {
+    final int which = doKeyDown(keyCode, event, null);
+    if (which == KEY_EVENT_NOT_HANDLED) {
+        return super.onKeyDown(keyCode, event);
+    }
+    return true;
+}
+

很明显doKeyDown()是关键方法，查看该方法的代码逻辑，主意看注释的部分。

大意：消费掉键盘的箭头事件以防止焦点离开。

private int doKeyDown(int keyCode, KeyEvent event, KeyEvent otherEvent) {
+	...
+	if (mMovement != null && mLayout != null) {
+		...
+		// Consume arrows from keyboard devices to prevent focus leaving the editor.
+		// DPAD/JOY devices (Gamepads, TV remotes) often lack a TAB key so allow those
+		// to move focus with arrows.
+		if (event.getSource() == InputDevice.SOURCE_KEYBOARD
+				&& isDirectionalNavigationKey(keyCode)) {
+			return KEY_EVENT_HANDLED;
+		}
+	}
+
+	return mPreventDefaultMovement && !KeyEvent.isModifierKey(keyCode)
+			? KEY_EVENT_HANDLED : KEY_EVENT_NOT_HANDLED;
+}
+
+private boolean isDirectionalNavigationKey(int keyCode) {
+	switch(keyCode) {
+		case KeyEvent.KEYCODE_DPAD_UP:
+		case KeyEvent.KEYCODE_DPAD_DOWN:
+		case KeyEvent.KEYCODE_DPAD_LEFT:
+		case KeyEvent.KEYCODE_DPAD_RIGHT:
+			return true;
+	}
+	return false;
+}
+

# 二、自定义EditText

通过上面的源码分析，明确原因之后，解决思路也就很明朗了，即：去掉对键盘方向事件的控制即可。但不管是doKeyDown()还是isDirectionalNavigationKey()，这些方法都是私有的，无法通过重写的方式来改变原有逻辑，能重写的只有onKeyDown()，所以，结合FocusFinder通过手动查找焦点控件的方式来处理就好了，完整代码如下：

/**
+ * @author LQR
+ * @time 2020/3/31
+ * @desc 解决Android8.0 EditText获取焦点后，无法转换焦点问题
+ */
+@SuppressLint("AppCompatCustomView")
+public class LQREditText extends EditText {
+    public LQREditText(Context context) {
+        super(context);
+    }
+
+    public LQREditText(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public LQREditText(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+    }
+
+    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
+    public LQREditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
+        super(context, attrs, defStyleAttr, defStyleRes);
+    }
+
+    @Override
+    public boolean onKeyDown(int keyCode, KeyEvent event) {
+        if (isDirectKeyCode(keyCode)) {
+            int direction = FOCUS_DOWN;
+            switch (keyCode) {
+                case KeyEvent.KEYCODE_DPAD_UP:
+                    direction = FOCUS_UP;
+                    break;
+                case KeyEvent.KEYCODE_DPAD_DOWN:
+                    direction = FOCUS_DOWN;
+                    break;
+                case KeyEvent.KEYCODE_DPAD_DOWN_LEFT:
+                    direction = FOCUS_LEFT;
+                    break;
+                case KeyEvent.KEYCODE_DPAD_RIGHT:
+                    direction = FOCUS_RIGHT;
+                    break;
+            }
+            View nextFocus = FocusFinder.getInstance().findNextFocus((ViewGroup) getParent(), this, direction);
+            if (nextFocus != null) {
+                nextFocus.requestFocus();
+                return true;
+            }
+        }
+        return super.onKeyDown(keyCode, event);
+    }
+
+    private boolean isDirectKeyCode(int keyCode) {
+        return keyCode == KeyEvent.KEYCODE_DPAD_UP
+                || keyCode == KeyEvent.KEYCODE_DPAD_DOWN
+                || keyCode == KeyEvent.KEYCODE_DPAD_LEFT
+                || keyCode == KeyEvent.KEYCODE_DPAD_RIGHT;
+    }
+}
+
+
+ +
+
#AndroidTV#机顶盒#焦点
AndroidTV - 获取Mac地址
AndroidNDK - makefile语法详解

+ ← + AndroidNDK - makefile语法详解→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5a5158/index.html b/pages/5a5158/index.html new file mode 100644 index 000000000..e1d1ea811 --- /dev/null +++ b/pages/5a5158/index.html @@ -0,0 +1,128 @@ + + + + + + Flutter - 低版本在iOS14上遇到的问题与解决方案 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-09-29
目录

Flutter - 低版本在iOS14上遇到的问题与解决方案

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

近期将测试机升级至 iOS14 ，测试使用 Flutter混合开发 的线上 APP，没发现什么问题，但是使用 Xcode 安装APP的场景下，断开 Xcode 后再运行却闪退了。

公司的 APP 测试结果如下：

APP来源 是否闪退 模式
线上 否 release
蒲公英 是 debug
Xcode 是（断开 Xcode 后再打开 APP ） debug

# 问题原因

闪退的原因是因为 Flutter SDK, Flutter 官方的更新速度也是快，对 iOS14 进行了说明： Flutter官网说明链接 (opens new window)

大致意思就是说，如果我们在 iOS14 的真机上安装了 debug模式 编译出来的 flutter 应用，那么在断开编译安装连接后，将无法从桌面上打开该应用程序。

# 解决方案

  1. 再次是使用 Xcode 或 flutter run 来运行。
  2. 设置 Flutter 模块的编译模式为 profile 或 release

# 补充说明

  1. 该闪退的情况只发生在真机，并且在模拟器运行的时候， Flutter 模块的编译模式需要为 debug， 如果设置了 release，编译将会报错。
  2. 官方指出如果是 纯Flutter项目 可以直接使用 master channel 的 Flutter版本 秒杀这个问题，但对混合开发并没有该说明，加上我们是使用闲鱼的 flutter_boost 实现的混合开发，限制了 Flutter 的版本，所以我也就没有去实践该方案对我们是否可行

# 二、尝试解决

根据自己的实际情况，我选择了上述的第二个解决方案。

# 配置

用 Xcode 打开工程项目，在 Build Settings 的最下方找到 User-Defined，点击 + 按钮，添加一个键为 FLUTTER_BUILD_MODE ，值为 release 的配置。

# 运行

再次运行到真机上，断开 Xcode 运行也不会崩溃了

# 问题

真机的问题看似是解决了，但是会有问题

问题一：release 或 profile 模式下，Flutter 使用的是 AOT，一些功能不能使用，如：代码断点调试，热重载

问题二：上面也提到了，模拟器只能运行在 debug 模式下，而我们无法避免会在真机和模拟器之间反复切换运行，每次切换就需要手动调整 FLUTTER_BUILD_MODE 的值，十分麻烦

那有什么好的办法解决上面遇到的问题呢？

# 三、优化方案

其实，真机上的 APP 在断开 Xcode 后无法运行，这个对我们开发者来说不是什么问题，问题是给到测试人员就必须要可以打开才行，包括蒲公英上的包，所以为了节省这些不必要的时间，我们需要自己动手撸一个帮助我们切换 Flutter编译模式 的脚本。

在修改 FLUTTER_BUILD_MODE 的值时，我从 git 中发现，实际上是修改了 项目.xcodeproj，那目前有什么工具可以帮助我们修改 xcodeproj 文件呢？

这里我找到了mod-pbxproj (opens new window)，安装和使用在该库的 wiki 上写的很清楚，这里就不再赘述了，直接上代码

import getopt
+import sys
+from pbxproj import XcodeProject
+
+if __name__ == "__main__":
+    argv = sys.argv[1:]
+    # 处理flutter_build_mode
+    flutter_build_mode = (False, "release")
+    # target名称
+    target_name = None
+
+    try:
+        opts, args = getopt.getopt(argv, "p:m:t:", ["path=, mode=, target="])
+    except getopt.GetoptError:
+        print('switch_flutter_build_mode.py -p "plist文件路径" -m "模式(release|debug)" -t "target名称"')
+        sys.exit(1)
+
+    for opt, arg in opts:
+        if opt in ["-p", "--path"]:
+            project_path = arg
+            if len(project_path) == 0:
+                print('请输入项目的地址')
+                sys.exit(2)
+        if opt in ["-m", "--mode"]:
+            flutter_build_mode = (True, arg if len(arg) > 0 else "release")
+        if opt in ["-t", "--target"]:
+            target_name = arg
+
+    # 处理flutter
+    if flutter_build_mode[0]:
+        fileName = project_path.split("/")[-1]
+        if not fileName.endswith("xcodeproj"):
+            print("请使用-p指定.xcodeproj文件的路径")
+            sys.exit(3)
+        project = XcodeProject.load(project_path + '/project.pbxproj')
+        # 设置 User-Defined (如果target_name是None，则每个target都会设置flag)
+        project.set_flags('FLUTTER_BUILD_MODE', flutter_build_mode[1], target_name)
+        project.save()
+

使用也很简单，终端直接输入如下命令

python switch_flutter_build_mode.py -p 'xxx/项目.xcodeproj' -t target名称 -m release
+

各参数说明

参数 用途
-p xcodeproj 文件的路径
-t target 名称
-m 编译模式 ( release、debug、profile )

PS: 脚本基于 Python3

我们是使用 Jenkins 进行打包并自动上传至蒲公英的，所以只需要在 Jenkins 中配置打包前调用该脚本即可。

最后再结合 Shuttle (opens new window) 这个软件，就可以实现以界面的方式去切换编译模式了

# 四、最后说两句

本文是基于 Flutter混合开发 进行说明的，如果有什么不对或不足的地方，欢迎指正，感谢大家的阅读

+ +
+
#Dart#Flutter
Flutter - 解决混合开发iOS脚本打包遇到的问题
Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题

+ ← + Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5c4b50/index.html b/pages/5c4b50/index.html new file mode 100644 index 000000000..05495243c --- /dev/null +++ b/pages/5c4b50/index.html @@ -0,0 +1,375 @@ + + + + + + Flutter - 我给官方提PR，解决run命令卡住问题 😃 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-02-07
目录

Flutter - 我给官方提PR，解决run命令卡住问题 😃

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、背景

Flutter 项目在 iPhone 真机上运行会白屏，VSCode 右下角一直卡在 Installing and launching...，AndroidStudio 亦是如此。

其它人的电脑又是正常的，遂着手进行问题的定位，并在解决问题后向 Flutter 官方提交了我的第一份 PR。

PR 链接：https://github.com/flutter/flutter/pull/119443 (opens new window)

# 二、问题

使用命令 flutter run -d xxxx -v 运行项目，日志如下：

[        ] -------------------------
+[ +187 ms] [LinXunFeng]$command source -s 0
+'/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'
+[        ] Executing commands in
+'/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'.
+[        ] [LinXunFeng]$    platform select remote-'ios' --sysroot '/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols'
+[        ]   Platform: remote-ios
+[        ]  Connected: no
+[        ]   SDK Path: "/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols"
+[        ] [LinXunFeng]$    target create
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app"
+[+3544 ms] Current executable set to
+'/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app' (arm64).
+[        ] [LinXunFeng]$    script
+fruitstrap_device_app="/private/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777/Runner.app"
+[ +124 ms] [LinXunFeng]$    script fruitstrap_connect_url="connect://127.0.0.1:65222"
+[        ] [LinXunFeng]$    script fruitstrap_output_path=""
+[        ] [LinXunFeng]$    script fruitstrap_error_path=""
+[        ] [LinXunFeng]$    target modules search-paths add /usr "/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols/usr" /System "/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols/System"
+"/private/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777"
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"
+"/var/containers/Bundle/Application/1915BC3A-57D0-41A5-8121-1769CF3F6777"
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos" /Developer
+"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols/Developer"
+[  +15 ms] [LinXunFeng]$    command script import
+"/tmp/3EB9B732-D866-46D2-88CB-513C2CF7455E/fruitstrap_00008120_0019784E2690C01E.py"
+[   +3 ms] [LinXunFeng]$    command script add -f fruitstrap_00008120_0019784E2690C01E.connect_command connect
+[        ] [LinXunFeng]$    command script add -s asynchronous -f fruitstrap_00008120_0019784E2690C01E.run_command
+run
+[        ] [LinXunFeng]$    command script add -s asynchronous -f
+fruitstrap_00008120_0019784E2690C01E.autoexit_command autoexit
+[        ] [LinXunFeng]$    command script add -s asynchronous -f
+fruitstrap_00008120_0019784E2690C01E.safequit_command safequit
+[        ] [LinXunFeng]$    connect
+[  +29 ms] [LinXunFeng]$    run
+[ +109 ms] success
+[+4740 ms] [LinXunFeng]$2023-02-02 08:57:41.425078+0800 Runner[5278:1703137] flutter: The Dart VM service is
+listening on http://127.0.0.1:61063/
+

而正常运行的日志是这样的：

[        ] -------------------------
+[ +359 ms] (lldb) command source -s 0
+'/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'
+[        ] Executing commands in
+'/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap-lldb-prep-cmds-00008120_0019784E2690C01E'.
+[        ] (lldb)     platform select remote-'ios' --sysroot '/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols'
+[        ]   Platform: remote-ios
+[        ]  Connected: no
+[        ]   SDK Path: "/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols"
+[        ] (lldb)     target create
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app"
+[+3984 ms] Current executable set to
+'/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos/Runner.app' (arm64).
+[        ] (lldb)     script
+fruitstrap_device_app="/private/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499/Runner.app"
+[ +136 ms] (lldb)     script fruitstrap_connect_url="connect://127.0.0.1:65102"
+[        ] (lldb)     script fruitstrap_output_path=""
+[        ] (lldb)     script fruitstrap_error_path=""
+[        ] (lldb)     target modules search-paths add /usr "/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols/usr" /System "/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols/System"
+"/private/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499"
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos"
+"/var/containers/Bundle/Application/ABD16CE1-675A-44C3-BE9C-18EC156B6499"
+"/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example/build/ios/iphoneos" /Developer
+"/Users/lxf/Library/Developer/Xcode/iOS DeviceSupport/16.1.1 (20B101) arm64e/Symbols/Developer"
+[  +17 ms] (lldb)     command script import
+"/tmp/70CB9E5A-3BA1-4299-8F38-BE5135178035/fruitstrap_00008120_0019784E2690C01E.py"
+[   +3 ms] (lldb)     command script add -f fruitstrap_00008120_0019784E2690C01E.connect_command connect
+[        ] (lldb)     command script add -s asynchronous -f fruitstrap_00008120_0019784E2690C01E.run_command run
+[        ] (lldb)     command script add -s asynchronous -f fruitstrap_00008120_0019784E2690C01E.autoexit_command
+autoexit
+[        ] (lldb)     command script add -s asynchronous -f fruitstrap_00008120_0019784E2690C01E.safequit_command
+safequit
+[        ] (lldb)     connect
+[  +38 ms] (lldb)     run
+[ +118 ms] success
+[        ] Application launched on the device. Waiting for observatory url.
+[+4521 ms] (lldb) 2023-02-02 08:55:53.841520+0800 Runner[5272:1701483] Warning: Unable to create restoration in
+progress marker file
+[  +45 ms] Observatory URL on device: http://127.0.0.1:60477/
+[   +3 ms] Attempting to forward device port 60477 to host port 65119
+[        ] executing: /Users/lxf/fvm/versions/3.3.7/bin/cache/artifacts/usbmuxd/iproxy 65119:60477 --udid
+00008120-0019784E2690C01E --debug
+[ +433 ms] fopen failed for data file: errno = 2 (No such file or directory)
+[        ] Errors found! Invalidating cache...
+[  +13 ms] fopen failed for data file: errno = 2 (No such file or directory)
+[        ] Errors found! Invalidating cache...
+[ +560 ms] Forwarded port ForwardedPort HOST:65119 to DEVICE:60477
+[        ] Forwarded host port 65119 to device port 60477 for Observatory
+[        ] Installing and launching... (completed in 19.1s)
+[        ] Caching compiled dill
+[  +16 ms] Connecting to service protocol: http://127.0.0.1:65119/
+[  +92 ms] Launching a Dart Developer Service (DDS) instance at http://127.0.0.1:0, connecting to VM service at
+http://127.0.0.1:65119/.
+[  +45 ms] DDS is listening at http://127.0.0.1:65124/MCCddjLRlQk=/.
+[  +22 ms] Successfully connected to service protocol: http://127.0.0.1:65119/
+[  +13 ms] DevFS: Creating new filesystem on the device (null)
+[  +10 ms] DevFS: Created new filesystem on the device
+(file:///private/var/mobile/Containers/Data/Application/9066D3F0-F8FB-489D-99BD-FCAF266B118F/tmp/examplePN73Pp/exa
+mple/)
+[        ] Updating assets
+[  +34 ms] Syncing files to device lxf的iPhone...
+[        ] Compiling dart to kernel with 0 updated files
+[        ] Processing bundle.
+[        ] <- recompile package:scrollview_observer_example/main.dart ef8dbbad-3cff-4e06-9043-63987bdc88a2
+[        ] <- ef8dbbad-3cff-4e06-9043-63987bdc88a2
+[        ] Bundle processing done.
+[  +30 ms] Updating files.
+[        ] DevFS: Sync finished
+[        ] Syncing files to device lxf的iPhone... (completed in 33ms)
+[        ] Synced 0.0MB.
+[        ] <- accept
+[   +7 ms] Connected to _flutterView/0x10881a420.
+[   +1 ms] Flutter run key commands.
+[        ] r Hot reload. 🔥🔥🔥
+[        ] R Hot restart.
+[        ] h List all available interactive commands.
+[        ] d Detach (terminate "flutter run" but leave application running).
+[        ] c Clear the screen
+[        ] q Quit (terminate the application on the device).
+[        ] 💪 Running with sound null safety 💪
+[        ] An Observatory debugger and profiler on lxf的iPhone is available at:
+http://127.0.0.1:65124/MCCddjLRlQk=/
+[  +29 ms] The Flutter DevTools debugger and profiler on lxf的iPhone is available at:
+           http://127.0.0.1:9102?uri=http://127.0.0.1:65124/MCCddjLRlQk=/
+

在不断谷歌 Flutter Installing and launching... 并按解决步骤操作后但问题依旧时，我认真对比了上述的命令执行日志，发现有一处可疑的地方，那就是:

[  +29 ms] [LinXunFeng]$    run
+[ +109 ms] success
+
+
+[  +38 ms] (lldb)     run
+[ +118 ms] success
+

为什么我会觉得它可疑呢？因为我之前学 iOS 逆向的时候自定义过 lldb 提示符，然后差不多在那个时间段后 Flutter 项目就不再能正常运行，而且从日志中可以看出到这里就不再往下执行了~

个性化提示符：

# ~/.lldbinit 文件的内容
+settings set prompt "\[LinXunFeng]$"
+

将其注释掉，竟完美解决了这个问题~

# 三、探索

改回原来的 lldb 提示符就好了，那说明 Flutter 内部八成是根据这个固定的输出来做判断是否进入下一步，打开 Flutter 源码进行全局搜索 (lldb) run，果不其然，在 flutter_tools 下可以搜到关键代码

// (lldb)     run
+// https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51
+static final RegExp _lldbRun = RegExp(r'\(lldb\)\s*run');
+

具体文件定位：flutter_tools/ios_deploy.dart#L285-L287 (opens new window)

在文件下搜索 _lldbRun 定位到 launchAndAttach 方法，如下

/// Launch the app on the device, and attach the debugger.
+///
+/// Returns whether or not the debugger successfully attached.
+Future<bool> launchAndAttach() async {
+  // Return when the debugger attaches, or the ios-deploy process exits.
+  final Completer<bool> debuggerCompleter = Completer<bool>();
+  try {
+    _iosDeployProcess = await _processUtils.start(
+      _launchCommand,
+      environment: _iosDeployEnv,
+    );
+    String? lastLineFromDebugger;
+    final StreamSubscription<String> stdoutSubscription = _iosDeployProcess!.stdout
+        .transform<String>(utf8.decoder)
+        .transform<String>(const LineSplitter())
+        .listen((String line) {
+      _monitorIOSDeployFailure(line, _logger);
+      // (lldb)     run
+      // success
+      // 2020-09-15 13:42:25.185474-0700 Runner[477:181141] flutter: The Dart VM service is listening on http://127.0.0.1:57782/
+      if (_lldbRun.hasMatch(line)) {
+        _logger.printTrace(line);
+        _debuggerState = _IOSDeployDebuggerState.launching;
+        return;
+      }
+      // Next line after "run" must be "success", or the attach failed.
+      // Example: "error: process launch failed"
+      if (_debuggerState == _IOSDeployDebuggerState.launching) {
+        _logger.printTrace(line);
+        final bool attachSuccess = line == 'success';
+        _debuggerState = attachSuccess ? _IOSDeployDebuggerState.attached : _IOSDeployDebuggerState.detached;
+        if (!debuggerCompleter.isCompleted) {
+          debuggerCompleter.complete(attachSuccess);
+        }
+        return;
+      }
+      ...
+    });
+    ...
+  }
+  return debuggerCompleter.future;
+}
+

具体文件定位：flutter_tools/ios_deploy.dart#L319-L351 (opens new window)

见名识义，将项目运行起来后进行附加调试，这段代码的执行流程如下：

  1. 调用 _processUtils 的 start 方法执行 _launchCommand，然后监听其输出内容。
  2. 在监听到 (lldb) run 后将 _debuggerState 赋值为 _IOSDeployDebuggerState.launching，以做为判断紧跟其后的 success 是目标输出内容的依据
  3. 接着进行了最关键的一步 debuggerCompleter.complete(attachSuccess)，告诉外部该功能已成功执行

而我的电脑因为自定义 LLDB prompt 导致这个小流程中的 2 和 3 无法顺利执行~~

# 四、修复

知道导致问题的原因后，我那就来尝试修复一下，思路很简单，就是先获取当前的 lldb 提示符然后将 _lldbRun 中的 (lldb) 字符串给替换掉，那如何获取当前的 lldb 提示符？

还记得上面提到的常量 _lldbRun 吗？定义处有相应的链接

// (lldb)     run
+// https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51
+static final RegExp _lldbRun = RegExp(r'\(lldb\)\s*run');
+

打开链接后可以找到上面日志里出现过的 platform select remote-'ios' --sysroot，定义如下：

/*
+ * Startup script passed to lldb.
+ * To see how xcode interacts with lldb, put this into .lldbinit:
+ * log enable -v -f /Users/vargaz/lldb.log lldb all
+ * log enable -v -f /Users/vargaz/gdb-remote.log gdb-remote all
+ */
+#define LLDB_PREP_CMDS CFSTR("\
+    platform select remote-ios --sysroot '{symbols_path}'\n\
+    ...
+    connect\n\
+")
+

代码摘自：ios-control/ios-deploy.m#L33 (opens new window)

那就好办了，这个 platform select remote-'ios' --sysroot 的输出比 run 要早，所以只需要监听其被输出后进行字符串截取，就可以取到当前的 lldb 提示符

[        ] [LinXunFeng]$    platform select remote-'ios' --sysroot '/Users/lxf/Library/Developer/Xcode/iOS
+DeviceSupport/16.1.1 (20B101) arm64e/Symbols'
+

具体代码：

1、定义 _lldbPlatformSelect 常量

-  // (lldb)     run
+-  // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51
+-  static final RegExp _lldbRun = RegExp(r'\(lldb\)\s*run');
+
++  // (lldb) platform select remote-'ios' --sysroot
++  // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L33
++  // This regex is to get the configurable lldb prompt. By default this prompt will be "lldb".
++  static final RegExp _lldbPlatformSelect = RegExp(r"\s*platform select remote-'ios' --sysroot");
+

2、调整 launchAndAttach 方法

Future<bool> launchAndAttach() async {
+    // Return when the debugger attaches, or the ios-deploy process exits.
+
++    // (lldb)     run
++    // https://github.com/ios-control/ios-deploy/blob/1.11.2-beta.1/src/ios-deploy/ios-deploy.m#L51
++    RegExp lldbRun = RegExp(r'\(lldb\)\s*run');
+
+    final Completer<bool> debuggerCompleter = Completer<bool>();
+    try {
+      _iosDeployProcess = await _processUtils.start(
+        _launchCommand,
+        environment: _iosDeployEnv,
+      );
+      String? lastLineFromDebugger;
+      final StreamSubscription<String> stdoutSubscription = _iosDeployProcess!.stdout
+          .transform<String>(utf8.decoder)
+          .transform<String>(const LineSplitter())
+          .listen((String line) {
+        _monitorIOSDeployFailure(line, _logger);
++
++        // (lldb)    platform select remote-'ios' --sysroot
++        // Use the configurable custom lldb prompt in the regex. The developer can set this prompt to anything.
++        // For example `settings set prompt "(mylldb)"` in ~/.lldbinit results in:
++        // "(mylldb)    platform select remote-'ios' --sysroot"
++        if (_lldbPlatformSelect.hasMatch(line)) {
++          final String platformSelect = _lldbPlatformSelect.stringMatch(line) ?? '';
++          if (platformSelect.isEmpty) {
++            return;
++          }
++          final int promptEndIndex = line.indexOf(platformSelect);
++          if (promptEndIndex == -1) {
++            return;
++          }
++          final String prompt = line.substring(0, promptEndIndex);
++          lldbRun = RegExp(RegExp.escape(prompt) + r'\s*run');
++          _logger.printTrace(line);
++          return;
++        }
++
+        // (lldb)     run
+        // success
+        // 2020-09-15 13:42:25.185474-0700 Runner[477:181141] flutter: The Dart VM service is listening on http://127.0.0.1:57782/
+-        if (_lldbRun.hasMatch(line)) {
++        if (lldbRun.hasMatch(line)) {
+          ...
+

修改完进行测试，确认没有问题后向 Flutter 官方提交了 PR (opens new window)

# 五、调试

这里主要记录关于调试的一些准备和注意点。

# 准备工作

使用 VSCode 打开 flutter_tools 项目，调试前需要做的就两个操作：

1、调整 .vscode/launch.json

{
+  "name": "flutter_tools",
+  "request": "launch",
+  "type": "dart",
+  "args": [
+    "run",
+    "-v",
+    "-d",
+    "设备id"
+  ],
+  "program": "bin/flutter_tools.dart"
+},
+

2、指定运行的 flutter 项目

上面只是设置了打印日志和指定运行的设备id，还差指定运行的 flutter 项目。

由于 flutter 命令里没有提供相关参数，所以我在 lib/executable.dart 文件中 Cache.flutterRoot 的上一行添加如下代码，强行修改当前执行 flutter 命令的目录路径

...
+
+// 设置当前执行flutter命令的目录路径
+globals.fs.currentDirectory = '/Users/lxf/Desktop/LXF/github/flutter_scrollview_observer/example';
+
+Cache.flutterRoot = Cache.defaultFlutterRoot(
+...
+

不过该方式过于粗暴，后面经过摸索，发现在 .vscode/launch.json 配置 cwd 即可达到效果，完整配置如下:

{
+  "name": "flutter_tools",
+  "request": "launch",
+  "type": "dart",
+  "args": [
+    "run",
+    "-v",
+    "-d",
+    "设备id"
+  ],
+  "program": "${workspaceFolder}/bin/flutter_tools.dart",
+  "env": {
+    "FLUTTER_ROOT": "${workspaceFolder}/../../"
+  },
+  "cwd": "/Users/lxf/Desktop/gitHub/flutter_scrollview_observer/example",
+},
+

# 注意项

当你调试完 flutter_tools 的源码后，高高兴兴去到自己的 flutter 工程目录下执行 flutter run 时，你会发现改动不生效，这是因为存在如下缓存文件

flutter/bin/cache/flutter_tools.snapshot
+

解决方式：将该文件删除即可，当执行任意的 flutter 命令时会自动再次生成。

# 六、最后

这次提 PR 的过程也学到了很多，过程中比较令人记忆深刻的是以下几点：

  1. 每一行的内容不可以以空格结尾，否则 Linux analyze 这个 Check 会失败。
  2. 100+ 条 Check 执行时间是真的久，好像是 40+分钟，每次提交都会重新执行。
  3. 有的 Check 时不时会抽风，像 Google testing 有时会一直卡住，luci-flutter 会经常失败，这些可以不用理它，因为其它人也会，当官方调整完会自动重新执行。
  4. 提交 PR 后到开始审核的时间好久，2023.1.29 提交，2023.2.3 审核，5天，你知道我这5天是怎么过来的吗？ 😂

但不管怎么说，功夫不负有心人，最终于 2023.2.7 成功 Merge，这是一次不错的开始 😃

+ +
+
#Dart#Flutter
Flutter - 聊天输入框更新文本时的必备优化点🔖
Flutter - 探索run命令到底做了什么 🤔

+ ← + Flutter - 探索run命令到底做了什么 🤔→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5c8459/index.html b/pages/5c8459/index.html new file mode 100644 index 000000000..a1322f9d0 --- /dev/null +++ b/pages/5c8459/index.html @@ -0,0 +1,410 @@ + + + + + + RecyclerView之ItemDecoration | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-05-03
目录

RecyclerView之ItemDecoration

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

说到RecyclerView大家都很熟悉了，相比于ListView，它具有高度解耦、性能优化等优势，而且现在大多数安卓开发者都已经将RecyclerView用来完全替代ListView和GridView，因为它功能十分强大，但往往功能强大的东西，反而不太好控制，例如今天要说的这个ItemDecoration，ItemDecoration是条目装饰，下面来看看它的强大吧。

# 二、使用ItemDecoration绘制分割线

想想之前的ListView，要加条分割线，那是分分钟解决的小事，只需要在布局文件中对ListView控件设置其divier属性或者在动态中设置divider即可完成，但RecyclerView却没这么简单了，RecyclerView并没有提供任何直接设置分割线的方法，除了在条目布局中加入这种笨方法之外，也就只能通过ItemDecoration来实现了。

# 1、自定义ItemDecoration

要使用ItemDecoration，我们得必须先自定义，直接继承ItemDecoration即可。

public class MyDecorationOne extends RecyclerView.ItemDecoration {
+
+}
+

# 2、重写getItemOffsets()和onDraw()

在实现自定义的装饰效果就必须重写getItemOffsets()和onDraw()。

public class MyDecorationOne extends RecyclerView.ItemDecoration {
+
+    /**
+     * 画线
+     */
+    @Override
+    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
+        super.onDraw(c, parent, state);
+    }
+
+    /**
+     * 设置条目周边的偏移量
+     */
+    @Override
+    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
+        super.getItemOffsets(outRect, view, parent, state);
+        
+    }
+}
+

# 3、解析getItemOffsets()和onDraw()

在理清这两个方法的作用之前，先理清下ItemDecoration的含义，直译：条目装饰，顾名思义，ItemDecoration是对Item起到了装饰作用，更准确的说是对item的周边起到了装饰的作用，通过下面的图应该能帮助你理解这话的含义。

上图中已经说到了，getItemOffsets()就是设置item周边的偏移量（也就是装饰区域的“宽度”）。而onDraw()才是真正实现装饰的回调方法，通过该方法可以在装饰区域任意画画，这里我们来画条分割线。

# 4、“实现”getItemOffsets()和onDraw()

本例中实现的是线性列表的分割线（即使用LinearLayoutManager）。

1）当线性列表是水平方向时，分割线竖直的；当线性列表是竖直方向时，分割线是水平的。

2）当画竖直分割线时，需要在item的右边偏移出一条线的宽度；当画水平分割线时，需要在item的下边偏移出一条线的高度。

/**
+ * 画线
+ */
+@Override
+public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
+    super.onDraw(c, parent, state);
+    if (orientation == RecyclerView.HORIZONTAL) {
+        drawVertical(c, parent, state);
+    } else if (orientation == RecyclerView.VERTICAL) {
+        drawHorizontal(c, parent, state);
+    }
+}
+
+/**
+ * 设置条目周边的偏移量
+ */
+@Override
+public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
+    super.getItemOffsets(outRect, view, parent, state);
+    if (orientation == RecyclerView.HORIZONTAL) {
+        //画垂直线
+        outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
+    } else if (orientation == RecyclerView.VERTICAL) {
+        //画水平线
+        outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
+    }
+}
+

# 5、画出一条华丽的分割线

因为getItemOffsets()是相对每个item而言的，即每个item都会偏移出相同的装饰区域。而onDraw()则不同，它是相对Canvas来说的，通俗的说就是要自己找到要画的线的位置，这是自定义ItemDecoration中唯一比较难的地方了。

/**
+ * 在构造方法中加载系统自带的分割线（就是ListView用的那个分割线）
+ */
+public MyDecorationOne(Context context, int orientation) {
+    this.orientation = orientation;
+    int[] attrs = new int[]{android.R.attr.listDivider};
+    TypedArray a = context.obtainStyledAttributes(attrs);
+    mDivider = a.getDrawable(0);
+    a.recycle();
+}    
+
+/**
+ * 画竖直分割线
+ */
+private void drawVertical(Canvas c, RecyclerView parent, RecyclerView.State state) {
+    int childCount = parent.getChildCount();
+    for (int i = 0; i < childCount; i++) {
+        View child = parent.getChildAt(i);
+        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
+        int left = child.getRight() + params.rightMargin;
+        int top = child.getTop() - params.topMargin;
+        int right = left + mDivider.getIntrinsicWidth();
+        int bottom = child.getBottom() + params.bottomMargin;
+        mDivider.setBounds(left, top, right, bottom);
+        mDivider.draw(c);
+    }
+}
+
+/**
+ * 画水平分割线
+ */
+private void drawHorizontal(Canvas c, RecyclerView parent, RecyclerView.State state) {
+    int childCount = parent.getChildCount();
+    for (int i = 0; i < childCount; i++) {
+        View child = parent.getChildAt(i);
+        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
+        int left = child.getLeft() - params.leftMargin;
+        int top = child.getBottom() + params.bottomMargin;
+        int right = child.getRight() + params.rightMargin;
+        int bottom = top + mDivider.getIntrinsicHeight();
+        mDivider.setBounds(left, top, right, bottom);
+        mDivider.draw(c);
+    }
+}
+

下图仅对水平分割线的左、上坐标进行图解，其他坐标的计算以此类推。

# 6、效果

看了下面的效果，你可能会吐槽说，不就是加条分割线吗？要不要这么大费周章？是的，一开始我也是这么想，确实只是为了画条分割线的话，这也太麻烦了，而且项目开发中很少对分割线有多高的定制要求，一般就是ListView那样的，最多就是改改颜色这些。所以本人在之前有对RecyclerView进行过一次封装，可以轻松实现分割线，有兴趣的可以戳我看看！！ (opens new window)。好了，下面继续。

# 三、使用ItemDecoration绘制表格

经过上面的学习，相信心中已经对ItemDecoration有个大概的底了，下面再来实现个其他的效果吧——绘制表格。

# 1、分析

我们知道ItemDecoration就是装饰item周边用的，画条分割线只需要2步，1是在item的下方偏移出一定的宽度，2是在偏移出来的位置上画线。画表格线其实也一样，除了画item下方的线，还画item右边的线就好了（当然换成左边也行）。

# 2、实现

为了完成表格的样式，本例中使用的是网格列表（即使用GridLayoutManager）。

# 1）自定义分割线

为了效果更加明显，这里自定义分割线样式。

<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="rectangle">
+
+    <solid android:color="#f00"/>
+    <size
+        android:width="2dp"
+        android:height="2dp"/>
+
+</shape>
+

# 2）自定义ItemDecoration

实现上跟画分割线没多大差别，瞄一下就明白了。

public class MyDecorationTwo extends RecyclerView.ItemDecoration {
+
+    private final Drawable mDivider;
+
+    public MyDecorationTwo(Context context) {
+        mDivider = context.getResources().getDrawable(R.drawable.divider);
+    }
+
+    @Override
+    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
+        super.onDraw(c, parent, state);
+        drawVertical(c, parent);
+        drawHorizontal(c, parent);
+    }
+
+    private void drawVertical(Canvas c, RecyclerView parent) {
+        int childCount = parent.getChildCount();
+        for (int i = 0; i < childCount; i++) {
+            View child = parent.getChildAt(i);
+            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
+            int left = child.getRight() + params.rightMargin;
+            int top = child.getTop() - params.topMargin;
+            int right = left + mDivider.getIntrinsicWidth();
+            int bottom = child.getBottom() + params.bottomMargin;
+            mDivider.setBounds(left, top, right, bottom);
+            mDivider.draw(c);
+        }
+    }
+
+    private void drawHorizontal(Canvas c, RecyclerView parent) {
+        int childCount = parent.getChildCount();
+        for (int i = 0; i < childCount; i++) {
+            View child = parent.getChildAt(i);
+            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
+            int left = child.getLeft() - params.leftMargin;
+            int top = child.getBottom() + params.bottomMargin;
+            int right = child.getRight() + params.rightMargin;
+            int bottom = top + mDivider.getMinimumHeight();
+            mDivider.setBounds(left, top, right, bottom);
+            mDivider.draw(c);
+        }
+    }
+
+    @Override
+    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
+        super.getItemOffsets(outRect, view, parent, state);
+        outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
+    }
+}
+

# 3、效果（有瑕疵）

可以看出下面的效果是有问题的，表格的最后一列和最后一行不应该出现边边。

# 4、修复

既然知道表格的最后一列和最后一行不应该出现边边，那就让最后一列和最后一行的边边消失就好了。有以下几个思路。

  1. 在onDraw()方法中，判断当前列是否为最后一列和判断当前行是否为最后一行来决定是否绘制边边。
  2. 在getItemOffsets()方法中对行列进行判断，来决定是否设置条目偏移量（当偏移量为0时，自然就看不出边边了）。

这里我选用第二种方式。这里要说明一下，getItemOffsets()有两个，一个是getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)，另一个是getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent)，第二个已经过时，但是该方法中有回传当前item的position，所以我选用了过时的getItemOffsets()。

@Override
+public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
+    super.getItemOffsets(outRect, itemPosition, parent);
+    int right = mDivider.getIntrinsicWidth();
+    int bottom = mDivider.getIntrinsicHeight();
+
+    if (isLastSpan(itemPosition, parent)) {
+        right = 0;
+    }
+
+    if (isLastRow(itemPosition, parent)) {
+        bottom = 0;
+    }
+    outRect.set(0, 0, right, bottom);
+}
+
+public boolean isLastRow(int itemPosition, RecyclerView parent) {
+    RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
+    if (layoutManager instanceof GridLayoutManager) {
+        int spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
+        int itemCount = parent.getAdapter().getItemCount();
+        if ((itemCount - itemPosition - 1) < spanCount)
+            return true;
+    }
+    return false;
+}
+
+public boolean isLastSpan(int itemPosition, RecyclerView parent) {
+    RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
+    if (layoutManager instanceof GridLayoutManager) {
+        int spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
+        if ((itemPosition + 1) % spanCount == 0)
+            return true;
+    }
+    return false;
+}
+

代码理解上并不难，这里不做多余的解释。

# 5、效果（几乎没有瑕疵）

# 四、使用ItemDecoration实现侧边字母提示

上面的两个例子仅仅只是画线，下面的这个例子就来画字吧。先看下效果。

# 1、分析

说到底也就是在item左边偏移出来的空间区域中心画个字母而已。下面是大体思路：

  1. 在item的左边偏移出一定的空间（本例偏移量是40dp）。
  2. 在onDraw()时，使用Pinyin工具类获取item中名字拼音的第一个字母。
  3. 判断如果当前是第一个item，就画出字母。
  4. 若不是第一个item则判断当前item的名字字母与上一个字母是否一致，不一致则画出当前字母。

# 2、实现

# 1）自定义文字拼音工具类

*该工具类需要用到pinyin4j-2.5.0.jar

public class PinyinUtils {
+
+    public static String getPinyin(String str) {
+
+        HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
+        format.setCaseType(HanyuPinyinCaseType.UPPERCASE);
+        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
+
+        StringBuilder sb = new StringBuilder();
+
+        char[] charArray = str.toCharArray();
+        for (int i = 0; i < charArray.length; i++) {
+            char c = charArray[i];
+            // 如果是空格, 跳过
+            if (Character.isWhitespace(c)) {
+                continue;
+            }
+            if (c >= -127 && c < 128 || !(c >= 0x4E00 && c <= 0x9FA5)) {
+                // 肯定不是汉字
+                sb.append(c);
+            } else {
+                String s = "";
+                try {
+                    // 通过char得到拼音集合. 单 -> dan, shan 
+                    s = PinyinHelper.toHanyuPinyinStringArray(c, format)[0];
+                    sb.append(s);
+                } catch (BadHanyuPinyinOutputFormatCombination e) {
+                    e.printStackTrace();
+                    sb.append(s);
+                }
+            }
+        }
+
+        return sb.toString();
+    }
+}
+

# 2）自定义ItemDecoration

public class MyDecorationThree extends RecyclerView.ItemDecoration {
+
+    Context mContext;
+    List<String> mData;
+    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
+
+
+    public MyDecorationThree(Context context, List<String> data) {
+        mContext = context;
+        mData = data;
+        paint.setTextSize(sp2px(16));
+        paint.setColor(Color.RED);
+    }
+
+    @Override
+    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
+        super.onDraw(c, parent, state);
+        drawLetterToItemLeft(c, parent);
+    }
+
+    private void drawLetterToItemLeft(Canvas c, RecyclerView parent) {
+        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
+        if (!(layoutManager instanceof LinearLayoutManager))
+            return;
+        int childCount = parent.getChildCount();
+        for (int i = 0; i < childCount; i++) {
+            int position = ((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition() + i;
+            View child = parent.getChildAt(i);
+            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
+            float left = 0;
+            float top = child.getTop() - params.topMargin;
+            float right = child.getLeft() - params.leftMargin;
+            float bottom = child.getBottom() + params.bottomMargin;
+            float width = right - left;
+            float height = bottom - (bottom - top) / 2;
+            //当前名字拼音的第一个字母
+            String letter = PinyinUtils.getPinyin(mData.get(position)).charAt(0) + "";
+            if (position == 0) {
+                drawLetter(letter, width, height, c, parent);
+            } else {
+                String preLetter = PinyinUtils.getPinyin(mData.get(position - 1)).charAt(0) + "";
+                if (!letter.equalsIgnoreCase(preLetter)) {
+                    drawLetter(letter, width, height, c, parent);
+                }
+            }
+        }
+    }
+
+    private void drawLetter(String letter, float width, float height, Canvas c, RecyclerView parent) {
+        float fontLength = getFontLength(paint, letter);
+        float fontHeight = getFontHeight(paint);
+        float tx = (width - fontLength) / 2;
+        float ty = height - fontHeight / 2 + getFontLeading(paint);
+        c.drawText(letter, tx, ty, paint);
+    }
+
+    @Override
+    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
+        super.getItemOffsets(outRect, view, parent, state);
+        outRect.set(dip2px(40), 0, 0, 0);
+    }
+
+    private int dip2px(int dip) {
+        float density = mContext.getResources().getDisplayMetrics().density;
+        int px = (int) (dip * density + 0.5f);
+        return px;
+    }
+
+    public int sp2px(int sp) {
+        return (int) (TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, mContext.getResources().getDisplayMetrics()) + 0.5f);
+    }
+
+
+    /**
+     * 返回指定笔和指定字符串的长度
+     */
+    private float getFontLength(Paint paint, String str) {
+        return paint.measureText(str);
+    }
+
+    /**
+     * 返回指定笔的文字高度
+     */
+    private float getFontHeight(Paint paint) {
+        Paint.FontMetrics fm = paint.getFontMetrics();
+        return fm.descent - fm.ascent;
+    }
+
+
+    /**
+     * 返回指定笔离文字顶部的基准距离
+     */
+    private float getFontLeading(Paint paint) {
+        Paint.FontMetrics fm = paint.getFontMetrics();
+        return fm.leading - fm.ascent;
+    }
+}
+

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#RecyclerView#ItemDecoration
Material Design 兼容性控件学习
RecyclerView之使用ItemTouchHelper实现交互动画

+ ← + RecyclerView之使用ItemTouchHelper实现交互动画→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5f806d/index.html b/pages/5f806d/index.html new file mode 100644 index 000000000..3f7b53fae --- /dev/null +++ b/pages/5f806d/index.html @@ -0,0 +1,90 @@ + + + + + + 性能优化 - 内存泄漏（2）工具分析篇 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-06-30
目录

性能优化 - 内存泄漏（2）工具分析篇

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

在上一篇《性能优化——内存泄漏（1）入门篇》 (opens new window)中，介绍了内存泄漏的基本概念，并举了一个Demo，结合简单的代码分析，猜测出Demo中存在内存泄漏，并用Android Studio自带的Memory Monitor证明了我们的猜测，但开发中，业务逻辑可能比较复杂，对象引用繁多，难道都要这样去做代码分析吗？肯定不行，程序员的精力有限，且“很懒”(追求效率)，我们需要工具来帮助我们进行分析。下面就来看看都有什么神器吧。

# 二、工具分析

# 1、System Information

System Information是Android Studio自带的分析工具，可以通过它来判断APP整体是否存在内存泄漏。

一个不存在内存泄漏的APP，在其退出并执行过GC后，APP中所有的View和Activity都会被销毁，所以，我们可以根据退出后内存中View和Activity的数量来判断这个APP是否存在内存泄漏。操作如下：

以上一篇中的Demo为例： +运行APP-->打开一个Activity-->屏幕旋转-->点返回键（两次）直到到桌面-->执行GC-->System Information-->Memory Usage

通过上述操作，会生成一个txt文本，其中就记录着View和Activity的数量。如下图所示，它们的值都为0（主要看Activities），说明本APP不存在内存泄漏。相反的，只要值不为0，那么APP是存在内存泄漏的。

这种方式只能判断整个APP是否存在内存泄漏，但无法知道哪里有内存泄漏，也无法得知是哪些对象引用造成的内存泄漏。

# 2、Analyzer Tasks

Analyzer Tasks 是Android Studio自带的分析工具，可以帮助我们快速定位内存泄漏，而且使用上 very easy~

打开一个内存快照（.hprof文件），Android Studio的右侧会出现Analyzer Tasks。

打开Analyzer Tasks后，可以发现有2个选项和一个按钮，说明如下图所示，我们需要的就是第一个"Detect Leaked Activities"。

执行任务后，下方的Analysis Results中会得到泄漏的Activity，而且直接定位到了MemoryLeakActivity[0]，要上篇中得到的结果一样。

# 3、MemoryAnalyzer(MAT)

这工具，真心觉得有点复杂，但功能比Android Studio自带的Analyzer Tasks要强大的多。

MemoryAnalyzer是基于eclipse开发的，是一个单独的软件，它也是对.hprof文件进行分析，但必须是标准的.hprof文件，可以从Android Studio中导出。

运行MAT，通过File-->Open Dump分别打开刚刚导出的test1.hprof和test2.hprof，选择Leak Suspects Report-->Finish。

分析的方式有两种，一种是单文件分析，一种是多文件分析，我们先进行单文件分析。

# 1）单文件分析

切换到test2.hprof，打开Histogram。

点击Histogram后，会出来一个Histogram标签，会列出APP中所有类的实例个数，感觉跟Android Studio的.hprof查看器差不多，MAT中的Objects相当于AS中查看器的Total Count。

通过包名筛选，找出了我们自己写的代码，Android Studio的话可以通过切换视图来定位。可以发现MemoryLeakActivity的实例有2个，说明它可能存在泄漏，再联系之前在获取快照之前执行过GC，而这个Activity还没有销毁，说明这个Activity应该是泄漏了。好，到这里单文件分析就结束了。

# 2）多文件分析

分别将test1.hprof和test2.hprof的histogram添加到Compare Basket，详细操作如下图所示。

在Compare Basket中会有刚刚添加的两个.hprof，点击红色感叹号进行对比。

出来的Compared Tables列表跟Histogram很像，不过Objects和Shallow Heap标签都是成双成对。

一样，我们只关心我们自己的代码，所以通过Regex进行筛选。通过数据分析，可以知道，在旋转屏幕前后，MemoryLeakActivity的实例由1增加到了2，又因为test2.hprof是在执行了GC后获取的，所以可以判定MemoryLeakActivity在旋转屏幕后，内存泄漏了。

# 3）引用跟踪

通过单文件分析或多文件分析，我们知道MemoryLeakActivity发生了内存泄漏（被别的实例引用导致无法被GC回收），所以回到test2.hporf的Histogram，筛选出MemoryLeakActivity，右击List objects-->with incoming references。

出来的结果有2大块，即对内存中的2个MemoryLeakActivity实例分别被引用的结果进行了分类，可以看到每个MemoryLeakActivity都被好多个对象引用了。

结合上篇中提到的java中几个特殊类，我们知道SoftReference、WeakReference和PhantomReference在GC一般不会造成内存泄漏，所以这些我们可以不管，也说是说，我们可以对它们进行排除。

对两个Activity分别排除软、弱、虚引用后，得到的结果分别如下：

简单分析下就知道了，第一个MemoryLeakActivity实例是泄漏的，引用它的对象就是CommonUtil。

# 三、总结

# 1、工具方面

个人还是比较推荐使用Android Studio集成的System Information和Analyzer Tasks，主要是使用上方便快捷，还很简单，如果你是高手，并且需要有更强大的功能来帮助你检查APP中的内存泄漏的话，建议使用MAT，在网上多找些比较详细的文章看看，本文对MAT的介绍只是冰山一角。

# 2、操作方面

工具仅仅只是帮助我们快速定位APP中的内存泄漏，并不能直接告诉我们哪里有内存泄漏，实际开发中，需要我们去猜测，去思考，要有清晰的思维，想方设法的构思内存泄漏的判定依据。这需要我们自己去摸索，积累一定的经验。最后，在获取内存快照（Dump Java Heap）之前，建议多点几次Initiate GC，等内存稳定成一条线时再获取内存快照。

+ +
+
#性能优化#内存泄漏
性能优化 - 内存泄漏（1）入门篇
性能优化 - 内存泄漏（3）代码分析篇

+ ← + 性能优化 - 内存泄漏（3）代码分析篇→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/5f9bf6/index.html b/pages/5f9bf6/index.html new file mode 100644 index 000000000..1e47b4d22 --- /dev/null +++ b/pages/5f9bf6/index.html @@ -0,0 +1,187 @@ + + + + + + Flutter - 船新升级😱支持观察第三方构建的滚动视图💪 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-06-04
目录

Flutter - 船新升级😱支持观察第三方构建的滚动视图💪

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

感谢大家对 scrollview_observer (opens new window) 的支持，上一篇关于 scrollview_observer (opens new window) 的最新一篇文章是在2022年的10月份，不知不觉已经过去了8个月，它现在已经变得更加完善和强大，让我们一起来看看都做了哪些更新吧 🥳

版本信息

# 二、自定义触发观察的时机

未添加该功能前，滚动视图在整个滚动过程中都会被观察，计算找出第一个 item 和正在展示的所有 item，当第一个 item 或者正在展示的 item 的对象发生变化时才会调用 [onObserve] 和 [onObserveAll] 回调。

但往往在一些场景下，我们想要指定在某个滚动状态下才进行观察，以及观察回调的触发时机，那该怎么办呢？

# 1、autoTriggerObserveTypes 参数

现在你可以通过该参数设置自动触发观察的时机，定义如下：

final List<ObserverAutoTriggerObserveType>? autoTriggerObserveTypes;
+
enum ObserverAutoTriggerObserveType {
+  scrollStart,
+  scrollUpdate,
+  scrollEnd,
+}
+

其默认值为 [.scrollStart, .scrollUpdate, .scrollEnd]

枚举值说明：

枚举值 描述
scrollStart 开始滚动
scrollUpdate 滚动中
scrollEnd 结束滚动

如在视频列表的场景中，我们可能只需要在列表结束滚动时再去做观察哪个 item 是第一个，然后进行自动播放，这个时候设置 autoTriggerObserveTypes 为 .scrollEnd 即可，同时也避免了大量不必要的计算。

# 2、triggerOnObserveType 参数

用于配置触发 [onObserve] 和 [onObserveAll] 回调的前提，定义如下：

final ObserverTriggerOnObserveType triggerOnObserveType;
+
enum ObserverTriggerOnObserveType {
+  directly,
+  displayingItemsChange,
+}
+

其默认值为 .displayingItemsChange

枚举值说明：

枚举值 描述
directly 观察到数据后直接将数据返出
displayingItemsChange 当列表子部件进出或数量发生变化时将观察到的数据返出

一般是在实时获取 item 的 leadingMarginToViewport（item 顶部与视窗顶部的距离） 和 trailingMarginToViewport（item 底部与视窗底部的距离）的时候比较常用。

# 三、保持IM会话位置功能增强

之前限制只支持插入一条消息时保持会话位置，现在放开支持多条，使用方式不变，效果如下

注：该功能依赖被插入消息前的最新消息视图做为参照去计算偏移量，所以如果一次性插入的消息数太多，导致该参照消息视图无法得到渲染，则该功能会失效，需要你自己去对 ScrollView 的 cacheExtent 设置合理的值来尽量避免这个问题！

# 四、支持观察瀑布流

原先仅针对 GridView 这种常规网格布局，只处理顶部偏移量一致的 item，现在调整了内部处理逻辑，已支持瀑布流这种模式

如上图红线所示，位于第一的 item 是 grid item2 和 grid item3。

# 五、支持观察viewport

大家多多少少会遇到这种情况，在 CustomScrollView 中放置了好多 sliver，需要对它们进行观察，判断哪些 sliver 正在展示，而不仅仅是观察 SliverList 和 SliverGrid 中的 item。

在这里可以使用 onObserveViewport 回调得到你想要的结果，代码如下

SliverViewObserver(
+  child: _buildScrollView(),
+  sliverContexts: () {
+    return [
+      if (grid1Context != null) grid1Context!,
+      if (swipeContext != null) swipeContext!,
+      if (grid2Context != null) grid2Context!,
+    ];
+  },
+  onObserveViewport: (result) {
+    firstChildCtxInViewport = result.firstChild.sliverContext;
+    if (firstChildCtxInViewport == grid1Context) {
+      debugPrint('current first sliver in viewport - gridView1');
+    } else if (firstChildCtxInViewport == swipeContext) {
+      debugPrint('current first sliver in viewport - swipeView');
+    } else if (firstChildCtxInViewport == grid2Context) {
+      debugPrint('current first sliver in viewport - gridView2');
+    }
+  },
+)
+
  1. 在 sliverContexts 回调中返回需要观察的 sliver 的 BuildContext。
  2. 在 onObserveViewport 回调中拿到观察结果，结果对应的类为 SliverViewportObserveModel
class SliverViewportObserveModel {
+  /// 当前 CustomScrollView 所对应的 viewport 实例.
+  final RenderViewportBase viewport;
+
+  /// 根据 sliverContexts，返回当前观察到的第一个 sliver
+  final SliverViewportObserveDisplayingChildModel firstChild;
+
+  /// 根据 sliverContexts，返回当前观察到的正在展示的所有 sliver
+  final List<SliverViewportObserveDisplayingChildModel>
+      displayingChildModelList;
+  ...
+}
+

这里需要注意的是，观察的对象不应为嵌套的 sliver，如下代码所示：

SliverPadding(
+  sliver: SliverList(
+    delegate: SliverChildBuilderDelegate(
+      (context, index) {
+        return ListTile(title: Text('index - $index'));
+      },
+    ),
+  ),
+  padding: const EdgeInsets.all(8),
+);
+

你需要观察的是 SliverPadding，而不是 SliverList，在给 sliverContexts 传递数据时需要留意，否则观察无效。

那一块的 Sliver 的 BuildContext 要怎么获取？

你可以使用 GlobalKey，但这里更建议使用 SliverLayoutBuilder

SliverLayoutBuilder(
+  builder: (context, _) {
+    // 将 context 记录起来
+    if (sliverCtx != context) sliverCtx = context;
+  
+    SliverPadding(
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate(
+          ...
+        ),
+      ),
+      padding: const EdgeInsets.all(8),
+    );
+  },
+);
+

# 六、支持自定义观察对象和观察逻辑

# 1、customTargetRenderSliverType 回调

仅支持 ListViewObserver 和 GridViewObserver

在保持原来的观察逻辑上，告诉 scrollview_observer 要处理的 RenderSliver 类型，目的是为了支持对第三方库构建的滚动视图进行观察。

customTargetRenderSliverType: (renderObj) {
+  // 告诉该库它需要观察什么类型的 RenderObject
+  // 这里以观察 loading_more_list 的 ListView 为例
+  return renderObj is ExtendedRenderSliverList;
+},
+

这里罗列几个在 loading_more_list 中常用的 RenderObject 供大家对照使用。

类型 RenderObject
ListView ExtendedRenderSliverList
GridView ExtendedRenderSliverGrid
WaterfallFlow RenderSliverWaterfallFlow

# 2、customHandleObserve 回调

该回调用于自定义观察逻辑，当自带的处理逻辑不符合你的需求时使用。

customHandleObserve: (context) {
+  // 可以完全自定义你的观察逻辑
+  final _obj = context.findRenderObject();
+  if (_obj is RenderSliverList) {
+    // 可以使用该库提供的默认处理方式
+    ObserverCore.handleListObserve(context: context);
+  }
+  if (_obj is RenderSliverGrid || _obj is RenderSliverWaterfallFlow) {
+    // 可以使用该库提供的默认处理方式
+    return ObserverCore.handleGridObserve(context: context);
+  }
+  // 处理一些由第三方构建的 Sliver
+  ...
+  
+  // 其它类型不做处理
+  return null;
+},
+

现已将原处理 RenderSliverList 和 RenderSliverGride 的逻辑抽离至 ObserverCore 中供大家自由组合使用。

# 3、extendedHandleObserve 回调

仅支持 SliverViewObserver

该回调用于对原来的观察逻辑进行补充，原来只处理 RenderSliverList、RenderSliverFixedExtentList 和 RenderSliverGrid。

extendedHandleObserve: (context) {
+  // 在对原来的观察逻辑进行拓展
+  final _obj = context.findRenderObject();
+  if (_obj is RenderSliverWaterfallFlow) {
+    return ObserverCore.handleGridObserve(context: context);
+  }
+  return null;
+},
+

结合 ObserverCore 和以上的几个功能点，实现了可自由观察由第三方构建的滚动视图的功能，不再局限于官方的 SliverList 和 SliverGrid。

这是一个很有用的功能，它让你的滚动视图的构建变得更加自由，比如观察使用 fluttercandies/waterfall_flow (opens new window) 构建的瀑布流。

# 七、定位Tab的下标计算支持网格类型

对 ObserverUtils.calcAnchorTabIndex 进行增强，现支持处理列表和网格的模块下标计算，这里直接看效果图

GitHub: https://github.com/LinXunFeng/flutter_scrollview_observer (opens new window)

+ +
+
#Dart#Flutter
Flutter - 引擎调试bug到提交PR实战 🐞
Flutter - 瀑布流交替播放视频 🎞

+ ← + Flutter - 瀑布流交替播放视频 🎞→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/614119/index.html b/pages/614119/index.html new file mode 100644 index 000000000..c4513f729 --- /dev/null +++ b/pages/614119/index.html @@ -0,0 +1,266 @@ + + + + + + DesignPattern - 命令模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-10-21
目录

DesignPattern - 命令模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、命令模式介绍

命令模式（Command Pattern）请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的对象，并把该命令传给相应的对象 执行命令，属于行为型模式。

命令模式是一种特殊的策略模式，体现的是多个策略执行的问题，而不是选择的问题

  • 核心组成

    • 抽象命令（Command）：需要执行的所有命令都在这里声明
    • 具体命令（ConcreteCommand）：定义一个接收者和行为之间的弱耦合，实现 execute() 方法，负责调用接收者的相应操作，execute() 方法通常叫做执行方法
    • 接受者（Receiver）：负责具体实施和执行一个请求，干活的角色，命令传递到这里是应该被执行的，实施和执行请求的方法叫做行动方法
    • 请求者（Invoker）：负责调用命令对象执行请求，相关的方法叫做行动方法
    • 客户端（Client）：创建一个具体命令（ConcreteCommand）对象并确定其接收者

  • 应该场景

    • 只要是你认为是命令的地方，就可以采用命令模式
    • 日常每个界面、按钮、键盘事件操作都是命令模式

  • 优点

    • 调用者角色与接收者角色之间没有任何依赖关系，不需要了解到底是哪个接收者执行，降低了系统耦合度
    • 扩展性强，新的命令可以很容易添加到系统中去

  • 缺点

    • 过多的命令模式会导致某些系统有过多的具体命令类

# 二、命令模式代码实现

以手机 App 控制智能空调为例，三者关系为：InvokerApp --> Command(n 个) --> ConditionReceiver

创建接受者类：

/**
+ * 接受者：空调
+ *
+ * @author GitLqr
+ */
+public class ConditionReceiver {
+
+	public void on() {
+		System.out.println("空调开机");
+	}
+
+	public void off() {
+		System.out.println("空调关机");
+	}
+
+	public void cool() {
+		System.out.println("空调开始制冷");
+	}
+
+	public void warm() {
+		System.out.println("空调开始制暖");
+	}
+}
+

创建抽象命令类：

/**
+ * 抽象命令
+ *
+ * @author GitLqr
+ */
+public interface Command {
+
+	void execute();
+}
+

创建具体命令类：

说明：一种命令一个类；命令类需要持有接受者实例引用，以便触发接受者相应方法

/**
+ * 具体命令：开机命令
+ *
+ * @author GitLqr
+ */
+public class OnCommand implements Command {
+
+	ConditionReceiver conditionReceiver;
+
+	public OnCommand(ConditionReceiver conditionReceiver) {
+		super();
+		this.conditionReceiver = conditionReceiver;
+	}
+
+	@Override
+	public void execute() {
+		System.out.println("OnCommand -> execute");
+		this.conditionReceiver.on();
+	}
+}
+/**
+ * 具体命令：关机命令
+ *
+ * @author GitLqr
+ */
+public class OffCommand implements Command {
+
+	ConditionReceiver conditionReceiver;
+
+	public OffCommand(ConditionReceiver conditionReceiver) {
+		super();
+		this.conditionReceiver = conditionReceiver;
+	}
+
+	@Override
+	public void execute() {
+		System.out.println("OffCommand -> execute");
+		this.conditionReceiver.off();
+	}
+}
+/**
+ * 具体命令：制冷命令
+ *
+ * @author GitLqr
+ */
+public class CoolCommand implements Command {
+	ConditionReceiver conditionReceiver;
+
+	public CoolCommand(ConditionReceiver conditionReceiver) {
+		super();
+		this.conditionReceiver = conditionReceiver;
+	}
+
+	@Override
+	public void execute() {
+		System.out.println("CoolCommand -> execute");
+		this.conditionReceiver.cool();
+	}
+}
+/**
+ * 具体命令：制暖命令
+ *
+ * @author GitLqr
+ */
+public class WarmCommand implements Command {
+
+	ConditionReceiver conditionReceiver;
+
+	public WarmCommand(ConditionReceiver conditionReceiver) {
+		super();
+		this.conditionReceiver = conditionReceiver;
+	}
+
+	@Override
+	public void execute() {
+		System.out.println("WarmCommand -> execute");
+		this.conditionReceiver.warm();
+	}
+}
+

创建请求者类：

说明：请求者类需要持有命令引用，负责各种命令的调用

/**
+ * 请求者：遥控器App
+ *
+ * @author GitLqr
+ */
+public class AppInvoker {
+
+	private Command onCommand;
+	private Command offCommand;
+	private Command coolCommand;
+	private Command warmCommand;
+
+	public void setOnCommand(Command onCommand) {
+		this.onCommand = onCommand;
+	}
+
+	public void setOffCommand(Command offCommand) {
+		this.offCommand = offCommand;
+	}
+
+	public void setCoolCommand(Command coolCommand) {
+		this.coolCommand = coolCommand;
+	}
+
+	public void setWarmCommand(Command warmCommand) {
+		this.warmCommand = warmCommand;
+	}
+
+	public void on() {
+		onCommand.execute();
+	}
+
+	public void off() {
+		offCommand.execute();
+	}
+
+	public void cool() {
+		coolCommand.execute();
+	}
+
+	public void warm() {
+		warmCommand.execute();
+	}
+}
+

使用：

public static void main(String[] args) {
+    // 创建接受者对象，空调
+    ConditionReceiver conditionReceiver = new ConditionReceiver();
+
+    // 创建命令对象，设置命令的接受者
+    Command onCommand = new OnCommand(conditionReceiver);
+    Command offCommand = new OffCommand(conditionReceiver);
+    Command coolCommand = new CoolCommand(conditionReceiver);
+    Command warmCommand = new WarmCommand(conditionReceiver);
+
+    // 创建请求者，把命令对象设置进去，app就是请求的发起者
+    AppInvoker appInvoker = new AppInvoker();
+    appInvoker.setOnCommand(onCommand);
+    appInvoker.setOffCommand(offCommand);
+    appInvoker.setCoolCommand(coolCommand);
+    appInvoker.setWarmCommand(warmCommand);
+
+    appInvoker.on();
+    appInvoker.cool();
+    appInvoker.warm();
+    appInvoker.off();
+}
+
+ +
+
#设计模式#命令模式
DesignPattern - 责任链模式【行为型】
DesignPattern - 迭代器模式【行为型】

+ ← + DesignPattern - 迭代器模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/614da2/index.html b/pages/614da2/index.html new file mode 100644 index 000000000..550b20e7d --- /dev/null +++ b/pages/614da2/index.html @@ -0,0 +1,333 @@ + + + + + + Flutter - 引擎调试bug到提交PR实战 🐞 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-04-01
目录

Flutter - 引擎调试bug到提交PR实战 🐞

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

在上一篇 Flutter - 引擎调试（iOS篇）🛠 中，我们已经知道了如何去编译调试引擎，今天就来说一说我从调试到提交 PR 的过程吧。

# 一、背景

在 Flutter 官方仓库发现了别人提的一个 issue，是关于苹果移动光标的特性功能，先给大家看看该功能的官方演示吧

issue 链接: [iOS] Hold and drag spacebar does not move cursor when obscureText is true. (opens new window)

问题复现的动图如下：

issue 问题总结：

Flutter 的 TextFormField 或 TextField ，在obscureText 的初始值和切换值的这两种情况下，长按空格并拖拽时可移动光标这一特性，出现了有别于原生控件的表现，具体如下：

    行为
端		 获得焦点
obscureText=false
(当前状态: 明文)		 切换
obscureText=true
(当前状态: 密文)
Flutter 的 TextField 可用 可用
原生的 UITextField 可用 不可用
    行为
端		 获得焦点
obscureText=true
(当前状态: 密文)		 切换
obscureText=false
(当前状态: 明文)
Flutter 的 TextField 不可用 不可用
原生的 UITextField 不可用 可用

可以看到，正常的表现应该是只要是明文，则该功能就可用，而密文时则该功能不可用，但是此时在 Flutter 端，该功能可不可用取决于获取焦点时是否为明文！

这里贴出 issue 中给出的示例代码：

import 'package:flutter/material.dart';
+
+class MyHomePage extends StatefulWidget {
+  const MyHomePage({Key? key}) : super(key: key);
+
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  final _controller = TextEditingController();
+  bool _obscureText = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Flutter Demo')),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20),
+        child: Column(
+          children: [
+            const SizedBox(height: 80),
+            TextFormField(
+              controller: _controller,
+              obscureText: _obscureText,
+              decoration: InputDecoration(
+                suffixIcon: IconButton(
+                  icon: Icon(
+                    _obscureText ? Icons.visibility_off : Icons.visibility,
+                  ),
+                  onPressed: () {
+                    setState(() {
+                      _obscureText = !_obscureText;
+                    });
+                  },
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+

接下来我们一起去探索一下引擎源码，找到出现问题的根本原因。

# 二、探索

# 1、引擎准备

配置 .gclient，将 url 改成你自己 fork 的仓库的 git 地址

这样方便我们后续调试完成后，直接将修改的代码提交至自己仓库，顺带提 PR

solutions = [
+  {
+    ...
+    "url": "git@github.com:LinXunFeng/engine.git@dd91363757dd2e8e4dc22d3be62741d461ceb005",
+    ...
+  },
+]
+

关联调试源码的操作可在上一篇 Flutter - 引擎调试（iOS篇）🛠 中查看，加上篇幅限制，所以这里就不再赘述，本文重点是解决 issue 提及的问题。

# 2、查找病因

在引擎中，与 TextField 相关的类为 FlutterTextInputPlugin，在该类的所在文件中找到 obscureText 定义的常量 kSecureTextEntry

#pragma mark - TextInputConfiguration Field Names
+
+static NSString* const kSecureTextEntry = @"obscureText";
+

搜索 kSecureTextEntry，发现了除 init 方法之外，仅在方法 configureWithDictionary 中以 kSecureTextEntry 做为 key 向 configuration 取值并将值赋予 secureTextEntry 属性

- (void)configureWithDictionary:(NSDictionary*)configuration {
+  ...
+  self.secureTextEntry = [configuration[kSecureTextEntry] boolValue];
+  ...
+}
+

因为移动光标的功能与是否明文相关，所以我们可以想到这个 secureTextEntry 必定是在哪里有被使用到。

如果我们把 secureTextEntry 相关的代码注释个遍去排查，这无异于大海捞针，该方式也过于笨拙，且明确告诉你徒劳无功，那怎么办呢？🤔

是的，重写它的 getter 方法，并打个断点

这里可别忘了先编译！

ninja -C ios_debug_unopt
+

点击输入框获取焦点，Xcode 来到断点处，注意看左边的调用栈

发现 isSecureTextEntry 是被系统调用的！

调用栈向下找，发现是 _activeView 成为第一响应者后间接触发的

activeView 的声明：

@interface FlutterTextInputPlugin ()
+...
+@property(nonatomic, retain) FlutterTextInputView* activeView;
+...
+@end
+

FlutterTextInputView 的声明：

@interface FlutterTextInputView : UIView <UITextInput, UIScribbleInteractionDelegate>
+
+// UITextInputTraits
+...
+@property(nonatomic, getter=isSecureTextEntry) BOOL secureTextEntry;
+...
+

UITextInput -> UIKeyInput -> UITextInputTraits

@protocol UITextInput <UIKeyInput>
+...
+@end
+
+
+@protocol UIKeyInput <UITextInputTraits>
+...
+@end
+
+
+@protocol UITextInputTraits <NSObject>
+...
+@property(nonatomic,getter=isSecureTextEntry) BOOL secureTextEntry; // default is NO
+...
+@end
+

可以发现 FlutterTextInputView 最终遵守了 UITextInputTraits 协议，该协议声明了 secureTextEntry 属性，而该属性不仅决定着原生控件显示明文或密文，还控制着键盘是否可以长按移动光标。

现在来看一下 FlutterTextInputPlugin.mm 文件中的 handleMethodCall 方法，其是处理 Flutter 与引擎交互的 method channel 的方法

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
+  NSString* method = call.method;
+  id args = call.arguments;
+  ...
+  } else if ([method isEqualToString:kHideMethod]) { // TextInput.hide
+    [self hideTextInput];
+    result(nil);
+  } else if ([method isEqualToString:kSetClientMethod]) { // TextInput.setClient
+    [self setTextInputClient:[args[0] intValue] withConfiguration:args[1]];
+    result(nil);
+  } ...
+}
+

TextInput.setClient: 这是在输入框获取焦点的时候与原生控件建立事务时传递的方法名，与之相对应的是 setTextInputClient 方法，在该方法内创建新的 FlutterTextInputView 控件，并赋值给 activeView

- (void)setTextInputClient:(int)client withConfiguration:(NSDictionary*)configuration {
+  [self resetAllClientIds];
+  // Hide all input views from autofill, only make those in the new configuration visible
+  // to autofill.
+  [self changeInputViewsAutofillVisibility:NO];
+
+  // Update the current active view.
+  switch (AutofillTypeOf(configuration)) {
+    case kFlutterAutofillTypeNone:
+      self.activeView = [self createInputViewWith:configuration];
+      break;
+    case kFlutterAutofillTypeRegular:
+      // If the group does not involve password autofill, only install the
+      // input view that's being focused.
+      self.activeView = [self updateAndShowAutofillViews:nil
+                                            focusedField:configuration
+                                       isPasswordRelated:NO];
+      break;
+    case kFlutterAutofillTypePassword:
+      self.activeView = [self updateAndShowAutofillViews:configuration[kAssociatedAutofillFields]
+                                            focusedField:configuration
+                                       isPasswordRelated:YES];
+      break;
+  }
+  [_activeView setTextInputClient:client];
+  [_activeView reloadInputViews];
+  ...
+  [self cleanUpViewHierarchy:NO clearText:YES delayRemoval:YES];
+}
+

并在下图的方法调用栈内可以看到最后是调用了 addToInputParentViewIfNeeded 方法将 activeView 视图添加到 inputHider 视图上。

inputHider 视图也在该方法中被添加到 _viewController.view 上

- (UIView*)hostView {
+  UIView* host = _viewController.view;
+  NSAssert(host != nullptr,
+           @"The application must have a host view since the keyboard client "
+           @"must be part of the responder chain to function. The host view controller is %@",
+           _viewController);
+  return host;
+}
+

TextInput.hide: 这是当输入框失去焦点的时候传递的方法名，用于移除当前的 activeView 视图 和 _inputHider 视图，对应的方法如下：

- (void)hideTextInput {
+  [self removeEnableFlutterTextInputViewAccessibilityTimer];
+  _activeView.accessibilityEnabled = NO;
+  [_activeView resignFirstResponder];
+  [_activeView removeFromSuperview];
+  [_inputHider removeFromSuperview];
+}
+

在此做一个小小的总结：Flutter 的 TextField 在每一次获取焦点时，引擎端会创建一个相应的 FlutterTextInputView 原生控件与之对应，并使用 activeView 来记录当前获取了焦点的那个控件，当失去焦点时，相应的控件会被移除和销毁。

断点放行后点击眼睛按钮，将输入框切换为密文，你会发现 isSecureTextEntry 的 getter 方法并不会被调用，这就是病因，此时虽然从 Flutter 的 TextField 的显示来看确实是有在进行明文与密文的切换，但是这只是 Flutter 处理后的显示结果，而在引擎端的 activeView 的 secureTextEntry 还是一开始的值，所以此时长按移动光标的功能还是生效的。

因此，要解决这个问题就得让 activeView 的 secureTextEntry 得到更新，并且调用 reloadInputViews 重新绘制键盘。

# 三、动手解决

注: TextInput.updateConfig 该常量在 Flutter 源码里是早就存在的，但是仅在引擎的 Web 端使用到，引擎的 iOS 端则没有使用。

# 1、engine 仓库

FlutterTextInputPlugin.mm

新增 TextInput.updateConfig 常量 kUpdateConfigMethod

   static NSString* const kSetSelectionRectsMethod = @"Scribble.setSelectionRects";
+   static NSString* const kStartLiveTextInputMethod = @"TextInput.startLiveTextInput";
++  static NSString* const kUpdateConfigMethod = @"TextInput.updateConfig";
+

补充处理 TextInput.updateConfig 的方法 updateConfig

 - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
+  NSString* method = call.method;
+  id args = call.arguments;
+  if ([method isEqualToString:kShowMethod]) {
+  ...
+  } else if ([method isEqualToString:kStartLiveTextInputMethod]) {
+    [self startLiveTextInput];
+    result(nil);
++  } else if ([method isEqualToString:kUpdateConfigMethod]) {
++    [self updateConfig:args];
++    result(nil);
+  } else {
+    result(FlutterMethodNotImplemented);
+  }
+

更新 secureTextEntry 并调用 reloadInputViews 方法

+  - (void)updateConfig:(NSDictionary*)dictionary {
++    BOOL isSecureTextEntry = [dictionary[kSecureTextEntry] boolValue];
++    for (UIView* view in self.textInputViews) {
++      if ([view isKindOfClass:[FlutterTextInputView class]]) {
++        FlutterTextInputView* inputView = (FlutterTextInputView*)view;
++        // The feature of holding and draging spacebar to move cursor is affected by
++        // secureTextEntry, so when obscureText is updated, we need to update secureTextEntry
++        // and call reloadInputViews.
++        // https://github.com/flutter/flutter/issues/122139
++        if (inputView.isSecureTextEntry != isSecureTextEntry) {
++          inputView.secureTextEntry = isSecureTextEntry;
++          [inputView reloadInputViews];
++        }
++      }
++    }
++  }
+

# 2、flutter 仓库

editable_text.dart

  @override
+  void didUpdateWidget(EditableText oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    ...
+    
++     if (_hasInputConnection) {
++       if (oldWidget.obscureText != widget.obscureText) {
++         _textInputConnection!.updateConfig(_effectiveAutofillClient.textInputConfiguration);
++       }
++     }
+    ...
+  }
+

这样就修复好了，别忘了先执行 ninja -C ios_debug_unopt 进行编译，然后再进行调试验证。

经过调试，一切正常，接下来就是提交 PR 了吗？不，要先添加单元测试，不过具体的单测代码不是重点，所以这里只说明如何去跑单测。

# 四、单元测试

跑单元测试前需先执行如下命令，确保你的 engine/src/out 目录下文件齐全

# engine/src/flutter/tools
+
+./gn --unoptimized
+./gn --ios --unoptimized
+./gn --ios --simulator --unoptimized
+
# engine/src/out
+
+ninja -C host_debug_unopt &&
+ninja -C ios_debug_unopt &&
+ninja -C ios_debug_sim_unopt
+

# 1、脚本跑单测

注: 请提前打开 iOS 模拟器，执行 run_tests.py 跑单元测试时需要用到

跑脚本单元测试，执行如下命令即可

# engine/src/flutter/testing
+
+./run_tests.py --type=objc
+

如果报错了，则按其提示先执行相应的命令，完成后再继续执行 run_tests.py

比如这是我执行脚本后的报错内容

➜  testing git:(main) ./run_tests.py --type=objc
+Traceback (most recent call last):
+  File "/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py", line 1150, in <module>
+    sys.exit(main())
+  File "/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py", line 1136, in main
+    run_objc_tests(args.ios_variant, args.objc_filter)
+  File "/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py", line 682, in run_objc_tests
+    ensure_ios_tests_are_built(ios_out_dir)
+  File "/Users/lxf/Desktop/LXF/engine/src/flutter/testing/./run_tests.py", line 585, in ensure_ios_tests_are_built
+    assert os.path.exists(tmp_out_dir
+AssertionError: /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt or /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt/libios_test_flutter.dylib doesn't exist. Please run the following commands:
+gn --ios --unoptimized --runtime-mode=debug --no-lto --simulator
+autoninja -C /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter
+

其实主要原因看这句提示:

engine/src/out/ios_debug_sim_unopt/libios_test_flutter.dylib doesn't exist
+

所以我们需要进入到 engine/src/out 目录下执行如下命令即可

autoninja -C /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter
+

执行完 run_tests.py 会自动打开名为 IosUnitTestsSimulator 的模拟器（该模拟器是以 iPhone 11 为原型创建的），然后终端会跟随打印单测的执行日志


+** TEST SUCCEEDED **
+
+...
+
+Command run successfully in 0.46 seconds: xcrun simctl delete IosUnitTestsSimulator
+

最终输出 TEST SUCCEEDED 表示单测全部通过。

# 2、Xcode 跑单测

接下来介绍一下 Xcode 跑单元测试，我们用 Xcode 打开 engine/src/flutter/testing/ios/IosUnitTests/IosUnitTests.xcodeproj

打开后你会发现单测只有 FlutterChannelsTest

别急，按 cmd + u 跑一遍就全出来了

没错，细心的你会发现截图里 SemanticsObjectTest 单测失败了，按官方文档的说明，我们需要选择 iPhone 11 模拟器进行单测。

主要原因是下面这行代码过不了，算出来的值不相等

XCTAssertTrue(CGRectEqualToRect(
+  scrollView.frame, 
+  CGRectMake(
+    x * effectivelyScale, y * effectivelyScale,
+    w * effectivelyScale, h * effectivelyScale
+  )
+));
+

运行在 iPhone 11 上的数据

scrollView.frame = (2.5 2.5; 25 50)
+
+float x = 10;
+float y = 10;
+float w = 100;
+float h = 200;
+float effectivelyScale = transformScale / screenScale; // 2.5
+

运行在 iPhone 14 Pro 上的数据

scrollView.frame = (1.66667 1.66667; 16.6667 33.3333)
+
+float x = 10;
+float y = 10;
+float w = 100;
+float h = 200;
+float effectivelyScale = transformScale / screenScale; // 0.166666672
+

这也是为什么 run_tests.py 脚本是以 iPhone 11 为原型创建的 IosUnitTestsSimulator 模拟器。

回归正题，在每一次调整完测试代码后，需要重新执行如下命令重新生成 ios_test_flutter.dylib，否则你的调整不会生效！

autoninja -C /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_sim_unopt ios_test_flutter
+

执行完再 cmd + u 或者单独执行某一条单测。

# 五、提交代码

在提交代码前，先执行 format.sh 进行检查，确保没问题后再提交，有问题则根据提示处理一下代码。

engine/src/flutter/ci/format.sh
+

好了，到此所有该做的事情都已经做完了，可以打开自己的仓库，点击 Contribute -> Open pull request 去提交 PR 了。

这里放上我的相关 PR 链接：

PR 提交时间于 2023.03.10，文章完成时间为 2023.04.01。

由于我的 PR 与 Flutter 成员目前做的一些修复在代码上有重叠的地方，所以 PR 是否会被合并目前尚未可知。该篇主要记录了结合引擎去调试 flutter bug 到解决和提交代码的整体流程，供大家参考与相互交流。

# 六、资料

+ +
+
#Dart#Flutter
Flutter - 引擎调试（iOS篇）🛠
Flutter - 船新升级😱支持观察第三方构建的滚动视图💪

+ ← + Flutter - 船新升级😱支持观察第三方构建的滚动视图💪→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/61cc74/index.html b/pages/61cc74/index.html new file mode 100644 index 000000000..3184f8de9 --- /dev/null +++ b/pages/61cc74/index.html @@ -0,0 +1,272 @@ + + + + + + Dart - 抽象类的实例化 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-06-07
目录

Dart - 抽象类的实例化

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、抽象类的使用

Dart 抽象类可以只声明方法，也可以有具体的方法实现，但是不能直接用抽象类来创建实例，只能被继承使用或者充当接口。

定义一个抽象类 Animal

abstract class Animal {
+  // 仅声明eat方法
+  void eat();
+
+  // 声明方法，且有具体实现
+  void sleep() {
+    print("睡觉");
+  }
+}
+

继承使用

class Cat extends Animal {
+  @override
+  void eat() {
+    print("喵喵吃");
+    sleep();
+  }
+
+// 可以不实现 sleep 方法
+}
+

充当接口


+class Cat implements Animal {
+  void eat() {
+    print("吃");
+  }
+
+  // 必须实现 sleep 方法
+  void sleep() {
+    print('睡');
+  }
+}
+

实例化

final animal = Animal();
+// 抽象类实例化会报错
+// Error: The class 'Test' is abstract and can't be instantiated.
+
  • 抽象类不能实例化。
  • 继承: 子类比较实现抽象方法，子类可以不重写抽象类中已实现的方法。
  • 接口: 必须实现抽象类中声明的所有方法

# 二、抽象类的实例化

上面提到了抽象类不能用于创建实例，但是有没有发现，Dart 提供的 Map 和 List 就是抽象类，却可以直接使用它们创建出一个实例对象

final list = List();
+final dict = Map<String, dynamic>();
+

我们来看一下 Map 的源码：

Map源码

Map 的确是抽象类，不过此时我们也注意到了，在 Map 这个抽象类中，定义了一个工厂构造方法，这就是使抽象类可实例化的关键所在，因为工厂方法可以返回一个实例对象，但这个对象的类型不一定就是当前类!

在这个地方，Map 的工厂方法并没有具体的实现，而只是在工厂构造方法前加了一个关键字 external。 +external 关键字可以让方法的声明与实现分离，即 可以由外部来帮我们完成具体的方法实现，那外部如何才能关联到该声明的方法呢？这里就需要用到注解 @patch，使外部的方法实现与该声明的方法绑定

external 可以分离方法的声明与实现 +@patch 关联某个类中用 external 修饰的方法的实现

根据如下路径可以找到 Map 的具体实现源码

// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/map_patch.dart
+
+@patch
+factory Map() => new LinkedHashMap<K, V>();
+

可以看到，这里使用了 LinkedHashMap 来实现 Map 。

我们再去看一下 LinkedHashMap 的实现源码，路径如下：

// flutter/bin/cache/dart-sdk/lib/collection/linked_hash_map.dart
+
+external factory LinkedHashMap(
+    {bool Function(K, K)? equals,
+    int Function(K)? hashCode,
+    bool Function(dynamic)? isValidKey});
+

这里我们又发现 LinkedHashMap 也仅仅只是声明，找到具体实现

// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/collection_patch.dart
+
+@patch
+class LinkedHashMap<K, V> {
+  @patch
+  factory LinkedHashMap(
+      {bool equals(K key1, K key2)?,
+      int hashCode(K key)?,
+      bool isValidKey(potentialKey)?}) {
+    if (isValidKey == null) {
+      if (hashCode == null) {
+        if (equals == null) {
+          return new _InternalLinkedHashMap<K, V>();
+        }
+        hashCode = _defaultHashCode;
+      } else {
+        if (identical(identityHashCode, hashCode) &&
+            identical(identical, equals)) {
+          return new _CompactLinkedIdentityHashMap<K, V>();
+        }
+        equals ??= _defaultEquals;
+      }
+    } else {
+      hashCode ??= _defaultHashCode;
+      equals ??= _defaultEquals;
+    }
+    return new _CompactLinkedCustomHashMap<K, V>(equals, hashCode, isValidKey);
+  }
+
+...
+}
+

可以看到，LinkedHashMap的工厂构造方法返回的实例类型是 _InternalLinkedHashMap 或 _CompactLinkedCustomHashMap ，这里我们再看一下这两个类的实现源码

// flutter/bin/cache/dart-sdk/lib/_internal/vm/lib/compact_hash.dart
+
+@pragma("vm:entry-point")
+class _InternalLinkedHashMap<K, V> extends _HashVMBase
+    with
+        MapMixin<K, V>,
+        _LinkedHashMapMixin<K, V>,
+        _HashBase,
+        _OperatorEqualsAndHashCode
+    implements LinkedHashMap<K, V> {
+  _InternalLinkedHashMap() {
+    _index = new Uint32List(_HashBase._INITIAL_INDEX_SIZE);
+    _hashMask = _HashBase._indexSizeToHashMask(_HashBase._INITIAL_INDEX_SIZE);
+    _data = new List.filled(_HashBase._INITIAL_INDEX_SIZE, null);
+    _usedData = 0;
+    _deletedKeys = 0;
+  }
+}
+
+......
+
+class _CompactLinkedIdentityHashMap<K, V> extends _HashFieldBase
+    with
+        MapMixin<K, V>,
+        _LinkedHashMapMixin<K, V>,
+        _HashBase,
+        _IdenticalAndIdentityHashCode
+    implements LinkedHashMap<K, V> {
+  _CompactLinkedIdentityHashMap() : super(_HashBase._INITIAL_INDEX_SIZE);
+}
+
+class _CompactLinkedCustomHashMap<K, V> extends _HashFieldBase
+    with MapMixin<K, V>, _LinkedHashMapMixin<K, V>, _HashBase
+    implements LinkedHashMap<K, V> {
+  final _equality;
+  final _hasher;
+  final _validKey;
+
+  // TODO(koda): Ask gbracha why I cannot have fields _equals/_hashCode.
+  int _hashCode(e) => _hasher(e);
+  bool _equals(e1, e2) => _equality(e1, e2);
+
+  bool containsKey(Object? o) => _validKey(o) ? super.containsKey(o) : false;
+  V? operator [](Object? o) => _validKey(o) ? super[o] : null;
+  V? remove(Object? o) => _validKey(o) ? super.remove(o) : null;
+
+  _CompactLinkedCustomHashMap(this._equality, this._hasher, validKey)
+      : _validKey = (validKey != null) ? validKey : new _TypeTest<K>().test,
+        super(_HashBase._INITIAL_INDEX_SIZE);
+}
+

它们都是一个普通的类，没有工厂构造方法，也就是说 Map 中的 external factory Map(); 最终返回的最终实例类型为 _InternalLinkedHashMap 或 _CompactLinkedCustomHashMap

我们可以做一个简单的验证

final map = Map();
+print(map.runtimeType);
+
+// 打印结果
+// _InternalLinkedHashMap<dynamic, dynamic>
+

我们来试着来实例化一个抽象类吧

abstract class Animal {
+  void eat();
+
+  void sleep() {
+    print("睡觉");
+  }
+
+  factory Animal() {
+    return Cat();
+  }
+}
+
+ class Cat implements Animal {
+  void eat() {
+    print("吃");
+  }
+
+  void sleep() {
+    print('睡');
+  }
+}
+
final animal = Animal();
+print(animal.runtimeType); 
+
+// 打印结果: Cat
+

可能会有同学要问了，这里用的是接口的方式，可以用继承的方式吗？ +很遗憾不行，因为在抽象类中定义了工厂构造方法后，在子类中不能定义除工厂构造方法外的其它构造方法了，会报错~

总结一下：

抽象类无法直接创建实例，但是可以通过实现工厂构造方法来间接实现抽象类的实例化！

# 三、补充

那饶了这么一大圈，为什么不直接在声明的时候就给它实现了呢？🤔 +这样做的好处就是：

  • 复用同一套API的声明
  • 可以针对不同的平台做不同的实现

而 针对不同的平台做不同的实现 这一点在下方给出的源码中可以看出

// flutter/bin/cache/dart-sdk/lib/io/file_system_entity.dart
+abstract class _FileSystemWatcher {
+  external static Stream<FileSystemEvent> _watch(
+      String path, int events, bool recursive);
+  external static bool get isSupported;
+}
+
// flutter/bin/cache/dart-sdk/lib/_internal/vm/bin/file_patch.dart
+
+@patch
+static Stream<FileSystemEvent> _watch(
+    String path, int events, bool recursive) {
+  if (Platform.isLinux) {
+    return new _InotifyFileSystemWatcher(path, events, recursive)._stream;
+  }
+  if (Platform.isWindows) {
+    return new _Win32FileSystemWatcher(path, events, recursive)._stream;
+  }
+  if (Platform.isMacOS) {
+    return new _FSEventStreamFileSystemWatcher(path, events, recursive)
+        ._stream;
+  }
+  throw new FileSystemException(
+      "File system watching is not supported on this platform");
+}
+
+ +
+
#Dart
iOS逆向 - 运行时分析（三）Frida
Flutter - 打印好用的Debug日志

+ ← + Flutter - 打印好用的Debug日志→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/61d6a8/index.html b/pages/61d6a8/index.html new file mode 100644 index 000000000..465d91410 --- /dev/null +++ b/pages/61d6a8/index.html @@ -0,0 +1,218 @@ + + + + + + RecyclerView遇到notifyDataSetChanged无效时的解决方案 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-03-13
目录

RecyclerView遇到notifyDataSetChanged无效时的解决方案

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

不管AbsListView(ListView、GridView)或是新出的RecyclerView,在使用notifyDataSetChanged方法更新列表数据时，一定要保证数据为同个对象（即hashCode要一致）。对于这个问题的论证，可以去看官方源代码，或是看我之前写的一篇博文"解决ListViews适配器notifyDataSetChanged()无效问题" (opens new window)，相信可以帮到你。但是，这个不是本文的重点，本文重点讲解在Fragment中，RecyclerView遇到notifyDataSetChanged无效的问题。如果你赶时间，可以直接看第三部分（"总结"）。

# 二、探索

# 1、查看数据（mData）是否是同个对象

*tip:java中可以通过打印hashCode的方式判断mData是否为同个对象。

注意：initData方法在onActivityCreated()中被调用。

public void initData() {
+	if (mData == null) {
+        mData = new ArrayList<>();
+    }
+	mData.clear();
+    ...
+	数据填充
+	...
+    if (mAdapter == null) {
+        mAdapter = new LQRAdapterForRecyclerView<String>(getActivity(), mData, R.layout.item_senior) {
+            @Override
+            public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {
+                ...
+				视图填充
+				...
+            }
+        };
+        mRvList.setAdapter(mAdapter);
+        LogUtils.sf("setAdapter时mData地址：" + mData.hashCode());
+    } else {
+        mAdapter.notifyDataSetChanged();
+        LogUtils.sf("setAdapter时mData地址：" + mData.hashCode());
+    }
+}
+

# 2、操作与结果

*tip:常规对Fragment的使用，会对其进行缓存，也可能使用单例模式，反正就是短时间内不会重新创建。

# ①操作一：

打开Activity后，切换Fragment（第一次初始化Fragment）。显示效果如下：

# ②操作二：

切换别的Fragment后，再切回刚才的Fragment(此前该Fragment已经在存在，所以不会再次创建)。显示效果如下：

# ③看控制台：

可以看到数据对象地址一样，即为同一个。

# 3、查看RecyclerView是否是同个对象

说实话，这个是踩坑经验丰富的网友在群里说的，如果不是他说出来，打死我也没想到，居然还有这么一个坑。从上面的结果可以看出，adapter中是有数据的没错，而且数据地址没变，所以理应notifyDataSetChanged()方法会生效。但是为什么会这样呢，这里先卖个关子，先看下面的操作。

# ①改下上面的代码，打印RecyclerView的地址。

代码如下：

public void initData() {
+	if (mData == null) {
+        mData = new ArrayList<>();
+    }
+	mData.clear();
+    ...
+	数据填充
+	...
+    if (mAdapter == null) {
+        mAdapter = new LQRAdapterForRecyclerView<String>(getActivity(), mData, R.layout.item_senior) {
+            @Override
+            public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {
+                ...
+				视图填充
+				...
+            }
+        };
+        mRvList.setAdapter(mAdapter);
+        LogUtils.sf("setAdapter时Rv：" + mRvList.hashCode());
+    } else {
+        mAdapter.notifyDataSetChanged();
+        LogUtils.sf("notify时Rv：" + mRvList.hashCode());
+    }
+}
+

# ②同上述操作一致。

对同一个Fragment来回切换，看控制台输出。

果然不一样！！！

# 三、总结

为什么在Fragment中RecyclerView的地址会发生变化呢？我们先理清一下Fragment生命周期会陆续调用的几个方法：

onCreate() -> onCreateView() -> onActivityCreated() -> onDestroy()

中间少了几个方法，请不用在意，下面贴下我的BaseFragment代码：

public abstract class BaseFragment extends Fragment {
+    @Override
+    public void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        init();
+    }
+
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+        //子类不再需要设置布局ID，也不再需要使用ButterKnife.bind()
+        View rootView = inflater.inflate(provideContentViewId(), container, false);
+        ButterKnife.bind(this, rootView);
+        initView(rootView);
+        return rootView;
+    }
+
+    @Override
+    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
+        super.onActivityCreated(savedInstanceState);
+        initData();
+        initListener();
+    }
+
+    @Override
+    public void onDestroy() {
+        super.onDestroy();
+    }
+}
+

当一个Fragment在来回切换时，分别调用的方法如下：

第一次显示：

onCreate() -> onCreateView() -> onActivityCreated()

第二次显示：

onCreateView() -> onActivityCreated()

这里不难理解，因为Fragment一般使用的时候会被缓存，所以，当第二次显示的时候，不会调用onCreate()。只会调用onCreateView()和onActivityCreated()，这也就是RecyclerView地址不一样的原因所在，因为控件获取操作是在initView()中进行的，即RecyclerView的获取操作在onCreateView()中，而Fragment的每次显示都会调用onCreateView()，所以RecyclerView控件会被再次获取，即重新创建一个对象（此时hashCode就变化了）。

# 1、结论：

所以，在Fragment中使用RecyclerView或AbsListView控件的notifyDataSetChanged()方法时，除了保证数据(mData对象)不能变以外，控件本身一样也不能变。

# 2、解决方案：

# 1)方案一：

因为Fragment的onCreateView()和onActivityCreated()方法在每次Fragment显示的时候会被调用，控件会被重新创建一次，所以，解决方法只能是在这两个方法中重新对RecyclerView设置适配器，而不要使用notifyDataSetChanged()，故代码改为如下：

public void initData() {
+    if (mData == null) {
+        mData = new ArrayList<>();
+    }
+    mData.clear();
+    ...
+    数据填充
+    ...
+    if (mAdapter == null) {
+        mAdapter = new LQRAdapterForRecyclerView<String>(getActivity(), mData, R.layout.item_senior) {
+            @Override
+            public void convert(LQRViewHolderForRecyclerView helper, String item, int position) {
+                ...
+                视图填充
+                ...
+            }
+        };
+    } 
+     mRvList.setAdapter(mAdapter);
+}
+

注：只是建议不要在上述两个生命周期方法中使用notifyDataSetChanged()而已，只要在保证RecyclerView等列表控件设置完适配器后，可以在任意地方继续使用notifyDataSetChanged()。

# 2)方案二：

让rootView作为全局变量，在回调onCreateView()时不再重新创建。

public abstract class BaseFragment extends Fragment {
+
+   View rootView;
+
+  @Override
+  public void onCreate(@Nullable Bundle savedInstanceState) {
+      super.onCreate(savedInstanceState);
+      init();
+  }
+
+  @Nullable
+  @Override
+  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle  savedInstanceState) {
+      //子类不再需要设置布局ID，也不再需要使用ButterKnife.bind()
+      if(rootView == null){
+          rootView = inflater.inflate(provideContentViewId(), container, false);
+          ButterKnife.bind(this, rootView);
+          initView(rootView);
+      }
+      return rootView;
+  }
+
+  @Override
+  public void onActivityCreated(@Nullable Bundle savedInstanceState) {
+      super.onActivityCreated(savedInstanceState);
+      initData();
+      initListener();
+  }
+
+   @Override
+  public void onDestroy() {
+      super.onDestroy();
+  }
+}
+
+ +
+
#MaterialDesign#RecyclerView#notifyDataSetChanged
Material Design 兼容性控件学习

Material Design 兼容性控件学习→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/63c550/index.html b/pages/63c550/index.html new file mode 100644 index 000000000..4a589bc3e --- /dev/null +++ b/pages/63c550/index.html @@ -0,0 +1,175 @@ + + + + + + DesignPattern - 原型模式【创建型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-27
目录

DesignPattern - 原型模式【创建型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、原型模式介绍

原型模型(Prototype) 是一种对象创建型模式，使用原型实例指定创建对象的种类，并通过拷贝这些原型创建新的对象，主要用于创建重复的对象，同时又能保证性能。工作原理是将一个原型对象传给那个要发动创建的对象，这个要发动创建的对象通过原型对象拷贝自己来实现创建过程。原型模型应该是最简单的设计模式了，实现一个接口，重写一个方法即可完成原型模式。

  • 核心组成 +
    • Prototype：声明克隆方法的接口，是所有具体原型类的公共父类，也就是 Cloneable 接口
    • ConretePrototype：具体原型类，也就是实现了 Cloneable 接口的类
    • Client：让一个原型对象克隆自身从而创建一个新的对象，也就是使用者（比如在 main 函数中）
  • 应用场景 +
    • 创建新对象成本较大，新的对象可以通过原型模式对已有对象进行复制来获取
    • 如果系统要保存对象的状态，做备份使用
  • 两种拷贝 +
    • 㳀拷贝：如果原型对象的成员变量是基本数据类型（int、double、byte、boolean、char 等），将复制一份给克隆对象；如果原型对象的成员变量是引用类型，则将引用对象的地址复制一份给克隆对象，也就是说原型对象和克隆对象的成员变量指向相同的内存地址。通过覆盖 Object 类的 clone()方法可以实现浅克隆。
    • 深拷贝：无论原型对象的成员变量是基本数据类型还是引用类型，都将复制一份给克隆对象，如果需要实现深克隆，可以通过序列化（Serializable）等方式来实现。
  • 优点 +
    • 当创建新的对象实例较为复杂时，使用原型模式可以简化对象的创建过程，可以提高实例的创建效率
    • 可辅助实现撤销操作，使用深克隆的方式保存对象的状态，使用原型模式将对象复制一份并将其状态保存起来，以便在需要的时候使用恢复到历史状态
  • 缺点 +
    • 需要为每一个类配备一个克隆方法，对已有类进行改造时，需要修改源代码，违背了“开闭原则”。
    • 在实现深克隆时需要编写较为复杂的代码，且当对象之间存在多重嵌套引用时，需要对每一层对象对应的类都必须支持深克隆。

综上，为方便记忆原型模式，可以 “肤浅” 的认为：

  • 浅拷贝：实现 Cloneable 接口
  • 深拷贝：实现 Serializable 接口 或 借助其他序列化手段

以下，是对 Cloneable 接口的补充说明：

  • Cloneable 接口是一个空接口，仅用于标记对象，Cloneable 接口里面是没有 clone()方法的，clone()方法是 Object 类里面的方法，默认实现是一个 Native 方法。
  • 如果对象 implement Cloneable 接口的话，需要覆盖 clone 方法（因为 Object 类的 clone 方法是 protected，需要覆盖为 public）

# 二、原型模式代码实现

创建原型类(ConretePrototype) ：

public class Person implements Cloneable, Serializable {
+
+	private String name;
+	private int age;
+	private List<String> list;
+
+	public String getName() {
+		return name;
+	}
+
+	public void setName(String name) {
+		this.name = name;
+	}
+
+	public int getAge() {
+		return age;
+	}
+
+	public void setAge(int age) {
+		this.age = age;
+	}
+
+	public List<String> getList() {
+		return list;
+	}
+
+	public void setList(List<String> list) {
+		this.list = list;
+	}
+
+	@Override
+	protected Person clone() throws CloneNotSupportedException {
+		return (Person) super.clone();
+	}
+
+	public Person deepClone() {
+		Person copyObj = null;
+		byte[] byteArray = null;
+
+		// 序列化 输出
+		try (ByteArrayOutputStream baos = new ByteArrayOutputStream();
+				ObjectOutputStream oos = new ObjectOutputStream(baos);) {
+			oos.writeObject(this);
+			byteArray = baos.toByteArray();
+		} catch (Exception e) {
+			e.printStackTrace();
+		}
+
+		// 反序列化 输入
+		try (ByteArrayInputStream bais = new ByteArrayInputStream(byteArray);
+				ObjectInputStream ois = new ObjectInputStream(bais);) {
+			copyObj = (Person) ois.readObject();
+		} catch (Exception e) {
+			e.printStackTrace();
+		}
+
+		return copyObj;
+	}
+}
+

注意：deepClone()中 try-catch 的用法是 JDK1.7 优化后的 try-with-resource 语法，会自动调用 close()。

使用方使用原型类克隆出新对象实例：

public class Client {
+	public static void main(String[] args) throws CloneNotSupportedException {
+		List<String> fruits = new ArrayList<String>(Arrays.asList("apple", "banana", "pear"));
+
+		Person person1 = new Person();
+		person1.setName("GitLqr");
+		person1.setAge(18);
+		person1.setList(fruits);
+
+		// 浅拷贝
+		// Person person2 = person1.clone();
+		// 深拷贝
+		Person person2 = person1.deepClone();
+		person2.setName("CharyLin");
+		person2.getList().add("shit");
+
+		System.out.println("person1 name is " + person1.getName() + ", age is " + person1.getAge() + ", list is "
+				+ person1.getList());
+		System.out.println("person2 name is " + person2.getName() + ", age is " + person2.getAge() + ", list is "
+				+ person2.getList());
+	}
+}
+
+ +
+
#设计模式#原型模式
DesignPattern - 工厂模式【创建型】
DesignPattern - 建造者模式【创建型】

+ ← + DesignPattern - 建造者模式【创建型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/650506/index.html b/pages/650506/index.html new file mode 100644 index 000000000..3017e15fc --- /dev/null +++ b/pages/650506/index.html @@ -0,0 +1,804 @@ + + + + + + Flutter - Dart特性语法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-15
目录

Flutter - Dart特性语法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

温馨提示：本文只罗列 Dart 中比较重要、奇特的语法，所以不合适没有其他语言基础的人学习！！

# 一、Dart 的基本语法

# 1、程序入口

  • Dart 的入口也是 main 函数，且没有返回值。
  • 传递给 main 的命令行参数，会存放在 List<String> args 中。
  • 定义字符串可以使用单引号或双引号。
  • 每行语句必须使用分号结尾。
main(List<String> args) {
+  print("Hello World");
+}
+

# 2、声明变量

  • 明确声明：变量类型 变量名称 = 赋值;
  • 类型推导：var/dynamic/const/final 变量名称 = 赋值;
// 1. 明确的声明
+String name = "lqr";
+
+// 2. 类型推导(var/final/const)
+// 类型推导的方式虽然没有明确的指定变量的类型，但是变量是有自己明确的类型的
+// 2.1 var声明变量
+var age = 18;
+// age = "abc"; // IDE报错：A value of type 'String' can't be assigned to a variable of type 'int'.
+
+// 2.2 final声明常量
+final height = 1.88;
+// height = 2.00; // IDE报错：The final variable 'height' can only be set once.
+
+// 2.3 const声明常量
+const address = "广州市";
+// address = "北京市"; // IDE报错：Constant variables can't be assigned a value.
+
+// 2.4 final和const的区别
+// const必须赋值 常量值（编译期间需要有一个确定的值）
+// final可以通过计算/函数获取一个值（运行期间来确定一个值）
+// const date1 = DateTime.now(); // 写法错误
+final date2 = DateTime.now();
+
+// 2.5 Object和dynamic的区别
+// 分别使用Object 和 dynamic，让父类引用指向子类对象
+// Object调用方法时，编译时会报错
+Object obj = "lqr";
+print(obj.substring(1)); // IDE报错：The method 'substring' isn't defined for the type 'Object'.
+// dynamic调用方法时，编译时不报错，但是运行时会存在安全隐患
+// dynamic是明确声明（var是类型推导）
+dynamic obj = "lqr";
+print(obj.substring(1)); // qr
+

# 3、[Dart 没有]非零即真

js 中存在非零即真、非空即真的特性，但在 Dart 中没有！！Dart 要求 if() 语句必须传入一个 bool 类型：

// Dart中没有非零即真，也没有非空即真
+var flag = "true";
+if (flag) { // IDE报错：Conditions must have a static type of 'bool'.
+  print("执行代码");
+}
+

注意：Dart 不支持非空即真或者非 0 即真，必须有明确的 bool 类型

# 4、字符串类型

Dart 有三种定义字符串的方式：

  • 单引号('')：与双引号相同。
  • 双引号("")：与单引号相同。
  • 三引号("""""")：可以定义多行字符串，不需要借助 \n。
// 1. 定义字符串
+var str1 = 'abc';
+var str2 = "abc";
+var str3 = """
+abc
+cba
+nba
+""";
+
+// 小技巧：如果字符串中存在双引号，又不想转义的话，可以使用单引号来定义该字符串，反之使用双引号。
+print('a"b"c'); // a"b"c
+print("a'b'c"); // a'b'c
+

Dart 支持字符串插值：

// 2. 字符串和表达式拼接
+var name = "lqr";
+var age = 19;
+var height = 1.88;
+// 强调：${变量}可以省略{}，${表达式}不能省略{}
+// var message1 = "my name is ${name}, age is ${age}, height is ${height}";
+var message1 = "my name is $name, age is $age, height is $height"; // my name is lqr, age is 19, height is 1.88
+var message2 = "name is $name, type is ${name.runtimeType}"; // name is lqr, type is String
+print(message1);
+print(message2);
+

# 5、集合类型

Dart 集合类型有：

  • 列表 List：[ele1, ele2, ele2, ele1]
  • 集合 Set：{ele1, ele2, ele3}
  • 映射 Map：{"key1" : value1, "key2" : value2}
// 1. 列表List：[];
+var names = ["abc", "cba", "nba", "cba"];
+names.add("mba");
+// names.remove(value);
+// names.removeAt(index);
+
+// 2. 集合Set：{};
+var movies = {"星际穿越", "大话西游", "盗梦空间"};
+names = Set<String>.from(names).toList(); // 可以用Set来去重
+print(names);
+
+// 3. 映射Map
+var info = {
+  "name": "lqr",
+  "age": 18,
+};
+

# 二、Dart 的函数使用

# 1、函数的基本使用

Dart 的函数定义：

返回值 函数的名称(参数列表) {
+  函数体
+  return 返回值
+}
+

例子：

main(List<String> args) {
+  print(sum(20, 30));
+}
+
+int sum(int num1, int num2) {
+  return num1 + num2;
+}
+
+// 返回值的类型可以省略（开发中不推荐）
+// sum(int num1, int num2) {
+//   return num1 + num2;
+// }
+

# 2、函数的可选参数

Dart 的函数参数有两类：

  • 必选参数：必须传
  • 可选参数：可不传
main(List<String> args) {
+  sayHello1("lqr");
+}
+
+// 必选参数：必须传
+void sayHello1(String name) {
+  print(name);
+}
+
  • 可选参数有 2 种： +
    • 位置可选参数：[int age, double height]
    • 命名可选参数：{int age, double height}
main(List<String> args) {
+  sayHello2("lqr");
+  sayHello2("lqr", 18, 1.88);
+
+  sayHello3("lqr", age: 18, height: 1.88);
+  sayHello3("lqr", height: 1.88, age: 18);
+  sayHello3("lqr", height: 1.88);
+}
+
+// 位置可选参数：[int age, double height]
+// 实参和形参在进行匹配时，是根据位置来匹配
+void sayHello2(String name, [int age, double height]) {}
+
+// 命名可选参数：{int age, double height}
+// 实参和形参在进行匹配时，是根据变量名来匹配
+void sayHello3(String name, {int age, double height}) {}
+

# 3、函数的默认参数

Dart 中没有函数重载!!!Dart 中没有函数重载!!!Dart 中没有函数重载!!!但是，Dart 函数支持为可选参数设置默认值：

void sayHello1(String name) {
+  print(name);
+}
+// Dart中没有函数的重载
+// void sayHello1(){ // IDE报错：The name 'sayHello1' is already defined.
+//   ...
+// }
+
+// 注意：只有可选参数才可以有默认值，必传参数没有默认值
+void sayHello4(String name, [int age = 20, double height = 1.7]) {}
+void sayHello5(String name, {int age = 20, double height = 1.7}) {}
+

注意：只有可选参数才能设置默认值。

# 4、函数是一等公民

函数是一等公民 意味着可以将函数赋值给一个变量，也可以将函数作为另外一个函数的参数或返回值来使用。

main(List<String> args) {
+  // 1. 直接找到另外一个定义的函数传进去
+  test(bar); // bar函数被调用
+
+  // 2. 匿名函数 (参数列表){函数体};
+  test(() {
+    print("匿名函数被调用"); // 匿名函数被调用
+    return 10;
+  });
+
+  // 3. 箭头函数：条件，函数体只有一行代码
+  // 注意：Dart中的箭头函数与js中的箭头函数是两回事
+  test(() => print("箭头函数被调用")); // 箭头函数被调用
+}
+
+// 函数可以作为另外一个函数的参数
+void test(Function foo) {
+  var result = foo();
+}
+
+void bar() {
+  print("bar函数被调用");
+}
+

上述代码中，当将函数作为另一个函数的参数时，使用 Function 来声明这个参数类型，很明显有个问题，那就是无法对传入的函数做限制：

main(List<String> args) {
+  test((name) {
+    print(name); // lqr
+  });
+}
+
+// 封装test函数，要求：传入一个函数
+// 缺点：Function无法对传入函数做限制（比如：函数的参数列表、返回值）
+void test(Function foo) {
+  foo("lqr");
+}
+

这时，可以使用 函数签名 来代替 Function：

main(List<String> args) {
+  test((num1, num2) {
+    return num1 + num2;
+  });
+}
+
+// 可以限制 作为参数的函数的类型
+// 缺点：相当于在形参位置上写了一个函数声明（函数签名），整体看起来可读性差
+void test(int foo(int num1, int num2)) {
+  foo(20, 30);
+}
+

为了有更好的可读性，可以使用 typedef 来代替 函数签名：

main(List<String> args) {
+  test((num1, num2) {
+    return num1 + num2;
+  });
+
+  var demo1 = demo();
+  print(demo1(20, 30)); // 600
+}
+
+// 可以使用typedef定义一个函数类型
+typedef Calculate = int Function(int num1, int num2);
+
+void test(Calculate calc) {
+  calc(20, 30);
+}
+
+// 函数作为返回值
+Calculate demo() {
+  return (num1, num2) {
+    return num1 * num2;
+  };
+}
+

# 三、Dart 的特殊运算符

# 1、运算符

  • ??=：赋值运算符（变量会 null 时才执行赋值操作）
  • ??：条件运算符（有点像简化版的三元运算符）
// 1. ??=
+// 当原来的变量有值时，那么 ??= 不执行
+// 原来的变量为null时，那么将值赋值给这个变量
+var name = null;
+name ??= "lilei";
+print(name); // lilei
+
+// 2. ??
+// ??前面的数据有值，那么就使用??前面的数据
+// ??前面的数据为null，那么就使用后面的值
+var name = null;
+var temp = name ?? "lilei";
+print(temp); // lilei
+

# 2、级联语法(..)

Dart 可以使用级联语法 (..) 将任意对象的 变量赋值 或 方法调用 操作都变成 链式调用：

main(List<String> args) {
+  // var p = Person();
+  // p.name = "lqr";
+  // p.run();
+  // p.eat();
+
+  // 级联运算符
+  var p = Person()
+    ..name = "lqr"
+    ..eat()
+    ..run();
+}
+

# 3、for 循环的使用

Dart 支持 普通 for 循环，以及 for-in 循环：

// 1. 基础for循环
+for (var i = 0; i < 10; i++) {
+  print(i);
+}
+
+// 2. 遍历数组
+var names = ["why", "cba", "cba"];
+for (var i = 0; i < names.length; i++) {
+  print(names[i]);
+}
+
+for (var name in names) {
+  print(name);
+}
+

while 和 do-while 和其他语言一致，break 和 continue 用法也是一致

# 四、Dart 的面向对象

# 1、类的定义

Dart 中使用 class 关键字来定义类：

main(List<String> args) {
+  var p1 = new Person("lqr", 18);
+  // 从Dart2开始，new关键字可以省略
+  var p2 = Person("lqr", 18);
+}
+
+class Person {
+  String name;
+  int age;
+
+  // Person(String name, int age) {
+  //   this.name = name;
+  //   this.age = age;
+  // }
+
+  // 等同于上面的代码
+  Person(this.name, this.age);
+}
+

# 2、类的构造函数

Dart 不支持函数重载，所以，构造函数也一样不能重载。不过，可以使用 命名构造函数 来解决：

main(List<String> args) {
+  var p = Person("lqr", 18);
+  var p1 = new Person.withNameAgeHeight("lqr", 18, 1.88);
+  var p2 = Person.fromMap({
+    "name": "lqr",
+    "age": 18,
+    "height": 1.88,
+  });
+}
+
+class Person {
+  String name;
+  int age;
+  double height;
+
+  Person(this.name, this.age);
+
+  // Dart中没有函数重载
+  // Person(this.name, this.age, this.height); // IDE报错：The default constructor is already defined.
+
+  // 命名构造函数
+  Person.withNameAgeHeight(this.name, this.age, this.height);
+
+  Person.fromMap(Map<String, dynamic> map) {
+    this.name = map['name'];
+    this.age = map['age'];
+    this.height = map['height'];
+  }
+
+  @override
+  String toString() {
+    return "$name $age $height";
+  }
+}
+

# 3、类的初始化列表

如果类中的属性使用 final 修饰，那么在必须在构造函数中对 final 属性进行赋值，但要注意的是，不能在构造函数的函数体内对 final 属性赋值：

class Person {
+  final String name;
+  final int age;
+
+  // Person(this.name, this.age) {} // 必传参数
+  Person(this.name, {this.age = 10}) {} // （带默认值的）可选参数
+
+  // Person(this.name) { // IDE报错：All final variables must be initialized, but 'age' isn't.
+  //   this.age = 10; // IDE报错：'age' can't be used as a setter because it's final.
+  // }
+}
+

虽然 Dart 不支持在构造函数函数体中对 final 属性赋值，但是可以用 初始化列表 对其赋值：

初始化列表一般与命名可选参数配合使用，当外界调用构造函数时，可以对形参对应的属性进行校验，以及设置初始值。

class Person {
+  final String name;
+  final int age;
+
+  // function ():xxxxxx {} ，其中xxxxxx部分就是初始化列表
+  Person(this.name) : this.age = 10 {} // 初始化列表：可能使用 表达式 来为属性赋值
+  // Person(this.name, {this.age = 10}) {} // （带默认值的）可选参数：只能使用 赋值语句 来为属性赋值
+  // Person(this.name, {int age}) : this.age = age ?? 10 {} // 初始化列表：可以对形参进行校验，以及设置初始化值
+
+  // 初始化列表有多个时，用逗号隔开
+  // Person(this.name, {int age, double height}) : this.age = age ?? 10, this.height = height ?? 1.88 {}
+}
+

# 4、重定向构造函数

重定向构造函数，其实就是在一个构造函数中，去调用另一个构造函数：

class Person {
+  String name;
+  int age;
+
+  // 构造函数的重定向
+  Person(String name) : this._internal(name, 0);
+
+  Person._internal(this.name, this.age);
+}
+

# 5、常量构造函数

在某些情况下，我们希望 传入相同的值 能 返回同一个对象，这时，可以使用常量构造函数：

  • 常量构造函数： +
    • 在构造函数前加 const 进行修改。
    • 拥有常量构造函数的类中，所有的成员变量必须使用 final 修饰。
    • 为了可以通过常量构造函数创建出相同的对象，不再使用 new 关键字，而是使用 const 关键字。 +
      • 如果是将结果赋值给 const 修饰的标识符时，const 可以省略。
main(List<String> args) {
+  // 用 const常量 去接收一个常量构造函数的结果，可以省略 const
+  // const p1 = const Person("lqr", 18);
+  const p1 = Person("lqr", 18);
+  const p2 = Person("lqr", 18);
+  print(identical(p1, p2)); // true
+
+  // 如果用 var变量 去接收一个常量构造函数的结果，则这时省略的不是 const，而是 new！！
+  var p11 = Person("lqr", 18); // ==> var p11 = new Person("lqr");
+  var p22 = Person("lqr", 18);
+  print(identical(p11, p22)); // false
+
+  // 必须所有的属性值相同，对象才是同一个
+  const p111 = Person("lqr", 18);
+  const p222 = Person("lqr", 20);
+  print(identical(p111, p222)); // false
+}
+
+class Person {
+  // 拥有常量构造方法的类中，所有的成员变量必须是final修饰
+  final String name;
+  final int age;
+
+  // 一个类中只能有一个常量构造方法，命名构造方法也不行
+  // const Person(this.name);
+  const Person(this.name, this.age);
+}
+

# 6、工厂构造函数

为了满足 传入相同的值，得到相同的对象 这个需求，除了可以使用常量构造函数外，还可以使用工厂构造函数，而且工厂构造函数更加灵活。

  • 工厂构造函数：在构造函数前加 factory 关键字进行修改。
  • 工厂构造函数与普通的构造函数的区别： +
    • 普通的构造函数：会自动返回创建出来的对象，不能手动返回
    • 工厂构造函数最大的特点：可以手动的返回一个对象
main(List<String> args) {
+  final p1 = Person.withName("lqr");
+  final p2 = Person.withName("lqr");
+  print(identical(p1, p2));
+}
+
+class Person {
+  String name;
+  String color;
+
+  // static 修饰的属性是类属性，可以通过类名直接调用
+  static final Map<String, Person> _nameCache = {};
+
+  Person(this.name, this.color);
+
+  // 普通的构造函数：会自动返回创建出来的对象，不能手动返回
+  // 工厂构造函数最大的特点：可以手动的返回一个对象
+  factory Person.withName(String name) {
+    if (_nameCache.containsKey(name)) {
+      return _nameCache[name];
+    } else {
+      final p = Person(name, "default");
+      _nameCache[name] = p;
+      return p;
+    }
+  }
+}
+

# 7、类的 setter 和 getter

很多时候，我们并不希望外部可以直接访问对象字段，而是经过 setter 和 getter 中转，这样的好处是，可以在 setter 和 getter 中做一些额外的工作，Dart 支持为字段增加 setter 和 getter：

  • setter ：前面使用 set 声明，并且需要用 () 接收参数。
  • getter ：前面使用 get 声明，还需要声明返回值类型，但是不能有 () 接收参数。
  • setter 和 getter 像字段一样使用。
main(List<String> args) {
+  final p1 = Person();
+
+  // p1.setName("lqr"); // IDE报错：The method 'setName' isn't defined for the type 'Person'.
+
+  // setter 和 getter 像字段一样使用
+  p1.setName = "lqr";
+  print(p1.getName); // lqr
+}
+
+class Person {
+  String name;
+
+  // setter
+  // set setName(String name) {
+  //   this.name = name;
+  // }
+  set setName(String name) => this.name = name;
+
+  // getter：注意getter没有()
+  // String get getName {
+  //   return this.name;
+  // }
+  String get getName => this.name;
+}
+

严格意义上来说，Dart 中的 setter 和 getter 已经不能算是方法了吧。

# 8、类的继承

Dart 中的继承使用 extends 关键字，子类中使用 super 来访问父类。

注意：Dart 只支持单继承。

main(List<String> args) {}
+
+class Animal {
+  int age;
+
+  Animal(this.age);
+
+  void run() {
+    print("向前跑~");
+  }
+}
+
+class Person extends Animal {
+  String name;
+
+  // 必须在初始化列表中，调用父类的构造函数
+  Person(this.name, int age) : super(age);
+
+  @override
+  void run() {
+    // super.run();
+    print("向前走～");
+  }
+}
+
+// Dart只支持单继承
+// class SuperMan extends Runner, Flyer{ // IDE报错：Each class definition can hava at most one extends clause.
+// }
+

# 9、抽象类的使用

Dart 可以使用 abstract 关键字来定义抽象类：

  • 抽象类中的 抽象方法不需要使用 abstract 关键字修饰
  • 抽象类不能实例化
main(List<String> args) {
+  final s = Shape(); // IDE报错：Abstract classes can't be instantiated.
+}
+
+// 注意2：抽象类不能实例化
+abstract class Shape {
+  // 抽象方法，没有方法体，也不用 abstract 关键字修饰
+  int getArea();
+
+  String getInfo() {
+    return "形状";
+  }
+}
+
+// 注意1：继承自抽象类后，必须实现抽象类的抽象方法
+class Rectangle extends Shape {
+  @override
+  int getArea() {
+    return 100;
+  }
+}
+

注意：Dart 中抽象类不能实例化，但也有特殊情况，有工厂构造函数(factory)的抽象类可以实例化，比如：Map。

# 10、隐式接口

Dart 使用 implements 关键字来实现多个接口，但奇葩的是，Dart 中没有用来定义接口的关键字，默认情况下所有的类都是隐式接口，即可以 implements 任意类：

注意：要重写被 implements 的类中的所有方法！

main(List<String> args) {}
+
+// Dart中没有哪一个关键字是来定义接口的
+// 没有这些关键字interface/protocol
+// 默认情况下所有的类都是隐式接口
+class Runner {
+  void running() {
+    print("跑吧");
+  }
+}
+
+class Flyer {
+  void flying() {
+    print("飞吧");
+  }
+}
+
+// 当将一个类当做接口使用时，那么实现这个接口的类，必须实现这个接口中所有方法（不可以在这些方法里使用super）
+class SuperMan implements Runner, Flyer {
+  @override
+  void flying() {
+    // super.flying(); // IDE报错：The method 'flying' is always abstract in the supertype.
+  }
+
+  @override
+  void running() {}
+}
+

建议：用 abstract class 来声明接口，反正被 implements 的类的所有方法都要重写。

# 11、mixin 混入的使用

当遇到要复用 2 个类中方法的时候，要怎么办？

  • 如果使用接口方式则需要重新实现 2 个类中各自的方法，这样根本就不能算是复用；
  • 而 Dart 又只能单继承，最多只能复用 1 个类中方法；

Dart 提供了另一个方案：Mixin 混入。可以定义 2 个 mixin 类，通过 with 关键字把这 2 个 mixin 类混入到一个类 A 中，这时类 A 就拥有了它们的方法，从而达到复用 2 个类中方法的目的：

main(List<String> args) {
+  final superMan = SuperMan();
+  superMan.eating(); // 动作吃东西
+  superMan.running(); // running（调用的是混入类Runner中的running()）
+  superMan.flying(); // flying
+}
+
+class Animal {
+  void eating() {
+    print("动作吃东西");
+  }
+
+  void running() {
+    print("动物running");
+  }
+}
+
+mixin Runner {
+  void running() {
+    print("running");
+  }
+}
+
+mixin Flyer {
+  void flying() {
+    print("flying");
+  }
+}
+
+// Runner中的running()与Animal中的running()冲突，这时会发生覆盖，即SuperMan中的running()调用的是Runner的running()
+class SuperMan extends Animal with Runner, Flyer {}
+

# 12、类属性和类方法

类中使用 static 关键字修饰的属性(或方法)就是类属性(或类方法)，类属性和类方法可以通过类名直接调用：

main(List<String> args) {
+  Person.courseTime = "8:00";
+  print(Person.courseTime);
+  Person.gotoCourse();
+}
+
+class Person {
+  // 成员变量
+  String name;
+
+  // 静态属性（类属性）
+  static String courseTime;
+
+  // 对象方法
+  void eating() {
+    print("eating");
+  }
+
+  // 静态方法（类方法）
+  static void gotoCourse() {
+    print("去上课");
+  }
+}
+

# 13、枚举的使用

枚举使用 enum 关键字来定义，枚举有 2 个常见的属性：

  • index：用于表示每个枚举的索引，从 0 开始
  • values：包含每个枚举值的集合
// 枚举：enum
+main(List<String> args) {
+  final color = Colors.red;
+  switch (color) {
+    case Colors.red:
+      print("红色");
+      break;
+    case Colors.blue:
+      print("蓝色");
+      break;
+    case Colors.green:
+      print("绿色");
+      break;
+  }
+
+  print(Colors.values); // [Colors.red, Colors.blue, Colors.green]
+  print(Colors.red.index); // 0
+}
+
+enum Colors {
+  red,
+  blue,
+  green,
+}
+

# 14、泛型的使用

集合类型使用泛型：

// List使用时的泛型写法：
+var names1 = ["abc", "cba", "nba", 111]; // List<Object>
+var names2 = ["abc", "cba", "nba"]; // List<String>
+// var names3 = <String>["abc", "cba", "nba", 111]; // IDE报错：The element type 'int' can't be assigned to the list type 'String'.
+var names3 = <String>["abc", "cba", "nba"]; // List<String>
+List<String> names4 = ["abc", "cba", "nba"]; // List<String>
+
+// Map使用时的泛型写法：
+var info1 = {"name": "lqr", "age": 18}; // _InternalLinkedHashMap<String, Object>
+var info2 = <String, String>{'name': 'lqr', 'age': '18'}; // _InternalLinkedHashMap<String, String>
+Map<String, String> info3 = {'name': 'lqr', 'age': '18'}; // _InternalLinkedHashMap<String, String>
+

类定义使用泛型：

main(List<String> args) {
+  var point = Point<double>(1.23333, 1.9527); // Point<double>
+  final pointX = point.setAndGetX(5.55);
+  print(pointX); // 5.55
+}
+
+// class Point<T> // 泛型T是Object的子类
+class Point<T extends num> { // 泛型T是数字类型
+  T x;
+  T y;
+
+  Point(this.x, this.y);
+
+  T setAndGetX(T x) {
+    this.x = x;
+    return this.x;
+  }
+}
+

T extends num 用于限制泛型的类型必须是数字，不限制的话则默认是 Object。

# 五、Dart 中库的使用

  • Dart 中你可以导入一个库来使用它所提供的功能。
  • Dart 中任何一个 dart 文件都是一个库，即使你没有用关键字 library 声明。

库导入的语法：

import '库所在的 uri';
+

# 1、使用系统的库

系统库的 uri 一般以 dart: 开头，常见的系统库有：dart:io、dart:async、dart:math 等：

// import 'dart:io';
+// import 'dart:isolate';
+// import 'dart:async';
+// import 'dart:math';
+
+// 系统的库：import 'dart:库的名字';
+
+import 'dart:math';
+
+main(List<String> args) {
+  final num1 = 20;
+  final num2 = 30;
+  print(min(num1, num2));
+}
+

注意：dart:core 也是很常用的系统库，不过可以省略不写。

# 2、使用自定义库

自定义库就是自己项目中定义的其他 dart 文件，比如在 utils 目录下创建一个 math_utils.dart 文件，内容如下：

// utils 目录下的 math_utils.dart 文件内容：
+int sum(int num1, int num2) {
+  return num1 + num2;
+}
+
+int mul(int num1, int num2) {
+  return num1 * num2;
+}
+

这里的 math_utils.dart 文件就是一个自定义库，你可以在其他 dart 文件中导入：

// 导入自定义库可以是相对路径或绝对路径。
+import 'utils/math_utils.dart';
+
+main(List<String> args) {
+  print(sum(20, 30));
+

# 3、使用第三方库

那些存放在远程仓库上的库文件就是第三方库，如果项目中需要依赖第三方库，就需要在项目目录下创建一个 pubspec.yaml 文件，其中 dependencies 部分填写要依赖的第三方库的描述（库名: 版本）：

name: myProjectName
+description: my project name
+dependencies:
+  http: ^0.12.0+4
+environment:
+  sdk: ">=2.10.0 <3.0.0"
+

可以在 pub.dev (opens new window) 上查找第三方库的使用说明。

填写好依赖后，需要执行 dart pub get 或 flutter pub get 命令，让终端从服务器上拉取第三方对应的版本文件，之后就可以在代码中使用这个第三方库了：

import 'package:http/http.dart' as http;
+
+main(List<String> args) async {
+  var url = 'https://example.com/whatsit/create';
+  var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
+  print('Response status: ${response.statusCode}');
+  print('Response body: ${response.body}');
+  print(await http.read('https://example.com/foobar.txt'));
+}
+

# 4、库方法名冲突

比如：math_utils.dart 库中有 int sum(int num1, int num2) 方法，当前 dart 文件中又定义了 void sum(int num1, int num2) 方法，这 2 个方法名相同，但返回值不同：

import 'utils/math_utils.dart';
+
+main(List<String> args) {
+  print(sum(20, 30)); // IDE报错：This experssion has a type of 'void' so its value can't be used.
+}
+
+// void sum(num1, num2) // 参数类型可以不写，默认是 dynamic
+void sum(int num1, int num2) {
+  print(num1 + num2);
+}
+

这时，当前 dart 文件识别到的是自己的 sum()方法，而实际上我们想要使用的是 math_utils.dart 库中 sum()方法，这就发生了库方法名冲突，可以使用 as 关键字给库起别名来解决：

import 'utils/math_utils.dart' as mUtils;
+
+main(List<String> args) {
+  print(mUtils.sum(20, 30));
+}
+
+void sum(sum1, sum2) {
+  print(sum1 + sum2);
+}
+

# 5、库内容的显示和隐藏

默认 import 进来的库中所有内容都是可见的，但是很多时候我们希望只导入库中的某些内容，或者希望隐藏库中的某些内容，这时可以使用 show 和 hide 关键字：

  • show：显示某个成员（ 屏蔽其他）
// import "utils/math_utils.dart" show sum, mul;
+import "utils/math_utils.dart" show sum;
+
+main(List<String> args) {
+  print(sum(20, 30));
+  print(mul(20, 30)); // IDE报错：The function 'mul' isn't defined.
+}
+
  • hide：隐藏某个成员（显示其他）
// import "utils/math_utils.dart" hide sum, mul;
+import "utils/math_utils.dart" hide sum;
+
+main(List<String> args) {
+  print(sum(20, 30)); // IDE报错：The function 'sum' isn't defined.
+  print(mul(20, 30));
+}
+

# 6、批量导入库文件

有些时候，可能需要在一个 dart 文件中，导入 n 个库，这还是能接受的：

import 'utils/math_utils.dart';
+import 'utils/date_utils.dart';
+import ...
+
+main(List<String> args) {
+  print(sum(20, 30));
+  print(dateFormat());
+}
+

但如果是 n 个 dart 文件都要导入相同的 m 个库呢？很明显，需要有个统一批量导入库文件的方案：可以创建一个新的 dart 文件，使用 export 关键字统一导库。

// utils 目录下的 utils.dart 文件内容：
+export 'math_utils.dart';
+export 'date_utils.dart';
+export ...
+

这时，其他 dart 文件中，只需要导入这个 utils.dart 就好了：

import 'utils/utils.dart';
+
+main(List<String> args) {
+  print(sum(20, 30));
+  print(dateFormat());
+
+  // math_utils.dart中的_min()无法被外界调用
+  // print(_min(20, 30)); // IDE报错：The function '_min' isn't defined.
+}
+

注意：Dart 语言中没有可见性修饰符，即没有 public、protected、private。如果某个成员属性或方法不想被外界（其他 dart 文件）调用，可以在名字前加个下划线 _。

# 六、Dart Extension 扩展类功能

Dart 从 2.7 版本开始加入了 Extension 语法，可以给已经存在的类扩展成员方法。扩展类方法需要使用到 extension 关键字，语法为：

extension XXX on YYY{}
+

表示给 YYY 类进行扩展，扩展名是 XXX（名字可以随便写）。

# 1、扩展成员方法

如果你想给 String 扩展一个成员方法的话，可以这么写：

extension StringExt on String {
+  String sayHello() {
+    return "hello $this";
+  }
+}
+
+main(List<String> args) {
+  final name = "GitLqr";
+  print(name.sayHello()); // hello GitLqr
+}
+

# 2、扩展操作符

Extension 也可以扩展操作符, 如：

extension StringExt on String {
+  operator *(int count) {
+    String result = "";
+    for (var i = 0; i < count; i++) {
+      result += this;
+    }
+    return result;
+  }
+}
+
+main(List<String> args) {
+  final name = "GitLqr";
+  print(name * 3); // GitLqrGitLqrGitLqr
+}
+

# 3、扩展成员"属性"

Extension 除了可以扩展方法(method)、操作符(operator)，还可以扩展 getter、setter，但无法扩展实例属性（或者叫字段）。不过，因为 getter 在调用时跟调用属性的语法很像，所以这里的"属性"是带引号的：

extension StringExt on String {
+  int get size {
+    return this.length;
+  }
+}
+
+main(List<String> args) {
+  final name = "GitLqr";
+  print(name.size); // 6
+}
+

setter 同理，这里不多举例，更多细节，可通过官方文档查看：https://dart.dev/guides/language/extension-methods (opens new window)

+ +
+
#dart#可选参数#typedef#级联语法#命名构造函数#初始化列表#重定向构造函数#常量构造函数#工厂构造函数#setter、getter#隐式接口#mixin 混入#库别名#export#extension
Flutter - Dart事件循环机制与异步

Flutter - Dart事件循环机制与异步→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/661407/index.html b/pages/661407/index.html new file mode 100644 index 000000000..733c3d50b --- /dev/null +++ b/pages/661407/index.html @@ -0,0 +1,112 @@ + + + + + + Kotlin - 常量与变量 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-17
目录

Kotlin - 常量与变量

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 常量

Kotlin 中的常量使用 val 修改，一旦定义值后"不可再修改"，常量类型分 2 种：

  • 运行时常量(val)：编译期不能确定它的值，代码中会保留变量对它的引用。
  • 编译期常量(const val)：编译期就知道值，并且会把代码中所有对它的引用都替换成它的值。

下面我们来举例看看，这两者在代码层面上的区别到底是什么。

# 运行时常量(val)

这是一段很简单的 Kotlin 代码，先定义一个常量 FINAL_NAME，再定义一个变量 myName 引用常量 FINAL_NAME：

val FINAL_NAME: String = "lqr"
+var myName = FINAL_NAME
+

通过 IDEA 自带的 Show Kotlin Bytecode 工具将 Kotlin 代码转换成二进制，再反编译成 Java 代码：

@NotNull
+private static final String FINAL_NAME = "lqr";
+@NotNull
+private static String myName;
+...
+static {
+    myName = FINAL_NAME;
+}
+

结论：Kotlin 中变量对 val常量 的引用，会转变成 java 语言在 static 代码块中的赋值语句，即变量在编译期只保留了 val常量 的引用。

Show Kotlin Bytecode 工具所在路径：Tools -> Kotlin -> Show Kotlin Bytecode

# 编译期常量(const val)

跟上面一样，先定义一个常量 FINAL_CONST_NAME，再定义一个变量 myConstName 引用常量 FINAL_CONST_NAME：

const val FINAL_CONST_NAME: String = "lqr"
+var myConstName = FINAL_CONST_NAME
+

通过 IDEA 自带的 Show Kotlin Bytecode 工具将 Kotlin 代码转换成二进制，再反编译成 Java 代码：

@NotNull
+public static final String FINAL_CONST_NAME = "lqr";
+@NotNull
+private static String myConstName = "lqr";
+

结论：Kotlin 中变量对 const val常量 的引用，会转变成直接赋值语句，即编译期会把代码中所有对 const val常量 的引用都替换成它的值。

Kotlin 中 val常量 仅仅只是类似 Java 中的 final 常量而已，而 const val 常量，才是真正对应 Java 中的 final 常量。因为 Java 中的 final 常量是编译期常量。

# 变量

与常量不同，变量是后续可修改的，Kotlin 中使用 var 定义：

var myName: String = "lqr"
+myName = "吴彦祖"
+

那如果对 val常量 再执行赋值操作会怎样呢？

val FINAL_NAME: String = "lqr"
+FINAL_NAME = "吴彦祖" // 报错：Val cannot be reassigned
+

val常量 如此，const val常量 也是一样的，就不多废话了。

# 类型推导

Kotlin 支持类型推导，当常量或变量在定义并且赋值时，Kotlin 就已经明确了该常量或变量的类型，于是常量或变量的类型可省略：

val string = "Hello" // 推导出 String 类型
+val int = 5 // Int 类型
+var x = getString() + 5 // String 类型
+

注意：Kotlin 是支持类型推导的强类型语言，不同于 python、js 中的动态类型，Kotlin 中一旦确定了变量类型，后续将不可修改。

+ +
+
#Kotlin#Val#Var
Kotlin - 区间与数组
Kotlin - 函数与Lambda表达式

+ ← + Kotlin - 函数与Lambda表达式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/67358d/index.html b/pages/67358d/index.html new file mode 100644 index 000000000..c8fc532a5 --- /dev/null +++ b/pages/67358d/index.html @@ -0,0 +1,172 @@ + + + + + + DesignPattern - 观察者模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-09-15
目录

DesignPattern - 观察者模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、观察者模式介绍

观察者模式（Observer）定义了对象间一种一对多的依赖关系，使得每当一个对象改变状态时，所以依赖于它的对象都会得到通知并自动更新，也叫做发布订阅模式 Publish/Subscribe，属于行为型模式

  • 核心组成

    • Subject 主题：持有多个观察者对象的引用，抽象主题提供了一个接口可以增加和删除观察者对象；有一个观察者数组，并实现增、删及通知操作
    • Observer 抽象观察者：为具体观察者定义一个接口，在得到主题的通知时更新自己
    • ConcreteSubject 具体主题：将有关状态存入具体观察者对象，在具体主题内部状态改变时，给所有登记过的观察者发出通知
    • ConcreteObserver 具体观察者：实现抽象观察者角色所要求的更新接口，以便使本身的状态与主题的状态保持一致

  • 应用场景

    • 消息通知，比如邮件通知、广播通知、微信朋友圈、微博私信等，都是监听观察事件
    • 当一个对象的改变需要同时改变其它对象，且它不知道具体有多少对象有待改变的时候，考虑使用观察者模式

  • 优点

    • 降低了目标与观察者之间的耦合关系，目标与观察者之间建立了一套触发机制
    • 观察者和被观察者是抽象的

  • 缺点

    • 观察者和观察目标之间有循环依赖的话，会触发它们之间进行循环调用，可能导致系统崩溃
    • 一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间

# 二、观察者模式代码实现

创建抽象主题类：

/**
+ * 抽象主题
+ *
+ * @author GitLqr
+ */
+public class Subject {
+	private List<Observer> observerList = new ArrayList<>();
+
+	public void add(Observer observer) {
+		observerList.add(observer);
+	}
+
+	public void remove(Observer observer) {
+		observerList.remove(observer);
+	}
+
+	public void notifyAllObservers() {
+		for (Observer observer : observerList) {
+			observer.update();
+		}
+	}
+}
+

创建抽象观察者类：

/**
+ * 观察者
+ *
+ * @author GitLqr
+ */
+public abstract class Observer {
+	public abstract void update();
+}
+

创建具体主题类：

/**
+ * 具体主题：QQ新闻推送
+ *
+ * @author GitLqr
+ */
+public class QQNewsSubject extends Subject {
+
+	public void pushNews() {
+		notifyAllObservers();
+	}
+}
+

创建具体观察者类：

/**
+ * 具体观察者：QQ
+ *
+ * @author GitLqr
+ *
+ */
+public class QQObserver extends Observer {
+
+	@Override
+	public void update() {
+		System.out.println("QQ 收到了新闻推送");
+	}
+}
+
+/**
+ * 具体观察者：Tim
+ *
+ * @author GitLqr
+ *
+ */
+public class TimObserver extends Observer {
+
+	@Override
+	public void update() {
+		System.out.println("Tim 收到了新闻推送");
+	}
+}
+

使用：

public static void main(String[] args) {
+    // 创建一个主题：QQ新闻
+    QQNewsSubject subject = new QQNewsSubject();
+
+    // 创建多个QQ号
+    Observer qq1Observer = new QQObserver();
+    Observer qq2Observer = new TimObserver();
+
+    // 订阅主题
+    subject.add(qq1Observer);
+    subject.add(qq2Observer);
+
+    // 推送QQ新闻
+    subject.pushNews();
+}
+
+ +
+
#设计模式#观察者模式
DesignPattern - 模板方法模式【行为型】
DesignPattern - 责任链模式【行为型】

+ ← + DesignPattern - 责任链模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/683c07/index.html b/pages/683c07/index.html new file mode 100644 index 000000000..d10616c75 --- /dev/null +++ b/pages/683c07/index.html @@ -0,0 +1,152 @@ + + + + + + Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-03-10
目录

Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在去年对公司的 Flutter 混编项目做了性能优化，其中最坑的，莫过于从 Flutter 页面返回原生页面时 dispose 方法竟然不走，如图所示

这就导致一些资源无法得到释放，如 fijkplayer 所使用的视频资源。在原生页面与满屏视频的 Flutter 页面之间反复进出时，内存占用越来越高

上图是进出 7 次视频页面后的内存占用情况。

最终会导致手机发烫，App 变得卡顿，甚至最后闪退（当 App 的内存占用达到图中红色虚线时就会直接被系统杀掉）

随即向 Flutter 官方提出了 issue: https://github.com/flutter/flutter/issues/137924 (opens new window)

# 二、解决方案

在提出 issue 的第二天，组织成员 dnfield 出提了一个 PR: https://github.com/flutter/flutter/pull/137957 (opens new window) ，不过该 PR 只是加了说明，解释为何会出现该问题，以及如何去处理。

根据其说明进行了优化，内存确实得到了有效的及时收回，如图所示

该PR的说明指出：

当通过原生的方式关闭了 Flutter 页面时，Flutter 端并不知道开发者是否打算提前释放资源，所以 Widget 树依旧保持着挂载的状态，这么做是为了再一次展示 Flutter 页面时可以尽可能快的进行渲染。【想必这也是上图中内存占用并没有得到彻底回落的原因！】

如果想要尽快的释放资源，可以建立 platform channel，当返回原生页时告知 Flutter 端去再次调用 runApp 方法，并传入 SizedBox.shrink，这样就可以释放掉活跃的 Widget 树。

通过 platform channel 的方式需要与原生端打交道，有没有纯 Flutter 的方式呢？

有的，那就是通过监听 Flutter App 的状态，当状态为 AppLifecycleState.detached 时，就可以去执行 runApp 方法了，达到一样释放资源的效果。

关于 AppLifecycleState.detached 的说明：

此时 Flutter App 仍被 Flutter 引擎所持有，但已与任何的视图分离。也就是说引擎正在以没有视图的状态运行着。

该状态既可能是在 Flutter 引擎初始化时附加视图的过程中，也可能是在视图因 Navigator 弹出而被销毁之后。

当 App 从 Flutter 页面返回原生页面后，就会切换到该状态。

# 三、代码

下面给出完整的示例代码，供大家参考

main(List<String> args) async {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatefulWidget {
+  final bool isDetached;
+
+  const MyApp({
+    Key? key,
+    this.isDetached = false,
+  }) : super(key: key);
+
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    super.didChangeAppLifecycleState(state);
+
+    switch (state) {
+      case AppLifecycleState.detached:
+        // 相关处理参考
+        // https://github.com/flutter/flutter/pull/137957
+        runApp(const MyApp(isDetached: true));
+        // 清除内存中的图片缓存
+        // https://github.com/Baseflow/flutter_cached_network_image/issues/429
+        final imageCache = PaintingBinding.instance.imageCache;
+        imageCache.clear();
+        imageCache.clearLiveImages();
+        break;
+      default:
+    }
+  }
+
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    if (widget.isDetached) {
+      // 引擎被detach, 移除所有的widget, 以此来及时释放资源
+      Widget resultWidget = const SizedBox.shrink();
+      // Fix report no OKToast widget found.
+      // resultWidget = OKToast(child: resultWidget);
+      return resultWidget;
+    }
+    return MaterialApp(
+      ...
+    );
+  }
+}
+

细心的朋友肯定注意到了 OKToast 的相关代码，当时在 Sentry 上看到了错误: No OKToast widget found，这是因为有些网络请求在返回原生页面后才请求成功，进而触发吐丝，而此时已经执行了 runApp 去展示空白页面，考虑到即使取消了所有请求，有些业务会去对 cancel 的情况去吐丝提醒，所以还是套一个 OKToast 来得方便~

+ +
+
#Dart#Flutter
Flutter - 混编项目集成Shorebird热更新🐦（iOS篇）
Flutter - 升级3.19之后页面多次rebuild？🤨

+ ← + Flutter - 升级3.19之后页面多次rebuild？🤨→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/688a6b/index.html b/pages/688a6b/index.html new file mode 100644 index 000000000..f8fe6eebf --- /dev/null +++ b/pages/688a6b/index.html @@ -0,0 +1,275 @@ + + + + + + 使用注解打造自己的IOC框架 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-28
目录

使用注解打造自己的IOC框架

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

IoC和AOP可谓是后台开发入门必学的知识（Spring相关），但这两者都仅仅只是概念而已，并非具体技术实现，同样的，Android也可以使用IoC和AOP，之前已经写过如何在Android开发中使用AOP了，有兴趣的朋友可以看我之前的博客（顺便点个关注吧），所以，本文主题便是IoC。

控制反转（Inversion of Control，英文缩写为IoC）是框架的重要特征，并非面向对象编程的专用术语。它包括依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。

上述源至百度百科，对于第一次接触IoC的人可能有些晦涩难懂，其实，通俗来讲，就是本来我可以做的事我现在不想做了，交给框架来做。举个实际的例子，就是ButterKnife，它就是Android上IoC的典型，实现了控件的动态注入及点击事件的绑定。所以，下面我们就来打造一个类似ButterKnife的IoC框架吧。

# 二、框架实现

下面是ButterKnife (opens new window)在GitHub上的代码示例：

class ExampleActivity extends Activity {
+  @BindView(R.id.user) EditText username;
+  @BindView(R.id.pass) EditText password;
+
+  @OnClick(R.id.submit) void submit() {
+    // TODO call server...
+  }
+
+  @Override public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.simple_activity);
+    ButterKnife.bind(this);
+    // TODO Use fields...
+  }
+}
+

它包含3部分：

  • 控件注入使用@BindView注解
  • 点击事件的绑定使用@OnClick注解
  • 在onCreate()方法中调用ButterKnife.bind(this)

所以，我们要模仿ButterKnife，先从@BindView和@OnClick这两个注解入手。

# 1、注解

注意，不管是控件注入还是点击事件绑定，都必须跟控件的id扯上关系，所以这两个注解中都会有一个属性用于表示控件的id。代码如下：

// 控件注入注解
+@Target(ElementType.FIELD)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface BindView {
+    int value();
+}
+
+// 控件点击事件注解
+@Target(ElementType.METHOD)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface ClickView {
+    int value();
+}
+

因为我不想事件绑定的注解名为OnClick，所以这里的注解命名为ClickView，效果一样的。

其中，BindView注解用于控件的注入，即类字段，所以其Target取值ElementType.FIELD，而ClickView注解用于控件的点击事件绑定，即方法，所以其Target取值ElementType.METHOD；并且，这两个注解都是在App运行期间被框架所使用，即运行时可见，所以，Retention取值为RetentionPolicy.RUNTIME。这俩注解在编码上的使用见如下代码：

public class MainActivity extends AppCompatActivity {
+
+    @BindView(R.id.btn_hello)
+    Button mBtnHello;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_main);
+    }
+
+    @ClickView(R.id.btn_hello)
+    public void sayHello() {
+        Toast.makeText(getApplicationContext(), "hello", Toast.LENGTH_SHORT).show();
+    }
+}
+

但这样是不够的，因为注解可以认为只是一个标记，是静态的，它并没有实现控件注入与事件绑定的功能，控件的获取实际上还是需要findViewById()来实现，而事件的绑定同样也需要setOnClickListener()来实现，这也正是框架要为我们所做的工作。

# 2、控件注入与事件绑定的实现

ButterKnife不是这么实现的，这只是我个人的想法而已。

  1. 控件注入：实际上是框架调用了activity的findViewById()方法拿到id对应的控件，再通过反射的方式，对控件（类字段）进行赋值。
  2. 事件绑定：实际上也是框架调用了activity的findViewById()方法拿到id对应的控件，再调用控件的setOnClickListener()设置控件的点击事件，在这个点击事件里通过反射调用Activity中被ClickView注解的sayHello()方法而已。

下面就来动手实现它吧：

public class ViewUtil {
+
+	public static void inject(final Activity activity) {
+		// 拿到Activity的class对象
+        Class clazz = activity.getClass();
+
+        // 遍历属性
+        Field[] fields = clazz.getDeclaredFields();
+        for (Field field : fields) {
+			// 找到有BindView注解的属性
+            BindView bindView = field.getAnnotation(BindView.class);
+            if (bindView != null) {
+                try {
+					// 让属性可被访问（如果属性使用final和jprivate，则必须使其可访问，否则以下操作会报错）
+					field.setAccessible(true);
+					// 通过id获取到View，再对属性赋值
+                    field.set(activity, activity.findViewById(bindView.value()));
+                } catch (IllegalAccessException e) {
+                    e.printStackTrace();
+                }
+            }
+        }
+
+        // 遍历方法
+        Method[] methods = clazz.getDeclaredMethods();
+        for (final Method method : methods) {
+			// 找到有ClickView注解的方法
+            ClickView clickView = method.getAnnotation(ClickView.class);
+            if (clickView != null) {
+				// 通过id获取到View，再对view设置点击事件
+                activity.findViewById(clickView.value()).setOnClickListener(new View.OnClickListener() {
+                    @Override
+                    public void onClick(View v) {
+                        try {
+                            method.setAccessible(true);
+                            // 调用这个被ClickView注解的方法
+                            method.invoke(activity);
+                        } catch (IllegalAccessException e) {
+                            e.printStackTrace();
+                        } catch (InvocationTargetException e) {
+                            e.printStackTrace();
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+

# 3、试试

功能既已实现，下来就来试试看，是否真的有效，在原先代码的onCreate()方法中加上ViewUtil.inject(this)：

public class MainActivity extends AppCompatActivity {
+
+    @BindView(R.id.btn_hello)
+    Button mBtnHello;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_main);
+        ViewUtil.inject(this);
+    }
+
+    @ClickView(R.id.btn_hello)
+    public void sayHello() {
+        Toast.makeText(getApplicationContext(), "hello", Toast.LENGTH_SHORT).show();
+    }
+}
+

如果控件注入成功，则当点击控件时，会吐司"hello"。

# 三、拓展

上面的测试很成功啊，不过，这个框架目前只能给Activity使用，而ButterKnife可不只如此，不管Activity还是Fragment都能通吃，所以，我们这个框架也要适用于Fragment。

# 1、Activity与Fragment获取控件的不同

不管是控件注入还是事件绑定，都离不开最初始的一点，那就是控件的获取，即findViewById()。Activity获取控件只需要调用自己的findViewById()方法即可，但Fragment可不是这样，先来看看Fragment是如何设置布局的：

public class MyFragment extends Fragment {
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+        if (mRootView == null) {
+            mRootView = inflater.inflate(R.layout.fragment_my, null, false);
+        }
+        return mRootView;
+    }
+}
+

之所以Activity可以调用自己的findViewById()方法来获取控件，是因为Activity本身就是布局，而Fragment则不是这样的，Fragment的布局是它自己的一个View（mRootView），所以要获取Fragment中的控件，就必须调用mRootView的findViewById()方法来获取。

# 2、代码抽取

回顾ViewUtil的inject(Activity activity)方法，其实这个activity参数在这个方法中是担任两个角色的，一个是类（容器），另一个是布局。当作为容器这个角色时，是为了使用反射获得其中的字段和方法并赋值或执行。而作为布局这个角色时，是为了通过id获取布局控件（findViewById）。再看看Fragment，是不是有点端倪了呢？Fragment就是容器角色，而它的mRootView则是布局角色，所以，inject()的方法体可以这么抽：

private static Context context;
+private static void injectReal(final Object container, Object rootView) {
+    if (container instanceof Activity) {
+        context = (Activity) container;
+    } else if (container instanceof Fragment) {
+        context = ((Fragment) container).getActivity();
+    } else if (container instanceof android.app.Fragment) {
+        context = ((android.app.Fragment) container).getActivity();
+    }
+
+    Class clazz = container.getClass();
+    // 遍历属性
+    Field[] fields = clazz.getDeclaredFields();
+    for (Field field : fields) {
+        BindView bindView = field.getAnnotation(BindView.class);
+        if (bindView != null) {
+            try {
+                field.setAccessible(true);
+                field.set(container, findViewById(rootView, bindView.value()));
+            } catch (IllegalAccessException e) {
+                e.printStackTrace();
+            }
+        }
+    }
+
+    // 遍历方法
+    Method[] methods = clazz.getDeclaredMethods();
+    for (final Method method : methods) {
+        ClickView clickView = method.getAnnotation(ClickView.class);
+        if (clickView != null) {
+            findViewById(rootView, clickView.value()).setOnClickListener(new View.OnClickListener() {
+                @Override
+                public void onClick(View v) {
+                    try {                            
+                        method.setAccessible(true);
+                        method.invoke(container);
+                    } catch (IllegalAccessException e) {
+                        e.printStackTrace();
+                    } catch (InvocationTargetException e) {
+                        e.printStackTrace();
+                    }
+                }
+            });
+        }
+    }
+}
+
+private static View findViewById(Object layout, int resId) {
+    if (layout instanceof Activity) {
+        return ((Activity) layout).findViewById(resId);
+    } else if (layout instanceof View) {
+        return ((View) layout).findViewById(resId);
+    }
+    return null;
+}
+

如此抽取之后，Activity与Fragment对应的inject()方法就可以共同使用这个injectReal()方法了：

// Activity
+public static void inject(Activity activity) {
+    injectReal(activity, activity);
+}
+
+// v4 Fragment
+public static void inject(Fragment container, View rootView) {
+    injectReal(container, rootView);
+}
+
+// app Fragment
+public static void inject(android.app.Fragment container, View rootView) {
+    injectReal(container, rootView);
+}
+

相当清晰，而且是可以成功的，这里就不测试了。

# 最后贴下Demo地址

https://github.com/GitLqr/IocDemo (opens new window)

+ +
+
#注解#IoC
手撸一个简易Android数据库框架
Gradle入门系列(一) - groovy基础语法

+ ← + Gradle入门系列(一) - groovy基础语法→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/6caa6f/index.html b/pages/6caa6f/index.html new file mode 100644 index 000000000..3dfe231ea --- /dev/null +++ b/pages/6caa6f/index.html @@ -0,0 +1,181 @@ + + + + + + Flutter - 引擎调试（iOS篇）🛠 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-03-12
目录

Flutter - 引擎调试（iOS篇）🛠

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、depot_tools

depot_tools (opens new window) 是调试 Flutter 引擎的必备工具包，包含了 gclient、gn 和 ninja 等工具，这些在下面会用到！

拉取 depot_tools 到本地，我一般是放到 ~/developer/ 下

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
+

将 depot_tools 的路径补充到 PATH

$ export PATH=/path/to/depot_tools:$PATH
+
+# 如: export PATH=~/developer/depot_tools:$PATH
+

# 二、配置.gclient

创建 engine 目录，且终端进入到该目录，生成并配置 .gclient 文件

➜  ~ cd /Users/lxf/Desktop/LXF/engine
+➜  engine touch .gclient
+➜  engine vim .gclient
+

配置内容:

solutions = [
+  {
+    "managed": False,
+    "name": "src/flutter",
+    "url": "git@github.com:flutter/engine.git@1837b5be5f0f1376a1ccf383950e83a80177fb4e",
+    "custom_deps": {},
+    "deps_file": "DEPS",
+    "safesync_url": "",
+  },
+]
+

如果你是仅调试，那链接可以用 flutter 的，但如果你想后面提 PR，则需要使用自己 fork 后的链接，如：git@github.com:LinXunFeng/engine.git

引擎 git 地址后面携带的 commit id 最好与当前 Flutter 所使用的引擎版本保持一致，可以通过如下命令获取

flutter --version
+

输出:

Flutter 3.7.7 • channel stable • 
+...
+Engine • revision 1837b5be5f
+...
+

或者取如下文件里的值

flutter/bin/internal/engine.version
+
+# 1837b5be5f0f1376a1ccf383950e83a80177fb4e
+

# 三、拉取源码

使用终端，进行到 .gclient 所在目录，即上面创建的 engine 目录，执行如下命令

gclient sync
+

注：gclient 命令来自于 depot_tools

然后坐等完成即可，如果失败了就反复执行 gclient sync 直到成功，大概近10个G

➜  engine gclient sync
+Updating depot_tools...
+using /var/folders/36/n74_k53x5h5fz70gkd3jr5p00000gn/T/goma_lxf as tmpdir
+INFO: creating cache dir (/var/folders/36/n74_k53x5h5fz70gkd3jr5p00000gn/T/goma_lxf/goma_cache).
+compiler_proxy is not running
+
+________ running 'git -c core.deltaBaseCacheLimit=2g clone --no-checkout --progress git@github.com:flutter/engine.git /Users/lxf/Desktop/LXF/engine/src/_gclient_flutter_t0dh3d3h' in '/Users/lxf/Desktop/LXF/engine'
+Cloning into '/Users/lxf/Desktop/LXF/engine/src/_gclient_flutter_t0dh3d3h'...
+remote: Enumerating objects: 326233, done.
+remote: Counting objects: 100% (42/42), done.
+remote: Compressing objects: 100% (39/39), done.
+remote: Total 326233 (delta 11), reused 8 (delta 2), pack-reused 326191
+Receiving objects: 100% (326233/326233), 394.55 MiB | 3.88 MiB/s, done.
+Resolving deltas: 100% (242690/242690), done.
+30>WARNING: subprocess '"git" "-c" "core.deltaBaseCacheLimit=2g" "fetch" "origin" "d40d15e994ed60d32bcfc9ab87004dfb028dfbd6" "--no-tags"' in /Users/lxf/Desktop/LXF/engine/src/third_party/harfbuzz failed; will retry after a short nap...
+Syncing projects: 100% (134/134), done.
+Hook 'python3 src/flutter/tools/pub_get_offline.py' took 19.13 secs
+Running hooks: 100% (11/11), done.
+➜  engine
+

拉取完成后你可以进入 src/flutter 查看当前下载下来的 engine 的 commit id

➜  cd /Users/lxf/Desktop/LXF/engine/src/flutter
+➜  flutter git:(1837b5be5f)
+

如果你的终端没有显示 git:(commit id)，那可以使用如下命令进行查看

git rev-parse HEAD
+
+# 1837b5be5f0f1376a1ccf383950e83a80177fb4e
+

# 四、编译

进入 tools 目录，执行几条 gn 命令

➜  cd engine/src/flutter/tools
+

生成 iOS 设备端可执行文件所需的构建文件

➜  tools git:(1837b5be5f) ./gn --ios --unoptimized
+
+GOMA usage was specified but can't be found, falling back to local builds. Set the GOMA_DIR environment variable to fix GOMA.
+Generating GN files in: out/ios_debug_unopt
+Generating Xcode projects took 211ms
+Generating compile_commands took 55ms
+Done. Made 801 targets from 274 files in 6165ms
+

如果你想调试模拟器，则加上 --simulator

gn --ios --simulator --unoptimized
+

生成主机端可执行文件所需的构建文件

➜  tools git:(1837b5be5f) ./gn --unoptimized
+
+GOMA usage was specified but can't be found, falling back to local builds. Set the GOMA_DIR environment variable to fix GOMA.
+Using prebuilt Dart SDK binary. If you are editing Dart sources and wish to compile the Dart SDK, set `--no-prebuilt-dart-sdk`.
+Generating GN files in: out/host_debug_unopt
+Generating Xcode projects took 273ms
+Generating compile_commands took 70ms
+Done. Made 1110 targets from 340 files in 46800ms
+

执行完成之后，在 engine/src/out 目录下就会多出相应端的构建文件目录

接下来使用 Ninja 进行编译

ninja -C host_debug_unopt && ninja -C ios_debug_unopt
+

如果你是用 M1/M2 电脑去编译旧引擎源码，可能会在编译 ios_debug_unopt 时遇到如下错误

ninja: Entering directory `host_debug_unopt'
+ninja: no work to do.
+ninja: Entering directory `ios_debug_unopt'
+[13/369] ACTION //flutter/lib/snapshot:create_arm_gen_snapshot(//build/toolchain/mac:ios_clang_arm)
+FAILED: clang_x64/gen_snapshot_arm64
+python3 ../../flutter/sky/tools/create_macos_gen_snapshots.py --dst /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt/clang_x64 --arm64-out-dir /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt
+Cannot find gen_snapshot at /Users/lxf/Desktop/LXF/engine/src/out/ios_debug_unopt/clang_x64/gen_snapshot
+[16/369] LINK clang_arm64/impellerc
+ninja: build stopped: subcommand failed.
+

这时你只需要进入到 engine/src/out/ios_debug_unopt 目录下，将 clang_arm64 目录中的 gen_snapshot 拷贝到 clang_x64，然后再继续执行 ninja -C ios_debug_unopt 即可。

这里强调一下：

  • 如果你修改了引擎的源代码，需要重新执行相应的 ninja 命令，如调试引擎时我们会修改代码，如果不执行 ninja 命令，你会发现断点修改的代码其它是旧代码！
  • 如果是新增或删除文件，则需要先执行 gn 命令，再执行 ninja 命令。
  • 我建议直接 gn 和 ninja 命令一起执行，不用管什么情况，脚本会自己检查是否有文件变更，以及是否需要重新生成相应的文件的。

# 五、调试

打开你的Flutter 项目，IDE 以 VSCode 为例，添加 --local-engine-src-path 和 --local-engine 两个参数，完整配置如下

{
+  "name": "flutter_demo",
+  "request": "launch",
+  "type": "dart",
+  "args": [
+    "--local-engine-src-path",
+    "/Users/lxf/Desktop/LXF/engine/src",
+    "--local-engine",
+    "ios_debug_unopt"
+  ]
+},
+
参数 值
--local-engine-src-path 固定为引擎的 src 路径
--local-engine 真机: ios_debug_unopt
模拟器: ios_debug_sim_unopt

按 F5 跑一遍就可以使用指定引擎运行 Flutter 项目了。

细心的你可能会发现在 flutter_demo/ios/Flutter/Generated.xcconfig 配置文件内新增相应的两个环境变量

...
+FLUTTER_ENGINE=/Users/lxf/Desktop/LXF/engine/src
+LOCAL_ENGINE=ios_debug_unopt
+...
+

如果我们要调试引擎代码，请打开你的 Runner.xcworkspace，然后将 flutter_engine 拖入项目

找到 FlutterViewController.mm 给 touchesBegan 打个断点，再运行项目，点击屏幕就会进入到断点处，现在就可以开始愉快的调试 flutter_engine 了

如果你的断点不生效，那请先检查 Generated.xcconfig 里的 FLUTTER_ENGINE 和 LOCAL_ENGINE 变量。

到这里，引擎的编译调试就介绍完毕了。

下一篇，我们来详细说说怎么给 Flutter 引擎提交 PR 🤠

# 六、资料

+ +
+
#Dart#Flutter
Flutter - 探索run命令到底做了什么 🤔
Flutter - 引擎调试bug到提交PR实战 🐞

+ ← + Flutter - 引擎调试bug到提交PR实战 🐞→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/6d35fc/index.html b/pages/6d35fc/index.html new file mode 100644 index 000000000..a0f363beb --- /dev/null +++ b/pages/6d35fc/index.html @@ -0,0 +1,331 @@ + + + + + + 热修复 - Tinker多渠道加固配置 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-24
目录

热修复 - Tinker多渠道加固配置

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、问题

腾讯的热修复方案 Tinker 为加固应用提供了支持，需要在 gradle 脚本中，通过 isProtectedApp 配置当前的基准包（base apk）是否为加固 apk ，而这个配置是全局性的，Tinker 没有为多渠道提供单独的配置，这意味着，如果你的 app 工程在各个渠道不是全部统一使用加固或非加固的话，那么在为线上 apk 制作补丁包时，你不得不总要考虑是否需要修改 isProtectedApp 的值。为了提升工作效率，确保产出的补丁准确无误，非常有必要固化各渠道 isProtectedApp 的值。

# 二、摸索

先来初步认识一下 isProtectedApp ，它的作用是什么？下面是官方 demo tinker-sample-android 中对 isProtectedApp 的注释：

tinkerPatch {
+    buildConfig {
+        ...
+        /**
+         * optional, default 'false'
+         * Whether tinker should treat the base apk as the one being protected by app
+         * protection tools.
+         * If this attribute is true, the generated patch package will contain a
+         * dex including all changed classes instead of any dexdiff patch-info files.
+         */
+        isProtectedApp = false // 是否使用加固模式，仅仅将变更的类合成补丁。注意，这种模式仅仅可以用于加固应用中。
+    }
+    ...
+}
+

代码出自：https://github.com/Tencent/tinker/blob/master/tinker-sample-android/app/build.gradle (opens new window)

翻译过来就是说，isProtectedApp 的值是可选的，默认为 false；作用是让 Tinker 知道是否应该将基准包（base apk）视为被加固工具加固过的受保护的 apk；如果值为 true ，则生成的补丁包将是 一个包含所有变更过的 class 的 dex 文件，而不是那些 dexdiff 补丁信息文件。简而言之，就是生成的补丁包文件会有不同。

接下来是要搞清楚 isProtectedApp 在 Tinker 内部是怎么用的，为了搞清这个问题，我 clone 了一份 Tinker 源码，研究了一下补丁的生成过程，下面是关键流程的分析与结论。

# 1、TinkerPatchPlugin

我们在生成补丁时，需要在 Gradle 面板中执行 tinkerPatchXXX 任务（比如：tinkerPatchRelease、tinkerPatchXiaomiRelease），然后等待 tinker 帮我们生成对应渠道的补丁包即可。该功能由 Tinker 开发的 Gradle 插件提供，对应的插件类就是 TinkerPatchPlugin ，源码如下：

class TinkerPatchPlugin implements Plugin<Project> {
+
+    @Override
+    public void apply(Project project) {
+        ...
+        mProject.afterEvaluate {
+        ...
+        android.applicationVariants.all { ApkVariant variant ->
+            ...
+            // 创建 tinkerPatchXXX 任务
+            TinkerPatchSchemaTask tinkerPatchBuildTask = mProject.tasks.create("tinkerPatch${capitalizedVariantName}", TinkerPatchSchemaTask)
+            tinkerPatchBuildTask.signConfig = variant.signingConfig
+
+            variant.outputs.each { variantOutput ->
+                // setPatchNewApkPath() 内部有这么一段代码，作用是让 tinkerPatchXXX 任务 依赖于 assembleXXX 任务：
+                // tinkerPatchBuildTask.dependsOn Compatibilities.getAssembleTask(mProject, variant)
+                setPatchNewApkPath(configuration, variantOutput, variant, tinkerPatchBuildTask)
+                setPatchOutputFolder(configuration, variantOutput, variant, tinkerPatchBuildTask)
+                ...
+            }
+        }
+    }
+}
+

从上面的源码中，可以得知以下几点：

  • tinkerPatchXXX 任务的具体实现在 TinkerPatchSchemaTask 类中。
  • tinkerPatchXXX 任务依赖 assembleXXX 任务，所以每次打补丁时，都会重新 build 一次。

# 2、TinkerPatchSchemaTask

来看看 tinkerPatchXXX 任务的具体实现类 TinkerPatchSchemaTask：

public class TinkerPatchSchemaTask extends DefaultTask {
+    @Internal
+    TinkerPatchExtension configuration
+
+    TinkerPatchSchemaTask() {
+        ...
+        configuration = project.tinkerPatch
+    }
+
+    @TaskAction
+    def tinkerPatch() {
+        InputParam.Builder builder = new InputParam.Builder()
+        ...
+        for (def i = 0; i < newApks.size(); ++i) {
+            ...
+            builder.setOldApk(oldApk.getAbsolutePath())
+                    .setNewApk(newApk.getAbsolutePath())
+                    ...
+                    .setIsProtectedApp(configuration.buildConfig.isProtectedApp)
+            InputParam inputParam = builder.create()
+            Runner.gradleRun(inputParam)
+            ...
+        }
+    }
+}
+

在 Gradle 中，一般任务（Task）会有继承自 DefaultTask，被 @TaskAction 修饰的方法就是任务的执行逻辑。TinkerPatchSchemaTask 中被 @TaskAction 修饰的方法是 tinkerPatch() ，它就是 tinkerPatchXXX 任务的具体实现。在该方法中，我们看到了 isProtectedApp 被赋值到 InputParam 实例中，然后传递给 Runner.gradleRun(inputParam)。

# 3、Runner

跟进到 Runner 类中，可以看到 inputParam 最终会被 Runner 实例的 mConfig 持有：

public class Runner {
+    protected Configuration mConfig;
+
+    public static void gradleRun(InputParam inputParam) {
+        Runner m = new Runner(true);
+        m.run(inputParam);
+    }
+
+    private void run(InputParam inputParam) {
+        loadConfigFromGradle(inputParam);
+        tinkerPatch();
+    }
+
+    private void loadConfigFromGradle(InputParam inputParam) {
+        ...
+        mConfig = new Configuration(inputParam);
+    }
+}
+

而 Runner.gradleRun(inputParam) 通过 run() 方法最终会触发到 tinkerPatch() 方法：

public class Runner {
+	protected Configuration mConfig;
+	...
+	protected void tinkerPatch() {
+        Logger.d("-----------------------Tinker patch begin-----------------------");
+
+        Logger.d(mConfig.toString());
+        try {
+            //gen patch
+            ApkDecoder decoder = new ApkDecoder(mConfig);
+            decoder.onAllPatchesStart();
+            decoder.patch(mConfig.mOldApkFile, mConfig.mNewApkFile);
+            decoder.onAllPatchesEnd();
+
+            //gen meta file and version file
+            PatchInfo info = new PatchInfo(mConfig);
+            info.gen();
+
+            //build patch
+            PatchBuilder builder = new PatchBuilder(mConfig);
+            builder.buildPatch();
+
+        } catch (Throwable e) {
+            goToError(e, ERRNO_USAGE);
+        }
+
+        Logger.d("Tinker patch done, total time cost: %fs", diffTimeFromBegin());
+        Logger.d("Tinker patch done, you can go to file to find the output %s", mConfig.mOutFolder);
+        Logger.d("-----------------------Tinker patch end-------------------------");
+    }
+}
+

这个 tinkerPatch() 就是 Tinker 生成补丁包的核心方法了，分为 3 大部分：

  • ApkDecoder：管理各 Decoder 协同生成补丁文件（manifestDecoder、dexPatchDecoder、soPatchDecoder、resPatchDecoder）
  • PatchInfo.gen()：生成 meta 文件和 version 文件
  • PatchBuilder.buildPatch()：将上面的 补丁文件 和 信息文件 打包成补丁包、签名

而用到 isProtectedApp 的地方有两处，分别在 ApkDecoder、PatchInfo。

# 4、UniqueDexDiffDecoder & DexDiffDecoder

ApkDecoder 管理了各个 Decoder，其中，dexPatchDecoder 是 UniqueDexDiffDecoder 实例：

public class ApkDecoder extends BaseDecoder {
+    private final UniqueDexDiffDecoder dexPatchDecoder;
+
+    public ApkDecoder(Configuration config) throws IOException {
+        dexPatchDecoder = new UniqueDexDiffDecoder(config, prePath + TypedValue.DEX_META_FILE, TypedValue.DEX_LOG_FILE);
+        ...
+    }
+}
+
+public class UniqueDexDiffDecoder extends DexDiffDecoder {
+    ...
+}
+

而 UniqueDexDiffDecoder 继承自 DexDiffDecoder，dex 补丁生成的核心逻辑在 DexDiffDecoder 中：

public class DexDiffDecoder extends BaseDecoder {
+    @Override
+    public void onAllPatchesEnd() throws Exception {
+        ...
+        if (config.mIsProtectedApp) {
+            // 对于加固app，则将变更的类以及相关信息写入到 patch dex
+            generateChangedClassesDexFile();
+        } else {
+            // 对于非加固app，则使用 dexdiff 算法生成 patch dex，补丁包更小
+            generatePatchInfoFile();
+        }
+        ...
+    }
+}
+

在 DexDiffDecoder 的 onAllPatchesEnd() 方法中使用到了 isProtectedApp，用于分别对加固和非加固的基准包（base apk）生成 dex 补丁文件，不过，generateChangedClassesDexFile() 与 generatePatchInfoFile() 具体实现细节这里不展开，有兴趣的可以自己研究下，两者的区别看上述代码注释即可，这就是官方对 isProtectedApp 解释对应到的具体代码位置。

# 5、PatchInfo & PatchInfoGen

最后来看看另一处使用 isProtectedApp 的地方，PatchInfo 是 PatchInfoGen 的包装类，PatchInfo.gen() 方法最终调用的 PatchInfoGen.gen()：

public class PatchInfo {
+
+    private final PatchInfoGen infoGen;
+
+    public PatchInfo(Configuration config) {
+        infoGen = new PatchInfoGen(config);
+    }
+
+    /**
+     * gen the meta file txt
+     * such as rev, version ...
+     * file version, hotpatch version class
+     */
+    public void gen() throws Exception {
+        infoGen.gen();
+    }
+}
+
+public class PatchInfoGen {
+	...
+    public void gen() throws Exception {
+        addTinkerID();
+        addProtectedAppFlag();
+        ...
+    }
+
+    private void addProtectedAppFlag() {
+        // If user happens to specify a value with this key, just override it for logic correctness.
+        config.mPackageFields.put(TypedValue.PKGMETA_KEY_IS_PROTECTED_APP, config.mIsProtectedApp ? "1" : "0");
+    }
+}
+

在 PatchInfoGen.gen() 方法中调用了 addProtectedAppFlag() 方法，将 boolean 类型的 isProtectedApp 转换为数字 0 或 1，最终会保存到 package_meta.txt 文件中。

# 三、解决方案

通过上面的源码分析，可以知道在生成补丁时，isProtectedApp 的两个作用：

  • 供 DexDiffDecoder 判断具体的 dex 补丁生成方式
  • 供 PatchInfoGen 确定 is_protected_app 的值，最后记录在 package_meta.txt 文件中

另外，在上述流程中，可以发现各环节使用的 isProtectedApp 的值，归根到底均来源于一处，即 TinkerPatchSchemaTask 类中的 configuration 属性，而 configuration 又是 project.tinkerPatch 的引用：

public class TinkerPatchSchemaTask extends DefaultTask {
+    @Internal
+    TinkerPatchExtension configuration
+
+    TinkerPatchSchemaTask() {
+        ...
+        configuration = project.tinkerPatch
+    }
+}
+

别忘了，TinkerPatchSchemaTask 对应的是 tinkerPatchXXX 任务，如果我们能在 tinkerPatchXXX 任务执行前，篡改掉 project.tinkerPatch 中 isProtectedApp 的值，那么后续各环节中所使用的就是被篡改后的 isProtectedApp 了。为了实现该功能，需要用到 Gradle 提供的 Task 相关的几个方法：

  • tasks.findByName()：通过任务名字精确获取到对应的 task。
  • task.doFirst{}：在 doFirst{} 闭包中编写的代码逻辑，会被放到 task 的执行阶段的最前面。
  • afterEvaluate{}：配置阶段完成后的监听回调。

结合上述几个 api，最终的 Gradle 代码如下：

apply from: 'configure/script/tinkerconfig.gradle' // Tinker 的 gradle 配置，同官方Demo
+
+// 注意：以下代码必须放在 Tinker 配置之后，否则 tasks.findByName 找不到 tinkerPatchXXX 任务
+afterEvaluate {
+    android.applicationVariants.all { variant ->
+        // println "tinkerPatchTask ----> ${tasks.findByName("tinkerPatch${variant.name.capitalize()}")}"
+        tasks.findByName("tinkerPatch${variant.name.capitalize()}").doFirst {
+
+            // 打印原本的 project.tinkerPatch.buildConfig 信息
+            println "original project.tinkerPatch --> ${project.tinkerPatch.buildConfig}"
+
+            // 渠道区分，xiaomi渠道的 base apk 会加固，其他渠道不加固
+            def isProtectedApp
+            if (variant.name.startsWith("xiaomi")) {
+                isProtectedApp = true
+            } else {
+                isProtectedApp = false
+            }
+
+            println "change ${variant.name}'s `isProtectedApp` --> ${isProtectedApp}"
+            project.tinkerPatch.buildConfig.isProtectedApp = isProtectedApp
+        }
+    }
+}
+

# 四、方案优化

上述代码中，isProtectedApp 的赋值部分属于硬编码，还是有优化的空间的，你可以使用函数，结合闭包组合的方式，将 isProtectedApp 的赋值提前到 productFlavors 配置阶段，比如：

// build.gradle
+apply from: 'configure/script/basic.gradle'
+android {
+    productFlavors {
+        xiaomi profileCommon(
+            isProtectedApp: true
+        ) >> {
+            buildConfigField "String", "USER_ID", '"GitLqr"'
+        }
+
+        googlePlay profileCommon(
+            isProtectedApp: false
+        ) >> {
+            buildConfigField "String", "USER_ID", '"CharyLin"'
+        }
+    }
+}
+

这样效果是不是更加直观了呢？下面是 basic.gradle 脚本中的代码：

// basic.gradle
+project.ext.variantIsProtectedAppMap = [:]
+project.ext.profileCommon = { profiles = [:] ->
+    return {
+        def flavorName = delegate.name
+        android.buildTypes.forEach {
+            def variant = flavorName + it.name.capitalize() // xiaomiRelease
+            project.ext.variantIsProtectedAppMap[variant] = profiles.getOrDefault('isProtectedApp', false)
+        }
+    }
+}
+
+apply from: 'configure/script/tinkerconfig.gradle'
+afterEvaluate {
+    android.applicationVariants.all { variant ->
+        // println "tinkerPatchTask ----> ${tasks.findByName("tinkerPatch${variant.name.capitalize()}")}"
+        tasks.findByName("tinkerPatch${variant.name.capitalize()}").doFirst {
+            println "original project.tinkerPatch --> ${project.tinkerPatch.buildConfig}"
+            def isProtectedApp = variantIsProtectedAppMap[variant.name]
+            println "change ${variant.name}'s `isProtectedApp` --> ${isProtectedApp}"
+            project.tinkerPatch.buildConfig.isProtectedApp = isProtectedApp
+        }
+    }
+}
+

至此，Tinker 的多渠道加固配置问题就解决了。如果你对 Gradle 的语法、插件、任务等概念不熟悉，可以阅读下列文章来学习 Gradle：

+ +
+
#热修复#Tinker#加固
热修复 - Bugly让热修复变得如此简单
性能优化 - 内存泄漏（1）入门篇

+ ← + 性能优化 - 内存泄漏（1）入门篇→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/6f1cc2/index.html b/pages/6f1cc2/index.html new file mode 100644 index 000000000..108ec3c1d --- /dev/null +++ b/pages/6f1cc2/index.html @@ -0,0 +1,144 @@ + + + + + + AndroidNDK - 编译 openssl | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-10-25
目录

AndroidNDK - 编译 openssl

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

如果你想快速在项目中使用上 openssl，可以使用网上其他开发者提供好的预编译库：

以上的预编译库可能最低只支持 API 21（即 Android 5），如果你的项目需要支持 API 19（Android 4.4.x）及以下的话，就得自己编译 openssl 了，本篇主要记录本人编译 openssl 1.1.1 过程以及遇到的问题，可能对你有所帮助。

# 二、实战

首先到 openssl 官网或官方仓库中，找到你需要的版本（主要分为 3.x 和 1.x），下载链接如下：

注意：建议不要直接 clone github 仓库（仓库上的最新代码可能存在 bug），要使用官方 release 出来的归档。

这里我就使用 1.x 中最新的的 1.1.1w 为例，点击 openssl-1.1.1w.tar.gz 下载后解压。

因为 openssl 官方目前没有提供 cmake 编译脚本，还是采用传统的 make 命令编译，所以我们需要编写一个 shell 脚本，命名为 build_openssl.sh，与 openssl-1.1.1w 文件夹同级。

build_openssl.sh 文件内容如下：

#!/bin/bash
+set -e
+# GitLqr：执行 pwd 命令获取当前脚本所在目录路径，并赋值给 CRTDIR 变量
+CRTDIR=$(pwd)
+# GitLqr：拼接 openssl 源码目录路径
+SRC_DIR=$CRTDIR/openssl-1.1.1w
+
+# GitLqr：根据你当前的操作系统，使用对应的 NDK_PLATFORM 变量
+# NDK_PLATFORM=darwin-x86_64
+# NDK_PLATFORM=linux-x86_64
+NDK_PLATFORM=windows-x86_64
+
+# GitLqr：修改为你的 ndk 目录路径
+export ANDROID_NDK_HOME=/c/Users/CharyLin/AppData/Local/Android/Sdk/ndk/21.1.6352462
+# GitLqr：高版本 NDK 不再包含 gcc, 因此需要将 NDK 内置的 clang 加到入 PATH 环境变量中
+export PATH=$ANDROID_NDK_HOME/toolchains/llvm/prebuilt/$NDK_PLATFORM/bin:$PATH
+# GitLqr：编译 arm64 架构需要用到脚本
+export PATH=$ANDROID_NDK_HOME/toolchains/aarch64-linux-android-4.9/prebuilt/$NDK_PLATFORM/bin:$PATH
+# GitLqr：编译 arm 架构需要用到脚本
+export PATH=$ANDROID_NDK_HOME/toolchains/arm-linux-androideabi-4.9/prebuilt/$NDK_PLATFORM/bin:$PATH
+
+cd $SRC_DIR
+
+function build_onearch
+{
+	echo ">> configure $ARCH"
+
+	# GitLqr：指定最低支持的 api 和 cpu 架构
+	./Configure $ARCH -D__ANDROID_API__=$API
+	# GitLqr：只生成 .a 静态库文件
+	# ./Configure $ARCH -D__ANDROID_API__=$API no-shared
+
+	echo "<< configure $ARCH"
+	make clean
+	make
+	make install
+}
+
+#ARCH=android-arm64
+#API=21
+#build_onearch
+
+ARCH=android-arm
+API=19
+build_onearch
+

注意：Windows 系统下，文件路径是带有盘符的，例如：C:/xxx，而 PATH 中多个环境变量路径又刚好使用冒号 : 分割，为了避免不必要的麻烦，建议修改为 /c/xxx。

脚本内容不难理解，就是进入到 openssl 源码目录，执行 Configure 进行一些参数配置，然后执行 make 编译而已，请根据自己的情况，修改脚本中的变量值（例如：NDK_PLATFORM、ANDROID_NDK_HOME）。脚本中 ARCH 变量的值，需要根据当前项目情况编写，具体有哪些值，可以通过执行 ./Configure 查看，例如 Android 平台支持的架构有：

android-arm android-arm64 android-armeabi android-mips android-mips64
+android-x86 android-x86_64 android64 android64-aarch64 android64-mips64
+android64-x86_64
+

之后，运行 build_openssl.sh，等待编译完成之后（每编译一个架构大约需要 10 分钟），就可以在 openssl-1.1.1w 目录下找到编译产物了：

  • libssl.so / libssl.a
  • libcrypto.so / libcrypto.a

# 三、踩坑

因为本人使用的是 Windows 系统，不像 Mac 或 Linux 那样，天然自带各种 shell 命令，所以在执行 build_openssl.sh 文件时遇到了一些阻碍，这里将踩过的坑记录一下。想要在 Windows 下执行 .sh 文件，需要用到 MinGW 环境，因为有安装过 Git，所以可以在 Git Bash 中执行，直接在文件管理器中右键菜单中，点击 Open Git Bash here 即可打开 Git Bash 容器，并自动 cd 到了当前目录：

注：如果右键菜单中没有 Open Git Bash here 选项，可以去开始菜单搜索 Git Bash 运行，然后手动 cd 到 .sh 文件所在目录。

# 1、make 错误：make: command not found

在 Git Bash 窗口中执行 ./build_openssl.sh，报错：

./build_openssl.sh: line 32: make: command not found
+

这是因为 Git Bash 默认的 mingw64 环境中没有 make 工具，可以到如下地址，下载 make-4.4.1-without-guile-w32-bin.zip 文件。

将 make-4.4.1-without-guile-w32-bin.zip 压缩包中的所有文件拷贝到 \Git\mingw64 目录下，合并文件夹即可：

# 2、perl 错误：/usr/bin/env perl does work as command but not in perl script

在 Git Bash 窗口中执行 ./build_openssl.sh，报错：

/usr/bin/env perl does work as command but not in perl script
+

其实 Git Bash 是支持 perl 的，但是个别版本的 Git Bash 可能不支持 #!/usr/bin/env perl 命令，可以改用 #!/usr/bin/perl 来使用 perl。在 openssl-1.1.1w 目录找到 Configure 文件，将第一行的 #!/usr/bin/env perl 删除，改为：

#!/usr/bin/perl
+

# 3、perl 错误：Can't locate Pod/Usage.pm in @INC

在 Git Bash 窗口中执行 ./build_openssl.sh，报错：

Can't locate Pod/Usage.pm in @INC (you may need to install the Pod::Usage module) (@INC contains: . /usr/lib/perl5/site_perl /usr/share/perl5/site_perl /usr/lib/perl5/vendor_perl /usr/share/perl5/vendor_perl /usr/lib/perl5/core_perl /usr/share/perl5/core_perl) at configdata.pm line 15251.
+BEGIN failed--compilation aborted at configdata.pm line 15251.
+Compilation failed in require.
+BEGIN failed--compilation aborted.
+

这是因为 Git Bash 默认自带的 perl 工具被精简过，缺少了一些文件，比如这里就找不到 Pod/Usage.pm，所以解决该问题也简单，补全这些缺少的文件即可，到 strawberryperl 官网下载 strawberry-perl-xx.zip 文件：

然后打开 strawberry-perl-xx.zip 压缩包，找到 \perl\lib\ 目录下的 Pod 文件夹，将其拷贝到本机的 \Git\usr\lib\perl5\vendor_perl 目录下：

注：如果本地已经有 Pod 目录，那么合并即可。

经过上述几个填坑步骤之后，在 Git Bash 窗口中就可以顺利执行完 build_openssl.sh 了。😩😩😩

+ +
+
#NDK#openssl
AndroidNDK - Cmake详解
Android音视频 - Libyuv使用实战

+ ← + Android音视频 - Libyuv使用实战→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/70f890/index.html b/pages/70f890/index.html new file mode 100644 index 000000000..0df1860b0 --- /dev/null +++ b/pages/70f890/index.html @@ -0,0 +1,92 @@ + + + + + + DesignPattern - 设计原则与设计模式初探 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-18
目录

DesignPattern - 设计原则与设计模式初探

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、设计原则

  • 设计模式是站在设计原则的基础之上的，所以在学习设计模式之前，有必要了解一下设计原则
  • 软件设计开发原则 +
    • 为了让代码有更好的重用性，可读性，可靠性，可维护性
    • 有六大原则，英文首字母拼在一起就是 SOLID（稳定的），所以也称之为 SOLID 原则

# 1、单一职责原则(Single Responsibility Principle)

  • 一个类只负责一个功能领域中的相应职责，就一个类而言，应该只有一个引起它变化的原因
  • 是实现 高内聚、低耦合 的指导方针

解释：

  • 高内聚： +
    • 尽可能类中的每个成员方法只完成一件事（最大限度的聚合）
    • 模块内部的代码，相互之间的联系越强，内聚就越高，模块的独立性就越好
  • 低耦合：减少类内部一个成员方法调用另一个成员方法，避免牵一发动全身

# 2、开闭原则(Open Closed Principle)

  • 对扩展开放，对修改关闭，在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果

# 3、里氏替换原则 LSP (Liskov Substitution Principle)

  • 任何基类可以出现的地方，子类一定可以出现
  • 在程序中尽量使用基类类型来对对象进行定义，而在运行时再确定其子类类型，用子类对象来替换父类对象

例如：javaEE 开发中，controller->service->dao，这三层之间的引用都是使用的接口或基类，实际对象类型由 spring 注入决定。

# 4、迪米特法则(Law of Demeter)

  • 最少知道原则，一个实体应当尽量少地与其他实体之间发生相互作用，使得系统功能模块相对独立
  • 类之间的耦合度越低，就越有利于复用，一个处在松耦合中的类一旦被修改，不会对关联的类造成太大涉及
  • 通过引入一个合理的第三者来降低现有对象之间的耦合度

# 5、接口隔离原则(Interface Segregation Principle)

  • 客户端不应该依赖那些它不需要的接口
  • 使用多个隔离的接口，比使用单个接口要好，降低类之间的耦合度

# 6、依赖倒转原则(Dependence Inversion Principle)

  • 是开闭原则的基础，针对接口编程，依赖于抽象而不依赖于具体
  • 高层模块不应该依赖底层模块，二者都应该依赖其抽象

# 二、什么是设计模式

设计模式是软件开发过程中面临的一般问题的解决方案，这些解决方案是众多软件开发人员经过相当长时间的试验和错误总结出来的，可以提高代码重用性，让代码更容易被他人理解，保证代码可靠性。

# 1、什么是 GOF(Gang of Four)

在 1994 年，由四位作者全称 GOF（全拼 Gang of Four）四人合著出版了一本名为 Design Patterns - Elements of Reusable Object-Oriented Software，他们所提出的设计模式主要是基于以下面向对象设计原则：

  • 对接口编程而不是对实现编程
  • 优先使用对象组合而不是继承

# 2、常见的三大设计模式分类

  • 创建型模式：提供了一种在创建对象的同时隐藏创建逻辑的方式，使得程序在判断针对某个给定实例需要创建哪些对象时更加灵活 +
    • 常用：工厂模式、抽象工厂模式、单例模式、建造者模式
    • 不常用：原型模式
  • 结构型模式：关注类和对象的组合。继承的概念被用来组合接口和定义组合对象获得新功能的定义 +
    • 常用：适配器模式、桥接模式、装饰器模式、代理模式
    • 不常用：组合模式、外观模式、享元模式
  • 行为型模式：特别关注对象之间的通信 +
    • 常用：责任链模式、迭代器模式、观察者模式、状态模式、策略模式、模板模式
    • 不常用：备忘录模式、命令模式
    • 几乎不用：访问者模式、中介者模式、解释器模式
+ +
+
#设计原则#设计模式
DesignPattern - 单例模式【创建型】

DesignPattern - 单例模式【创建型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7776d6/index.html b/pages/7776d6/index.html new file mode 100644 index 000000000..9410697cf --- /dev/null +++ b/pages/7776d6/index.html @@ -0,0 +1,382 @@ + + + + + + 多RecyclerView同步滚动 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-07-14
目录

多RecyclerView同步滚动

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

最近在做一个地产项目，其实之前做出了一版，但现在要求重做（连上架的机会都没有），很服气啊~~而现在做的项目呢，比上一版功能要求更多，其中，销控表的界面效果要求跟房产销冠APP的销控表界面差不多，先来看下房产销冠APP的销控表效果吧：

房产销冠APP的销控表效果

说说我第一次看到这个界面效果时的感觉，就一个词：amazing~ 是的，公司就我一个人做安卓开发，感觉有点压力山大，但是，不怂，静下心来分析一下就明朗多了。先说说本文核心技术重点：两个RecyclerView同步滚动。好，下面进入正文。

# 二、分析

# 1、布局分析

我认为的布局实现：将销控表分为左右两部分：左边是楼层列表，右边是单元（房间）列表。楼层列表就是一个简单的LinearLayout+TextView+RecyclerView，单元（房间）列表则有点小复杂(HorizontalScrollView、LinearLayout)+TextView+RecyclerView。为了各位看客能直观理解，我特意做了张图，请看：

其中黄色区域就是销控表的部分。

布局实现

# 2、效果分析

  1. 当左边的楼层列表上下滑动时，右边的单元（房间）列表也跟着一起滑动，单元（房间）列表上的单元编号不动。
  2. 当右边的单元（房间）列表上下滑动时，左边的楼层列表也跟着一起滑动，单元（房间）列表上的单元编号不动。
  3. 当右边的单元（房间）列表左右滑动时，单元（房间）列表上的单元编号一起左右滑动，左边的楼层列表不动。

那么，要实现1、2的效果，可以监听这两个列表的滚动，当其中一个列表滚动时，让另一个列表滚动相同的距离即可。要实现3的效果就简单了，因为HorizontalScrollView中嵌套RecyclerView并没有滚动冲突，HorizontalScrollView处理水平滑动事件，RecyclerView处理竖直滚动事件，所以暂时不用理（后面还是要做点简单处理的）。

# 三、实现

# 1、布局

上面已经分析出了布局结构，下面直接贴布局代码：

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="#f5f5f5"
+    android:orientation="vertical">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:text="销控表"
+                android:textColor="#000"
+                android:textSize="16sp"/>
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center_vertical|right"
+                android:layout_marginRight="10dp"
+                android:text="统计"
+                android:textColor="#000"
+                android:textSize="12sp"/>
+
+        </android.support.v7.widget.Toolbar>
+    </android.support.design.widget.AppBarLayout>
+
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="#fff"
+        android:gravity="center"
+        android:padding="10dp"
+        android:text="CSDN_LQR的私人后宫-项目1期-1栋"
+        android:textColor="#333"
+        android:textSize="10sp"/>
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginTop="10px"
+        android:orientation="horizontal">
+
+        <!--楼层-->
+        <LinearLayout
+            android:layout_width="60dp"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <TextView
+                android:layout_width="match_parent"
+                android:layout_height="50dp"
+                android:background="#fff"
+                android:gravity="center"
+                android:padding="10dp"
+                android:text="楼层&#x000A;单元"
+                android:textSize="12sp"/>
+
+            <android.support.v7.widget.RecyclerView
+                android:id="@+id/rv_layer"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_marginTop="1dp"/>
+
+        </LinearLayout>
+
+        <!--单元(房间)-->
+        <HorizontalScrollView
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_marginLeft="4dp"
+            android:fillViewport="true"
+            android:scrollbars="none">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical">
+
+                <TextView
+                    android:layout_width="match_parent"
+                    android:layout_height="50dp"
+                    android:background="#fff"
+                    android:gravity="center"
+                    android:padding="10dp"
+                    android:text="3"
+                    android:textSize="12sp"/>
+
+                <android.support.v7.widget.RecyclerView
+                    android:id="@+id/rv_room"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:layout_marginTop="1dp"/>
+            </LinearLayout>
+        </HorizontalScrollView>
+    </LinearLayout>
+</LinearLayout>
+

再通过列表的数据进行填充（这部分不是重点就不贴出来了），效果就出来了：

初步效果

接下来就是实现同步滚动效果了。

# 2、多RecyclerView同步滚动实现

一个大体的思路就是分别对其中一个列表设置滚动监听，当这个列表滚动时，让另一个列表也一起滚动。 +但细节上要考虑到，这种监听是双向的，A列表滚动时触发其滚动回调接口，导致B列表滚动，而此时B列表也已经设置过滚动监听，它的滚动也会触发它的滚动回调接口，导致A列表滚动，这样就形成了一个死循环。所以适当添加或移除滚动监听是本功能实现的重难点，下面直接贴出代码，请自行结合代码及注释理解。

# 1）封装一个可以自行取消监听的滚动回调接口

这样的封装使我们不用在其他地方考虑列表空闲状态时的处理，会省去很多事。

/**
+ * @创建者 CSDN_LQR
+ * @描述 实现一个RecyclerView.OnScrollListener的子类，当RecyclerView空闲时取消自身的滚动监听
+ */
+public class MyOnScrollListener extends RecyclerView.OnScrollListener {
+    @Override
+    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
+        super.onScrollStateChanged(recyclerView, newState);
+        if (newState == recyclerView.SCROLL_STATE_IDLE) {
+            recyclerView.removeOnScrollListener(this);
+        }
+    }
+}
+

# 2）为楼层列表控件设置滚动监听

以下两段代码涉及两个列表滚动同步和添加或移除滚动监听的时机，具体代码及注释我已经写得很清楚了，请仔细看：

private final RecyclerView.OnScrollListener mLayerOSL = new MyOnScrollListener() {
+    @Override
+    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
+        super.onScrolled(recyclerView, dx, dy);
+        // 当楼层列表滑动时，单元（房间）列表也滑动
+        mRvRoom.scrollBy(dx, dy);
+    }
+};
+
+/**
+ * 设置两个列表的同步滚动
+ */
+private void setSyncScrollListener() {
+	mRvLayer.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
+
+        private int mLastY;
+
+        @Override
+        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
+            // 当列表是空闲状态时
+            if (rv.getScrollState() == RecyclerView.SCROLL_STATE_IDLE) {
+                onTouchEvent(rv, e);
+            }
+            return false;
+        }
+
+        @Override
+        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
+            // 若是手指按下的动作，且另一个列表处于空闲状态
+            if (e.getAction() == MotionEvent.ACTION_DOWN && mRvRoom.getScrollState() == RecyclerView.SCROLL_STATE_IDLE) {
+                // 记录当前另一个列表的y坐标并对当前列表设置滚动监听
+                mLastY = rv.getScrollY();
+                rv.addOnScrollListener(mLayerOSL);
+            } else {
+                // 若当前列表原地抬起手指时，移除当前列表的滚动监听
+                if (e.getAction() == MotionEvent.ACTION_UP && rv.getScrollY() == mLastY) {
+                    rv.removeOnScrollListener(mLayerOSL);
+                }
+            }
+        }
+
+        @Override
+        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
+
+        }
+    });
+
+	...
+｝
+

# 3）为单元（房间）列表设置滚动监听

对于单元（房间）列表滚动监听的设置，跟前面一样，我就顺便写一下好了。

private final RecyclerView.OnScrollListener mRoomOSL = new MyOnScrollListener() {
+    @Override
+    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
+        super.onScrolled(recyclerView, dx, dy);
+        // 当单元（房间）列表滑动时，楼层列表也滑动
+        mRvLayer.scrollBy(dx, dy);
+    }
+};
+
+/**
+ * 设置两个列表的同步滚动
+ */
+private void setSyncScrollListener() {
+
+	...
+
+    mRvRoom.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
+
+        private int mLastY;
+
+        @Override
+        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
+            if (rv.getScrollState() == RecyclerView.SCROLL_STATE_IDLE) {
+                onTouchEvent(rv, e);
+            }
+            return false;
+        }
+
+        @Override
+        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
+            if (e.getAction() == MotionEvent.ACTION_DOWN && mRvLayer.getScrollState() == RecyclerView.SCROLL_STATE_IDLE) {
+                mLastY = rv.getScrollY();
+                rv.addOnScrollListener(mRoomOSL);
+            } else {
+                if (e.getAction() == MotionEvent.ACTION_UP && rv.getScrollY() == mLastY) {
+                    rv.removeOnScrollListener(mRoomOSL);
+                }
+            }
+        }
+
+        @Override
+        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
+
+        }
+    });
+}
+

好了，到这里同步滚动效果就实现了，先看看效果。

不完美的效果

# 3、处理水平滚动列表事件

在上图中，我们可以看到 ，同步滚动效果确实是实现了，但有个问题，只要一水平滚动后，再来滚动左边的楼层列表时程序就会崩溃，若是滚动右边的单元（房间）列表则会滚动不同步，会造成这种情况是因为，当水平滚动是时，事件被HorizontalScrollView处理了，导致右边的单元（房间）列表的滚动监听没有被移除。

代码执行解析

当我们去滚动左边的楼层列表时，会为其设置滚动监听，这时这两个列表都存在滚动监听，所以就造成了监听的递归调用（死循环），于是内存就妥妥的溢出了。下面是错误提示：

内存溢出

所以，解决的方法就是，当HorizontalScrollView处理水平滚动事件时，取消列表的滚动监听，而ScrollView本身不支持滚动监听，所以需要重新HorizontalScrollView，向外提供滚动监听功能。自定义HorizontalScrollView代码如下：

/**
+ * @创建者 CSDN_LQR
+ * @描述 自定义HorizontalScrollView，向外提供滑动监听功能
+ */
+public class ObservableHorizontalScrollView extends HorizontalScrollView {
+
+    private ScrollViewListener scrollViewListener = null;
+
+    public ObservableHorizontalScrollView(Context context) {
+        super(context);
+    }
+
+    public ObservableHorizontalScrollView(Context context, AttributeSet attrs,
+                                          int defStyle) {
+        super(context, attrs, defStyle);
+    }
+
+    public ObservableHorizontalScrollView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public void setScrollViewListener(ScrollViewListener scrollViewListener) {
+        this.scrollViewListener = scrollViewListener;
+    }
+
+    @Override
+    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
+        super.onScrollChanged(x, y, oldx, oldy);
+        if (scrollViewListener != null) {
+            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
+        }
+    }
+
+    public interface ScrollViewListener {
+        void onScrollChanged(ObservableHorizontalScrollView scrollView, int x, int y, int oldx, int oldy);
+    }
+
+}  
+

接着就是替换代码中的HorizontalScrollView控件

...
+<!--单元(房间)-->
+<com.lqr.topsales.ObservableHorizontalScrollView
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:layout_marginLeft="4dp"
+    android:fillViewport="true"
+    android:scrollbars="none">
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="vertical">
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="50dp"
+            android:background="#fff"
+            android:gravity="center"
+            android:padding="10dp"
+            android:text="3"
+            android:textSize="12sp"/>
+
+        <android.support.v7.widget.RecyclerView
+            android:id="@+id/rv_room"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_marginTop="1dp"/>
+    </LinearLayout>
+</com.lqr.topsales.ObservableHorizontalScrollView>
+...
+

在代码中监听HorizontalScrollView滚动，当其滚动时，移除列表控件的移动监听事件：

mSvRoom.setScrollViewListener(new ObservableHorizontalScrollView.ScrollViewListener() {
+    @Override
+    public void onScrollChanged(ObservableHorizontalScrollView scrollView, int x, int y, int oldx, int oldy) {
+        mRvLayer.removeOnScrollListener(mLayerOSL);
+        mRvRoom.removeOnScrollListener(mRoomOSL);
+    }
+});
+

再来试试效果：

最终效果

# 四、最后附上DEMO连接

TopsalesSellControlTableDemo (opens new window)

+ +
+
#自定义View#RecyclerView#滚动
MaterialDesign之对TabLayout的探索
Libgdx - 使用pixmap绘制透明圆角矩形

+ ← + Libgdx - 使用pixmap绘制透明圆角矩形→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/77efcc/index.html b/pages/77efcc/index.html new file mode 100644 index 000000000..c990ef3a2 --- /dev/null +++ b/pages/77efcc/index.html @@ -0,0 +1,254 @@ + + + + + + Flutter - 轻松搞定炫酷视差(Parallax)效果 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-09-21
目录

Flutter - 轻松搞定炫酷视差(Parallax)效果

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在上一篇 【Flutter - 轻松实现PageView卡片偏移效果】 中已经详细讲解过观察 PageView 所需要的具体步骤，今天基于此我们继续再来实现一个炫酷的视差效果，如下图所示。

# 二、研发

# 基础页面搭建

初始化 PageController

late PageController pageController;
+
+/// 图片数据
+List<String> pageItemBgPicList = [
+  'xxxxxx',
+  ...
+];
+
+int get pageItemCount => pageItemBgPicList.length;
+
+@override
+void initState() {
+  super.initState();
+  
+  pageController = PageController(
+    // 初始化下标: 4
+    initialPage: 4,
+    // 视口占比: 0.9
+    viewportFraction: 0.9,
+  );
+}
+

构建 PageView

Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    controller: pageController,
+    itemBuilder: (context, index) {
+      return _buildPageItem(index);
+    },
+    itemCount: pageItemCount,
+  );
+  
+  ...
+  return resultWidget;
+}
+

构建 item

Widget _buildPageItem(int index) {
+  Widget resultWidget = Stack(
+    alignment: AlignmentDirectional.center,
+    children: [
+      Positioned(
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        child: _buildPageItemBgPicView(index),
+      ),
+      const SizedBox.expand(),
+      _buildNum(index),
+    ],
+  );
+  resultWidget = Container(
+    margin: const EdgeInsets.symmetric(horizontal: 8),
+    clipBehavior: Clip.antiAlias,
+    decoration: BoxDecoration(
+      color: Colors.blue[50],
+      borderRadius: BorderRadius.circular(10),
+    ),
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+
+// 背景图片
+Widget _buildPageItemBgPicView(int index) {
+  return Image.network(
+    pageItemBgPicList[index],
+    fit: BoxFit.cover,
+  );
+}
+

# 实现解析

Widget _buildPageItemBgPicView(int index) {
+  return Image.network(
+    pageItemBgPicList[index],
+    fit: BoxFit.cover,
+    // x 与 y均居中对齐
+    alignment: Alignment(0, 0),
+    // x 左对齐，y 居中对齐
+    // alignment: Alignment(-1, 0),
+    // x 右对齐，y 居中对齐
+    // alignment: Alignment(1, 0),
+  );
+);
+

上述的 _buildPageItemBgPicView 只是简单展示了图片，使用的 fit 为 BoxFit.cover，其作用是对图片进行等比例放大，然后填满整个容器。

这里附上各种填充模式的对比

接下来我们来讲讲 alignment，因为它是实现视差效果的关键。

alignment 用于定义边界内的对齐方式，构造函数为 Alignment(this.x, this.y)，其 x 和 y 的取值范围都为 [-1, 1]。

例如:

  • 当值为 (-1.0, -1.0) 时，图像将与其布局边界的左上角对齐
  • 当值为 (1.0, 1.0) 时，图像将与其布局边界的右下角对齐。

不过本篇只需要用到 x，以下图为例

left_center center right_center
Alignment(-1, 0) Alignment(0, 0) Alignment(1, 0)
图片 居左对齐 图片 居中 对齐 图片 居右 对齐

此处以中间的截图（center）为例进行说明:

  • 中间白色边框的视图为 item
  • 两侧的毛玻璃是图片在 item 上的不可见区域

这里再次附上效果图，方便理解

  • 一开始, Page4 在最右侧，此时 alignment 为 Alignment(-1, 0)，图片展示最左侧的内容（left_center）
  • 在慢慢移入到中间完全展示出来的过程中，alignment.x 一直在增加，直至为 0，即 Alignment(0, 0)，图片展示中间的内容（center）
  • 然后再继续慢慢向左侧移出，其 alignment.x 继续增加，直至为 1，即 Alignment(1, 0)，图片展示最右侧的内容（right_center）

所以视差的实现很简单，就是对 alignment.x 进行不断的调整，范围为 [-1, 1]，那怎么在滑动的过程算出这个值呢？

这里又使用到的了我写的滚动视图观察库: https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

# 观察 PageView

我们先来对 item 进行改造

// 图片数据
+List<String> pageItemBgPicList = [
+  'xxxxxx',
+  ...
+];
+
+int get pageItemCount => pageItemBgPicList.length;
+
+/// 存放了各个 item 的 alignment.x
+List<ValueNotifier<double>> pageItemBgPicAlignmentXList = [];
+
+@override
+void initState() {
+  super.initState();
+
+  ...
+  // 根据 item 的数量创建对应数量的 ValueNotifier<double>
+  pageItemBgPicAlignmentXList = List.generate(
+    pageItemCount,
+    (index) {
+      return ValueNotifier<double>(0);
+    },
+  );
+  ...
+}
+
Widget _buildPageItemBgPicView(int index) {
+  // 使用 ValueListenableBuilder 对对应下标的 alignment.x 进行监听与视图刷新
+  return ValueListenableBuilder(
+    valueListenable: pageItemBgPicAlignmentXList[index],
+    builder: (BuildContext context, double alignmentX, Widget? child) {
+      return Image.network(
+        pageItemBgPicList[index],
+        fit: BoxFit.cover,
+        alignment: Alignment(alignmentX, 0),
+      );
+    },
+  );
+}
+

接下来就是对 PageView 进行观察，用法很简单:

  1. 使用 ListViewObserver 将 PageView 包裹起来
  2. 设置 triggerOnObserveType 为 .directly 不做显示 item 变化对比，直接将获取到的观察数据返回
  3. 在观察结果回调 onObserve 中，取出 item 的相关数据（下标、可视区域占比等）进行计算
final observerController = ListObserverController();
+
+Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    ...
+  );
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+    triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+    onObserve: (resultModel) {
+      final displayingChildModelList = resultModel.displayingChildModelList;
+      for (var itemModel in displayingChildModelList) {
+        // 取出 item 的下标
+        final itemIndex = itemModel.index;
+        // 取出 item 自身的显示占比
+        final itemDisplayPercentage = itemModel.displayPercentage;
+
+        // 计算无符号的 alignment.x
+        double itemAlignmentX = 1 - itemDisplayPercentage;
+        
+        // 计算有符号的 alignment.x
+        if (itemModel.leadingMarginToViewport > 0) {
+          itemAlignmentX = -itemAlignmentX;
+        }
+        
+        // 取值范围判断
+        if (itemAlignmentX > 1) {
+          itemAlignmentX = 1;
+        } else if (itemAlignmentX < -1) {
+          itemAlignmentX = -1;
+        }
+        
+        // 赋值
+        pageItemBgPicAlignmentXList[itemIndex].value = itemAlignmentX;
+      }
+    },
+    customTargetRenderSliverType: (renderObj) {
+      return renderObj is RenderSliverFillViewport;
+    },
+  );
+
+  ...
+  return resultWidget;
+}
+

# 关于无符号的 alignment.x 的计算

  1. 无论是从左侧滑入到中间，还是从右侧滑入到中间， item 的 displayPercentage 都是 0 -> 1
  2. 对应的 alignment.x 是 1 -> 0 或 -1 -> 0，去除符号就是 1 -> 0

所以这里用 1 减去 itemDisplayPercentage 即可得到无符号的 alignment.x。

那接下来的问题就是，当 alignment.x == 1 时，怎么知道此时的 item 是从左侧滑出还是右侧滑出呢？

# 关于 alignment.x 符号的计算

在有了 https://github.com/fluttercandies/flutter_scrollview_observer (opens new window) 之后，这一切又变得很简单，这里就不得不提到观察结果中两个非常有用的属性

  • leadingMarginToViewport: item 距离视口顶部的距离
  • trailingMarginToViewport: item 距离视口尾部的距离

这里我们用其中一个就够了，就比如使用 leadingMarginToViewport，当 item 的左侧顶部触碰到 PageView 的视口时，其值为 0，继续往左侧移出，其时该值就会成为负数，如果往右侧移出，该值则为正数，如下图所示

左侧滑出 完全展示 右侧滑出
Alignment(1, 0) Alignment(0, 0) Alignment(-1, 0)
leadingMarginToViewport: -300 leadingMarginToViewport: 0 leadingMarginToViewport: 375

很显然，当 leadingMarginToViewport > 0 时，alignment.x < 0，即 alignment.x 符号的计算如下:

if (itemModel.leadingMarginToViewport > 0) {
+  itemAlignmentX = -itemAlignmentX;
+}
+

好了，大功告成~

完整代码: https://github.com/fluttercandies/flutter_scrollview_observer/blob/main/example/lib/features/pageview/pageview_demo/pageview_parallax_page.dart (opens new window)

# 三、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍

GitHub: https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 轻松实现PageView卡片偏移效果
Flutter - 危！3.24版本苹果审核被拒！

+ ← + Flutter - 危！3.24版本苹果审核被拒！→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松实现PageView卡片偏移效果 +
09-08
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/78c482/index.html b/pages/78c482/index.html new file mode 100644 index 000000000..7ceb2ad23 --- /dev/null +++ b/pages/78c482/index.html @@ -0,0 +1,191 @@ + + + + + + Kotlin - 改良设计模式 - 迭代器模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-13
目录

Kotlin - 改良设计模式 - 迭代器模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 迭代器模式 +
    • 作用：将遍历和实现分离开来，在遍历的同时不需要暴露对象的内部表示
    • 举例：ArrayList、LinkedList、TreeSet 均可通过 iterator() 方法获取到迭代器对元素进行遍历，不需要关心元素存放在哪种数据结构中。

# 二、使用迭代器模式

  • 例子：遍历图书
  • 重点：Iterator、Iterable 接口的使用

无论 Java 还是 Kotlin，都有 Iterator 接口，基于 Iterator 接口实现迭代器模式的类，可以使用 for-in 或 forEach 对其进行快速遍历，这里我们让一个自定义的图片列表（BookList）实现迭代器功能：

/**
+ * 图书
+ *
+ * @author GitLqr
+ */
+data class Book(val name: String)
+
+/**
+ * 图书集（迭代器模式）：基于 Iterator，只能遍历一次
+ *
+ * @author GitLqr
+ */
+class BookList(val books: List<Book>) : Iterator<Book> {
+    private val iterator: Iterator<Book> = books.iterator()
+
+    override fun hasNext() = iterator.hasNext()
+
+    override fun next() = iterator.next()
+}
+
+// 使用
+val bookList = BookList(listOf(Book("Kotlin核心编程"), Book("深入理解Java虚拟机")))
+for (book in bookList) {
+    println(book.name)
+}
+bookList.forEach { book -> println(book.name) }
+
+// 输出
+Kotlin核心编程
+深入理解Java虚拟机
+

可以看到 BookList 确实能使用 for-in 或 forEach 语法进行遍历了，但是结果却只输出一遍，通过源码可以知道 Iterator 是一次性且不可逆的：

public interface Iterator<out T> {
+    /**
+     * Returns the next element in the iteration.
+     */
+    public operator fun next(): T
+
+    /**
+     * Returns `true` if the iteration has more elements.
+     */
+    public operator fun hasNext(): Boolean
+}
+

如果希望每次使用 for-in 或 forEach 语法都能从头遍历的话，很简单，只需要保证每次遍历使用的是独立的迭代器实例即可，这时，我们可以让自定义类 BookList 改为实现 Iterable 接口：

/**
+ * 图书集（迭代器模式）：基于 Iterable，能遍历多次
+ *
+ * @author GitLqr
+ */
+class BookList(val books: List<Book>) : Iterable<Book> {
+    override fun iterator(): Iterator<Book> = books.iterator()
+}
+
+// 使用
+val bookList = BookList(listOf(Book("Kotlin核心编程"), Book("深入理解Java虚拟机")))
+for (book in bookList) {
+    println(book.name)
+}
+bookList.forEach { book -> println(book.name) }
+
+// 输出
+Kotlin核心编程
+深入理解Java虚拟机
+Kotlin核心编程
+深入理解Java虚拟机
+

为防止混淆，这里对 Iterator、Iterable 各自的职能做下总结：

  • Iterator：迭代器，迭代器模式的核心实现（本质）
  • Iterable：可迭代的，每次获取一个新的迭代器（让 cursor 重新开始）

# 三、改良迭代器模式

  • 例子：遍历图书
  • 重点：重载运算符(iterator)、扩展函数

在 Kotlin 中，除了可以使用 Iterator 或 Iterable 来实现迭代器模式外，还可以通过让任意类重载运算符 iterator() 来实现 Iterable 接口相同的功能：

/**
+ * 图书集（迭代器模式）改良：重载 iterator 运算符
+ *
+ * @author GitLqr
+ */
+class BookList(val books: List<Book>) {
+    operator fun iterator(): Iterator<Book> = books.iterator()
+}
+
+// 使用
+val bookList = BookList(listOf(Book("Kotlin核心编程"), Book("深入理解Java虚拟机")))
+for (book in bookList) {
+    println(book.name)
+}
+// bookList.forEach { book -> println(book.name) } // 语法错误，无法编译通过
+

使用【重载运算符 iterator()】与【实现 Iterable 接口】这两种方式来实现的迭代器模式，在代码结构上差不多，但是前者会让 forEach 无法使用，因为 forEach 是 Iterator 和 Iterable 的扩展函数，与运算符 iterator() 无关：

// Iterators.kt
+public inline fun <T> Iterator<T>.forEach(operation: (T) -> Unit): Unit {
+    for (element in this) operation(element)
+}
+
+// _Collections.kt
+@kotlin.internal.HidesMembers
+public inline fun <T> Iterable<T>.forEach(action: (T) -> Unit): Unit {
+    for (element in this) action(element)
+}
+

不过呢，运算符 iterator() 是一个方法，它的返回值类型是 Iterator<T> ，所以我们可以变相的使用 forEach：

bookList.iterator().forEach { book -> println(book.name) }
+

另外，Kotlin 还支持用扩展函数的方式来重载运算符，于是，上述代码还可以变成这样：

/**
+ * 图书集（迭代器模式）改良：第三方类扩展重载 iterator 运算符
+ *
+ * @author GitLqr
+ */
+class BookList(val books: List<Book>)
+operator fun BookList.iterator(): Iterator<Book> = this.books.iterator()
+
+// 使用
+for (book in bookList) {
+    println(book.name)
+}
+bookList.iterator().forEach { book -> println(book.name) }
+

你可能会觉得，这也算改良吗？像 forEach 这种常见的遍历方式还得变相使用才行，感觉有点多余啊，确实如此，与其说是改良，倒不如说是 Kotlin 中迭代器模式的另一种实现思路。不过，假设 BookList 是第三方库中的类，你无法对其源码进行修改，这就意味着【实现 Iterable 接口】这种方式行不通，这时，不妨考虑一下【重载运算符 iterator()】（配合扩展函数）的方式。

+ +
+
#设计模式#迭代器模式
Kotlin - 改良设计模式 - 策略模式
Kotlin - 改良设计模式 - 责任链模式

+ ← + Kotlin - 改良设计模式 - 责任链模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/79a470/index.html b/pages/79a470/index.html new file mode 100644 index 000000000..6bb83612c --- /dev/null +++ b/pages/79a470/index.html @@ -0,0 +1,91 @@ + + + + + + iOS - Swift3.0 高仿喜马拉雅FM | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift3.0 高仿喜马拉雅FM

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 高仿喜马拉雅FM

gitHub: https://github.com/LinXunFeng/LXFFM

# 说明

基于Swift 3.0 编写而成,运行环境要求: Xcode 8.0

# LXFFM

原OC版: https://github.com/Eastwu5788/XMLYFM (opens new window) +从原版作者的源代码上学到了很多,十分感谢. +由于只是本人OC转Swift的试练项目,所以有些内容并没有实现,哈哈

# 效果图

推荐

分类

广播

榜单

主播

订阅听

下载听

我的

+ +
+
#iOS#Swift
RxSwift + MJRefresh 打造自动处理刷新控件状态
iOS - Swift 高仿微信

+ ← + iOS - Swift 高仿微信→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/79e15e/index.html b/pages/79e15e/index.html new file mode 100644 index 000000000..22a71f1d7 --- /dev/null +++ b/pages/79e15e/index.html @@ -0,0 +1,294 @@ + + + + + + RecyclerView之使用ItemTouchHelper实现交互动画 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-05-05
目录

RecyclerView之使用ItemTouchHelper实现交互动画

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

RecyclerView默认就有item动画，例如在增加或删除item时，都会有一个条目间位移的动画，但本文要说的不是这个！！！本文的主角是v7包中的ItemTouchHelper，它跟RecyclerView结合后将会带来神奇的交互效果。示例如下：

效果还是比较酷炫的吧，上图中有四步操作：

  1. 长按item后拖动，与其他item交换位置
  2. 按住item右面的图标后拖动，与其他item交换位置
  3. 左滑item变透明并缩小，超出屏幕后，其他item补上
  4. 右滑item变透明并缩小，超出屏幕后，其他item补上

下面将一一实现出这些效果

# 二、初识ItemTouchHelper

# 1、创建ItemTouchHelper

// 创建ItemTouchHelper，并跟RecyclerView绑定
+mItemTouchHelper = new ItemTouchHelper(mCallback);
+mItemTouchHelper.attachToRecyclerView(mRv);
+

上面就是ItemTouchHelper在本例中出场的三行代码中的两行代码，但这并不能完成上面的效果，ItemTouchHelper只是一个中间人，它将ItemTouchHelper.Callback和RecyclerView连接起来，具体效果还需要由Callback实现。

# 2、自定义ItemTouchHelper.Callback

# 1）创建一个自己的Callback

继承ItemTouchHelper.Callback后必须实现如下三个方法。

public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {
+
+    @Override
+    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
+        return 0;
+    }
+
+    @Override
+    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder targetViewHolder) {
+        return false;
+    }
+
+    @Override
+    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
+
+    }
+}
+

# 2）重写getMovementFlags()

getMovementFlags()是用来判断RecyclerView上的哪些方向操作交由ItemTouchHelper.Callback控制，详细介绍如下：

/**
+ * 获取动作标识
+ * 动作标识分：dragFlags和swipeFlags
+ * dragFlags：列表滚动方向的动作标识（如竖直列表就是上和下，水平列表就是左和右）
+ * wipeFlags：与列表滚动方向垂直的动作标识（如竖直列表就是左和右，水平列表就是上和下）
+ */
+@Override
+public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
+	// 如果你不想上下拖动，可以将 dragFlags = 0
+    int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
+
+	// 如果你不想左右滑动，可以将 swipeFlags = 0
+    int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
+
+	//最终的动作标识（flags）必须要用makeMovementFlags()方法生成
+    int flags = makeMovementFlags(dragFlags, swipeFlags);
+    return flags;
+}
+

上面我让item的上下左右都交由ItemTouchHelper.Callback控制，看下效果：

可以看到左右有效，但上下无效。仔细想想也是，本来就是竖直滚动列表，如果上下都直接交给ItemTouchHelper.Callback控制了，那RecyclerView的列表滚动功能该怎么办？所以，要触发上下拖动的交互效果，肯定有其他开启的方式。

# 3）开启长按item拖动效果

直接重写ItemTouchHelper.Callback的isLongPressDragEnabled()。

/**
+ * 是否开启item长按拖拽功能
+ */
+@Override
+public boolean isLongPressDragEnabled() {
+    return true;
+}
+

默认返回是false，重写返回true。现在看下效果如何：

长按后可以拖动了，但是这样不太方便，接下来实现按住item右图标进行拖动的效果。

# 4）开启按住图标拖动效果

ItemTouchHelper的startDrag(viewHolder)方法可以手动开启拖动效果，上面的ItemTouchHelper实例创建在Activity中，而图标实例在Adapter中，为了降低耦合，这里先写一个接口：

public interface ItemDragListener {
+    void onStartDrags(RecyclerView.ViewHolder viewHolder);
+}
+

接口由Activity实现，在Adapter创建时传入

public class ItemTouchHelperActivity extends AppCompatActivity implements ItemDragListener {
+
+	private ItemTouchHelper mItemTouchHelper;
+	...
+
+	private void setRecyclerView() {
+        mAdapter = new ItemTouchHelperAdapter(mData, this);
+		...
+    }
+
+    @Override
+    public void onStartDrags(RecyclerView.ViewHolder viewHolder) {
+        mItemTouchHelper.startDrag(viewHolder);
+    }
+}
+

接口由Adapter的图标触摸时调用

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder>  {
+
+    private List<String> mData;
+    private ItemDragListener mItemDragListener;
+
+    public ItemTouchHelperAdapter(List<String> data, ItemDragListener itemDragListener) {
+        mData = data;
+        mItemDragListener = itemDragListener;
+    }
+
+    ...
+
+    @Override
+    public void onBindViewHolder(final ItemTouchHelperViewHolder viewHolder, int position) {
+        ...
+        viewHolder.mIvDrag.setOnTouchListener(new View.OnTouchListener() {
+            @Override
+            public boolean onTouch(View v, MotionEvent event) {
+                mItemDragListener.onStartDrags(viewHolder);
+                return false;
+            }
+        });
+    }
+｝
+

这样在让图标在触摸时，间接的调用了mItemTouchHelper.startDrag(viewHolder)，看下效果：

# 三、深入ItemTouchHelper

上面做到了item的上下拖动和左右滑动效果，但只是当前item的动画效果罢了，下面继续完成与其他item互动的效果吧。

# 1、上下拖动时与其他item进行位置交换

# 1）原理

其实ItemTouchHelper.Callback本身不具备将两个item互换位置的功能，但RecyclerView可以，我们可以在item拖动的时候把当前item与另一个item的数据位置交换，再调用RecyclerView的notifyItemMoved()方法刷新布局，同时，因为RecyclerView自带item动画，就可以完成上面的交互效果了。

# 2）实现

item拖动要在ItemTouchHelper.Callback中监听，而数据交换处理要在Adapter中进行，为了降低耦合，这里先写一个接口：

public interface ItemMoveListener {
+    boolean onItemMove(int fromPosition, int toPosition);
+}
+

接口由Adapter实现

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder> implements ItemMoveListener{
+
+    ...
+
+	@Override
+    public boolean onItemMove(int fromPosition, int toPosition) {
+        //1、交换数据
+        Collections.swap(mData, fromPosition, toPosition);
+        //2、刷新
+        notifyItemMoved(fromPosition, toPosition);
+        return true;
+    }
+}
+

接口在创建ItemTouchHelper.Callback时传入，在onMove()中调用

public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {
+
+    ItemMoveListener mItemMoveListener;
+
+    public MyItemTouchHelperCallback(ItemMoveListener itemMoveListener) {
+        mItemMoveListener = itemMoveListener;
+    }
+
+	...		
+
+    /**
+     * 当item拖拽移动时触发
+     *
+     * @param recyclerView
+     * @param viewHolder       当前被拖拽的item的viewHolder
+     * @param targetViewHolder 当前被拖拽的item下方的另一个item的viewHolder
+     * @return
+     */
+    @Override
+    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder targetViewHolder) {
+        return mItemMoveListener.onItemMove(viewHolder.getAdapterPosition(), targetViewHolder.getAdapterPosition());
+    }
+}
+

# 3）效果：

# 2、左右滑出屏幕时其他item补上

# 1）原理

相同的，只要在item滑出屏幕时，将对应的数据删掉，再调用RecyclerView的notifyItemRemoved()方法刷新布局即可。

# 2）实现

item滑动要在ItemTouchHelper.Callback中监听，而数据删除处理要在Adapter中进行，所以只需要加上面的接口中增加一个方法：

public interface ItemMoveListener {
+    ...
+    boolean onItemRemove(int position);
+}
+

接口由Adapter实现

public class ItemTouchHelperAdapter extends RecyclerView.Adapter<ItemTouchHelperAdapter.ItemTouchHelperViewHolder> implements ItemMoveListener{
+
+    ...
+
+    @Override
+    public boolean onItemRemove(int position) {
+        //1、删除数据
+        mData.remove(position);
+        //2、刷新
+        notifyItemRemoved(position);
+        return true;
+    }
+}
+

接口在ItemTouchHelper.Callback在onSwiped()中调用

/**
+ * 当item侧滑出去时触发（竖直列表是侧滑，水平列表是竖滑）
+ *
+ * @param viewHolder
+ * @param direction  滑动的方向
+ */
+@Override
+public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
+    mItemMoveListener.onItemRemove(viewHolder.getAdapterPosition());
+}
+

# 3）效果：

现在大部分效果已经实现，接下来是细节处理。

# 3、交互时背景变化

# 1）原理

在item被拖拽或侧滑时修改背景色，当动作结束后将背景色恢复回来，而ItemTouchHelper.Callback中正好有对应这两个状态的方法，分别是：onSelectedChanged()、clearView()。

# 2）实现

/**
+ * 当item被拖拽或侧滑时触发
+ *
+ * @param viewHolder
+ * @param actionState 当前item的状态
+ */
+@Override
+public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
+    super.onSelectedChanged(viewHolder, actionState);
+    //不管是拖拽或是侧滑，背景色都要变化
+    if (actionState != ItemTouchHelper.ACTION_STATE_IDLE)
+        viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(android.R.color.darker_gray));
+}
+
+/**
+ * 当item的交互动画结束时触发
+ *
+ * @param recyclerView
+ * @param viewHolder
+ */
+@Override
+public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
+    super.clearView(recyclerView, viewHolder);
+    viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(android.R.color.white));
+}
+

# 3）效果

# 4、左右滑动时item渐变

# 1）分析及实现

在最开始的图中，当item被侧滑出去的过程中，可以看到item的透明度在渐渐变浅，高度在渐渐变小，其实就是让item执行了两种属性动画而已，在ItemTouchHelper.Callback中有一个方法可以拿到item被拖拽或滑动时的位移变化，那就是onChildDraw()方法，这样就很好办了，看如下代码实现：

@Override
+public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
+
+	//这句代码就是item拖拽和滑动效果的实现，所以这句不能省略
+    super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
+
+	//我们只需要在左右滑动时，将透明度和高度的值变小（1 --> 0）
+    if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
+        float value = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
+        viewHolder.itemView.setAlpha(value);
+        viewHolder.itemView.setScaleY(value);
+    }
+}
+

# 2）效果（有瑕疵）

可以看到，item在滑动过程中渐渐透明并高度缩小了，但是，我明明是删除了两条，怎么结果列表中多出来两条空白的数据！这又是为什么呢？

# 3）修复

其实上图中并不是多出了两条空白数据，它们是正常的数据，只是看不到了，这是因为RecyclerView条目（itemView）覆用导致的，前面在onChildDraw()方法中对itemView设置了透明和缩小，而一个列表中固定只有几个itemView而已，当那两个透明缩小的itemView被再次使用时，之前设置的透明度和高度比例已经是0，所以就出现了这种情况，解决方法也很简单，只要在item被移除后，将itemView的透明度和高度比例设置回来即可，代码如下：

/**
+ * 当item的交互动画结束时触发
+ *
+ * @param recyclerView
+ * @param viewHolder
+ */
+@Override
+public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
+    super.clearView(recyclerView, viewHolder);
+    ...
+
+    viewHolder.itemView.setAlpha(1);
+    viewHolder.itemView.setScaleY(1);
+}
+

# 4）效果（完美）

到这里，最开始的所有交互效果都已经实现了。

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#RecyclerView#ItemTouchHelper
RecyclerView之ItemDecoration
MaterialDesign之SearchView全面解锁

+ ← + MaterialDesign之SearchView全面解锁→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/79e7e5/index.html b/pages/79e7e5/index.html new file mode 100644 index 000000000..7604782f2 --- /dev/null +++ b/pages/79e7e5/index.html @@ -0,0 +1,311 @@ + + + + + + Android - setVisibility() 失效，竟然是因为内存泄露 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-07-02
目录

Android - setVisibility() 失效，竟然是因为内存泄露

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前情概要

目前，我在开发的一个 Android 项目需要各个功能做到线上动态化，其中，App 启动时显示的 Loading 模块，会优先检测加载远程的 Loading 模块，加载失败时，会使用 App 本身默认的 Loading 视图，为此，我编写了一个 LoadingLoader 工具类：

/**
+ * Loading 加载器
+ *
+ * @author GitLqr
+ * @since 2022/7/2
+ */
+object LoadingLoader {
+
+    private var isInited = false // 防止多次初始化
+    private lateinit var onLoadFail: () -> Unit // 远程loading加载失败时的回调
+    private lateinit var onLoadComplete: () -> Unit // 加载完成后回调（无论成功失败）
+
+    fun init(onLoadFail: () -> Unit = {}, onLoadComplete: () -> Unit = {}): LoadingLoader {
+        if (!isInited) {
+            this.onLoadFail = onLoadFail
+            this.onLoadComplete = onLoadComplete
+            isInited = true
+        } else {
+            log("you have inited, this time is not valid")
+        }
+        return this
+    }
+
+    fun go() {
+        if (isInited) {
+            loadRemoteLoading(callback = { isSuccess ->
+                if (!isSuccess) onLoadFail()
+                onLoadComplete()
+            })
+        } else {
+            log("you must invoke init() firstly")
+        }
+    }
+
+    private fun loadRemoteLoading(callback: (boolean: Boolean) -> Unit) {
+        // 模拟远程 Loading 模块加载失败
+        Handler(Looper.getMainLooper()).postDelayed({
+            callback(false)
+        }, 1000)
+    }
+
+    private fun log(msg: String) {
+        Log.e("LoadingUpdater", msg)
+    }
+}
+

LoadingLoader 工具类使用 Kotlin 的单例模式，init() 方法接收 2 个回调参数，go() 方法触发加载远程 Loading 模块，并根据加载结果执行回调，其中 isInited 用于防止该工具类被初始化多次。然后，在 App 的主入口 LoadingActivity 中使用 LoadingLoader，当加载远程 Loading 模块失败时，将原本隐藏的默认 Loading 视图显示出来；当加载 Loading 模块完成后（无论成功失败），模拟初始化数据并跳转主界面，关闭 LoadingActivity:

/**
+ * App 启动时的 Loading 界面
+ *
+ * @author GitLqr
+ * @since 2022/7/2
+ */
+class LoadingActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_loading)
+        // Loading 模块加载器
+        LoadingLoader.init(onLoadFail, onLoadComplete).go()
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        Log.e("GitLqr", "onDestroy")
+    }
+
+    private val onLoadFail: () -> Unit = {
+        // 显示默认 loading 界面
+        findViewById<View>(R.id.cl_def_loading).setVisibility(View.VISIBLE)
+    }
+
+    private val onLoadComplete: () -> Unit = {
+        // 模拟初始化数据，1秒后跳转主界面
+        Handler(Looper.getMainLooper()).postDelayed({
+            val intent = Intent(this, MainActivity::class.java)
+            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK)
+            // 注意：此处意图使用的 flag，会将 LoadingActivity 界面关闭，触发 onDestroy()
+            startActivity(intent)
+        }, 1000)
+    }
+}
+

LoadingActivity 的 xml 布局代码如下，默认的 Loading 布局初始状态不可见，即 visibility="gone"：

<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/black">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/cl_def_loading"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="#f00"
+        android:visibility="gone"
+        tools:visibility="visible">
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:gravity="center"
+            android:text="很好看的默认loading界面"
+            android:textColor="@color/white"
+            android:textSize="60dp" />
+
+        <ProgressBar
+            android:id="@+id/pb_loading"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:indeterminateDrawable="@drawable/anim_loading"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintDimensionRatio="1"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintVertical_bias="0.75"
+            app:layout_constraintWidth_percent="0.064" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</FrameLayout>
+

以上代码比较简单，现在来看下演示效果:

这里会发现一个问题，因为是以清空栈的方式启动 MainActivity，所以第二次启动时，理论上应该会跟第一次启动时界面显示效果完全一致，即每次启动都会显示默认的 Loading 视图，但是实际情况并没有，而控制台的日志也证实了 LoadingActivity 的 onDestroy() 有被触发：

# 二、摸索过程

# 1、代码执行了吗？

难道第二次启动 App 时，LoadingActivity.onLoadFail 没有触发吗？加上日志验证一下：

class LoadingActivity : AppCompatActivity() {
+    ...
+    private val onLoadFail: () -> Unit = {
+        // 显示默认 loading 界面
+        val defLoading = findViewById<View>(R.id.cl_def_loading)
+        defLoading.setVisibility(View.VISIBLE)
+        Log.e("GitLqr", "defLoading.setVisibility --> ${defLoading.visibility}")
+    }
+}
+

重新打包再执行一遍上面的演示操作，日志输出如下：

说明 2 次启动都是有触发 LoadingActivity.onLoadFail 的，并且结果都是 0 ，即 View.VISIBLE。

此时有点怀疑人生，于是网上找了一圈 setVisibility() 失效 的原因，基本上都是同一个内容（都特么抄来抄去的），说是做动画导致的，可是我这里并没有做动画，所以与网上说的情况不相符。

# 2、视图不显示的直接原因是什么？

既然，代码有输出日志，那说明 setVisibility(View.VISIBLE) 这行代码肯定执行过了，而界面上不显示，直接原因是什么？是因为默认 Loading 视图的 visibility 依旧为 View.GONE？又或者是因为其他因素导致 View 的尺寸出现了问题？这时，可以使用 AndroidStudio 的 Layout Inspector 工具，可以直观的分析界面的布局情况，为了方便 Layout Inspector 工具获取 LoadingActivity 的布局信息，需要将 LoadingActivity.onLoadComplete 中跳转主界面的代码注释掉，其他保持不变：

class LoadingActivity : AppCompatActivity() {
+    ...
+    private val onLoadComplete: () -> Unit = {
+        // 模拟初始化数据，1秒后跳转主界面
+        Handler(Looper.getMainLooper()).postDelayed({
+//            val intent = Intent(this, MainActivity::class.java)
+//            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+//            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK)
+//            // 注意：此处意图的 flag，会将 LoadingActivity 界面关闭，触发 onDestroy()
+//            startActivity(intent)
+        }, 1000)
+    }
+}
+

然后重复上述演示操作，第一次启动，显示出默认 Loading，手动按返回键退出 App，再第二次启动，不显示默认 Loading：

控制台日志信息也如期输出，第二次启动确实执行了 setVisibility(View.VISIBLE)：

这时，使用 Layout Inspector（菜单栏 -> Tools -> Layout Inspector），获取到 LoadingActivity 的布局信息：

这里可以断定，就是默认 Loading 视图的 visibility 依旧为 View.GONE 的情况。

注：因为 View.GONE 不占据屏幕空间，所以宽高都为 0，是正常的。

# 3、操作的视图是同一个吗？

现在回顾一下上述的 2 个线索，首先，代码中确定执行了 setVisibility(View.VISIBLE)，并且日志里也显示了该视图的显示状态为 0，即 View.VISIBLE：

其次，使用 Layout Inspector 看到的的视图状态却为 View.GONE：

所以，真相只有一个，日志输出的视图 和 Layout Inspector 看到的的视图，肯定不是同一个！！为了验证这一点，代码再做如下调整，分别在 onCreate() 和 onLoadFail 中打印默认 Loading 视图信息：

class LoadingActivity : AppCompatActivity() {
+    ...
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_loading)
+
+        val defLoading = findViewById<View>(R.id.cl_def_loading)
+        Log.e("GitLqr", "onCreate ---> view is ${defLoading}")
+
+        // Loading 模块加载器
+        LoadingLoader.init(onLoadFail, onLoadComplete).go()
+    }
+
+    private val onLoadFail: () -> Unit = {
+        // 显示默认 loading 界面
+        val defLoading = findViewById<View>(R.id.cl_def_loading)
+        defLoading.setVisibility(View.VISIBLE)
+        Log.e("GitLqr", "defLoading.setVisibility --> ${defLoading.visibility}, view is ${defLoading}")
+    }
+}
+

再如上述演示操作一遍，日志输出如下：

可以看到第二次启动时，LoadingActivity.onLoadFail 中操作的视图，还是第一次启动时的那个视图，该视图是通过 findViewById 获取到的，说明 LoadingActivity.onLoadFail 中引用的 Activity 是第一次启动时的 LoadingActivity，也就是说 LoadingActivity 发生内存泄露了。此时才焕然大悟，Kotlin 中的 Lambda 表达式（像 onLoadFail、onLoadComplete 这种），对应到 Java 中就是匿名内部类，通过 Kotlin Bytecode 再反编译成 java 代码可以验证这点：

public final class LoadingActivity extends AppCompatActivity {
+   private final Function0 onLoadFail = (Function0)(new Function0() {
+      // $FF: synthetic method
+      // $FF: bridge method
+      public Object invoke() {
+         this.invoke();
+         return Unit.INSTANCE;
+      }
+
+      public final void invoke() {
+         View defLoading = LoadingActivity.this.findViewById(1000000);
+         defLoading.setVisibility(0);
+         StringBuilder var10001 = (new StringBuilder()).append("defLoading.setVisibility --> ");
+         Intrinsics.checkExpressionValueIsNotNull(defLoading, "defLoading");
+         Log.e("GitLqr", var10001.append(defLoading.getVisibility()).append(", view is ").append(defLoading).toString());
+      }
+   });
+   private final Function0 onLoadComplete;
+
+   protected void onCreate(@Nullable Bundle savedInstanceState) {
+      super.onCreate(savedInstanceState);
+      this.setContentView(1300004);
+      View defLoading = this.findViewById(1000000);
+      Log.e("GitLqr", "onCreate ---> view is " + defLoading);
+      LoadingLoader.INSTANCE.init(this.onLoadFail, this.onLoadComplete).go();
+   }
+
+   protected void onDestroy() {
+      super.onDestroy();
+      Log.e("GitLqr", "onDestroy");
+   }
+
+   public LoadingActivity() {
+      this.onLoadComplete = (Function0)null.INSTANCE;
+   }
+}
+

我们知道，Java 中，匿名内部类会持有外部类的引用，即匿名内部类实例 onLoadFail 持有 LoadingActivity 实例，而 onLoadFail 又会通过 LoadingLoader.init() 方法传递给 LoadingLoader 这个单例对象，所以间接导致 LoadingLoader 持有了 LoadingActivity，因为单例生命周期与整个 App 进程相同，所以只要 App 进程不死，内存中就只有一分 LoadingLoader 实例，又因为是强引用，所以 GC 无法回收掉第一次初始化时传递给 LoadingLoader 的 LoadingActivity 实例，所以，无论重启多少次，onLoadFail 中永远都是拿着第一次启动时的 LoadingActivity 来执行 findViewById，拿到的 Loading 视图自然也不会是当前最新 LoadingActivity 的 Loading 视图。

# 三、解决方案

既然知道是因为 LoadingActivity 内存泄露导致的，那么解决方案也简单，就是在 LoadingLoader 完成它的使命之后，及时释放掉对 LoadingActivity 的引用即可，又因为 LoadingActivity 实际上并不是被 LoadingLoader 直接引用，而是被其内部变量 onLoadFail 直接引用的，那么在 LoadingLoader 中只需要将 onLoadFail 的引用切断就行了：

object LoadingLoader {
+    private var isInited = false // 防止多次初始化
+    private lateinit var onLoadFail: () -> Unit // 远程loading加载失败时的回调
+    private lateinit var onLoadComplete: () -> Unit // 加载完成后回调
+
+    fun go() {
+        if (isInited) {
+            loadRemoteLoading(callback = { isSuccess ->
+                if (!isSuccess) onLoadFail()
+                onLoadComplete()
+                destroy() // 使命完成，释放资源
+            })
+        } else {
+            log("you must invoke init() firstly")
+        }
+    }
+
+    fun destroy() {
+        this.onLoadFail = {}
+        this.onLoadComplete = {}
+        this.isInited = false
+    }
+}
+

至此，因内存泄露导致 setVisibility() 失效的问题就解决掉了，要坚信，在代码的世界里，没有魔法~

+ +
+
#性能优化#内存泄漏#setVisibility
解决WebView内存泄漏
Android - 云游戏本地悬浮输入框实现

+ ← + Android - 云游戏本地悬浮输入框实现→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/79efd2/index.html b/pages/79efd2/index.html new file mode 100644 index 000000000..1df9bd83c --- /dev/null +++ b/pages/79efd2/index.html @@ -0,0 +1,213 @@ + + + + + + vue - Vue2兼容低版本浏览器 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-11-08
目录

vue - Vue2兼容低版本浏览器

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

因为 Vue3 使用了 ES6 的 Proxy 作为其观察者机制，并且无法通过 polyfill 进行转换，所以工程要兼容低版本浏览器的话，还得继续使用 Vue2，经过一些研究，整理了以下 2 个版本的 Vue2 工程在兼容低版本浏览器时的详情步骤：

  • webpack + ts + Vue2
  • Vite + ts + Vue2

温馨提示：现在 Vue2 也可以使用组合式 api 了，具体参考：https://www.npmjs.com/package/@vue/composition-api (opens new window)

# 一、webpack 版

根据 Vue Cli 官网上提供的教程，默认创建出来的 Vue2 工程就是 webpack 版。

# 1、创建项目

执行如下命令：

# 例如：vue create webpack-vue2-ts
+vue create your-project-name
+

选择 Manually select features 后回车，进入特性选择环节，根据工程需求，选择即可：

注意：空格选中或取消，回车确认。

之后一路回车即可，等待工程初始化完成（会自动拉取 node_modules 需要点时间）

# 2、配置 babel

工程创建完成之后，就可以来着手兼容低浏览器了，先安装如下几个 babel 插件：

npm i @babel/plugin-transform-arrow-functions -D
+npm i @babel/plugin-proposal-optional-chaining -D
+

打开 babel.config.js，如下配置：

// babel.config.js
+module.exports = {
+  presets: [
+    "@vue/cli-plugin-babel/preset",
+    [
+      "@babel/preset-env",
+      {
+        useBuiltIns: "entry",
+        corejs: 3,
+        targets: {
+          ios: "8",
+          android: "4",
+          chrome: "58",
+        },
+      },
+    ],
+  ],
+  plugins: [
+    "@babel/plugin-transform-arrow-functions", // 箭头函数转换
+    "@babel/plugin-proposal-optional-chaining", // 可选链（?.）转换
+  ],
+};
+

最后，在 main.ts 文件顶部进行如下导入：

// main.ts
+import "core-js/stable";
+import "regenerator-runtime/runtime";
+
+import Vue from "vue";
+import App from "./App.vue";
+...
+

至此，webpack 版 Vue2 工程 使用 npm run build 打包出来的 h5 就可以在低版本浏览器上运行了。

注意：以上配置仅针对 Vue Cli 4，Vue Cli 4 与 Vue Cli 3 的 babel 配置大不相同。

# 3、useBuiltIns 说明

这里是对上述配置中的 useBuiltIns 的说明，没兴趣可以直接跳过~

值 示例 说明
false "useBuiltIns": false 不对 polyfill 做操作，如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。
entry "useBuiltIns": "entry",
"corejs": 2		 根据配置的游戏器兼容，引入浏览器不兼容的 polyfill 。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。这里需要指定 core-js 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成 import 'core-js/stable';import 'regenerator-runtime/runtime';
usage "useBuiltIns": "usage",
"corejs": 2		 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。

内容引用自 https://juejin.cn/post/6844904069866192910 (opens new window)

# 二、Vite 版

Vite 工程需要使用 Vite 脚手架来创建：

# 1、创建项目

执行如下命令：

npm init vite@latest
+

选择 Vanilla，之后再选择 TypeScript，回车，即刻创建好工程（Vite 不会自动拉取 node_modules，所以比较快）：

# 2、改为 Vue2

使用 Vite 创建的 Vue 工程默认是 Vue3 版本，需要对工程进行改造，转成 Vue2 版本需要安装一个 Vite 插件，执行如下命令：

npm i vite-plugin-vue2 -D
+

创建 vite.config.ts 文件，如下配置：

// vite.config.ts
+import { createVuePlugin } from "vite-plugin-vue2";
+
+export default {
+  plugins: [createVuePlugin()],
+};
+

安装完插件之后，还需要安装 Vue2 依赖，执行如下命令：

npm i vue@2.7.13
+npm i vue-template-compiler
+

注意：使用 npm i vue 默认会安装 Vue3，需要手动指定版本才能安装 Vue2。

在 src 目录下创建 App.vue 文件：

<!-- App.vue -->
+<template>
+  <div>Hello Vite Vue2 --- GitLqr</div>
+</template>
+

重写 src 目录下的 main.ts 文件，内容如下：

// main.ts
+import Vue from "vue";
+import App from "./App.vue";
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");
+

因为工程使用了 TypeScript，此时代码中的 "./App.vue" 还不会被 ts 识别，所以会提示报错，如果放置不理的话还会导致编译失败，此时只需要在 vite-env.d.ts 文件中对 vue 进行类型声明即可解决：

// vite-env.d.ts
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}
+

# 3、配置 @vitejs/plugin-legacy

工程改造成 Vue2 之后，就可以着手兼容低版本浏览器了。Vite 官方提供了 @vitejs/plugin-legacy 插件，专门用来处理兼容低版本浏览器问题，执行如下命令：

npm i @vitejs/plugin-legacy -D
+

打开 vite.config.ts 文件，如下配置：

// vite.config.ts
+import { createVuePlugin } from "vite-plugin-vue2";
+import legacy from "@vitejs/plugin-legacy";
+
+export default {
+  plugins: [
+    createVuePlugin(),
+    legacy({
+      targets: ["android 4", "ios 8", "chrome 52", "ie 11"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+      renderLegacyChunks: true,
+      polyfills: [
+        "es.symbol",
+        "es.array.filter",
+        "es.promise",
+        "es.promise.finally",
+        "es/map",
+        "es/set",
+        "es.array.for-each",
+        "es.object.define-properties",
+        "es.object.define-property",
+        "es.object.get-own-property-descriptor",
+        "es.object.get-own-property-descriptors",
+        "es.object.keys",
+        "es.object.to-string",
+        "web.dom-collections.for-each",
+        "esnext.global-this",
+        "esnext.string.match-all",
+      ],
+    }),
+  ],
+};
+

以上配置源自：https://blog.csdn.net/Mr_JavaScript/article/details/125388234 (opens new window)

# 4、解决 Unhandled promise rejection

配置完 @vitejs/plugin-legacy 之后，在个别浏览器上会出现 Unhandled promise rejection 错误，这时需要使用 @babel/polyfill 来解决，执行如下命令安装：

npm i @babel/polyfill
+

在 main.ts 最顶端添加：

// main.ts
+import "@babel/polyfill";
+
+import Vue from "vue";
+import App from "./App.vue";
+...
+

至此，Vite 版 Vue2 工程使用 npm run build 打包好的 h5 就可以在低版本浏览器上运行了。

注意：因为 @vitejs/plugin-legacy 只在 build 模式下生效，这也意味着 dev 模式下不经过 @vitejs/plugin-legacy 处理，所以 dev 模式下无法在低版本浏览器上运行。

# 5、组合式 API

Vue2.6 及之前版本需要通过 composition-api 插件来支持组合式 API，而最近发布的 Vue2.7 则已经内置了组合式 API，所以接下来顺便让上面的 Vite 版 Vue2 工程支持组合式 API 吧：

Vue2.7 不再使用 vue-template-compiler 插件，执行如下命令进行卸载：

npm un vue-template-compiler
+

注意：你会发现，就会没有 vue-template-compiler 插件，运行项目也是不会报错的~

根据官方说明，Vue2.7 应该使用 @vitejs/plugin-vue2 插件来代替 vite-plugin-vue2 插件，执行如下命令：

npm un vite-plugin-vue2
+npm i @vitejs/plugin-vue2 -D
+

注意：必须使用新的 @vitejs/plugin-vue2 插件，否则 <script setup> 将无法正常使用！！！

更换好插件后，打开 vite.config.ts 修改配置：

// vite.config.ts
+
+// import { createVuePlugin } from "vite-plugin-vue2";
+import vue from "@vitejs/plugin-vue2";
+
+export default {
+  plugins: [
+    // createVuePlugin(),
+    vue(),
+    ...
+  ],
+};
+

至此，就可以在项目中使用组合式 API 了，例如：

<!-- App.vue -->
+<template>
+  <div>{{ hello }}</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const hello = ref("Hello Vite Vue2 --- GitLqr");
+</script>
+

# 三、其他

上述两个工程示例已提交 GitHub：

可以发现不管 webpack 还是 Vite，在兼容低版本浏览器时，都会配置一个 targets 参数，该参数很关键，配置不当会达不到效果，详细介绍请参考如下文档：

+ +
+
#vue2#legacy#vitejs/plugin-legacy#babel#polyfill
vite - 多渠道差异化打包插件

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7b4815/index.html b/pages/7b4815/index.html new file mode 100644 index 000000000..542e51e41 --- /dev/null +++ b/pages/7b4815/index.html @@ -0,0 +1,112 @@ + + + + + + Kotlin - 类及成员的可见性 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-28
目录

Kotlin - 类及成员的可见性

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 类及成员可见性

Kotlin 中可见性有 4 个级别：private -> protect -> internal -> public，从左至右可见范围逐渐放宽。

Kotlin Java 可见性
private private 自己可见
protected protected 子类可见
- default(默认) 包内可见(Java 特有)
internal - 模块内可见(Kotlin 特有)
public(默认) public 外部可见

为了方便理解，这里举个例子，一个父亲的零花钱只能自己使用(private)，游戏机可以给孩子使用(protected)，族谱可以给村里人使用(internal)，名片可以给所有人使用(public)。

open class Father {
+    private val pinMoney = 200 // 零花钱
+    protected val gamePlayer = Switch() // 游戏机
+    internal val familyTree = FamilyTree() // 族谱
+
+    // public val callingCard = CallingCard()
+    val callingCard = CallingCard() // 名片
+}
+

因为 kotlin 中类及成员可见性默认是 public，所以 public 可以不写。来看看子类 Son 中访问父类 Father 中成员属性会是如何：

class Son : Father() {
+    fun getFromFather() {
+        val pinMoney = super.pinMoney // IDE报错：Cannot access 'pinMoney': it is private in 'Father'
+        val gamePlayer = super.gamePlayer
+        val familyTree = super.familyTree
+        val callingCard = super.callingCard
+    }
+}
+

可见子类最多可以访问父类 protected 级别的成员，再来看看外界访问 Father 成员属性的情况：

fun main(args: Array<String>) {
+    val father = Father()
+    val pinMoney = father.pinMoney // IDE报错：Cannot access 'pinMoney': it is private in 'Father'
+    val gamePlayer = father.gamePlayer // IDE报错：Cannot access 'gamePlayer': it is protected in 'Father'
+    val familyTree = father.familyTree
+    val callingCard = father.callingCard
+}
+

外界最多可以访问类中 internal 级别的成员。internal 是模块内可见，这里的模块指的是 IDEA 项目结构中的 Module（ModuleB 不能访问 ModuleA 中 internal 类与成员），有兴趣的话，可以自己尝试下。

Kotlin 中的 internal 与 Java 中的 default 是不一样的，所以，如果代码要做到两者互通的话，建议还是少用 internal。

+ +
+
#private#protected#internal#public
Kotlin - 面向对象之继承与实现
Kotlin - 伴生对象与静态成员

+ ← + Kotlin - 伴生对象与静态成员→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7b7220/index.html b/pages/7b7220/index.html new file mode 100644 index 000000000..5b9e9e398 --- /dev/null +++ b/pages/7b7220/index.html @@ -0,0 +1,123 @@ + + + + + + iOS - 给高仿微信添加直播聊天功能 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - 给高仿微信添加直播聊天功能

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

抽空给之前做的开源项目【高仿微信】 (opens new window)添加直播功能，由于时间有限，做得不是很完美，有空再去完善吧，能用就好~~

在此提供存放于百度云的完整项目【高仿微信】- 百度云 (opens new window) +希望各位能在我的GitHub上献出一个宝贵的Star 【高仿微信】- GitHub (opens new window) +谢谢

注意：直播功能的使用（对方需要先进入到对应的聊天界面）

两个测试账号： lxf lqr 密码都是123456

直播聊天

# 推流

首先第一件事当然就是搭建一个推流服务器，这里请跳转参考我之前写好的文章吧【Ubuntu安装nginx来搭建推流服务器】，这里我的服务器的ip地址是：192.168.123.191

APP上推流我使用的是第三方的库 LFLiveKit (opens new window)，这个第三方库已经帮我们处理了很多事情，而且还包括美颜~~。当然，有时间我们还是要去了解一下底层的东西，这里就先不赘述，过几天抽空再做总结。

关键代码如下

// 初始化配置
+let audioConfiguration = LFLiveAudioConfiguration.default()
+let videoConfiguration = LFLiveVideoConfiguration.defaultConfiguration(for: .low2, outputImageOrientation: .portrait)
+// 初始化session
+let session = LFLiveSession(audioConfiguration: audioConfiguration, videoConfiguration: videoConfiguration)
+// 设置代理
+// session?.delegate = self
+// 设置展示的View
+session?.preView = self.view
+
let stream = LFLiveStreamInfo()
+stream.url = "rtmp://192.168.123.191:1935/rtmplive/lxf"; // 服务器地址
+session.startLive(stream)
+// 开始推流
+session.running = true
+

# 拉流

这里我使用的是B站的开源库 ijkplayer (opens new window)

为了方便可以用这个 编译好的B站开源库 (opens new window)

需要注意的是：IJKPlayer默认使用的是软解码(FFMpeng)，如果需要使用硬解码需要我们进行相应的设置

// 设置"videotoolbox"的值为0为软解码(默认)，设置为1则是硬解码
+let options = IJKFFOptions.byDefault()
+options?.setOptionIntValue(1, forKey: "videotoolbox", of: kIJKFFOptionCategoryPlayer)
+
+let ijkPlayer = IJKFFMoviePlayerController(contentURLString: "rtmp://192.168.123.191:1935/rtmplive/lxf", with: options)
+// 需保存起来
+self.ijkPlayer = ijkPlayer
+ijkPlayer?.view.frame = view.bounds
+view.addSubview(ijkPlayer!.view)
+
+// 准备播放，当视频准备好的时候会自动进行播放
+ijkPlayer?.prepareToPlay()
+

# 将IJKPlayer打包

从B站的gitHub上下载的 ijkplayer (opens new window) 需要手动编译出来，跟着说明走就可以了，这里就不赘述咯，接下来我们将它打包，方便使用

如果你不跟着说明走的话会提示找不到 avformat.h 这个头文件

avformat.h

这时你需要在终端cd到ijkplayer这个目录，然后执行 init-ios.sh文件，如图

目录

init-ios.sh

然后经过一段漫长的时间之后，在ios目录下就多出了这些ffmpeg相关的目录

ffmpeg相关目录

这个操作是在下载ffmpeg源码，然缺失的avformat.h就在里面

avformat.h

打开项目 IJKMediaPlayer

打开项目

设置为 release，这样打出来的包会小些

Edit Scheme

release

选择真机和模拟器，各Command+B编译一次

真机

模拟器

右击，Show in Finder

如图，就有两个文件夹，里面存放着的就是我们编译出来的库

Paste_Image.png

可以使用如下命令查看信息

lipo -info IJKMediaFramework
+

查看所支持的处理器

默认模拟器编译出来的包是不支持i386，如果希望支持的话 +进入项目的 Build Settings，将 Build Active Architecture Only 设置为NO

Build Active Architecture Only

好，现在对编译出来的包进行合并，这样就即支持真机，也支持模拟器

// 格式
+// lipo -create  path1  path2  -output  frameName
+
+lipo -create Release-iphoneos/IJKMediaFramework.framework/IJKMediaFramework Release-iphonesimulator/IJKMediaFramework.framework/IJKMediaFramework -output IJKMediaFramework
+

合并

将合并出来的IJKMediaFramework替换 IJKMediaFramework.framework中的IJKMediaFramework，最后将替换好的 IJKMediaFramework.framework 拖入到项目中使用即可。

替换

最后，附上编译好的IJKMediaFramework

链接:https://pan.baidu.com/s/1eRYlJ7W 密码:9iaw

+ +
+
#iOS#Swift
iOS-组件化开发（四）：fastlane实现pod自动化
iOS - 采集音视频及写入文件

+ ← + iOS - 采集音视频及写入文件→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7b86ec/index.html b/pages/7b86ec/index.html new file mode 100644 index 000000000..8106d8126 --- /dev/null +++ b/pages/7b86ec/index.html @@ -0,0 +1,227 @@ + + + + + + Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-04-03
目录

Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、问题

我先跳转至 Flutter 页面，1秒后在 Flutter 页面上添加一个原生的弹窗视图，代码如下：

let flutterVc = FlutterViewController(engine: fetchFlutterEngine(), nibName: nil, bundle: nil)
+self.navigationController?.pushViewController(flutterVc, animated: true)
+
+DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + .seconds(1)) { [self] in
+    
+    let popView = LXFPopView(frame: CGRect(x: 0, y: 0, width: screenW, height: screenH))
+    flutterVc.view.addSubview(popView)
+    popView.checkInfoBlock = { [weak self] in
+        guard let self = self else { return }
+        self.navigationController?.pushViewController(InfoViewController(), animated: true)
+    }
+    
+}
+

可以看到，我在原生弹窗视图上滑动和点击，会被底下的 Flutter 内容所响应~

有人会说，直接添加到 navigationController 的 view 上不就行了吗？

// flutterVc.view.addSubview(popView)
+self.navigationController?.view.addSubview(popView)
+

不行，因为跳转到其它页面后会遮挡其它页面内容，看效果图便一目了然

接下来我们一起来看看 FlutterViewController 源码，便可知道原因了

# 二、源码

# 1、定位匹配的源码

首先找到与当前 Flutter 环境相匹配的源码内容

➜  flutter doctor -v
+[✓] Flutter (Channel stable, 2.10.4, on macOS 12.2.1 21D62 darwin-x64, locale
+    zh-Hans-CN)
+    • Flutter version 2.10.4 at /Users/lxf/developer/flutter
+    • Upstream repository https://github.com/flutter/flutter.git
+    • Framework revision c860cba910 (9 days ago), 2022-03-25 00:23:12 -0500
+    • Engine revision 57d3bac3dd
+    • Dart version 2.16.2
+    • DevTools version 2.9.2
+    • Pub download mirror https://pub.flutter-io.cn
+    • Flutter download mirror https://storage.flutter-io.cn
+...
+

从此处可以拿到 Engine 的 commit id

Engine revision 57d3bac3dd
+

将下方链接中的 【commit id】 进行替换即可得到相匹配的源码链接了

https://github.com/flutter/engine/blob/【commit id】/shell/platform/darwin/ios/framework/Source/FlutterViewController.mm
+

链接： engine/FlutterViewController.mm at 57d3bac3dd (opens new window)

# 2、定位造成问题的源码

经过源码的查看，可以很快定位到如下部分的内容：

... 
+
+- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
+  [self dispatchTouches:touches pointerDataChangeOverride:nullptr event:event];
+}
+
+- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event {
+  [self dispatchTouches:touches pointerDataChangeOverride:nullptr event:event];
+}
+
+- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event {
+  [self dispatchTouches:touches pointerDataChangeOverride:nullptr event:event];
+}
+
+- (void)touchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event {
+  [self dispatchTouches:touches pointerDataChangeOverride:nullptr event:event];
+}
+
+- (void)forceTouchesCancelled:(NSSet*)touches {
+  flutter::PointerData::Change cancel = flutter::PointerData::Change::kCancel;
+  [self dispatchTouches:touches pointerDataChangeOverride:&cancel event:nullptr];
+}
+
+...
+
+// Dispatches the UITouches to the engine. Usually, the type of change of the touch is determined
+// from the UITouch's phase. However, FlutterAppDelegate fakes touches to ensure that touch events
+// in the status bar area are available to framework code. The change type (optional) of the faked
+// touch is specified in the second argument.
+- (void)dispatchTouches:(NSSet*)touches
+    pointerDataChangeOverride:(flutter::PointerData::Change*)overridden_change
+                        event:(UIEvent*)event {
+...
+}
+

可以看到，在 FlutterViewController 内部，重写了 touchesXXX 系列的方法，然后统一调用 - dispatchTouches:pointerDataChangeOverride:event: 方法，将 UITouches 分发至 Flutter 引擎，从而与 Flutter 内容进行交互

这便是我们在原生弹窗上的点击、拖拽操作会被 Flutter 内容所响应的原因。

# 三、解决问题

既然我们已经知道原因所在，现在就好想办法去解决这个问题了

这里我直接给出最终实现代码：

// LXFFlutterViewController.swift
+
+import Foundation
+import Flutter
+
+protocol LXFFlutterForbidResponseProtocol { }
+
+class LXFFlutterViewController: FlutterViewController {
+    
+    var isForbidResponseForFlutter = false
+    
+    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+        if self.isForbidResponse() {
+            self.isForbidResponseForFlutter = true
+            return
+        }
+        print("touches began")
+        super.touchesBegan(touches, with: event)
+    }
+    
+    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
+        if isForbidResponseForFlutter { return }
+        print("touches move")
+        super.touchesMoved(touches, with: event)
+    }
+    
+    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+        if isForbidResponseForFlutter {
+            self.isForbidResponseForFlutter = false
+            return
+        }
+        print("touches ended")
+        super.touchesEnded(touches, with: event)
+    }
+    
+    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
+        if self.isForbidResponse() {
+            self.isForbidResponseForFlutter = false
+            return
+        }
+        print("touches cacelled")
+        super.touchesCancelled(touches, with: event)
+    }
+}
+
+extension LXFFlutterViewController {
+    func isForbidResponse() -> Bool {
+        var subViews = self.view?.subviews ?? []
+        subViews = subViews.reversed()
+        
+        for i in 0..<subViews.count {
+            let subView = subViews[i]
+            if self.isHadForbidResponseView(view: subView) {
+                return true
+            }
+        }
+        return false
+    }
+    
+    fileprivate func isHadForbidResponseView(view: UIView) -> Bool {
+        if view is LXFFlutterForbidResponseProtocol {
+            return true
+        }
+        let subViews = view.subviews
+        for i in 0..<subViews.count {
+            let subView = subViews[i]
+            if self.isHadForbidResponseView(view: subView) {
+                return true
+            }
+        }
+        return false
+    }
+}
+

上图可以看到，在 FlutterView 中，LXFPopView 这一类的弹窗视图一般都会在使用时才会插入到视图中，所以在 isForbidResponse 方法里进行反转遍历子视图，以减少遍历次数。

touchesMoved 调用次数较多，所以为了避免在 touchesMoved 中去高频率的遍历 subViews，这里使用了 isForbidResponseForFlutter 变量，在 touchesBegan 时判断并记录是否需要禁用 Flutter 内容响应触摸事件，在 touchesEnded 和 touchesCancelled 中对 isForbidResponseForFlutter 重置为 false

# 四、使用步骤

步骤一：

使用 LXFFlutterViewController

let flutterVc = LXFFlutterViewController(engine: fetchFlutterEngine(), nibName: nil, bundle: nil)
+

步骤二：

令弹窗视图所在类遵守协议：LXFFlutterForbidResponseProtocol

extension LXFPopView: LXFFlutterForbidResponseProtocol { }
+

看看效果如何：

完美 😃

最后附上 Demo 链接：LinXunFeng/flutter_hybrid_touch_response_demo (github.com) (opens new window)

+ +
+
#Dart#Flutter
Flutter - 低版本在iOS14上遇到的问题与解决方案
Flutter - 实现列表上下拉切换header

+ ← + Flutter - 实现列表上下拉切换header→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7bacc4/index.html b/pages/7bacc4/index.html new file mode 100644 index 000000000..cea75d629 --- /dev/null +++ b/pages/7bacc4/index.html @@ -0,0 +1,116 @@ + + + + + + iOS-组件化开发（三）：加载资源文件 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-06
目录

iOS-组件化开发（三）：加载资源文件

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

经过前两篇文章的学习，相信对组件化开发有了大致的了解，那我们这篇文章就来讲讲资源文件的加载吧

这里我新建了一个LXFMain组件库，主要是用来显示TabBar的玩意，然后再进行组件化抽离出来，其中的过程这里不再赘述，还没了解过的同学建议先阅读下这两篇文章吧

iOS-组件化开发（一）：远程私有库的基本使用

iOS-组件化开发（二）：远程私有库的更新与子库

这里跟之前不一样的地方在于多了图片资源，组件的核心代码放在Classes文件夹中，而图片我们则存放于Assets目录下，如图所示

存放位置

# 一、修改Spec

将关于资源加载的注释去掉

s.resource_bundles = {
+ # 'LXFMain' => ['LXFMain/Assets/*.png']
+ 'LXFMain' => ['LXFMain/Assets/*']
+}
+

回到LXFMain的模板库，我们进行一次本地的安装和测试(pod install)

可以看到，图片资源也安装进来了，但是运行的效果如下图，图片并不能成功加载出来

没有图标

# 二、修改加载资源代码

这是当前加载图片的相关代码

[UIImage imageNamed:@"图片名称"];
+

show in finder

右击显示包内容

LXFMain.framework

图片就在这个LXFMain.bundle里面(这里就不截图看了)，这里主要是让大家对这个目录结构有个了解

我们对imageNamed进行跳转到定义操作

imageNamed

// load from main bundle
+

可以看到，官方注释着imageNamed加载的是main bundle中的资源,mainBundle的位置如下图

mainBundle

这样当然就无法加载到图片啦，我们需要让它加载自己当前所在bundle里的图片 ，所以加载图片的代码需要进行修改

NSString *normalImgName = @"个人@2x.png";
+NSBundle *curBundle = [NSBundle bundleForClass:self.class]; // 获取当前bundle
+NSString *normalImgPath = [curBundle pathForResource:normalImgName ofType:nil inDirectory:@"LXFMain.bundle"];
+UIImage *normalImage = [UIImage imageWithContentsOfFile:normalImgPath];
+

但是直接写LXFMain.bundle并不好，不可控，所以还需要改进一下：

NSString *normalImgName = [NSString stringWithFormat:@"%@@2x.png", normalImg];
+NSBundle *curBundle = [NSBundle bundleForClass:self.class];
+//  *********** 重点 ***********   //
+NSString *curBundleName = curBundle.infoDictionary[@"CFBundleName"];
+NSString *curBundleDirectory = [NSString stringWithFormat:@"%@.bundle", curBundleName];
+NSString *normalImgPath = [curBundle pathForResource:normalImgName ofType:nil inDirectory:curBundleDirectory];
+//  ***************************   //
+UIImage *normalImage = [UIImage imageWithContentsOfFile:normalImgPath];
+

成功加载

# 三、聊聊xib

Xib的加载也是如此

NSBundle *curBundle = [NSBundle bundleForClass:self.class];
+LXFCenterView *centerView = (LXFCenterView *)[curBundle loadNibNamed:@"LXFCenterView" owner:nil options:nil].firstObject;
+centerView.frame = CGRectMake(30, 140, 200, 100);
+[self.view addSubview:centerView];
+

不过xib中值得一提的是，如果是直接在xib中拖入一个imageView控件来设置图片的加载，我们则需要在图片名字前加上当前bundle名称

LXFMain.bundle/个人
+

这里除了当前xib要加载的图片不属于mainBundle这个原因之外，还有一点就是xib文件与bundle存放位置属于同一级别，故直接使用相对路径的方式，在图片名字前加上bundle名称即可。

同一目录级别

xib上的操作

虽然无法在xib上直接看到效果，不过确实是有效的 +xib成功显示图片

# 四、遇到的小问题

[!] Unable to find a pod with name, author, summary, or description matching `lxfmain`
+

我做完一切操作后发现搜索报上面那个错，解决方案是删除本地索引文件，然后再搜索一遍，系统会自动帮你再生成一切本地索引文件，然后就搞定了～

rm -rf ~/Library/Caches/CocoaPods/search_index.json 
+pod search lxfmain
+
+ +
+
#iOS#Git#GitHub#Cocoapods#组件化
iOS-组件化开发（二）：远程私有库的更新与子库
iOS-组件化开发（四）：fastlane实现pod自动化

+ ← + iOS-组件化开发（四）：fastlane实现pod自动化→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7cd064/index.html b/pages/7cd064/index.html new file mode 100644 index 000000000..ec282160b --- /dev/null +++ b/pages/7cd064/index.html @@ -0,0 +1,148 @@ + + + + + + Kotlin - 参数与异常 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-19
目录

Kotlin - 参数与异常

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 具名参数

具名参数就是在调用函数时，给函数的实参附上形参：

fun sum(arg1: Int, arg2: Int) = arg1 + arg2
+
+fun main(vararg args: String) {
+    sum(arg1 = 2, arg2 = 3)
+    sum(arg2 = 3, arg1 = 2)
+}
+

使用具名参数可以把实参精确的传递给指定形参，因此具名参数可以不用按顺序传入。

# 变长参数

vararg 可以让某个参数接收多个值，vararg 修饰的参数称为变长参数：

fun hello(vararg ints: Int, string: String) {
+    ints.forEach(::println)
+    println(string)
+}
+
+fun main(vararg args: String) {
+    // hello(1, 2, 3, 4, 5, "hello") // IDE报错：Type mismatch. Required:Int Found:String
+    hello(1, 2, 3, 4, 5, string = "hello")
+}
+
  • 变长参数可以不为最后一个参数
  • 如果传参时有歧义，需要使用具名参数

# 展开操作符（Spread Operator）

当变长参数需要传入一个数组时，可以使用展开操作符 * ，* 会将数组展开后一一传入：

val array = intArrayOf(1, 2, 3, 4, 5)
+hello(*array, string = "Hello") // vararg变长参数场景下，*号可以把Array数组展开，但不支持List
+

展开操作符 * 有以下几个特点：

  • 只支持展开 Array
  • 只用于变长参数列表的实参
  • 不是一般意义上的操作符，不能重载

# 默认参数

默认参数，即可以为函数任意位置的参数指定默认值：

fun say(age: Int = 20, name: String, height: Float) {
+    ...
+}
+
+fun main(vararg args: String) {
+    say(18, "lqr", 2.0f)
+    say(name = "lqr", height = 2.0f)
+}
+

如果默认参数导致传参出现歧义时，需要使用具名参数。换句话说，就是默认参数后面的参数需要使用具名参数传值。

# 多返回值

借助 Pair 和 Triple 可以实现函数返回多值（注：伪多返回值），因为 Pair 和 Triple 支持 解构 语法：

fun main(vararg args: String) {
+    val (myName, myAge) = multiReturnValues()
+    println("myName is $myName, myAge is $myAge")
+
+    val (name, age, height) = multiReturnValues(180.0)
+    println("name is $name, age is $age, height is $height")
+}
+
+fun multiReturnValues(): Pair<String, Int> {
+    // return Pair("lqr", 18)
+    return "lqr" to 18
+}
+
+fun multiReturnValues(height: Double): Triple<String, Int, Double> {
+    return Triple("lqr", 18, height)
+}
+

to 是中缀表达式，返回的就是 Pair，也就是 Map 里的键值对。

# 捕获异常

Kotlin 支持 try...catch 或 try...catch...finally 捕获异常，catch 分支匹配异常类型，finally 无论代码是否抛出异常都会执行：

try {
+    val arg1 = args[0].toInt()
+    val arg2 = args[1].toInt()
+    println("$arg1 + $arg2 = ${sum(arg1, arg2)}")
+} catch (e: NumberFormatException) {
+    println("输入的数据不是数字")
+} catch (e: ArrayIndexOutOfBoundsException) {
+    println("需要输入2个数字")
+} catch (e: Exception) {
+    println("出现未知异常：${e.message}")
+} finally {
+    println("感谢使用")
+}
+

跟 if、when 一样，try...catch 也可以是表达式，可以用来赋值：

val result = try {
+    args[0].toInt() / args[1].toInt()
+} catch (e: Exception) {
+    0
+}
+
+ +
+
#具名参数#变长参数#默认参数#多返回值#Exception
Kotlin - 分支与循环
Kotlin - 面向对象之抽象类与接口

+ ← + Kotlin - 面向对象之抽象类与接口→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7e1f42/index.html b/pages/7e1f42/index.html new file mode 100644 index 000000000..3bda8eb32 --- /dev/null +++ b/pages/7e1f42/index.html @@ -0,0 +1,179 @@ + + + + + + DesignPattern - 迭代器模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-11-29
目录

DesignPattern - 迭代器模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、迭代器模式介绍

迭代器模式（Iterator Pattern）提供一种方法顺序访问一个聚合对象中各个元素，而又无须暴露该对象的内部实现，属于行为型模式。

  • 核心组成

    • 抽象容器（Aggregate）：提供创建具体迭代器角色的接口，一般是接口，包括一个 iterator()方法，例如 java 中的 Collection 接口，List 接口，Set 接口等
    • 具体容器角色（ConcreteAggregate）：实现抽象容器的具体实现类，比如 List 接口的有序列表实现 ArrayList，List 接口的链表实现 LinkedList，Set 接口的哈希列表的实现 HashSet 等
    • 抽象迭代器角色（Iterator）：负责定义访问和遍历元素的接口，包括几个核心方法，取得下一个元素的方法next()，判断是否遍历结束的方法isDone()（或者叫hasNext()），移除当前对象的方法remove()
    • 具体迭代器角色（ConcreteIterator）：实现迭代器接口中定义的方法，并要记录遍历中的当前位置，完成集合的迭代

  • 应用场景

    • 一般来说，迭代器模式是与集合共存的，只要实现一个集合，就需要同时提供这个集合的迭代器，就像 java 中的 Collection、List、Set、Map 等，都有自己的迭代器
    • Java 中的 iterator 迭代器

  • 优点

    • 可以做到不暴露集合的内部结构，又可以让外部代码透明地访问集合内部的数据
    • 支持以不同的方式遍历一个聚合对象

  • 缺点

    • 对于比较简单的遍历（像数组或者有序列表），使用迭代器方式遍历较为繁琐
    • 迭代器模式在遍历的同时，更改迭代器所在的集合结构会导致出现异常

# 二、迭代器模式代码实现

下面以仿写集合 List 为例

创建 抽象迭代器：

/**
+ * 抽象迭代器
+ *
+ * @author GitLqr
+ */
+public interface Iterator {
+	// 获取下一个元素
+	Object next();
+
+	// 判断是否有下一个
+	boolean hasNext();
+}
+

创建 具体迭代器：

/**
+ * 具体迭代器
+ *
+ * @author GitLqr
+ */
+public class MyIterator implements Iterator {
+
+	private List list;
+	private int index = 0;
+
+	public MyIterator(List list) {
+		super();
+		this.list = list;
+	}
+
+	@Override
+	public Object next() {
+		Object obj = null;
+		if (hasNext()) {
+			obj = list.get(index);
+			index++;
+		}
+		return obj;
+	}
+
+	@Override
+	public boolean hasNext() {
+		return index < list.size();
+	}
+}
+

创建 抽象容器：

/**
+ * 抽象容器
+ *
+ * @author GitLqr
+ */
+public interface ICollection {
+
+	void add(Object object);
+
+	void remove(Object object);
+
+	Iterator iterator();
+}
+

创建具体容器：

/**
+ * 具体容器
+ *
+ * @author GitLqr
+ */
+public class MyCollection implements ICollection {
+
+	private List list = new ArrayList<>();
+
+	@Override
+	public void add(Object object) {
+		list.add(object);
+	}
+
+	@Override
+	public void remove(Object object) {
+		list.remove(object);
+	}
+
+	@Override
+	public Iterator iterator() {
+		return new MyIterator(list);
+	}
+}
+

使用：

public static void main(String[] args) {
+    ICollection collection = new MyCollection();
+    collection.add("Apple");
+    collection.add("Banana");
+    collection.add("Pear");
+
+    Iterator iterator = collection.iterator();
+    while (iterator.hasNext()) {
+        System.out.println(iterator.next());
+    }
+}
+
+ +
+
#设计模式#迭代器模式
DesignPattern - 命令模式【行为型】
DesignPattern - 备忘录模式【行为型】

+ ← + DesignPattern - 备忘录模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/7f9fec/index.html b/pages/7f9fec/index.html new file mode 100644 index 000000000..08a14e91a --- /dev/null +++ b/pages/7f9fec/index.html @@ -0,0 +1,195 @@ + + + + + + iOS - 采集音视频及写入文件 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-26
目录

iOS - 采集音视频及写入文件

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

音视频采集包括两部分：视频采集和音频采集。在iOS中可以同步采集视频与音频，通过系统框架AVFoundation，可以帮助我们采集音频与视频，对于视频还可以进行切换前后摄像头，最终我们将录制好的视频写入沙盒中

目录

# 音视频数据的采集与展示

# 一、初始化视频的输入与输出

// 懒加载一个session，所有的操作都需要session来执行
+fileprivate lazy var session: AVCaptureSession = AVCaptureSession()
+// 保存视频输出
+fileprivate var videoOutput: AVCaptureVideoDataOutput?
+// 保存视频输入
+fileprivate var videoInput: AVCaptureDeviceInput?
+// 保存预览图层
+fileprivate var previewLayer: AVCaptureVideoPreviewLayer?
+

设置视频输入源与输出源

// 设置视频输入源
+guard let devices = AVCaptureDevice.devices() as? [AVCaptureDevice] else { return }
+// 获取我们的前置摄像头(后置为.back)
+guard let device = devices.filter({ $0.position == .front }).first else { return }
+guard let input = try? AVCaptureDeviceInput(device: device) else { return }
+self.videoInput = input
+
+// 设置视频输出源
+let output = AVCaptureVideoDataOutput()
+let queue = DispatchQueue.global()
+// 设置代理，并在代理中获取采集到的数据，需要遵守 AVCaptureVideoDataOutputSampleBufferDelegate
+output.setSampleBufferDelegate(self, queue: queue)
+self.videoOutput = output
+

设置音频的输入源与输出源

// 设置音频的输入源
+guard let device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeAudio) else { return }
+guard let input = try? AVCaptureDeviceInput(device: device) else {return}
+
+// 设置音频输出源
+let output = AVCaptureAudioDataOutput()
+let queue = DispatchQueue.global()
+// 需要遵守 AVCaptureAudioDataOutputSampleBufferDelegate
+output.setSampleBufferDelegate(self, queue: queue)
+

添加音频与视频的输入与输出到session中，但是每次添加之前需要先判断是否可以添加

// 添加输入与输出
+
+// 注意：每次对session进行设置之前都需要调用session的【beginConfiguration】方法
+// 来告诉系统你现在要开始进行配置，结束配置后再调用【commitConfiguration】方法来提交配置
+session.beginConfiguration()
+if session.canAddInput(input) {
+    session.addInput(input)
+}
+if session.canAddOutput(output) {
+    session.addOutput(output)
+}
+session.commitConfiguration()
+

# 二、实现音视频的采集代理

音视频虽然需要遵守的代理名称不一样，但是需要实现的方法是一致的，所以要拿到音频或者视频就得先进行判断，需要用到AVCaptureOutput的这个方法

// This convenience method returns the first AVCaptureConnection in the receiver's
+// connections array that has an AVCaptureInputPort of the specified mediaType. If 
+// no connection with the specified mediaType is found, nil is returned.
+
+open func connection(withMediaType mediaType: String!) -> AVCaptureConnection!
+
extension ViewController: AVCaptureVideoDataOutputSampleBufferDelegate, AVCaptureAudioDataOutputSampleBufferDelegate {
+    func captureOutput(_ captureOutput: AVCaptureOutput!, didOutputSampleBuffer sampleBuffer: CMSampleBuffer!, from connection: AVCaptureConnection!) {
+        if videoOutput?.connection(withMediaType: AVMediaTypeVideo) == connection {
+            print("视频数据")
+        } else {
+            print("音频数据")
+        }
+    }
+}
+

# 三、初始化一个预览图层用来显示采集到的视频（非采集所必须的步骤）

// 创建预览图层
+guard let previewLayer = AVCaptureVideoPreviewLayer(session: session) else {return}
+previewLayer.frame = view.bounds
+
+// 将图层添加到控制器的view的layer中
+view.layer.insertSublayer(previewLayer, at: 0)
+self.previewLayer = previewLayer
+

现在基本功能都有了，如果想要开始采集音视频只需要调用

// 开始录制
+session.startRunning()
+// 结束录制
+session.stopRunning()
+

# 切换镜头

其实就是换掉当前的视频输入法制，这里的过程跟上面的设置输入源一样。

// 1.取出之前镜头的方向
+guard let videoInput = videoInput else { return }
+let position: AVCaptureDevicePosition = videoInput.device.position == .front ? .back : .front
+
+guard let devices = AVCaptureDevice.devices() as? [AVCaptureDevice] else { return }
+guard let device = devices.filter({ $0.position == position }).first else { return }
+guard let newInput = try? AVCaptureDeviceInput(device: device) else { return }
+
+// 2.移除之前的input，添加新的input
+session.beginConfiguration()
+session.removeInput(videoInput)
+if session.canAddInput(newInput) {
+    session.addInput(newInput)
+}
+session.commitConfiguration()
+
+// 3.保存最新的input
+self.videoInput = newInput
+

# 录制视频写入文件

fileprivate var movieOutput: AVCaptureMovieFileOutput?
+

在开始采集音视频的时候就要开始写入文件

// 开始写入文件 
+
+// 1、创建写入文件的输出
+let fileOutput = AVCaptureMovieFileOutput()
+self.movieOutput = fileOutput // 保存起来，用于停止写入文件
+
+// 设置类型，不然报错(这两句很重要)
+let connection = fileOutput.connection(withMediaType: AVMediaTypeVideo)
+connection?.automaticallyAdjustsVideoMirroring = true
+
+if session.canAddOutput(fileOutput) {
+    session.addOutput(fileOutput)
+}
+
+// 2、直接开始写入文件
+let filePath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first! + "/abc.mp4"
+let fileUrl = URL(fileURLWithPath: filePath)
+fileOutput.startRecording(toOutputFileURL: fileUrl, recordingDelegate: self)
+

在停止采集音视频的时候停止写入文件

// 停止写入文件
+movieOutput?.stopRecording()
+

详情请看 DEMO (opens new window)

+ +
+
#iOS#Swift
iOS - 给高仿微信添加直播聊天功能
iOS - 视频采集详解

+ ← + iOS - 视频采集详解→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/804129/index.html b/pages/804129/index.html new file mode 100644 index 000000000..440852ac4 --- /dev/null +++ b/pages/804129/index.html @@ -0,0 +1,226 @@ + + + + + + Flutter - 支持观察NestedScrollView，兼容性更强 😈 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-07-06
目录

Flutter - 支持观察NestedScrollView，兼容性更强 😈

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

时间过得真快，距离上一篇介绍 scrollview_observer 功能的文章已过去了 9个月，目前 scrollview_observer 也来到了 1.21.0 版本，现在就带大家来看看都更新了哪些内容吧

GitHub: https://github.com/fluttercandies/flutter_scrollview_observer

# 二、功能点

# 支持 NestedScrollView

scrollview_observer 的 监听滚动视图中正在显示的子部件 与 滚动到指定下标位置 这两大功能，现已对 NestedScrollView 进行了支持，如下图所示

等下一篇文章再跟大家详细介绍使用步骤 : )

# 支持 center

如下代码所示，在一些场景下，你可能会对 CustomScrollView 的 center 进行设置，以此来实现聊天消息页。

Widget _buildScrollView() {
+  return CustomScrollView(
+    center: _centerKey,
+    anchor: 1,
+    controller: scrollController,
+    slivers: [
+      _buildSliverListView(
+        color: Colors.redAccent,
+        onBuild: (ctx) {
+          _sliverListCtx1 = ctx;
+        },
+      ),
+      _buildSliverListView(
+        color: Colors.blueGrey,
+        onBuild: (ctx) {
+          _sliverListCtx2 = ctx;
+        },
+      ),
+      // center
+      SliverPadding(padding: EdgeInsets.zero, key: _centerKey),
+      _buildSliverListView(
+        color: Colors.teal,
+        onBuild: (ctx) {
+          _sliverListCtx3 = ctx;
+        },
+      ),
+      _buildSliverListView(
+        color: Colors.purple,
+        onBuild: (ctx) {
+          _sliverListCtx4 = ctx;
+        },
+      ),
+    ],
+  );
+}
+

但又想使用下标跳转 item 的功能，放心，scrollview_observer 具有良好的兼容性，在 1.19.1 版本下就已得到支持，可随便你如何设置 center，不需要额外做其它操作。

# observeIntervalForScrolling

相信大家都还记得，自动触发观察的时机有以下三种

枚举值 描述
scrollStart 开始滚动
scrollUpdate 滚动中
scrollEnd 结束滚动

其中 scrollUpdate 触发观察太过于频繁，其实很多次观察结果并不会相差多少，在大多数使用场景下，对我们来说也不太重要。

为此在本次更新中为 ObserverController 新增了 observeIntervalForScrolling 属性，用来设置触发观察的间隔，从而大量减少不必要的观察计算。

需要注意以下两点：

  • 为了不改变之前的行为，所以默认值为 Duration.zero，所以大家需要自行调整，推荐设置为 Duration(milliseconds: 500)。
  • 该属性仅对 scrollUpdate 有效。

# visibleMainAxisSize

item 显示的尺寸大小

如图所示，各固定 200 高度的 item 在 ListView 中的 visibleMainAxisSize。

# visibleFraction

在 sliver 中 item 的显示占比

计算公式：visibleFraction = visibleMainAxisSize / paintExtent

如图所示，当前 SliverList 的绘制长度 paintExtent 为 376，其 item20 的可视大小 visibleMainAxisSize 为 30，所以 item20 的可视占比 visibleFraction 为 30/376。

# SliverObserveContext

用于获取 sliver 的 BuildContext，这在观察 sliver 的场景下非常有用。

如下 CustomScrollView 配置了多个 sliver

Widget _buildScrollView() {
+  return CustomScrollView(
+    controller: scrollController,
+    physics: const ClampingScrollPhysics(),
+    slivers: [
+      // banner
+      SliverPersistentHeader(...),
+      // 中间任意视图
+      SliverObserveContextToBoxAdapter(...),
+      // tabBar
+      SliverPersistentHeader(...),
+      // 构建多个 SliverGird
+      ...List.generate(modelList.length, (mainIndex) {
+        return _buildSectionGridView(mainIndex);
+      }),
+    ],
+  );
+}
+

我们需要观察当前哪个 SliverGrid 是第一个，然后去同步更新 TabBar 的选中下标。

/// 记录各 Sliver 的下标与 BuildContext
+Map<int, BuildContext> sliverIndexCtxMap = {};
+
+SliverViewObserver(
+  controller: sliverObserverController,
+  sliverContexts: () => sliverIndexCtxMap.values.toList(),
+  child: child,
+  onObserveViewport: (result) {
+    ...
+  },
+);
+

但在研发过程中，我们很有可能会给 SliverGrid 再加一层 Sliver 去添加装饰、间距等，而 onObserveViewport 只认最外层的 sliver，所以在这里我们就用 SliverObserveContext 去进行包裹成为最外层，在其 onObserve 回调中就可以拿到对应的 BuildContext 并记录起来。

Widget _buildSectionGridView(int mainIndex) {
+  Widget resultWidget = SliverGrid(
+    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(...),
+    delegate: SliverChildBuilderDelegate(
+      (BuildContext context, int index) {
+        // 拿到了 SliverGrid 的 BuildContext
+        return Container(
+          ...
+        );
+      },
+      childCount: 10,
+    ),
+  );
+  resultWidget = SliverPadding(
+    padding: const EdgeInsets.all(8),
+    sliver: resultWidget,
+  );
+  // 在最外层使用 SliverObserveContext 进行包裹，以获取是外层的 BuildContext。
+  resultWidget = SliverObserveContext(
+    onObserve: (context) {
+      sliverIndexCtxMap[mainIndex] = context;
+    },
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+

# 聊天保持位置功能

保持位置功能目前有三种模式可选

enum ChatScrollObserverHandleMode {
+  /// 常规模式
+  /// 来一条消息就插入一条消息
+  normal,
+
+  /// 生成式模式
+  /// 比如 ChatGPT 这种流式自更新的消息
+  generative,
+
+  /// 指定模式
+  /// 可以灵活指定用来做为参照的消息item
+  specified,
+}
+

本次更新的是指定模式，因为原 refItemRelativeIndex 和 refItemRelativeIndexAfterUpdate 两个参数仅能表达相对下标之意，而无法表达参考坐标系，所以将其废弃。

新增 refItemIndex 与 refItemIndexAfterUpdate，并结合 refIndexType 来更好地指定参考 item。

我们先来看一下 refIndexType 的类型定义

enum ChatScrollObserverRefIndexType {
+  ///     relativeIndex        trailing
+  ///
+  ///           6         |     item16    | cacheExtent
+  ///   ----------------- -----------------
+  ///           5         |     item15    |
+  ///           4         |     item14    |
+  ///           3         |     item13    | 正在显示中的item
+  ///           2         |     item12    |
+  ///           1         |     item11    |
+  ///   ----------------- -----------------
+  ///           0         |     item10    | cacheExtent <---- start
+  ///
+  ///                          leading
+  relativeIndexStartFromCacheExtent,
+
+  ///     relativeIndex        trailing
+  ///
+  ///           5         |     item16    | cacheExtent
+  ///   ----------------- -----------------
+  ///           4         |     item15    |
+  ///           3         |     item14    |
+  ///           2         |     item13    | 正在显示中的item
+  ///           1         |     item12    |
+  ///           0         |     item11    |             <---- start
+  ///   ----------------- -----------------
+  ///          -1         |     item10    | cacheExtent
+  ///
+  ///                          leading
+  relativeIndexStartFromDisplaying,
+
+  /// 直接指定 item 的下标
+  itemIndex,
+}
+

如上，一共有 3种 参考模式供你选择

  • relativeIndexStartFromCacheExtent: 从渲染区的 item 开始计算下标。这种模式一般用于普通消息插入，因为插入消息必定是在 0 处，插入消息前后不变的就是原来的最新消息，其下标从 0 变成了 1，此时 refItemIndex 可指定为 0，而 refItemIndexAfterUpdate 指定为 1。
  • relativeIndexStartFromCacheExtent: 从展示区的 item 开始计算下标。该模式比较少用，一般是结合观察功能，因为通过观察功能，我们是可以轻松得知正在显示的 item 有哪些，假设你此时对正在显示的第一个 item 做了内容变更，但又不想影响第二个正在显示的 item 的偏移，那这个模式正好适合当前这种的场景。因为改变前后不变的是第二个正在显示的 item，所以 refItemIndex 指定为 1， refItemIndexAfterUpdate 也指定为 1。
  • itemIndex: 三种模式中最容易理解的模式，用来参照的 item 的下标是什么，你就指定什么，比如上述中 item11 发生了变化，我们想保持位置就可以拿不变的 item12 来做参照，所以 refItemIndex 和 refItemIndexAfterUpdate 都指定为 12。

记住，不管你选择哪种参考模式，都需要注意的一点，即指定的参照 item 需要在变化前后都有被渲染，这样才能确保保持位置的功能可以正常生效！

# 三、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍

GitHub: https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻
Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻

+ ← + Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/8102b2/index.html b/pages/8102b2/index.html new file mode 100644 index 000000000..c72075543 --- /dev/null +++ b/pages/8102b2/index.html @@ -0,0 +1,175 @@ + + + + + + Android音视频 - MediaCodec编码mp4踩坑记录 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-06-10
目录

Android音视频 - MediaCodec编码mp4踩坑记录

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

项目需要在低端 Android 设备上驱动相机获取 YUV 图像，同时，还需要进行录像，YUV 图像的获取与处理之前已经趟过去了，总体感觉只要掌握了相机与 YUV 原理等知识点后，结合 libyuv 这个牛逼的库基本就没什么了，而录像这一块则是使用 MediaCodec + MediaMuxer 来处理，本篇就是我在使用原生 MediaCodec 编码 mp4 文件的踩杭记要，主要有两个问题：

  • 录像变色 (video wrong color)
  • 录像时长缩水（play too fast）

注：低端的 Android 设备硬件条件有多差呢？大概就是 2014 年 Android4.x 手机那种水平吧，CPU 处理速度很感人，对此，唯有硬编码才是王道。

# 一、录像变色

在探究该问题前，先来了解一下 MediaCodec 的两种编码模式：

  • ByteBuffer 模式（手动档）： +
    • 格式：COLOR_FORMAT 对应的值是 MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420SemiPlanar(图像格式 NV21)。
    • 操作：通过 MediaCodec.dequeueInputBuffer() 获取数据输入缓冲区，再通过 MediaCodec.queueInputBuffer() 手动将 YUV 图像传给 MediaCodec。
  • Surface 模式（自动档）: +
    • 格式：COLOR_FORMAT 对应的值是 MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface。
    • 操作：通过 MediaCodec.createInputSurface() 创建编码数据源 Surface，再通过 OpenGL 纹理，将相机预览图像绘制到该 Surface 上。

# 1、现象

相机预览正常，但是录制出来的 mp4 视频颜色很阴间。

说明：就跟 YUV 图像把 u/v 颠倒之后的效果一样。

# 2、分析

ByteBuffer 模式 下，从相机处获取到原始的 NV21 图像，交给设置了 COLOR_FORMAT 为 COLOR_FormatYUV420SemiPlanar 的 MediaCodec，结果在不同的 Android 设备上，有的正常，有的不正常（少数），刚开始以为是个别设备上不支持这种 COLOR_FORMAT，但事实并非如此。stackoverflow 某个歪果仁对此问题的解释如下：

The YUV formats used by Camera output and MediaCodec input have their U/V planes swapped.
+
+If you are able to move the data through a Surface you can avoid this issue; however, you lose the ability to examine the YUV data. An example of recording to a .mp4 file from a camera can be found on bigflake.
+
+Some details about the colorspaces and how to swap them is in this answer.
+
+...
+

注：stackoverflow 文章链接：https://stackoverflow.com/questions/19915962/android-mediacodec-video-wrong-color-and-playing-too-fast (opens new window)

所以说，这是 MediaCodec 本身的 bug，它自己会对输入的 YUV 图像的 u/v 进行交换，解决的方案有 2 种：

  • 使用 ByteBuffer 模式，在把 NV21 图像传给 MediaCodec 之前，先把 NV21 转成 NV12（毕竟这俩货仅仅只是 u/v 相反而已），但前面已经提到了，只是少数设备会有这种情况，适配起来估计有够呛的。不推荐
  • 使用 Surface 模式，可以完美避免这种情况，但同时会丧失对原 YUV 图像的处理能力，不过可以使用 OpenGL 方式来处理图像。推荐

# 3、实现

大致步骤如下：

  • 一方面，使用 OpenGL 纹理创建纹理，并包装为 SurfaceTexture 给相机作为 preview 窗口，这样相机图像就会呈现在纹理上。
  • 另一方面，使用 mMediaCodec.createInputSurface() 作为 MediaCodec 的编码数据源。
  • 最后，在相机预览的同时，让纹理上的图像绘制到 inputSurface。

说明：Camera ---> TextureId(OpenGL) ---> InputSurface(MediaCodec)

具体实现可以在 bigflake 的 Demo(CameraToMpegTest) 中获取：https://www.bigflake.com/mediacodec/CameraToMpegTest.java.txt (opens new window)

# 二、录像时长缩水（丢帧）

解决该问题有两个关键：

  • 时间戳对齐： +
    • ByteBuffer 模式：通过 MediaCodec.queueInputBuffer() 手动将 YUV 图像传给 MediaCodec 的同时，需要传递当前的时间戳，注意时间单位是微秒(us)。
    • Surface 模式：通过 MediaCodec.createInputSurface() 创建出来的 inputSurface，会有与之对比的 mEGLDisplay、mEGLSurface，在执行 EGL14.eglSwapBuffers(mEGLDisplay, mEGLSurface) 之前，通过 EGLExt.eglPresentationTimeANDROID(mEGLDisplay, mEGLSurface, nsecs) 对 MediaCodec 的 inputSurface 的数据设置时间戳。
  • 媒体格式配置： +
    • MediaFormat 的关键帧间隔(KEY_I_FRAME_INTERVAL) 与 帧率(KEY_FRAME_RATE) 必须配置得当。

说明：这里是核心总结，可先跳过往下看，之后再回过头来看，会比较好理解。

# 1、现象

录制一段 10s 的视频，从设备上提取出来后，使用播放器播放观察。发现有的设备正常，个别设备录制出来的视频，时长仅仅只有一半，这也就是网上都在说的 play too fast 问题。

安利：OnlyStopWatch_x64.exe 这是一个计时器小工具，对于视频录制、直播这种需要观察时间快慢的场景很实用。画面丢失、播放太快等问题，都很容易看出来。

# 2、分析

前面提到的 stackoverflow 问答中，那个歪果仁同时也表达了他对 使用MediaCodec录制出来的视频播放太快 这个问题的解释：

...
+
+There is no timestamp information in the raw H.264 elementary stream. You need to pass the timestamp through the decoder to MediaMuxer or whatever you're using to create your final output. If you don't, the player will just pick a rate, or possibly play the frames as fast as it can.
+

注：stackoverflow 文章链接：https://stackoverflow.com/questions/19915962/android-mediacodec-video-wrong-color-and-playing-too-fast (opens new window)

他认为 H.264 不包含时间戳信息，你需要把时间戳通过编码器(MediaCodec)给到媒体复用器(MediaMuxer)，否则，播放器会选择一个速率，尽快地播放帧。

# 3、实现

如果是 ByteBuffer 模式，则核心代码实现如下：

private void feedMediaCodecData(byte[] data) {
+    if (!isEncoderStart)
+        return;
+    int bufferIndex = -1;
+    try {
+        bufferIndex = mMediaCodec.dequeueInputBuffer(0);
+    } catch (IllegalStateException e) {
+        e.printStackTrace();
+    }
+    if (bufferIndex >= 0) {
+        ByteBuffer buffer = null;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            try {
+                buffer = mMediaCodec.getInputBuffer(bufferIndex);
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        } else {
+            if (inputBuffers != null) {
+                buffer = inputBuffers[bufferIndex];
+            }
+        }
+        if (buffer != null) {
+            buffer.clear();
+            buffer.put(data);
+            buffer.clear();
+            // 纳秒(ns) 转 微秒(us)
+            mMediaCodec.queueInputBuffer(bufferIndex, 0, data.length, System.nanoTime() / 1000, MediaCodec.BUFFER_FLAG_KEY_FRAME);
+        }
+    }
+}
+

这时要注意，MediaCodec 需要的时间单位是微秒(us)，如果你不使用正确的时间，可能会出问题，比如：https://stackoverflow.com/questions/20475332/mediacodec-h264-encoder-not-working-on-snapdragon-800-devices (opens new window)

补充：秒(s)、毫秒(ms)、微秒(us)、纳秒(ns)，之间的比例都是 1:1000。

如果是 Surface 模式，则核心代码实现如下：

// 更新纹理图像
+// Acquire a new frame of input, and render it to the Surface.  If we had a GLSurfaceView we could switch EGL contexts and call drawImage() a second time to render it on screen.  The texture can be shared between contexts by passing the GLSurfaceView's EGLContext as eglCreateContext()'s share_context argument.
+mSurfaceTexture.updateTexImage();
+mSurfaceTexture.getTransformMatrix(mSTMatrix);
+
+// 传入时间戳信息
+// Set the presentation time stamp from the SurfaceTexture's time stamp.  This will be used by MediaMuxer to set the PTS in the video.
+mInputSurface.setPresentationTime(mSurfaceTexture.getTimestamp());
+// Submit it to the encoder.  The eglSwapBuffers call will block if the input is full, which would be bad if it stayed full until we dequeued an output buffer (which we can't do, since we're stuck here).  So long as we fully drain the encoder before supplying additional input, the system guarantees that we can supply another frame without blocking.
+mInputSurface.swapBuffers();
+

具体实现可以在 bigflake 的 Demo(CameraToMpegTest) 中获取：https://www.bigflake.com/mediacodec/CameraToMpegTest.java.txt (opens new window)

# 4、修补

尽管按照上面的步骤，把时间戳正确传递给 MediaMuxer 了，但依旧无济于事。经过将我项目中的代码与 bigflake 的 CameraToMpegTest 中的代码进行对比，发现，MediaFormat 的配置上也很关键，必须配置得当，否则也还是会出现时长缩水的问题，于是我将原来项目中的代码进行修改，将帧率修改为 30f，关键帧间距改为 5s，丢帧的问题这才解决了，MediaFormat 配置具体代码如下：

protected static final String MIME_TYPE = "video/avc";
+protected static final int FRAME_INTERVAL = 5; // 间隔5s插入一帧关键帧
+protected static final int FRAME_RATE = 30;
+protected static final float BPP = 0.50f;
+protected int mColorFormat = MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface;
+
+private void initMediaCodec(){
+    final MediaFormat format = MediaFormat.createVideoFormat(MIME_TYPE, mWidth, mHeight);
+    format.setInteger(MediaFormat.KEY_COLOR_FORMAT, mColorFormat);
+    format.setInteger(MediaFormat.KEY_BIT_RATE, calcBitRate());
+    format.setInteger(MediaFormat.KEY_FRAME_RATE, FRAME_RATE);
+    format.setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, FRAME_INTERVAL);
+
+    try {
+        mMediaCodec = MediaCodec.createEncoderByType(MIME_TYPE);
+    } catch (IOException e) {
+        e.printStackTrace();
+    }
+    mMediaCodec.configure(format, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE);
+    // get Surface for encoder input
+    // this method only can call between #configure and #start
+    // API >= 18
+    mSurface = mMediaCodec.createInputSurface();
+    mMediaCodec.start();
+}
+
+protected int calcBitRate() {
+    final int bitrate = (int) (BPP * FRAME_RATE * mWidth * mHeight);
+    Log.i(TAG, String.format("bitrate=%5.2f[Mbps]", bitrate / 1024f / 1024f));
+    return bitrate;
+}
+

另外，亲测只要 MediaFormat 配置没问题，就算时间戳不传递也没影响，emmm...，既然时间戳的代码已经写好了，又暂时没出现其他坑，为了安全起见，还是把时间戳信息带上吧。

+ +
+
#音视频#MediaCodec
Android音视频 - Libyuv使用实战
热修复与插件化基础 - dex与class

+ ← + 热修复与插件化基础 - dex与class→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/810563/index.html b/pages/810563/index.html new file mode 100644 index 000000000..2947a7c1b --- /dev/null +++ b/pages/810563/index.html @@ -0,0 +1,112 @@ + + + + + + Flutter - 解决混合开发iOS脚本打包遇到的问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-08-12
目录

Flutter - 解决混合开发iOS脚本打包遇到的问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

使用 Xcode 手动打包是正常的，但是使用脚本打包会报错，错误如下：

The following build commands failed:
+	PhaseScriptExecution [CP-User]\ Run\ Flutter\ Build\ Script .../Script-C3A097A8FE12FF5F875B057C.sh
+	
+flutter build ios --release
+then re-run Archive from Xcode.
+Command PhaseScriptExecution failed with a nonzero exit code
+

# 定位错误

到 Flutter 环境目录下，按图上所示地址找到 xcode_backend.sh，也可以直接看 官方脚本链接 (opens new window)

  # Archive builds (ACTION=install) should always run in release mode.
+  if [[ "$ACTION" == "install" && "$build_mode" != "release" ]]; then
+    EchoError "========================================================================"
+    EchoError "ERROR: Flutter archive builds must be run in Release mode."
+    EchoError ""
+    EchoError "To correct, ensure FLUTTER_BUILD_MODE is set to release or run:"
+    EchoError "flutter build ios --release"
+    EchoError ""
+    EchoError "then re-run Archive from Xcode."
+    EchoError "========================================================================"
+    exit -1
+  fi
+

# 解决方案

可以看到，官方脚本的说明里面给出两个解决方案

方案一：直接设置 FLUTTER_BUILD_MODE 为 release

方案二：先运行 flutter build ios --release ，再使用 Xcode 去打包

这里我们是用 Jenkins 脚本进行打包，所以方案二不适用，方案一更加方便些

# 设置Flutter的编译模式为release
+export FLUTTER_BUILD_MODE=release
+
+# 执行原有项目的打包脚本
+./script/build_iOS.sh
+
+ +
+
#Dart#Flutter
Flutter - 混合开发
Flutter - 低版本在iOS14上遇到的问题与解决方案

+ ← + Flutter - 低版本在iOS14上遇到的问题与解决方案→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/814d28/index.html b/pages/814d28/index.html new file mode 100644 index 000000000..70cf43117 --- /dev/null +++ b/pages/814d28/index.html @@ -0,0 +1,134 @@ + + + + + + Fastlane - 解决报错Could not find a `ios` simulator | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-07-15
目录

Fastlane - 解决报错Could not find a ios simulator

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、问题

近日在公司用 Jenkins 给组件库打包遇到如下错误

ERROR | [iOS] unknown: Encountered an unknown error (Could not find a `ios` simulator (valid values: ). Ensure that Xcode -> Window -> Devices has at least one `ios` simulator listed or otherwise add one.) during validation.
+

首先要确保当前是否真的没有模拟器

Xcode -> Window -> Devices and Simulators

左侧的 Simulators 列表下会展示当前所有的模拟器，如果没有则点左下角的 + 进行添加

如果无法进行界面操作的话，可以使用如下命令列出模拟器

# 列出所有的模拟器
+xcrun simctl list 
+

这里可以看到是有模拟器的，经过一顿搜索，网上基本上就两个步骤

1、重装 Cocoapods

gem uninstall cocoapods
+gem install cocoapods
+

2、更新 fourflusher

gem uninstall fourflusher
+gem install fourflusher
+

或许对一般的情况应该已经生效了，但是对我这种情况没用。

更奇葩的是，自己在终端里执行组件库的校验和打包是没有问题的，但是一旦用 jenkins 去做这个事情就是不行。。。

我尝试在 Jenkins 上新建一个 Job，让其执行如下命令

bundle --version
+gem --version
+ruby --version
+fastlane -v
+xcrun simctl list # 列出所有的模拟器
+

对打印的所有相关版本信息进行一一核对后，发现没有任何问题，与自行在终端下打印的结果是一致的

# 二、解决方案

经过一番思索，想着试试看关闭所有模拟器和清空所有模拟器的数据

sudo xcrun simctl shutdown all && sudo xcrun simctl erase all
+

执行完毕后再使用 Jenkins 去对私有组件进行发布，结果成功了~😅

# 三、其它问题

这是在整个解决过程中遇到的其它问题，顺带记录下来~

# 1、问题

执行 pod 时提示找不到 cocoapods

Traceback (most recent call last):
+    2: from /usr/local/bin/pod:23:in `<main>'
+    1: from /Library/Ruby/Site/2.6.0/rubygems.rb:294:in `activate_bin_path'
+/Library/Ruby/Site/2.6.0/rubygems.rb:275:in `find_spec_for_exe': can't find gem cocoapods (>= 0.a) with executable pod (Gem::GemNotFoundException)
+

# 2、原因

原因是 ruby 环境错乱，导致找不到 gem 可执行文件

# 3、解决

1、重新安装 ruby 环境

执行下方命令即可重新安装 ruby 环境（默认安装最新版本）

rvm reinstall ruby --disable-binary
+

这里安装了最新版本，但是不见得默认就是使用的当前安装的版本。

使用下方命令查看版本

rvm list
+

如下，默认还是 2.6.3 版本，当前终端使用的是 3.0.0 版本，当重新打开终端时还是会使用 2.6.3 版本

LXFMBP:~ lxf$ rvm list
+   ruby-2.3.1 [ x86_64 ]
+   ruby-2.4.6 [ x86_64 ]
+   ruby-2.5.1 [ missing bin/ruby ]
+ * ruby-2.6.3 [ x86_64 ]
+   ruby-2.7.2 [ x86_64 ]
+=> ruby-3.0.0 [ x86_64 ]
+
+# => - current
+# =* - current && default
+#  * - default
+

执行如下命令可以设置默认使用的版本

# rvm --default use 版本号
+rvm --default use 3.0.0
+

结果如下：

LXFMBP:~ lxf$ rvm list
+   ruby-2.3.1 [ x86_64 ]
+   ruby-2.4.6 [ x86_64 ]
+   ruby-2.5.1 [ missing bin/ruby ]
+   ruby-2.6.3 [ x86_64 ]
+   ruby-2.7.2 [ x86_64 ]
+=* ruby-3.0.0 [ x86_64 ]
+
+# => - current
+# =* - current && default
+#  * - default
+

2、重新安装 cocoapods 和 fastlane

重新安装了 ruby 版本后，需要重新安装 cocoapods

gem install cocoapods
+

fastlane 亦是如此

gem install fastlane
+
+ +
+
#iOS#Fastlane
iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError)
iOS - 记录一次对屏幕旋转后崩溃的定位过程

+ ← + iOS - 记录一次对屏幕旋转后崩溃的定位过程→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/8155cd/index.html b/pages/8155cd/index.html new file mode 100644 index 000000000..0a5ebfdc1 --- /dev/null +++ b/pages/8155cd/index.html @@ -0,0 +1,182 @@ + + + + + + Mach-O文件结构分析 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-12-26
目录

Mach-O文件结构分析

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

Mach-O 是 iOS/macOS 系统上应用程序的文件格式，了解 Mach-O 文件的格式，有利于我们后续对应用进行静态分析和动态调试。

# 分析 Mach-O 文件的工具

# otool

此为命令行的方式，具体参数可以使用 man 进行查看

man otool
+
...
+-h     Display the Mach header.
+-l     Display the load commands.
+...
+

其中 -h 可查看 Header

otool -h Mach-O文件
+

otool -h

-l 可查看 load commands，打印的内容太多就不展示了，有兴趣的可以自己打印看看

# MachOView

免费开源的 Mach-O 文件分析工具

MachOView

# 010 Editor

010 Editor 的模板功能很强大，收费产品，不过要分析 ARM64 架构的 Mach-O 程序，需要借助第三方模板。

菜单依次选择：Templates -> View Installed Templates

Add Template

点击 Add 按钮，选择下载好的 MachOTemplate.bt，可以配置 Name 和 Category 等，然后点击 OK

回到程序，将 Mach-O 插入到 010 Editor中，接着在 Templates 菜单中选择刚才点击的模板

分析结果如图所示 +

# Mach-O 的结构

mach-o-structure-official

如上图所示，Mach-O 文件由三部分组成

部分 作用
Mach-O头部（Header） 保存了 CPU 架构、大小端序、文件类型、加载命令数量等一些基本信息
加载命令（Load Commands） 指定了文件的逻辑结构与文件在虚拟内存中的布局
数据块（Data） Load Commands 中定义的 Segment 的原始数据

Mach-o 头部（Header）保存了 CPU 架构、大小端序、文件类型、加载命令数量等一些基本信息，用于校验 Mach-O 文件的合法性和确定文件的运行环境。

在 Xcode 中按快捷键 ⌘ + Shift + o ，输入 mach-o/loader.h，即可找到头部的定义

mach-o/loader.h

32 位和 64 位架构的 CPU 分别使用 mach_header 与 mach_header_64 结构体来描述 Mach-O 头部，本文所述内容均以 64 位为主，定义如下：

/*
+ * The 64-bit mach header appears at the very beginning of object files for
+ * 64-bit architectures.
+ */
+struct mach_header_64 {
+    uint32_t    magic;      /* mach magic number identifier */
+    cpu_type_t  cputype;    /* cpu specifier */
+    cpu_subtype_t  cpusubtype; /* machine specifier */
+    uint32_t    filetype;   /* type of file */
+    uint32_t    ncmds;      /* number of load commands */
+    uint32_t    sizeofcmds; /* the size of all the load commands */
+    uint32_t    flags;      /* flags */
+    uint32_t    reserved;   /* reserved */
+};
+
+/* Constant for the magic field of the mach_header_64 (64-bit architectures) */
+#define MH_MAGIC_64 0xfeedfacf /* the 64-bit mach magic number */
+#define MH_CIGAM_64 0xcffaedfe /* NXSwapInt(MH_MAGIC_64) */
+
字段 作用
magic 魔数（特征字段），用于标识当前设备是大端序还是小端序。
由于 iOS 是小端序，所以其被定义常量 MH_MAGIC_64，即固定取值为 0xfeedfacf
cputype 标识 CPU 架构，类型为 cpu_type_t，其定义于 mach/machine.h
cpusubtype 标具体的 CPU 架构，区分不同版本的处理器，类型为 cpusubtype，其定义于 mach/machine.h
filetype Mach-O 文件类型（如：可执行文件、库文件等），可在 mach-o/loader.h 中找到具体定义和取值。
常见的有 MH_OBJECT（中间目标文件）、MH_EXECUTE（可执行文件）、MH_DYLIB（动态链接库）、MH_DYLINKER（动态链接器）
ncmds Load Commands 的数量
sizeofcmds Load Commands 所占的总字节大小
flags 一些标识信息，可在 mach-o/loader.h 中找到具体定义和取值。
其中 #define MH_PIE 0x200000 值得注意，只会在文件类型为 MH_EXECUTE 时使用，表明开启 ASLR，用来增加程序安全性。
reserved 系统保留字段

注： ASLR ，全称 Address Space Layout Randomization，地址空间布局随机化，顾名思义，每次启动程序，加载的地址都会随机变化，需要对代码地址进行计算修正才可正常访问。

# Load Commands

加载命令（Load Commands）紧跟 Header之后，指定了文件的逻辑结构与文件在虚拟内存中的布局，明确地告诉加载器如何处理二进制数据。有些命令由内核处理，有些由动态链接器(dyld)处理。

Load Commands

Load Commands 可以当作是多个 command 的集合，每一个 command 的类型 cmd 都是以 LC_ 为前缀的常量，如 LC_SEGMENT。

在头文件 mach-o/loader.h 中可以查看每个 command 的定义，每个 command 都拥有自己的独立结构，但是其结构的前两个字段固定为 cmd 和 cmdsize

struct load_command {
+    uint32_t cmd;        /* type of load command */
+    uint32_t cmdsize;    /* total size of command in bytes */
+};
+
字段 作用
cmd 当前 Load Commands 的类型，如 LC_SEGMENT
cmdsize 当前 Load Commands 的大小，保证其可被正确解析

根据不同的命令类型（cmd），内核会使用不同的函数进行解析。

下面对几个重要的命令类型进行详解。

# LC_SEGMENT

LC_SEGMENT 和 LC_SEGMENT_64 为段加载命令，每个段都定义了一个虚拟内存区域，动态链接器负责把这个区域映射到进程地址空间。其结构定义如下所示：

struct segment_command_64 { /* for 64-bit architectures */
+    uint32_t	cmd;		/* LC_SEGMENT_64 */
+    uint32_t	cmdsize;	/* includes sizeof section_64 structs */
+    char	segname[16];	/* segment name */
+    uint64_t	vmaddr;		/* memory address of this segment */
+    uint64_t	vmsize;		/* memory size of this segment */
+    uint64_t	fileoff;	/* file offset of this segment */
+    uint64_t	filesize;	/* amount to map from the file */
+    vm_prot_t	maxprot;	/* maximum VM protection */
+    vm_prot_t	initprot;	/* initial VM protection */
+    uint32_t	nsects;		/* number of sections in segment */
+    uint32_t	flags;		/* flags */
+};
+
字段 描述
cmd 当前 command 的类型
cmdsize 当前 command 的大小
segname 段名称，占16个字节
vmaddr 段的虚拟内存地址
vmsize 段的虚拟内存大小
fileoff 段在文件中的偏移量
filesize 段在文件中的大小
maxprot 段页面的最高内存保护级别
initprot 段页面的初始内存保护级别
nsects 段中包含节的数量。一个段可以包含0个或多个节
flags 段的标志信息（SG_HIGHVM、SG_FVMLIB等）

系统从 fileoff 处加载大小为 filesize 的内容到虚拟内存 vmaddr 处，大小为 vmsize, 段页面的权限由 initprot 进行初始化，权限可被修改，但不可超过 maxprot 的值。

上图中的四个段作用如下：

段 描述
__PAGEZERO 静态链接器创建了 __PAGEZERO 作为可执行文件的第一个段，该段在虚拟内存中的位置和大小皆为 0，不能读写、不能执行，用来处理空指针。
__TEXT 包含了可执行的代码和其他一些只读数据。静态链接器设置该段的虚拟内存权限为可读、可执行，进程被允许执行这些代码，但不能修改。
__DATA 包含了将会被更改的数据。静态链接器设置该段的虚拟内存权限为可读写。
__LINKEDIT 包含了动态链接库的原始数据，如符号、字符串和重定位表条目等。

64 位的节(section)结构定义：

struct section_64 { /* for 64-bit architectures */
+    char	sectname[16];	/* name of this section */
+    char	segname[16];	/* segment this section goes in */
+    uint64_t	addr;		/* memory address of this section */
+    uint64_t	size;		/* size in bytes of this section */
+    uint32_t	offset;		/* file offset of this section */
+    uint32_t	align;		/* section alignment (power of 2) */
+    uint32_t	reloff;		/* file offset of relocation entries */
+    uint32_t	nreloc;		/* number of relocation entries */
+    uint32_t	flags;		/* flags (section type and attributes)*/
+    uint32_t	reserved1;	/* reserved (for offset or index) */
+    uint32_t	reserved2;	/* reserved (for count or sizeof) */
+    uint32_t	reserved3;	/* reserved */
+};
+
段 描述
sectname 节的名称，占 16 个字节
segname 节指导的段名称，占 16 个字节
addr 节在内存中的起始位置
size 节占用的内存大小
offset 节的文件偏移地址
align 节的字节对齐大小
reloff 重定位入口的文件偏移
nreloc 需要重定位的入口数量
flags 节的类型和属性
reserved1/2/3 系统保留字段

# LC_LOAD_DYLIB

LC_LOAD_DYLIB 指向程序依赖库的加载信息，可以使用 MachOView 进行查看

LC_LOAD_DYLIB

LC_LOAD_DYLIB 的结构定义为 dylib_command

struct dylib {
+    union lc_str  name;			/* library's path name */
+    uint32_t timestamp;			/* library's build time stamp */
+    uint32_t current_version;		/* library's current version number */
+    uint32_t compatibility_version;	/* library's compatibility vers number*/
+};
+
+struct dylib_command {
+    uint32_t		cmd;		/* LC_ID_DYLIB, LC_LOAD_{,WEAK_}DYLIB, LC_REEXPORT_DYLIB */
+    uint32_t		cmdsize;	/* includes pathname string */
+    struct dylib	dylib;		/* the library identification */
+};
+
字段 描述
name 依赖库的完整路径。动态链接器会使用此路径进行动态库加载
timestamp 依赖库构建时的时间戳
current_version 当前版本号
compatibility_version 兼容版本号

LC_LOAD_WEAK_DYLIB 的结构也是 dylib_command，不同的是其声明的依赖库是可选的，即缺少声明的依赖库不会影响主程序的运行，而 LC_LOAD_DYLIB 声明的依赖库如果找不到，加载器会放弃并结束进程。

可以使用 otool 来查看有哪些依赖库

otool -arch arm64 -L LXFProtocolTool_Example
+
+LXFProtocolTool_Example:
+    /System/Library/Frameworks/Accelerate.framework/Accelerate (compatibility version 1.0.0, current version 4.0.0)
+    @rpath/Alamofire.framework/Alamofire (compatibility version 1.0.0, current version 1.0.0)
+    /usr/lib/libobjc.A.dylib (compatibility version 1.0.0, current version 228.0.0)
+    /usr/lib/swift/libswiftCoreMIDI.dylib (compatibility version 1.0.0, current version 5.0.0, weak)
+    ...
+

除了 /System/Library/ 和 /usr/lib 这些系统路径外，还可能会遇到 @rpath、@executable_path 之类的路径

路径 描述
@executable_path 指可执行文件的目录
@rpath 由 LC_RPATH 加载指定指定，iOS 上通常为应用自身 framework 文件，默认为：@executable_path/Framework

这些路径可使用 MacOS 上提供的 install_name_tool 工具进行修改，注意：此操作对于未越狱平台注入动态库是必须掌握的！

# 修改依赖库路径
+install_name_tool -change @rpath/Alamofire.framework/Alamofire @executable_path/Alamofire.framework/Alamofire LXFProtocolTool_Example
+

# 通用二进制

Universal Binary格式文件（通用二进制，也称胖二进制），实际上只是将不同架构的的 Mach-O 文件打包到一起，再在文件起始位置处加上 fat_header 结构来说明所支持的架构和偏移地址信息，其结构如下图所示：

头文件 mach-o/fat.h 中可查看通用二进制文件的定义：

#define FAT_MAGIC    0xcafebabe
+#define FAT_CIGAM    0xbebafeca /* NXSwapLong(FAT_MAGIC) */
+
+struct fat_header {
+    uint32_t magic;     /* FAT_MAGIC or FAT_MAGIC_64 */
+    uint32_t nfat_arch; /* number of structs that follow */
+};
+
字段 作用
magic 魔数（特征字段），其被定义常量 FAT_MAGIC，即固定取值为 0xcafebabe
nfat_arch 标识 Mach-O 文件包含的架构个数

fat_header 后紧跟 fat_arch 结构，有多少架构就会有多少 fat_arch，用于描述对应的 Mach-O文件的具体信息

struct fat_arch {
+    cpu_type_t  cputype; /* cpu specifier (int) */
+    cpu_subtype_t    cpusubtype; /* machine specifier (int) */
+    uint32_t    offset;  /* file offset to this object file */
+    uint32_t    size;    /* size of this object file */
+    uint32_t    align;   /* alignment as a power of 2 */
+};
+
字段 作用
offset 指定对应架构相对于文件开头的偏移量
size 指定对应架构数据的大小
align 指定数据的内存对齐边界，取舍为 2 的 N 次方

cputype 和 cpusubtype 在前面已经提及过，这里就不赘述了

# 资料

+ +
+
#iOS#逆向
Mac远程登录到iOS设备
iOS逆向 - 应用脱壳

+ ← + iOS逆向 - 应用脱壳→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/81ea4e/index.html b/pages/81ea4e/index.html new file mode 100644 index 000000000..c5b5cce90 --- /dev/null +++ b/pages/81ea4e/index.html @@ -0,0 +1,227 @@ + + + + + + 性能优化 - 内存泄漏（3）代码分析篇 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-06-30
目录

性能优化 - 内存泄漏（3）代码分析篇

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

在上一篇《性能优化——内存泄漏（2）工具分析篇》 (opens new window)中，介绍了如何使用工具帮助我们检查APP中是否存在内存泄漏、及如何定位到内存泄漏，但项目并不能完全依赖工具来检查，毕竟定位内存泄漏比较麻烦，还不如在开发时就考虑到内存泄漏问题，尽可能减少内存泄漏，后续优化才不会那么痛苦。下面就来看看开发中，哪些代码可能造成内存泄漏，及避免内存泄漏的对应解决方案。

# 二、代码分析

# 1、静态变量引起的内存泄露

# 1）错误示例

这个可以拿之前的Demo来说明，Demo代码如下：

// 单例工具类
+public class CommonUtil {
+    private static CommonUtil mInstance;
+    private Context mContext;
+    public CommonUtil(Context context) {
+        mContext = context;
+    }
+    public static CommonUtil getInstance(Context context) {
+        if (mInstance == null) {
+            synchronized (CommonUtil.class) {
+                if (mInstance == null) {
+                    mInstance = new CommonUtil(context);
+                }
+            }
+        }
+        return mInstance;
+    }
+	...
+}
+
+// Activity中使用单例工具
+public class MemoryLeakActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_memory_leak);
+        CommonUtil.getInstance(this);
+    }
+｝
+

当调用getInstance()时，如果传入的context是Activity，那么只要这个单例没有被释放，则这个Activity也不会被释放，直到进程退出后才会释放。

# 2）解决方案

不要传入Activity，可以使用getApplicationContext()来代替。

# 2、非静态内部类引起内存泄露（包括匿名内部类）

在Java中，非静态的内部类和匿名内部类都会隐式地持有其外部类的引用。

# 1）错误示例

public class MemoryLeakActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_memory_leak);
+        loadData();
+    }
+
+    public void loadData() {
+        new Thread() {
+            @Override
+            public void run() {
+                try {
+                    Thread.sleep(10000);
+                    System.out.println("模拟同步网络数据完毕");
+                } catch (InterruptedException e) {
+                    e.printStackTrace();
+                }
+            }
+        }.start();
+    }
+}
+

上面的代码中，使用Thread匿名内部类开辟线程同步网络数据，而这个内部类会隐式持有外部类的引用，当退出界面后，该内部类任务还在进行，导致该界面无法被GC回收，于是就会产生内存泄漏。

APP退出后，执行GC，获取内存快照。可以看到MemoryLeakActivity的Total Count为1，说明存在内存泄漏。

# 2）解决方案

静态的内部类不会持有外部类的引用。

# (1) 使用静态方法
public static void loadData() {
+    new Thread() {
+        @Override
+        public void run() {
+            try {
+                Thread.sleep(10000);
+                System.out.println("模拟同步网络数据完毕");
+            } catch (InterruptedException e) {
+                e.printStackTrace();
+            }
+        }
+    }.start();
+}
+
# (2) 使用静态内部类
public void loadData() {
+    new MyThread().start();
+}
+
+static class MyThread extends Thread {
+    @Override
+    public void run() {
+        try {
+            Thread.sleep(10000);
+            System.out.println("模拟同步网络数据完毕");
+        } catch (InterruptedException e) {
+            e.printStackTrace();
+        }
+    }
+}
+

# 3）拓展

但项目开发中，可能会存在一定要使用内部类去持有外部类的情况，比如数据同步完成后，需要修改界面上的文本信息，而静态内部类无法直接持有外部类的引用，这又该怎么解决呢？其实可以通过内部类的构造函数将外部类传入，并使用弱引用保存（GC执行后释放），并在内部类中做好判空即可。

static class MyThread extends Thread {
+    Reference<Context> mReference;
+
+    public MyThread(Context context) {
+        mReference = new WeakReference<>(context);
+    }
+
+    @Override
+    public void run() {
+        try {
+            Thread.sleep(10000);
+            MemoryLeakActivity context = (MemoryLeakActivity) mReference.get();
+            if (context != null) {
+                context.mTv.setText("模拟同步网络数据完毕");
+            }
+        } catch (InterruptedException e) {
+            e.printStackTrace();
+        }
+    }
+}
+

APP退出后，执行GC，获取内存快照。可以看到MemoryLeakActivity的Total Count为0，说明没有内存泄漏。

# 3、不需要用的监听未移除会发生内存泄露

# 1）错误示例

public class MemoryLeakActivity extends AppCompatActivity implements SensorEventListener {
+
+    private SensorManager mSm;
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_memory_leak);
+
+        mSm = (SensorManager) getSystemService(SENSOR_SERVICE);
+        Sensor sensor = mSm.getDefaultSensor(Sensor.TYPE_ALL);
+        mSm.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
+    }
+}
+

本例中使用getSystemService()获取传感器服务，并设置了监听，但没有在onDestroy()方法中将监听移除，此类监听没有及时清除的话，必定造成内存泄漏。

# 2）解决方案

只需在onDestroy()中移除监听即可。

@Override
+protected void onDestroy() {
+    super.onDestroy();
+    mSm.unregisterListener(this);
+}
+

# 4、资源未关闭引起的内存泄露情况

# 1）错误示例

比如：BroadCastReceiver、Cursor、Bitmap、IO流、自定义属性。 +当不需要使用的时候，要记得及时释放资源。否则就会内存泄露。

# 2）解决方案

这里以Cursor、IO流和自定义属性为例。

# (1)Cursor或IO流
try {
+    ...
+    使用cursor/io读取数据操作
+    ...
+} catch (Exception e) {
+    e.printStackTrace();
+} finally {
+    if (cursor/io != null) {
+        cursor/io.close();
+        cursor/io = null;
+    }
+}
+
# (2)自定义属性
TypedArray a = theme.obtainStyledAttributes(attrs,
+                com.android.internal.R.styleable.TextViewAppearance, defStyleAttr, defStyleRes);
+TypedArray appearance = null;
+int ap = a.getResourceId(
+        com.android.internal.R.styleable.TextViewAppearance_textAppearance, -1);
+a.recycle();// 不执行回收会造成内存泄漏
+
+ +
+
#性能优化#内存泄漏
性能优化 - 内存泄漏（2）工具分析篇
解决WebView内存泄漏

+ ← + 解决WebView内存泄漏→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/832f44/index.html b/pages/832f44/index.html new file mode 100644 index 000000000..8fc7f59f0 --- /dev/null +++ b/pages/832f44/index.html @@ -0,0 +1,103 @@ + + + + + + iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 情况

变暗

贴出重要代码

// 设置按钮图片动画数组
+voiceButton.imageView?.animationImages = [
+    #imageLiteral(resourceName: "message_voice_sender_playing_1"),
+    #imageLiteral(resourceName: "message_voice_sender_playing_2"),
+    #imageLiteral(resourceName: "message_voice_sender_playing_3")
+]
+
// 开始动画
+voiceButton.imageView?.startAnimating()
+
// 停止动画
+voiceButton.imageView?.stopAnimating()
+

# 原因

这个按钮在结束动画之后之所以会变暗，是因为它在动画结束之后自动显示为高亮图片，不信？那只好上证据了~

// 设置语音按钮的高亮图片
+voiceButton.setImage(#imageLiteral(resourceName: "message_voice_sender_normal"), for: .highlighted)
+

那知道原因之后就很好解决了

# 解决方案

# 方案一：设置按钮的高亮图片

将按钮的高亮图片与普通状态下的一致即可。这里就再赘述了

# 方案二：adjustsImageWhenHighlighted = false

在UIButton中有这么一个属性

adjustsImageWhenHighlighted
+

查看官方文档的说明

当该属性设置为true时，按钮在高亮状态下，图片会绘制成高亮（前提是没有手动设置高亮图片）。并且该值的默认值为true +所以我们也可以将属性adjustsImageWhenHighlighted设置为false，不让系统自动帮我们设置高亮状态下显示的图片即可。

# 效果

完美

附上相关项目：Swift 3.0 高仿微信 (opens new window)

+ +
+
#iOS#Swift
iOS - Swift仿微信聊天图片显示
iOS - Swift UITableView的scrollToRow的坑

+ ← + iOS - Swift UITableView的scrollToRow的坑→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/84a12e/index.html b/pages/84a12e/index.html new file mode 100644 index 000000000..8bb83fd74 --- /dev/null +++ b/pages/84a12e/index.html @@ -0,0 +1,294 @@ + + + + + + Gradle入门系列(五) - Gradle其它模块与Plugin插件 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-05
目录

Gradle入门系列(五) - Gradle其它模块与Plugin插件

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# Gradle 其它模块

# 一、Settings 类

settings.gradle（对应 Settings.java）决定哪些工程需要被 gradle 处理，占用了整个 gradle 生命周期的三分之一，即 Initialzation 初始化阶段。

# 二、SourceSet 类

对默认的文件位置进行修改，从而让 gradle 知道哪种资源要从哪些文件夹中去查找。

// sourceSets是可以调用多次的
+android {
+    sourceSets {
+        main {
+            jniLibs.srcDirs = ['libs']
+        }
+    }
+    sourceSets {
+        main {
+            res.srcDirs = ['src/main/res',
+                           'src/main/res-ad',
+                           'src/main/res-player']
+        }
+    }
+}
+
+// sourceSets一般情况下是一次性配置
+android {
+    sourceSets {
+        main {
+            jniLibs.srcDirs = ['libs']
+            res.srcDirs = ['src/main/res',
+                           'src/main/res-ad',
+                           'src/main/res-player']
+        }
+    }
+}
+
+// 使用编程的思想，配置sourceSets
+this.android.sourceSets{
+    main {
+        jniLibs.srcDirs = ['libs']
+        res.srcDirs = ['src/main/res',
+                       'src/main/res-ad',
+                       'src/main/res-player']
+    }
+}
+

# Gradle Plugin

# 一、Gradle 插件（Plugin）是什么

Gradle 中的 Plugin 是对完成指定功能的 Task 封装的体现，只要工程依赖了某个 Plugin，就能执行该 Plugin 中所有的功能，如：使用 java 插件，就可以打出 jar 包，使用 Android 插件，就可以生成 apk、aar。

# 二、自定义 Plugin

# 1、创建插件工程

  1. 在工程目录下创建 buildSrc 文件夹。
  2. 在 buildSrc 目录下，创建 src 文件夹、build.gradle 文件。
  3. 在 buildSrc/src 目录下，再创建 main 文件夹。
  4. 在 buildSrc/src/main 目录下，再分别创建 groovy、resources 文件夹。
  5. 在 buildSrc/src/main/resources 再创建一个 META-INF 文件夹，再在 META-INF 下创建一个 gradle-plugins 文件夹。
  6. 在 build.gradel 文件中输入如下脚本：
apply plugin: 'groovy'
+
+sourceSets {
+    main {
+        groovy {
+            srcDir 'src/main/groovy'
+        }
+        resources {
+            srcDir 'src/main/resources'
+        }
+    }
+}
+

最后，Async 一下工程，buildSrc 就会被识别出来了，整体目录如图：

# 2、创建插件类

与 java 一样，在 groovy 目录下，创建一个包，再创建一个插件类（如：com.lqr.gradle.study.GradleStudyPlugin），该插件类必须实现 Plugin<Project>接口。

注意：gradle 插件类是.groovy 文件，不是.java 文件

import org.gradle.api.Plugin
+import org.gradle.api.Project
+
+/**
+ * 自定义Gradle插件
+ */
+class GradleStudyPlugin implements Plugin<Project> {
+
+    /**
+     * 插件引入时要执行的方法
+     * @param project 引入当前插件的project
+     */
+    @Override
+    void apply(Project project) {
+        println 'hello gradle study plugin. current project name is ' + project.name
+    }
+}
+

# 3、指定插件入口

在编写完插件类的逻辑之后，需要在 META-INF.gradle-plugins 目录下创建一个 properties 文件（建议以插件类包名来命名，如：com.lqr.gradle.study.properties），在该 properties 中声明插件类，以此来指定插件入口。

该 properties 文件的名字将作为当前 gradle 插件被 app 工程引用的依据。

implementation-class=com.lqr.gradle.study.GradleStudyPlugin
+// 如果报错 Could not find implementation class 'xxx' 的话，一般是类全路径有问题，默认包不需要写包路径，修改如下即可：
+// implementation-class=GradleStudyPlugin
+

# 4、使用自定义插件

打开 app 工程的 build.gradle，应用上面的自定义 gradle 插件，并 Async。

apply plugin: 'com.android.application'
+apply plugin: 'com.lqr.gradle.study'
+
+android {
+  ...
+}
+

可以看到，在 gradle 的配置阶段，就输出了前面自定义插件的 apply 方法中的日志。 +

# 5、创建扩展属性

插件往往会在 gradle 脚本中进行参数配置，如在 android{}中，可以配置 compileSdkVersion 等参数，其实本质上，就是在 gradle 脚本中使用闭包方式创建了一个 javaBean，并将其传递到插件中被插件识别读取而已。步骤如下：

1）创建一个实体类，声明成员变量，用于接收 gradle 中配置的参数。（可以理解为就是 javaBean，不过要注意，该文件后缀是.groovy，不是.java）

class ReleaseInfoExtension {
+    String versionCode
+    String versionName
+    String versionInfo
+    String fileName
+
+    ReleaseInfoExtension() {}
+
+    @Override
+    String toString() {
+        return "versionCode = ${versionCode} , versionName = ${versionName} ," +
+                " versionInfo = ${versionInfo} , fileName = ${fileName}"
+    }
+}
+

2）在自定义插件中，对当前 project 进行扩展。

class GradleStudyPlugin implements Plugin<Project> {
+
+    /**
+     * 插件引入时要执行的方法
+     * @param project 引入当前插件的project
+     */
+    @Override
+    void apply(Project project) {
+        // 这样就可以在gradle脚本中，通过releaseInfo闭包来完成ReleaseInfoExtension的初始化。
+        project.extensions.create("releaseInfo", ReleaseInfoExtension)
+    }
+}
+

3）打开在 app 工程的 build.gradle，通过扩展 key 值命名闭包的方式，就可以配置指定参数了。

apply plugin: 'com.lqr.gradle.study'
+
+releaseInfo {
+    versionCode = '1.0.0'
+    versionName = '100'
+    versionInfo = '第一个app信息'
+    fileName = 'release.xml'
+}
+

4）接收参数，如：

def versionCodeMsg = project.extensions.releaseInfo.versionCode
+

# 6、创建扩展 Task

自定义插件无非就是封装一些常用 Task，所以，扩展 Task 才是自定义插件的最重要的一部分。

扩展 Task 也很简单，继承 DefaultTask，编写 TaskAction 注解方法，下面以 “把 app 版本信息写入到 xml 文件中”的 task 为例，注释很详细，不多赘述：

import groovy.xml.MarkupBuilder
+import org.gradle.api.DefaultTask
+import org.gradle.api.tasks.TaskAction
+
+class ReleaseInfoTask extends DefaultTask {
+
+    ReleaseInfoTask() {
+        group 'lqr' // 指定分组
+        description 'update the release info' // 添加说明信息
+    }
+
+    /**
+     * 使用TaskAction注解，可以让方法在gradle的执行阶段去执行。
+     * doFirst其实就是在外部为@TaskAction的最前面添加执行逻辑。
+     * 而doLast则是在外部为@TaskAction的最后面添加执行逻辑。
+     */
+    @TaskAction
+    void doAction() {
+        updateInfo()
+    }
+
+    private void updateInfo() {
+        // 获取gradle脚本中配置的参数
+        def versionCodeMsg = project.extensions.releaseInfo.versionCode
+        def versionNameMsg = project.extensions.releaseInfo.versionName
+        def versionInfoMsg = project.extensions.releaseInfo.versionInfo
+        def fileName = project.extensions.releaseInfo.fileName
+        // 创建xml文件
+        def file = project.file(fileName)
+        if (file != null && !file.exists()) {
+            file.createNewFile()
+        }
+        // 创建写入xml数据所需要的类。
+        def sw = new StringWriter();
+        def xmlBuilder = new MarkupBuilder(sw)
+        // 若xml文件中没有内容，就多创建一个realease节点，并写入xml数据
+        if (file.text != null && file.text.size() <= 0) {
+            xmlBuilder.releases {
+                release {
+                    versionCode(versionCodeMsg)
+                    versionName(versionNameMsg)
+                    versionInfo(versionInfoMsg)
+                }
+            }
+            file.withWriter { writer ->
+                writer.append(sw.toString())
+            }
+        } else { // 若xml文件中已经有内容，则在原来的内容上追加。
+            xmlBuilder.release {
+                versionCode(versionCodeMsg)
+                versionName(versionNameMsg)
+                versionInfo(versionInfoMsg)
+            }
+            def lines = file.readLines()
+            def lengths = lines.size() - 1
+            file.withWriter { writer ->
+                lines.eachWithIndex { String line, int index ->
+                    if (index != lengths) {
+                        writer.append(line + '\r\n')
+                    } else if (index == lengths) {
+                        writer.append(sw.toString() + '\r\n')
+                        writer.append(line + '\r\n')
+                    }
+                }
+            }
+        }
+    }
+}
+

与创建扩展属性一样，扩展 Task 也需要在 project 中创建注入。

/**
+ * 自定义Gradle插件
+ */
+class GradleStudyPlugin implements Plugin<Project> {
+
+    /**
+     * 插件引入时要执行的方法
+     * @param project 引入当前插件的project
+     */
+    @Override
+    void apply(Project project) {
+        // 创建扩展属性
+        // 这样就可以在gradle脚本中，通过releaseInfo闭包来完成ReleaseInfoExtension的初始化。
+        project.extensions.create("releaseInfo", ReleaseInfoExtension)
+        // 创建Task
+        project.tasks.create("updateReleaseInfo", ReleaseInfoTask)
+    }
+}
+

再次 Async 工程之后，就可以在 Idea 的 gradle 标签里看到自定义好的 Task 了。

以上就是自定义 gradle 插件的核心内容了，但是，这种在工程下直接创建 buildSrc 目录编写的插件，只能对当前工程可见，所以，如果需要将我们自定义好的 grdle 插件被其他工程所使用，则需要单独创建一个库工程，并创建如 buildSrc 目录下所有的文件，最后上传 maven 仓库即可，这部分可自行百度了解。

# 三、android 插件对 gradle 扩展

译者序 | Gradle Android 插件用户指南翻译 (opens new window)

Manipulation tasks（操作 task） | Gradle Android 插件用户指南翻译 (opens new window)

自定义 Apk 输出位置：

this.afterEvaluate {
+  this.android.applicationVariants.all { variant ->
+    def output = variant.outpus.first() // 获取变体输出文件（outputs返回是一个集合，但只有一个元素，即输出apk的file）
+    def apkName = "app-${variant.baseName}-${variant.versionName}.apk"
+    output.outputFile = new File(output.outputFile.parent, apkName)
+  }
+}
+

variant.baseName : baidu-release +variant.name : baiduRelease

+ +
+
#脚本#Gradle
Gradle入门系列(四) - 初识Gradle Task
Android脚本 - 不一样的Gradle多渠道配置总结

+ ← + Android脚本 - 不一样的Gradle多渠道配置总结→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/861244/index.html b/pages/861244/index.html new file mode 100644 index 000000000..11511b6e0 --- /dev/null +++ b/pages/861244/index.html @@ -0,0 +1,138 @@ + + + + + + Docker - 操作容器 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-31
目录

Docker - 操作容器

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 运行容器

这里我使用 ubuntu 镜像，创建一个名为 lxfubuntu 的容器，并运行进入容器

# docker run -it --name [容器名] [镜像名] /bin/bash
+
+docker run -it --name lxfubuntu ubuntu /bin/bash
+

命令参数详解：

  • --name : 定义容器名称，如果不使用，则会随机产生一个名字
  • -i : 让容器的标准输入保持打开
  • -t : 让 docker 分配一个伪终端，并绑定到窗口的标准输入上
  • -d : 以守护进程的方式运行容器，不占用终端
  • /bin/bash : 执行一个命令

如图，执行后即可进入容器中 +

如果想创建并以守护进程的方式运行容器，可以使用 -d

docker run -dit --name lxfubuntu1 ubuntu /bin/bash
+

# docker start [container_id]
+
+docker start c97abc3f151a
+

# 进入容器

如果我们想进入上述提及的以守护进程方式运行的容器中，可以使用 docker exec

docker exec -it lxfubuntu1 /bin/bash
+

+如果在此时退出该守护进程的容器时，该容器依旧在后台运行

# 退出容器

两种方式

  • 方法一： 终端输入 exit 后回车
  • 方法二： Ctrl + D

如果容器是以守护进程的方式运行，在进入容器后退出，不停止容器的运行，即依旧在后台运行，否则将在容器退出时顺带停止容器

# 停止容器

# docker stop [container_id|container_name]
+
+docker stop lxfubuntu1
+# 或
+docker stop c97abc3f151a
+

# 启动容器

# docker start [container_id|container_name]
+
+docker start lxfubuntu1
+# 或
+docker start c97abc3f151a
+

# 重启容器

# docker restart [container_id|container_name]
+
+docker restart lxfubuntu1
+# 或
+docker restart c97abc3f151a
+

# 查看容器

查看正在运行的容器

docker container ls
+# 或
+docker ps
+

查看所有的容器，包括已经停止的容器

docker container ls -a
+docker container ls --all
+# 或
+docker ps -a
+docker ps --all
+

如果只是想查看容器的ID，可以使用参数 -q

docker ps -aq
+

# 删除容器

# docker [container] rm [container_id|container_name]
+
+docker container rm lxfubuntu
+# 或
+docker rm lxfubuntu1
+

如果删除一个正在运行的容器，需要加 -f

结合上述查看容器中 -q 的功能，可以实现批量删除容器的功能

# docker ps -aq 获取所有的容器id
+docker rm -f $(docker ps -aq)
+

# 查看容器详情

# docker inspect [container_id|container_name]
+
+docker inspect lxfubuntu1
+

# 查看容器状态

# docker container stats [container_id|container_name]
+
+docker container stats lxfubuntu1
+

# 打包容器为新的镜像资源

容器在安装了各种各样的服务后，将该容器打包为镜像资源，接着将该镜像资源进行打包，最后再发给其它人使用

将 lxfubuntu1 这个容器打包成名为 my_image 的镜像

# docker commit 容器名 镜像资源名
+docker commit lxfubuntu1 my_image
+

+ +
+
#Docker
Docker - 操作镜像资源
Docker - 私有仓库Registry

+ ← + Docker - 私有仓库Registry→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/867207/index.html b/pages/867207/index.html new file mode 100644 index 000000000..37e21022d --- /dev/null +++ b/pages/867207/index.html @@ -0,0 +1,113 @@ + + + + + + Docker - 数据管理 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-31
目录

Docker - 数据管理

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 拷贝数据

# 宿主机文件 -> 容器内

docker cp 需要拷贝的文件或目录 容器名:容器内的目录路径
+

如：把宿主机当前目录下的 lxf.sh 文件，拷贝到 lxfubuntu1 容器下的 /data 目录中

docker cp lxf.sh lxfubuntu1:/data
+

# 容器内 -> 宿主机文件

docker cp 容器名:容器内需要拷贝的文件或目录 宿主机目录  
+

如：把 lxfubuntu1 容器中 /data 目录下的 lxf.sh 文件，拷贝到宿主机 ~/lxf/ 目录下

docker cp lxfubuntu1:/data/lxf.sh ~/lxf/
+

# 数据卷管理

数据卷管理就是将容器的某个目录，映射到宿主机，作为数据存储同步的目录

命令：

docker run -itd --name [容器名字] -v [宿主机目录]:[容器目录] [镜像名称] [命令(可选)]
+

下面进行操作示范：

在宿主机创建一个名为 data 的目录，这个名字可任意

mkdir data
+

将宿主机的 data 目录映射到容器中的 /home 目录

docker run -it -v ~/lxf/data:/home ubuntu /bin/bash
+

-v ：挂载一个数据卷 +接着，我在容器的 /home 目录下创建一个 lxfdir 目录 + +此时，宿主机的 data 目录下也会同步多了一个 lxfdir 目录 +

这个宿主机的 data 目录就叫数据卷。

除了宿主机与容器之间可以进行数据交互外，如果两个容器的目录都映射到同一个宿主机目录，那还可以让多个容器间进行数据共享。

# 数据卷容器

数据卷容器也是一个容器，目的是专门用于提供数据卷给其它容器挂载，从而实现多个容器之间同步数据的更新。

# 创建数据卷模板容器

命令：

docker create -v [容器数据卷目录] --name [容器名字] [镜像名称] [命令(可选)]
+

对ubuntu 镜像做了文件映射，得到数据卷目录为 /data 的模板容器

docker create -v /data ubuntu
+

+注意看该模板容器的状态是 Created ，即并没有运行，容器名为 determined_nightingale

# 基于数据卷模板创建容器

命令:

docker run --volumes-from [数据卷容器id/name] -tid --name [容器名字] [镜像名称] [命令(可选)]
+

创建 lxfubuntu1 容器

docker run -it --volumes-from determined_nightingale --name lxfubuntu1 ubuntu /bin/bash
+

+在容器的根目录下，会基于上述模板创建了一个名为 data 的目录（原 ubuntu 镜像中是没有的）

我们再创建一个 lxfubuntu2 容器

docker run -it --volumes-from determined_nightingale --name lxfubuntu2 ubuntu /bin/bash
+

+此时，我们在 lxfubuntu1 的 data 目录下创建一个名为 lxf 的目录， lxfubuntu2 的 data 目录中也会同步到相同的数据 + +这样，只要我们是基于数据卷模板容器创建出来的容器，就可以得到一个数据共享的 data 目录，在该 data 目录中对文件的操作，都可以同步到各个由该模板容器创建出来的容器中。

# 与宿主机同步文件

数据卷容器可以实现多个容器的数据同步，但是数据是保存在数据卷内，并没有保存到宿主机的文件目录中。

如果想将宿主机的文件同步到各个容器，可以使用 docker cp 将宿主机下的文件拷贝到数据卷容器即可，反之亦然

如：把宿主机当前目录下的 lxf.sh 文件，拷贝到数据卷容器 determined_nightingale 中 /data 目录下

docker cp lxf.sh determined_nightingale:/data
+

如：把数据卷容器 determined_nightingale 中 /data 目录下的 lxf.sh 文件，拷贝到宿主机 ~/lxf 目录下

docker cp determined_nightingale:/data/lxf.txt ~/lxf
+

是不是有人要问了，如果我基于数据卷模板创建容器时，顺带设置数据卷呢？，命令如下所示

docker run -it -v ~/lxf/data:/data --volumes-from determined_nightingale --name lxfubuntu3 ubuntu /bin/bash
+

很遗憾，只有数据卷配置生效，数据卷容器配置不生效～

+ +
+
#Docker
Docker - 私有仓库Registry
Docker - 网络管理

+ ← + Docker - 网络管理→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/87435a/index.html b/pages/87435a/index.html new file mode 100644 index 000000000..6e52513e5 --- /dev/null +++ b/pages/87435a/index.html @@ -0,0 +1,163 @@ + + + + + + DesignPattern - 代理模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-23
目录

DesignPattern - 代理模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、代理模式介绍

代理模式（Proxy Pattern）属于结构模式，为其他对象提供一种代理以控制对这个对象的访问，客户端并不直接调用实际的对象，而是通过调用代理，来间接的调用实际的对象。

核心作用：保护目标对象，增强目标对象(与装饰器模式类似)

  • 核心组成

    • Subject：抽象接口，目标对象类和代理类都要实现的一个抽象接口
    • Proxy：代理类，包含了对目标对象类的引用，从而可以随意的操作目标对象的方法
    • RealSubject：目标对象类，也叫委托类，或被代理类

  • 应用场景

    • 各大数据专营店，代理厂商进行销售对应的产品，代理商持有真正的授权代理书
    • 客户端不想直接访问实际的对象，或者访问实际的对象存在困难，通过一个代理对象来完成间接的访问
    • 想在访问一个类时做一些控制，或者增强功能

  • 分类

    • 静态代理：由程序员创建或工具生成代理类的源码，再编译代理类，即代理类和委托类的关系在程序运行前就已经存在
    • 动态代理：在运行期间使用动态生成字节码形式，动态创建代理类，常见的动态代理工具有 jdkproxy（基于反射原理，性能低）、cglib（基于 ASM 机制，生成被代理类的子类，高性能）

  • 优点

    • 可以在访问一个类时做一些控制，或增加功能
    • 操作代理类无须修改原本的源代码，符合开闭原则，系统具有较好的灵活性和可扩展性

  • 缺点

    • 增加系统复杂性和调用链路

# 二、代理模式代码实现

以下以模拟文件上传为案例，分别使用 静态代理 与 动态代理 测算上传耗时。

创建抽象接口：

说明：该接口是必须的，代理类与被代理类都需要实现

/**
+ * Subject：抽象接口
+ *
+ * @author GitLqr
+ */
+public interface IUploader {
+	void upload(File file);
+}
+

创建目标对象类，即被代理类：

/**
+ * RealSubject：目标对象类
+ *
+ * @author GitLqr
+ */
+public class HttpUploader implements IUploader {
+	@Override
+	public void upload(File file) {
+		try {
+			Thread.sleep(500);
+			System.out.println("使用 http 上传文件中...");
+		} catch (InterruptedException e) {
+			e.printStackTrace();
+		}
+	}
+}
+

# 1、静态代理

  • 静态代理在代码编译时就确定了被代理的类
  • 静态代理的代理类必须要实现和被代理类相同的接口
  • 静态代理可以隐藏被代理类的具体实现；可以在不改变代理类的情况下增加额外的操作

创建静态代理类：

说明：静态代理类持有被代理对象引用，在对应的接口方法中，使用被代理对象来执行方法，并在方法执行前后记录时间戳，从而计算出方法耗时。

/**
+ * 代理类：静态代理
+ *
+ * @author GitLqr
+ */
+public class StaticProxy implements IUploader {
+
+	IUploader uploader;
+
+	public StaticProxy(IUploader uploader) {
+		super();
+		this.uploader = uploader;
+	}
+
+	@Override
+	public void upload(File file) {
+		long start = System.currentTimeMillis();
+		uploader.upload(file);
+		long end = System.currentTimeMillis();
+		System.out.println("耗时：" + (end - start) + "ms");
+	}
+}
+

使用：

说明：被代理对象可以直接在代理类中创建，从而做到更好的隐蔽性，同时扩展性也会降低，看实际需要决定

public static void main(String[] args) {
+    IUploader uploader = new HttpUploader();
+    IUploader uploaderProxy = new StaticProxy(uploader);
+    File file = new File("/");
+    uploaderProxy.upload(file);
+}
+

# 2、动态代理

  • 动态代理在代码运行时才动态创建代理类
  • 动态代理相对于静态代理类，可以避免生成大量的代理类造成的冗余

动态代理可以通过 jdkproxy、cglib 等方式实现，以下以 jdkproxy（又称 JDK 动态代理） 为例

说明： jdkproxy 是 jdk 自带的，基于接口设计实现，只能代理接口中有的方法，且通过反射执行方法，性能低；cglib 需要依赖第三方库，但基于 ASM 机制，不依赖于接口，因为是 ASM 生成子类的方式(继承)，性能也高一些

jdkproxy 涉及 2 个重要的类或接口：

  • java.lang.reflect.Proxy：动态创建出来的代理对象的类，它提供了许多方法，用的最多的是 Proxy#newProxyInstance() ，用于得到一个动态的代理对象
  • java.lang.reflect.InvocationHandler：是动态代理类要实现的接口，我们通过代理对象调用一个方法时，该方法会被转发给 InvocationHandler 的 invoke() 方法来调用

创建动态代理对象：

public static void main(String[] args) {
+    // 被代理对象
+    IUploader uploader = new HttpUploader();
+
+    ClassLoader classLoader = uploader.getClass().getClassLoader();
+    Class<?>[] interfaces = uploader.getClass().getInterfaces();
+    // 动态代理
+    IUploader uploaderProxy = (IUploader) Proxy.newProxyInstance(classLoader, interfaces, new InvocationHandler() {
+        @Override
+        public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
+            long start = System.currentTimeMillis();
+            Object result = method.invoke(uploader, args); // 注意：方法的执行者是被代理对象！！
+            long end = System.currentTimeMillis();
+            System.out.println("耗时：" + (end - start) + "ms");
+            return result;
+        }
+    });
+
+    // 使用
+    File file = new File("/");
+    uploaderProxy.upload(file);
+}
+
+ +
+
#设计模式#代理模式
DesignPattern - 装饰器模式【结构型】
DesignPattern - 外观模式【结构型】

+ ← + DesignPattern - 外观模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/88eee8/index.html b/pages/88eee8/index.html new file mode 100644 index 000000000..9489271d8 --- /dev/null +++ b/pages/88eee8/index.html @@ -0,0 +1,212 @@ + + + + + + ArrayList源码分析 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-08
目录

ArrayList源码分析

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

我们知道，数据结构中有两种存储结构，分别是：顺序存储结构（线性表）、链式存储结构（链表），在java中，对这两种结构分别进行实现的类有：

  • 顺序存储结构：ArrayList、Stack
  • 链式存储结构：LinkedList、Queue

本篇只对ArrayList的源码进行分析，对于其他类的源码分析可通过本人博客列表进行查看。

# 二、分析

# List

在分析ArrayList之前，我们先来看看集合的接口——List。

public interface List<E> extends Collection<E> {
+    boolean add(E e);
+    void add(int index, E element);
+    boolean remove(Object o);
+    E remove(int index);
+    E set(int index, E element);
+    E get(int index);
+	...
+}
+

在List这个接口中，提供了对集合进行操作的增、删、改、查方法，我们知道，ArrayList和LinkedList都实现了List接口，但它们的底层实现分别是线性表与链表，所以，对应的增、删、改、查方法肯定也不一样，下面的分析也将从这几个方法入手。

# ArrayList

# 1、成员变量

在ArrayList的源码中，成员变量并不多，下面就截出其中几个重要的变量进行说明。

public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess, Cloneable, java.io.Serializable{
+	...
+    private static final int DEFAULT_CAPACITY = 10;
+    private static final Object[] EMPTY_ELEMENTDATA = {};
+	private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA = {};
+    transient Object[] elementData;
+    private int size;
+	...
+}
+
  • DEFAULT_CAPACITY：默认的数组长度
  • EMPTY_ELEMENTDATA：默认的空数组
  • DEFAULTCAPACITY_EMPTY_ELEMENTDATA：默认的空数组（与EMPTY_ELEMENTDATA有点区别，在不同的构造函数中用到）
  • elementData：真正用于存放数据的数组
  • size：数组元素个数

ArrayList的底层实现是数组，数组必定是有限长度的，ArrayList中默认的数组大小是10。

# 2、构造函数

public ArrayList() {
+    this.elementData = DEFAULTCAPACITY_EMPTY_ELEMENTDATA;
+}
+

这个构造函数是开发最常用的，可以看到，它仅仅只是让elementData等于一个空数组（DEFAULTCAPACITY_EMPTY_ELEMENTDATA）而已。

public ArrayList(int initialCapacity) {
+    if (initialCapacity > 0) {
+        this.elementData = new Object[initialCapacity];
+    } else if (initialCapacity == 0) {
+        this.elementData = EMPTY_ELEMENTDATA;
+    } else {
+        throw new IllegalArgumentException("Illegal Capacity: "+
+                                           initialCapacity);
+    }
+}
+

这个构造函数可以指定初始化数组的长度，当initialCapacity大于0时，为elementData创建一个长度为initialCapacity的Object数组；当initialCapacity等于0时，则让elementData等于一个空数组（EMPTY_ELEMENTDATA）。

# 3、增

# 1）add(E e)
public boolean add(E e) {
+    ensureCapacityInternal(size + 1);  // Increments modCount!!
+    elementData[size++] = e;
+    return true;
+}
+

在前面已经提到了，size是一个成员变量，表示ArrayList中的元素个数。在这个方法中，先调用了ensureCapacityInternal()方法确保数组有足够的容量，再对将元素添加到elementData数组中。下面就来看看ensureCapacityInternal()方法是如何确保数组有足够的容量的。

private void ensureCapacityInternal(int minCapacity) {
+    if (elementData == DEFAULTCAPACITY_EMPTY_ELEMENTDATA) {
+        minCapacity = Math.max(DEFAULT_CAPACITY, minCapacity);
+    }
+
+    ensureExplicitCapacity(minCapacity);
+}
+

该方法结合ensureExplicitCapacity()方法，总的来说就是计算并扩大最小的容器体积。

这里就用到了DEFAULTCAPACITY_EMPTY_ELEMENTDATA这个空数组，如果此时elementData与DEFAULTCAPACITY_EMPTY_ELEMENTDATA相等，说明开发者使用的是无参构造函数创建了集合，而且是添加第一个元素，此时的容器大小为0。

private void ensureExplicitCapacity(int minCapacity) {
+    modCount++;
+
+    // overflow-conscious code
+    if (minCapacity - elementData.length > 0)
+        grow(minCapacity);
+}
+

当minCapacity - elementData.length > 0时，说明当前数组（容器）的空间不够了，需要扩容，所以调用grow()方法。

modCount只是一个计数变量而已，源码中有很多地方出现，无须理会。

private void grow(int minCapacity) {
+    // overflow-conscious code
+    int oldCapacity = elementData.length;
+    int newCapacity = oldCapacity + (oldCapacity >> 1);
+    if (newCapacity - minCapacity < 0)
+        newCapacity = minCapacity;
+    if (newCapacity - MAX_ARRAY_SIZE > 0)
+        newCapacity = hugeCapacity(minCapacity);
+    // minCapacity is usually close to size, so this is a win:
+    elementData = Arrays.copyOf(elementData, newCapacity);
+}
+

grow()方法是用来给ArrayList集合进行扩容的，它计算出新的容器大小（即newCapacity），并确保了newCapacity不会比minCapacity小，最后调用Arrays.copyOf()创建一个新的数组并将数据拷贝到新数组中，最后让elementData进行引用。

oldCapacity >> 1 等价于 oldCapacity / 2，也就是说ArrayList默认的扩容大小是当前数组大小的一半。

# 2）add(int index, E element)
public void add(int index, E element) {
+    rangeCheckForAdd(index);
+
+    ensureCapacityInternal(size + 1);  // Increments modCount!!
+    System.arraycopy(elementData, index, elementData, index + 1,
+                     size - index);
+    elementData[index] = element;
+    size++;
+}
+

经过对add(E e)方法进行分析，这个增加方法就很容易理解了，它先确保容器有足够大的空间，没有就扩容，然后将elementData数组中从index位置开始的所有元素往后"移动"1位，再对数组的index位置进行元素赋值，最后将记录集合中元素个数的size变量加1。

# 4、删

# 1）remove(int index)
public E remove(int index) {
+    rangeCheck(index);
+
+    modCount++;
+    E oldValue = elementData(index);
+
+    int numMoved = size - index - 1;
+    if (numMoved > 0)
+        System.arraycopy(elementData, index+1, elementData, index,
+                         numMoved);
+    elementData[--size] = null; // clear to let GC do its work
+
+    return oldValue;
+}
+

numMoved表示在执行删除操作时数组需要移动的元素个数，将elementData数组中从index后一位开始的所有元素（即numMoved个元素）往前"移动"1位（这样一移动，index位置的元素会被后面的元素覆盖，间接起到了删除元素的作用），然后把最后的那个元素置空，同时将size变量减1。

# 2）remove(Object o)
public boolean remove(Object o) {
+    if (o == null) {
+        for (int index = 0; index < size; index++)
+            if (elementData[index] == null) {
+                fastRemove(index);
+                return true;
+            }
+    } else {
+        for (int index = 0; index < size; index++)
+            if (o.equals(elementData[index])) {
+                fastRemove(index);
+                return true;
+            }
+    }
+    return false;
+}
+private void fastRemove(int index) {
+    modCount++;
+    int numMoved = size - index - 1;
+    if (numMoved > 0)
+        System.arraycopy(elementData, index+1, elementData, index,
+                         numMoved);
+    elementData[--size] = null; // clear to let GC do its work
+}
+

该方法的操作与remove(int index)基本一致，这里就不再说明了。（fastRemove()方法的代码不是可以复用么。。。）

# 5、查 & 改

ArrayList的修改和获取元素的方法相当简单，就是对elementData数组进行简单操作罢了，这里就列出源码看看就好了。

# 1）get(int index)
public E get(int index) {
+    rangeCheck(index);
+    return elementData(index);
+}
+
+E elementData(int index) {
+    return (E) elementData[index];
+}
+
# 2）set(int index, E element)
public E set(int index, E element) {
+    rangeCheck(index);
+
+    E oldValue = elementData(index);
+    elementData[index] = element;
+    return oldValue;
+}
+

# 三、总结

  1. ArrayList底层实现是数组。
  2. 当使用无参数构造函数创建ArrayList对象时，ArrayList对象中的数组初始长度为0（是一个空数组）。
  3. ArrayList的扩容策略是每次都增加当前数组长度的一半（非固定分配）。
  4. ArrayList的扩容方式是直接创建一个新的数组，并将数据拷贝到新数组中。
+ +
+
#源码分析#ArrayList
LayoutInflater源码分析与应用
LinkedList与Queue源码分析

+ ← + LinkedList与Queue源码分析→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/89a4c2/index.html b/pages/89a4c2/index.html new file mode 100644 index 000000000..75e5b28a5 --- /dev/null +++ b/pages/89a4c2/index.html @@ -0,0 +1,134 @@ + + + + + + DesignPattern - 外观模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-25
目录

DesignPattern - 外观模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、外观模式介绍

外观模式（Facade Pattern）又叫门面模式，隐藏系统的复杂性，定义一个高层接口，供客户端（也就是使用者）访问，该接口使得系统更加容易使用。

  • 核心组成 +
    • 外观角色(Facade)：客户端可以调用这个角色的方法，这个外观方法知道多个子系统的功能和实际调用
    • 子系统角色(SubSystem)：每个子系统都可以被客户端直接调用，子系统不知道门面的存在
  • 应用场景 +
    • MVC 三层架构中，各层之间使用 interface 接口进行交互，不用担心内部逻辑，降低耦合性
    • 各种第三方 SDK 大多会使用外观模式，通过一个外观类，也就是整个系统的接口只有一个统一的高层接口，这对用户屏蔽了很多实现细节，外观模式经常用在封闭 API 的常用手段
    • 对于复杂难以维护的老系统进行拓展，可以使用外观模式
    • 需要对一个复杂的模块或子系统提供一个外界访问的接口，外界对子系统的访问只要黑盒操作
  • 优点 +
    • 减少了系统的相互依赖，提高了灵活性
    • 符合依赖倒转原则：针对接口编程，依赖于抽象而不依赖于具体
    • 符合迪米特法则：最少知道原则，一个实体应当尽量少地与其他实体之间发生相互作用
  • 缺点 +
    • 增加了系统的类和链路
    • 不是很符合开闭原则，如果增加了新的逻辑，需要修改 facade 外观类

# 二、外观模式代码实现

创建子系统接口：

说明：该接口非必须，根据需要创建

public interface IMsgManager {
+	void pushMsg(String msg);
+}
+

创建子系统类：

说明：子系统不要求一定是同一类的，比如：用户登录子系统，余额查询子系统 等等

/**
+ * 子系统角色：微信消息推送
+ *
+ * @author GitLqr
+ */
+public class WechatMsgManager implements IMsgManager {
+	@Override
+	public void pushMsg(String msg) {
+		System.out.println("发送微信推送消息：" + msg);
+	}
+}
+/**
+ * 子系统角色：钉钉消息推送
+ *
+ * @author GitLqr
+ */
+public class DingDingMsgManager implements IMsgManager {
+	@Override
+	public void pushMsg(String msg) {
+		System.out.println("发送钉钉推送消息：" + msg);
+	}
+}
+

创建外观类：

/**
+ * 外观类：整合所有子系统，封装一个高层接口
+ *
+ * @author GitLqr
+ */
+public class MsgManagerFacade implements IMsgManager {
+
+	private IMsgManager wechatMsgManager = new WechatMsgManager();
+	private IMsgManager dingDingMsgManager = new DingDingMsgManager();
+
+	@Override
+	public void pushMsg(String msg) {
+		wechatMsgManager.pushMsg(msg);
+		dingDingMsgManager.pushMsg(msg);
+	}
+}
+
+ +
+
#设计模式#外观模式
DesignPattern - 代理模式【结构型】
DesignPattern - 享元模式【结构型】

+ ← + DesignPattern - 享元模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/89ebcc/index.html b/pages/89ebcc/index.html new file mode 100644 index 000000000..6e87334b2 --- /dev/null +++ b/pages/89ebcc/index.html @@ -0,0 +1,193 @@ + + + + + + Kotlin - 改良设计模式 - 策略模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-13
目录

Kotlin - 改良设计模式 - 策略模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 策略模式 +
    • 作用：让算法的变化独立于使用算法的客户
    • 核心操作：定义了算法族，分别封装起来，让它们之间可以相互替换

# 二、使用策略模式

  • 例子：游泳运动员的游泳姿势
  • 重点：算法抽离，封装成策略

作为一个游泳运动员，最基本的技能就是游泳，所以该类可以这么定义：

/**
+ * 游泳运动员
+ *
+ * @author GitLqr
+ */
+class Swimmer {
+    fun swim() {
+        println("游泳中...")
+    }
+}
+
+// 使用
+val shaw = Swimmer()
+shaw.swim() // 游泳中...
+

但是，游泳体育项目会对游泳姿势进行细分（姑且称之为技能吧），比如：蛙泳、仰泳、自由泳等等，那怎么让 Swimmer 可以使用这些技能呢？一种做法是直接给 Swimmer 添加这些技能对应的方法，比如：

// ========== 错误演示 ==========
+class Swimmer {
+    fun breaststroke() {
+        print("蛙泳...")
+    }
+
+    fun backstroke() {
+        print("仰泳...")
+    }
+
+    fun freestyle() {
+        print("自由泳...")
+    }
+}
+

可以很明确的说，这种做法是不行的，因为违背了开闭原则，后续被纳入标准的游泳姿势可能会越来越多，比如：狗刨，继续往 Swimmer 增加新方法吗？肯定不行，这时策略模式就派上用场了，站在程序角度看，游泳姿势也不过是一种算法，可以把这几种游泳姿势（算法）分别封装起来，为了能让算法相互替换，需要定义一个算法接口：

/**
+ * 游泳姿势接口
+ *
+ * @author GitLqr
+ */
+interface SwimStrategy {
+    fun swim()
+}
+
+/**
+ * 各种游泳姿势的具体实现
+ *
+ * @author GitLqr
+ */
+class Breaststroke : SwimStrategy {
+    override fun swim() {
+        print("蛙泳...")
+    }
+}
+
+class Backstroke : SwimStrategy {
+    override fun swim() {
+        print("仰泳...")
+    }
+}
+
+class Freestyle : SwimStrategy {
+    override fun swim() {
+        print("自由泳...")
+    }
+}
+

接着，再通过构造器，把算法交给 Swimmer 使用即可：

/**
+ * 游泳运动员（策略模式）
+ *
+ * @author GitLqr
+ */
+class Swimmer(val strategy: SwimStrategy) {
+    fun swim() {
+        strategy.swim()
+    }
+}
+
+// 使用
+val freestyleSwimmer = Swimmer(Freestyle())
+freestyleSwimmer.swim()
+val breaststrokeSwimmer = Swimmer(Breaststroke())
+breaststrokeSwimmer.swim()
+

以后有更多的游泳姿势，只需要扩展 SwimStrategy 的实现类即可，无需修改 Swimmer。

# 三、改良策略模式

  • 例子：游泳运动员的游泳姿势
  • 重点：高阶函数

高阶函数是参数或返回值是函数的函数，由于策略模式是对行为算法的一种抽象，上述例子的本质是让 Swimmer 对象执行外界传入的 算法函数 而已，那么借助高阶函数的特性，我们可以让 算法函数 作为高阶函数的参数传入即可，而不需要单独定义接口，所以在 Kotlin 中可以使用高阶函数来改良策略模式：

fun breaststroke() {
+    print("蛙泳...")
+}
+
+fun backstroke() {
+    print("仰泳...")
+}
+
+fun freestyle() {
+    print("自由泳...")
+}
+
+/**
+ * 游泳运动员（策略模式）改良：高阶函数
+ *
+ * @author GitLqr
+ */
+class Swimmer(val strategy: () -> Unit) {
+    fun swim() {
+        strategy()
+    }
+}
+
+// 使用
+val freestyleSwimmer = Swimmer(::freestyle) // 传入方法引用
+freestyleSwimmer.swim()
+val breaststrokeSwimmer = Swimmer(::breaststroke)
+breaststrokeSwimmer.swim()
+

改造之后，不但减少了代码量（去掉了策略算法接口），也使代码结构更加直观。

+ +
+
#设计模式#策略模式
Kotlin - 改良设计模式 - 观察者模式
Kotlin - 改良设计模式 - 迭代器模式

+ ← + Kotlin - 改良设计模式 - 迭代器模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/8ad3be/index.html b/pages/8ad3be/index.html new file mode 100644 index 000000000..e9a94e2ca --- /dev/null +++ b/pages/8ad3be/index.html @@ -0,0 +1,250 @@ + + + + + + Android库发布至MavenCentral流程详解 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-04-21
目录

Android库发布至MavenCentral流程详解

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

"jCenter 不久后将停止服务" 这个消息对所有 Android 开发者的影响是很大的，很多好用的第三方库都会上传到 jCenter，而且几乎所有的 Android 项目里都会依赖到 jCenter 仓库，这意味着 Android 开发者对其有很强的依赖性。作为第三方库使用者来说，一旦到了 jCenter 停服那时，只有 2 种选择：

  1. 使用阿里等第三方代理仓库（上面可能会缓存着这些曾经托管在 jCenter 上的第三方库）
  2. 祈祷第三方库作者能早日同步库到 MavenCentral

以下是其他人对 jCenter 停服事件的看法文章推荐，有兴趣可以去看看：
《浅谈 JCenter 即将被停止服务的事件》 (opens new window)

回归主题，如果你是一个第三方库开发者，且之前没有上传库到 MavenCentral 经验的话，本文可以助你早日上传库到 MavenCentral~

# 一、Sonatype 账号

# 1、注册 Sonatype

MavenCentral 和 Sonatype 的关系相当于 jCenter 和 jForg：

库平台 运营商 管理后台
jCenter jForg bintray.com
MavenCentral Sonatype oss.sonatype.org

注意：最新管理后台链接是：s01.oss.sonatype.org，详情见https://central.sonatype.org/publish/release/ (opens new window)

所以，在上传库到 MavenCentral 之前，需要先注册登录 Sonatype，访问 https://issues.sonatype.org (opens new window) :

如果你已经有账号，则直接登录，否则点击 Sign up 进入注册页面：

填写好账号、密码、邮箱等信息即可注册成功，注册成功后再登录 Sonatype。

注意：邮箱很重要，建议是你常用的邮箱，才能及时收到 Sonatype 在 issue 中给你的答复信息提醒。

# 2、申请上传权限

现在你已经有 Sonatype 账号了，接下来理应就是借助 grdle 脚本经 管理后台(s01.oss.sonatype.org) 把库上传到 MavenCentral ，但是，Sonatype 新用户默认是没有这个权限的，不信你可以访问 s01.oss.sonatype.org (opens new window)后，点击右上角 "Log In" 登录试试看，会提示没有权限：

注意：出现这个弹窗有 2 种可能，一种是账号密码错误，另一种没有权限。

所以，现在我们需要让 Sonatype 给我们开通这个权限，回到登录成功后跳转的那个页面issues.sonatype.org (opens new window)，点击顶部的 新建 按钮，填写项目信息：

注意：图中是我个人项目信息，只是举例，不要照抄！！

这个步骤中，唯一需要注意的地方就是 Group Id，有两种情况：

  • 无网站域名：可以直接使用 github 的子域名 io.github.username，比如我的 github 账号名是 GitLqr，那么可以填写 io.github.gitlqr。
  • 有网站域名：可以填写个人或公司域名，比如：com.gitlqr，另外，还需要在 DNS 配置中配置一个 TXT 记录来验证域名所有权，具体请看：https://central.sonatype.org/pages/producers.html (opens new window)

注意：目前已经不能再使用 com.github 域名了，具体原因请看：https://central.sonatype.org/changelog/#2021-04-01-comgithub-is-not-supported-anymore-as-a-valid-coordinate (opens new window)；使用自己的网站域名时，建议写顶级域名，不需要具体到某个项目的子域名，如此一来，Group Id 只需要申请一次，以后你的其他库都使用同一个 Group Id 即可。

填写信息后，点击"新建"按钮，开启一个 issue，会显示 wait for response，等待 Sonatype 工作人员审核回复：

因为 Sonatype 是国外运营，所以工作时间上会有时差，我们需要耐心等待 Sonatype 工作人员处理这个 issue，比如我这样：

注意：如果你想尽快上传库，那么前面已经提到了，请使用你常用的邮箱，当 Sonatype 工作人员评论时，会第一时间通过邮件通知到你。

# 二、Gradle 配置

首次向 Sonatype 申请上传权限可能会有点久，我们可以同步处理 gradle 配置。

# 1、Maven 提交脚本

在项目根目录下新建一个 maven-publish.gradle 文件，内容如下：

注意：以下内容是通用配置，直接拷贝即可。

if (project.hasProperty("android")) { // Android libraries
+    task sourcesJar(type: Jar) {
+        classifier = 'sources'
+        from android.sourceSets.main.java.srcDirs
+    }
+
+    task javadoc(type: Javadoc) {
+        // https://github.com/novoda/bintray-release/issues/71
+        excludes = ['**/*.kt'] // < ---- Exclude all kotlin files from javadoc file.
+        source = android.sourceSets.main.java.srcDirs
+        classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
+        options.encoding = "utf-8"
+        options.charSet = "utf-8"
+    }
+} else { // Java libraries
+    task sourcesJar(type: Jar, dependsOn: classes) {
+        classifier = 'sources'
+        from sourceSets.main.allSource
+    }
+}
+
+// 强制 Java/JavaDoc 等的编码为 UTF-8
+tasks.withType(JavaCompile) {
+    options.encoding = "UTF-8"
+}
+
+tasks.withType(Javadoc) {
+    options.encoding = "UTF-8"
+}
+
+task javadocJar(type: Jar, dependsOn: javadoc) {
+    classifier = 'javadoc'
+    from javadoc.destinationDir
+}
+
+// add javadoc/source jar tasks as artifacts
+artifacts {
+    archives javadocJar
+    archives sourcesJar
+}
+
+apply plugin: 'maven'
+apply plugin: 'signing'
+
+
+//Properties properties = new Properties()
+//properties.load(project.rootProject.file('local.properties').newDataInputStream())
+//
+//def ossrhUsername = properties.getProperty("ossrhUsername")
+//def ossrhPassword = properties.getProperty("ossrhPassword")
+
+def PUBLISH_GROUP_ID = publishedGroupId //这里可以不是直接申请时候的groupId只要开头是就可以
+
+def PUBLISH_ARTIFACT_ID = artifact
+
+def PUBLISH_VERSION = libraryVersion // android.defaultConfig.versionName //这个是直接获取的库gradle里配置好的版本号，不用到处修改版本号，只需要维护一份就可以。
+
+//签名
+signing {
+    required { gradle.taskGraph.hasTask("uploadArchives") }
+    sign configurations.archives
+}
+
+uploadArchives {
+    repositories {
+        mavenDeployer {
+
+            beforeDeployment { MavenDeployment deployment -> signing.signPom(deployment) }
+
+            repository(url: "https://s01.oss.sonatype.org/service/local/staging/deploy/maven2/") {
+                authentication(userName: ossrhUsername, password: ossrhPassword)
+            }
+
+            snapshotRepository(url: "https://s01.oss.sonatype.org/content/repositories/snapshots/") {
+                authentication(userName: ossrhUsername, password: ossrhPassword)
+            }
+
+            pom.groupId = PUBLISH_GROUP_ID
+            pom.artifactId = PUBLISH_ARTIFACT_ID
+            pom.version = PUBLISH_VERSION
+
+            pom.project {
+                packaging 'aar' //我这里发布的是安卓的包，所有写的aar
+
+                name libraryName // '发布库的简单名称'
+                // optionally artifactId can be defined here
+                description libraryDescription // '发布包的描述'
+                url siteUrl // '可以写公司官网地址或github个人页面地址'
+
+                scm {
+                    connection gitUrl // 'scm:替换成项目git地址'
+                    developerConnection gitUrl // 'scm:替换为git开头的项目地址'
+                    url siteUrl // '项目首页，可以是github项目的主页'
+                }
+
+                licenses {
+                    license {
+                        name licenseName // 'The Apache License, Version 2.0'
+                        url licenseUrl // 'http://www.apache.org/licenses/LICENSE-2.0.txt'
+                    }
+                }
+
+                developers {
+                    developer {
+                        id developerId // '这里填写申请账号时候的全名就可以'
+                        name developerName // '这里随意填写就可以'
+                        email developerEmail// '最好是申请账号时用的邮箱'
+                    }
+                }
+            }
+        }
+    }
+}
+

# 2、Maven 库信息配置

库信息共用两处配置：

  • 通用信息：填写在项目根目录下的 gradle.prperties 文件中。
  • Module 信息：填写在具体 Module 目录下的 build.gradle 文件中。

# 通用信息 gradle.prperties 配置

publishedGroupId=你申请权限时填写的GroupId
+siteUrl=项目url
+gitUrl=git链接
+developerId=账号id
+developerName=账号id
+developerEmail=邮箱
+
+licenseName=The Apache Software License, Version 2.0
+licenseUrl=http://www.apache.org/licenses/LICENSE-2.0.txt
+allLicenses=["Apache-2.0"]
+

具体可参考 https://github.com/GitLqr/LiteARouter/blob/main/gradle.properties (opens new window)

# Module 信息 build.gradle 配置

ext {
+    artifact = '库的唯一标识'
+    libraryName = '发布库的简单名称'
+    libraryDescription = '发布包的描述'
+    libraryVersion = '发布库的版本号'
+}
+

具体可参考 https://github.com/GitLqr/LiteARouter/blob/main/litearouter-api/build.gradle (opens new window)

# 3、导入 Maven 脚本

在库对应的 Module 目录下的build.gradle文件底部添加如下代码：

apply from: '../maven-publish.gradle'
+

在 AS 中 Sync Now 一下 Gradle，就可以在 Gradle 面板中看到多了一个 upload/uploadArchives 任务了。

# 三、GPG 签名

通过以上两步之后，还差最后一步，此时你运行 uploadArchives 任务是无法正常提交的，MavenCentral 提交还需要配置 GPG 签名文件。

# 1、使用 Gpg4win 生成 GPG 密钥

注意：以下生成 GPG 密钥的操作流程使用的是 Window 环境，如果你使用的是 Mac，请参考：https://www.jianshu.com/p/1c715203c7c6 (opens new window)

先到https://www.gpg4win.org/get-gpg4win.html (opens new window)下载安装好 Gpg4win：

启动 Gpg4win，点击 "文件" - "新建密钥对..."：

创建个人 OpenPGP 密钥对：

填写账号、邮箱，并勾选 Protect the generated key with a passphrase：

注意：在高级设置里可以设置更详细的，例如过期时间，但过期时间不可以太长，或报错。

点击 "新建"， 设置密码（确认密码）：

等待生成密钥后，出现如下弹窗，点击 "完成"：

在主界面双击刚刚创建好的密钥，会出现如下弹窗，需要把底部的那 8 个字符复制下来，在后面的【配置密钥】环节会用到：

在主界面右击刚刚创建好的密钥，点击 "在服务器上发布..."，然后一路确定：

在主界面右击刚刚创建好的密钥，点击 "导出..."，这时注意了，一定要在这里先把文件名改成 "gpg" 或者 "pgp"，再点保存：

注意了，Gpg4win 的导出分为两种：

  • "导出...": 导出公钥
  • "Backup Secret Keys": 导出 私钥 !!

提示：后续步骤需要用到的是 私钥，所以需要点 "Backup Secret Keys" 导出私钥的 gpg 文件；导出时默认文件后缀是 "asc"，一定要在这时修改后缀为 "gpg"，这样才能生成正确的 二进制 gpg 密钥文件。如果先保存成 asc 文本文件，再修改成 gpg 是没有用的！！！

# 2、配置密钥

这一步很关键，需要在电脑 用户目录 下的 .gradle/gradle.properties 中配置如下内容：

比如：C:\Users\CharyLin\.gradle\gradle.properties

# MavenCentral
+signing.keyId=刚才获取的密钥后8位
+signing.password=之前我们执行命令时设置的密码
+signing.secretKeyRingFile=刚才生成的gpg文件路径
+ossrhUsername=sonatype用户名
+ossrhPassword=sonatype密码
+

# 四、发布

# 1、上传档案(uploadArchives)

到了这一步，就可以去 Gradle 面板中双击执行 uploadArchives 任务了，成功的话，会出现如下日志：

11:12:00: Executing task 'uploadArchives'...
+
+...
+
+> Task :litearouter-api:sourcesJar UP-TO-DATE
+> Task :litearouter-api:signArchives UP-TO-DATE
+> Task :litearouter-api:uploadArchives
+
+...
+
+BUILD SUCCESSFUL in 16s
+23 actionable tasks: 1 executed, 22 up-to-date
+11:12:16: Task execution finished 'uploadArchives'.
+

如果出现 Unable to read secret key from file: it may not be a PGP secret key ring 的错误，有以下三种可能：

  • GPG 账号、密码有误
  • 使用的是 GPG 公钥文件
  • 使用的是 GPG 密钥文件，但是是先保存成 asc 文件后修改成 gpg 文件
FAILURE: Build failed with an exception.
+
+* What went wrong:
+Could not evaluate onlyIf predicate for task ':litearouter-annotation:signArchives'.
+> Unable to read secret key from file: D:\CharyLinDatas\GitLqr\secret.gpg (it may not be a PGP secret key ring)
+
+* Try:
+Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
+
+* Get more help at https://help.gradle.org
+
+BUILD FAILED in 11s
+

# 2、发布档案

现在可以去登录下的管理后台 https://s01.oss.sonatype.org/ (opens new window), 然后点击左侧的 "Staging Repositories":

选中刚上传的包, 底部的 Content 选项卡下,可以看到包内的文件有哪些:

确定无误后, 点击 "Close", 填写描述信息, 然后点击 "Confirm":

正常情况下, 等待几分钟后, Activity 选项卡中出现对号的 "Repository closed" 就是 close 成功了:

然后再点击 "Release" 按钮即可发布到 MavenCentral, 等待几个小时后可以在 https://search.maven.org/ (opens new window) 查询发布结果。

因为 Release 时勾选了 "Automatically Drop" 选项, 所以当包发布成功之后会自动从 Staging Repository 中删除。

需要注意的是, 如果你的库有好几个 component, 像我的项目就包含了 litearouter-annotation 、litearouter-api 、litearouter-compiler 三个, 切记一个一个按流程来, 比如:

  • litearouter-annotation: upload --> close --> release
  • litearouter-api: upload --> close --> release
  • litearouter-compiler: upload --> close --> release

不要一次性全部 upload, 然后又一次性 close, 最后再一次性 release, 这种做法不确定会带来什么后果, 建议不要这样搞。

# 五、补充

# 1、Group Id 是什么

gradle 中会使用 implementation 来依赖某个第三方库，结构为：implementation GroupId:ArtifactId:Version：

比如：implementation 'com.android.support:appcompat-v7:27.1.1'

组成部分 解释
GroupId 是项目组织的唯一标识符，在实际开发中一般对应 JAVA 的包的结构，就是 main 目录里 java 的目录结构，如 ‘com.android.support’。
ArtifactId 是项目的唯一标识符，在实际开发中一般对应项目的名称，就是项目根目录的名称,例：appcompat-v7。
Version 是项目的版本号，例：1.0-SNAPSHOT 。其中 1.0 是版本号，SNAPSHOT 版本代表不稳定、尚处于开发中的版本。而衍生的有 Release 版本则代表稳定的版本

注意：这里说的是 GroupId 一般 对应包结构，也就是说，GroupId 与 包名 是可以不一样的。就像 Android 项目里的 applicationId 跟 包名 是两个不同的概念一样。

# 参考资料

+ +
+
#jCenter#MavenCentral
安卓第三方登录之微信登录（图文详解）
Android - OkHttp 访问 https 的怪问题

+ ← + Android - OkHttp 访问 https 的怪问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/8cf0b6/index.html b/pages/8cf0b6/index.html new file mode 100644 index 000000000..50fad144c --- /dev/null +++ b/pages/8cf0b6/index.html @@ -0,0 +1,293 @@ + + + + + + DesignPattern - 工厂模式【创建型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-27
目录

DesignPattern - 工厂模式【创建型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、工厂模式介绍

工厂模式提供了一种创建对象的最佳方式，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

  • 例子： +
    • 需要购买一辆车，不用管车辆如何组装，且可以购买不同类型的汽车，比如轿车、SUV、跑车，直接去 4s 店购买就行（4s 店就是工厂）
    • 工厂生产电脑，除了 A 品牌、还可以生产 B、C、D 品牌电脑
    • 支付业务开发，会统一下单和支付接口，具体的支付实现可以是微信、支付、银行卡等
  • 分类： +
    • 简单工厂模式：通过传入相关的类型来返回相应的类，这种方式比较单一，可扩展性较差。
    • 工厂方法模式：通过实现类 实现相应的方法来决定相应的返回结果，这种方式的可扩展性比较强。
    • 抽象工厂模式：基于上述两种模式的扩展，且支持细化产品。
  • 应用场景： +
    • 解耦：分离职责，把复杂对象的创建和使用的过程分开
    • 复用代码，降低维护成本： +
      • 如果对象创建复杂且多处需要用到，如果每处都进行编写，则很多重复代码，如果业务逻辑发生了改变，需要四处修改
      • 使用工厂模式统一创建，则只要修改工厂类即可，降低成本

提示：工厂模式适合复杂对象的创建

# 二、工厂模式代码实现

# 1、简单工厂模式

简单工厂可以根据不同参数返回不同类的实例，需要专门定义一个工厂类来负责创建其他类的实例，被创建实例通常都具有共同的父类或接口；简单工厂又称 静态工厂方法，可通过类名直接调用 ，而且只需要传入简单的参数即可。

  • 核心组成 +
    • Factory：工厂类，简单工厂模式的核心，它负责实现创建所有实例的内部逻辑
    • IProduct：抽象产品类，简单工厂模式所创建的所有对象的父类，描述所有实例所共有的公共接口
    • Product：具体产品类，是简单工厂模式的创建目标
  • 实现步骤 +
    • 创建抽象产品类，里面有产品的抽象方法，由具体的产品类去实现
    • 创建具体产品类，继承【创建抽象产品类】，并实现具体方法
    • 创建工厂类，提供一个静态方法（createXXX）用来生产产品，只需要传入你想要的产品标识（如：产品名称）
  • 优点：将对象的创建和对象本身业务处理分离，可以降低系统的耦合度，使得两者修改起来都相对容易。
  • 缺点：工厂类的职责相对过重，增加新的产品需要修改工厂类的判断逻辑，这一点与开闭原则是相违背的。

创建抽象产品类：

/**
+ * 抽象产品
+ *
+ * @author GitLqr
+ */
+public interface IPay {
+	/**
+	 * 下单功能
+	 */
+	void order();
+}
+

创建具体产品类：

/**
+ * 具体产品：微信支付
+ *
+ * @author GitLqr
+ */
+public class WechatPay implements IPay {
+	@Override
+	public void order() {
+		System.out.println("微信 下单");
+	}
+}
+
+/**
+ * 具体产品：支付宝支付
+ *
+ * @author GitLqr
+ */
+public class AliPay implements IPay {
+	@Override
+	public void order() {
+		System.out.println("支付宝 下单");
+	}
+}
+

创建工厂类：

/**
+ * 工厂类
+ *
+ * @author GitLqr
+ */
+public class PayFactory {
+	/**
+	 * 根据参数 返回对应的支付对象
+	 */
+	public static IPay createPay(String payType) {
+		switch (payType) {
+		case "alipay":
+			return new AliPay();
+		case "wechat":
+			return new WechatPay();
+		default:
+			return null;
+		}
+	}
+}
+

使用：

public static void main(String[] args) {
+    // 简单工厂
+    // IPay pay = PayFactory.createPay("alipay");
+    IPay pay = PayFactory.createPay("wechat");
+    pay.order();
+}
+

# 2、工厂方法模式

工厂方法又称 工厂模式，是对简单工厂模式的进一步抽象化，其好处是可以使系统在不修改原来代码的情况下引进新的产品，即满足开闭原则。通过工厂父类定义负责创建产品的公共接口，通过子类来确定所需要创建的类型。

  • 核心组成 +
    • IProduct：抽象产品类，描述所有实例所共有的公共接口
    • Product：具体产品类，实现抽象产品类的接口
    • IFactory：抽象工厂类，描述具体工厂的公共接口
    • Factory：具体工厂类，实现抽象工厂类的接口，创建具体产品对象
  • 优点： +
    • 相比简单工厂而言，工厂方法具有更多的可扩展性和复用性，同时也增强了代码的可读性
    • 将类的实例化（具体产品的创建）延迟到工厂类的子类（具体工厂）中完成，即由子类来决定应该实例化哪一个类
    • 符合开闭原则，增加一个产品类，只需要实现其他具体的产品类和具体的工厂类
    • 符合单一职责原则，每个工厂只负责生产对应的产品
    • 使用者只需要知道产品的抽象类，无须关心产品的具体实现类，满足迪米特法则、依赖倒置原则和里氏替换原则
  • 缺点： +
    • 每个产品需要有对应的具体工厂和具体产品类，即每增加一个产品，都至少会增加 2 个类
    • 使用者必须知道具体的工厂实现类

创建抽象工厂类：

/**
+ * 抽象工厂类
+ *
+ * @author GitLqr
+ */
+public interface IPayFactory {
+	public IPay getPay();
+}
+

创建具体工厂类：

/**
+ * 具体工厂类：创建 支付宝支付 对象
+ *
+ * @author GitLqr
+ */
+public class AliPayFactory implements IPayFactory {
+	@Override
+	public IPay getPay() {
+		return new AliPay();
+	}
+}
+
+/**
+ * 具体工厂类：创建 微信支付 对象
+ *
+ * @author GitLqr
+ */
+public class WechatPayFactory implements IPayFactory {
+	@Override
+	public IPay getPay() {
+		return new WechatPay();
+	}
+}
+

使用：

public static void main(String[] args) {
+    // 工厂方法
+    // IPayFactory payFactory = new AliPayFactory();
+    IPayFactory payFactory = new WechatPayFactory();
+    payFactory.getPay().order();
+}
+

补充：如果后续需要增加第三种支付方式，比如银联支付，那么只需要再扩展出具体产品 UnionPay，以及具体工厂 UnionPayFactory 即可，而无需改动原有的类。

# 3、抽象工厂模式

抽象工厂模式是基于上述两种模式的拓展，是工厂方法模式的升级版，当需要创建的产品有多个产品线时使用抽象工厂模式是比较好的选择。

  • 背景： +
    • 工厂方法模式引入工厂等级结构，解决了简单工厂模式中工厂类职责过重的问题
    • 但工厂方法模式中每个工厂只创建一类具体产品类的对象，后续发展可能会导致工厂类过多，因此将一些相关的具体类组成一个”具体类族“，由同一个工厂来统一生产，强调的是一系列相关的产品对象！！
  • 优点： +
    • 当一个产品族中的多个对象被设计成一起工作时，它能保证使用方始终只使用一个产品族中的对象
  • 缺点： +
    • 产品族扩展困难，要增加一个系列的某一产品，既要在抽象工厂和超级工厂类里修改代码，不是很符合开闭原则
    • 增加了系统的抽象性和理解难度

补充：当抽象工厂模式中每一个具体工厂类只创建一个产品对象时，抽象工厂模式退化成工厂方法模式。

# 1）推导过程（工厂方法 --> 抽象工厂 ）

假设 "产品" 现在不只有 支付，还需要有 退款，提现 等，这时，"产品" 的【抽象产品类】和【具体产品类】将拓展为如下所示：

支付(IPay) 退款(IRefund) 提现(ICashout)
支付宝 AliPay AliRefund AliCashout
微信 WechatPay WechatRefund WechatCashout
银联 UnionPay UnionRefund UnionCashout

根据 工厂方法模式 的核心要求（一种工厂 对应生成 一种产品），那么对应的【抽象工厂类】和【具体工厂类】将拓展为如下所示：

支付(IPayFactory) 退款(IRefundFactory) 提现(ICashoutFactory)
支付宝 AliPayFactory AliRefundFactory AliCashoutFactory
微信 WechatPayFactory WechatRefundFactory WechatCashoutFactory
银联 UnionPayFactory UnionRefundFactory UnionCashoutFactory

这时就会发现，严格按照工厂方法模式的要求会有如下弊端：

  1. 工厂类太多了，整体感觉工程文件数量很冗余
  2. 对使用者不友好，需要知道的 "工厂" 有点多

其实这些 "产品"（支付、退款、提现...）都是属于一类（订单相关）， 因此，可以对【抽象工厂类】进行增强，由一个【抽象工厂类】来负责生产一类 "产品"，例如可以创建 IOrderFactory，汇总 IPayFactory、IRefundFactory、ICashoutFactory 的创建方法并对它们进行取缔。于是，使用了抽象工厂模式后，对应的【抽象工厂类】和【具体工厂类】将拓展为如下所示：

支付、退款、提现(IOrderFactory)
支付宝 AliOrderFactory
微信 WechatOrderFactory
银联 UnionOrderFactory

注意：抽象工厂 相比 工厂方法，就是增强了抽象工厂类，同时思想上也有了重大变化，让抽象工厂类不再局限于一种产品，而是一系列产品。

# 2）代码实现

创建抽象产品类：

/**
+ * 抽象产品
+ *
+ * @author GitLqr
+ */
+public interface IRefund {
+	/**
+	 * 退款
+	 */
+	void refund();
+}
+

创建具体产品类：

/**
+ * 具体产品：支付宝退款
+ *
+ * @author GitLqr
+ */
+public class AliRefund implements IRefund {
+	@Override
+	public void refund() {
+		System.out.println("支付宝 退款");
+	}
+}
+/**
+ * 具体产品：微信退款
+ *
+ * @author GitLqr
+ */
+public class WechatRefund implements IRefund {
+	@Override
+	public void refund() {
+		System.out.println("微信 退款");
+	}
+}
+

创建抽象工厂类【增强版】：

/**
+ * 抽象工厂类【增强版】
+ *
+ * @author GitLqr
+ */
+public interface IOrderFactory {
+	IPay getPay();
+
+	IRefund getRefund();
+}
+

创建具体工厂类【增强版】：

/**
+ * 具体工厂类：创建 支付宝 订单相关的一系列产品功能
+ *
+ * @author GitLqr
+ */
+public class AliOrderFactory implements IOrderFactory {
+	@Override
+	public IPay getPay() {
+		return new AliPay();
+	}
+
+	@Override
+	public IRefund getRefund() {
+		return new AliRefund();
+	}
+}
+/**
+ * 具体工厂类：创建 微信 订单相关的一系列产品功能
+ *
+ * @author GitLqr
+ */
+public class WechatOrderFactory implements IOrderFactory {
+	@Override
+	public IPay getPay() {
+		return new WechatPay();
+	}
+
+	@Override
+	public IRefund getRefund() {
+		return new WechatRefund();
+	}
+}
+

还可以借鉴简单工厂模式，创建一个"超级工厂类"，根据不同参数获取不同的具体工厂，方便使用者使用：

public class OrderFactoryProducer {
+
+	public static IOrderFactory getFactory(String type) {
+		switch (type) {
+		case "alipay":
+			return new AliOrderFactory();
+		case "wechat":
+			return new WechatOrderFactory();
+		default:
+			return null;
+		}
+	}
+}
+

说明：【简单工厂模式】的最大缺点就是负责了所有具体产品的创建，而这里则不同，具体产品的创建已交由具体工厂去创建，"超级工厂类" 只负责找到合适的具体工厂，与产品没有直接关系。当然，”超级工厂类“这种方式方式还是不符合开闭原则的，需自己权衡利弊，个人感觉至少比让使用者直接使用具体工厂要好控制一些。

使用：

public static void main(String[] args) {
+    // 抽象工厂
+    // IOrderFactory orderFactory = OrderFactoryProducer.getFactory("alipay");
+    IOrderFactory orderFactory = OrderFactoryProducer.getFactory("wechat");
+    orderFactory.getPay().order();
+    orderFactory.getRefund().refund();
+}
+
+ +
+
#设计模式#工厂模式
DesignPattern - 单例模式【创建型】
DesignPattern - 原型模式【创建型】

+ ← + DesignPattern - 原型模式【创建型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/8e3184/index.html b/pages/8e3184/index.html new file mode 100644 index 000000000..2a060c017 --- /dev/null +++ b/pages/8e3184/index.html @@ -0,0 +1,434 @@ + + + + + + 热修复 - 深入浅出原理与实现 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-14
目录

热修复 - 深入浅出原理与实现

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

热修复无疑是这2年较火的新技术，是作为安卓工程师必学的技能之一。在热修复出现之前，一个已经上线的app中如果出现了bug，即使是一个非常小的bug，不及时更新的话有可能存在风险，若要及时更新就得将app重新打包发布到应用市场后，让用户再一次下载，这样就大大降低了用户体验，当热修复出现之后，这样的问题就不再是问题了。

目前较火的热修复方案大致分为两派，分别是：

  1. 阿里系：DeXposed、andfix：从底层二进制入手（c语言）。
  2. 腾讯系：tinker：从java加载机制入手。

本篇的主题并非讲述上面两种方案的使用，而是基于java加载机制，来研究热修复的原理与实现。（类似tinker，当然tinker没这么简单）

# 二、Android中如何动态修复bug

关于bug的概念自己百度百科吧，我认为的bug一般有2种（可能不太准确）：

  • 代码功能不符合项目预期，即代码逻辑有问题。
  • 程序代码不够健壮导致App运行时崩溃。

这两种情况一般是一个或多个class出现了问题，在一个理想的状态下，我们只需将修复好的这些个class更新到用户手机上的app中就可以修复这些bug了。但说着简单，要怎么才能动态更新这些class呢？其实，不管是哪种热修复方案，肯定是如下几个步骤：

  1. 下发补丁（内含修复好的class）到用户手机，即让app从服务器上下载（网络传输）
  2. app通过**"某种方式"**，使补丁中的class被app调用（本地更新）

这里的**"某种方式"**，对本篇而言，就是使用Android的类加载器，通过类加载器加载这些修复好的class，覆盖对应有问题的class，理论上就能修复bug了。所以，下面就先来了解和分析Android中的类加载器吧。

# 三、Android中的类加载器

Android跟java有很大的渊源，基于jvm的java应用是通过ClassLoader来加载应用中的class的，但我们知道Android对jvm优化过，使用的是dalvik，且class文件会被打包进一个dex文件中，底层虚拟机有所不同，那么它们的类加载器当然也是会有所区别，在Android中，要加载dex文件中的class文件就需要用到 PathClassLoader 或 DexClassLoader 这两个Android专用的类加载器。

# 1、源码查看

一般的源码在Android Studio中可以查到，但 PathClassLoader 和 DexClassLoader 的源码是属于系统级源码，所以无法在Android Studio中直接查看。不过，有两种方式可以在外部进行查看：第一种是通过下载Android镜像源码的方式进行查看，但一般镜像源码体积较大，不好下载，而且就只是为了看3、4个文件的源码动不动就下载3、4个g的源码，确实不太明智，所以我们一般采用第二种方式：到androidxref.com (opens new window)这个网站上直接查看，下面会列出之后要分析的几个类的源码地址，供看客们方便浏览。

以下是Android 5.0中的部分源码：

# 2、PathClassLoader与DexClassLoader的区别

# 1）使用场景

  • PathClassLoader：只能加载已经安装到Android系统中的apk文件（/data/app目录），是Android默认使用的类加载器。
  • DexClassLoader：可以加载任意目录下的dex/jar/apk/zip文件，比PathClassLoader更灵活，是实现热修复的重点。

# 2）代码差异

因为PathClassLoader与DexClassLoader的源码都很简单，我就直接将它们的全部源码复制过来了：

// PathClassLoader
+public class PathClassLoader extends BaseDexClassLoader {
+    public PathClassLoader(String dexPath, ClassLoader parent) {
+        super(dexPath, null, null, parent);
+    }
+
+    public PathClassLoader(String dexPath, String librarySearchPath, ClassLoader parent) {
+        super(dexPath, null, librarySearchPath, parent);
+    }
+}
+
+// DexClassLoader
+public class DexClassLoader extends BaseDexClassLoader {
+    public DexClassLoader(String dexPath, String optimizedDirectory,
+            String librarySearchPath, ClassLoader parent) {
+        super(dexPath, new File(optimizedDirectory), librarySearchPath, parent);
+    }
+}
+

通过比对，可以得出2个结论：

  • PathClassLoader与DexClassLoader都继承于BaseDexClassLoader。
  • PathClassLoader与DexClassLoader在构造函数中都调用了父类的构造函数，但DexClassLoader多传了一个optimizedDirectory。

# 3、BaseDexClassLoader

通过观察PathClassLoader与DexClassLoader的源码我们就可以确定，真正有意义的处理逻辑肯定在BaseDexClassLoader中，所以下面着重分析BaseDexClassLoader源码。

# 1）构造函数

先来看看BaseDexClassLoader的构造函数都做了什么：

public class BaseDexClassLoader extends ClassLoader {
+	...
+	public BaseDexClassLoader(String dexPath, File optimizedDirectory, String libraryPath, ClassLoader parent){
+        super(parent);
+        this.pathList = new DexPathList(this, dexPath, libraryPath, optimizedDirectory);
+    }
+	...
+}
+
  • dexPath：要加载的程序文件（一般是dex文件，也可以是jar/apk/zip文件）所在目录。
  • optimizedDirectory：dex文件的输出目录（因为在加载jar/apk/zip等压缩格式的程序文件时会解压出其中的dex文件，该目录就是专门用于存放这些被解压出来的dex文件的）。
  • libraryPath：加载程序文件时需要用到的库路径。
  • parent：父加载器

***tip：**上面说到的"程序文件"这个概念是我自己定义的，因为从一个完整App的角度来说，程序文件指定的就是apk包中的classes.dex文件；但从热修复的角度来看，程序文件指的是补丁。

因为PathClassLoader只会加载已安装包中的dex文件，而DexClassLoader不仅仅可以加载dex文件，还可以加载jar、apk、zip文件中的dex，我们知道jar、apk、zip其实就是一些压缩格式，要拿到压缩包里面的dex文件就需要解压，所以，DexClassLoader在调用父类构造函数时会指定一个解压的目录。

不过，从Android 8.0开始，BaseDexClassLoader的构造函数逻辑发生了变化，optimizedDirectory过时，不再生效，详情可查看Android 8.0的BaseDexClassLoader.java源码 (opens new window)

# 2）获取class

类加载器肯定会提供有一个方法来供外界找到它所加载到的class，该方法就是findClass()，不过在PathClassLoader和DexClassLoader源码中都没有重写父类的findClass()方法，但它们的父类BaseDexClassLoader就有重写findClass()，所以来看看BaseDexClassLoader的findClass()方法都做了哪些操作，代码如下：

private final DexPathList pathList;
+
+@Override
+protected Class<?> findClass(String name) throws ClassNotFoundException {
+    List<Throwable> suppressedExceptions = new ArrayList<Throwable>();
+	// 实质是通过pathList的对象findClass()方法来获取class
+    Class c = pathList.findClass(name, suppressedExceptions);
+    if (c == null) {
+        ClassNotFoundException cnfe = new ClassNotFoundException("Didn't find class \"" + name + "\" on path: " + pathList);
+        for (Throwable t : suppressedExceptions) {
+            cnfe.addSuppressed(t);
+        }
+        throw cnfe;
+    }
+    return c;
+}
+

可以看到，BaseDexClassLoader的findClass()方法实际上是通过DexPathList对象（pathList）的findClass()方法来获取class的，而这个DexPathList对象恰好在之前的BaseDexClassLoader构造函数中就已经被创建好了。所以，下面就来看看DexPathList类中都做了什么。

# 4、DexPathList

在分析一个代码量较多的源码之前，我们要明确要从这段源码中要知道些什么？这样才不会在“码海”中迷失方向，我自己就定了2个小目标，分别是：

  • DexPathList的构造函数做了什么事？
  • DexPathList的findClass()方法是怎么获取class的？

为什么是这2个目标？因为在BaseDexClassLoader的源码中主要就用到了DexPathList的构造函数和findClass()方法。

# 1）构造函数

private final Element[] dexElements;
+
+public DexPathList(ClassLoader definingContext, String dexPath,
+        String libraryPath, File optimizedDirectory) {
+    ...
+	this.definingContext = definingContext;
+    this.dexElements = makeDexElements(splitDexPath(dexPath), optimizedDirectory,suppressedExceptions);
+    ...
+}
+

这个构造函数中，保存了当前的类加载器definingContext，并调用了makeDexElements()得到Element集合。

通过对splitDexPath(dexPath)的源码追溯，发现该方法的作用其实就是将dexPath目录下的所有程序文件转变成一个File集合。而且还发现，dexPath是一个用冒号（":"）作为分隔符把多个程序文件目录拼接起来的字符串(如：/data/dexdir1:/data/dexdir2:...)。

那接下来无疑是分析makeDexElements()方法了，因为这部分代码比较长，我就贴出关键代码，并以注释的方式进行分析：

private static Element[] makeDexElements(ArrayList<File> files, File optimizedDirectory, ArrayList<IOException> suppressedExceptions) {
+	// 1.创建Element集合
+    ArrayList<Element> elements = new ArrayList<Element>();
+	// 2.遍历所有dex文件（也可能是jar、apk或zip文件）
+    for (File file : files) {
+        ZipFile zip = null;
+        DexFile dex = null;
+        String name = file.getName();
+        ...
+		// 如果是dex文件
+        if (name.endsWith(DEX_SUFFIX)) {
+            dex = loadDexFile(file, optimizedDirectory);
+
+		// 如果是apk、jar、zip文件（这部分在不同的Android版本中，处理方式有细微差别）
+        } else {
+			zip = file;
+            dex = loadDexFile(file, optimizedDirectory);
+        }
+		...
+		// 3.将dex文件或压缩文件包装成Element对象，并添加到Element集合中
+		if ((zip != null) || (dex != null)) {
+            elements.add(new Element(file, false, zip, dex));
+        }
+    }
+	// 4.将Element集合转成Element数组返回
+    return elements.toArray(new Element[elements.size()]);
+}
+

在这个方法中，看到了一些眉目，总体来说，DexPathList的构造函数是将一个个的程序文件（可能是dex、apk、jar、zip）封装成一个个Element对象，最后添加到Element集合中。

其实，Android的类加载器（不管是PathClassLoader，还是DexClassLoader），它们最后只认dex文件，而loadDexFile()是加载dex文件的核心方法，可以从jar、apk、zip中提取出dex，但这里先不分析了，因为第1个目标已经完成，等到后面再来分析吧。

# 2）findClass()

再来看DexPathList的findClass()方法：

public Class findClass(String name, List<Throwable> suppressed) {
+    for (Element element : dexElements) {
+		// 遍历出一个dex文件
+        DexFile dex = element.dexFile;
+
+        if (dex != null) {
+			// 在dex文件中查找类名与name相同的类
+            Class clazz = dex.loadClassBinaryName(name, definingContext, suppressed);
+            if (clazz != null) {
+                return clazz;
+            }
+        }
+    }
+    if (dexElementsSuppressedExceptions != null) {
+        suppressed.addAll(Arrays.asList(dexElementsSuppressedExceptions));
+    }
+    return null;
+}
+

结合DexPathList的构造函数，其实DexPathList的findClass()方法很简单，就只是对Element数组进行遍历，一旦找到类名与name相同的类时，就直接返回这个class，找不到则返回null。

为什么是调用DexFile的loadClassBinaryName()方法来加载class？这是因为一个Element对象对应一个dex文件，而一个dex文件则包含多个class。也就是说Element数组中存放的是一个个的dex文件，而不是class文件！！！这可以从Element这个类的源码和dex文件的内部结构看出。

# 四、热修复的实现原理

  终于进入主题了，经过对PathClassLoader、DexClassLoader、BaseDexClassLoader、DexPathList的分析，我们知道，安卓的类加载器在加载一个类时会先从自身DexPathList对象中的Element数组中获取（Element[] dexElements）到对应的类，之后再加载。采用的是数组遍历的方式，不过注意，遍历出来的是一个个的dex文件。

  在for循环中，首先遍历出来的是dex文件，然后再是从dex文件中获取class，所以，我们只要让修复好的class打包成一个dex文件，放于Element数组的第一个元素，这样就能保证获取到的class是最新修复好的class了（当然，有bug的class也是存在的，不过是放在了Element数组的最后一个元素中，所以没有机会被拿到而已）。

# 五、热修复的简单实现

通过前面的一堆理论之后，是时候实践一把了。

# 1、得到dex格式补丁

# 1）修复好有问题的java文件

这一步根据bug的实际情况修改代码即可。

# 2）将java文件编译成class文件

在修复bug之后，可以使用Android Studio的Rebuild Project功能将代码进行编译，然后从build目录下找到对应的class文件。

将修复好的class文件复制到其他地方，例如桌面上的dex文件夹中。需要注意的是，在复制这个class文件时，需要把它所在的完整包目录一起复制。假设上图中修复好的class文件是SimpleHotFixBugTest.class，则到时复制出来的目录结构是：

# 3）将class文件打包成dex文件

# a. dx指令程序

要将class文件打包成dex文件，就需要用到dx指令，这个dx指令类似于java指令。我们知道，java的指令有javac、jar等等，之所以可以使用这类指令，是因为我们有安装过jdk，jdk为我们提供了java指令，相同的，dx指令也需要有程序来提供，它就在Android SDK的build-tools目录下各个Android版本目录之中。

# b. dx指令的使用

dx指令的使用跟java指令的使用条件一样，有2种选择：

  • 配置环境变量（添加到classpath），然后命令行窗口（终端）可以在任意位置使用。
  • 不配环境变量，直接在build-tools/安卓版本 目录下使用命令行窗口（终端）使用。

第一种方式参考java环境变量配置即可，这里我选用第二种方式。下面我们需要用到的命令是：

dx --dex --output=dex文件完整路径 (空格) 要打包的完整class文件所在目录，如：

dx --dex --output=C:\Users\Administrator\Desktop\dex\classes2.dex C:\Users\Administrator\Desktop\dex

具体操作看下图：

在文件夹目录的空白处，按住shift+鼠标右击，可出现“在此处打开命令行窗口”。

# 2、加载dex格式补丁

根据原理，可以做一个简单的工具类：

/**
+ * @创建者 CSDN_LQR
+ * @描述 热修复工具(只认后缀是dex、apk、jar、zip的补丁)
+ */
+public class FixDexUtils {
+
+    private static final String DEX_SUFFIX = ".dex";
+    private static final String APK_SUFFIX = ".apk";
+    private static final String JAR_SUFFIX = ".jar";
+    private static final String ZIP_SUFFIX = ".zip";
+    public static final String DEX_DIR = "odex";
+    private static final String OPTIMIZE_DEX_DIR = "optimize_dex";
+    private static HashSet<File> loadedDex = new HashSet<>();
+
+    static {
+        loadedDex.clear();
+    }
+
+    /**
+     * 加载补丁，使用默认目录：data/data/包名/files/odex
+     *
+     * @param context
+     */
+    public static void loadFixedDex(Context context) {
+        loadFixedDex(context, null);
+    }
+
+    /**
+     * 加载补丁
+     *
+     * @param context       上下文
+     * @param patchFilesDir 补丁所在目录
+     */
+    public static void loadFixedDex(Context context, File patchFilesDir) {
+        if (context == null) {
+            return;
+        }
+        // 遍历所有的修复dex
+        File fileDir = patchFilesDir != null ? patchFilesDir : new File(context.getFilesDir(), DEX_DIR);// data/data/包名/files/odex（这个可以任意位置）
+        File[] listFiles = fileDir.listFiles();
+        for (File file : listFiles) {
+            if (file.getName().startsWith("classes") &&
+                    (file.getName().endsWith(DEX_SUFFIX)
+                            || file.getName().endsWith(APK_SUFFIX)
+                            || file.getName().endsWith(JAR_SUFFIX)
+                            || file.getName().endsWith(ZIP_SUFFIX))) {
+                loadedDex.add(file);// 存入集合
+            }
+        }
+        // dex合并之前的dex
+        doDexInject(context, loadedDex);
+    }
+
+    private static void doDexInject(Context appContext, HashSet<File> loadedDex) {
+        String optimizeDir = appContext.getFilesDir().getAbsolutePath() + File.separator + OPTIMIZE_DEX_DIR;// data/data/包名/files/optimize_dex（这个必须是自己程序下的目录）
+        File fopt = new File(optimizeDir);
+        if (!fopt.exists()) {
+            fopt.mkdirs();
+        }
+        try {
+            // 1.加载应用程序的dex
+            PathClassLoader pathLoader = (PathClassLoader) appContext.getClassLoader();
+            for (File dex : loadedDex) {
+                // 2.加载指定的修复的dex文件
+                DexClassLoader dexLoader = new DexClassLoader(
+                        dex.getAbsolutePath(),// 修复好的dex（补丁）所在目录
+                        fopt.getAbsolutePath(),// 存放dex的解压目录（用于jar、zip、apk格式的补丁）
+                        null,// 加载dex时需要的库
+                        pathLoader// 父类加载器
+                );
+                // 3.合并
+                Object dexPathList = getPathList(dexLoader);
+                Object pathPathList = getPathList(pathLoader);
+                Object leftDexElements = getDexElements(dexPathList);
+                Object rightDexElements = getDexElements(pathPathList);
+                // 合并完成
+                Object dexElements = combineArray(leftDexElements, rightDexElements);
+                // 重写给PathList里面的Element[] dexElements;赋值
+                Object pathList = getPathList(pathLoader);// 一定要重新获取，不要用pathPathList，会报错
+                setField(pathList, pathList.getClass(), "dexElements", dexElements);
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    /**
+     * 反射给对象中的属性重新赋值
+     */
+    private static void setField(Object obj, Class<?> cl, String field, Object value) throws NoSuchFieldException, IllegalAccessException {
+        Field declaredField = cl.getDeclaredField(field);
+        declaredField.setAccessible(true);
+        declaredField.set(obj, value);
+    }
+
+    /**
+     * 反射得到对象中的属性值
+     */
+    private static Object getField(Object obj, Class<?> cl, String field) throws NoSuchFieldException, IllegalAccessException {
+        Field localField = cl.getDeclaredField(field);
+        localField.setAccessible(true);
+        return localField.get(obj);
+    }
+
+
+    /**
+     * 反射得到类加载器中的pathList对象
+     */
+    private static Object getPathList(Object baseDexClassLoader) throws ClassNotFoundException, NoSuchFieldException, IllegalAccessException {
+        return getField(baseDexClassLoader, Class.forName("dalvik.system.BaseDexClassLoader"), "pathList");
+    }
+
+    /**
+     * 反射得到pathList中的dexElements
+     */
+    private static Object getDexElements(Object pathList) throws NoSuchFieldException, IllegalAccessException {
+        return getField(pathList, pathList.getClass(), "dexElements");
+    }
+
+    /**
+     * 数组合并
+     */
+    private static Object combineArray(Object arrayLhs, Object arrayRhs) {
+        Class<?> componentType = arrayLhs.getClass().getComponentType();
+        int i = Array.getLength(arrayLhs);// 得到左数组长度（补丁数组）
+        int j = Array.getLength(arrayRhs);// 得到原dex数组长度
+        int k = i + j;// 得到总数组长度（补丁数组+原dex数组）
+        Object result = Array.newInstance(componentType, k);// 创建一个类型为componentType，长度为k的新数组
+        System.arraycopy(arrayLhs, 0, result, 0, i);
+        System.arraycopy(arrayRhs, 0, result, i, j);
+        return result;
+    }
+}
+

代码虽然较长，但注释写得很清楚，请仔细看，这里要说两点：

# 1）Class ref in pre-verified class resolved to unexpected implementation

经反馈，这个是大家遇到的最多的一个问题，这里我把注意事项和我的解决方法写清楚：

# a.FixDexUtils
// 合并完成
+Object dexElements = combineArray(leftDexElements, rightDexElements);
+// 重写给PathList里面的Element[] dexElements;赋值
+Object pathList = getPathList(pathLoader);// 一定要重新获取，不要用pathPathList，会报错
+setField(pathList, pathList.getClass(), "dexElements", dexElements);
+

在合并守Element数组后，一定要再重新获取一遍App中的原有的pathList，不要复用前面的pathPathList，绝对会报错（Class ref in pre-verified class resolved to unexpected implementation）。

# b.Instant Run

Android Studio的Instant Run功能也是用到了热修复的原理，在重新安装app时并不会完整安装，只会动态修改有更新的class部分，它会影响到测试结果，在跟着本文做试验的同学请确保Instant Run已经关闭。

# c.模拟器

我在测试的过程中，使用的是Genymotion，发现Android 4.4的模拟器一直无法打上补丁，但是Android 5.0的模拟器却可以，真机测试也没问题，所以建议不要使用Android 5.0以下的模拟器来测试，强烈建议用真机测试！！

# 2）dexPath与optimizedDirectory的目录问题

DexClassLoader dexLoader = new DexClassLoader(
+        dex.getAbsolutePath(),// 修复好的dex（补丁）所在目录
+        fopt.getAbsolutePath(),// 存放dex的解压目录（用于jar、zip、apk格式的补丁）
+        null,// 加载dex时需要的库
+        pathLoader// 父类加载器
+

上面的代码是创建一个DexClassLoader对象，其中第1个和第2个参数有个细节需要注意：

  • 参数1是dexPath，指的是补丁所有目录，可以是多个目录（用冒号拼接），而且可以是任意目录，比如说SD卡。
  • 参数2是optimizedDirectory，就是存放从压缩包时解压出来的dex文件的目录，但不能是任意目录，它必须是程序所属的目录才行，比如：data/data/包名/xxx。

如果你把optimizedDirectory指定成SD卡目录，则会报如下错误：

java.lang.IllegalArgumentException: Optimized data directory /storage/emulated/0/opt_dex is not owned by the current user. Shared storage cannot protect your application from code injection attacks.

意思是说SD卡目录不属于当前用户。此外，这里再校正之前的一个小问题，optimizedDirectory不仅仅存放从压缩包出来的dex文件，如果补丁文件就是一个dex文件，那么它也会将这个补丁文件复制到optimizedDirectory目录下。

# 3、加载jar、apk、zip格式补丁

前面已经说了很多次DexClassLoader可以加载jar、apk、zip格式补丁文件了，那这类格式的补丁文件有什么要求吗？
+答案是：这类压缩包中必须放着一个dex文件，而且对名字有要求，必须是classes.dex。Why？这就需要分析DexPathList类中的loadDexFile()方法了。

private static DexFile loadDexFile(File file, File optimizedDirectory)
+        throws IOException {
+	// 如果optimizedDirectory为null，其实就是PathClassLoader加载dex文件的处理方式
+    if (optimizedDirectory == null) {
+        return new DexFile(file);
+    } 
+	// 如果optimizedDirectory不是null，这就是DexClassLoader加载dex文件的处理方式了，重点看这个
+	else {
+        String optimizedPath = optimizedPathFor(file, optimizedDirectory);
+        return DexFile.loadDex(file.getPath(), optimizedPath, 0);
+    }
+}
+

参数一file，可能是dex文件，也可能是jar、apk、zip文件。

从上面的源码中，不难看出else分支才是DexClassLoader加载dex文件的处理方式，它调用的是optimizedPathFor()方法拿到之后dex文件在optimizedDirectory目录下的全路径：

private static String optimizedPathFor(File path, File optimizedDirectory) {
+    String fileName = path.getName();
+    if (!fileName.endsWith(DEX_SUFFIX)) {
+        int lastDot = fileName.lastIndexOf(".");
+		// 如果补丁没有后缀，就给它加一个".dex"后缀
+        if (lastDot < 0) {
+            fileName += DEX_SUFFIX;
+        } 
+		// 不管补丁后缀是dex、jar、apk还是zip，最终放到optimizedDirectory目录下的一定是dex文件
+		else {
+            StringBuilder sb = new StringBuilder(lastDot + 4);
+            sb.append(fileName, 0, lastDot);
+            sb.append(DEX_SUFFIX);
+            fileName = sb.toString();
+        }
+    }
+
+    File result = new File(optimizedDirectory, fileName);
+    return result.getPath();
+}
+

前面已经说过了，Android的类加载器最终只认dex文件，即使补丁是jar、apk、zip等压缩文件，它也会把其中的dex文件解压出来，所以该方法得到的文件名一定是以dex结尾的。好了，这个optimizedPathFor()方法并不是重点，回头看loadDexFile()中的else分支还有一个DexFile.loadDex()方法，这个方法就相当重要了。

static public DexFile loadDex(String sourcePathName, String outputPathName, int flags) throws IOException {
+    return new DexFile(sourcePathName, outputPathName, flags);
+}
+

这个方法中就调用了一下自己的构造函数，并传入各个参数，接着来看看DexFile的构造函数：

/**
+ * Open a DEX file, specifying the file in which the optimized DEX
+ * data should be written.  If the optimized form exists and appears
+ * to be current, it will be used; if not, the VM will attempt to
+ * regenerate it.
+ *
+ * This is intended for use by applications that wish to download
+ * and execute DEX files outside the usual application installation
+ * mechanism.  This function should not be called directly by an
+ * application; instead, use a class loader such as
+ * dalvik.system.DexClassLoader.
+ *
+ * @param sourcePathName
+ *  Jar or APK file with "classes.dex".  (May expand this to include
+ *  "raw DEX" in the future.)
+ * @param outputPathName
+ *  File that will hold the optimized form of the DEX data.
+ * @param flags
+ *  Enable optional features.  (Currently none defined.)
+ * @return
+ *  A new or previously-opened DexFile.
+ * @throws IOException
+ *  If unable to open the source or output file.
+ */
+private DexFile(String sourceName, String outputName, int flags) throws IOException {
+    if (outputName != null) {
+        try {
+            String parent = new File(outputName).getParent();
+            if (Libcore.os.getuid() != Libcore.os.stat(parent).st_uid) {
+                throw new IllegalArgumentException("Optimized data directory " + parent
+                        + " is not owned by the current user. Shared storage cannot protect"
+                        + " your application from code injection attacks.");
+            }
+        } catch (ErrnoException ignored) {
+            // assume we'll fail with a more contextual error later
+        }
+    }
+
+    mCookie = openDexFile(sourceName, outputName, flags);
+    mFileName = sourceName;
+    guard.open("close");
+    //System.out.println("DEX FILE cookie is " + mCookie + " sourceName=" + sourceName + " outputName=" + outputName);
+}
+

奇怪吗，这次我没有把构造函数的注释去掉，原因是在它的注释中就已经有我们想要的答案了：

@param sourcePathName Jar or APK file with "classes.dex".  (May expand this to include "raw DEX" in the future.)
+

这名注释的意思就是说，jar或apk格式的补丁文件中需要有一个classes.dex。至此，对于压缩格式的补丁文件的要求就弄明白了。那么接下来就只需要生成这几种格式的补丁试一试就好了。制作这类压缩文件也很简单，直接用压缩软件压缩成zip文件，然后改下后缀就可以。

# 六、测试

这部分其实本不想写的，因为比较简单，但想了想不写又觉得不完整，那接下来就来测试一波吧。

# 1、代码

# 1）Activity

布局文件就俩按钮，很简单就不贴布局文件代码了，看这两个按钮的点击事件就行。

public class SimpleHotFixActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_simple_hot_fix);
+    }
+
+	// “修复”按钮的点击事件
+    public void fix(View view) {
+        FixDexUtils.loadFixedDex(this, Environment.getExternalStorageDirectory());
+    }
+
+	// “计算”按钮的点击事件
+    public void clac(View view) {
+        SimpleHotFixBugTest test = new SimpleHotFixBugTest();
+        test.getBug(this);
+    }
+}
+

可以看到，“修复”按钮的点击事件是去加载SD卡目录下的补丁文件。

# 2）SimpleHotFixBugTest

public class SimpleHotFixBugTest {
+    public void getBug(Context context) {
+        int i = 10;
+        int a = 0;
+        Toast.makeText(context, "Hello,I am CSDN_LQR:" + i / a, Toast.LENGTH_SHORT).show();
+    }
+}
+

会发生什么事呢？除数是0异常，一个简单的运行时异常，修复它也很简单，把a的值改为非0即可。

# 2、演示

# 1、bug

不多说，看操作。

妥妥的ArithmeticException。

Caused by: java.lang.ArithmeticException: divide by zero

# 2、动态修复bug

首先，我将补丁文件classes2.dex放到手机的SD目录下。

然后先点击修复按钮，再点计算按钮。

大功告成，压缩格式的补丁跟dex格式的补丁一样，直接丢掉SD卡目录下就行了，但一定要注意，压缩格式的补丁中的文件一定是classes.dex！！！

# 最后贴下Demo地址

https://github.com/GitLqr/HotFixDemo (opens new window)

权限申请：本文的提供的Demo是读取SD卡下的补丁文件，但却没有为Android6.0以上适配动态权限申请，如果你有使用该demo进行测试，那要注意自己测试机的Android版本，若是6.0以上，请务必先为Demo分配SD卡读写操作权限，否则App崩溃都不知道是不是因为bug造成的 ，切记。

+ +
+
#热修复#HotFix#DeXposed#andfix#tinker
热修复与插件化基础 - Java与Android的类加载器
热修复 - Tinker的集成与使用

+ ← + 热修复 - Tinker的集成与使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/901745/index.html b/pages/901745/index.html new file mode 100644 index 000000000..9370b008c --- /dev/null +++ b/pages/901745/index.html @@ -0,0 +1,186 @@ + + + + + + Kotlin - 类与构造器 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-16
目录

Kotlin - 类与构造器

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 类是什么？

类是一个抽象的概念，是具有某些特征的事物的概括，不特定指代任何一个具体的事物。写法：

class <类名> {
+    <成员>
+}
+

Number(Int、Float、Byte)、字符串(String)也是类

class Girl constructor(var nature: String,var appearance: String,var sound: String){
+    // 构造方法的方法体
+    init {
+        println("女孩的性格：$nature，长相：$appearance，声音：$sound")
+    }
+}
+
  • constructor 是构造器关键字，如果只有一个构造器，则该关键字可以省略。
  • init 是构造方法的方法体，当用该类创建出一个对象时就会执行。
fun main(args: Array<String>) {
+    val girl: Girl = Girl("温柔", "甜美", "动人") // 女孩的性格：温柔，长相：甜美，声音：动人
+}
+

# 类构造器

构造器分为两种，分别是：

  • 主构造器：紧接在类名后面的构造器，参数可以使用 var 声明，init 是主构造器的方法体。
  • 次构造器：在类代码块中声明的构造器，参数不可以使用 var 声明，与 init 无直接关系。
class Girl constructor(var nature: String, var appearance: String, var sound: String) {
+
+    // 主构造器的方法体
+    init {
+        println("女孩的性格：$nature，长相：$appearance，声音：$sound")
+    }
+
+    // 次级构造器，无法使用 var 声明变量
+    constructor(nature: String, appearance: String) : this(nature, appearance, sound = "未知") {
+        println("次级构造器")
+    }
+}
+
+fun main(args: Array<String>) {
+    val girl: Girl = Girl("温柔", "甜美")
+    // 输出2句：
+    // 女孩的性格：温柔，长相：甜美，声音：未知
+    // 次级构造器被调用
+}
+

上面说到，次级构造器与 init 无直接关系，但次级构造器会通过 :this(...) 调用主构造器，从而触发 init 方法体执行。另外，通过输出结果，可以确定 次级构造器方法体 会比 init 方法体晚执行。

个人建议：先写 init，再写次级构造器，看起来会比较舒服。

# 构造器省略 constructor 关键字

当没有次级构造器，只有一个主构造器时，可以省略 constructor 关键字：

class Girl(var nature: String, var appearance: String, var sound: String) {
+    ...
+}
+

# 主构造器中的 var 参数

上面说到，主构造器的参数才能使用 var 声明，而次构造器则不行，那么主构造器中有无使用 var 声明的参数，会有何不同？

// 注意：只有nature使用了var声明
+class Girl constructor(var nature: String, appearance: String, sound: String) {
+
+    init {
+        println("女孩的性格：$nature，长相：$appearance，声音：$sound")
+    }
+
+    fun test() {
+        println(nature) // 编译OK
+        println(appearance)　// 编译不通过
+        println(sound)　// 编译不通过
+    }
+}
+

init 方法体中可以访问主构造器的所有参数，而方法 test() 却只能访问 var 声明的构造器参数。

  • 主构造器中，使用 var 声明的参数，将成为成员变量，可以在类的各个方法中调用。
  • 而不使用 var 声明参数，只是临时变量，只能在 init 方法体中使用。

# 类的继承

子类继承父类，可以获得父类的能力，Kotlin 中使用 : 连接子父类，形成继承关系，同时，父类需要使用 open 关键字修饰：

open class Human(nature: String, appearance: String, sound: String) {
+    init {
+        println("${this.javaClass.simpleName} 的性格：$nature，长相：$appearance，声音：$sound")
+    }
+}
+
+class Girl(nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+class Boy(nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+

从 Java 开发者的角度来讲，Kotlin 中的类默认是 final 类，而使用 open 修饰过的类，会去除 final 关键字。

# 子类构造器

上述例子中，无论是 Girl 或是 Boy，它们的主构造器参数都没有使用 var 声明，实事上也不能使用 var 声明，我们可以做个实验：

// 报错：'nature' hides member of supertype 'Human' and needs 'override' modifier
+class Boy(var nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+

Boy 主构造器中使用 var 声明 nature，会报错提示 nature 在父类 Human 中是隐藏成员，你需要使用 override 对其修改，那就按提示把 override 关键字加上，但还会报另一个错：

// 报错：'nature' in 'Human' is final and cannot be overridden
+class Boy(override var nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+

如果单单对 nature 追加 override 关键字是不够的，因为构造器中的参数默认是 final 修饰过的不可修改变量，需要对父类 Human 主构造器中的 nature 参数再追加 open 关键字来去除这个限制。

open class Human(open var nature: String, var appearance: String, var sound: String) {
+    ...
+}
+class Boy(override var nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+

好了，终于把子类 Boy 的主构造器参数 nature 加上了 var 声明，那这有什么呢？答案是似乎没啥用。

因为就算子类 Boy 主构造器参数 nature 不用 var 声明，也一样可以在子类 Boy 的成员方法中使用这个 nature 变量，原因是 nature 早已在父类 Human 的主构造器中使用了 var 声明，它是父类 Human 的成员变量（类似 Java 中的 protected final String nature ），可以被子类 Boy 识别和调用。所以，话说回来，我们什么时候会需要使用 var 来声明与父类构造器参数同名的子类主构造器参数呢？

open class Human(nature: String, var appearance: String, var sound: String) {
+    ...
+}
+
+class Boy(var nature: String, appearance: String, sound: String) : Human(nature, appearance, sound)
+

当父类主构造器参数没有使用 var 声明，而子类又需要在成员方法中使用该参数时，可以在子类的构造器中，为该参数使用 var 追加声明，让其成为子类的成员变量。除此之外，子类主构造器参数的使用与普通的主构造器参数没什么区别。

# Any 类

在 Kotlin 中，Any 是所有类的始祖，相当于 Java 中的 Object。

/**
+ * The root of the Kotlin class hierarchy. Every Kotlin class has [Any] as a superclass.
+ */
+public open class Any {
+    ...
+}
+

# 包（Package）

  • 包就是命名空间
  • 包的声明必须在非注释代码的第一行
  • 类的全名是 包名＋类名 ，如：com.area.guangzhou.Human

举个例子，在 com.area.guangzhou 包下声明一个 Human 类：

package com.area.guangzhou　// 第一行代码：包声明
+/**
+ * 广州人
+ */
+class Human {
+}
+

由于包的存在，因此工程中可以在不同的目录下，声明多个类名相同的类，比如在 com.area.shantou 再声明一个 Human 类：

package com.area.shantou
+/**
+ * 汕头人
+ */
+class Human {
+}
+

因为类名相同，所以在同个文件中使用时，为了区分 2 个 Human，需要使用类的全名：

fun main(args: Array<String>) {
+    val gzHuman = com.area.guangzhou.Human()
+    val stHuman = com.area.shantou.Human()
+}
+

这样写出来的代码，看起来很不雅观，这时我们可以使用 as 关键字对导包设置别名：

import com.area.guangzhou.Human as 自给人
+import com.area.shantou.Human as 胶己人
+
+fun main(args: Array<String>) {
+    val gzHuman = 自给人()
+    val stHuman = 胶己人()
+}
+

注意：这里的代码仅为演示说明，实际开发中，为了避免不必要的麻烦，最好不要使用中文进行 coding。

+ +
+
#Kotlin#构造器#继承#Package
Kotlin - 数据类型
Kotlin - 空类型和智能类型转换

+ ← + Kotlin - 空类型和智能类型转换→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/997f68/index.html b/pages/997f68/index.html new file mode 100644 index 000000000..a3b1a3d2a --- /dev/null +++ b/pages/997f68/index.html @@ -0,0 +1,133 @@ + + + + + + iOS - Swift 面向协议编程（一） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift 面向协议编程（一）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

OC无法做到面向协议开发，而Swift可以，因为Swift可以做到协议方法的具体实现，而OC不行

# 面向对象开发

传统的面向对象开发思维方式是将类中实现的相似方法抽取出来，接着放入一个Base类，然后继承于Base类后各个类即可找拥有相同的方法，不用再一个个手动实现。 +比如：一个Person类，一个Dog类，它们都拥有方法eat，那么就可以新建一个Animal类，将eat方法抽取出来放入其中，然后将Person类和Dog类都继承于Animal。 +但是，如果现在又有一个Robot类，也需要拥有eat方法，而此时也将其继承于Animal的话显然是不合理的，于是我们就需要转换思维，面向协议开发~

# 面向协议开发

面向协议开发的核心是：** 模块化（组件化） ** +我们先来回顾下协议的一般使用，新建一个Swift文件LXFProtocol.swift

import Foundation
+
+protocol LXFProtocol {
+    func eat()
+}
+

我们的Person类遵守协议LXFProtocol，需要我们实现协议中的方法，如：

class Person: NSObject, LXFProtocol {
+    func eat() {
+        //
+    }
+}
+

那我们每个类都这样做的话跟直接复制粘贴代码并没什么不同~~ +而开头已经提到一点：

Swift可以做到协议方法的具体实现

那么现在，我们新建一个Swift文件Eatable.swift，以区分LXFProtocol.swift +Eatable.swift中的代码实现如下：

import Foundation
+
+protocol Eatable {
+    // 可声明变量
+}
+
+extension Eatable {
+    func eat() {
+        // 实现具体的功能
+    }
+}
+

有2个注意点

  • protocol中可以声明变量，方便在协议方法中使用
  • 协议方法的具体实现需要在extension中来实现

使Dog类遵守Eatable

class Dog: NSObject, Eatable {
+
+}
+

这样我们就可以在其它地方轻松调用dog的eat方法，Person类与Robot类也是如法炮制 +

至此，我们就可以通过面向协议的方式给类定制不同的功能，也就是模块化。可以发现Swift的面向协议编程跟c++的多继承很相似

# 约束

现在的这个Eatable协议是可以被任意遵守的，如果我们有这么个需求，我们创建的协议只是被UIViewController遵守，那我们该怎么做呢？ +【当然，Eatable协议只能被UIViewController遵守很扯淡，这里只是举例，不要太在意咯~~】

在 extension 后面加上约束关键字【where】，并注明该协议只能被UIViewController这个类（包括子类）所遵守，而且此时我们还可以拿到遵守该协议的控制器的view

//import Foundation
+import UIKit
+
+protocol Eatable {
+    
+}
+
+extension Eatable where Self : UIViewController {
+    func eat() {
+        view.backgroundColor = UIColor.red
+    }
+}
+

Demo (opens new window) +接下来以一个实际应用来巩固下吧 iOS - Swift 面向协议编程（二）

+ +
+
#iOS#Swift
iOS - 记录一次对屏幕旋转后崩溃的定位过程
iOS - Swift面向协议编程（二）

+ ← + iOS - Swift面向协议编程（二）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9a078b/index.html b/pages/9a078b/index.html new file mode 100644 index 000000000..b46b23c32 --- /dev/null +++ b/pages/9a078b/index.html @@ -0,0 +1,296 @@ + + + + + + Flutter - 使用Pigeon实现视频缓存插件 🐌 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-04-27
目录

Flutter - 使用Pigeon实现视频缓存插件 🐌

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

Pigeon 是一个可以帮助我们生成 Flutter 与 原生 的通信代码的工具，我们只需要关注其两侧主要的数据处理逻辑即可，从而提升效率。

Flutter 端对于视频缓存功能主要还是依赖原生端比较成熟的实现方案，如下两个开源库

其功能是：丢给它一个视频链接，它将生成一个具备缓存功能的播放代理链接。

接下来我们一起看看，如何使用 Pigeon 并结合上述两个库来实现视频缓存插件。

# 二、创建 Plugin

使用如下命令生成插件项目，这里我指定iOS使用的是 Swift，安卓使用的是 Kotlin

flutter create --template=plugin --platforms=android,ios -i swift -a kotlin 项目名
+
+# 如：
+# flutter create --template=plugin --platforms=android,ios -i swift -a kotlin video_cache
+

# 三、原生依赖

# iOS

打开在 ios 目录下的 podspec 文件（这里是 video_cache.podspec），添加相关的第三方库依赖，比如我这里依赖的是 KTVHTTPCache。

#
+# To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html.
+# Run `pod lib lint video_cache.podspec` to validate before publishing.
+#
+Pod::Spec.new do |s|
+  s.name             = 'video_cache'
+  s.version          = '0.0.1'
+  s.summary          = 'A new Flutter plugin project.'
+  s.description      = <<-DESC
+A new Flutter plugin project.
+                       DESC
+  s.homepage         = 'http://example.com'
+  s.license          = { :file => '../LICENSE' }
+  s.author           = { 'Your Company' => 'email@example.com' }
+  s.source           = { :path => '.' }
+  s.source_files = 'Classes/**/*'
+  s.dependency 'Flutter'
+  s.platform = :ios, '11.0'
+
+  # Flutter.framework does not contain a i386 slice.
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES', 'EXCLUDED_ARCHS[sdk=iphonesimulator*]' => 'i386' }
+  s.swift_version = '5.0'
+
++  # KTVHTTPCache
++  s.dependency 'KTVHTTPCache', '~> 3.0.0'
+end
+

# 安卓

打开在 android 目录下的 build.gradle 文件，添加

...
+android {
+    ...
+
+    dependencies {
+        testImplementation 'org.jetbrains.kotlin:kotlin-test'
+        testImplementation 'org.mockito:mockito-core:5.0.0'
++        implementation 'com.danikula:videocache:2.7.1'
+    }
+
+    ...
+}
+

然后在 example/android 目录下的 build.gradle 和 settings.gradle 文件添加如下 maven，否则会找不到依赖库

// build.gradle
+
+allprojects {
+    repositories {
++        maven { url "https://jitpack.io" }
++        maven { url 'https://maven.aliyun.com/repository/public' }
+        google()
+        mavenCentral()
+    }
+}
+...
+
// settings.gradle
+
+pluginManagement {
+    ...
+    repositories {
++        maven { url "https://jitpack.io" }
++        maven { url 'https://maven.aliyun.com/repository/public' }
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
+...
+

# 四、Pigeon

# 添加依赖

在 pubspec.yaml 的 dev_dependencies 下添加 pigeon 依赖

dev_dependencies:
+  pigeon: ^17.3.0
+

# 定义通信接口

在 lib 目录外创建一个用来定义通信接口的 dart 文件。

这里我们新建了一个与 lib 目录同级的 pigeons 文件夹，来存放与 Pigeon 相关的文件

.
+├── lib
+│   ├── ...
+│   └── ...
+├── pigeons
+│   ├── cache.dart
+│   └── ...
+├── ...
+

cache.dart 就是我用来定义视频缓存功能相关的通信接口的文件。

import 'package:pigeon/pigeon.dart';
+
+// https://github.com/flutter/packages/blob/main/packages/pigeon/example/README.md
+@ConfigurePigeon(PigeonOptions(
+  dartOut: 'lib/plugin/pigeon.g.dart',
+  kotlinOut:
+      'android/src/main/kotlin/com/lxf/video_cache/VideoCacheGeneratedApis.g.kt',
+  kotlinOptions: KotlinOptions(
+    // https://github.com/fluttercommunity/wakelock_plus/issues/18
+    errorClassName: "LXFVideoCacheFlutterError",
+  ),
+  swiftOut: 'ios/Classes/LXFVideoCacheGeneratedApis.g.swift',
+))
+@HostApi()
+abstract class LXFVideoCacheHostApi {
+  /// 转换为缓存代理URL
+  String convertToCacheProxyUrl(String url);
+}
+

# 生成交互代码

再执行如下命令，指定根据 cache.dart 来生成相应的繁杂且重要的交互代码。

flutter pub run pigeon --input pigeons/cache.dart
+

# 坑点

一定一定，一定要自定义 kotlinOptions 里的 errorClassName，不然它会给你生成默认的 FlutterError，单单自己的插件编译可能不会怎样，但是一旦集成的项目里也有用到其它用 Pigeon 生成了 FlutterError 的插件时，就会报如下错误了

Type FlutterError is defined multiple times
+

自定义 kotlinOptions 里的 errorClassName：

@ConfigurePigeon(PigeonOptions(
+  ...
+  kotlinOptions: KotlinOptions(
+    // https://github.com/fluttercommunity/wakelock_plus/issues/18
+    errorClassName: "LXFVideoCacheFlutterError"
+  ),
+  ...
+))
+

# 五、编写原生代码

# iOS

进入到 example/ios 目录下，安装依赖

cd example/ios 
+pod install --repo-update
+

使用 Xcode 打开 Runner.xcworkspace 开始编写原生代码

// VideoCachePlugin.swift
+
+import Flutter
+import UIKit
+import KTVHTTPCache
+
+// 创建插件时自动生成的类
+public class VideoCachePlugin: NSObject, FlutterPlugin {
+  public static func register(with registrar: FlutterPluginRegistrar) {
+    // 注册实现
+    LXFVideoCacheHostApiSetup.setUp(
+      binaryMessenger: registrar.messenger(), 
+      api: LXFVideoCacheHostApiImplementation()
+    )
+  }
+}
+
+class LXFVideoCacheHostApiImplementation: LXFVideoCacheHostApi {
+  /// 是否可以代理
+  private var canProxy: Bool?
+  
+  func convertToCacheProxyUrl(url: String) throws -> String {
+    // 还未试过开启代理服务
+    if (self.canProxy == nil) {
+      self.canProxy = ((try? KTVHTTPCache.proxyStart()) != nil)
+    }
+    // 无法代理
+    if !self.canProxy! { return url }
+    // 无法转 URL 对象
+    guard let urlObj = URL(string: url) else { return url }
+    
+    guard let proxyUrlObj = KTVHTTPCache.proxyURL(withOriginalURL: urlObj) else {
+      // 代理失败
+      return url
+    }
+    // 代理成功
+    return proxyUrlObj.absoluteString
+  }
+}
+

# 安卓

使用 AndroidStudio 打开 example/android，找到外层的 android 项目开始编写原生代码

package com.lxf.video_cache
+
+import LXFVideoCacheHostApi
+import com.danikula.videocache.HttpProxyCacheServer
+
+import io.flutter.embedding.engine.plugins.FlutterPlugin
+import io.flutter.plugin.common.MethodCall
+import io.flutter.plugin.common.MethodChannel.MethodCallHandler
+import io.flutter.plugin.common.MethodChannel.Result
+
+/** VideoCachePlugin */
+class VideoCachePlugin : FlutterPlugin, MethodCallHandler {
+
+    private lateinit var videoCacheHostApiImplementation: LXFVideoCacheHostApiImplementation
+
+    override fun onAttachedToEngine(flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
+        videoCacheHostApiImplementation = LXFVideoCacheHostApiImplementation(flutterPluginBinding)
+        // 初始化插件
+        LXFVideoCacheHostApi.setUp(
+                flutterPluginBinding.binaryMessenger,
+                videoCacheHostApiImplementation,
+        )
+    }
+
+    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
+        // 关闭服务
+        videoCacheHostApiImplementation.shutdown()
+    }
+
+    override fun onMethodCall(call: MethodCall, result: Result) {}
+}
+
+class LXFVideoCacheHostApiImplementation(
+        private val flutterPluginBinding: FlutterPlugin.FlutterPluginBinding
+) : LXFVideoCacheHostApi {
+    /// 懒加载缓存服务
+    private val cacheServer by lazy { HttpProxyCacheServer.Builder(flutterPluginBinding.applicationContext).build() }
+
+    /// 重写并通过 cacheServer 将原 url 转换为具备缓存功能的 url
+    override fun convertToCacheProxyUrl(url: String): String {
+        return cacheServer.getProxyUrl(url)
+    }
+
+    /// 关闭服务
+    fun shutdown() {
+        cacheServer.shutdown()
+    }
+}
+

# 六、开源库

上述视频缓存插件已开源，并发布至 GitHub：https://github.com/LinXunFeng/flutter_video_cache (opens new window)

你可以通过如下步骤集成使用：

在 pubspec.yaml 中添加 video_cache 依赖

dependencies:
+  video_cache: latest_version
+

使用

// 导入
+import 'package:video_cache/video_cache.dart';
+
+// 将原视频链接转为缓存代理链接
+String url = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
+url = await VideoCache().convertToCacheProxyUrl(url);
+
+// url转换结果
+// http://localhost:50050/https%3A%2F%2Fflutter%2Egithub%2Eio%2Fassets%2Dfor%2Dapi%2Ddocs%2Fassets%2Fvideos%2Fbee%2Emp4/KTVHTTPCachePlaceHolder/KTVHTTPCacheLastPathComponent.mp4
+

然后把转换后的 url 丢给播放器就可以了~

# 七、结尾

以上就是 Flutter 与原生交互拿到代理 url 的例子，使用的是 @HostApi，而如果你如果在原生端去调用 Flutter 的 api，则使用 @FlutterApi 去标注相关抽象类即可，使用方法是差不多的。

需要注意的是，当你使用 Swift 去写插件，且使用了 @FlutterApi 去生成相应的原生代码后编译，可能会遇到这个错误

type 'FlutterError' does not conform to protocol 'Error'
+

添加如下拓展即可

// https://github.com/flutter/flutter/issues/136081
+extension FlutterError: Error {}
+

# 八、资料

+ +
+
#Dart#Flutter#视频#缓存#视频缓存
Flutter - 热更新 Shorebird 1.0 正式版来了 🐦
Flutter - 轻松搞定屏幕旋转功能 😎

+ ← + Flutter - 轻松搞定屏幕旋转功能 😎→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9a084c/index.html b/pages/9a084c/index.html new file mode 100644 index 000000000..c9fdfda52 --- /dev/null +++ b/pages/9a084c/index.html @@ -0,0 +1,207 @@ + + + + + + Flutter - ListView与GridView | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-31
目录

Flutter - ListView与GridView

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、ListView

  • ListView(): 当 children 比较明确, 数量较少的时候可以使用, 列表 item 一次性全部加载
  • ListView.builder(): children 数量较多的时候使用, 在 item 即将展示出来的时候才会被创建
  • ListView.separated(): 比 ListView.builder()多了分割线功能

# 1、ListView()

通过 ListView() 默认构造器创建出来的列表, 会一次性加载全部的 item, 是比较消耗性能的, 在列表 item 个数明确只有较少的情景下可以使用, 常见参数有:

  • scrollDirection: 列表滚动方向, 默认是纵向, 可以使用 Axis.horizontal 改为横向
  • itemExtent: item 在 scrollDirection 方向上的尺寸, 如果列表是纵向, 则设置的是 item 的高度, 如果列表是横向, 则设置的是 item 的宽度
  • reverse: 逆向排序, 默认为正向(false)
  • children: 列表中所有的子 widget, 如果 item 类型一致, 可以借助 List.generate() 批量创建
class ListViewDemo1 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      // scrollDirection: Axis.horizontal, // 滚动方向
+      // itemExtent: 100, // item在scrollDirection方向上的尺寸
+      reverse: true,
+      children: List.generate(100, (index) {
+        // return Text("Hello lqr : $index", style: TextStyle(fontSize: 30));
+        return ListTile(
+          leading: Icon(Icons.people),
+          trailing: Icon(Icons.delete),
+          title: Text("联系人$index"),
+          subtitle: Text("联系人电话号码:18812345678"),
+        );
+      }),
+    );
+  }
+}
+

# 2、ListView.builder()

使用 ListView 的命名构造函数 builder() 创建出来的列表, 只有当 item 需要展示时才会创建加载(调用 itemBuilder 函数), 适用于有大量数据的列表场景, 常见参数如下:

  • itemCount: 列表的 item 数量, 不指定则有无限个 item
  • itemExtent: item 在 scrollDirection 方向上的尺寸, 如果列表是纵向, 则设置的是 item 的高度, 如果列表是横向, 则设置的是 item 的宽度
  • itemBuilder: 用于创建 item 的函数, (BuildContext context, int index){}

itemBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

class ListViewDemo2 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: 100,
+      itemExtent: 60,
+      itemBuilder: (BuildContext context, int index) {
+        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20));
+      },
+    );
+  }
+}
+

# 3、ListView.separated()

使用 ListView 的命名构造函数 separated() 创建列表与 builder() 一样, 都是按需创建加载 item, 区别在于 separated() 可以绘制分割线, 常见属性如下:

  • separatorBuilder: 用于创建分割线的函数, (BuildContext context, int index){}

separatorBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

一般使用 Divider 这个 widget 来创建分割线, 其构造函数参数有:

  • Divider +
    • color: 分割线颜色
    • height: Divider 本身的占用的高度 (注意:不是分割线的厚度)
    • thickness: 分割线的厚度
    • indent: 分割线前端的空隙
    • endIndent: 分割线末端的空隙
class ListViewDemo3 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ListView.separated(
+      itemCount: 100,
+      itemBuilder: (BuildContext context, int index) {
+        return Text("Hello lqr: $index", style: TextStyle(fontSize: 20));
+      },
+      separatorBuilder: (BuildContext context, int index) {
+        return Divider(
+          color: Colors.red,
+          height: 40, // widget的高度
+          thickness: 10, // 分割线的厚度
+          indent: 10, // 分割线前端的空隙
+          endIndent: 30, // 分割线末端的空隙
+        );
+      },
+    );
+  }
+}
+

# 二、GridView

  • GridView(): 列表 item 一次性全部加载
  • GridView.count(): 是 GridView() + SliverGridDelegateWithFixedCrossAxisCount 的简写
  • GridView.extent(): 是 GridView() + SliverGridDelegateWithMaxCrossAxisExtent 的简写
  • GridView.builder(): 当 item 将显示的时候创建

# 1、GridView()

使用 GridView 默认构造函数创建的网格会一次性加载所有 item, 适用于 item 个数较少的场景, 可以把 GridView 理解为是可以有多列的 ListView, 当有行有列时, 就会有定制行列样式的需求, 由参数 gridDelegate 来配置, gridDelegate 的类型是 SliverGridDelegate, 该抽象类有 2 个实现类:

  • SliverGridDelegateWithFixedCrossAxisCount: 交叉轴固定 item 个数 (几列我们自己定)
  • SliverGridDelegateWithMaxCrossAxisExtent: 交叉轴上 item 最大范围 (几列交给 flutter 算)

gridDelegate: 网格代理, 用于控制子 widget 在 GridView 中的摆放

SliverGridDelegateWithFixedCrossAxisCount 常见参数有:

  • crossAxisCount: 交叉轴 item 个数 (如果网格是纵向, 则指定网格有几列, 反之则指定网格有几行)
  • childAspectRatio: item 的宽高比
  • crossAxisSpacing: 交叉轴 item 间空隙 (纵向: 列间距)
  • mainAxisSpacing: 主轴 item 间空隙 (纵向: 行间距)
class GridViewDemo1 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    /// SliverGridDelegateWithFixedCrossAxisCount: 交叉轴固定item个数(几列我们自己定)
+    /// 简写: GridView.count(crossAxisCount: 3)
+    return GridView(
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        childAspectRatio: .8, // ratio = 宽度 / 高度
+        crossAxisSpacing: 8,
+        mainAxisSpacing: 8,
+      ),
+      children: List.generate(100, (index) {
+        return Container(
+          color: Color.fromARGB(
+            255,
+            Random().nextInt(256),
+            Random().nextInt(256),
+            Random().nextInt(256),
+          ),
+        );
+      }),
+    );
+  }
+}
+

SliverGridDelegateWithMaxCrossAxisExtent 常见参数有:

  • maxCrossAxisExtent: 交叉轴上 item 最大范围 (纵向: Flutter 会根据屏幕宽度 与 item 最大范围自动计算出列数)
  • childAspectRatio: item 的宽高比
  • crossAxisSpacing: 交叉轴 item 间空隙 (纵向: 列间距)
  • mainAxisSpacing: 主轴 item 间空隙 (纵向: 行间距)
class GridViewDemo2 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return GridView(
+      /// SliverGridDelegateWithMaxCrossAxisExtent: 交叉轴上item最大范围(几列交给flutter算)
+      /// 简写: GridView.extent(maxCrossAxisExtent: 400)
+      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+        maxCrossAxisExtent: 400,
+        mainAxisSpacing: 8,
+        crossAxisSpacing: 8,
+        childAspectRatio: 1.8,
+      ),
+      itemCount: 100,
+      children: List.generate(100, (index) {
+        return Container(
+          color: Color.fromARGB(
+            255,
+            Random().nextInt(256),
+            Random().nextInt(256),
+            Random().nextInt(256),
+          ),
+        );
+      }),
+    );
+  }
+}
+

# 2、GridView.builder()

使用 GridView 命名构造函数 builder() 创建的网格会按需创建加载 item, 适用于有大量的数据展示场景, 常见参数有:

  • gridDelegate: 网格代理, 用于控制子 widget 在 GridView 中的摆放, 类型是 SliverGridDelegate, 常用子类有: +
    • SliverGridDelegateWithFixedCrossAxisCount
    • SliverGridDelegateWithMaxCrossAxisExtent
  • itemCount: 网格的 item 数量, 不指定则有无限个 item
  • itemBuilder: 用于创建 item 的函数, (BuildContext context, int index){}

itemBuilder 的函数类型定义是: typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

class GridViewDemo3 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
+      itemCount: 100,
+      itemBuilder: (BuildContext context, int index) {
+        return Container(
+          color: Color.fromARGB(255, Random().nextInt(256),
+              Random().nextInt(256), Random().nextInt(256)),
+        );
+      },
+    );
+  }
+}
+

+ +
+
#ListView#GridView
Flutter - 基础布局

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9b40a4/index.html b/pages/9b40a4/index.html new file mode 100644 index 000000000..088043643 --- /dev/null +++ b/pages/9b40a4/index.html @@ -0,0 +1,256 @@ + + + + + + iOS - 实现25秒完成测试包出包 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-01-25
目录

iOS - 实现25秒完成测试包出包

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、背景

在日常研发中，被提 bug 是家常便饭，当 bug 修复完成后便提交代码，然后触发构建机打出测试包，自动上传至蒲公英后提供测试，但是我们的构建机打一个包的时间近 25分钟，而且有时还会莫名其妙的出现失败，效率偏低。那什么办法减少这个时间呢？

经过下面的方案调整后，我将时间测试包的出包时间降低至 20秒 左右，极速出包 😃

# 二、思考

我们在编译运行时，xcode 就已经打出了后缀为 app 的包，并且是经过描述文件签名的，所以可安装于那些 UDID 有记录于描述文件中的测试机，该 app 包存放于 DerivedData，其具体路径如下：

/Users/lxf/Library/Developer/Xcode/DerivedData/LXFCardsLayout-xxx/Build/Products/Debug-iphoneos/LXFCardsLayout.app
+

所以这从这里开始，我们需要思考的是如何得到该 app 包的路径，以及拿到 app 包后要如何处理才能安装到测试机

# 三、解决方案

# 1、app 转 ipa

上面提到的两个问题中，第二个很好处理，我们只要新建一个名为 Payload 的文件夹，将 LXFCardsLayout.app 放入其中，接着进行 zip 压缩，将 zip 后缀改成 ipa 即可。

这里需要注意的是：该 app 包是根据当前真机的架构打包而来，像我们的测试机是 arm64 架构的，所以打出来的是仅包含 arm64 架构，armv7 的设备就不可使用，但我们的测试机都是 arm64 架构的，所以问题不大。在使用的过程中大家请注意自己的设备架构～

# 2、获取 app 包路径

在编译的过程中，有一个环境变量 BUILD_DIR，可以取到如下路径

/Users/lxf/Library/Developer/Xcode/DerivedData/LXFCardsLayout-xxx/Build/Products
+

不过在 Archive的时候，得到的路径如下：

/Users/lxf/Library/Developer/Xcode/DerivedData/LXFCardsLayout-xxx/Build/Intermediates.noindex/ArchiveIntermediates/LXFCardsLayout-Swift/BuildProductsPath
+

在 shell 环境中，我们可以使用 % 取到 LXFCardsLayout-xxx为至的路径，即把 Build/及后边的内容全部删掉

${BUILD_DIR%Build/*}
+

# 四、实践

# 1、保存 app 路径

在 iOS 项目下新建一个 script 目录，存放 python 脚本 save_build_config.py

# -*- coding: UTF-8 -*-
+# -*- author: LinXunFeng -*-
+import os
+from configparser import ConfigParser
+
+
+def handle_build_config():
+    """保存编译时的一些配置"""
+    build_dir_path = os.getenv("BUILD_DIR")  # 编译地址
+    if build_dir_path is None:
+        return
+    
+    build_str_index = build_dir_path.find('Build/')
+    if build_str_index is not None:
+        build_dir_path = build_dir_path[0:build_str_index]
+    print(build_dir_path)
+    save_config('build_dir_path', build_dir_path)
+
+
+def save_config(key, value):
+    """
+    保存配置
+    :param key: 键
+    :param value: 值
+    :return:
+    """
+    section_name = 'project'
+    config_file_name = 'build_time_conf.ini'
+    config = ConfigParser()
+    config.read(config_file_name)
+    if not config.has_section(section_name):
+        config.add_section(section_name)
+    config.set(section_name, key, value)
+    with open(config_file_name, 'w') as f:
+        config.write(f)
+
+
+if __name__ == '__main__':
+    handle_build_config()
+

注：脚本中的 section_name = 'project'，可以调整成其它名称，如：项目名，但需要与下文另一脚本中的 section_name 保持一致！

新建 Run Script

填写如下内容

# LinXunFeng 项目其它配置
+
+cd script
+python3 save_build_config.py # 记录编译时配置
+

该操作的用意：在编译的过程中，将 app 包所在路径保持至 script 目录的 build_time_conf.ini 文件中，并使用 build_dir_path 做为其 key。

注：鉴于多人协作下，该 build_time_conf.ini 文件必定不可能相同，所以建议将该 build_time_conf.ini 文件添加至 .gitignore 中

# 2、处理 app 包并上传至蒲公英

push_dev_ipa.py

# -*- coding: utf-8 -*-
+# -*- author: LinXunFeng -*-
+
+import getopt, os, sys, shutil, time, json
+from utils import file_util as FileUtil
+from utils import upload_pgyer as PgyerUtil
+from configparser import ConfigParser
+from enum import Enum
+
+
+class AppackSetKey(Enum):
+    """appack_set的键"""
+    PGYER_API_KEY = "pgyer_api_key"
+    PGYER_USER_KEY = "pgyer_user_key"
+    PGYER_PASSWORD_KEY = "pgyer_api_password"
+
+
+def get_build_dir_path(config_ini_path):
+    """获取项目的编译目录路径"""
+    section_name = 'project'
+    config = ConfigParser()
+    config.read(config_ini_path)
+    if not config.has_section(section_name):
+        return ""
+    else:
+        return config.get(section_name, 'build_dir_path')
+
+
+def get_build_config_ini_path(project_path):
+    """获取build_conf.ini文件路径"""
+    return os.path.join(project_path, 'script', 'build_time_conf.ini')
+
+
+def get_pgyer_config(project_path):
+    """获取蒲公英的相关配置"""
+    config_set_json = os.path.join(project_path, 'fastlane', 'appack_set.json')
+    json_data = json.loads(FileUtil.read_file(config_set_json))
+    # print(json_data)
+    pgyer_api_key = json_data[AppackSetKey.PGYER_API_KEY.value]
+    pgyer_user_key = json_data[AppackSetKey.PGYER_USER_KEY.value]
+    pgyer_password = json_data[AppackSetKey.PGYER_PASSWORD_KEY.value]
+    return pgyer_api_key, pgyer_user_key, pgyer_password
+
+
+def handle(project_path, target_name):
+    app_name = target_name + '.app'
+
+    config_ini_path = get_build_config_ini_path(project_path)
+    build_dir_path = get_build_dir_path(config_ini_path)
+    print('build_dir_path -- ', build_dir_path)
+    app_path = os.path.join(build_dir_path, 'Build/Products/Debug-iphoneos', app_name)
+    # print(app_path)
+    # cur_path = os.path.abspath('.')
+    script_path = os.path.join(project_path, 'script')
+    temp_path = os.path.join(script_path, 'temp')
+    payload_path = os.path.join(temp_path, 'Payload')
+    payload_app_path = os.path.join(payload_path, app_name)
+
+    if os.path.exists(temp_path):
+        shutil.rmtree(temp_path)  # 移除Payload
+        time.sleep(1)  # 等删除完
+    os.makedirs(payload_path)  # 创建Payload
+    new_path = shutil.copytree(app_path, payload_app_path)
+    # print(new_path)
+    ipa_path = shutil.make_archive(payload_path, 'zip', temp_path)
+    ipa_path = shutil.move(ipa_path, os.path.join(temp_path, target_name + '.ipa'))
+    print(ipa_path)
+
+    # 上传至蒲公英
+    def payer_upload_callback():
+        shutil.rmtree(temp_path)  # 删除temp目录
+
+    pgyer_api_key, pgyer_user_key, pgyer_password = get_pgyer_config(project_path)
+    PgyerUtil.upload_to_pgyer(ipa_path, pgyer_api_key, pgyer_user_key, password=pgyer_password, callbcak=payer_upload_callback)
+
+
+if __name__ == "__main__":
+    argv = sys.argv[1:]
+    project_path = ""  # 项目路径
+    target_name = ""  # target名称
+
+    try:
+        opts, args = getopt.getopt(argv, "p:t:", ["path=", "target_name="])
+    except getopt.GetoptError:
+        print('push_dev_ipa.py -p "项目路径" -t "target名"')
+        sys.exit(2)
+
+    print(opts)
+    for opt, arg in opts:
+        if opt in ["-p", "--path"]:
+            project_path = arg
+            if len(project_path) == 0:
+                print('请输入项目的地址')
+                sys.exit('请输入项目的地址')
+        if opt in ["-t", "--target_name"]:
+            target_name = arg
+
+    # print(project_path)
+    handle(project_path, target_name)
+

配置说明：

config_set_json = os.path.join(project_path, 'fastlane', 'appack_set.json')
+

我们项目中与蒲公英配置相关的内容存入于 项目/fastlane/appack_set.json，可以根据自身实际情况进行调整

{
+  ...
+  "pgyer_api_key": "api_key_xxx",
+  "pgyer_user_key": "user_key_xxx",
+  "pgyer_api_password": "api_password_xxx"
+  ...
+}
+

在使用该脚本前请根据 【Mac上pyenv的安装与使用】 配置虚拟环境 env383_ScriptBox，完成后激活该虚拟环境，按如下命令安装依赖包

pip install -r requirements.txt
+

使用：

python push_dev_ipa.py -p "项目路径" -t "target名"
+

# 五、实现一键

使用 Shuttle (opens new window) 将该命令保存起来，实现在编译完成后，一键打包上传至蒲公英

{
+    "更新测试包": [
+        {
+            "cmd": "cd /Users/lxf/Desktop/github/script_box; python push_dev_ipa.py -p '/Users/lxf/Desktop/github/LXFCardsLayout/'",
+            "inTerminal": "new",
+            "name": "上传测试包至蒲公英",
+            "title": "上传测试包至蒲公英"
+        }
+    ]
+}
+

此处说明一下 cd 命令的用意：

cd /Users/lxf/Desktop/github/script_box
+

在 script_box 下存有一个名为 .python-version 的文件，里面仅写了 env383_ScriptBox，这是一个 python 虚拟环境，其作用是：当进入包含该文件所在目录时，会自动切换至该 python 虚拟环境。

我使用的是 pyenv 来实现 python 虚拟环境，详细说明可以看我的另一篇文章：【Mac上pyenv的安装与使用】

# 六、其它

Shuttle 虽然好用，但是在后续使用过程中，你一定会遇到多处配置相同的情况，如果你想解决该问题，不妨看我的解决方案：【Jsonnet - json数据模板语言】

脚本链接：LinXunFeng/script_box: 脚本工具箱 (github.com) (opens new window)

+ +
+
#iOS#Python#Shuttle
iOS - 解决SecurityEnvSDK与SGMain的冲突问题
iOS - 通过runtime获取某个类中所有的变量和方法

+ ← + iOS - 通过runtime获取某个类中所有的变量和方法→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9c63e1/index.html b/pages/9c63e1/index.html new file mode 100644 index 000000000..c27117b00 --- /dev/null +++ b/pages/9c63e1/index.html @@ -0,0 +1,197 @@ + + + + + + Python - 爬虫之数据提取 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-02
目录

Python - 爬虫之数据提取

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

# 1、响应内容的分类

  • 结构化的响应内容 +
    • json 字符串：可以使用 re、json、jsonpath 等模块来提取特定数据
    • xml 字符串：可以使用 re、lxml 等模块来提取特定数据
  • 非结构化的响应内容 +
    • html 字符串：可以使用 re、lxml、Beautiful Soup、pyquery 等模块来提取特定数据

注意：re 模块需要掌握正则语法，lxml 模块需要掌握 xpath 语法。

# 2、xml 与 html 的区别

数据格式 描述 设计目标
XML EXtensible Markup Language（可扩展标记语言） 被设计为传输和存储数据，其焦点是数据的结构
HTML HyperText Markup Language（超文本标记语言） 显示数据以及如何更好显示数据

# 二、jsonpath 模块【了解】

# 1、介绍

  • 场景：多层嵌套的复杂字典直接提取数据
  • 安装：pip install jsonpath
  • 使用：
from jsonpath import jsonpath
+ret = jsonpath(data, 'jsonpath语法规则字符串')
+

注意：data 类型是字典，ret 类型是列表

# 2、jsonpath 语法规则

常用核心语法

JSONPath 描述
$ 根节点
. or [] 取子节点
.. 内部任意位置，取子孙节点

完整语法说明：https://kubernetes.io/zh/docs/reference/kubectl/jsonpath/ (opens new window)

from jsonpath import jsonpath
+
+data = {'key1': {'key2': {'key3': {'key4': {'key5': {'key6': 'lqr'}}}}}}
+
+# print(data['key1']['key2']['key3']['key4']['key5']['key6'])
+
+# jsonpath的结果为列表，获取数据需要索引
+print(jsonpath(data, '$.key1.key2.key3.key4.key5.key6')[0])
+print(jsonpath(data, '$..key6')[0])
+

# 三、lxml 模块【重点】

# 1、介绍

  • lxml 模块：可以利用 XPath 规则语法，快速定位 HTML/XML 文档中的元素以及获取节点信息（文本内容、属性值）
  • XPath：是一门对 HTML/XML 文档中查找信息的语言，可用来在 HTML/XML 文档中对元素和属性进行遍历
  • 关系：提取 xml、html 中的数据需要 lxml 模块和 xpath 语法配合使用

# 2、xpath 语法

完整语法说明：https://www.w3school.com.cn/xpath/index.asp (opens new window)

# 1）xpath 定位节点以及提取属性或文本内容语法

nodename 选取此节点的所有子节点。
/ 从根节点选取。
// 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
. 选取当前节点。
.. 选取当前节点的父节点。
@ 选取属性。
text() 选取文本。

举例：

<!-------选取title标签-------->
+html/head/title	绝对路径
+html//title		相对路径
+//title			相对于整个html文档
+//title/.		当前节点
+//title/./../..	父节点
+
+<!-------从开闭标签之间取文本内容-------->
+//title/text()
+
+<!-------从选中的节点标签中获取指定属性的值-------->
+//link/@href
+

安利：Chrome 插件【xmlpath-helper】：https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl/related?hl=zh-CN (opens new window)

# 2）xpath 选取特定节点语法

路径表达式 结果
//title[@lang="eng"] 选择 lang 属性值为 eng 的所有 title 元素
/bookstore/book[1] 选取属于 bookstore 子元素的第一个 book 元素
/bookstore/book[last] 选取属于 bookstore 子元素的最后一个 book 元素
/bookstore/book[last()-1] 选取属于 bookstore 子元素的倒数第二个 book 元素
/bookstore/book[position()>1] 选择 bookstore 下面的 book 元素，从第二个开始选择
//book/title[text()='Harry Potter'] 选择所有 book 下的 title 元素，仅仅选择文本为 Harry Potter 的 title 元素
/bookstore/book[price>35.00]/title 选取 bookstore 元素中的 book 元素的所有 title 元素，且其中的 price 子元素的值须大于 35.00

注意：在 xpath 中，第一个元素的位置是 1；最后一个元素的位置是 last()；倒数第二个是 last()-1。

举例：

<!-------通过索引修饰节点-------->
+/html/body/div[3]/div/div[1]/div
+/html/body/div[3]/div/div[1]/div[3]
+/html/body/div[3]/div/div[1]/div[last()]		选中最后一个
+/html/body/div[3]/div/div[1]/div[last()-1]		选中倒数第二个
+/html/body/div[3]/div/div[1]/div[position()>=10] 范围选择
+
+<!-------通过属性修饰节点-------->
+//div[@id="content-left"]/div/@id	出现在[]中的@是使用标签属性名和属性值修饰节点，出现在结尾的/@是取属性值
+
+<!-------通过子节点修饰节点-------->
+//span[i>2000]
+//div[span[2]>=9.4]
+
+<!-------通过包含修饰节点-------->
+//div[contains(@id, "qiushi_tag_")]
+

# 3）xpath 选取未知节点语法

可以通过通配符来选取未知的 html、xml 的元素

通配符 描述
* 匹配任何元素节点。
@* 匹配任何属性节点。
node() 匹配任何类型的节点。

补充：通过在路径表达式中使用"|"运算符，可以选取若干个路径。

举例：

/bookstore/*	选取 bookstore 元素的所有子元素。
+//*				选取文档中的所有元素。
+//title[@*]		选取所有带有属性的 title 元素
+
+//h2/a|//td/a	xpath复合使用语法
+

# 3、lxml 模块的使用

# 1）导入 lxml 的 etree 库

from lxml import etree
+
+# 如果上面导入代码报错，可以改用下面的导入代码
+from lxml import html
+etree = html.etree
+

注意：from lxml import etree 提示报错的话，其实不会影响代码的运行，只是看着有点别扭。

# 2）使用 etree.HTML 转化 Element 对象

利用 etree.HTML 将 html 字符串（bytes 类型或 str 类型）转化为 Element 对象，Element 对象具有 xpath 方法，返回结果的列表：

html = etree.HTML(text)
+ret_list = html.xpath('xpath语法规则字符串')
+

# 3）xpath 方法返回列表的三种情况

  • 空列表：没有定位到任何元素
  • 字符串列表：匹配到了文本内容或某属性的值
  • Element 列表：匹配到符合条件的标签，列表中的 Element 对象可以继续进行 xpath

举例：

from lxml import etree
+
+text = """
+<div>
+    <ul>
+        <li class="item-1"><a href="link1.html">first item</a></li>
+        <li class="item-1"><a href="link2.html">second item</a></li>
+        <li class="item-inactive"><a href="link3.html">third item</a></li>
+        <li class="item-1"><a href="link4.html">fourth item</a></li>
+        <li class="item-0"><a href="link5.html">fifth item</a></li>
+    </ul>
+</div>
+"""
+
+html = etree.HTML(text)
+#print(html)
+
+print(html.xpath('//a[@href="link1.html"]/text()'))
+print(html.xpath('//a[@href="link1.html"]/text()')[0])
+
+# 字符串列表
+text_list = html.xpath('//a/text()')
+link_list = html.xpath('//a/@href')
+# for text in text_list:
+#     myindex = text_list.index(text)
+#     link = link_list[myindex]
+#     print(text, link)
+for text, link in zip(text_list, link_list):
+    print(text, link)
+
+# Element列表
+el_list = html.xpath('//a')
+for el in el_list:
+    print(el.xpath('//text()'))  # ×：//开头是相对整个文档的
+    print(el.xpath('./text()'))  # √
+    print(el.xpath('.//text()'))  # √
+    print(el.xpath('text()'))  # √
+

# 4）etree.tostring 函数的使用

etree.tostring 函数可以将 Element 对象转化回 html 字符串：

from lxml import etree
+
+text = """
+<div>
+    <ul>
+        <li class="item-1"><a href="link1.html">first item</a></li>
+        <li class="item-1"><a href="link2.html">second item</a></li>
+        <li class="item-inactive"><a href="link3.html">third item</a></li>
+        <li class="item-1"><a href="link4.html">fourth item</a></li>
+        <li class="item-0"><a href="link5.html">fifth item</a></li>
+    </ul>
+</div>
+"""
+
+html = etree.HTML(text)
+
+html_str = etree.tostring(html).decode()
+print(html_str)
+

注意：转化后，可能会多出来一些标签，比如原本没有的<body>、<html>，这是因为 etree.HTML(text) 会自动补全原 html 中的语法错误。

+ +
+
#Python爬虫#jsonpath#lxml
Python - 爬虫基础与requests模块
Python - 爬虫之Selenium

+ ← + Python - 爬虫之Selenium→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9e247e/index.html b/pages/9e247e/index.html new file mode 100644 index 000000000..dfc2a254b --- /dev/null +++ b/pages/9e247e/index.html @@ -0,0 +1,155 @@ + + + + + + Kotlin - 分支与循环 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-18
目录

Kotlin - 分支与循环

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 分支语句

Kotlin 中的分支语句有两种，分别是 if...else 和 when。

# if 表达式

Kotlin 可以像 Java 那样，使用 if...else 语句，通过判断条件来修改变量的值：

var name = ""
+if (local == "en") {
+    name = "lqr"
+} else {
+    name = "吴彦祖"
+}
+

但这种写法还不够简洁，Kotlin 对 if...else 进行发加强，支持 if表达式 ，可以对上述代码进行简化：

val name = if (local == "en") "lqr" else "吴彦祖"
+

Kotlin 中没有三元运算符，不过可以使用 if 表达式来处理。

# when 表达式

Kotlin 中的 when 相当于 Java 中的 switch，when 语句用于处理多分支条件判断，代码更清晰：

val x = 5
+when (x) {
+    5 -> println("x is 5")
+    is Int -> println("Hello $x")
+    in 1..100 -> println("$x is in 1..100")
+    !in 1..100 -> println("$x is not in 1..100")
+    args[0].toInt() -> println("x == args[0]")
+}
+

可以看到 when 的条件分支很强大，除了支持值判断，甚至还支持表达式判断。与 if表达式 一样，Kotlin 也支持 when表达式：

val hero = when (local) {
+    "en" -> "Hero"
+    "zh" -> "英雄"
+    "fr" -> "Un héros"
+    "de" -> "Held"
+    else -> "未知"
+}
+println(hero)
+

与 Java 的 switch 相比，Kotlin 的 when 更加强大：

  • 加强版 switch，支持任意类型
  • 支持纯表达式条件分支（类似 if）
  • when表达式 要求完备性，需要将所有情况都列出来

# 循环语句

Kotlin 中的循环语句大体有两种：for循环 和 while循环。

# for 循环

基本写法：for(element in elements)...

for (arg in args) {
+    println(arg)
+}
+

for 循环背后的运行机制是先通过 args.iterator() 获取到迭代器 Iterator，再结合迭代器的 next() 和 hasNext() 来处理数组中的元素，所以循环的关键点是 Iterator。

Java 中 for 循环的原理也是迭代器，但不同的是，Java 的数组需要实现 Iterable<T> 接口，并实现iterator()，而 Kotlin 中则是任意类重写 operator fun iterator() 。

数组 Array 支持在 for 循环的同时获取索引值：

// 带索引的for循环
+for ((index, value) in args.withIndex()) {
+    println("$index : $value")
+}
+
+// 上面写法等价于下面写法
+for (indexValue in args.withIndex()) {
+    println("${indexValue.index} : ${indexValue.value}")
+}
+

数组 Array 的 withIndex() 方法返回的是 Iterable<IndexedValue<T>>，其中 IndexedValue 是 data class ，支持使用 () 提取属性：

public data class IndexedValue<out T>(public val index: Int, public val value: T)
+

# while 循环

除了 for 循环，Kotlin 还支持 while 循环，while 循环格式分两种，两者区别如下：

  • while：先判断再执行
  • do-while：先执行再判断
var x = 5
+while (x > 0) {
+    print("$x ") // 5 4 3 2 1
+    x--
+}
+
+var x = 5
+do {
+    print("$x ") // 5 4 3 2 1
+    x--
+} while (x > 0)
+

# 跳过和终止循环

Kotlin 也支持跳过和终止循环语句的指令，分别是：

  • continue ：跳过当前循环
  • break ：终止当前循环
val args = intArrayOf(1, 2, 3, 4, 5)
+for (arg in args) {
+    if (arg == 2) continue
+    if (arg == 4) break
+    print("$arg ") // 1 3
+}
+

开发中也常用 return 来终止循环，但它与 break 不同的是，return 实际上是中止方法的执行。

当有多层循环嵌套需要根据条件　跳过或终止内外套循环语句时，可以使用标签：

val args = intArrayOf(1, 2, 3, 4, 5)
+Outter@ for (arg in args) {
+    println("outter: $arg")
+    var i = arg
+    print("inner: ")
+    Inner@ while (i > 0) {
+        if (arg == 2) break@Inner // 当外循环元素为2时，跳过while，进行下次for
+        if (arg == 4) break@Outter // 当外循环元素为3时，直接跳出for
+        print("$i ")
+        i--
+    }
+    println()
+}
+
+ +
+
#if-else#when#for#while#iterator
Kotlin - 运算符与中缀表达式
Kotlin - 参数与异常

+ ← + Kotlin - 参数与异常→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/9f1d21/index.html b/pages/9f1d21/index.html new file mode 100644 index 000000000..d31271580 --- /dev/null +++ b/pages/9f1d21/index.html @@ -0,0 +1,125 @@ + + + + + + iOS-组件化开发（二）：远程私有库的更新与子库 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-06
目录

iOS-组件化开发（二）：远程私有库的更新与子库

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

在上一篇【iOS-组件化开发（一）：远程私有库的基本使用】中我们已经实战了远程私有库的基本操作，但是组件不可能上传一次就完事了，随着业务的增加，我们的组件可能还需要添加更多的东西，或者修复一些问题，这就需要我们对私有库代码进行升级与维护

这里以对基础组件里添加了一个Cache工具为例

添加Cache工具

添加完成后我们需要更新到远程仓库

# 一、更新远程仓库

cd 到本地仓库的位置，执行以下操作

# 1、代码更新

git add .
+git commit -m '更新描述'
+git push origin master
+

代码升级

# 2、版本更新

版本更新 这一步非常重要，为更新索引库做准备

git tag -a '新版本号' -m '注释'
+git push --tags
+

版本升级

查看远程仓库，标签数已经有2个了，点进去就可以看到0.2.0，这里我们就不去看了

# 二、修改描述文件并更新索引库

# 1、修改Sepc

打开你的xx.podspec文件，将原本的版本号改为0.2.0，与刚刚的tag保持一致

 s.version = '0.2.0'
+

# 2、验证远程Spec

pod spec lint --private
+

验证远程Spec

# 3、更新索引库

pod repo push 索引库名称 xxx.podspec
+

更新索引库

# 三、更新使用

// --no-repo-update 不更新本地索引库
+// 因为刚刚已经自己手动更新过了，所以这里我们选择跳过更新
+pod update --no-repo-update
+

更新框架

更新成功

# 四、第三方依赖

当我们的私有库需要依赖其它第三方才可以正常使用时，我们就需要在spec文件中开启依赖，例如下面所示代码，表明当前仓库需要依赖AFN和SDWebImage

s.dependency 'AFNetworking', '~> 3.2.0'
+s.dependency 'SDWebImage', '~> 4.3.3'
+

修改后更新操作同上所述，这里就不再赘述了。

但是这里存在一个问题，如果来了一位新的小伙伴，他所负责的部分只需要LXFBase下的Category，而LXFBase下的Cache才需要依赖SDWebImage，此时他若是pod一整个LXFBase岂不是平白无故安装了第三方依赖库，那应该怎么做呢？

方案就是可以通过子库Subspecs来解决因需要一个小小的工具而依赖整个基础组件的问题

# 五、子库Subspecs

什么是Subspecs？这里我们可以搜索一下SDWebImage

pod search 'SDWebImage'
+

Subspecs

可以看到，如果我们只需要用到SDWebImage中的GIF功能，那么并不需要将整个SDWebImage都下载下来，在Podfile中将pod 'SDWebImage' 改为 pod SDWebImage/GIF即可单独使用这一功能

那接下来我们就来看看怎么描述一个子库吧

# 子库格式

s.subspec '子库名称' do |别名|
+
+end
+

因为这里已经分离出子库了，所以s.source_files和s.dependency就不能这么使用了，需要我们在子库里分别指定，所以我们直接把原来的s.source_files和s.dependency都注释掉。写法参考如下

# s.source_files = 'LXFBase/Classes/**/*'
+# s.dependency 'SDWebImage', '~> 4.3.3'
+
+s.subspec 'Cache' do |c|
+  c.source_files = 'LXFBase/Classes/Cache/**/*'
+  c.dependency 'SDWebImage', '~> 4.3.3'
+end
+
+s.subspec 'Category' do |c|
+  c.source_files = 'LXFBase/Classes/Category/**/*'
+end
+
+s.subspec 'Tool' do |t|
+  t.source_files = 'LXFBase/Classes/Tool/**/*'
+end
+

修改后再按之前的步骤更新索引库和组件库就可以了

ps: 在添加第三方依赖描述后做验证或者上传操作可能会很慢，因为它在克隆第三方库如SDWebImage，有兴趣的可以在命令后面加入--verbose来查看详情情况

pod spec lint --private --verbose
+

在成功更新组件库和索引库后我们再来搜索一下试试

pod search 'LXFBase'
+

subspec添加成功

现在就可以爱装哪个就装哪个了，在Podfile中指定要安装的子库就行了

pod 'LXFBase/Cache'
+
pod install
+

安装指定子库与依赖库

+ +
+
#iOS#Git#GitHub#Cocoapods#组件化
iOS-组件化开发（一）：远程私有库的基本使用
iOS-组件化开发（三）：加载资源文件

+ ← + iOS-组件化开发（三）：加载资源文件→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a03fed/index.html b/pages/a03fed/index.html new file mode 100644 index 000000000..575122f9c --- /dev/null +++ b/pages/a03fed/index.html @@ -0,0 +1,224 @@ + + + + + + DesignPattern - 单例模式【创建型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-18
目录

DesignPattern - 单例模式【创建型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、单例模式介绍

通过单例模式可以保证系统中，应用该模式的类只有一个对象实例。

  • 好处：

    • 节省内存（没必要存在 多个功能相同的对象）
    • 提高性能（有些对象的创建很耗系统资源）

  • 分类：

    • 饿汉：提前创建对象（class 一加载就创建）
    • 懒汉：延迟创建对象（调用 getInstance() 时再创建）

  • 实现步骤：

    • 私有化构造函数
    • 提供获取单例的方法

# 二、单例模式代码实现

# 1、饿汉式

  • 饿汉方式：提前创建好对象
  • 优点：实现简单，没有多线程同步问题
  • 缺点：类一加载就会创建，不管有没有使用，instance 对象一直占着内存
/**
+ * 单式模式：饿汉式
+ *
+ * @author GitLqr
+ */
+public class SingletonHungry {
+
+	private static SingletonHungry instance = new SingletonHungry();
+
+	private SingletonHungry() {
+	}
+
+	public static SingletonHungry getInstanceHungry() {
+		return instance;
+	}
+}
+

# 2、懒汉式

  • 懒汉方式：延迟创建对象
  • 优点：需要用到时才会创建对象，规避不必要的内存浪费
  • 缺点：可能需要考虑有多线程同步问题

# 1）DCL (+ volatile) 方式

DCL，即双重检查锁定 （Double-Checked-Locking）

  • synchronized 前第一次判空：避免不必要的加锁同步，提高性能
  • synchronized 后第二次判空：避免出现多线程安全问题
  • volatile 修饰 instance：避免指令重排序问题
/**
+ * 单例模式：懒汉式 (DCL +  volatile)
+ *
+ * @author GitLqr
+ */
+public class SingletonLazy {
+
+	private static volatile SingletonLazy instance;
+
+	private SingletonLazy() {
+	}
+
+	public static SingletonLazy getInstance() {
+		if (instance == null) {
+			synchronized (SingletonLazy.class) {
+				if (instance == null) {
+					instance = new SingletonLazy();
+				}
+			}
+		}
+		return instance;
+	}
+}
+

# 2）静态内部类 方式

  • Holder 静态内部类：外部类加载时，并不会直接导致静态内部类被加载，在调用 getInstance() 时才会触发该静态内部类被加载，所以，可以延时执行。
  • Holder.instance static 字段：同一个加载器下，一个类型只会初始化一次，故天然的线程安全。
/**
+ * 单例模式：懒汉式 (静态内部类)
+ *
+ * @author GitLqr
+ */
+public class SingletonLazyClass {
+
+	private static class Holder {
+		private static SingletonLazyClass instance = new SingletonLazyClass();
+	}
+
+	public static SingletonLazyClass getInstance() {
+		return Holder.instance;
+	}
+
+	private SingletonLazyClass() {
+	}
+}
+

注意：静态内部类 相比 DCL 代码简洁很多，即有饿汉式的优势，又可以做到延时初始化，看似很完美，但其有一个致命问题，即无法传参，所以，实际开发中，要根据实际情况来选择其中一种实现方式。

# 3）枚举 方式

  • 枚举无法 new，也就无须私有化构造函数，相比 静态内部类 方式要简洁的多
  • 枚举实例创建是线程安全的
/**
+ * 单例模式：懒汉式 (枚举)
+ *
+ * @author GitLqr
+ */
+public enum SingletonEnum {
+	INSTANCE;
+
+    // 枚举与普通类一样，可以拥有字段和方法
+	public void method() {
+		// TODO
+	}
+}
+

注意：缺点跟 静态内部类 方式一样，外部无法传参。

# 三、DCL 单例模式的演进

# 阶段一：简单的对象判空

  • 缺点：线程不安全，多线程下存在安全问题
  • 解决办法：加锁
public class SingletonLazy {
+
+	private static SingletonLazy instance;
+
+	private SingletonLazy() {
+	}
+
+	public static SingletonLazy getInstance() {
+		if (instance == null) {
+			instance = new SingletonLazy();
+		}
+		return instance;
+	}
+}
+

# 阶段二：通过加锁 synchronized 保证单例

  • 缺点：采用 synchronized 对方法加锁有很大的性能开销
  • 解决办法：锁粒度不要这么大
public class SingletonLazy {
+
+	private static SingletonLazy instance;
+
+	private SingletonLazy() {
+	}
+
+	public static synchronized SingletonLazy getInstance() {
+		if (instance == null) {
+			instance = new SingletonLazy();
+		}
+		return instance;
+	}
+}
+

# 阶段三：DCL 双重检查锁定 （Double-Checked-Locking）

  • 优点：在多线程情况下保持高性能
  • 缺点：不安全，instance = new SingletonLazy(); 不是原子性操作，这行代码为如下 3 步： +
    1. 分配内存空间
    2. 在空间内创建对象
    3. 对对象赋值给引用
  • 原因：因为 JVM 指令重排序问题，可能导致线程中会按 1->3->2 的顺序执行（JVM 认为 2 和 3 没有先后顺序），其中步骤 3 会把 线程副内存中 的值写入主内存，其他线程就会读取到 instance 最新的值，但因为步骤 2 还没有执行，此时这个 instance 是不完全的对象，这时其他线程中使用这个不完全的 instance 就会出错。
  • 解决办法：使用 volatile 关键字
public class SingletonLazy {
+
+	private static SingletonLazy instance;
+
+	private SingletonLazy() {
+	}
+
+	public static SingletonLazy getInstance() {
+		if (instance == null) {
+			synchronized (SingletonLazy.class) {
+				if (instance == null) {
+					instance = new SingletonLazy();
+				}
+			}
+		}
+		return instance;
+	}
+}
+

# 阶段四：DCL + volatile

  • volatile：是 java 提供的关键字，可以禁止指令重排序
public class SingletonLazy {
+
+	private static volatile SingletonLazy instance;
+
+	private SingletonLazy() {
+	}
+
+	public static SingletonLazy getInstance() {
+		if (instance == null) {
+			synchronized (SingletonLazy.class) {
+				if (instance == null) {
+					instance = new SingletonLazy();
+				}
+			}
+		}
+		return instance;
+	}
+}
+
+ +
+
#设计模式#单例模式
DesignPattern - 设计原则与设计模式初探
DesignPattern - 工厂模式【创建型】

+ ← + DesignPattern - 工厂模式【创建型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a0ceba/index.html b/pages/a0ceba/index.html new file mode 100644 index 000000000..2bf5796ec --- /dev/null +++ b/pages/a0ceba/index.html @@ -0,0 +1,121 @@ + + + + + + AI - stable-diffusion(AI绘画)的搭建与使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-02-25
目录

AI - stable-diffusion(AI绘画)的搭建与使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

系列文章：

最近 AI 火的一塌糊涂，除了 ChatGPT 以外，AI 绘画领域也有很大的进步，以下几张图片都是 AI 绘制的，你能看出来么？

# 一、环境搭建

上面的效果图其实是使用了开源的 AI 绘画项目 stable-diffusion 绘制的，这是它的官方仓库：

但是这个官方项目并不适合我们这些新手直接使用，好在有一些基于 stable-diffusion 封装的 webui 开源项目，可以通过界面交互的方式来使用 stable-diffusion，极大的降低了使用门槛，以下是几个比较火的 webui 项目：

其中，AUTOMATIC1111 的 stable-diffusion-webui 是目前功能最多最好用的，强烈推荐，下面就来介绍如何使用它。

# 1、下载项目

stable-diffusion-webui 没有发布可执行程序（比如：.exe），我们需要通过 git 的方式将整个工程源码拉下来运行：

git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
+

注：这个开源项目目前的更新频率很快，会不定期的修复一些 bug 或加入一些新功能，所以建议可以时常 git pull 拉取最新代码。

# 2、Python 环境

stable-diffusion-webui 主要是使用 Python 开发的，所以运行这个工程，需要安装一下 Python 环境并配置好环境变量，因为 Python 环境的安装很简单，这里就不多说了，环境配置完成之后，可以通过以下命令查看 Python 的版本号，验证环境是否正常：

python --version
+

注意：官方推荐安装 Python 3.10.6 版本

另外，建议使用 Anaconda 管理多个 Python 环境，详见

# 3、CUDA 环境

默认 stable-diffusion-webui 运行使用的是 GPU 算力，也就是说需要用到 Nvidia 显卡（配置越高，绘图越快）。这里我们需要安装 CUDA 驱动，先确定一下电脑能安装的 CUDA 版本，桌面右下角->右键 NVIDIA 设置图标->NVIDIA 控制面板：

可以看到我的电脑的显示的是 NVIDIA CUDA 11.6.134 driver，所以我的电脑要安装的 CUDA 版本不能超过 11.6。

注意：高版本显卡是可以安装低版本的 CUDA 驱动的，比如我也可以安装经典的 10.2 版本，但是安装 11.6 版本可以获得更高的 GPU 运行效率，所以一般来说推荐安装显卡支持的最高 CUDA 版本。

在下面的网址中找到对应的 CUDA 版本进行安装：

直接选择 "精简" 安装就可以了，安装完成之后，可以使用如下命令查看 CUDA 版本，来验证 CUDA 是否安装成功：

nvcc --version
+

注：如果你没有 Nvidia 显卡，也可以通过给 stable-diffusion-webui 指定运行参数 --use-cpu sd，让其使用 CPU 算力运行，但是非常不建议你这么做，CPU 算力跟 GPU 算力相比简直天差地别，可能 GPU 只需要 10 秒就能绘制完成，而 CPU 却要 10 分钟，这不是开玩笑的。另外，如果你的显卡内存不多，建议 4G 的显卡加上 --medvram 启动参数，2G 的显卡加上 --lowvram 启动参数。怎么配置启动参数我们后面说。

# 4、启动项目

在安装配置好运行环境之后，直接运行工程下的 webui-user.bat 文件即可（如果是类 Unix 系统，则运行 webui-user.sh）。首次启动会自动下载一些 Python 依赖库（具体哪些库请看工程下的 requirements.txt） ，以及项目需要用到的配置和模型文件（比如：v1-5-pruned-emaonly.safetensors，将近 4 个 G~），初始化一次之后，下次启动就快了。

Launching Web UI with arguments:
+...
+Running on local URL:  http://127.0.0.1:7860
+To create a public link, set `share=True` in `launch()`.
+

看到这个提示就说明成功运行起来了，打开网址就可以看到程序的运行界面了：

温馨提示：该项目是英文页面，可以使用浏览器的翻译功能转成中文来使用~

# 二、使用

stable-diffusion-webui 的功能很多，主要有如下 2 个：

  • 文生图（text2img）：根据提示词（Prompt）的描述生成相应的图片。
  • 图生图（img2img）：将一张图片根据提示词（Prompt）描述的特点生成另一张新的图片。

注：本文只讲解文生图（text2img）功能，图生图（img2img）后续有机会再出文章，喜欢的请多多点赞关注支持一下 😃。

# 1、文生图（text2img）

在开始使用文生图之前，有必要了解以下几个参数的含义：

参数 说明
Prompt 提示词（正向）
Negative prompt 消极的提示词（反向）
Width & Height 要生成的图片尺寸。尺寸越大，越耗性能，耗时越久。
CFG scale AI 对描述参数（Prompt）的倾向程度。值越小生成的图片越偏离你的描述，但越符合逻辑；值越大则生成的图片越符合你的描述，但可能不符合逻辑。
Sampling method 采样方法。有很多种，但只是采样算法上有差别，没有好坏之分，选用适合的即可。
Sampling steps 采样步长。太小的话采样的随机性会很高，太大的话采样的效率会很低，拒绝概率高(可以理解为没有采样到,采样的结果被舍弃了)。
Seed 随机数种子。生成每张图片时的随机种子，这个种子是用来作为确定扩散初始状态的基础。不懂的话，用随机的即可。

以上对参数的解析源自以下文章：

接下来我们来生成一张赛博朋克风格的猫咪图片，配置以下参数后，点击 "Generate" 即可：

Prompt：a cute cat, cyberpunk art, by Adam Marczyński, cyber steampunk 8 k 3 d, kerem beyit, very cute robot zen, beeple |
+
+Negative prompt：(deformed, distorted, disfigured:1.3), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers:1.4), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, flowers, human, man, woman
+
+CFG scale：6.5
+
+Sampling method：Euler a
+
+Sampling steps：26
+
+Seed：1791574510
+

注：提示词（Prompt）越多，AI 绘图结果会更加精准，另外，目前中文提示词的效果不好，还得使用英文提示词。

赛博朋克猫咪

关注 FSA全栈行动 (opens new window) 微信公众号，回复 "赛博朋克猫咪" 可获得该原始效果图哦~❤️

# 2、模型文件

眼尖的你可能发现了，上面截图里左上角 Stable Diffusion checkpoint 的值怎么跟之前截图里的不一样？这是因为我换了一个模型文件，还记得前面提到那个将近 4 个 G 大小的模型文件（v1-5-pruned-emaonly.safetensors）吗？那是 stable-diffusion-webui 的默认模型文件，用这个模型文件生成出来的图片比较丑，因此我换了另一个模型文件。模型文件下载的网站几个，比较出名的就是 civitai，这上面共享的都是别人训练好的模型。

模型文件下载地址：

根据你要生成的图片风格（比如：动漫、风景），挑选合适的模型查看，前面那个文生图的例子，使用的就是这个 Deliberate 模型，直接点击 "Download Latest" 即可下载该模型文件。

注：模型文件有 2 种格式，分别是 .ckpt（Model PickleTensor） 和 .safetensors（Model SafeTensor），据说 .safetensors 更安全，这两种格式 stable-diffusion-webui 都支持，随意下载一种即可。

将下载好的模型文件放到 stable-diffusion-webui\models\Stable-diffusion 目录下：

放置好模型文件之后，需要重启一下 stable-diffusion-webui（执行 webui-user.bat）才能识别到。

这些模型文件一般会附带一组效果图，点击任意一张，就可以看到生成该效果图的一些参数配置：

把这些参数配置到 stable-diffusion-webui 中，点击 "Generate" 就可以生成类似效果的图片了。

注：因为 AI 绘图带有随机性质，所以生成出来的图片跟效果图不一定完全一样。

文生图功能有很多东西可以发掘，你可以用它来生成世界上独一无二的图片，而要用好文生图功能，提示词（Prompt）是必须掌握的重中之重，它是有语法规则的，在此推荐两篇对 Prompt 详细说明的文章：

# 三、工程配置

前面说到，stable-diffusion-webui 是可以配置启动参数的，这是官方的 wiki：

# 1、常用参数

这里列几个常用的参数说明一下：

参数 说明
--listen 默认启动绑定的 ip 是 127.0.0.1，只能是你自己电脑可以访问 webui，如果你想让同个局域网的人都可以访问的话，可以配置该参数（会自动绑定 0.0.0.0 ip）。
--port xxx 默认端口是 7860，如果想换个端口，可以配置该参数，例如：--port 8888。
--gradio-auth username:password 如果你希望给 webui 设置登录密码，可以配置该参数，例如：--gradio-auth GitLqr:123456。
--use-cpu 默认使用 GPU 算力（需要 Nvidia 显卡），如果没显卡，可以配置该参数，改用 CPU 算力。
--medvram 为低显存（比如：4G）启用模型优化，会牺牲一点速度。
--lowvram 为极低显存（比如：2G）启用模型优化，会牺牲很多速度。
--autolaunch 启动时自动打开浏览器访问 webui。

要配置这些参数很简单，打开 webui-user.bat，把你需要配置的参数添加到 COMMANDLINE_ARGS 后面即可：

@echo off
+
+set PYTHON=
+set GIT=
+set VENV_DIR=
+set COMMANDLINE_ARGS=--listen --port 8888 --gradio-auth GitLqr:123456 --autolaunch
+
+call webui.bat
+

# 2、API 接口服务

除了上述几个常用的参数外，还有一个特别的参数 --api，可以在启动 stable-diffusion-webui 的同时，启动一个接口服务，在 COMMANDLINE_ARGS 后面追加上 --api：

@echo off
+
+set PYTHON=
+set GIT=
+set VENV_DIR=
+set COMMANDLINE_ARGS=--listen --port 8888 --gradio-auth GitLqr:123456 --autolaunch --api
+
+call webui.bat
+

重启后在 url 后面加上 /docs 即可看到 api 请求说明文档：

这样我们就可以通过编写程序的方式，使用文生图、图生图等功能了，关于接口传参格式等要求，参见官方 wiki：

+ +
+
#AI绘画#AIGC#stable-diffusion#stable-diffusion-webui#文生图#text2img#safetensors
AI - AI绘画的精准控图(ControlNet)

AI - AI绘画的精准控图(ControlNet)→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a0e176/index.html b/pages/a0e176/index.html new file mode 100644 index 000000000..b952e833d --- /dev/null +++ b/pages/a0e176/index.html @@ -0,0 +1,220 @@ + + + + + + Flutter - 混编项目集成Shorebird热更新🐦（安卓篇） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-01-07
目录

Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

目前我们的项目是按照 Flutter 官方文档 https://docs.flutter.dev/add-to-app/android/project-setup?tab=module-source (opens new window)，以源码依赖的方式集成到原生项目，在集成 Shorebird 实现热更新时，需要我们将源码依赖的方式调整成二进制依赖。

安卓端的改动还是很简单的，一路下来没怎么碰壁，接下来一起来看看如何操作吧

# 二、Shorebird 初始化

本文以 Mac 环境为例，如果你是 Windows 用户，请按官方文档去操作: https://docs.shorebird.dev (opens new window)

该部分内容只需要一开始没有环境和相应的文件时去操作一次

# 安装 CLI

打开终端，执行以下命令

curl --proto '=https' --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash
+

重启终端，输入 shorebird 即可看到相应的命令输出

$ shorebird
+The shorebird command-line tool
+
+Usage: shorebird <command> [arguments]
+
+Global options:
+-h, --help            Print this usage information.
+    --version         Print the current version.
+-v, --[no-]verbose    Noisy logging, including all shell commands executed.
+
+Available commands:
+  cache      Manage the Shorebird cache.
+  doctor     Show information about the installed tooling.
+  flutter    Manage your Shorebird Flutter installation.
+  init       Initialize Shorebird.
+  login      Login as a new Shorebird user.
+  login:ci   Login as a CI user.
+  logout     Logout of the current Shorebird user
+  patch      Manage patches for a specific release in Shorebird.
+  preview    Preview a specific release on a device.
+  release    Manage your Shorebird app releases.
+  upgrade    Upgrade your copy of Shorebird.
+
+Run "shorebird help <command>" for more information about a command.
+

# 登录

通过如下命令，登录你的 Shorebird 账号

shorebird login
+

# 选择 Flutter 版本

你可以查看当前 Shorebird 支持哪些 Flutter 版本

shorebird flutter versions list
+
$ shorebird flutter versions list
+📦 Flutter Versions
+✓ 3.13.9
+  3.13.8
+  3.13.7
+  3.13.6
+  3.13.5
+  3.13.4
+  3.13.3
+  3.13.2
+  3.13.1
+  3.13.0
+  3.10.7
+  3.10.6
+  3.10.5
+  3.10.4
+  3.10.3
+  3.10.2
+  3.10.1
+  3.10.0
+

如我现在需要用到 Flutter 3.13.9 版本，则输入如下命令

$ shorebird flutter versions use 3.13.9
+

# Flutter 模块初始化

在你的 Flutter 项目下执行如下命令

shorebird init
+

该命令会生成在项目根目录生成 shorebird.yaml 文件

# shorebird.ymal的内容
+app_id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
+
+# auto_update: false
+

以及修改 pubspec.yaml

  assets:
+    - shorebird.yaml
+

# 三、原生项目改造

以下的相关修改是以我们项目来写的（.kts），如果你的跟我的不一样，可以看一下文档：https://docs.shorebird.dev/guides/hybrid-app/android (opens new window)

# build.gradle.kts

新增本地二进制依赖

buildscript {
+    repositories {
+        ...
+            
++        // 本地依赖Flutter包
++        maven(url = "../../flutter_module/release")
++        maven(url = "https://download.shorebird.dev/download.flutter.io")
+        
+        ...
+    }
+}
+
+allprojects {
+    repositories {
+        ...
+            
++        // 本地依赖Flutter包
++        maven(url = "../../flutter_module/release")
++        maven(url = "https://download.shorebird.dev/download.flutter.io")
+        
+        ...
+    }
+}
+

# settings.gradle.kts

注释掉本地源码依赖

- evaluate(new File(
+-         settingsDir,
+-         "../flutter_module/.android/include_flutter.groovy"
+- ))
++ //evaluate(new File(
++ //        settingsDir,
++ //        "../flutter_module/.android/include_flutter.groovy"
++ //))
+

# app/build.gradle.kts

注释掉本地源码依赖，新增本地二进制依赖

dependencies {
++    // Flutter源码依赖
+-    implementation(project(LocalLib.flutter))    
++    // implementation(project(LocalLib.flutter))
+
++    // Flutter二进制依赖
++    releaseImplementation("com.lxf.flutter_modules:flutter_release:1.0")
+}
+

# 四、创建 Shorebird Release

打发布包的时候操作，在 Flutter 工程目录下执行

cd xx/xx/flutter_modules
+
+# 7.0.0+320: 大版本号+小版本号
+shorebird release aar --release-version 7.0.0+320
+

该命令内部会去执行 flutter build aar --no-debug --no-profile ...，并且使用的是 Shorebird 魔改的 Flutter 引擎！

版本号可以在如下路径的文件中查看

# 路径: app/src/main/AndroidManifest.xml
+# 小版本号: android:versionCode
+# 大版本号: android:versionName
+
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    package="com.lxf.flutter_modules"
+    android:versionCode="320"
+    android:versionName="7.0.0">
+...
+</manifest>
+

ShoreBird 的内部逻辑会去以这个版本号组合，向服务器请求判断是否存在相应版本的相关补丁！

执行完成后，在 Shorebird 控制台上可以看到相应的项

在命令执行前，请确保不存在 7.0.0+320 的 Release，如果有的话，请先删除

# 五、创建 Shorebird Patch

紧急修复线上包的bug时操作，在 Flutter 工程目录下执行

shorebird patch aar --release-version 7.0.0+320
+

注：版本号与上述的 release 命令中使用的要保持一致！

执行完成后，在 Shorebird 控制台上点击对应的 Release 项，进去后可以看到相应的补丁

# 六、热更新验证

  1. 未打 patch 时，请以 release 模式运行原生工程（在 Active Build Variant 的下拉选项中选择 release）
  2. 关闭 App
  3. 打 patch 后，重新打开 App，关闭 App 再打开 App，即可看到变化

如果补丁没有生效，可以在 Logcat 内检测相关输出，成功还是失败可以直接看后两句，如下两种情况的输出：

成功:

[INFO:shorebird.cc(109)] Shorebird updater: no active patch.
+[INFO:shorebird.cc(113)] Starting Shorebird update
+updater::network: Sending patch check request: PatchCheckRequest { app_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", channel: "stable", release_version: "7.0.0+320", patch_number: None, platform: "android", arch: "aarch64" }
+updater::updater: Patch 1 successfully installed.
+updater::updater: Update thread finished with status: Update installed
+

失败:

[INFO:shorebird.cc(109)] Shorebird updater: no active patch.
+[INFO:shorebird.cc(113)] Starting Shorebird update
+updater::network: Sending patch check request: PatchCheckRequest { app_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", channel: "stable", release_version: "7.0.0+320", patch_number: None, platform: "android", arch: "aarch64" }
+updater::updater: Update failed: failed to fill whole buffer
+updater::updater: Update thread finished with status: Update had error
+

失败的时候，看一下 PatchCheckRequest 后面的请求参数输出，一般失败都是因为这里的参数错误才导致。

# 七、脚本

由于我们日常研发还是使用的是源码依赖的方式，只会在打最终测试包时才需要去做上述的调整操作，所以这里用我比较熟悉的 Python 去制作了简易的脚本，并结合 Jenkins 来辅助完成这种万年不变的无聊步骤

脚本已上传至 Github: https://github.com/LinXunFeng/script_box/tree/main/flutter (opens new window)

看官可自取修改~

# switch_flutter_integrate.py

切换 Flutter 项目的集成方式

# 二进制依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'binary' -f 'android'
+
+# 源码依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'source' -f 'android' 
+

# shorebird.py

自动获取版本号，并执行 Shorebird 相关命令

# release
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f android
+
+# patch
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m patch -f android
+
+ +
+
#Dart#Flutter#Shorebird
Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓
Flutter - 混编项目集成Shorebird热更新🐦（iOS篇）

+ ← + Flutter - 混编项目集成Shorebird热更新🐦（iOS篇）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a16954/index.html b/pages/a16954/index.html new file mode 100644 index 000000000..89cf73db6 --- /dev/null +++ b/pages/a16954/index.html @@ -0,0 +1,169 @@ + + + + + + 安卓第三方登录之微信登录（图文详解） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-03-21
目录

安卓第三方登录之微信登录（图文详解）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、创建应用并成为开发者

# 1、创建应用

# 1)到微信开放平台管理中心，点击“创建移动应用”

# 2)填写基本的应用信息

# 3)填写平台信息

这里还是说一下怎么获取应用签名吧：

  1. 到“资源中心”-->“资源下载”-->“Android资源下载”，找到“签名生成工具”下载即可。飞机直达:Gen_Signature_Android2 (opens new window)

  2. 将APP进行打包安装到手机（如果是在IDE中直接运行后安装的话，是使用debug签名的，跟上线后使用jks文件签名的不一样!!!）

  3. 给手机安装第一步中下载的签名工具，打开后输入APP的包名(包名是AndroidManifest.xml中package的值)，点击生成，就可以看到应用签名了。

*注意：

签名工具得到的签名根你APP的打包步骤有关，默认的debug和jks文件签名，结果是不一样，如果app签名与微信开放平台的不一样，将无法调出微信登录界面!!!

# 4)最后提交，等待审核。（说是7天，一般1天后就审核通过了）

# 2、成为开发者

很简单，去“个人中心”，找到“开发者资质认证”，点击“申请”，然后一步步按要示填写信息，最后交钱就行，300大洋~~

# 二、微信登录

当审核通过之后，就可以开始使用微信开放平台提供的功能了。要使用“微信登录”功能必须成功开放者，也就是交了300块后默认开通此功能。

在这里可以得到AppId和AppSecret，记下，之后会用到。如下图所示：

# 1、引入微信SDK依赖

# 1)Android Studio:

在build.gradle的dependencies中加入以下语句

compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:1.0.2'
+

# 2)Eclipse(ADT):

去微信开放平台，“资源中心”-->“资源下载”-->“Android资源下载”，找到“开发工具包（SDK）”后下载。飞机直达:Android_SDK_4.0.2.zip (opens new window)。

解压后找到lib文件夹，把wechat-sdk-android-with-mta-1.0.2.jar和wechat-sdk-android-without-mta-1.0.2.jar复制到工程lib文件夹下，rebuild一下。

# 2、申明应用权限

<uses-permission android:name="android.permission.INTERNET"/> 
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 
+<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 
+<uses-permission android:name="android.permission.READ_PHONE_STATE"/> 
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 
+

# 3、向微信注册APP

在自定义的Application的onCreate中调用registToWX方法：

@Override
+public void onCreate() {
+    super.onCreate();
+    registToWX();
+}
+
+private void registToWX() {
+	//AppConst.WEIXIN.APP_ID是指你应用在微信开放平台上的AppID，记得替换。
+    mWxApi = WXAPIFactory.createWXAPI(this, AppConst.WEIXIN.APP_ID, false);
+    // 将该app注册到微信
+    mWxApi.registerApp(AppConst.WEIXIN.APP_ID);
+}
+

# 4、调用微信登录界面

一般会在登录界面会有一个微信图标，对微信图标设置点击事件，调用如下方法：

public void wxLogin() {
+    if (!MyApp.mWxApi.isWXAppInstalled()) {
+        UIUtils.showToast("您还未安装微信客户端");
+        return;
+    }
+    final SendAuth.Req req = new SendAuth.Req();
+    req.scope = "snsapi_userinfo";
+    req.state = "diandi_wx_login";
+    MyApp.mWxApi.sendReq(req);
+}
+

至此，就可以调用微信登录界面来进行登录认证了。

# 5、创建WXEntryActivity.java微信接收响应

WXEntryActivity是一个Activity，用来接收微信的响应信息。这里有几个需要注意的地方：

  1. 它必须在"包名.wxapi"这个包下，如：你的应用包名为：com.lqr.test，则WXEntryActivity所在的包名必须为com.lqr.test.wxapi。

  2. 创建后在AndroidManifest.xml文件中对WXEntryActivity进行设置：android:exported="true"。

  3. WXEntryActivity.Java继承自Activity,实现IWXAPIEventHandler接口，该接口即处理微信和app通信的不同event。

以下是一个示例：

public class WXEntryActivity extends Activity implements IWXAPIEventHandler {
+    private static final int RETURN_MSG_TYPE_LOGIN = 1;
+    private static final int RETURN_MSG_TYPE_SHARE = 2;
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        
+        //如果没回调onResp，八成是这句没有写
+        MyApp.mWxApi.handleIntent(getIntent(), this);
+    }
+
+    // 微信发送请求到第三方应用时，会回调到该方法
+    @Override
+    public void onReq(BaseReq req) {
+    }
+
+    // 第三方应用发送到微信的请求处理后的响应结果，会回调到该方法
+    //app发送消息给微信，处理返回消息的回调
+    @Override
+    public void onResp(BaseResp resp) {
+        LogUtils.sf(resp.errStr);
+        LogUtils.sf("错误码 : " + resp.errCode + "");
+        switch (resp.errCode) {
+
+            case BaseResp.ErrCode.ERR_AUTH_DENIED:
+            case BaseResp.ErrCode.ERR_USER_CANCEL:
+                if (RETURN_MSG_TYPE_SHARE == resp.getType()) UIUtils.showToast("分享失败");
+                else UIUtils.showToast("登录失败");
+                break;
+            case BaseResp.ErrCode.ERR_OK:
+                switch (resp.getType()) {
+                    case RETURN_MSG_TYPE_LOGIN:
+                        //拿到了微信返回的code,立马再去请求access_token
+                        String code = ((SendAuth.Resp) resp).code;
+						LogUtils.sf("code = " + code);
+
+                        //就在这个地方，用网络库什么的或者自己封的网络api，发请求去咯，注意是get请求
+                        
+                        break;
+
+                    case RETURN_MSG_TYPE_SHARE:
+                        UIUtils.showToast("微信分享成功");
+                        finish();
+                        break;
+                }
+                break;
+        }
+    }
+}
+

当微信授权第三登录后，会自动调用WXEntryActivity的onResp方法，可以在((SendAuth.Resp) resp).code得到“授权临时票据code”,之后可以通过code参数加上AppID和AppSecret等，通过API换取access_token,再通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

一般会把获取access_token步骤（包括之后的操作）放到服务器那边，服务器经过一番处理之后，返回用户信息给客户端。

# 三、踩坑经验

在app点击微信图标后，一片空白！！控制台打印错误码为-6。 +原因： +这是因为app的使用的签名跟开放平台的应用签名不一致导致的。

解决方法：

  1. 使用签名工具得到手机中app的签名
  2. 修改开放平台上的应用签名
  3. 清除手机上微信APP的缓存信息（不知道的可以卸载后重装微信）
  4. 登录微信后，再点击APP的微信登录图标
+ +
+
#第三方SDK#微信登录
解决ImageView图片挤压问题
Android库发布至MavenCentral流程详解

+ ← + Android库发布至MavenCentral流程详解→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a3228e/index.html b/pages/a3228e/index.html new file mode 100644 index 000000000..5d3de40f2 --- /dev/null +++ b/pages/a3228e/index.html @@ -0,0 +1,298 @@ + + + + + + Gradle入门系列(二) - groovy高级语法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-02
目录

Gradle入门系列(二) - groovy高级语法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# groovy 高级语法

# 一、json 操作

使用 groovy 自带的 json 工具进行 json 操作

groovy.json.JsonSlurper：将 json 原数据转成实体对象 +groovy.json.JsonOutput：将实体对象转成 json 数据

def list = [
+  new Person(name: 'John', age: 25),
+  new Person(name: 'Major', age: 26)
+]
+
+// 对象转json
+def json = JsonOutput.toJson(list)
+println json                         // 一行输出json字符串
+println JsonOutput.prettyPrint(json) // 以json格式输出json字符串
+
+// json转对象
+def jsonSlurper = new JsonSlurper()
+jsonSlurper.parse(obj) // jsonSlurper.parseText(str)
+

groovy 是完全兼容 java 的，所以 java 能使用的第三方 json 库（如：gson、fastjson），在 groovy 中也同样可以导入使用，但一般不建议这么做，groovy 本身提供的工具箱就已经满足日常开发需求了。

下面是 groovy 将网络 json 数据转成实体对象，并访问对应属性字段的例子：

def response = getNetworkData("http://xxx/data.json")
+println response.data.name        // 不需要定义具体的实体类，就可以直接访问对应的属性字段
+
+def getNetworkData(String url){
+  // 发送http请求
+  def connection = new URL(url).openConnection()
+  connection.setRequestMethod('GET')
+  connection.connect() // 该方法会阻塞线程
+  def response = connection.content.text
+
+  // 将json转化为实体对象
+  def jsonSluper = new JsonSlurper()
+  return jsonSluper.parseText(response)
+}
+

# 二、xml 文件操作

java xml 处理：DOM 文档驱动处理方式、SAX 事件驱动处理方式。 +groovy 则为我们提供了 xml 工具箱：

groovy.xml.XmlSlurper：将 xml 原数据转成实体对象 +groovy.xml.MarkupBuilder：将实体对象转成 xml 数据

# 1、解析 xml

final String xml = '''
+  <response version-api="2.0">
+    <value>
+      <books id="1" classification="android">
+        <book available="20" id="1">
+          <title>疯狂Android讲义</title>
+          <author id="1">李刚</author>
+        </book>
+        <book available="14" id="2">
+          <title>第一行代码</title>
+          <author id="2">郭林</author>
+        </book>
+        <book available="13" id="3">
+          <title>Android开发艺术探索</title>
+          <author id="3">任玉刚</author>
+        </book>
+        <book available="5" id="4">
+          <title>Android源码设计模式</title>
+          <author id="4">何红辉</author>
+        </book>
+      </books>
+      <books id="2" classification="web">
+        <book available="10" id="1">
+          <title>Vue从入门到精通</title>
+          <author id="4">李刚</author>
+        </book>
+      </books>
+    </value>
+  </response>
+'''
+
+def xmlSlurper = new XmlSlurper()
+def response = xmlSlurper.parseText(xml) // 读取并解析xml数据
+
+println response.value.books[0].book[0].title.text() // 获取标签内容
+println response.value.books[0].book[0].@available   // 获取标签属性
+
+// 获取所有作者是"李刚"的书籍名称
+// 方法一：平行遍历xml数据
+def list = []
+response.value.books.each { books ->
+  books.book.each { book ->
+    def author = book.author.text()
+    if(author.equals('李刚')){
+      list.add(book.title.text())
+    }
+  }
+}
+println list.toListString()
+// 方法二：深度遍历xml数据
+// response.depthFirst().findAll 相当于 response.'**'.findAll
+def titles = response.depthFirst().findAll { book ->
+  return book.author.text() == '李刚' ? true : false
+}
+
+// 获取id为2的book节点的title内容
+// 广度遍历xml数据
+// response.value.books.children().findAll 相当于 response.value.books.'*'.findAll
+def names = response.value.books.children().findAll { node ->
+  node.name() == 'book' && node.@id == '2'
+}.collect { node ->
+  return node.title.text()
+}
+
李刚
+20
+
+[疯狂Android讲义, Vue从入门到精通]
+

其他：

  • 深度遍历 depthFirst()可以使用'**'表示。
  • 广度遍历 children()可以使用'*'表示。

# 2、生成 xml

/**
+ * 生成xml格式数据
+ * <langs type='current' count='3' mainstream='true'>
+ * <language flavor='static' version='1.5'>java</language>
+ * <language flavor='dynamic' version='1.6.0'>Groovy</language>
+ * <language flavor='dynamic' version='1.9'>JavaScript</language>
+ * </langs>
+ */
+
+def sw = new StringWriter()
+def xmlBuilder = new MarkupBuilder(sw) // 用来生成xml数据的核心类
+// 使用伪方法创建 根结点langs，在参数括号中指定标签属性key-value
+xmlBuilder.langs(type: 'current', count: '3', mainstream: 'true'){
+  // 同样，使用伪方法创建 language结点，不指定key时，该value将作为标签内容
+  language(flavor: 'static', version: '1.5', 'Java')
+  language(flavor: 'dynamic', version: '1.6.0', 'Groovy')
+  language(flavor: 'dynamic', version: '1.9', 'JavaScript')
+}
+println sw
+

上面是使用 MarkupBuilder 直接编写输出 xml 数据，但实际开发中，往往是将实体对象转成 xml，在明白 MarkupBuilder 的用法之后，这样的需求处理也是差不多的：

def sw = new StringWriter()
+def xmlBuilder = new MarkupBuilder(sw)
+def langs = new Langs()
+xmlBuilder.langs(type: langs.type, count: langs.count, mainstream: langs.mainstream) {
+  langs.languages.each { lang->
+    language (flavor: lang.flavor, version: lang.version, lang.value)
+  }
+}
+
+
+class Langs{
+  String type = 'current'
+  String count = '3'
+  String mainstream = 'true'
+  def Languages = [
+    new Language(flavor: 'static', version: '1.5', value: 'java'),
+    new Language(flavor: 'dynamic', version: '1.6.0', value: 'Groovy')
+    new Language(flavor: 'dynamic', version: '1.9', value: 'JavaScript')
+  ]
+}
+
+class Language{
+  String flavor
+  String version
+  String value
+}
+...
+

# 三、文件操作

java 文件处理：节点流（InputStream、OutputSteam 及其子类）、处理流（Reader、Writer 及其子类） +groovy 文件处理：所有 java 对文件的处理类，groovy 都可以使用；groovy 扩展了许多更加快捷和强大的方法（ResourceGroovyMethods）。

def file = new File('../../GroovySpecification.iml')
+file.eachLine { line -> // 遍历文件中的每一行
+  println line
+}
+def text = file.getText() // 返回文件中所有行内容的文本
+def result = file.readLines() // 返回一个一行行文本内容的List
+def readerBuffer = file.withReader { reader -> // 读取文件中前100个字符
+  char[] buffer = new char[100]
+  reader.read(buffer)
+  return buffer
+}
+
+// copy文件
+def copy(String srcPath, String destPath) {
+  try{
+    // 创建目标文件
+    def destFile = new File(destPath)
+    if(!destFile.exists()){
+      destFile.createNewFile()
+    }
+    // 开始拷贝
+    new File(srcPath).withReader{ reader ->
+      def lines = reader.readLines()
+      destFile.withWriter{ writer ->
+        lines.each{ line ->
+          writer.append(line+"\r\n")
+        }
+      }
+    }
+  }catch(Exception e){
+    e.printStackTrace()
+  }
+}
+
+// 对象保存到文件
+def saveObject(Object object, String path){
+  try{
+    // 创建目标文件
+    def destFile = new File(path)
+    if(!destFile.exists()){
+      destFile.createNewFile()
+    }
+    destFile.withObjectOutputStream { out ->
+      out.writeObject(object)
+    }
+  }catch(Exception e){
+    e.printStackTrace()
+  }
+}
+
+// 从文件读取对象
+def readObject(String path){
+  def obj = null
+  try{
+    def file = new File(path)
+    if(file == null || !file.exists()) return null
+    // 从文件中读取对象
+    file.withObjectInputStream{ input ->
+      obj = input.readObject()
+    }
+  }catch(Exception e){
+    e.printStackTrace()
+  }
+  return obj
+}
+

# 四、与 java 对比及总结

  • 写法上，没有 java 那么多限制（如：分号、return）
  • 功能上，对 java 已有的功能进行了极大的扩展
  • 作用上，即可以编写应用，也可以编写脚本
+ +
+
#脚本#Gradle
Gradle入门系列(一) - groovy基础语法
Gradle入门系列(三) - 初识Gradle与Project

+ ← + Gradle入门系列(三) - 初识Gradle与Project→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a39d04/index.html b/pages/a39d04/index.html new file mode 100644 index 000000000..8c1d24580 --- /dev/null +++ b/pages/a39d04/index.html @@ -0,0 +1,446 @@ + + + + + + 使用PorterDuff解决clipPath无法抗锯齿问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-03-16
目录

使用PorterDuff解决clipPath无法抗锯齿问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

前段时间公司史无前例的接了一个大数据外包项目（哇~我们又不是外包公司(╯°Д°)╯︵ ┻━┻），要求搞很多图表方便观察运营的数据情况，图表当然要用到MPAndroidChart啦，但并不是所有的图表都可以用它用实现，这时就需要自定义View了，其中有一个要求，如下图所示，这就是本篇要实现的效果：

本篇全文适合像我一样的小白细细观看，如果你很赶时间，就只是进来看看标题上的解决方案，那么请直接看第二部分分析与实现的第5章节《优化解决抗锯齿问题》 。

# 二、分析与实现

最终效果上图就可以看到了，下面就来想想怎么实现从0实现这个自定义View吧。

# 1、分析

# 1）UI

可以看到这个View要根据进度，绘制对应长度的弧（或者说是不完整的环），因为环的颜色是渐变的，不能用程序来控制（或者说不好实现），所以向美术要了如下两张切图：

别看这两个环大小不一，实际上图片的整体尺寸是一样的，都是95*95。

那么接下来就是根据进度把图片的部分区域绘制出来就好了。

# 2）功能

  1. 可以自由设置总进度（maxProcess）与当前进度（process）。
  2. 可以执行绘制动画效果。

# 3）难点

  1. canvas绘制bitmap
  2. canvas裁切功能的使用
  3. 锯齿出现的原因与解决方法
  4. PorterDuff的理解与使用

# 2、实现

# 1)获取自定义控件宽高

这段可以说是自定义View的模板代码了，就不详细说明，基本上所有的自定义View都这样测量控件宽高，模板代码如下：

public class ArithmeticView extends View {
+    private int mWidth  = 0;// 控件的宽度
+    private int mHeight = 0;// 控件的高度
+	@Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
+        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
+        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
+        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
+		switch (widthSpecMode) {
+            case MeasureSpec.AT_MOST:
+                mWidth = dp2px(200);
+                break;
+            case MeasureSpec.EXACTLY:
+            case MeasureSpec.UNSPECIFIED:
+                mWidth = widthSpecSize;
+                break;
+        }
+		switch (heightSpecMode) {
+            case MeasureSpec.AT_MOST:
+                mHeight = dp2px(200);
+                break;
+            case MeasureSpec.EXACTLY:
+            case MeasureSpec.UNSPECIFIED:
+                mHeight = heightSpecSize;
+                break;
+        }
+        setMeasuredDimension(mWidth, mHeight);
+    }
+}
+

# 2）初始化加载图片资源

因为是项目特有的自定义View，不考虑通用问题，直接在View创建后加载需要用到的图片资源即可。

private Bitmap mBitmapInner;
+private Bitmap mBitmapOuter;
+
+public ArithmeticView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+    super(context, attrs, defStyleAttr);
+    init();
+}    
+private void init() {
+    mBitmapInner = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_inner);
+    mBitmapOuter = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_outer);
+}
+

# 3）draw()方法实现

因为要绘制的环有2个，分为大小环，故绘制对应环的方法命名为：drawInnerBitmap()、drawOuterBitmap()。

@Override
+protected void onDraw(Canvas canvas) {
+    canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
+    drawInnerBitmap(canvas);
+    drawOuterBitmap(canvas);
+}
+
+private void drawInnerBitmap(Canvas canvas) {
+}
+private void drawOuterBitmap(Canvas canvas) {
+}
+

可以看到在onDraw()方法中有这样一段代码：

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, >Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));

这是为了抗锯齿的，但这里先透露一下，该方法对下面的实现方案一抗锯齿无效。

# 3、canvas绘制bitmap

# 1）canvas.drawBitmap()

canvas绘制bitmap用到的方法就是drawBitmap()，它的所有重载方法如下图所示

说明一下，如果你就单单只是把绘制Bitmap绘制出来，那么最后的paint参数可以传入null。

实际上，当你使用drawBitmap()绘制Bitmap时，画笔paint的作用并不大，可以认为无效。

那么多方法，用哪个呢？其实开发中常用的重载方法就如下两个：

public void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
+public void drawBitmap(Bitmap bitmap, Rect src, RectF dst, @Nullable Paint paint)
+

第1个重载方法参数较少，其中left和top表示图片要绘制到canvas的起始位置，这个方法无法指定bitmap的图片要显示的区域（有时一张图片就只需要显示它的四分之一），这就是该重载方法的局限，而第2个重载方法则可以随便指定bitmap要显示的区域，而且是最常用的方法，功能相对更强，这里使用该方法来实现Bitmap的绘制。

# 2）绘制外环Bitmap

因为2个环的绘制原理一样，所以这里就以绘制外环为例：

private void drawOuterBitmap(Canvas canvas) {
+    int left = 0;
+    int top = 0;
+    int right = mBitmapOuter.getWidth();
+    int bottom = mBitmapOuter.getHeight();
+    Rect src = new Rect(left, top, right, bottom);
+    RectF dsc = new RectF(0, 0, mWidth, mHeight);
+	canvas.drawBitmap(mBitmapOuter, src, dsc, null);
+}
+

其中，src表示要图片要被绘制区域（注意，是针对图片来说的），如果只绘制图片的四分之一，则代码如下：

int left = 0;
+int top = 0;
+int right = mBitmapOuter.getWidth() / 2;
+int bottom = mBitmapOuter.getHeight() / 2;
+Rect src = new Rect(left, top, right, bottom);
+

而dsc则表示要绘制到canvas上的哪个矩形区域（注意，是针对canvas来说的），前面的懂了，相信这个也不难理解。

这样，图片就绘制出来了，注意此时是没有锯齿的。

# 4、方案一：使用canvas裁切功能

环的完整绘制在上面已经用drawBitmap()方法实现，那么接下来就是绘制一个不完整的环了。我首先想到的方法就是使用canvas的裁切功能,将canvas的绘制区域先裁切出来,然后再在上面绘制图形,进而实现根据进度绘制图片的一部分。

针对该自定义View，需要说明一点，canvas的可绘制区域应该是一个从中上方开始逆时针打开的扇形（可以想象成一把扇子）；用二维坐标系的方式来说的话，就从y轴开始，以原点为圆心，逆时针画圆。

# 1）canvas.clipXXX()

canvas的裁切功能需要用到clip开头的方法，canvas中所有的clipXXX()方法如下图所示：

绝大部分方法都是为了裁切出一个矩形，而我们这个不一样，它是要裁切出一个扇形！所以只有一个clipPath()方法可用，由我们来自定义裁切形状（同样的，除了矩形以外的任何形状都需要我们自己定义路径）。

# 2）使用clipPath()根据进度裁切扇形

不管是哪个clipPath()方法，都需要用到Path对象，该path对象就代表了canvas的裁切路径，因为大小环的进度可能不同，但原理一样，所以将path的设置代码抽出来作为一个共用方法，代码如下：

private Path   mPath;
+private void init() {
+	...
+    mPath = new Path();
+}
+/**
+ * 设置裁切路径
+ *
+ * @param process    当前进度
+ * @param maxProcess 总进度
+ */
+private void setClipPath(float process, float maxProcess) {
+    mPath.reset();
+    float ratio = process / maxProcess;
+    if (ratio == 1) {
+		// 当进度比例为1时，说明进度100%，要完整绘制Bitmap
+        mPath.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CCW);
+    } else {
+        float sweepAngle = ratio * -360;
+        mPath.moveTo(mWidth / 2, mHeight / 2);// View的中心点位置
+        mPath.lineTo(mWidth / 2, mHeight);// View的中心点上方位置
+        mPath.arcTo(new RectF(0, 0, mWidth, mHeight), 270, sweepAngle * mProgressPercent, false);// 根据角度画弧线
+        mPath.lineTo(mWidth / 2, mHeight / 2);// 最后再回到View的中心点位置，形成一个封闭路径
+    }
+    mPath.close();
+}
+

关于Path的moveTo()、lineTo()、arcTo等方法在这里就是不详细科普了，因为方法比较多，要说明可能会花费不少篇幅，而且实际上这些方法顾名就可思义，如果不是很懂的同学自行百度查一下吧。

这里要着重说明一点，Android中的角度问题，如下图所示：

Android中的角度是以x轴为0°开始，以顺时针方向递增，而我们的自定义View要绘制的方向则是逆时针，所以要计算arcTo的sweepAngle时要注意乘以一个负值。

# 3）canvas的保存与复原

要注意一点，canvas的裁切功能会对后续的绘制产生影响，所以在裁切之前需要将Canvas的当前状态保存一下，在裁切绘制过后将Canvas的状态恢复回来。否则，之后的绘制结果可能并不是你想要的了。

如果不保存与恢复Canvas的状态，那么下次绘制只会在裁切出来的区域中进行。举个例子，假设内环的尺寸只有50*50，你先绘制了内环，但没有保存与恢复Canvas的状态，那么之后在绘制外环时（外环尺寸95*95），你就会发现外环看不到了。

保存Canvas的当前状态代码：

canvas.save(Canvas.CLIP_SAVE_FLAG);

恢复Canvas之前的状态代码：

canvas.restore();

所以外环裁切并绘制的完整代码如下：

private void drawOuterBitmap(Canvas canvas) {
+    int left = 0;
+    int top = 0;
+    int right = mBitmapOuter.getWidth();
+    int bottom = mBitmapOuter.getHeight();
+    Rect src = new Rect(left, top, right, bottom);
+    RectF dsc = new RectF(0, 0, mWidth, mHeight);
+
+    canvas.save(Canvas.CLIP_SAVE_FLAG);
+    setClipPath(mOuterProcess, mOuterMaxProcess);
+    canvas.clipPath(mPath);
+    canvas.drawBitmap(mBitmapOuter, src, dsc, null);
+    canvas.restore();
+}
+

将进度设置为80%后，绘制出来的效果如下：

注意了，锯齿出现了！！！

# 5、优化解决抗锯齿问题

为什么？明明对canvas设置了抗锯齿了，怎么还这样？难道是因为在调用canvas.drawBitmap()时，没有传入抗锯齿画笔的原因？错，前面已经说过了，这个paint对drawBitmap()的作用并不大，就算你传入了可以抗锯齿的paint，锯齿依然存在。仔细想想，在使用裁切前后，锯齿的出现情况，你就能发现猫腻，百度及Google大法后，最终得出如下几点结论：

  • Android中，Canvas的抗锯齿功能必须使用到画笔Paint。
  • clipPath()会使drawBitmap()绘制出来的图像出现锯齿，而且没法解决方法，即使你使用了画笔。
  • 可以使用PorterDuff来实现同样的绘制效果。

那么，接下来就开始进行“曲线救国”路线。

# 6、方案二：使用PorterDuff

对于PorterDuff的介绍这里就不说了，百度吧，或者跳过，直接来看下面这图：

这图很好的表示了PorterDuff.Mode的各种效果，下面是对效果的详细说明。

Mode 说明
.CLEAR 所绘制不会提交到画布上
PorterDuff.Mode.SRC 显示上层绘制图片
PorterDuff.Mode.DST 显示下层绘制图片
PorterDuff.Mode.SRC_OVER 正常绘制显示，上下层绘制叠盖
PorterDuff.Mode.DST_OVER 上下层都显示。下层居上显示
PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层
PorterDuff.Mode.DST_IN 取两层绘制交集。显示下层
PorterDuff.Mode.SRC_OUT 取上层绘制非交集部分
PorterDuff.Mode.DST_OUT 取下层绘制非交集部分
PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分
PorterDuff.Mode.DST_ATOP 取上层非交集部分与下层交集部分
PorterDuff.Mode.XOR 异或：去除两图层交集部分
PorterDuff.Mode.DARKEN 取两图层全部区域，交集部分颜色加深
PorterDuff.Mode.LIGHTEN 取两图层全部，点亮交集部分颜色
PorterDuff.Mode.MULTIPLY 取两图层交集部分叠加后颜色
PorterDuff.Mode.SCREEN 取两图层全部区域，交集部分变为透明色

仔细看图中的Src、Dst、SrcIn，有没有什么想法呢？

如果你之前没用过PorterDuff.Mode也不慌，继续"听"我给你吹水，并不难理解。

# 1）原理与实现

这里要先理解2个单词：src与dst。通俗的说，dst是已经绘制在canvas上的图像，而src则是将要绘制到canvas上的图像（不得不说跟OpenGL的模板测试部分概念很像耶~）。那么，对于我们这个自定义View而言，dst就是那个扇形图像，src就是环，再结合PorterDuff.Mode的SrcIn模式，就可以让环的Bitmap只显示出扇形的部分了。

注意：使用PorterDuff需要禁止硬件加速。

代码很简单，不多废话，如下：

private Paint         mPaint;
+private void init() {
+    // 禁止硬件加速，硬件加速会有一些问题，这里禁用掉
+    setLayerType(LAYER_TYPE_SOFTWARE, null);
+    mPaint = new Paint();
+    mPaint.setAntiAlias(true);
+}
+private void drawOuterBitmap(Canvas canvas) {
+    int left = 0;
+    int top = 0;
+    int right = mBitmapOuter.getWidth();
+    int bottom = mBitmapOuter.getHeight();
+    Rect src = new Rect(left, top, right, bottom);
+    RectF dsc = new RectF(0, 0, mWidth, mHeight);
+
+    mPaint.reset();
+    setClipPath(mOuterProcess, mOuterMaxProcess);
+    canvas.drawPath(mPath, mPaint);// 绘制Dst
+    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式（显示Scr与Dst交接的区域）
+    canvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
+}
+

效果很棒，没有锯齿了。

# 2）优化，实现双环无锯齿绘制

前面看似已经用PorterDuff实现了环的无锯齿绘制，但如果内环也是按照上面的代码来写，你就会发现，只显示后绘制的外环。具体原因嘛，我也不太懂，猜测是多次使用PorterDuff，会将之前绘制在Canvas上的图像清除吧。（如果有人知道真实原因，麻烦留言说一下，thx）。既然，直接对canvas操作不可取，那就换个思路吧。

我们要的不过是最后显示出来的不完整的环对吧，那我们可以在另一个Canvas上把这个不完整的环画出来，得到它的Bitmap，再在onDraw()的Canvas上对这个Bitmap进行绘制即可。所以，改进后的代码如下：

private void drawOuterBitmap(Canvas canvas) {
+    int left = 0;
+    int top = 0;
+    int right = mBitmapOuter.getWidth();
+    int bottom = mBitmapOuter.getHeight();
+    Rect src = new Rect(left, top, right, bottom);
+    RectF dsc = new RectF(0, 0, mWidth, mHeight);
+
+	// 1. 在另一个Canvas中使用 path + mBitmapOuter 将最终图形finalBitmap绘制出来。
+    mPaint.reset();
+    setClipPath(mOuterProcess, mOuterMaxProcess);
+    Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
+    Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
+    mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
+    mCanvas.drawPath(mPath, mPaint);// 绘制Dst
+    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式（显示Scr与Dst交接的区域）
+    mCanvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
+    // 2. 再在原来的Canvas中将finalBitmap绘制出来。
+    canvas.drawBitmap(finalBitmap, 0, 0, null);
+}
+

同样的，内环的代码基本一致，直接看效果吧。

# 三、完整代码

至于那个执行绘制动画效果的功能并非本文重点，实现上能见仁见智，下面贴出该自定义View的完整代码，当然执行绘制动画效果的功能也在里面（具体实现看animateStart()方法）。完整代码如下：

public class ArithmeticView extends View {
+
+    private int mWidth  = 0;// 控件的宽度
+    private int mHeight = 0;// 控件的高度
+    private Bitmap mBitmapInner;
+    private Bitmap mBitmapOuter;
+    private Path   mPath;
+    private float mInnerProcess    = 50;
+    private float mInnerMaxProcess = 100;
+    private float mOuterProcess    = 80;
+    private float mOuterMaxProcess = 100;
+    private float mProgressPercent = 1;// 当前进度百分比
+    private ValueAnimator mValueAnimator;
+    private Paint         mPaint;
+
+    public ArithmeticView(Context context) {
+        this(context, null);
+    }
+
+    public ArithmeticView(Context context, @Nullable AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public ArithmeticView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init();
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
+        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
+        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
+        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
+        switch (widthSpecMode) {
+            case MeasureSpec.AT_MOST:
+                mWidth = dp2px(200);
+                break;
+            case MeasureSpec.EXACTLY:
+            case MeasureSpec.UNSPECIFIED:
+                mWidth = widthSpecSize;
+                break;
+        }
+        switch (heightSpecMode) {
+            case MeasureSpec.AT_MOST:
+                mHeight = dp2px(200);
+                break;
+            case MeasureSpec.EXACTLY:
+            case MeasureSpec.UNSPECIFIED:
+                mHeight = heightSpecSize;
+                break;
+        }
+        setMeasuredDimension(mWidth, mHeight);
+    }
+
+    private void init() {
+        // 禁止硬件加速，硬件加速会有一些问题，这里禁用掉
+        setLayerType(LAYER_TYPE_SOFTWARE, null);
+        mBitmapInner = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_inner);
+        mBitmapOuter = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_outer);
+        mPath = new Path();
+        mPaint = new Paint();
+        mPaint.setAntiAlias(true);
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
+        drawInnerBitmap(canvas);
+        drawOuterBitmap(canvas);
+    }
+
+    private void drawInnerBitmap(Canvas canvas) {
+        int left = 0;
+        int top = 0;
+        int right = mBitmapInner.getWidth();
+        int bottom = mBitmapInner.getHeight();
+        Rect src = new Rect(left, top, right, bottom);
+        RectF dsc = new RectF(0, 0, mWidth, mHeight);
+
+        mPaint.reset();
+        setClipPath(mInnerProcess, mInnerMaxProcess);
+        Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
+        Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
+        mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
+        mCanvas.drawPath(mPath, mPaint);// 绘制Dst
+        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式（显示Scr与Dst交接的区域）
+        mCanvas.drawBitmap(mBitmapInner, src, dsc, mPaint);// 绘制Src
+        canvas.drawBitmap(finalBitmap, 0, 0, null);
+    }
+
+    private void drawOuterBitmap(Canvas canvas) {
+        int left = 0;
+        int top = 0;
+        int right = mBitmapOuter.getWidth();
+        int bottom = mBitmapOuter.getHeight();
+        Rect src = new Rect(left, top, right, bottom);
+        RectF dsc = new RectF(0, 0, mWidth, mHeight);
+
+        /*------------------ 方案1:使用clipPath方式绘制图片,但无法抗锯齿 ------------------*/
+//        canvas.save(Canvas.CLIP_SAVE_FLAG);
+//        setClipPath(mOuterProcess, mOuterMaxProcess);
+//        canvas.clipPath(mPath);
+//        canvas.drawBitmap(mBitmapOuter, src, dsc, null);
+//        canvas.restore();
+
+        /*------------------ 方案二:使用PorterDuff方式，可以抗锯齿 ------------------*/
+        // 1. 在另一个Canvas中使用 path + mBitmapOuter 将最终图形finalBitmap绘制出来。
+        mPaint.reset();
+        setClipPath(mOuterProcess, mOuterMaxProcess);
+        Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
+        Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
+        mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
+        mCanvas.drawPath(mPath, mPaint);// 绘制Dst
+        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式（显示Scr与Dst交接的区域）
+        mCanvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
+        // 2. 再在原来的Canvas中将finalBitmap绘制出来。
+        canvas.drawBitmap(finalBitmap, 0, 0, null);
+    }
+
+    /**
+     * 设置裁切路径
+     *
+     * @param process    当前进度
+     * @param maxProcess 总进度
+     */
+    private void setClipPath(float process, float maxProcess) {
+        mPath.reset();
+        float ratio = process / maxProcess;
+        if (ratio == 1) {
+            mPath.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CCW);
+        } else {
+            float sweepAngle = ratio * -360;
+            mPath.moveTo(mWidth / 2, mHeight / 2);
+            mPath.lineTo(mWidth / 2, mHeight);
+            mPath.arcTo(new RectF(0, 0, mWidth, mHeight), 270, sweepAngle * mProgressPercent, false);
+            mPath.lineTo(mWidth / 2, mHeight / 2);
+        }
+        mPath.close();
+    }
+
+    public float getInnerProcess() {
+        return mInnerProcess;
+    }
+
+    public void setInnerProcess(float innerProcess) {
+        mInnerProcess = innerProcess;
+        postInvalidate();
+    }
+
+    public float getInnerMaxProcess() {
+        return mInnerMaxProcess;
+    }
+
+    public void setInnerMaxProcess(float innerMaxProcess) {
+        mInnerMaxProcess = innerMaxProcess;
+    }
+
+    public float getOuterProcess() {
+        return mOuterProcess;
+    }
+
+    public void setOuterProcess(float outerProcess) {
+        mOuterProcess = outerProcess;
+        postInvalidate();
+    }
+
+    public float getOuterMaxProcess() {
+        return mOuterMaxProcess;
+    }
+
+    public void setOuterMaxProcess(float outerMaxProcess) {
+        mOuterMaxProcess = outerMaxProcess;
+    }
+
+    /**
+     * 开始动画
+     *
+     * @param duration 动画时长（毫秒）
+     */
+    public void animateStart(long duration) {
+        if (mValueAnimator != null) {
+            mValueAnimator.cancel();
+            mValueAnimator = null;
+        }
+        mValueAnimator = ValueAnimator.ofFloat(0, 100);
+        mValueAnimator.setDuration(duration).start();
+        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+            @Override
+            public void onAnimationUpdate(ValueAnimator animation) {
+                Float value = (Float) animation.getAnimatedValue();
+                if (value == 100) {
+                    mValueAnimator.cancel();
+                    mValueAnimator = null;
+                }
+                mProgressPercent = value / 100;
+                postInvalidate();
+            }
+        });
+    }
+
+    private int dp2px(int dp) {
+        float density = getContext().getResources().getDisplayMetrics().density;
+        return (int) (dp * density);
+    }
+}
+
+ +
+
#自定义View#Canvas#clipPath#抗锯齿
Libgdx - 使用pixmap绘制透明圆角矩形
解决ImageView图片挤压问题

+ ← + 解决ImageView图片挤压问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a52cff/index.html b/pages/a52cff/index.html new file mode 100644 index 000000000..017a72c13 --- /dev/null +++ b/pages/a52cff/index.html @@ -0,0 +1,127 @@ + + + + + + Kotlin - 枚举与密封类 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-31
目录

Kotlin - 枚举与密封类

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 枚举

Kotlin 支持枚举，需要使用 enum class 进行声明，如：

enum class LogLevel {
+    VERBOSE, DEBUG, INFO, WARN, ERROR, ASSERT
+}
+

上面的代码可以理解为是 LogLevel 类的 companion object 语法糖：

class LogLevel private constructor() {
+    companion object {
+        val VERBOSE = LogLevel()
+        val DEBUG = LogLevel()
+        val INFO = LogLevel()
+        val WARN = LogLevel()
+        val ERROR = LogLevel()
+        val ASSERT = LogLevel()
+    }
+}
+

所以我们可以知道枚举中的每一个成员，其实都是枚举的一个实例对象，因此枚举会比较占内存；另外，因为 class 默认是 final 的，且构造器是 private 的，所以枚举没有子类，因此枚举是实例可数的。既然枚举是类，那它就可以有构造函数以及成员方法：

enum class LogLevel(val id: Int) {
+    VERBOSE(0), DEBUG(1), INFO(2), WARN(3), ERROR(4), ASSERT(5);
+
+    override fun toString(): String {
+        return "id = $id, name = $name, ordinal = $ordinal"
+    }
+}
+

枚举 enum class 自身提供了几个有用的成员属性与方法：

  • 成员属性 ordinal 可以获取到当前枚举实例的序号
  • 成员方法 values() 可以获取到枚举的所有实例对象
  • 成员方法 valueOf() 可以根据枚举实例名获取到枚举实例对象
fun main() {
+    println(LogLevel.DEBUG.ordinal) // 1
+    LogLevel.values().map(::println) // id = 0, name = VERBOSE, ordinal = 0
+                                     // id = 1, name = DEBUG, ordinal = 1
+                                     // id = 2, name = INFO, ordinal = 2
+                                     // id = 3, name = WARN, ordinal = 3
+                                     // id = 4, name = ERROR, ordinal = 4
+                                     // id = 5, name = ASSERT, ordinal = 5
+    println(LogLevel.valueOf("ERROR")) // id = 4, name = ERROR, ordinal = 4
+}
+

# 密封类

密封类是子类有限的类，需要使用 sealed class 进行声明：

// SealedClassExample.kt
+sealed class Human
+
+class YellowRace : Human() // 黄种人
+class WhiteRace : Human() // 白种人
+class BlackRace : Human() // 黑种人
+object Jesus : Human() // 耶稣
+object MonkeyKing : Human() // 齐天大圣
+

它的构造器默认就是 private 的，且不可修改，它的子类只能定义在同个 kt 文件中或者是密封类的内部类：

综上，我们可以发现枚举(enum class)和密封类(sealed class)很相似，但要分清楚两者的区别：

  • 枚举：实例可数，没有子类。
  • 密封类：子类可数，有子类。
+ +
+
#enum class#sealed class
Kotlin - 内部类
Kotlin - 高阶函数与函数引用

+ ← + Kotlin - 高阶函数与函数引用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a59099/index.html b/pages/a59099/index.html new file mode 100644 index 000000000..7b0bf8db2 --- /dev/null +++ b/pages/a59099/index.html @@ -0,0 +1,135 @@ + + + + + + Kotlin - 空类型和智能类型转换 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-16
目录

Kotlin - 空类型和智能类型转换

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 空类型

Kotlin 跟 Java 的最大不同应当就属空类型这点了，使用 Kotlin 开发，IDE 会智能的对可能为空的地方进行报错提示，开发者必须处理该错误，否则连编译都通过不了，从而降低程序 NullPointException 异常的出现几率，所以，一般情况下使用 Kotlin 开发很少见到 NPE 异常。

# 非空与可空类型

fun getName(): String {
+    return "lqr"
+}
+

这是一个很普通的函数声明，它指明了函数返回值是一个 String 类型，对此，Kotlin 会认为这是一个不可能返回 null 结果的函数，那如果我就是要返回 null 会怎样？

// IDE报错：Null can not be a value of a non-null type String
+fun getName(): String {
+    return null
+}
+

该 IDE 的报错提示说明了函数返回值类型 String 是一个不能为 null 的值，即非空类型。如果需要函数可以返回 null 的话，需要对函数返回值类型做一点小修改，使其可以用空，这仅仅只需要在返回值类型后面追加 ? 即可：

fun getName(): String? {
+    return null
+}
+

综上，Kotlin 的类型声明分为两类（包括但不限于函数返回值类型），分别是：

  • 非空类型：单纯声明的类就是非空类型，如：String。
  • 可空类型：通过在类后面放置 ? 来声明，如：String?。

# 可空类型操作符

Kotlin 为保证代码空安全，提供了几种处理方式，本节主要陈述其中的 3 种操作符。

了解更多 Kotlin 空安全知识，请访问：https://www.kotlincn.net/docs/reference/null-safety.html (opens new window)

# 安全调用操作符（?.)

以获取字符串长度为例，非空类型变量直接通过 .length 即可：

val name: String = "lqr"
+println(name.length)
+

而可空类型变量，不仅需要在类型声明时使用 ? ，在调用可空类型对象的成员变量 length 时也需要使用 ?. 进行处理：

val name: String? = null
+println(name?.length) // 输出：null
+

因为 name 的值为 null，所以 .length 并不会被执行，因此这代码相当于 println(null)，虽然结果是 null，但程序并不会崩溃。

安全调用操作符（?.)：如果接收者非空，就调用一个方法或访问一个属性，否则不执行。

# Elvis 运算符（?:)

日常开发中，我们经常习惯于用一行代码同时处理变量非空或为空的情况，在 Kotlin 中，借助 if-else 代码可以这么写：

println(if (getName() != null) getName() else "Default Name")
+

Java 有三元运算符，而 Kotlin 没有，所以这里只能用 if-else。

Kotlin 还提供了 Elvis 运算符（?:)，可以对 if-else 进行简化：

println(getName() ?: "Default Name")
+

Elvis 运算符（?:)：如果 ?: 左侧表达式非空，elvis 操作符就返回其左侧表达式，否则返回右侧表达式。 请注意，当且仅当左侧为空时，才会对右侧表达式求值。

# 非空断言运算符（!!)

如果你非常非常确定变量的值绝对不可能为 null，那么你可以在对象调用时使用 !! 对其进行转换成非空类型：

val value: String? = "Hello LQR"
+println(value!!.length)
+

非空断言运算符（!!)：将任何值转换为非空类型，若该值为空则抛出异常。

# 智能类型转换

类型转换在开发中很常见，特别是在多态的应用情景里，会使用父类变量接收子类对象，并且可能会需要强转成具体的子类类型以使用特定的子类功能。

open class Parent {}
+
+class Child : Parent() {
+    fun getName(): String {
+        return "lqr"
+    }
+}
+
+fun main(args: Array<String>) {
+    val man: Parent = Child()
+    println((man as Child).getName())
+}
+

Kotlin 里，强转需要使用 as　关键字来处理。

当然了，这里的代码处理的很不好，通常在转换前会先判断对象的具体类型后再做强转，以免出现类型转换异常，因此，代码可以修改为：

val man: Parent = Child()
+if (man is Child) {
+    println(man.getName())
+}
+

Kotlin 中使用 is 关键字来判断变量类型，if 代码块中，man 变量已经被识别为 Child 类型了，因此不再需要显式强转，这就是 Kotlin 的智能类型转换，反观 Java 就显的有些笨笨的了：

Parent man = new Child();
+if (man instanceof Child) {
+    System.out.println(((Child) man).getName());
+}
+

回过头再来看看 as 关键字，Kotlin 代码中使用 as 进行对象的类型强转，如果我们不先进行类型判断，就直接强制变量类型，一旦被强转的对象类型有误，就必定会抛出ClassCastException：

// Exception in thread "main" java.lang.ClassCastException: com.charylin.kotlinlearn.Parent cannot be cast to com.charylin.kotlinlearn.Child
+val parent: Parent = Parent()
+val child: Child = parent as Child
+print(child)
+

还好，Kotlin 的智能类型转换功能为 "直接强转党" 提供了一条出路，那就是使用 as?，同时如果变量有显式指定类型的话，需要将其改为可空类型，或者干脆把变量类型声明去掉：

val parent: Parent = Parent()
+val child: Child? = parent as? Child
+// val child = parent as? Child　// 这种写法也是OK的
+print(child)　// 输出：null
+

as? 相比 as 要智能一些，当强制类型有误会时，结果会为 null。

+ +
+
#Kotlin#空类型#类型转换
Kotlin - 类与构造器
Kotlin - 区间与数组

+ ← + Kotlin - 区间与数组→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a5eb80/index.html b/pages/a5eb80/index.html new file mode 100644 index 000000000..81677ee89 --- /dev/null +++ b/pages/a5eb80/index.html @@ -0,0 +1,287 @@ + + + + + + 热修复与插件化基础 - Java与Android的类加载器 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-05-18
目录

热修复与插件化基础 - Java与Android的类加载器

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、java中的ClassLoader

# 1、类加载器

# 2、加载流程

  • Loading：类的信息从文件中获取并载入到JVM的内存中。
  • Verifying：检查读入的结构是否符合JVM规范的描述。
  • Preparing：分配一个结构用来存储类信息。
  • Resolving：把类的常量池中的所有符号引用变成直接引用。
  • Initializing：执行静态初始化程序，把静态变量初始化成指定的值。

# 二、Android中的ClassLoader

# 1、类加载器

Android中最主要的类加载器有如下4个：

一个app一定会用到BootClassLoader、PathClassLoader这2个类加载器，可通过如下代码进行验证：

@Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        ...
+
+        ClassLoader classLoader = getClassLoader();
+        if (classLoader != null) {
+            Log.e("lqr", "classLoader = " + classLoader);
+            while (classLoader.getParent() != null) {
+                classLoader = classLoader.getParent();
+                Log.e("lqr", "classLoader = " + classLoader);
+            }
+        }
+    }
+

日志输出结果如下：

上面代码中可以通过上下文拿到当前类的类加载器（PathClassLoader）,然后通过getParent()得到父类加载器（BootClassLoader），这是由于Android中的类加载器使用的是双亲委派模型。

# 2、特点及作用

双亲委派模型：

在加载一个字节码文件时，会询问当前的classLoader是否已经加载过此字节码文件。如果加载过，则直接返回，不再重复加载。如果没有加载过，则会询问它的Parent是否已经加载过此字节码文件，同样的，如果已经加载过，就直接返回parent加载过的字节码文件，而如果整个继承线路上的classLoader都没有加载过，才由child类加载器（即，当前的子classLoader）执行类的加载工作。

# 1）特点：

显然，如果一个类被classLoader继承线路上的任意一个加载过，那么在以后整个系统的生命周期中，这个类都不会再被加载，大大提高了类的加载效率。

# 2）作用：

  1. 类加载的共享功能

一些Framework层级的类一旦被顶层classLoader加载过，会缓存到内存中，以后在任何地方用到，都不会去重新加载。

  1. 类加载的隔离功能

共同继承线程上的classLoader加载的类，肯定不是同一个类，这样可以避免某些开发者自己去写一些代码冒充核心类库，来访问核心类库中可见的成员变量。如java.lang.String在应用程序启动前就已经被系统加载好了，如果在一个应用中能够简单的用自定义的String类把系统中的String类替换掉的话，会有严重的安全问题。

验证多个类是同一个类的成立条件：

  • 相同的className
  • 相同的packageName
  • 被相同的classLoader加载

# 3、ClassLoader源码

通过阅读ClassLoader的源码来验证双亲委派模型。

# 1）loadClass()

找到ClassLoader这个类中的loadClass()方法，它调用的是另一个2个参数的重载loadClass()方法。

public Class<?> loadClass(String name) throws ClassNotFoundException {
+    return loadClass(name, false);
+}
+

找到最终这个真正的loadClass()方法，下面便是该方法的源码：

protected Class<?> loadClass(String name, boolean resolve)
+    throws ClassNotFoundException
+{
+    // First, check if the class has already been loaded
+    Class<?> c = findLoadedClass(name);
+    if (c == null) {
+        try {
+            if (parent != null) {
+                c = parent.loadClass(name, false);
+            } else {
+                c = findBootstrapClassOrNull(name);
+            }
+        } catch (ClassNotFoundException e) {
+            // ClassNotFoundException thrown if class not found
+            // from the non-null parent class loader
+        }
+
+        if (c == null) {
+            // If still not found, then invoke findClass in order
+            // to find the class.
+            c = findClass(name);
+        }
+    }
+    return c;
+}
+

可以看到，如前面所说，加载一个类时，会有如下3步：

  1. 检查当前的classLoader是否已经加载琮这个class，有则直接返回，没有则进行第2步。
  2. 调用父classLoader的loadClass()方法，检查父classLoader是否有加载过这个class，有则直接返回，没有就继续检查上上个父classLoader，直到顶层classLoader。
  3. 如果所有的父classLoader都没有加载过这个class，则最终由当前classLoader调用findClass()方法，去dex文件中找出并加载这个class。

以上就是双亲委派模型的核心。在loadClass()中，调用了一个很重要的方法，那就是findClass()，去查找要加载的类。

# 2）findClass()

在ClassLoader中，findClass()是空实现，这说明具体的方法会在子类中去重写实现。

protected Class<?> findClass(String name) throws ClassNotFoundException {
+    throw new ClassNotFoundException(name);
+}
+

于是，找到其子类BaseDexClassLoader，发现，AS实际上看不到系统级源码。

这种情况，在本人之前的《热修复——深入浅出原理与实现》 (opens new window)文章中也有所提及，可以借助第三方源码网站上查看，如：

PathClassLoader和DexClassLoader是BaseDexClassLoader的子类，源码很少，就先查阅这2个类，再去研读BaseDexClassLoader。

# 4、BaseDexClassLoader源码

# 1）DexClassLoader

/**
+* A class loader that loads classes from {@code .jar} and {@code .apk} files
+* containing a {@code classes.dex} entry. This can be used to execute code not
+* installed as part of an application.
+* ...
+*/
+public class DexClassLoader extends BaseDexClassLoader {
+    public DexClassLoader(String dexPath, String optimizedDirectory,
+        String libraryPath, ClassLoader parent) {
+    super(dexPath, new File(optimizedDirectory), libraryPath, parent);
+    }
+}
+

DexClassLoader的构造函数：

  • dexPath：dex文件路径
  • optimizedDirectory：dex文件解压路径（一般是app的data目录）
  • libraryPath：加载dex文件时需要用到的库的路径
  • parent：父类加载器

再回过头来看DexClassLoader类上的注释，大概翻译就是说，DexClassLoader可以加载jar包和apk包内dex文件中的类，可以被用来执行非安装过的app中的代码。

这句注释其实是很重要的，它就是腾讯Tinker这一类热修复解决方案的核心。一句话：可以加载任意路径下的dex文件。

# 2）PathClassLoader

/**
+* Provides a simple {@link ClassLoader} implementation that operates on a list
+* of files and directories in the local file system, but does not attempt to
+* load classes from the network. Android uses this class for its system class
+* loader and for its application class loader(s).
+*/
+public class PathClassLoader extends BaseDexClassLoader {
+    public PathClassLoader(String dexPath, ClassLoader parent) {
+        super(dexPath, null, null, parent);
+    }
+    public PathClassLoader(String dexPath, String libraryPath,
+            ClassLoader parent) {
+        super(dexPath, null, libraryPath, parent);
+    }
+}
+

PathClassLoader的构造函数：

  • dexPath：dex文件路径
  • libraryPath：加载dex文件时需要用到的库的路径
  • parent：父类加载器

相比DexClassLoader的构造函数，PathClassLoader的构造函数少了一个参数libraryPath，这也就导致了PathClassLoader只能加载已安装应用内dex中的class，从类上的说明中也可以了解到，只能加载本地应用中的类，不能加载网络上的类。

一句话，PathClassLoader只能用于加载已安装应用的dex文件。

# 3）BaseDexClassLoader

看完DexClassLoader和PathClassLoader，发现它们根本没有对findClass()这个方法进行重写，说明它们的findClass()方法肯定在其父类BaseDexClassLoader中进行了统一实现处理。

public class BaseDexClassLoader extends ClassLoader {
+    private final DexPathList pathList;
+    
+    public BaseDexClassLoader(String dexPath, File optimizedDirectory,String libraryPath, ClassLoader parent) {
+        super(parent);
+        this.pathList = new DexPathList(this, dexPath, libraryPath, optimizedDirectory);
+    }
+    
+    @Override
+    protected Class<?> findClass(String name) throws ClassNotFoundException {
+        List<Throwable> suppressedExceptions = new ArrayList<Throwable>();
+        Class c = pathList.findClass(name, suppressedExceptions);
+        if (c == null) {
+            ClassNotFoundException cnfe = new ClassNotFoundException("Didn't find class \"" + name + "\" on path: " + pathList);
+            for (Throwable t : suppressedExceptions) {
+                cnfe.addSuppressed(t);
+            }
+            throw cnfe;
+        }
+        return c;
+    }
+}
+...
+

可以发现，实际上BaseDexClassLoader并没有实现查找类的具体逻辑，它只是一个中转，调用的是DexPathList的findClass()方法，而这个DexPathList对象是在BaseDexClassLoader构造函数中进行实例化，并保存了几个BaseDexClassLoader会用到的属性，注意，DexPathList保存的optimizedDirectory可能为空，到时走的是PathClassLoader的逻辑。所以，下面就来看DexPathList：

# 4）DexPathList

# a.构造函数
final class DexPathList {
+    private static final String DEX_SUFFIX = ".dex";
+    
+    private final ClassLoader definingContext;
+
+    /**
+     * List of dex/resource (class path) elements.
+     * Should be called pathElements, but the Facebook app uses reflection
+     * to modify 'dexElements' (http://b/7726934).
+     */
+    private final Element[] dexElements;
+
+    public DexPathList(ClassLoader definingContext, String dexPath,
+            String libraryPath, File optimizedDirectory) {
+        this.definingContext = definingContext;
+        this.dexElements = makeDexElements(splitDexPath(dexPath), optimizedDirectory,
+                                           suppressedExceptions);
+    }
+
  • definingContext：就是在前面传入的BaseDexClassLoader（app运行后，这个definingContext可能是PathClassLoader或DexClassLoader）
  • dexElements：这个就是 dex文件 或 资源文件 组成的元素数据了，它是通过makeDexElements()方法创建出来的，

自然下面就得先了解下这个Element和makeDexElements()方法。

# b.Element
static class Element {
+    private final File file;
+    private final boolean isDirectory;
+    private final File zip;
+    private final DexFile dexFile;
+    private ZipFile zipFile;
+    private boolean initialized;
+    
+    public Element(File file, boolean isDirectory, File zip, DexFile dexFile) {
+        this.file = file;
+        this.isDirectory = isDirectory;
+        this.zip = zip;
+        this.dexFile = dexFile;
+    }
+    ...
+}
+

Element是PathList的静态内部类，其中，DexFile dexFile这个属性是最关键的。接下来是makeDexElements()方法：

private static Element[] makeDexElements(ArrayList<File> files, File optimizedDirectory,
+                                         ArrayList<IOException> suppressedExceptions) {
+    ArrayList<Element> elements = new ArrayList<Element>();
+    /*
+     * Open all files and load the (direct or contained) dex files
+     * up front.
+     */
+    for (File file : files) {
+        File zip = null;
+        DexFile dex = null;
+        String name = file.getName();
+        if (file.isDirectory()) {
+            // We support directories for looking up resources.
+            // This is only useful for running libcore tests.
+            elements.add(new Element(file, true, null, null));
+        } else if (file.isFile()){
+            if (name.endsWith(DEX_SUFFIX)) {
+                // Raw dex file (not inside a zip/jar).
+                try {
+                    dex = loadDexFile(file, optimizedDirectory);
+                } catch (IOException ex) {
+                    System.logE("Unable to load dex file: " + file, ex);
+                }
+            } else {
+                zip = file;
+                dex = loadDexFile(file, optimizedDirectory);
+            }
+        } else {
+            System.logW("ClassLoader referenced unknown path: " + file);
+        }
+        if ((zip != null) || (dex != null)) {
+            elements.add(new Element(file, false, zip, dex));
+        }
+    }
+    return elements.toArray(new Element[elements.size()]);
+}
+

它对files集合进行遍历（这个files集合就是dexPath下所有的文件及目录），来看该方法对文件是怎么处理的：它不管是dex文件，或是压缩包文件，都会调用到loadDexFile()方法：

private static DexFile loadDexFile(File file, File optimizedDirectory)
+        throws IOException {
+    if (optimizedDirectory == null) {
+        return new DexFile(file);
+    } else {
+        String optimizedPath = optimizedPathFor(file, optimizedDirectory);
+        return DexFile.loadDex(file.getPath(), optimizedPath, 0);
+    }
+}
+

所以，如果optimizedDirectory为null，说明这是PathClassLoader的处理方式，直接将file封装成DexFile对象返回；如果optimizedDirectory不为null，说明这是DexClassLoader的处理方式，若file是dex文件就封装成DexFile对象返回，若file是压缩包，会先进行解压，将其中的dex文件封装成DexFile对象返回。反正，不管是哪种方式，就终都是得到dex文件对象，并且，在makeDexElements()方法的最后，添加进Element数组中。

# c.findClass()
public Class findClass(String name, List<Throwable> suppressed) {
+    for (Element element : dexElements) {
+        DexFile dex = element.dexFile;
+        if (dex != null) {
+            Class clazz = dex.loadClassBinaryName(name, definingContext, suppressed);
+            if (clazz != null) {
+                return clazz;
+            }
+        }
+    }
+    return null;
+}
+

终于到最后一个findClass()方法了，其实它就是遍历dex文件数组（dexElements），得到一个个的dex文件对象，调用其loadClassBinaryName()方法通用类名找到类，快接近真相了，下面就看看DexFile中到底是怎么通过类名找到类的，坚持～

# 5）DexFile

public Class loadClassBinaryName(String name, ClassLoader loader, List<Throwable> suppressed) {
+    return defineClass(name, loader, mCookie, suppressed);
+}
+
+private static Class defineClass(String name, ClassLoader loader, long cookie,
+                                 List<Throwable> suppressed) {
+    Class result = null;
+    result = defineClassNative(name, loader, cookie);
+    return result;
+}
+
+private static native Class defineClassNative(String name, ClassLoader loader, long cookie) throws ClassNotFoundException, NoClassDefFoundError;
+

在DexFile这个类中，loadClassBinaryName()调用了defineClass()，最终调用的是defineClassNative()这个native方法，也就是说，类的加载最终是用c/c++的方式来进行处理的，因为是native方法，这里就没办法继续往下跟了，因此，其真实处理逻辑我们就不得而知了。

但是，联想到前面的《热修复与插件化基础——dex与class》 (opens new window)文章中提到的dex头文件中包含了该dex中所有class的信息，所以，我们不妨可以大胆猜想一下，其实defineClassNative()这个native方法应该就是通过读取dex头文件的方式找到并定义了class。

# 4、类加载流程

所谓一图胜千言，通过上面一系列的方法跟踪，及流程梳理，最终，得到如下这张图：

+ +
+
#热修复#ClassLoader
热修复与插件化基础 - Java与Android虚拟机
热修复 - 深入浅出原理与实现

+ ← + 热修复 - 深入浅出原理与实现→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a8e073/index.html b/pages/a8e073/index.html new file mode 100644 index 000000000..4ec1e12ad --- /dev/null +++ b/pages/a8e073/index.html @@ -0,0 +1,184 @@ + + + + + + Kotlin - 类成员 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-18
目录

Kotlin - 类成员

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 类成员

类成员包括 成员方法 和 成员属性：

class Artist(var name: String) {　// 成员属性 name
+
+    var age = 18 // 成员属性 age
+
+    fun dance(danceName: String) { // 成员方法 dance
+        println("$name 正在跳 $danceName")
+    }
+
+    fun sing(singName: String) { // 成员方法 sing
+        println("$name 正在唱 $singName")
+    }
+}
+

类中的 dance 和 sing 是成员方法，age 是成员属性，使用 var 或 val 声明的构造器参数 name 也会成为类成员属性。

# 函数与方法

函数与方法形式一致，区别是方法在类中，函数则不是，因此，方法需要通过类名或对象来调用，而函数则是直接使用。

函数强调功能本身，不考虑从属。

// 函数
+fun sayHello() {
+    println("hello")
+}
+
+fun main(args: Array<String>) {
+    val artist = Artist("lqr")
+    artist.dance("恰恰")　// 调用对象 artist 的 dance 方法
+    artist.sing("龙卷风")　// 调用对象 artist 的 sing 方法
+    sayHello() // 调用函数
+}
+

# 属性访问控制

先来看个访问对象属性的例子：

class AClass {
+    var b = 0
+}
+fun main() {
+    val a = AClass()
+    a.b = 666
+    println(a.b) // 666
+}
+

Kotlin 中，对象访问属性实质上都是使用 getter/setter ，而并非直接访问属性对其赋值。这可以通过重写属性的 getter/setter 来验证：

class AClass {
+    var b = 0
+        get() {
+            println("some one tries to get b.")
+            return field
+        }
+        set(value) {
+            println("some one tries to set b.")
+            field = value
+        }
+}
+
+fun main() {
+    val a = AClass()
+    a.b = 666 // some one tries to set b.
+    println(a.b) // some one tries to get b.
+                 // 666
+}
+

getter/setter 中使用属性时，需要用 field 来指代，避免出现代码歧义。

注意：val 常量没有 setter，因为 val 是不可变的！

默认属性的 getter/setter 的访问权限是 public，可以对其重写修改：

class AClass {
+    var b = 0
+        protected get // IDE报错：Getter visibility must be the same as property visibility
+        protected set
+}
+

如果修改了 getter 的访问权限，就需要对属性声明做同样的修改，于是，正确的写法是：

class AClass {
+    protected var b = 0
+        protected get
+        protected set
+}
+

# 属性初始化

Kotlin 中一般成员属性在声明时就需要初始化：

class AClass {
+    var b = 0
+    var c: String? = null
+    // var c: String? // IDE报错：Property must be initialized or be abstract
+}
+

Kotlin 也支持属性延迟初始化，但 var 和 val 的延迟初始化写法完全不同，var 变量使用 lateinit：

class X
+class AClass {
+    lateinit var c: String
+    lateinit var d: X
+    // lateinit val e:X // IDE报错：'lateinit' modifier is allowed only on mutable properties
+}
+
+fun main(args: Array<String>) {
+    val a = AClass()
+
+    a.d = X()
+    println(a.d) // com.charylin.kotlinlearn.X@214c265e
+
+    println(a.c) // lateinit property c has not been initialized
+}
+
  • lateinit 只能与 var 搭配，不能与 val 一起使用。
  • lateinit var 变量在使用前一定要确保已经初始化，否则报错：lateinit property c has not been initialized。

说完 lateinit var ，再来看看 val 常量的延迟初始化，使用的是 by lazy，作用是 "使用时加载"：

class X
+class AClass {
+    // val e: X by lazy {} // IDE报错：Type mismatch. Required:X Found: Unit
+    val e: X by lazy {
+        println("init X")
+        X()
+    }
+}
+
+fun main(args: Array<String>) {
+    val a = AClass()
+    println("init a") // init a
+
+    println(a.e) // init X
+                 // com.charylin.kotlinlearn.X@3d075dc0
+}
+

关于属性初始化的几点建议：

  • 属性的初始化尽量在构造方法中完成
  • 无法在构造方法中初始化，尝试降级为局部变量
  • var 用 lateinit 延迟初始化，val 用 lazy
  • 可空类型慎用 null 直接初始化
+ +
+
#lateinit#by lazy#getter#setter
Kotlin - 函数与Lambda表达式
Kotlin - 运算符与中缀表达式

+ ← + Kotlin - 运算符与中缀表达式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a90e8e/index.html b/pages/a90e8e/index.html new file mode 100644 index 000000000..9d813b200 --- /dev/null +++ b/pages/a90e8e/index.html @@ -0,0 +1,210 @@ + + + + + + 解决ImageView图片挤压问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-09-05
目录

解决ImageView图片挤压问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、需求

在屏幕边缘显示一张图片，超出屏幕宽度时，只显示图片的左边部分，并且不被挤压，其余部分剪切。但我在实际开发中，踩了个坑，这里做个记录，下面通过图片直观了解一下情况：

理想 现实

目前可以确定，这种情况会出现在使用RelativeLayout作为ImageView父控件的情况下，其他类型的ViewGroup效果如何，暂不确定。

# 二、分析

这部分是我对问题研究的记录，心急的朋友可以直接跳到第三部分，看源码实现。

# 1、使用 HorizontalScrollView

在网上也百度到了一个类似的问题： +Android ImageView 超出屏幕边界 图片会被挤压 (opens new window)

这位朋友遇到的问题跟我是差不多的，当子控件ImageView超过父控件尺寸时，ImageView显示的图片就会挤压，热心的网友们给他支了一个招：把ImageVIew放在HorizontalScrollView控件里面。但是，我遇到的需求是不要滚动效果（不要跟我说可以屏蔽ScrollView滚动。。。），就单单显示图片的部分区域而已，使用HorizontalScrollView控件明显不适用，只能另寻出路了。

# 2、使用 LinearLayout

实践证明，使用LinearLayout作为ImageView的父控件，当ImageView超出父控件尺寸时，不会挤压图片。

这种方式是一种不错的解决方案，但是，局限性太大，大多数情况下，会希望使用RelativeLayout作为控件的父控件，所以，这种情况也不适用我目前的情况。

# 3、使用ImageView的ScaleType

因为前面的方案都要求将ImageView放置到特定父控件中，局限性太大，严重的，可能会造成UI多次绘制，降低性能，造成画面卡顿，所以，感觉还是从ImageView本身下手比较合理。

ImageView的ScaleType有如下几种：

源自ImageView (一) ——从源码的角度分析ScaleType (缩放模式) (opens new window)

缩放模式 裁剪 按比例 放大 缩小 描述
MATIRX 未知 未知 未知 未知 通过设定setImageMatrix函数相应的矩阵，来完成。
FIT_XY 否 否 是 是 直接将图片铺满整个view
CENTER 是 是 否 否 1)如果图片较小，直接居中全部显示2) 如果图片较大，裁剪后居中显示
CENTER_CROP 是 是 是 是 按比例缩放，按照缩放比例大的进行缩放，然后居中显示（除非图片和view的形状一样，否则一定存在裁剪，所以有的描述为图片的长宽≥View的长宽）
CENTER_INSIDE 否 是 否 是 1) 如果图片较小，直接放入view，不进行放大处理，居中显示2) 将图片按比例进行缩放，使得图片完全展示，并且长或者宽等于view的长和宽（所以有的描述为图片的长宽≤View的长宽）
FIT_START 否 是 是 是 对图片的处理和FIT_CENTER，区别为：1)view的横向有空，居左边2)view的纵向有空，居上边
FIT_CENTER（默认） 否 是 是 是 将图片按比例进行缩放，使得图片完全展示，并且长或者宽等于view的长和宽（所以有的描述为图片的长宽≤View的长宽）,最后居中显示
FIT_END 否 是 是 是 对图片的处理和FIT_CENTER，区别为：1) view的横向有空，居右边2) view的纵向有空，居下边

通过上表描述，可以确定只有CENTER_CROP的效果比较符合，但还是有点区别，CENTER_CROP只会显示中间区域部分，而我要的是显示左边区域，所以，下面就进行ImageView源码分析。

在ImageView中搜索CENTER_CROP，定位到核心逻辑就在configureBounds()方法中，代码如下：

以下是 博客：ImageView的ScaleType原理及效果分析 (opens new window) 中对CENTER_CROP的解释。

该模式按比例扩大图片的尺寸并居中显示，使得图片长(宽)等于或大于View的长(宽)。

如果dwidth/dheight>vwidth/vheight（图片的宽高比大于ImageView的宽高比），即vheight/dheight>vwidth/dwidth，也就是说ImageView和图片高度比小于ImageView和图片的宽度比，这时候取vheight/dheight的比例进行图片缩放，这样就能保证图片宽度在进行同等比例缩放的时候，图片宽度大于或等于ImageView的宽度，因为(vheight/dheight)* dwidth>vwidth。

同理，如果vwidth/dwidth>vheight/dheight时，取vwidth/dwidth作为图片的缩放比例，可以保证缩放完成后图片宽度等于ImageView的宽度，图片的高度大于或等于ImageView的高度，因为(vwidth/dwidth)*dheight>vheight。图片在缩放之后再进行CENTER操作即可。

vwidth/dwidth>vheight/dheight

上图所示，vwidth/dwidth>vheight/dheight，图片先按照vwidth/dwidth进行缩放，缩放后的图片高度>=vheight，然后再进行向上移位。

vheight/dheight>vwidth/dwidth

上图所示，vheight/dheight>vwidth/dwidth，图片先按照vheight/dheight进行缩放，缩放后的图片宽度>=vwidth，然后再进行想左移位。

回到主线，根据上面的分析，明白了CENTER_CROP的工作原理（可能也不太明白，但没关系），我们只需要在CENTER_CROP的基础上控制dx或dy即可，同时，在分析完整个configureBounds()方法之后，可以确定，不管是哪种ScaleType，其原理都是操控图片矩阵mDrawMatrix来实现的，这时候ScaleType中的MATRIX就可以派上用场了，下面是我对MATRIX做的一些封装，你也可以根据自己的项目需求，编写自己的处理逻辑。

# 三、代码

用了在布局中使用方便，我将它做成一个自定义控件，命名为ImageViewExt。

# 1、自定义属性attrs_image_view_ext

<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <declare-styleable name="ImageViewExt">
+        <attr name="ive_scale_type_matrix_ext" format="enum">
+            <enum name="left_crop" value="1"/>
+            <enum name="right_crop" value="2"/>
+            <enum name="center_crop" value="3"/>
+        </attr>
+    </declare-styleable>
+</resources>
+

# 1、自定义控件ImageViewExt

/**
+ * @创建者 CSDN_LQR
+ * @时间 2018/9/4
+ * @描述 ImageView扩展控件
+ * <p>
+ * 1、对 ScaleType.MATRIX 进行封装拓展
+ */
+public class ImageViewExt extends ImageView {
+
+    public static final int SCALE_TYPE_MATRIX_LEFT_CROP   = 1; // 等比例缩放，当图像超出控件尺寸时，保留左边，其余部分剪切掉。
+    public static final int SCALE_TYPE_MATRIX_RIGHT_CROP  = 2; // 等比例缩放，当图像超出控件尺寸时，保留右边，其余部分剪切掉。
+    public static final int SCALE_TYPE_MATRIX_CENTER_CROP = 3; // 等比例缩放，当图像超出控件尺寸时，保留中间，其余部分剪切掉。
+
+    @IntDef({SCALE_TYPE_MATRIX_LEFT_CROP, SCALE_TYPE_MATRIX_RIGHT_CROP, SCALE_TYPE_MATRIX_CENTER_CROP})
+    @Retention(RetentionPolicy.RUNTIME)
+    public @interface ScaleTypeMatrixExt {
+    }
+
+    private int mScaleTypeMatrixExt;
+
+    public ImageViewExt(Context context) {
+        this(context, null);
+    }
+
+    public ImageViewExt(Context context, @Nullable AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public ImageViewExt(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init(context, attrs);
+    }
+
+    protected void init(Context context, @Nullable AttributeSet attrs) {
+        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageViewExt);
+        mScaleTypeMatrixExt = typedArray.getInt(R.styleable.ImageViewExt_ive_scale_type_matrix_ext, -1);
+        typedArray.recycle();
+    }
+
+    @Override
+    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+        super.onSizeChanged(w, h, oldw, oldh);
+        handScaleTypeMatrixExt();
+    }
+
+    @Override
+    public void requestLayout() {
+        super.requestLayout();
+        handScaleTypeMatrixExt();
+    }
+
+    private void handScaleTypeMatrixExt() {
+        if (this.getScaleType() == ScaleType.MATRIX && mScaleTypeMatrixExt != -1) {
+            // 图片实际尺寸
+            final int dwidth = getDrawable().getIntrinsicWidth();
+            final int dheight = getDrawable().getIntrinsicHeight();
+            // ImageView图片显示尺寸
+            final int vwidth = getWidth() - getPaddingLeft() - getPaddingRight();
+            final int vheight = getHeight() - getPaddingTop() - getPaddingBottom();
+            float scale;
+            float dx = 0, dy = 0;
+            if (dwidth * vheight > vwidth * dheight) {      // 图片宽高比 > 控件宽高比
+                scale = (float) vheight / (float) dheight;
+                switch (mScaleTypeMatrixExt) {
+                    case SCALE_TYPE_MATRIX_LEFT_CROP:
+                        dx = 0;                             // 保留左边
+                        break;
+                    case SCALE_TYPE_MATRIX_RIGHT_CROP:
+                        dx = (vwidth - dwidth * scale);     // 保留右边
+                        break;
+                    case SCALE_TYPE_MATRIX_CENTER_CROP:
+                        dx = (vwidth - dwidth * scale) * 0.5f; // 保留中间（效果与 CENTER_CROP 一样）
+                        break;
+                    default:
+                        break;
+                }
+            } else {
+                scale = (float) vwidth / (float) dwidth;
+                // dy = (vheight - dheight * scale) * 0.5f; // 根据实际情况编写，默认为0，保留上边
+            }
+            Matrix matrix = new Matrix();
+            matrix.setScale(scale, scale);
+            matrix.postTranslate(Math.round(dx), Math.round(dy));
+            this.setImageMatrix(matrix);
+        }
+    }
+
+    public void setScaleTypeMatrixExt(@ScaleTypeMatrixExt int scaleTypeMatrixExt) {
+        this.mScaleTypeMatrixExt = scaleTypeMatrixExt;
+        requestLayout();
+    }
+}
+

# 四、使用

需要使用matrix作为ImageView的ScaleType，再指定ive_scale_type_matrix_ext属性即可，也可以在代码中调用setScaleType()、setScaleTypeMatrixExt()来指定。

<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="382.5dp"
+    android:background="@android:color/white"
+    android:orientation="horizontal">
+
+    <com.lqr.widget.ImageViewExt
+        android:layout_width="275dp"
+        android:layout_height="135.5dp"
+        android:layout_marginLeft="450dp"
+        android:scaleType="matrix"
+        android:src="@mipmap/main_recommand_1_4_sample3"
+        app:ive_scale_type_matrix_ext="left_crop"/>
+
+</LinearLayout>
+

效果如下：

+ +
+
#自定义View#ImageView
使用PorterDuff解决clipPath无法抗锯齿问题
安卓第三方登录之微信登录（图文详解）

+ ← + 安卓第三方登录之微信登录（图文详解）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/a9e62e/index.html b/pages/a9e62e/index.html new file mode 100644 index 000000000..8a55345c9 --- /dev/null +++ b/pages/a9e62e/index.html @@ -0,0 +1,148 @@ + + + + + + Flutter - 打印好用的Debug日志 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-06-26
目录

Flutter - 打印好用的Debug日志

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、思考

做 iOS 开发时这个功能很常用， 在 OC 和 Swift 中都可以很轻松实现，因为系统本来就提供了用于日志输出的预处理宏，只要我们拿来拼接就可以了，但是在 Dart 中并不提供这些，那有什么办法实现它呢？

我们回想在开发过程中，是不是发现只要一不小心抛异常，就可以看到类似如下的打印内容，而且还能清楚的知道异常是在哪个文件和哪一行的代码造成的。

所以如果我们可以在调用函数时拿到当前调用堆栈，就可以取到一系列想要的数据。

# 二、实践

在 dart:core 中提供了 堆栈跟踪(StackTrace)，可以通过 StackTrace.current 取到当前的堆栈信息，打印如下图所示，会发现这不好拿到我们想要的信息。

这里我用到了官方开发的一个包 stack_trace (opens new window)，它可以将堆栈信息变得更多人性化，并方便我们查看堆栈信息和获取想要的数据。

ps: stack_trace 在 Flutter 环境下直接导包即可使用，而在纯 Dart 下需要将其添加为依赖于pubspec.yaml中。

dependencies:
+  stack_trace: ^1.9.3
+

那下面我们来试试 stack_trace (opens new window) 的威力吧

import 'package:stack_trace/stack_trace.dart';
+
+// 将 StackTrace 对象转换成 Chain 对象
+// 当然，这里也可以直接用 Chain.current();
+final chain = Chain.forTrace(StackTrace.current);
+// 拿出其中一条信息
+final frames = chain.toTrace().frames;
+final frame = frames[1];
+// 打印
+print("所在文件：${frame.uri} 所在行 ${frame.line} 所在列 ${frame.column}");
+
+// 打印结果
+// flutter: 所在文件：package:flutterlog/main.dart 所在行 55 所在列 23
+

# 三、呈上代码

下面我做了一点封装，直接拿走即可使用，打印效果如下所示：

完整的代码和示例请到GitHub上【查看】 (opens new window)。

代码：

// log.dart
+
+enum FLogMode {
+  debug,    // 💚 DEBUG
+  warning,  // 💛 WARNING
+  info,     // 💙 INFO
+  error,    // ❤️ ERROR
+}
+
+void FLog(dynamic msg, { FLogMode mode = FLogMode.debug }) {
+  if (kReleaseMode) { // release模式不打印
+    return;
+  }
+  var chain = Chain.current(); // Chain.forTrace(StackTrace.current);
+  // 将 core 和 flutter 包的堆栈合起来（即相关数据只剩其中一条）
+  chain = chain.foldFrames((frame) => frame.isCore || frame.package == "flutter");
+  // 取出所有信息帧
+  final frames = chain.toTrace().frames;
+  // 找到当前函数的信息帧
+  final idx = frames.indexWhere((element) => element.member == "FLog");
+  if (idx == -1 || idx+1 >= frames.length) {
+    return;
+  }
+  // 调用当前函数的函数信息帧
+  final frame = frames[idx+1];
+
+  var modeStr = "";
+  switch(mode) {
+    case FLogMode.debug:
+      modeStr = "💚 DEBUG";
+      break;
+    case FLogMode.warning:
+      modeStr = "💛 WARNING";
+      break;
+    case FLogMode.info:
+      modeStr = "💙 INFO";
+      break;
+    case FLogMode.error:
+      modeStr = "❤️ ERROR";
+      break;
+  }
+
+  print("$modeStr ${frame.uri.toString().split("/").last}(${frame.line}) - $msg ");
+}
+
+ +
+
#Dart#Flutter
Dart - 抽象类的实例化
Flutter - 混合开发

+ ← + Flutter - 混合开发→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ab3077/index.html b/pages/ab3077/index.html new file mode 100644 index 000000000..2eafe0d9f --- /dev/null +++ b/pages/ab3077/index.html @@ -0,0 +1,228 @@ + + + + + + DesignPattern - 责任链模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-10-10
目录

DesignPattern - 责任链模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、责任链模式介绍

责任链模式（Chain of Responsibility Pattern）客户端发出一个请求，链上的对象都有机会来处理这一请求，而客户端不需要知道谁具体的处理对象，让多个对象都有机会处理请求，避免请求的发送者和接收者之间的耦合关系，将这个对象连成一条调用链，并沿着这条链传递该请求，直到有一个对象处理它才终止。

2 个核心行为：一是处理请求，二是将请求传递到下一节点

  • 核心组成

    • Handler 抽象处理者：定义一个处理请求的接口
    • ConcreteHandler 具体处理者：处理所负责的请求，可访问它的后续节点，如果可处理该请求就处理，否则就将该请求转发给它的后续节点

  • 应用场景

    • SprintBoot 里的拦截器、过滤器链
    • Okhttp 里的请求拦截器
    • 在请求处理者不明确的情况下向多个对象中的一个提交请求
    • 如果有多个对象可以处理同一个请求，但是具体由哪个对象处理是由运行时动态决定的，这种对象就可以使用职责链模式

  • 优点

    • 客户只需要将请求发送到责任链上即可，无须关心请求的处理细节和请求的传递，所以责任链将请求的发送者和请求的处理者降低了耦合度
    • 通过改变链内的调动它们的次序，允许动态地新增或者删除处理类，比较方便维护
    • 增强了系统的可扩展性，可以根据需要增加新的请求处理类，满足开闭原则
    • 每个类只需要处理自己该处理的工作，明确各类的责任范围，满足单一职责原则

  • 缺点

    • 处理都分散到了单独的职责对象中，每个对象功能单一，要把整个流程处理完，需要很多的职责对象，会产生大量的细粒度职责对象
    • 不能保证请求一定被接收，如果链路比较长，系统性能将受到一定影响，而且在进行代码调度时不太方便

# 二、责任链模式代码实现

以支付宝转账风控为例，根据转账额度不同，会触发的风控级别不一样，1 千以下直接转，1 千到 1 万需要手机号验证码，1 万以上需要刷脸验证。下面使用责任链模式来实现这 3 种风控处理：

创建账号请求类：

/**
+ * 转账请求
+ *
+ * @author GitLqr
+ */
+public class TransferRequest {
+
+	// 金额
+	private int money;
+
+	public TransferRequest(int money) {
+		super();
+		this.money = money;
+	}
+
+	public int getMoney() {
+		return money;
+	}
+
+	public void setMoney(int money) {
+		this.money = money;
+	}
+}
+

创建 抽象处理者：

说明：定义一个所有处理者必须实现的处理方法，还需要持有下个处理者的引用

/**
+ * 抽象处理者：风控抽象类
+ *
+ * @author GitLqr
+ */
+public abstract class AbstractRiskControlHandler {
+
+	// 当前风控处理器名称
+	protected String name;
+	// 下一级风控处理器
+	protected AbstractRiskControlHandler superior;
+
+	public AbstractRiskControlHandler(String name) {
+		super();
+		this.name = name;
+	}
+
+	/**
+	 * 处理转账请求
+	 */
+	public abstract void handleRequest(TransferRequest transferRequest);
+
+	public AbstractRiskControlHandler getSuperior() {
+		return superior;
+	}
+
+	public void setSuperior(AbstractRiskControlHandler superior) {
+		this.superior = superior;
+	}
+}
+

创建 具体处理者：

/**
+ * 具体处理者：初级风控处理器
+ *
+ * @author GitLqr
+ */
+public class FirstRiskControlHandler extends AbstractRiskControlHandler {
+
+	public FirstRiskControlHandler(String name) {
+		super(name);
+	}
+
+	@Override
+	public void handleRequest(TransferRequest transferRequest) {
+		if (transferRequest.getMoney() <= 1000) {
+			System.out.println("普通操作，输入支付密码即可");
+			System.out.println(name + "，转账金额：" + transferRequest.getMoney() + " 处理完成");
+		} else {
+			// 下个节点进行处理
+			if (superior != null) {
+				superior.handleRequest(transferRequest);
+			}
+		}
+	}
+}
+
+/**
+ * 具体处理者：中级风控处理器
+ *
+ * @author GitLqr
+ */
+public class SecondRiskControlHandler extends AbstractRiskControlHandler {
+
+	public SecondRiskControlHandler(String name) {
+		super(name);
+	}
+
+	@Override
+	public void handleRequest(TransferRequest transferRequest) {
+		if (transferRequest.getMoney() > 1000 && transferRequest.getMoney() <= 10000) {
+			System.out.println("稍大额操作，输入支付密码+短信验证码即可");
+			System.out.println(name + "，转账金额：" + transferRequest.getMoney() + " 处理完成");
+		} else {
+			// 下个节点进行处理
+			if (superior != null) {
+				superior.handleRequest(transferRequest);
+			}
+		}
+	}
+}
+
+/**
+ * 具体处理者：高级风控处理器
+ *
+ * @author GitLqr
+ */
+public class ThirdRiskControlHandler extends AbstractRiskControlHandler {
+
+	public ThirdRiskControlHandler(String name) {
+		super(name);
+	}
+
+	@Override
+	public void handleRequest(TransferRequest transferRequest) {
+		if (transferRequest.getMoney() > 10000) {
+			System.out.println("大额操作，输入支付密码+短信验证码+人脸识别");
+			System.out.println(name + "，转账金额：" + transferRequest.getMoney() + " 处理完成");
+		} else {
+			// 下个节点进行处理
+			if (superior != null) {
+				superior.handleRequest(transferRequest);
+			}
+		}
+	}
+}
+

使用：

public static void main(String[] args) {
+    AbstractRiskControlHandler firstControlHandler = new FirstRiskControlHandler("初级风控");
+    AbstractRiskControlHandler secondControlHandler = new SecondRiskControlHandler("中级风控");
+    AbstractRiskControlHandler thirdControlHandler = new ThirdRiskControlHandler("高级风控");
+
+    // 形成调用链
+    firstControlHandler.setSuperior(secondControlHandler);
+    secondControlHandler.setSuperior(thirdControlHandler);
+
+    TransferRequest request = new TransferRequest(1000); // 1600, 20000
+    firstControlHandler.handleRequest(request);
+}
+
+ +
+
#设计模式#责任链模式
DesignPattern - 观察者模式【行为型】
DesignPattern - 命令模式【行为型】

+ ← + DesignPattern - 命令模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ac13fc/index.html b/pages/ac13fc/index.html new file mode 100644 index 000000000..4ba1e90c0 --- /dev/null +++ b/pages/ac13fc/index.html @@ -0,0 +1,381 @@ + + + + + + AndroidNDK - makefile语法详解 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2020-02-12
目录

AndroidNDK - makefile语法详解

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、编译流程详解

编译流程

  • 编译：将高级语言编写的程序转换为二进制代码可执行性目标程序的过程
  • 四大过程：预处理、编译、汇编、链接

# 1、预处理

完成宏替换、文件引入，以及去除空行、注释等，为下一步的编译做准备；也就是对各种预处理命令进行处理，包括头文件的包含、宏定义的扩展、条件编译的选择等。

// test.c文件内容
+#include <stdio.h>
+int main(){
+	printf("hello world!\n");
+	return 0;
+}
+

对test.c文件进行预处理：

$ gcc -E test.c -o test.i
+
  • 选项-E：让gcc在预处理结束后停止编译，test.i文件为预处理后输出的文件。
  • 选项-o：指定输出文件。

此时，test.i 就是 test.c 预编译后的产物，体积会增大，此时test.i还是一个文本文件，可以用文本编译器打开查看。

# 2、编译

  • 将预处理后的代码编译成汇编代码。在这个阶段中，首先要检查代码的规范性、是否有语法错误等，以确定代码实际要做的工作，在检查无误后，再把代码翻译成汇编语言。
  • 编译程序执行时，先分析，后综合。分析，就是指词法分析、语法分析、语义分析和中间代码生成。综合，就是指代码优化和代码生成。
  • 大多数的编译程序直接产生机器语言的目标代码，形成可执行的目标文件，也有的是先产生汇编语言一级的符号代码文件，再调用汇编程序进行翻译和加工处理，最后产生可执行的机器语言目标文件。
extern int ftrylockfile (FILE *__stream) __attribute__ ((__nothrow__ , __leaf__)) ;
+
+extern void funlockfile (FILE *__stream) __attribute__ ((__nothrow__ , __leaf__));
+# 868 "/usr/include/stdio.h" 3 4
+
+# 2 "test.c" 2
+
+# 3 "test.c"
+int main(){
+ printf("hello world\n");
+ return 0;
+}
+

上面是预处理后test.i文件的部分内容，下面对test.i文件进行编译：

$ gcc -S test.i -o test.s
+
  • 选项-S：让gcc在编译结束后停止编译过程，"test.s"文件为编译后生成的汇编代码。

此时，test.s 就是 test.i 文件汇编后的产物，同样也可以用文本编译器打开查看。

# 3、汇编

汇编就是把编译阶段生成的".s"文件转成二进制目标代码，也就是机器代码（01序列）。

	.file	"test.c"
+	.text
+	.section	.rodata
+.LC0:
+	.string	"hello world"
+	.text
+	.globl	main
+	.type	main, @function
+main:
+.LFB0:
+	.cfi_startproc
+	pushq	%rbp
+	.cfi_def_cfa_offset 16
+	.cfi_offset 6, -16
+	movq	%rsp, %rbp
+	.cfi_def_cfa_register 6
+	leaq	.LC0(%rip), %rdi
+	call	puts@PLT
+	movl	$0, %eax
+	popq	%rbp
+	.cfi_def_cfa 7, 8
+	ret
+	.cfi_endproc
+.LFE0:
+	.size	main, .-main
+	.ident	"GCC: (Ubuntu 7.4.0-1ubuntu1~18.04.1) 7.4.0"
+	.section	.note.GNU-stack,"",@progbits
+

上面是编译后生成的test.s文件里的汇编代码，下面对test.s文件进行汇编：

$ gcc -c test.s -o test.o
+
  • 选项-c：让gcc在汇编结束后停止编译过程，"test.o"文件为汇编后生成的机器码目标文件。

# 4、链接

链接就是将多个目标文件以及所需的库文件链接生成可执行目标文件的过程。

下面对test.o进行链接：

$ gcc test.o -o test
+$ ./test
+hello world!
+
  • 选项-o：本质上是一个重命名选项。不使用-o选项时，默认生成的是a.out文件。这里生成的是可执行文件test。
  • ./test执行后输出hello world!

# 5、简化

一般情况下，我们会使用gcc命令，一步生成可执行文件，简化编译流程：

$ gcc -o test test.c
+$ ./test
+hello world!
+

# 二、 静态库与动态库原理

# 1、 静态库

# 1) 什么是静态库

  • 静态库实际就是一些目标文件（一般以.o结尾）的集合，静态库一般以.a结尾，只用于生成可执行文件阶段。
  • 在链接步骤中，链接器将从库文件取得所需代码，复制到生成的可执行文件中。这种库称为静态库。其特点是可执行文件中包含了库代码的一份完整拷贝，在编译过程中被载入程序中。缺点就是多次使用就会有多份冗余拷贝，并且对程序的更新、部署和发布会带来麻烦，如果静态库有更新，那么所有使用它的程序都需要重新编译、发布。

# 2) 生成静态库

  • 首先生成test.o目标文件。
  • 使用ar命令将test.o打包成libtest.a静态库。
# 生成目标文件
+$ gcc -c test.c -o test.o
+# 使用ar命令将目标文件打包成静态库
+$ ar  libtest.a test.o
+ar: creating libtest.a
+# 使用ar t libtest.a 查看静态库内容
+$ar t libtest.a
+test.o
+

选项rcs各自的含义：

  • 选项r：更新或增加新文件到静态库中。
  • 选项c：创建一个库，不管存在与否，都创建。
  • 选项s：创建文档索引，在创建较大的库时，能够加快编译速度。

# 2、 动态库

# 1）什么是动态库

  • 动态库在链接阶段没有被复制到程序中，而是在程序运行时由系统动态加载到内存中供程序调用。
  • 系统只需载入一次动态库，不同的程序可以得到内存中相同动态库的副本，因此节省了很多内存。

# 2）生成动态库

  • 首先生成test.o目标文件。
  • 使用-shared和-fPIC参数生成动态库。
# 首先生成目标文件
+$ gcc -c test.c -o test.o
+# 使用-fPIC和-shared生成动态库
+$ gcc -shared -fPIC -o libtest.so test.o
+

fPIC：全称是 Position Independent Code， 用于生成位置无关代码。

# 3、案例

编写一个工具方法（tool.h + tool.c文件），查找出数组的最大值：

// tool.h 文件
+int find_max(int arr[], int n);
+
+// tool.c 文件
+#include "tool.h"
+int find_max(int arr[], int n){
+	int max = arr[0];
+	int i;
+	for(i = 0; i < n; i++){
+		if(arr[i] > max){
+			max = arr[i];
+		}
+	}
+	return max;
+}
+

在main.c文件中，调用tool.h的find_max函数：

// main.c 文件
+#include <stdio.h>
+#include "tool.h"
+
+int main(){
+	int arr[] = {1,3,5,8,2};
+	int max = find_max(arr, 5);
+	printf("max = %d\n", max);
+	return 0;
+}
+

# 1）编译&使用静态库

编译tool静态库：

# 编译tool.c。可以省略"-o tool.o"，默认gcc会生成一个与tool.c同名的.o文件。
+$ gcc -c tool.c
+
+# 编译生成libtool.a静态库
+$ ar rcs libtool.a tool.o
+
+# 编译main可执行文件。
+# -l用来指定要链接的库，后面接库的名字；-L表示编译程序根据指定路径寻找库文件。
+$ gcc -o main main.c -L. -ltool
+
+$ ./main
+max = 8
+

可以用ldd命令查看main文件依赖了哪些库：

$ ldd main
+

# 2）编译&使用动态库

# 编译tool.c，生成tool.o
+$ gcc -c tool.c
+
+# 编译生成libtool.so动态库
+$ gcc -shared -fPIC -o libtool.so tool.o
+
+# 编译main可执行文件
+$ gcc -o main main.c -L. -ltool
+
+$ ./main
+./main: error while loading shared libraries: libtool.so: cannot open shared object file: No such file or directory
+

注意，当静态库与动态库同名时，gcc会优先加载动态库。即，此时目录下即有libtool.a，又有libtool.so，编译main时指定了-ltool，gcc会链接libtool.so！

可以用ldd命令查看main文件依赖了哪些库：

$ ldd main
+

可以看到，libtool.so找不到，这是因为在系统的默认动态链接库路径下没有这个libtool.so文件，可以在执行之前，给main设置环境变量解决：

# 将当前目录设置到环境变量中
+$ LD_LIBRARY_PATH=. ./main
+max = 8
+

LD_LIBRARY_PATH 指定查找共享库，即动态链接库时，除默认路径以外，其他的路径。

# 4、区别总结

载入时刻不同：

  • 静态库：在程序编译时会链接到目标代码中，程序运行时不再需要静态库，因此体积较大。而且每次编译都需要载入静态代码，因此内存开销大。
  • 动态库：在程序编译时不会被链接到目标代码中，而是在程序运行时才被载入，程序运行时需要动态库存在，因此体积较小。而且系统只需载入一次动态库，不同程序可以得到内存中相同的动态库副本，因此内存开销小。

# 三、makefile走读与语法基础

# 1、makefile是什么

在一个工程中，源文件很多，按类型、功能、模块分别被存放在若干个目录中，需要按一定的顺序、规则进行编译，这时就需要使用到makefile。

  • makefile定义了一系列的规则来指定，哪些文件需要先编译，哪些文件需要重新编译，如何进行链接等操作。
  • makefile就是“自动化编译”，告诉make命令如何编译和链接。

makefile是make工具的配置脚本，默认情况下，make命令会在当前目录下去寻找该文件（按顺序找寻文件名为“GNUmakefile”、“makefile”、“Makefile”的文件）。

在这三个文件名中，最好使用“Makefile”这个文件名，因为，这个文件名第一个字符为大写，这样有一种显目的感觉。 +最好不要用“GNUmakefile”，这个文件是GNU的make识别的。有另外一些make只对全小写的“makefile”文件名敏感。 +但是基本上来说，大多数的make都支持“makefile”和“Makefile”这两种默认文件名。

当然，配置文件的文件名也可以不是makefile，比如：config.debug，这时需要通过 -f 或 --file 指定配置文件，即：

# 使用-f
+$ make -f config.debug
+# 使用--file
+$ make --file config.debug
+

# 2、makefile里有什么

makefile包含以下五个：

  • 显示规则：说明了如何生成一个或多个目标文件。
  • 隐晦规则：make有自动推导功能，可以用隐晦规则来简写makefile。
  • 变量定义：在makefile中可以变量一系列的变量，变量一般是字符串，类似c语言中的宏，当makefile被执行时，其中的变量都会被扩展相应的位置上。
  • 文件指示：包括3个部分：①在makefile引用另一个makefile，类似C语言中的include；②根据条件指定makefile中的有效部分，类似C语言中的预编译#if一样；③定义多行的命令。
  • 注释：只有行注释，使用#字符表示。

# 3、makefile的规则

target ... : prerequisites ...
+	command
+或者：
+target ... : prerequisites ... ; command
+

若prerequisites与command在同一行，需要用;分隔。 +若prerequisites与command不在同一行，则command前面需要用tab键开头。 +另外，如果命令太长，可以用\作为换行符。

  • target：目标文件。可以是ObjectFile，也可以是执行文件，还可以是标签（Label）；如果有多个文件，可以用空格隔开；可以使用通配符。
  • prerequisites：依赖文件，既要生成那个target所需要的文件或其他target。
  • command：make需要执行的命令。

# makefile的作用：

告诉make，文件的依赖关系，以及如何生成目标文件。prerequisites中，如果有一个及以上的文件比target要新的话，target就会被认为是过时的，需要重新生成，command就会被执行，从而生成新的target。

# 4、makefile示例

# 当前目录存在main.c、tool.c、tool.h三个文件
+# 下面是makefile文件内容
+main: main.o tool.o
+	gcc main.o tool.o -o main
+.PHONY: clean
+clean:
+	-rm main *.o
+-----------------------------
+// 执行 make 后输出如下：
+cc	-c -o main.o main.c
+cc	-c -o tool.o tool.c
+gcc main.o tool.o -o main
+// 并且生成了一个可执行文件main
+
  • -o：指定可执行文件的名称。
  • clean：标签，不会生成“clean”文件，这样的target称之为“伪目标”，伪目标的名字不能和文件名重复。clean一般放在文件最后。
  • .PHONY：显示地指明clean是一个“伪目标”。

make会自动推导main.o、tool.o如何生成。 +伪目标的名字不能和文件名重复，即当前目录下，不能有clean文件。 +可以通过 make clean 执行删除命令。

# 5、makefile如何工作

默认方式下，输入make命令后：

  • make会在当前目录下找名字叫“Makefile”或“makefile”的文件。
  • 如果找到，它会找文件中第一个目标文件（target），并把这个target作为最终的目标文件，如前面示例中的“main”。
  • 如果main文件不存在，或main所依赖的.o文件的修改时间要比main文件要新，那么它会执行后面所定义的命令来生成main文件。
  • 如果main所依赖的.o文件也存在，那么main会在当前文件中找目标为.o文件的依赖性，若找到则根据规则生成.o文件。
  • make再用.o文件声明make的终极任务，也就是执行文件“main”。

# 6、makefile中使用变量

objects = main.o tool.o
+main: $(objects)
+	gcc $(objects) -o main
+.PHONY: clean
+clean:
+	-rm main $(objects)
+-----------------------------
+// 执行 make 后输出如下：
+cc	-c -o main.o main.c
+cc	-c -o tool.o tool.c
+gcc main.o tool.o -o main
+
  • 为了makefile的易维护，在makefile中我们可以使用变量。makefile的变量也就是一个字符串，理解成C语言中的宏可能会更好。
  • 比如：我们声明一个变量，叫objects，于是，我们就可以很方便地在我们的makefile中以“$(objects)”的方式来使用这个变量了。

# 7、makefile中引用其他的makefile

# 语法格式
+include <filename>
+
+# 举个例子，你有这样几个 Makefile：a.mk、b.mk、c.mk，还有一个文件叫 # foo.make，以及一个变量$(bar)，其包含了 e.mk 和 f.mk
+
+include foo.make *.mk $(bar)
+# 等价于：
+include foo.make a.mk b.mk c.mk e.mk f.mk
+
+# 如果文件找不到，而你希望make时不理会那些无法读取的文件而继续执行
+# 可以在include前加一个减号“-”，如：
+-include <filename>
+

使用include关键字可以把其它Makefile包含进来，include语法格式： +include <filename>

# 8、环境变量MAKEFILES

MAKEFILES

如果当前环境中字义了环境变量 MAKEFILES，那么，make会把这个变量中的值做一个类似于 include 的动作。这个变量中的值是其它的 Makefile，用空格分隔。只是，它和include不同的是，从这个环境中引入的Makefile的“目标”不会起作用，如果环境变量中定义的文件发现错误，make也会不理。但是建议不要使用这个环境变量，因为只要这个变量一被定义，那么当你使用make时，所有的Makefile都会受到它的影响。 +也许有时候Makefile出现了奇怪的事，那么可以查看当前环境中有没有定义这个变量。

# 9、Makefile预定义变量

变量名 描述 默认值
CC C语言编译器的名称 cc
CPP C语言预处理器的名称 $(CC) -E
CXX C++语言编译器的名称 g++
RM 删除文件程序的名称 rm -f
CFLAGS C语言编译器的编译选项 无
CPPFLAGS C语言预处理器的编译选项 无
CXXFLAGS C++语言编译器的编译选项 无

# 10、Makefile自动变量

自动变量 描述
$* 目标文件的名称，不包含扩展名
$@ 目标文件的名称，包含扩展名
$+ 所有的依赖文件，以空格隔开，可能含有重复的文件
$^ 所有的依赖文件，以空格隔开，不重复
$< 依赖项中第一个依赖文件的名称
$? 依赖项中所有比目标文件新的依赖文件

# 11、Makefile函数

define本质是定义一个多行的变量，没办法直接调用，但可以在call的作用下，当作函数来使用。

# 1）不带参数

define FUNC
+$(info echo "hello")
+endef
+
+$(call FUNC)
+--------------------
+输出：hello
+

# 2）带参数

define FUNC1
+$(info echo $(1)$(2))
+endef
+
+$(call FUNC1,hello,world)
+--------------------
+输出：hello world
+

# 12、make的工作流程

GNU的make工作时的执行步骤如下：

  1. 读入所有的Makefile。
  2. 读入被include的其它Makefile。
  3. 初始化文件中的变量。
  4. 推导隐晦规则，并分析所有规则。
  5. 为所有的目标文件创建依赖关系链。
  6. 根据依赖关系，决定哪些目标要重新生成。
  7. 执行生成命令。

1~5是第一阶段，6~7为第二阶段。在第一阶段中，如果定义的变量被使用了，那么make会把变量展开在使用的位置，但是make并不是完全的马上展开，如果变量出现在依赖关系的规则中，那么只有当这条依赖被决定要使用的时候，变量才会被展开。

# 三、Android.mk基础

# 1、Android.mk简介

Android.mk是一个向Android NDK构建系统描述NDK项目的GNU makefile片段。主要用来编译生成以下几种：

  • APK程序：一般的Android应用程序，系统级别的直接push即可。
  • JAVA库：Java类库，编译打包生成JAR文件。
  • C\C++应用程序：可执行的C\C++应用程序。
  • C\C++静态库：编译生成C\C++静态库，并打包成.a文件。
  • C\C++共享库：编译生成共享库，并打包成.so文件。

# 2、Android.mk基本格式

这是一个简单的Android.mk文件的内容：

# 定义模块当前路径（必须定义在文件开头，只需定义一次）
+LOCAL_PATH := $(call my-dir)
+
+# 清空当前环境变量（LOCAL_PATH除外）
+include $(CLEAR_VARS)
+
+# 当前模块名（这里会生成libhello-jni.so）
+LOCAL_MODULE := hello-jni
+
+# 当前模块包含的源代码文件
+LOCAL_SRC_FILES := hello-jni.c
+
+# 表示当前模块将被编译成一个共享库
+include $(BUILD_SHARED_LIBRARY)
+
  • my-dir：是由编译系统提供的宏函数，返回当前.mk文件的路径。
  • CLEAR_VARS：是由编译系统提供的变量，指向一个特定的GNU makefile片段，可以清除除了LOCAL_PATH以外的以LOCAL_开头的变量，如：LOCAL_MODULE、LOCAL_SRC_FILES。这样做是因为编译系统在单次执行中，会解析多个构建文件和模块定义，而以LOCAL_开头的变量是全局变量，所以描述每个模块之前，都会声明CLEAR_VARS变量，可以避免冲突。
  • LOCAL_MODULE：定义当前模块名，模块名必须唯一，而且不能包含空格。模块名为"hello-jni"时，会生成libhello-jni.so，如果模块名为"libhello-jni"时，则生成的还是libhello-jni.so！
  • LOCAL_SRC_FILES：当前模块包含的源文件，当源文件有多个时，用空格隔开。

# 3、编译多个共享库

一个Android.mk可能编译产生多个共享库模块。

LOCAL_PATH := $(call my-dir)
+
+# 模块1
+include $(CLEAR_VARS)
+LOCAL_MODULE := module1
+LOCAL_SRC_FILES := module1.c
+include $(BUILD_SHARED_LIBRARY)
+
+# 模块2
+include $(CLEAR_VARS)
+LOCAL_MODULE := module2
+LOCAL_SRC_FILES := module2.c
+include $(BUILD_SHARED_LIBRARY)
+

这里会产生libmodule1.so和libmodule2.so两个动态库。

# 4、编译静态库

虽然Android应用程序不能直接使用静态库，但静态库可以用来编译动态库。比如在将第三方代码添加到原生项目中时，可以不用直接将第三方源码包括在原生项目中，而是将第三方源码编译成静态库，然后并入共享库。

LOCAL_PATH := $(call my-dir)
+
+# 第三方AVI库
+include $(CLEAR_VARS)
+LOCAL_MODULE := avilib
+LOCAL_SRC_FILES := avilib.c platform_posix.c
+include $(BUILD_STATIC_LIBRARY)
+
+# 原生模块
+include $(CLEAR_VARS)
+LOCAL_MODULE := module
+LOCAL_SRC_FILES := module.c
+# 将静态库模块名添加到LOCAL_STATIC_LIBRARIES变量
+LOCAL_STATIC_LIBRARIES := avilib
+include $(BUILD_SHARED_LIBRARY)
+

# 5、使用共享库共享通用模块

静态库可以保证源代码模块化，但是当静态库与共享库相连时，它就变成了共享库的一部分。在多个共享库的情况下，多个共享库与静态库连接时，需要将通用模块的多个副本与不同的共享库重复相连，这样就增加了APP的大小。这种情况，可以将通用模块作为共享库。

LOCAL_PATH := $(call my-dir)
+
+# 第三方AVI库
+include $(CLEAR_VARS)
+LOCAL_MODULE := avilib
+LOCAL_SRC_FILES := avilib.c platform_posix.c
+include $(BUILD_SHARED_LIBRARY)
+
+# 原生模块1
+include $(CLEAR_VARS)
+LOCAL_MODULE := module1
+LOCAL_SRC_FILES := module1.c
+LOCAL_SHARED_LIBRARIES := avilib
+include $(BUILD_SHARED_LIBRARY)
+
+# 原生模块2
+include $(CLEAR_VARS)
+LOCAL_MODULE := module2
+LOCAL_SRC_FILES := module2.c
+LOCAL_SHARED_LIBRARIES := avilib
+include $(BUILD_SHARED_LIBRARY)
+

以上的做法必须基于同一个NDK项目。

# 6、在多个NDK项目间共享模块

  • 首先将avilib源代码移动到NDK项目以外的位置，比如：C:\android\shared-modules\transcode\avilib。
  • 作为共享库模块，avilib需要有自己的Android.mk文件。
  • 以transcode/avilib为参数调用函数宏import-module添加到NDK项目的Android.mk文档末尾。

import-module函数宏在NDK版本r5以后才有。

# avilib模块自己的Android.mk文件
+LOCAL_PATH := $(call my-dir)
+include $(CLEAR_VARS)
+LOCAL_MODULE := avilib
+LOCAL_SRC_FILES := avilib.c platform_posix.c
+include $(BUILD_SHARED_LIBRARY)
+---------------------------------------------
+# 使用共享模块的NDK项目1的Android.mk文件
+LOCAL_PATH := $(call my-dir)
+include $(CLEAR_VARS)
+LOCAL_MODULE := module1
+LOCAL_SRC_FILES := module1.c
+LOCAL_SHARED_LIBRARIES := avilib
+include $(BUILD_SHARED_LIBRARY)
+$(call import-module,transcode/avilib)
+---------------------------------------------
+# 使用共享模块的NDK项目2的Android.mk文件
+LOCAL_PATH := $(call my-dir)
+include $(CLEAR_VARS)
+LOCAL_MODULE := module2
+LOCAL_SRC_FILES := module2.c
+LOCAL_SHARED_LIBRARIES := avilib
+include $(BUILD_SHARED_LIBRARY)
+$(call import-module,transcode/avilib)
+

当心细的你在看到$(call import-module,transcode/avilib)这句时，一定会问，为什么NDK会知道要去C:\android\shared-modules\目录下面找transcode/avilib呢？是的，NDK并没有这么智能，默认情况下，import-module函数宏只会搜索AndroidNDK下面的sources目录。

如我的NDK路径是：C:\Users\lqr\AppData\Local\Android\Sdk\ndk-bundle，那么import-module函数宏默认的寻找目录就是C:\Users\lqr\AppData\Local\Android\Sdk\ndk-bundle\sources

要正确使用import-module，就需要对NDK_MODULE_PATH进行配置，把C:\android\shared-modules\配置到环境变量中即可，当有多个共享库目录时，用;隔开。

更多关于import-module的介绍，请翻到文末查看。

# 7、使用预编译库

  • 想在不发布源代码的情况下将模块发布给他人。
  • 想使用共享库模块的预编译版来加速编译过程。

现在我们手上有第三方预编译好的库libavilib.so，想集成到自己项目中使用，则需要在Android.mk中进行如下配置：

# 预编译共享模块的Android.mk文件
+LOCAL_PATH := $(call my-dir)
+# 第三方预编译的库
+include $(CLEAR_VARS)
+LOCAL_MODULE := avilib
+LOCAL_SRC_FILES := libavilib.so
+include $(PREBUILT_SHARED_LIBRARY)
+

可以看到，LOCAL_SRC_FILES指向的不再是源文件，而是预编译好的libavilib.so，相对于LOCAL_PATH的位置。

# 8、编译独立的可执行文件

为了方便测试和进行快速开发，可以编译成可执行文件。不用打包成APK就可以得到到Android设备上直接执行。

# 独立可执行模块的Android.mk文件
+LOCAL_PATH := $(call my-dir)
+include $(CLEAR_VARS)
+LOCAL_MODULE := module
+LOCAL_SRC_FILES := module.c
+LOCAL_STATIC_LIBRARIES := avilib
+include $(BUILD_EXECUTABLE)
+

# 9、注意事项

假如我们本地库libhello-jni.so依赖于libTest.so（可以使用NDK下的ndk-depends查看so的依赖关系）。

  • 在Android6.0版本之前，需要在加载本地库前先加载被依赖的so。
  • 在Android6.0版本之后，不能再使用预编译的动态库（静态库没问题）。
// Android 6.0版本之前：
+System.loadlibrary("Test");
+System.loadlibrary("hello-jni");
+
+// Android 6.0版本之后：  
+System.loadlibrary("hello-jni");
+

# 四、附加

# 1、import_module 详解

以下内容引用自 《import-module的注意事项与NDK_MODULE_PATH的配置》 (opens new window)

+ +
+
#NDK#makefile
AndroidTV - 解决EditText焦点无法转移问题
AndroidNDK - Cmake详解

+ ← + AndroidNDK - Cmake详解→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ad0098/index.html b/pages/ad0098/index.html new file mode 100644 index 000000000..93589dd3e --- /dev/null +++ b/pages/ad0098/index.html @@ -0,0 +1,102 @@ + + + + + + Python-虚拟环境 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-02
目录

Python-虚拟环境

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

平时在开发时我们都会先安装一些python需要的包，每次安装都会有一个版本，如果不同项目需要不同版本的包时就会出现不兼容的情况。应对这种情况我们就可以搭建多个虚拟环境来应对不同的环境需求，在虚拟环境中搭建一个Python项目运行所需要的那些包，将来根据运行的项目来切换不同环境即可

# 安装 virtualenv

我们需要用 pip 先安装 virtualenv

pip install virtualenv
+

我们可以在当前用户的家目录中找到 .virtualenvs 文件夹，查看当前所有的虚拟环境

virtualenvs

# 创建虚拟环境

  • 创建：mkvirtualenv [虚拟环境名称]
mkvirtualenv lxfenv1
+

安装成功

注：创建的过程需要联网

目录结构

Installing setuptools, pkg_resources, pip, wheel...done.
+

刚刚安装时提示安装的这些东西就存放在你创建好的虚拟环境下的【lib/python2.7/site-packages/】目录中

lib目录

  • 退出：deactivate +当我们安装好虚拟环境后默认就使用了该虚拟环境，如图标识处可以看出

当前环境

如果你想退出当前的虚拟环境，或以使用如下命令：

deactivate
+

退出环境

  • 进入：workon [虚拟环境名称]

使用指定的虚拟环境则使用如下命令：

workon lxfenv1
+

workon

  • 删除：rmvirtualenv [虚拟环境名称]
rmvirtualenv lxfenv1
+

# 安装拓展包

  • 查看当前安装好的包
pip list
+或者
+pip freeze
+

查看当前安装好的包

ps: 上图pip list中列出的四个包是安装虚拟环境必定会安装的包 +如图，pip list会列出所有的包，而pip freeze只会列出扩展的包

  • 安装指定包
pip install django==1.8.2
+# ==1.8.2 为指定版本号，不写则直接安装最新的包
+

注： pip install xxx 会自动删除旧版本，再安装新版本

如果不知道包名可以到pypi (opens new window)上搜索

安装指定的包

+ +
+
#python
Docker - Compose的使用
Mac上pyenv的安装与使用

+ ← + Mac上pyenv的安装与使用→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b0e486/index.html b/pages/b0e486/index.html new file mode 100644 index 000000000..4cdef37c2 --- /dev/null +++ b/pages/b0e486/index.html @@ -0,0 +1,318 @@ + + + + + + Swift - PropertyWrapper | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-04-22
目录

Swift - PropertyWrapper

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、知识点

Property Wrapper，即属性包装器，其作用是将属性的 定义代码 与属性的存储方式代码 进行分离，抽取的管理的存储代码只需要编写一次，即可将功能应用于其它属性上。

# 1、基础用法

功能需求：确保值始终小于或等于12

这里我们直接使用 property wrapper 进行封装演示

@propertyWrapper
+struct TwelveOrLess {
+    private var number: Int
+    
+    // wrappedValue变量的名字是固定的
+    var wrappedValue: Int {
+        get { return number }
+        set { number = min(newValue, 12) }
+    }
+    
+    init() {
+        self.number = 0
+    }
+}
+
+struct SmallRectangle {
+    @TwelveOrLess var height: Int
+    @TwelveOrLess var width: Int
+}
+
+var rectangle = SmallRectangle()
+print(rectangle.height) // 0
+
+rectangle.height = 10
+print(rectangle.height) // 10
+
+rectangle.height = 24
+print(rectangle.height) // 12
+

这里可以注意到，在创建 SmallRectangle 实例时，并不需要初始化 height 和 width

原因： +被 property wrapper 声明的属性，实际上在存储时的类型是 TwelveOrLess，只不过编译器施了一些魔法，让它对外暴露的类型依然是被包装的原来的类型。 +上面的 SmallRectangle 结构体，等同于下方这种写法

struct SmallRectangle {
+    private var _height = TwelveOrLess()
+    private var _width = TwelveOrLess()
+    var height: Int {
+        get { return _height.wrappedValue }
+        set { _height.wrappedValue = newValue }
+    }
+    var width: Int {
+        get { return _width.wrappedValue }
+        set { _width.wrappedValue = newValue }
+    }
+}
+

# 2、设置初始值

@propertyWrapper
+struct SmallNumber {
+    private var maximum: Int
+    private var number: Int
+    
+    var wrappedValue: Int {
+        get { return number }
+        set { number = min(newValue, maximum) }
+    }
+    
+    init() {
+        maximum = 12
+        number = 0
+    }
+    
+    init(wrappedValue: Int) {
+        print("init(wrappedValue:)")
+        maximum = 12
+        number = min(wrappedValue, maximum)
+    }
+    
+    init(wrappedValue: Int, maximum: Int) {
+        print("init(wrappedValue:maximum:)")
+        self.maximum = maximum
+        number = min(wrappedValue, maximum)
+    }
+}
+

使用了 @SmallNumber 但没有指定初始化值

struct ZeroRectangle {
+    @SmallNumber var height: Int
+    @SmallNumber var width: Int
+}
+
+var zeroRectangle = ZeroRectangle()
+print(zeroRectangle.height, zeroRectangle.width) // 0 0
+

使用了 @SmallNumber ，并指定初始化值

这里会调用 init(wrappedValue:) 方法

struct UnitRectangle {
+    @SmallNumber var height: Int = 1
+    @SmallNumber var width: Int = 1
+}
+
+var unitRectangle = UnitRectangle()
+print(unitRectangle.height, unitRectangle.width) // 1 1
+

使用@SmallNumber，并传参进行初始化

这里会调用 init(wrappedValue:maximum:) 方法

struct NarrowRectangle {
+    // 报错：Extra argument 'wrappedValue' in call
+    // @SmallNumber(wrappedValue: 2, maximum: 5) var height: Int = 1
+    // 这种初始化是可以的，调用 init(wrappedValue:maximum:) 方法
+    // @SmallNumber(maximum: 9) var height: Int = 2
+    @SmallNumber(wrappedValue: 2, maximum: 5) var height: Int
+    @SmallNumber(wrappedValue: 3, maximum: 4) var width: Int
+}
+
+var narrowRectangle = NarrowRectangle()
+print(narrowRectangle.height, narrowRectangle.width) // 2 3
+
+narrowRectangle.height = 100
+narrowRectangle.width = 100
+print(narrowRectangle.height, narrowRectangle.width) // 5 4
+

# 3、projectedValue

projectedValue为 property wrapper 提供了额外的功能（如：标志某个状态，或者记录 property wrapper 内部的变化等）

两者都是通过实例的属性名进行访问，唯一不同的地方在于，projectedValue 需要在属性名前加上 $ 才可以访问

  • wrappedValue: 实例.属性名
  • projectedValue: 实例.$属性名

下面的代码将一个 projectedValue 属性添加到 SmallNumber 结构中，以在存储该新值之前跟踪该属性包装器是否调整了该属性的新值。

@propertyWrapper
+struct SmallNumber1 {
+    private var number: Int
+    var projectedValue: Bool
+    init() {
+        self.number = 0
+        self.projectedValue = false
+    }
+    var wrappedValue: Int {
+        get { return number }
+        set {
+            if newValue > 12 {
+                number = 12
+                projectedValue = true
+            } else {
+                number = newValue
+                projectedValue = false
+            }
+        }
+    }
+}
+struct SomeStructure {
+    @SmallNumber1 var someNumber: Int
+}
+var someStructure = SomeStructure()
+
+someStructure.someNumber = 4
+print(someStructure.$someNumber) // false
+
+someStructure.someNumber = 55
+print(someStructure.$someNumber) // true
+

这里的 someStructure.$someNumber 访问的是 projectedValue

# 4、使用限制

  • 不能在协议里的属性使用
protocol SomeProtocol {
+    // Property 'sp' declared inside a protocol cannot have a wrapper
+    @SmallNumber1 var sp: Bool { get set }
+}
+
  • 不能在 extension 内使用
extension SomeStructure {
+    // Extensions must not contain stored properties
+    @SmallNumber1 var someProperty2: Int
+}
+
  • 不能在 enum 内使用
enum SomeEnum {
+    // Property wrapper attribute 'SmallNumber1' can only be applied to a property
+    @SmallNumber1 case a
+    case b
+}
+
  • class 里的 wrapper property 不能覆盖其他的 property
class AClass {
+    @SmallNumber1 var aProperty: Int
+}
+
+class BClass: AClass {
+    // Cannot override with a stored property 'aProperty'
+    override var aProperty: Int = 1
+}
+
  • wrapper 属性不能定义 getter 或 setter 方法
struct SomeStructure2 {
+    // Property wrapper cannot be applied to a computed property
+    @SmallNumber1 var someNumber: Int {
+        get {
+            return 0
+        }
+    }
+}
+
  • wrapper 属性不能被 lazy、 @NSCopying、 @NSManaged、 weak、 或者 unowned 修饰

# 二、实际应用

Foil (opens new window) -- 对 UserDefaults 进行了轻量级的属性包装第三方库

这部分我们主要简单的看下该第三方库的核心实现与使用

# 1、使用

  • 声明
// 声明使用的key为flagEnabled，默认值为true
+@WrappedDefault(key: "flagEnabled", defaultValue: true)
+var flagEnabled: Bool
+
+// 声明使用的key为timestamp
+@WrappedDefaultOptional(key: "timestamp")
+var timestamp: Date?
+
  • 获取
// 获取变量在UserDefault中对应存储的值
+self.flagEnabled
+self.timestamp
+
  • 赋值
// 设置UserDefault中对应存储的值
+self.flagEnabled = false
+self.timestamp = Date()
+

# 2、核心代码

WrappedDefault.swift 文件

@propertyWrapper
+public struct WrappedDefault<T: UserDefaultsSerializable> {
+    private let _userDefaults: UserDefaults
+
+    /// 使用UserDefaults是所使用的key
+    public let key: String
+
+    /// 从UserDefaults中获取到的值
+    public var wrappedValue: T {
+        get {
+            self._userDefaults.fetch(self.key)
+        }
+        set {
+            self._userDefaults.save(newValue, for: self.key)
+        }
+    }
+
+    // 初始化方法
+    public init(
+        keyName: String,        
+        defaultValue: T,
+        userDefaults: UserDefaults = .standard
+    ) {
+        self.key = keyName
+        self._userDefaults = userDefaults
+        
+        // 对key所对应的值进行初始化（已有值则跳过，没有则进行初始化）
+        userDefaults.registerDefault(value: defaultValue, key: keyName)
+    }
+}
+

WrappedDefaultOptional.swift 文件

@propertyWrapper
+public struct WrappedDefaultOptional<T: UserDefaultsSerializable> {
+    private let _userDefaults: UserDefaults
+
+    public let key: String
+
+    /// 从UserDefaults中获取到的值，无则返回nil
+    public var wrappedValue: T? {
+        get {
+            self._userDefaults.fetchOptional(self.key)
+        }
+        set {
+            if let newValue = newValue {
+                // 更新值
+                self._userDefaults.save(newValue, for: self.key)
+            } else {
+                // 删除值
+                self._userDefaults.delete(for: self.key)
+            }
+        }
+    }
+
+    public init(keyName: String,
+                userDefaults: UserDefaults = .standard) {
+        self.key = keyName
+        self._userDefaults = userDefaults
+    }
+}
+

# 三、资料

Swift官方文档 (opens new window)

apple / swift-evolution (opens new window)

+ +
+
#iOS#Swift
iOS - Swift面向协议编程（二）
iOS - RxSwift项目实战记录

+ ← + iOS - RxSwift项目实战记录→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b1aa38/index.html b/pages/b1aa38/index.html new file mode 100644 index 000000000..0948f8c24 --- /dev/null +++ b/pages/b1aa38/index.html @@ -0,0 +1,99 @@ + + + + + + Swift - 优雅的适配大小 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-10-24
目录

Swift - 优雅的适配大小

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

在日常开发中常常会对设备进行一定的适配，为了方便在多个项目里统一管理和使用，所以封装并开源了SwiftyFitsize这个库，可用于适配视图及字体大小，同时也支持 xib 和 storyboard

GitHub: SwiftyFitsize (opens new window)

最终的效果如下图所示

效果图

# 安装

使用Cocoapods安装，或手动拖入项目

pod 'SwiftyFitsize'
+

# 使用

SwiftyFitsize在默认状况下所使用的参照宽度为iphone6的375 +如果设计图所选用设备的宽度与默认值不同，可以在AppDelegate下初始化所参照的宽度

SwiftyFitsize.reference(width: 414)
+

下面列出一些设备对应的分辨率，方便查找

设备 逻辑分辨率(point) 设备分辨率(pixel)
SE 320x568 640x1136
6(S)／7／8 375x667 750x1334
6(S)+／7+／8+ 414x736 1080x1920
X(S) 375x812 1125x2436
XR 414x896 828x1792
XS Max 414x896 1242x2688

使用也是非常方便的，只需要在Number、UIFont、CGPoint、CGSize、UIEdgeInsetsMake这些类型的值后面加上~即可

100~
+UIFont.systemFont(ofSize: 14)~
+CGPoint(x: 10, y: 10)~
+CGSize(width: 100, height: 100)~
+CGRect(x: 10, y: 10, width: 100, height: 100)~
+UIEdgeInsetsMake(10, 10, 10, 10)~
+
# xib / storyboard 字体适配

支持控件 UILabel UIButton UITextView UITextField

xib-font

# xib / storyboard 约束适配

xib-font

#

注：~请不要相互嵌套使用，如

CGPoint(x: 10~, y: 10~)~
+
+ +
+
#iOS#Swift
iOS - 面向协议封装全屏旋转功能
Swift - 掌控Moya的网络请求、数据解析与缓存

+ ← + Swift - 掌控Moya的网络请求、数据解析与缓存→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b1db2f/index.html b/pages/b1db2f/index.html new file mode 100644 index 000000000..cb4219c30 --- /dev/null +++ b/pages/b1db2f/index.html @@ -0,0 +1,198 @@ + + + + + + Libgdx - 使用pixmap绘制透明圆角矩形 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-02-09
目录

Libgdx - 使用pixmap绘制透明圆角矩形

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

# 1、需求

最近在使用Libgdx进行游戏大厅开发，遇到这种需求：为个别文本控件（Label）设置纯色透明的圆角矩形背景。

# 2、思路

Libgdx中的Label是提供背景设置的：对Label的Style的background属性进行设置即可，这个background是个Drawable，可以使用图片作为Label的背景，很好很强大，但我这个项目中的Label背景只需要一种透明颜色而已，用图片来实现的话我觉得并不是一种很好的方式（有种杀鸡用牛刀的感觉）。想来想去，认为Libgdx中的Pixmap可以帮助我实现这种需求，因为Pixmap是可以被用来绘制一个简单图形的，之后将pixmap转换成drawable赋值给background就好了：

Drawable bg = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
+label.getStyle().background = bg;
+

# 3、难点

然而，pixmap只提供了如下几种绘制图形的方法：

pixmap.drawLine()		// 画线
+pixmap.drawRectangle();		// 画矩形
+pixmap.drawCircle();		// 画环
+pixmap.fillTriangle();		// 填充三角形
+pixmap.fillRectangle();		// 填充矩形
+pixmap.fillCircle();		// 填充圆形
+

我要的圆角矩形正好没有（毕竟圆角矩形不是简单图形是吧。。。），于是，经过google大法及本人的"缜密"思考之后，纯色透明圆角矩形实现出来了，本篇将记录两种实现圆角矩形的方案，下面开始进入正题。

# 二、方案一

这个方案借鉴了一个歪果人的博文，本文为我之后的方案二做了启发，这里就先把地址贴出来，方便今后再翻出来欣赏：

博文原地址：LIBGDX – DRAWING A ROUNDED RECTANGLE PIXMAP (opens new window)

下面就开始强行“翻译”一下。

# 1、原理

绘制出一个圆角矩形，实际上，可以通过使用填充了相同的颜色的2个矩形和4个圆圈来实现，这几个图形的摆放如下图所示。

# 2、实现

通过上图，可以很清晰的明白原作者的实现思想，下面就开始码代码（copy）：

public Pixmap getRoundedRectangle(int width, int height, int radius, int color) {
+    Pixmap pixmap = new Pixmap(width, height, Pixmap.Format.RGBA8888);
+    pixmap.setColor(color);
+    // Pink rectangle
+    pixmap.fillRectangle(0, radius, pixmap.getWidth(), pixmap.getHeight() - 2 * radius);
+    // Green rectangle
+    pixmap.fillRectangle(radius, 0, pixmap.getWidth() - 2 * radius, pixmap.getHeight());
+    // Bottom-left circle
+    pixmap.fillCircle(radius, radius, radius);
+    // Top-left circle
+    pixmap.fillCircle(radius, pixmap.getHeight() - radius, radius);
+    // Bottom-right circle
+    pixmap.fillCircle(pixmap.getWidth() - radius, radius, radius);
+    // Top-right circle
+    pixmap.fillCircle(pixmap.getWidth() - radius, pixmap.getHeight() - radius, radius);
+    return pixmap;
+}
+

# 3、效果

为了直观的看出效果，我把Demo的舞台背景渲染为黑色，圆角矩形设置为白色，下面列出demo中的部分代码：

Texture roundedRectangle = new Texture(getRoundedRectangle(color, width, height, radius));
+Image image = new Image(roundedRectangle);
+image.setPosition(Gdx.graphics.getWidth() / 2, Gdx.graphics.getHeight() / 2, Align.center);
+addActor(image);
+

# 4、缺陷

效果很棒，不得不说，歪果人的想法还是挺好的，但是，当我把圆角矩形的颜色设置为白色透明时，这效果就恶心了，这里贴出白透明色的设置代码：

Color color = new Color(1, 1, 1, 0.5f);
+

为什么会这样，仔细想想就能明白，这是因为pixmap在绘制这几个图形时，它们的重合部分透明度叠加了。

# 5、完善

既然知道了原因，那有什么解决办法呢？这里列出我能想到的2个办法：

  1. 先使用不透明颜色进行绘制，待所有图形绘制完成后，再来设置整体的透明度。
  2. 先用一个pixmap绘制出不透明圆角矩形，然后遍历所有的像素点，如果该像素不是透明的，则在另一个pixmap的相同位置，用rgb相同但a不同的颜色再绘制一次。

第一个方法我觉得是比较好的，感觉实现上比较简单可靠，然而我始终没有找到可以对pixmap设置整体透明度的方法，于是我这里采用了第二个方法来实现：

public Pixmap getRoundedRectangle(Color color, int width, int height, int radius) {
+    Pixmap pixmap = new Pixmap(width, height, Pixmap.Format.RGBA8888);
+    // 1、保存原先的透明度
+    float alpha = color.a;
+    // 2、将透明度设置为1之后开始绘制圆角矩形
+    color.set(color.r, color.g, color.b, 1);
+    pixmap.setColor(color);
+    // Pink rectangle
+    pixmap.fillRectangle(0, radius, pixmap.getWidth(), pixmap.getHeight() - 2 * radius);
+	// Green rectangle
+    pixmap.fillRectangle(radius, 0, pixmap.getWidth() - 2 * radius, pixmap.getHeight());
+    // Bottom-left circle
+    pixmap.fillCircle(radius, radius, radius);
+    // Top-left circle
+    pixmap.fillCircle(radius, pixmap.getHeight() - radius, radius);
+    // Bottom-right circle
+    pixmap.fillCircle(pixmap.getWidth() - radius, radius, radius);
+    // Top-right circle
+    pixmap.fillCircle(pixmap.getWidth() - radius, pixmap.getHeight() - radius, radius);
+	// 3、如果原来的背景色存在透明度，则需要对图形整体重绘一次
+    if (alpha != 1) {
+        Pixmap newPixmap = new Pixmap(pixmap.getWidth(), pixmap.getHeight(), pixmap.getFormat());
+        int r = ((int) (255 * color.r) << 16);
+        int g = ((int) (255 * color.g) << 8);
+        int b = ((int) (255 * color.b));
+        int a = ((int) (255 * alpha) << 24);
+        int argb8888 = new Color(r | g | b | a).toIntBits();
+        for (int y = 0; y < pixmap.getHeight(); y++) {
+            for (int x = 0; x < pixmap.getWidth(); x++) {
+                int pixel = pixmap.getPixel(x, y);
+                if ((pixel & color.toIntBits()) == color.toIntBits()) {
+                    newPixmap.drawPixel(x, y, argb8888);
+                }
+            }
+        }
+		pixmap.dispose();
+        pixmap = newPixmap;
+    }
+    return pixmap;
+}
+

来看下效果，嗯，还可以吧。

# 三、方案二（个人认为比较完美的方案）

虽然用2个pixmap的方式可以"完美"地绘制出纯色透明圆角矩形，但是，每创建出1个透明圆角矩形都必须创建出2个pixmap来为之辅助，尽管最后会对旧的pixmap进行dispose，但总感觉这种方案不是并最优方式。

# 1、原理

通过一番思考之后，我得出了这样一个结论：

既然最后在使用到第2个pixmap的时候需要遍历所有像素点来重新绘制一遍，那我干脆直接进行第2步（第1步绘制不透明矩形的步骤不要了），在遍历所有像素的时候把需要绘制到pixmap的像素点绘制出来不就好了吗？这样做还可以省掉一个pixmap的开销。

那么现在的问题就是，我怎么知道哪些像素应该被绘制，哪些像素不要被绘制呢？其实可以把圆角矩形看成是一个不完整的有缺角的矩形，而这些缺角正好就是不用被绘制的那些像素点。

通过观察，可以知道，四个缺角中的像素都有如下相同点：

  • 在绿线与蓝线组成的小矩形区域中；
  • 都不在圆上，换句话说就是点与圆心的距离超过半径。

# 2、实现

根据结论，代码实现如下：

public Pixmap getRoundedRectangle(Color color, int width, int height, int radius) {
+    Pixmap pixmap = new Pixmap(width, height, Pixmap.Format.RGBA8888);
+    pixmap.setColor(color);
+    for (int y = 0; y < pixmap.getHeight(); y++) {
+        for (int x = 0; x < pixmap.getWidth(); x++) {
+            if ((x >= 0 && x <= radius) && (y >= 0 && y <= radius)) { // bottom-left
+                if (Math.sqrt((radius - x) * (radius - x) + (radius - y) * (radius - y)) > radius) {
+                    continue;
+                }
+            } else if ((x >= 0 && x <= radius) && (y >= (height - radius) && y <= height)) { // top-left
+                if (Math.sqrt((radius - x) * (radius - x) + ((height - radius) - y) * ((height - radius) - y)) > radius) {
+                    continue;
+                }
+            } else if ((x >= (width - radius) && x <= width) && (y >= 0 && y <= radius)) {// bottom-right
+                if (Math.sqrt(((width - radius) - x) * ((width - radius) - x) + (radius - y) * (radius - y)) > radius) {
+                    continue;
+                }
+            } else if ((x >= (width - radius) && x <= width) && (y >= (height - radius) && y <= height)) {// top-right
+                if (Math.sqrt(((width - radius) - x) * ((width - radius) - x) + ((height - radius) - y) * ((height - radius) - y)) > radius) {
+                    continue;
+                }
+            }
+            pixmap.drawPixel(x, y);
+        }
+    }
+    return pixmap;
+}
+

为了方便理解，下面列出各个缺角的圆心与小矩形x与y的取值范围：

// bottom-left
+// ------------圆心:(radius, radius)
+// ------------矩形:([0,radius], [0,radius])
+// top-left
+// ------------圆心:(radius, height-radius)
+// ------------矩形:([0,radius], [height-radius,height])
+// bottom-right
+// ------------圆心:(width-radius,radius)
+// ------------矩形:([width-radius,width], [0,radius])
+// top-right
+// ------------圆心:(width-radius,height-radius)
+// ------------矩形:([width-radius,width], [height-radius,height])
+

结果是OK的，与方案一绘制出来的透明圆角矩形一致，并且少了一个pixmap的开销。

# 四、最后

最后，想多说两句，Libgdx作为一款优秀的Android端游戏开发引擎，网上的资料却相当的少，很多东西就算Google了也不一定能找到答案，本人也是最近才对其进行了解并上手使用，对于本文中所说的需求或许并不是最好的解决方式，如果您有什么好的解决方案或建议，请不吝赐教，thx。

+ +
+
#Libgdx#圆角矩形
多RecyclerView同步滚动
使用PorterDuff解决clipPath无法抗锯齿问题

+ ← + 使用PorterDuff解决clipPath无法抗锯齿问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b2d210/index.html b/pages/b2d210/index.html new file mode 100644 index 000000000..95a4639e2 --- /dev/null +++ b/pages/b2d210/index.html @@ -0,0 +1,155 @@ + + + + + + Flutter - 升级到3.24后页面还会多次rebuild吗？🧐 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-08-11
目录

Flutter - 升级到3.24后页面还会多次rebuild吗？🧐

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、问题回顾

在今年 2月份，Flutter 官方正式了 3.19.0 版本，当时我们并没有着急尝鲜，直到 3月中旬，为了解决安卓端的崩溃率飙升问题，被迫无奈升级到 3.19.3， 结果踩了个坑，页面居然会多次 rebuild ~

在一番探索之后定位到根本原因，给官方提了 PR，以及跟大家分享了补丁来临时处理这个问题。探索的相关内容总结和补丁在《Flutter - 升级3.19之后页面多次rebuild？🤨 (opens new window)》中，有兴趣的小伙伴可以看看。

# 二、波折

不过当时（日期：3.19）所提 PR 并不被接受，因为其修改内容是直接给了个选项 createDependency，代码如下:

static ModalRoute<T>? of<T extends Object?>(
+  BuildContext context, {
+  bool createDependency = true,
+}) {
+  _ModalScopeStatus? widget;
+  if (createDependency) {
+    widget = context.dependOnInheritedWidgetOfExactType<_ModalScopeStatus>();
+  } else {
+    widget = context
+        .getElementForInheritedWidgetOfExactType<_ModalScopeStatus>()
+        ?.widget as _ModalScopeStatus?;
+  }
+  return widget?.route as ModalRoute<T>?;
+}
+

如果将 createDependency 参数设置为 false，则不与 BuildContext 建立依赖关系，这被认定为是 footgun。

footgun: 指在尝试解决问题时，无意中导致更多问题或损害自己利益的行为

因为审核人担心如果允许了这个参数的加入，则后续可能会有开发者提出因为这个参数没有正确设置为 true，而导致在确实需要重新构建时却无法正常自动刷新视图的 bug 问题。最后建议提供类似 ModalRoute.argumentsOf(context) 的方式，进而尽量避免造成 rebuild。

这种方式的好处就跟 MediaQuery.of(context).viewInsets 对比 MediaQuery.viewInsetsOf(context) 一样，后者只会在 viewInsets 发生变化时才会 rebuild， 而前者只要是 MediaQueryData 的值（如: size）有变化就会 rebuild。

很好的提议 👍，不过我当时（日期：4.16）因为太忙，表明自己没时间去处理，并将 PR 关闭了，暂时靠补丁苟着。

当时有人提出另外一种较为安全的临时处理方案，就是遍历找出 _ModalScopeStatus，从而拿到 ModalRoute，以此来绕过绑定 BuildContext 的过程，相关代码如下。

/// replace ModalRoute.of(context)
+class MyModalRoute {
+  static ModalRoute<dynamic>? of(BuildContext context) {
+    ModalRoute<dynamic>? route;
+    context.visitAncestorElements((element) {
+      if(element.widget.runtimeType.toString() == '_ModalScopeStatus') {
+        dynamic widget = element.widget;
+        route = widget.route as ModalRoute;
+        return false;
+      }
+      return true;
+    });
+    return route;
+  }
+}
+

使用方式也很简单，只需要将原来的 ModalRoute.of(context) 替换为 MyModalRoute.of(context) 即可。

不过后面有人发现，在使用 代码混淆 功能时，该方案会失效。因为他是按字符串找到的 _ModalScopeStatus，但是在混淆的时候会重命名相关类名，所以还在 3.19.x 小伙伴们，请自行根据自身情况，考虑是否使用。

时间过的很快，转眼来到 5月份，一看这个问题还没有处理，于是抽了点时间按照建议，做了些调整，于 5.24 提交了 PR (https://github.com/flutter/flutter/pull/149022 (opens new window)) ，并在 5.30 完成合并。

# 三、使用

此 PR 的改动也终于随 Flutter 3.24.0 正式版发布了，新增了如下三个方法：

  • isCurrentOf: 对应 isCurrent，用于判断当前路由是否为栈顶路由。
  • canPopOf: 对应 canPop，用于判断当前路由是否可以弹出/关闭。
  • settingsOf: 对应 settings，当前路由的配置（路由名、参数）。

之前取路由参数的方式如下代码所示

final arguments = ModalRoute.of(context)?.settings.arguments;
+

需调整为

final arguments = ModalRoute.settingsOf(context)?.arguments;
+

对，这样就可以了，不调整的话还是会造成 rebuild 的 ~

# 四、最后

其实对于我个人而言，我还是比较钟意添加 createDependency 参数这种方式的，让开发者自由选择。

而且在做路由监听的时候依旧还是得用到 ModalRoute.of(context) ~

void main() {
+  runApp(MyApp());
+}
+
+RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      ...
+      navigatorObservers: [routeObserver],
+      ...,
+    );
+  }
+}
+
+class _MyPageState extends State<MyPage> with RouteAware {
+...
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    // 这里用到了 ModalRoute.of(context)
+    routeObserver.subscribe(this, ModalRoute.of(context)!);
+  }
+
+  @override
+  void dispose() {
+    routeObserver.unsubscribe(this);
+
+    super.dispose();
+  }
+  ...
+}
+

好吧，本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻
Flutter - 轻松实现PageView卡片偏移效果

+ ← + Flutter - 轻松实现PageView卡片偏移效果→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b3bc49/index.html b/pages/b3bc49/index.html new file mode 100644 index 000000000..a097b5f03 --- /dev/null +++ b/pages/b3bc49/index.html @@ -0,0 +1,198 @@ + + + + + + DesignPattern - 备忘录模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-12-01
目录

DesignPattern - 备忘录模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、备忘录模式介绍

备忘录模式（Memento Pattern）又叫做快照模式，属于行为模式。在不破坏封闭的前提下，捕获一个对象的内部状态，保存对象的某个状态，以便在适当的时候恢复对象。使用备忘录模式实现的方式需要保证被保存的对象状态不能被对象从外部访问

  • 核心组成

    • Originator 发起者：记录当前的内部状态，并负责创建和恢复备忘录数据，允许返回到先前状态所需的所有数据，可以根据需要决定 Memento 存储自己的哪些内部状态
    • Memento 备忘录：负责存储 Originator 发起人对象的内部状态，在需要的时候提供发起人需要的内部状态（Memento 与 Originator 的属性类似）
    • Caretaker 管理者：对备忘录进行管理、保存和提供备忘录，只能将备忘录传递给其他角色

  • 应用场景

    • 玩游戏的时候肯定有存档功能，下一次登录游戏时可以从上次退出的地方继续游戏
    • 棋盘类游戏的悔棋、数据库事务回滚
    • 需要记录一个对象的内部状态时，为了允许用户取消不确定或者错误的操作，能够恢复到原先的状态
    • 提供一个可回滚的操作，如 ctrl+z、浏览器回退按钮

  • 优点

    • 给用户提供了一种可以恢复状态的机制
    • 实现了信息的封装，使得用户不需要关心状态的保存细节

  • 缺点

    • 消耗更多的资源，而且每一次保存都会消耗一定的内存

# 二、备忘录模式代码实现

以类 "拳皇" 对打游戏为例，一个游戏角色拥有初始生命值和攻击力，随着每次出拳，生命值下降，同时攻击力上升，结合快照作弊器，每次生命值较低时，恢复到原来保存的状态。

创建 发起者（也就是游戏角色）：

/**
+ * 发起者：一个游戏角色
+ *
+ * @author GitLqr
+ */
+public class RoleOriginator {
+
+	// 生命值，会减少
+	private int live = 100;
+	// 攻击力，会上涨
+	private int attack = 50;
+
+	public void display() {
+		System.out.println("生命值：" + live);
+		System.out.println("攻击力：" + attack);
+	}
+
+	/**
+	 * 打架（每次攻击力上涨2点，生命值下降10点）
+	 */
+	public void fight() {
+		live -= 10;
+		attack += 2;
+	}
+
+	/**
+	 * 保存快照，存储当前状态
+	 */
+	public RoleStateMemento saveState() {
+		return new RoleStateMemento(live, attack);
+	}
+
+	/**
+	 * 恢复
+	 */
+	public void recoveryState(RoleStateMemento memento) {
+		this.live = memento.getLive();
+		this.attack = memento.getAttack();
+	}
+}
+

创建 备忘录(快照)：

/**
+ * 备忘录(快照)：角色状态快照
+ *
+ * @author GitLqr
+ */
+public class RoleStateMemento {
+
+	// 生命值
+	private int live;
+	// 攻击力
+	private int attack;
+
+	public RoleStateMemento(int live, int attack) {
+		super();
+		this.live = live;
+		this.attack = attack;
+	}
+
+	public int getLive() {
+		return live;
+	}
+
+	public void setLive(int live) {
+		this.live = live;
+	}
+
+	public int getAttack() {
+		return attack;
+	}
+
+	public void setAttack(int attack) {
+		this.attack = attack;
+	}
+}
+

创建 管理者：

/**
+ * 管理者：角色状态快照管理器
+ *
+ * @author GitLqr
+ */
+public class RoleStateCaretaker {
+
+	// 根据开发需要，可以使用集合来保存之前的快照信息
+	private RoleStateMemento memento;
+
+	public RoleStateMemento getMemento() {
+		return memento;
+	}
+
+	public void setMemento(RoleStateMemento memento) {
+		this.memento = memento;
+	}
+}
+

使用：

public static void main(String[] args) {
+    RoleOriginator roleOriginator = new RoleOriginator();
+    roleOriginator.display();
+
+    System.out.println("保存当前的状态快照");
+    RoleStateCaretaker roleStateCaretaker = new RoleStateCaretaker();
+    roleStateCaretaker.setMemento(roleOriginator.saveState());
+
+    roleOriginator.fight();
+    roleOriginator.fight();
+    roleOriginator.fight();
+    roleOriginator.display();
+
+    System.out.println("恢复之前的状态快照");
+    roleOriginator.recoveryState(roleStateCaretaker.getMemento());
+    roleOriginator.display();
+}
+
+ +
+
#设计模式#备忘录模式
DesignPattern - 迭代器模式【行为型】
DesignPattern - 状态模式【行为型】

+ ← + DesignPattern - 状态模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b46b7a/index.html b/pages/b46b7a/index.html new file mode 100644 index 000000000..48fb20ba6 --- /dev/null +++ b/pages/b46b7a/index.html @@ -0,0 +1,91 @@ + + + + + + AI - AI绘画的精准控图(ControlNet) | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-03-01
目录

AI - AI绘画的精准控图(ControlNet)

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

系列文章：

# 一、介绍

在上一篇 +《AI - stable-diffusion(AI 绘画)的搭建与使用》 (opens new window) 中， 介绍了 SD 的环境搭建与使用，搭配各种特色模型文件，SD 的文生图功能就可以根据我们输入的提示词（Prompt），绘制出各种各样的精美图片。但是，在深度使用之后你会发现，想让 AI 绘制出自己满意的图片并不容易，甚至多次调整提示词（Prompt）也生成不出来我们想要的画面。

注：后续文中提到的 SD 代指 stable-diffusion 或 stable-diffusion-webui。

这时你需要一个大杀器 ControlNet，SD 搭配上 ControlNet 之后，就可以做到精准控图了，先来看看几个 ControlNet 能做到的效果：

# 二、安装

跟 SD 一样，ControlNet 官方仓库不适合新手直接使用，我们可以安装 stable-diffusion-webui 的一个插件（sd-webui-controlnet）来使用 ControlNet，这是插件的 github 地址：

# 1、安装插件

安装这个插件很简单，在 webui 页面上找到 Extensions -> Install from URL，输入插件的 git 地址 https://github.com/Mikubill/sd-webui-controlnet.git，点击 Install 即可：

等待 loading 结束后，页面底部会出现 Installed into xxx. Use Installed tab to restart. 提示，这时再依次找到 Extensions -> Installed -> Apply and restart UI 重启 webui：

重启完成后，就可以在 txt2img 和 img2img 中看到会多出来一个 ControlNet 选项，这样插件就安装完成了：

# 2、安装模型

sd-webui-controlnet 插件安装完成之后，还需要配置一下 ControlNet 的专属模型（注意：不要跟 SD 的模型搞混了）。在此之前，先来了解一下 ControlNet 的绘画流程：

  1. 用户提供一张参考图，ControlNet 根据指定的模式对参考图进行预处理，得到一张新图，作为另一张参考图。
  2. 根据提示词（Prompt），结合前面的（1 张 或 2 张）参考图，进行图像绘制。

上述流程的两个阶段，对应用到的模型有两种，以下是它们的下载地址：

  1. 预处理器模型（annotator）：https://huggingface.co/lllyasviel/ControlNet/tree/main/annotator/ckpts (opens new window)
  2. 预训练模型（models）：https://huggingface.co/lllyasviel/ControlNet/tree/main/models (opens new window)

注：预训练模型（裁剪过的 models）：https://huggingface.co/webui/ControlNet-modules-safetensors/tree/main (opens new window)

打开预处理器模型（annotator）网址，将需要用到的模型下载下来后，保存到插件的 annotator 目录下：

注意：预处理器模型需按分类目录存放，例如 body_pose_model.pth 和 hand_pose_model.pth 应保存到 openpose 目录；而 upernet_global_small.pth 则是保存到 uniformer 目录；其他模型文件可根据关键字，找到对应存放目录。

插件的 annotator 目录：stable-diffusion-webui\extensions\sd-webui-controlnet\annotator。

打开预训练模型（models）网址，将需要用到的模型下载下来后，保存到插件的 models 目录下：

注意：这步别急着动手，下面有体积更小的模型。⚠️⚠️⚠️

插件的 models 目录：stable-diffusion-webui\extensions\sd-webui-controlnet\models。

ControlNet 官方存放在 huggingface 上的预训练模型文件一个个都是 5 个 G 起步，这是因为它们内部都包含了 SD 那个将近 4 个 G 的 v1-5-pruned-emaonly 模型，这在 stable-diffusion-webui 环境下是没必要的，这时我们可以使用专门裁剪过的预训练模型文件，体积会少很多：

注：一般把所有 control_xxx.safetensors 文件下载下来保存到本地 models 目录下即可，如果你觉得模型文件太多，磁盘空间占用太大，也可以按需下载。

# 三、使用

sd-webui-controlnet 插件和模型文件（预处理器模型、预训练模型）都安装完成之后，再重启一次 webui 就可以正常使用 ControlNet 功能了。

# 1、人体姿势（Human Pose）

根据 civitai 网站上的 Deliberate 模型案例，生成一张牛奶工的图片：

现在我们希望 AI 绘制出来的牛奶工他是坐着的，这时，就可以用上 ControlNet 选项了。展开 ControlNet 选项之后，把 Enable 勾上使其生效，之后，指定 openpose 所需的预处理器模型（Preprocessor）和预训练库模型（Model）：

注：如果你使用的是 8G 以下显存（或者想获取更大的批量大小），可以把 Low VRAM 勾上。 +https://github.com/lllyasviel/ControlNet/blob/main/docs/low_vram.md (opens new window)

ControlNet 选项配置完成后，其它保持不变，点击 "Generate" 按钮重新生成，这时绘制出来的牛奶工的姿势就跟我们提供的参考图基本一致了：

注：图中牛奶工的小腿摆向与骨架图中的小腿摆向不符，不过整体效果已经很不错了，相信后续 ControlNet 能优化好这一点。

你也可以看到，SD 同时还生成出了一张骨架图，这骨架图是在 ControlNet 的预处理阶段生成的。而且 openpose 主要依据的参考图就是这张骨架图，也就是说，当我们手上有现成的骨架图时，完全可以直接将骨架图作为参考图，跳过预处理阶段（设为 "none"），直接进入绘图阶段。有兴趣的可以动手试试，效果是一样的：

# 2、重新着色和风格化（Canny Edge、HED Boundary）

如果你希望对现有的图片重新着色或换一种风格，可以使用 ControlNet 以下两个模型，它们的主要区别是边缘检测算法不同：

  • Canny Edge 模型：采用 Canny 边缘检测算法
  • HED Boundary 模型：采用 HED(Holistically-Nested Network) 边缘检测算法

下面我们就分别采用这两种模型来试试，这是 Canny Edge 模型：

这是 HED Boundary 模型：

可以直观看到，两种模型生成的 边缘检测图 不同，从而最终绘制出来的图片细节上也有差别（注意看小女孩头发上的 3 个反光点），至于哪个更好，看个人感觉吧，我觉得 HED Boundary 模型好一点。关于这两种边缘检测算法的说明，可以查看以下文章了解：

# 3、草图绘制（Scribbles）

使用 Scribbles 模型，可以根据草图（涂鸦）绘制出精美的图片，对于那些没有学过美术或者没有绘画天赋的人来说，简直太棒了。

提示词（Prompt）：hot air balloon

如果你懒得自己画草图，也可以将一张现成的作品交给 ControlNet，由它帮你画，注意，此时的预处理器模型换成了 fake_scribble（从成品图中提取出草图），而预训练模型还是 control_scribble-fp16（根据草图绘制作品）：

注：这里是我唯一一处勾选了 Low VRAM 的地方，因为在进行提取草图的预处理阶段，控制台报了显存不足的错误，此时草图也就没能提取成功，勾选 Low VRAM 之后，一切就正常了。

# 4、建筑物绘制（M-LSD Lines）

如果你希望是对建筑物进行重新上色和风格化，可以使用 M-LSD 模型：

# 5、语义分割绘制（Semantic Segmentation）

Semantic Segmentation 语义分割是一种深度学习算法，重点关注 语义 一词，这种算法将一个标签或类别与图像联系起来，被用来识别形成不同类别的像素集合。这么说有点抽象，我们先直接使用这个模型，看会生成出什么东西：

注意：如果语义分割图没有生成出来，请查看控制台是否有报错，另外，检查一下 upernet_global_small.pth 是否有保存到 extensions\sd-webui-controlnet\annotator\uniformer 目录。因为 SD 自己也有一个 models\uniformer 目录，如果你前面没有手动放置好 upernet_global_small.pth 模型文件，那么在用到 Semantic Segmentation 模型时，SD 会自动帮你下载一个到它自己的 models\uniformer 目录，这是个大坑，不过还好，这种情况控制台会报错，可以排查到这个问题。

可以看到，预处理阶段生成了一张花花绿绿的图片，这就是语义分割图，这图中的每一种颜色都代表了一类物品，比如紫色（#cc05ff）代表床（bed），橙黄色（#ffc207）代表垫子（cushion），金黄色（#e0ff08）代表台灯（lamp）， ControlNet 的 Semantic Segmentation 模型使用的是 ADE20K 协议，这些颜色值都可以在下面网址中找到对应的含义：

既然如此，那我们可以反向操作，修改某个物品的颜色，替换最终生成出来的图中的某样物品，比如把台灯（#e0ff08）换成花（#ff0000）：

注：跟 openpose 直接提供骨架图一样，这里我们直接提供了语义分割图，所以预处理器选择 "none"。另外，注意此处我固定了 Seed 的值，这样最终生成出来的图片能跟上面的例子保持基本一致。

可以看到，最终绘制出来的图中，床边的台灯被替换成了花。

# 6、三维制图（Depth、Normal Map）

如果你希望能对图中 3D 物体比较细致的把控，可以使用 ControlNet 提供的以下 2 种模型：

  • Depth 模型：从原图中提取深度图，能较好的掌握复杂的三维结构层次，并将其复现。
  • Normal Map 模型：从原图中提取 3D 物体的法线向量，绘制的新图与原图的光影效果完全相同。

下面我们就使用相同提示词（Plaster statue of Abraham Lincoln），分别采用这两种模型来试试，这是 Depth 模型：

这是 Normal Map 模型：

相比于 Depth 模型，Normal Map 模型能更好的保留几何形状，并且有更多的细节信息，注意看男人头发的形状。

注：建议 Depth 模型用于 3D 场景，Normal Map 模型用于 3D 物体。

# 四、试验特性

我们先明确一点，提示词（Prompt、Negative Prompt）是使用 SD 必不可少的一环，你需要对最终生成的图片进行描述，才能让 SD 更准确的绘制出你要的图片效果，而 ControlNet 只是以 SD 为基础的功能扩展（更好的控制图片的生成，辅助性的），不是单独的程序。目前 ControlNet 有 2 个强大但还处于试验阶段的功能，分别是：

  • Guess Mode：猜测模式（或者叫 non-prompt mode）
  • Multiple ControlNets：多个 ControlNet

ControlNet 的 Guess Mode（猜测模式）的主要作用就是根据提供的参考图猜测你可能要使用的内容映射（深度？边缘？涂鸦？），即使在你不提供任何提示词（Prompt、Negative Prompt）的情况下，也能进行准确猜测。但实际测试的结果，并没有官方说的那么强（可能是我使用方法不对吧~），这里就有不多介绍了，感兴趣的可以阅读下官方介绍和案例：

下面主要来介绍 Multiple ControlNets，在搞懂它之前，我们先将该功能开启准备好。在 Settings 页面中，找到 ControlNet 分类，指定 Multi ControlNet 的个数（默认为 1），点击 Apply settings 保存配置，最后还得重启一次 webui：

注：最多可以开启 10 个，根据情况调整即可。

重启之后，再回到 txt2img 查看 ControlNet 选项，可以看到现在 ControlNet 选项中有 2 个 ControlNet Model 子页面了：

顾名思义，Multiple ControlNets 就是开启多个 ControlNet，而 ControlNet 是可组合的，当多个 ControlNet 组合使用时，就可以对 SD 进行多条件控制，将多个 ControlNet 的产物，结合提示词（Prompt）绘制出图片，简单理解的话，就是多图合成。现在，我在没有使用 Multiple ControlNets 的情况下，让 AI 绘制一张宇航员在彩色科幻山太空场景中的图片，效果如下：

提示词：astronaut in colorful scifi mountain space scene

看起来一切都很完美，但是呢，如果我想控制整个构图，比如背景轮廓（山体、地面、月亮等等），以及宇航员的姿态位置的话，应该怎么办呢？根据前面列举出来的所有 ControlNet 模型效果可知，背景轮廓可以使用 Depth 模型，能根据提供的背景参考图进行三维结构的复刻并重新着色风格化，而宇航员的姿态则可以使用 openpose 模型进行控制。前面的所有案例，都是单个 ControlNet 模型的使用，而现在，这里就可以使用 Multiple ControlNets 组合多个 ControlNet 模型来控图了。先来配置第 1 个 ControlNet，用来控制背景的 Depth 模型：

注：如果手上有现成的深度图，那么可以跳过预处理阶段（Preprocessor 配置为 "none"），缩短时间。另外，注意这个 Weight 值我调整为 0.35 了，因为如果使用默认值 1 的话，与下面宇航员姿态的权重相当，最终生成的图片里宇航员的姿态不可控。

再来配置第 2 个 ControlNet，用来控制宇航员姿态的 openpose 模型：

注：这个骨架图使用了 openpose-editor 插件制作，也是一个 SD 插件，安装步骤参考本文中 sd-webui-controlnet 插件的安装流程，除了 git 地址不同，其他都一样。

https://github.com/fkunn1326/openpose-editor (opens new window)

这时再使用相同的提示词，点击 "Generate" 按钮，最终生成出来的图片效果如下：

注：关注 FSA全栈行动 (opens new window) 微信公众号，回复 "彩色科幻山" 可获得原始效果图哦~❤️

+ +
+
#AI绘画#AIGC#stable-diffusion#stable-diffusion-webui#ControlNet
AI - stable-diffusion(AI绘画)的搭建与使用
AI - stable-diffusion 艺术化二维码

+ ← + AI - stable-diffusion 艺术化二维码→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b576c8/index.html b/pages/b576c8/index.html new file mode 100644 index 000000000..5ac7c7145 --- /dev/null +++ b/pages/b576c8/index.html @@ -0,0 +1,505 @@ + + + + + + Python - 爬虫之Scrapy | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-13
目录

Python - 爬虫之Scrapy

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、scrapy 概念和流程

# 1、概念

Scrapy 是一个 python 编写的，被设计用于爬取网络数据、提取结构性数据的开源网络爬虫框架。

补充：Scrapy 使用了 Twisted 异步网络框架，可以加快下载速度

# 2、工作流程

scrapy流程图

其流程描述如下：

  1. 爬虫中起始的 url 构造成 request 对象 --> 爬虫中间件 --> 引擎 --> 调度器
  2. 调度器把 request --> 引擎 --> 下载中间件 --> 下载器
  3. 下载器发送请求，获取 response 响应 --> 下载中间件 --> 引擎 --> 爬虫中间件 --> 爬虫
  4. 爬虫提取 url 地址，组装成 request 对象 --> 爬虫中间件 --> 引擎 --> 调度器，重复步骤 2
  5. 爬虫提取数据 --> 引擎 --> 管道处理和保存数据

注意：

  • 图中绿色线条表示数据的传递
  • 图中中间件的位置决定了其作用
  • 引擎处于 4 个模块中间，各个模块之间相互独立，只和引擎进行交互

# 3、各模块的具体作用

模块 作用 是否实现
Scrapy Engine(引擎) 总指挥：负责数据和信号在不同模块之间传递 scrapy 已经实现
Scheduler(调度器) 一个队列，存放引擎发过来的 request 请求 scrapy 已经实现
Downloader(下载器) 下载把引擎发过来的 request 请求，并返回给引擎 scrapy 已经实现
Spider(爬虫) 处理引擎发来的 response，提取数据、url，并交给引擎 需要手写
Item Pipeline(管道) 处理引擎传过来的数据，比如存储 需要手写
Downloader Middlewares(下载中间件) 可以自定义的下载扩展，比如设置代理 一般不用手写
Spider Middlewares(爬虫中间件) 可以自定义 requests 请求和进行 response 过滤 一般不用手写

注意：爬虫中间件 和 下载中间件 只是运行逻辑的位置不同，作用是重复的：如替换 UA 等。

# 二、scrapy 入门使用

# 1、安装 scrapy

scrapy 有 2 种安装方式：

  • 命令：

    sudo apt-get install scrapy
+

  • pip：

    pip/pip3 install scrapy
+

# 2、项目开发流程

  1. 创建项目：

    scrapy startproject <项目名称>
+
+eg:
+	scrapy startproject myspider
+

  2. 生成一个爬虫：

    scrapy genspider <爬虫名字> <允许爬取的域名>
+
+eg:
+	cd myspider
+	scrapy genspider example example.com
+

    • 爬虫名字：作用爬虫运行时的参数

    • 允许爬取的域名：为对于爬虫设置的爬取范围，设置之后用于过滤要爬取的 url，如果爬取的 url 与允许的域不同则被过滤掉

      注意：执行完命令后，myspider/spiders 目录下，会多出一个 example.py 爬虫文件

  3. 提取数据：

    根据网站结构在 spider 中实现数据采集相关内容

  4. 保存数据：

    使用 pipeline 进行数据后续处理和保存

  5. 运行 scrapy

    scrapy crawl <爬虫名字>
+scrapy crawl <爬虫名字> --nolog
+
+eg:
+	scrapy crawl example
+

    注意 ：需要在项目录下执行命令；--nolog 可以关闭框架日志信息输出

# 3、三个内置对象

  • request 请求对象：由 url method post_data headers 等构成
  • response 响应对象：由 url body status headers 等构成
  • item 数据对象：本质是字典

# 1）定位元素以及提取数据

解析并获取 scrapy 爬虫中的数据：利用 xpath 规则字符串进行定位和提取

  • response.xpath()：返回一个类似 List 的类型，其中包含的是 selector 对象，操作和列表一样，但是有一些额外方法： +
    • extract()：返回一个包含有字符串的列表
    • extract_first()：返回列表中的第一个字符串，列表为空则返回 None

# 2）response 响应对象的常用属性

  • response.url：当前响应的 url 地址
  • response.request.url：当前响应对应的请求的 url 地址
  • response.headers：响应头
  • response.request.headers：当前响应的请求头
  • response.body：响应体，也就是 html 代码，byte 类型
  • response.status：响应状态码

# 4、入门实战

# 1）创建项目&爬虫

scrapy startproject myspider
+cd myspider
+scrapy genspider itcast itcast.cn
+

# 2）完善爬虫（抓取数据）

在/myspider/myspider/spiders/itcast.py 中修改内容如下：

import scrapy
+
+class ItcastSpider(scrapy.Spider):
+    name = 'itcast'
+    # 2.检查域名
+    allowed_domains = ['itcast.cn']
+    # 1.修改起始url
+    start_urls = ['http://itcast.cn/channel/teacher.shtml']  # 设置起始的url，我们只需要设置就好，通常会被自动的创建成请求发送
+
+    # 3.在parse方法中实现爬取逻辑
+    def parse(self, response):
+        # 解析方法，通常用于起始url对应响应的解析
+        # 定义对于网站的相关操作
+        # with open('itcast.html', 'wb') as f:
+        #     f.write(response.body)
+
+        # 获取所有老师节点
+        node_list = response.xpath('//div[@class="li_txt"]')
+
+        # 遍历老师节点列表
+        for node in node_list:
+            temp = {}
+
+            # xpath方法返回的是选择器对象列表，extract()用于从选择器对象中提取数据
+            # temp['name'] = node.xpath('./h3/text()')[0].extract()
+            # temp['title'] = node.xpath('./h4/text()')[0].extract()
+            # temp['desc'] = node.xpath('./p/text()')[0].extract()
+
+            # xpath结果为只含有一个值的列表，可以使用extract_first()，如果为多个值则使用extract()
+            temp['name'] = node.xpath('./h3/text()').extract_first()
+            temp['title'] = node.xpath('./h4/text()').extract_first()
+            temp['desc'] = node.xpath('./p/text()').extract_first()
+
+            # {'name': [<Selector xpath='./h3/text()' data='黄老师'>], 'title': [<Selector xpath='./h4/text()' data='高级讲师'>], 'desc': [<Selector xpath='./p/text()' data='15年+的软件开发与教学经验，参与中国联通VOP系统，中国联通在线计费系统...'>]}
+            # extract()之后：
+            # {'name': '黄老师', 'title': '高级讲师', 'desc': '15年+的软件开发与教学经验，参与中国联通VOP系统，中国联通在线计费系统，道路交通事故救助基金管理系统等的开发工作；\r\n拥有丰富的教学经验。'}
+            print(temp)
+
+            yield temp
+

注意：

  • scrapy.Spider爬虫类中必须有名为 parse 的解析
  • 如果网站结构层次比较复杂，也可以自定义其他解析函数
  • 在解析函数中提取的 url 地址如果要发送请求，则必须属于 allowed_domains 范围内，但是 start_urls 中的 url 地址不受这个限制
  • parse() 函数中使用 yield 返回数值。
  • yield 能够传递的对象只能是：BaseItem，Request，dict，None

# 3）完善管道（保存数据）

  1. 定义一个管道类
  2. 重写管道类的 process_item() 方法
  3. process_item() 方法处理完 item 之后必须返回给引擎

这里直接使用创建项目时默认创建好的管道类：/myspider/myspider/pipelines/MyspiderPipeline，修改内容如下：

import json
+
+
+class MyspiderPipeline:
+
+    def __init__(self):
+        self.file = open('itcast.json', 'w')
+
+    def process_item(self, item, spider):
+        # print('item:', item)
+        # 将字典数据序列化
+        json_data = json.dumps(item, ensure_ascii=False) + ',\n'
+
+        # 将数据写入文件
+        self.file.write(json_data)
+
+        # 默认使用完管道之后需要将数据返回给引擎
+        return item
+
+    def __del__(self):
+        self.file.close()
+

# 4）启用管道

ITEM_PIPELINES = {
+   'myspider.pipelines.MyspiderPipeline': 300,
+   # 'myspider.pipelines.MyspiderPipelineOther': 301,
+}
+
  • 配置项中，键为使用的管道类，管道类引用声明使用.进行分割，分别为：项目目录.文件.管理类。
  • 配置项中，值为管道的使用顺序，设置的数值越小越先执行，该值一般设置在 1000 以内。

# 5）运行爬虫

在控制台运行如下命令即可运行爬虫：

scrapy crawl itcast
+scrapy crawl itcast --nolog
+

# 三、scrapy 数据建模(items)

# 1、数据建模

通常在项目开发过程中，需要在 items.py 中进行数据建模

# 1）为什么要建模

  • 定义 item 即提前规划好哪些字段需要抓取，防止手误，因为定义好之后，在运行过程中，系统会自动检查
  • 配置注释一起可以清晰的知道要抓取哪些字段，没有定义的字段不能抓取，在目标字段少的时候可以使用字典代替
  • 使用 scrapy 的一些特定组件中需要 Item 做支持，如 scrapy 的 ImagesPipeline 管道类。

# 2）如何建模

在 items.py 文件中定义发提取的字段：

import scrapy
+
+class MyspiderItem(scrapy.Item):
+    # define the fields for your item here like:
+    name = scrapy.Field()  # 讲师的名字
+    title = scrapy.Field()  # 讲师的职称
+    desc = scrapy.Field()  # 讲师的介绍
+
+# if __name__ == '__main__':
+#     item = MyspiderItem()
+#     item['name'] = 'lqr'  # ok
+#     item['nama'] = 'lqr'  # KeyError: 'MyspiderItem does not support field: nama'
+

注意：scrapy.Item 可以理解为一个更高级的 “字典”，可以对键名进行限制、校验。但切记它不是字典，如果你需要对字典进行操作，可以使用 dict() 将scrapy.Item 进行强制转换。

# 3）使用模板类

模板类定义以后，需要在爬虫中导入并且实例化，之后的使用方法和字典相同：

# 如果报包报错有2种解决办法：
+# 1、PyCharm以myspider为根目录重新打开项目
+# 2、不以myspider为根目录的话，可以右键myspider-->Make Directory as-->Sources Root
+from myspider.items import MyspiderItem
+
+    def parse(self, response):
+        item = MyspiderItem()
+        ...
+        item['name'] = node.xpath('./h3/text()').extract_first()
+        item['title'] = node.xpath('./h4/text()').extract_first()
+        item['desc'] = node.xpath('./p/text()').extract_first()
+		...
+        yield item
+

# 4）开发流程总结

  1. 创建项目

    scrapy startproject 项目名
+

  2. 明确目标

    • 在 items.py 文件中进行建模

  3. 创建爬虫

    • 创建爬虫

      scrapy genspider 爬虫名 允许的域
+

    • 编写爬虫

      修改start_urls
+检查修改allowed_domains
+编写解析方法
+

  4. 保存数据

    • 在 pipelines.py 文件中定义对数据处理的管道
    • 在 settings.py 文件中注册启用管道

# 四、scrapy 处理翻页(Request)

# 1、思路

  1. 找到下一页的 url 地址
  2. 构造 url 地址的请求对象，传递给引擎

# 2、实现步骤

  1. 确定 url 地址

  2. 构造请求

    scrapy.Request(url, callback)
+
    • callback：指定解析函数名称，表示该请求返回的响应使用哪一个函数进行解析

  3. 把请求交给引擎

# 3、实战（网易招聘爬虫）

# 1）思路分析

  1. 获取首页数据
  2. 寻找下一页地址，进行翻页，获取数据

# 2）代码实现

  • 创建项目
scrapy startproject wangyi
+
+cd wangyi
+scrapy gespider job 163.com
+
  • 定义模板类
import scrapy
+
+
+class WangyiItem(scrapy.Item):
+    # define the fields for your item here like:
+    name = scrapy.Field()
+    link = scrapy.Field()
+    depart = scrapy.Field()
+    category = scrapy.Field()
+    type = scrapy.Field()
+    address = scrapy.Field()
+    num = scrapy.Field()
+    date = scrapy.Field()
+
  • 编写爬虫（抓取数据）
import scrapy
+from wangyi.items import WangyiItem
+
+
+class JobSpider(scrapy.Spider):
+    name = 'job'
+    # 2.检查修改allowed_domains
+    allowed_domains = ['163.com']
+    # 1.修改start_urls
+    start_urls = ['https://hr.163.com/position/list.do']
+
+    def parse(self, response):
+        # 提取数据
+        # 获取所有职位节点列表
+        node_list = response.xpath('//*[@class="position-tb"]/tbody/tr')
+
+        # 遍历节点列表
+        for num, node in enumerate(node_list):
+            # 设置过滤条件，将目标节点获取出来
+            if num % 2 == 0:
+                item = WangyiItem()
+                item['name'] = node.xpath('./td[1]/a/text()').extract_first()
+                # item['link'] = 'https://hr.163.com' + node.xpath('./td[1]/a/@href').extract_first()
+                # response.urljoin()用于拼接相对路径的url，可以理解为自动补全
+                item['link'] = response.urljoin(node.xpath('./td[1]/a/@href').extract_first())
+                item['depart'] = node.xpath('./td[2]/text()').extract_first()
+                item['category'] = node.xpath('./td[3]/text()').extract_first()
+                item['type'] = node.xpath('./td[4]/text()').extract_first()
+                item['address'] = node.xpath('./td[5]/text()').extract_first()
+                item['num'] = node.xpath('./td[6]/text()').extract_first().strip()
+                item['date'] = node.xpath('./td[7]/text()').extract_first()
+                # print(item)
+                yield item
+
+        # 模拟翻页
+        part_url = response.xpath('/html/body/div[2]/div[2]/div[2]/div/a[last()]/@href').extract_first()
+        # 判断终止条件
+        if part_url != 'javascript:void(0)':
+            next_url = response.urljoin(part_url)
+            # 构建请求对象，并且返回给引擎
+            yield scrapy.Request(
+                url=next_url,
+                callback=self.parse
+            )
+

注意：引擎根据爬虫 yield 的对象类型，将对象分配给对应的模块处理，比如：如果是模板类对象或字典，则会交给管道(Item Pipeline)；如果是 Request 对象，则会交给队列(Scheduler)。

  • 编写管道（存储数据）
import json
+
+
+class WangyiPipeline:
+
+    def __init__(self):
+        self.file = open('wangyi.json', 'w')
+
+    def process_item(self, item, spider):
+        item = dict(item)
+
+        str_data = json.dumps(item, ensure_ascii=False) + ',\n'
+
+        self.file.write(str_data)
+
+        return item
+
+    def __del__(self):
+        self.file.close()
+
  • 启用管道
ITEM_PIPELINES = {
+    'wangyi.pipelines.WangyiPipeline': 300,
+}
+
  • 运行爬虫
scrapy crawl job --nolog
+

# 3）扩展：

  • 可以在 settings 中设置 ROBOTS 协议

    # False表示忽略网站的robots.txt协议，默认为True
+ROBOTSTXT_OBEY = False
+

  • 可以在 settings 中设置 User-Agent：

    # scrapy发送的每一个请求的默认UA都是设置的这个User-Agent
+USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36'
+

# 4、scrapy.Request 的更多参数

scrapy.Request(url[, callback, method="GET", headers, body, cookies, meta, dont_filter=False])
+

注意：中括号[]里的参数为可选参数

参数解释：

  • callback：表示当前 url 的响应交给哪个函数去处理
  • meta：实现数据在不同的解析函数中传递，meta 默认带有部分数据，比如下载延迟，请求深度等
  • dont_filter：默认为 False，会过滤请求的 url 地址，即请求过的 url 地址不会继续被请求，对需要重复请求的 url 地址可以把它设置为 True，比如贴吧的翻页请求，页面的数据总是在变化，start_urls 中的地址会被反复请求，否则程序不会启动
  • method：指定 POST 或 GET 请求
  • headers：接收一个字典，其中不包括 cookies
  • cookies：接收一个字典，专门放置 cookies
  • body：接收 json 字符串，为 POST 的数据，发送 payload_post 请求时使用

# 1）meta 参数的使用

  • meta 的使用：

    • meta 可以实现数据在不同的解析函数中传递

  • meta 的注意事项：

    • meta 参数是一个字典
    • meta 字典中有一个固定的键 proxy，表示代理 ip

  • 使用举例：

def parse(self, response):
+    ...
+    yield scrapy.Request(detail_url, callback=self.parse_detail, meta={'item': item})
+    ...
+
+
+def parse_detail(self,response):
+    # 获取之前传入的item
+    item = response.meta['item']
+

# 1、模拟登录的不同实现方式

  • requests 模块 +
    • 直接携带 cookies 请求页面
    • 找到 url 地址，发送 post 请求存储 cookie
  • selenium（浏览器自动处理 cookie） +
    • 找到对应的 input 标签，输入文本点击登录
  • scrapy +
    • 直接携带 cookies
    • 找 url 地址，发送 post 请求存储 cookie

# 2、scrapy 直接携带 cookies 获取需要登录信息的页面

应用场景：

  • cookie 过期时间很长，常见于一些不规范的网站
  • 能在 cookie 过期之前把所有的数据拿到
  • 配合其他程序使用，比如其使用 selenium 把登录之后的 cookie 获取到并保存到本地，scrapy 发送请求之前先读取本地 cookie

# 1、start_url 携带 cookie（重写 start_requests 方法）

scrapy 中 start_url 是通过 start_requests 来进行处理的，可能通过重写该方法让 start_url 携带上请求头信息，实现代码如下：

import scrapy
+
+
+class Git1Spider(scrapy.Spider):
+    name = 'git1'
+    allowed_domains = ['github.com']
+    start_urls = ['https://github.com/GitLqr']
+
+    def start_requests(self):
+        """
+        重写start_requests，发送携带cookies的Request。
+        默认start_requests只是普通的get请求，不会携带自定义的头信息
+        """
+        url = self.start_urls[0]
+
+        temp = '_octo=GH1.1.1045146750.1615451260; _device_id=cd8d64981fcb3fd4ba7f587873e97804'
+        # 把cookies字符串转成字典
+        cookies = {data.split('=')[0]: data.split('=')[-1] for data in temp.split('; ')}
+
+        yield scrapy.Request(
+            url=url,
+            callback=self.parse,
+            cookies=cookies
+        )
+
+    def parse(self, response):
+        print(response.xpath('/html/head/title/text()').extract_first())
+

注意：

  • scrapy 中 cookie 不能够放在 headers 中，在构造请求的时候有专门的 cookies 参数，能够接收字典形式的 cookie
  • 可能需要在 settings 中设置 ROBOTS 协议、USER_AGENT

# 2、scrapy.Request 发送 post 请求

scrapy.Request 发送 post 请求有两种方式：

  • 通过 scrapy.Request() 指定 method、body 参数来发送 post 请求（不推荐）

  • 使用 scrapy.FormRequest() 来发送 post 请求（推荐）

注意：scrapy.FormRequest() 能够发送表单和 ajax 请求，参考阅读 https://www.jb51.net/article/146769.htm (opens new window)

举例：

import scrapy
+
+
+class Git2Spider(scrapy.Spider):
+    name = 'git2'
+    allowed_domains = ['github.com']
+    start_urls = ['http://github.com/login']
+
+    def parse(self, response):
+        username = 'GitLqr'
+        password = 'balabala'
+
+        # 从登录页面响应中解析出post数据
+        token = response.xpath('//input[@name="authenticity_token"]/@value').extract_first()
+
+        post_data = {
+            'commit': 'Sign in',
+            'authenticity_token': token,
+            'login': username,
+            'password': password,
+            'webauthn-support': 'supported',
+        }
+        print(post_data)
+
+        # 针对登录url发送post请求
+        yield scrapy.FormRequest(
+            url='https://github.com/session',
+            callback=self.after_login,
+            formdata=post_data
+        )
+
+    def after_login(self, response):
+        yield scrapy.Request('https://github.com/GitLqr', callback=self.check_login)
+
+    def check_login(self, response):
+        print(response.xpath('/html/head/title/text()').extract_first())
+

注意：在 settings.py 中通过设置 COOKIES_DEBUG = True 能够在终端查看到 cookie 的传递过程

# 六、scrapy 管道的使用

# 1、pipeline 中常用的方法

  • process_item(self, item, spider)： +
    • 管道类中必须有的函数
    • 实现对 item 数据的处理
    • 必须 return item
  • open_spider(self, spider)：在爬虫开启的时候仅执行一次
  • close_spider(self, spider)：在爬虫关闭的时候仅执行一次

注意：以上 3 个方法，可以通过 spider.name 获取爬虫的名字

# 2、pipeline 判断数据来源

scrapy 的 Item Pipeline 模块可以有多个管道，当有一个 spider 把数据对象通过引擎交给 Item Pipeline 模块时， Item Pipeline 模块中的所有管道会按 settings.py 中指定的管道顺序一一被执行。但很多时候，我们需要管道针对特定爬虫做数据存储的，这时就需要在管道中对数据对象的来源做判断。

注意：不同的 pipeline 能够对一个或多个爬虫进行不同的数据处理的操作，比如一个进行数据清洗，一个进行数据的保存

举例：

  • 爬虫 1：job.py
import scrapy
+from wangyi.items import WangyiItem
+
+
+class JobSpider(scrapy.Spider):
+    name = 'job'
+    ...
+
+    def parse(self, response):
+        ...
+        yield item
+
  • 爬虫 2：job_simple.py
import scrapy
+from wangyi.items import WangyiSimpleItem
+
+
+class JobSimpleSpider(scrapy.Spider):
+    name = 'job_simple'
+    ...
+
+    def parse(self, response):
+        ...
+        yield item
+
  • 2 个管道：pipelines.py
class WangyiPipeline:
+
+    def open_spider(self, spider):
+        if spider.name == 'job':
+            self.file = open('wangyi.json', 'w')
+
+    def process_item(self, item, spider):
+        if spider.name == 'job':
+            item = dict(item)
+            str_data = json.dumps(item, ensure_ascii=False) + ',\n'
+            self.file.write(str_data)
+        return item
+
+    def close_spider(self, spider):
+        if spider.name == 'job':
+            self.file.close()
+
+
+class WangyiSimplePipeline:
+
+    def open_spider(self, spider):
+        if spider.name == 'job_simple':
+            self.file = open('wangyi_simple.json', 'w')
+
+    def process_item(self, item, spider):
+        if spider.name == 'job_simple':
+            item = dict(item)
+            str_data = json.dumps(item, ensure_ascii=False) + ',\n'
+            self.file.write(str_data)
+        return item
+
+    def close_spider(self, spider):
+        if spider.name == 'job_simple':
+            self.file.close()
+

# 3、pipeline 使用注意点

  • 使用之前需要在 settings 中开启
  • pipeline 在 settings 中键表示位置（即 pipeline 在项目中的位置可以自定义），值表示距离引擎的远近，越近数据会越先经过：权重值小的优先执行
  • 有多个 pipeline 的时候，process_item 的方法必须 return item，否则后一个 pipeline 取到的数据为 None 值
  • pipeline 中 process_item 方法必须要有，否则 item 没有办法接收和处理
  • process_item 方法接收 item 和 spider，其中 spider 表示当前传递 item 过来的 spider
  • open_spider(spider)：能够在爬虫开启的时候执行一次
  • close_spider(spider)：能够在爬虫关闭的时候执行一次
  • 上述俩个方法经常用于爬虫和数据库的交互，在爬虫开启的时候建立和数据库的连接，在爬虫关闭的时候断开和数据库的连接

# 七、scrapy 中间件

# 1、介绍

# 1）分类

根据 scrapy 运行流程中所在位置不同，对 scrapy 中间件进行分类：

  • 下载中间件
  • 爬虫中间件

# 2）作用

scrapy 中间件的作用是：预处理 request 和 response 对象

  • 对 header 以及 cookie 进行更换和处理
  • 使用代理 ip 等
  • 对请求进行定制化操作

# 3）比较

  • 默认情况下，两种中间件都在 middlewares.py 一个文件中

  • 爬虫中间件使用方法和下载中间件相同，且功能重复，通常使用下载中间件

# 2、使用方法

注意：结合 scrapy 流程图可方便理解

scrapy流程图

中间件使用步骤如下：

  1. 在 middlerware.py 中定义中间件类

  2. 在中间件类中，重写处理请求或者响应的方法（以Downloader Middlewares为例）

    • process_request(self, request, spider)

      当每个 request 通过下载中间件时，该方法被调用【Scrapy Engine --> Downloader】

      • 返回 None【继续】：该 request 对象通过引擎传递给其他权重低的 process_request 方法，如果所有中间件都返回 None，则请求最终被交给下载器处理。注意：没有 return 也是返回 None。
      • 返回 Request 对象【中断】：把 request 对象通过引擎交给调度器，此时将不通过其他权重低的 process_request 方法
      • 返回 Response 对象【中断】：请求不会达到下载器，会直接把 response 通过引擎交给 Spider 进行解析

    • process_response(self, request, response, spider)

      当下载器完成 http 请求，传递响应给引擎的时候调用【Scrapy Engine <-- Downloader】

      • 返回 Request 对象【中断】：通过引擎交给调度器继续请求，此时将不通过其他权重低的 process_response 方法
      • 返回 Response 对象【继续】：通过引擎交给爬虫处理或交给权重更低的其他下载中间件的 process_response 方法

  3. 在 settings 文件中开启中间件，权重值越小越优先执行（同管道注册一样）

# 3、实现随机 User-Agent 下载中间件

# 1）准备 UA 列表

在 settings.py 文件中定义一个存放了大量 UA 的列表 USER_AGENT_LIST：

USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36'
+
+USER_AGENT_LIST = [
+    'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50',
+    'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50',
+    'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;',
+    'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)',
+    'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)',
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1',
+    'Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1',
+    'Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11',
+    'Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11',
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_0) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon 2.0)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; TencentTraveler 4.0)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; The World)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Avant Browser)',
+    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)',
+    'Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5',
+    'Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5',
+    'Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5',
+    'Mozilla/5.0 (Linux; U; Android 2.3.7; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1',
+    'MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1',
+    'Opera/9.80 (Android 2.3.4; Linux; Opera Mobi/build-1107180945; U; en-GB) Presto/2.8.149 Version/11.10',
+    'Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13',
+    'Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+',
+    'Mozilla/5.0 (hp-tablet; Linux; hpwOS/3.0.0; U; en-US) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/233.70 Safari/534.6 TouchPad/1.0',
+    'Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124',
+    'Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)',
+    'UCWEB7.0.2.37/28/999',
+    'NOKIA5700/ UCWEB7.0.2.37/28/999',
+    'Openwave/ UCWEB7.0.2.37/28/999',
+    'Mozilla/4.0 (compatible; MSIE 6.0; ) Opera/UCWEB7.0.2.37/28/999',
+    'UCWEB7.0.2.37/28/999',
+    'NOKIA5700/ UCWEB7.0.2.37/28/999',
+    'Openwave/ UCWEB7.0.2.37/28/999',
+    'Mozilla/4.0 (compatible; MSIE 6.0; ) Opera/UCWEB7.0.2.37/28/999'
+]
+

注意：该 USER_AGENT_LIST 变量名可以自定义，也可以写在其他 py 文件中，写在 settings.py 文件中，只是为了规范而已。

# 2）定义下载中间件

在 middlewares.py 文件中定义随机 UA 的下载中间件：

import random
+
+from Douban.settings import USER_AGENT_LIST
+
+
+class RandomUserAgentMiddleware(object):
+    def process_request(self, request, spider):
+        # print(request.headers['User-Agent'])
+        ua = random.choice(USER_AGENT_LIST)
+        request.headers['User-Agent'] = ua
+

# 3）启用下载中间件

在 settings.py 文件中配置开启自定义的下载中间件：

DOWNLOADER_MIDDLEWARES = {
+    'Douban.middlewares.RandomUserAgentMiddleware': 543,
+}
+

# 4、实现 Selenium 渲染的下载中间件

scrapy 的 Downloader 模块只会根据请求获取响应，但实际开发过程中，有些页面上的数据是通过 ajax 延迟加载出来的，Downloader 模块无法应对这种情况，这时就需要用到 Selenium 来处理这类请求，等页面渲染完成后，再把渲染好的页面返回给爬虫即可：

from selenium import webdriver
+from scrapy.http import HtmlResponse
+
+
+class SeleniumMiddleware(object):
+    def __init__(self):
+        self.driver = webdriver.Chrome()
+
+    def process_request(self, request, spider):
+        url = request.url
+
+        # 过滤需要使用selenium渲染的request
+        if 'daydata' in url:
+            self.driver.get(url)
+            time.sleep(3)
+            data = self.driver.page_source
+            self.driver.close()
+
+            # 返回HtmlResponse，请求不会达到Downloader，而是直接通过引擎交给爬虫
+            response = HtmlResponse(url=url, body=data, encoding='utf-8', request=request)
+            return response
+
+    def __del__(self):
+        self.driver.quit()
+
+ +
+
#Python爬虫#Scrapy
Python - 爬虫之Selenium

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b5d9a7/index.html b/pages/b5d9a7/index.html new file mode 100644 index 000000000..8ddeaa713 --- /dev/null +++ b/pages/b5d9a7/index.html @@ -0,0 +1,140 @@ + + + + + + iOS - 面向协议封装全屏旋转功能 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-09-15
目录

iOS - 面向协议封装全屏旋转功能

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

关于使用面向协议来封装功能的实战可以参考我上篇文章 【iOS-面向协议方式封装空白页功能】，这里就不再赘述，我们直接进入使用阶段吧。 +本篇文章只有一个目的，那就是只要遵守协议，一行代码随意切换全屏～

如果对面向协议有疑问的同学可以看下我之前的两篇文章

iOS - Swift 面向协议编程（一）

iOS - Swift 面向协议编程（二）

# 开源库

Name Link
GitHub LXFProtocolTool (opens new window)
Wiki Wiki首页 (opens new window)
本文 Demo LXFFullScreenable (opens new window)

使用Cocoapods的方式来安装即可

pod 'LXFProtocolTool/FullScreenable'
+

# 一、配置

在AppDelegate中实现如下方法

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
+    return UIApplication.shared.lxf.currentVcOrientationMask
+}
+

# 二、使用案例

方法与属性的调用都需要命名空间加上 lxf，如isFullScreen -> lxf.isFullScreen

isFullScreen : 获取当前遵守协议者是否为全屏状态
+
func switchFullScreen(
+    isEnter: Bool? = nil,
+    specifiedView: UIView? = nil,
+    superView: UIView? = nil,
+    config: FullScreenableConfig? = nil,
+    completed: ((_ isFullScreen: Bool)->Void)? = nil
+)
+
Name Type Desc
isEnter Bool? 是否进入全屏
specifiedView UIView? 指定即将全屏的视图
superView UIView? 作为退出全屏后specifiedView的父视图
config FullScreenableConfig? 配置
completed ((_ isFullScreen: Bool)->Void)? 进入/退出 全屏后的回调

当switchFullScreen的调用者为UIView时，如果specifiedView为nil会自动填写，superView也是如此

switchFullScreen方法不推荐直接使用，不过当遵守协议者为UIViewController时，可以通过使用默认参数来切换屏幕方向lxf.switchFullScreen()

lxf_FullScreenable_1

以下分两种情况说明

# UIViewController

func enterFullScreen(
+    specifiedView: UIView,
+    config: FullScreenableConfig? = nil,
+    completed: FullScreenableCompleteType? = nil
+)
+
func exitFullScreen(
+    superView: UIView,
+    config: FullScreenableConfig? = nil,
+    completed: FullScreenableCompleteType? = nil
+)
+

以上两个方法是对switchFullScreen的抽离，使调用时对参数的传递更加清晰

1、遵守协议 FullScreenable

class LXFFullScreenableController: UIViewController, FullScreenable { }
+

2、指定视图进入全屏

lxf.enterFullScreen(specifiedView: cyanView)
+

3、指定视图退出全屏，并添加到当前控制器的view上

lxf.exitFullScreen(superView: self.view)
+

# 🔥自动进入|退出全屏

func autoFullScreen(
+    specifiedView: UIView,
+    superView: UIView,
+    config: FullScreenableConfig? = nil
+) 
+
  • 控制器可以调用该方法来注册自动进入或退出全屏，各控制器之间互不影响。
  • view手动进入全屏会屏蔽当前控制器的自动全屏功能，退出方可恢复

# UIView

func enterFullScreen(
+    specifiedView: UIView? = nil,
+    config: FullScreenableConfig? = nil,
+    completed: FullScreenableCompleteType? = nil
+)
+
func exitFullScreen(
+    superView: UIView? = nil,
+    config: FullScreenableConfig? = nil,
+    completed: FullScreenableCompleteType? = nil
+)
+

以上两个方法是对switchFullScreen的抽离，使调用时对参数的传递更加清晰

1、遵守协议 FullScreenable

class LXFFullScreenView: UIButton, FullScreenable { }
+
let cyanView = LXFFullScreenView()
+

2、进入全屏

cyanView.lxf.enterFullScreen()
+

3、退出全屏

cyanView.lxf.exitFullScreen()
+

这里是对遵守了FullScreenable协议的视图进入全屏切换，由于代码内部已经经过自动视图填写，所以直接调用相应的方法即可，当然也可以自己指定specifiedView和superView

lxf_FullScreenable_2

# 三、FullScreenableConfig说明

上述的方法都有一个config参数，默认为nil，即为默认配置

相关属性说明

Name Type Desc Default
animateDuration Double 进入/退出 全屏时的旋转动画时间 0.25
enterFullScreenOrientation UIInterfaceOrientation 进入全屏时的初始方向 landscapeRight

这里我们把动画时间设置为1s，初始方向为左后来看看效果

FullScreenableConfig(
+    animateDuration: 1,
+    enterFullScreenOrientation : .landscapeLeft
+)
+
cyanView.lxf.enterFullScreen(config: diyConfig)
+cyanView.lxf.exitFullScreen(config: diyConfig)
+

lxf_FullScreenable_3

# 结语

到这里相关的说明已罗列完毕，有什么不清楚的可以下载Demo (opens new window)看看，或者在文章下方留言提问

LXFProtocolTool (opens new window) 主要是通过协议的方式来方便快捷地实现一些的实用功能，除了本文提及的全屏旋转功能外还有其它实用功能的封装，具体内容可以到 Wiki首页 (opens new window) 查找。如果你有什么想实现的功能也可以提出来，喜欢的就给个Star鼓励下我吧 🚀 🚀 🚀，感谢支持！

+ +
+
#iOS#Swift
iOS - 打造Moya便捷解析库，提供RxSwift拓展
Swift - 优雅的适配大小

+ ← + Swift - 优雅的适配大小→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b7cd59/index.html b/pages/b7cd59/index.html new file mode 100644 index 000000000..720de9d82 --- /dev/null +++ b/pages/b7cd59/index.html @@ -0,0 +1,223 @@ + + + + + + Kotlin - 数据类 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-31
目录

Kotlin - 数据类

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# componentN 方法

大前端 es6 中有一个解构的语法特性我很是喜欢，通过类似 let {name,isCheck} = option 的写法就可以从 option 对象中提取出 name 和 isCheck 属性，而不再是使用 let name = option.name 这种写法，解构的语法让代码得以更进一步的简化，那么作为后起之秀的 Kotlin 是否也有这种特性呢？没错，Kotlin 也有（注意：两者还是有区别的），它就是 componentN 方法 ，我们直接来看代码：

class User(val username: String, val age: Int) {
+    operator fun component1(): String {
+        return username
+    }
+
+    operator fun component2(): Int {
+        return age
+    }
+}
+
+fun main() {
+    val user = User("lqr", 18)
+    println("username = ${user.username} , age = ${user.age}")　// username = lqr , age = 18
+
+    val (username, age) = user
+    println("username = $username , age = $age") // username = lqr , age = 18
+
+    println(user)　// com.charylin.kotlinlearn.User@2f0e140b
+}
+

使用 val (arg1, arg2) in object 这种写法，就可以从 object 对象中提取出 component1() 和 component2() 的返回结果，而且 componentN 方法 的返回值类型是没有限制的。

es6 的解构语法是根据变量名提取属性值的，而 Kotlin 的 componentN 方法 则是按顺序调用 componentN() 给变量赋值，所以这两者还是有差别的！！！

# 数据类(data class)

你可能会觉得 Kotlin 为了达到类似 "es6 解构" 的语法特性，对开发者的要求有点高啊，还要自己编写 componentN 方法 ，是的，如果就只是这样的话，那很糗唉，还好，Kotlin 中的 数据类(data class) 就可以自动为对象生成 componentN 方法 ，不仅如此，data class 还会默认生成 toString()、copy() 等方法：

data class User(val username: String, val age: Int)
+
+fun main() {
+    val user = User("lqr", 18)
+    println("username = ${user.username} , age = ${user.age}") // username = lqr , age = 18
+
+    val (username, age) = user
+    println("username = $username , age = $age") // username = lqr , age = 18
+
+    println(user) // User(username=lqr, age=18)
+}
+

可见，使用 data class 就无须自己手写 componentN 方法 了，抛开 "es6 解构" 语法，我们来看 数据类(data class) ，顾名思义， data class 被设计出来就是为了存储数据的，最核心最应该被关注的就是数据本身，所以在声明 data class 时，我们只需要把成员属性写好，剩下的交给 data class ，它会自己处理好 toString()、copy() 等方法，componentN 方法 也只是为了方便开发者提取其中的数据而已。

从 Java 开发者的角度来看，数据类(data class) 的诞生就是为了取代 JavaBean 的。

还记得 IntArray.withIndex() 吗？它的返回值 Iterable<IndexedValue<Int>> 中泛型类 IndexedValue 就是 data class：

// _Arrays.kt
+/**
+ * Returns a lazy [Iterable] of [IndexedValue] for each element of the original array.
+ */
+public fun IntArray.withIndex(): Iterable<IndexedValue<Int>> {
+    return IndexingIterable { iterator() }
+}
+
+// IndexedValue.kt
+/**
+ * Data class representing a value from a collection or sequence, along with its index in that collection or sequence.
+ *
+ * @property value the underlying value.
+ * @property index the index of the value in the collection or sequence.
+ */
+public data class IndexedValue<out T>(public val index: Int, public val value: T)
+

因此，在 for 循环中，才会有 (index, value) in intArray.withIndex() 这种写法，本质上就是使用了 data class 默认生成的 componentN 方法 ：

val intArray = intArrayOf(1, 2, 3, 4, 5)
+for ((index, value) in intArray.withIndex()) {
+    println("index = $index, value = $value")
+}
+

# allOpen 和 noArg 插件

相比 JavaBean，虽然 data class 有很多好用的语法糖特性，但也有其不足的地方：

  • data class 默认 final，无法被继承。
  • data class 默认没有无参构造函数。

借助 Show Kotlin Bytecode 工具，将上面的 data class User 类反编译成 Java 代码，发现确实有这 2 点问题：

public final class User {
+   @NotNull
+   private final String username;
+   private final int age;
+
+   @NotNull
+   public final String getUsername() {
+      return this.username;
+   }
+
+   public final int getAge() {
+      return this.age;
+   }
+
+   public User(@NotNull String username, int age) {
+      super();
+      this.username = username;
+      this.age = age;
+   }
+
+   @NotNull
+   public final String component1() {
+      return this.username;
+   }
+
+   public final int component2() {
+      return this.age;
+   }
+
+   @NotNull
+   public final User copy(@NotNull String username, int age) {
+      Intrinsics.checkParameterIsNotNull(username, "username");
+      return new User(username, age);
+   }
+
+   @NotNull
+   public String toString() {
+      return "User(username=" + this.username + ", age=" + this.age + ")";
+   }
+
+   public int hashCode() { ... }
+
+   public boolean equals(@Nullable Object var1) { ... }
+}
+

在一些开发场景下(如数据库)，会要求数据类必须要有无参构造函数或可继承，这对 data class 本身来说是无解的，但可以借助 allOpen 和 noArg 插件来解决这个问题，让 data class 在编译期增加无参构造器（noArg 插件），并去除 final 限制（allOpen 插件），集成这 2 个插件的步骤如下：

# 1. 声明注解类

编写一个注解类，名字随便，后续用得到：

annotation class Poko
+

# 2. 配置 Gradle 脚本

在工程的 gradle 脚本文件中，配置 allOpen 和 noArg 插件：

buildscript {
+    ext.kotlin_version = '1.3.72'
+    repositories {
+        mavenCentral()
+    }
+    dependencies {
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        // Step1. 依赖插件
+        classpath "org.jetbrains.kotlin:kotlin-noarg:$kotlin_version"
+        classpath "org.jetbrains.kotlin:kotlin-allopen:$kotlin_version"
+    }
+}
+
+// Step2. 应用插件
+apply plugin: "kotlin-noarg"
+apply plugin: "kotlin-allopen"
+
+// Step3. 配置插件
+noArg {
+    // invokeInitializers = true // ture：无参构造器中执行 init{} 代码；false(默认值)：不执行 init{} 代码
+    annotation("com.charylin.kotlinlearn.annotation.Poko")
+}
+allOpen {
+    annotation("com.charylin.kotlinlearn.annotation.Poko")
+}
+

Gradle 脚本中，noArg 和 allOpen 配置项就用到了前面的注解类 Poko，只需要把注解类 Poko 的全路径配置进去就好了。

# 3.使用注解类

在 data class 上使用注解类 Poko ：

@Poko
+data class User(val username: String, val age: Int)
+

经过上述步骤便完成了 allOpen 和 noArg 插件的集成和使用，接下来就是 rebuild project，然后再反编译看看 User 类的 Java 代码：

public class User {
+   ...
+   public User(@NotNull String username, int age) {
+      Intrinsics.checkParameterIsNotNull(username, "username");
+      super();
+      this.username = username;
+      this.age = age;
+   }
+
+   public User() {
+   }
+}
+

可以看到，final 限制去除了，也多了一个无参构造器。前面也提到了，这 2 个插件是在编译期对 data class 进行修改，也就是说，我们无法在编译期之前（也就是 coding 的时候）去使用该无参构造器或继承该 data class，不过呢，可以通过反射来处理这个问题。

+ +
+
#data class#componentN#allOpen#noArg
Kotlin - 属性代理
Kotlin - 内部类

+ ← + Kotlin - 内部类→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/b960c3/index.html b/pages/b960c3/index.html new file mode 100644 index 000000000..f7dafde58 --- /dev/null +++ b/pages/b960c3/index.html @@ -0,0 +1,268 @@ + + + + + + Python - 爬虫基础与requests模块 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-07-01
目录

Python - 爬虫基础与requests模块

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、爬虫基础

  • 概念 +
    • 模拟浏览器，发送请求，获取响应
  • 作用 +
    • 数据采集
    • 软件测试
    • 抢票
    • 网站上的投票
    • 网络安全

虫师 博客：https://www.cnblogs.com/fnng/ (opens new window)

# 1、http 与 https 的概念和区别

  • HTTP：超文本传输协议，默认端口号是 80。 +
    • 超文本：指超过文本，不仅限于文本；还包括图片、音频、视频等文件。
    • 传输协议：是指使用共同约定的固定格式来传递转换成字符串的超文本内容。
  • HTTPS：HTTP + SSL（安全套接字层），即带有安全套接字层的超文本传输协议，默认端口号：443。 +
    • SSL：对传输的内容（超文本，也就是请求体或响应体）进行加密。

结论：HTTPS 比 HTTP 更安全，但是性能要低一点。

# 2、常见请求头与响应头

# 1）请求头

  • Content-Type：内容类型（用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件）
  • Host：主机和端口号
  • Connection：链接类型
  • Upgrade-Insecure-Requests：升级为 HTTPS 请求
  • User-Agent：用户代理，提供系统信息和浏览器信息
  • Referer：页面跳转处，常用于防盗链（图片/视频）
  • Cookie：状态保持（有时效性）
  • Authroization：用于表示 HTTP 协议中需要认证资源的认证信息，比如 jwt 认证

注意：加粗的请求头为常用请求头，在服务器被用来进行爬虫识别的频率最高，相较于其余的请求头更为重要。

# 2）响应头

  • Set-Cookie：服务器设置 cookie 到用户浏览器的缓存

# 3、常见的响应状态码

  • 200：成功
  • 302：跳转，新的 url 在响应的 Location 头中给出
  • 303：浏览器对于 POST 的响应进行重定向至新的 url
  • 307：浏览器对于 GET 的响应重定向至新的 url
  • 403：资源不可用；服务器理解客户的请求，但拒绝处理它（没有权限）
  • 404：找不到该页面
  • 500：服务器内部错误
  • 503：服务器由于维护或者负载过重未能应答，在响应中可能会携带 Retry-After 响应头；有可能是因为爬虫频繁访问 url，使服务器忽视爬虫的请求，最终返回 503 响应状态码

注意：所有的状态码都不可信，一切以是否从抓包得到的响应中获取到数据为准。

# 4、代理

# 1）匿名度

根据代理 ip 的匿名程序，代理 IP 可以分为下面三类：

  • 透明代理：透明代理虽然可以直接“隐藏”你的 IP 地址，但还是可以查到你是谁。目标服务器接收到的请求头如下：
REMOTE_ADDR = Proxy IP
+HTTP_VIA = Proxy IP
+HTTP_X_FORWARDED_FOR = Your IP
+
  • 匿名代理：使用匿名代理，别人只能知道你用了代理，无法知道你是谁。目标服务器接收到的请求头如下：
REMOTE_ADDR = Proxy IP
+HTTP_VIA = Proxy IP
+HTTP_X_FORWARDED_FOR = Proxy IP
+
  • 高匿代理：高匿代理让别人根本无法发现你在使用代理，所以高匿代理是最好的选择。毫无疑问使用高匿代理效果最好。目标服务器接收到的请求头如下：
REMOTE_ADDR = Proxy IP
+HTTP_VIA = not determined
+HTTP_X_FORWARDED_FOR = not determined
+

# 2）协议

根据网站所使用的协议不同，需要使用相应协议的代理服务。从代理服务请求使用的协议可以分为：

  • http 代理：目标 url 为 http 协议
  • https 代理：目标 url 为 https 协议
  • socks 隧道代理（例如 socks5 代理）等： +
    • socks 代理只是简单地传递数据包，不关心是何种应用协议（FTP、HTTP 和 HTTPS 等）
    • socks 代理比 http、https 代理耗时少
    • socks 代理可以转发 http 和 https 的请求

# 二、requests 模块

# 1、requests 安装及简单使用

# 1）安装

pip/pip3 install requests
+

# 2）发送 get 请求

import requests
+
+url = 'http://www.baidu.com'
+
+# 向目标url发送get请求
+response = requests.get(url)
+
+# print(response.encoding)  # ISO-8859-1
+
+# 打印响应内容（中文可能会乱码）
+print(response.text)
+

注意：response.text 是 requests 模块按照 chardet 模块推测出的编码字符集进行解码的结果。

# 3）字符编码（解决中文乱码）

response.text 和 response.content 的区别：

  • response.text
    • 类型：str
    • 解码类型：requests 模块自动根据 HTTP 头部，对响应的编码作出有根据的推测，推测出文本的编码。
  • response.content
  • 类型：bytes
  • 解码类型：没有指定
# ####### 指定 response.text 编码 #######
+# 手动指定编码格式
+response.encoding = 'utf8'
+print(response.text)
+
+# ####### 指定 response.content 编码 #######
+# response.content 是存储的bytes类型的响应源码，可以进行decode操作
+# print(response.content.decode('gbk'))
+print(response.content.decode())  # 默认utf-8
+

# 2、Response 响应对象常用属性或方法

  • response.url ：响应的 url；有时候响应的 url 和请求的 url 并不一致
  • response.status_code ：响应状态码
  • response.request.headers ：响应对应的请求头
  • response.headers ：响应头
  • response.request._cookies ：响应对应请求的 cookie；返回 cookieJar 类型
  • response.cookies ：响应的 cookie（经过了 set-cookie 动作；返回 cookieJar 类型）
  • response.json() ：自动将 json 字符串类型的响应内容转换为 python 对象（dict or list）
import requests
+
+url = 'http://www.baidu.com'
+
+# 向目标url发送get请求
+response = requests.get(url)
+
+# 打印响应内容
+# print(response.text)
+# print(response.content.decode())
+print(response.url)					# 响应的url
+print(response.status_code)			# 响应的状态码
+print(response.request.headers)		# 响应对象的请求头
+print(response.headers)				# 响应头
+print(response.request._cookies)	# 请求携带的cookies
+print(response.cookies)				# 响应中携带的cookies
+

# 3、requests 模块发送请求

# 1）发送带请求头的请求

requests.get(url, headers=headers)：

  • headers 参数接收字典形式的请求头
  • 请求头字段名为 key，字段对应的值为 value
import requests
+
+url = 'http://www.baidu.com'
+
+# 构建请求头字典
+headers = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36'
+}
+
+# 发送带请求头的请求
+response = requests.get(url, headers=headers)
+
+print(response.content.decode())
+

# 2）发送带参数的请求

  • 方式一：在 url 中携带参数，即直接对含有参数的 url 发起请求
  • 方式二：通过 params 携带参数，即构建请求参数字典 data 并设置给 params +
    • requests.get(url, params=data)
import requests
+
+headers = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36'
+}
+
+# 方式一：在url中携带参数
+# url = 'http://www.baidu.com/s?wd=python'
+# response = requests.get(url, headers=headers)
+
+# 方式二：通过params携带参数
+url = 'http://www.baidu.com/s'
+# 构建参数字典
+data = {
+    'wd': 'python'
+}
+
+response = requests.get(url, headers=headers, params=data)
+

# 3）发送带 cookie 的请求

  • 方式一：在 headers 参数中携带 cookie
  • 方式二：使用 cookies 参数 +
    • response = requests.get(url, cookies)
url = 'https://github.com/GitLqr'
+
+# 方式一：在headers参数中携带cookie
+# 构建请求头
+# headers = {
+#     ...,
+#     'Cookie': '_octo=GH1.1.1045146750.1615451260; balabala...',
+# }
+# response = requests.get(url, headers=headers)
+
+
+# 方式二：使用 cookies 参数(字典)
+# 注意：需要字符串 --> 字典
+temp = '_octo=GH1.1.1045146750.1615451260; _device_id=cd8d64981fcb3fd4ba7f587873e97804;balabala...'
+cookie_list = temp.split('; ')
+# 稳妥方案
+# cookies = {}
+# for cookie in cookie_list:
+#     cookies[cookie.split('=')[0]] = cookie.split('=')[-1]
+# 推导式方案
+cookies = {cookie.split('=')[0]: cookie.split('=')[-1] for cookie in cookie_list}
+response = requests.get(url, cookies=cookies)
+

# 4）cookieJar 对象与字典互转

# cookieJar对象 转换为 cookies字典
+dict_cookies = requests.utils.dict_from_cookiejar(response.cookies)
+
+# cookies字典 转换为 cookieJar对象
+jar_cookies = requests.utils.cookiejar_from_dict(dict_cookies)
+

# 5）设置请求超时参数 timeout

requests.get(url, timeout=3)：

  • timeout=3 表示：发送请求后，3 秒内返回响应，否则就抛出异常
import requests
+
+url = 'https://twitter.com'
+
+response = requests.get(url, timeout=3)
+

# 6）proxies 代理参数的使用

response = requests.get(url, proxies=proxies)：

  • proxies 类型：字典
import requests
+
+url = 'http://www.baidu.com'
+
+proxies = {
+    'http': 'http://61.160.210.234:808',
+    'https': 'https://61.160.210.234:808',
+}
+
+response = requests.get(url, proxies=proxies)
+

注意：代理使用成功不会有任何报错，能成功获取响应；如果失败，要么卡滞，要么报错。

# 7）使用 verify 参数忽略 CA 证书

当某些网站的 CA 证书没有经过【受信任的根证书颁发机构】的认证，访问时会被拦截，浏览器会显示【您的连接不是私密连接】等提示，这时有 2 种解决方案：

  • 方式一：下载该网站的 CA 证书，手动导入给当前设备
  • 方式二：使用 response = requests.get(url, verify=False) 直接忽略 CA 证书验证 +
    • verify 参数能够忽略 CA 证书的认证
import requests
+
+url = 'https://sam.huat.edu.cn:8443/selfservice/'
+
+# 报错：requests.exceptions.SSLError: HTTPSConnectionPool(host='sam.huat.edu.cn', port=8443): Max retries exceeded with url: /selfservice/ (Caused by SSLError(SSLCertVerificationError(1, '[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: self signed certificate (_ssl.c:1125)')))
+# response = requests.get(url)
+
+# 警告：InsecureRequestWarning: Unverified HTTPS request is being made to host '127.0.0.1'. Adding certificate verification is strongly advised.
+response = requests.get(url, verify=False)
+

# 8）发送 post 请求

response = requests.post(url, data)：

  • data 参数接收一个字典
  • request 模块发送 post 请求函数的其它参数和发送 get 请求的参数完全一致
import requests
+import json
+import sys
+
+
+class King(object):
+    def __init__(self, word):
+        self.url = 'https://ifanyi.iciba.com/index.php?c=trans&m=fy&client=6&auth_user=key_ciba&sign=37218aa29f55fdcc'
+        self.headers = {
+            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
+        }
+        self.data = {
+            'from': 'auto',
+            'to': 'auto',
+            'q': word
+        }
+
+    def get_data(self):
+        # 使用post方法发送一个post请求，data为请求体的字典
+        response = requests.post(self.url, data=self.data, headers=self.headers)
+        return response.content
+
+    def parse_data(self, data):
+        # loads方法将json字符串转换成python字典
+        dict_data = json.loads(data)
+        print(dict_data['content']['out'])
+
+    def run(self):
+        response = self.get_data()
+        print(response)
+        self.parse_data(response)
+
+
+if __name__ == '__main__':
+    # word = input('请输入要翻译的单词或句子:')
+    # word = sys.argv[1]
+    word = '字典'
+    king = King(word=word)
+    king.run()
+

# 9）利用 requests.session 进行状态保持

requests 模块中的 Session 类能够自动处理发送请求获取响应过程中产生的 cookie，进而达到状态保持的目的。

  • 作用：自动处理 cookie
  • 场景：连续的多次请求
  • 使用方法：
session = requests.session() # 实例化session对象
+response = session.get(url, headers, ...)
+response = session.post(url, data, ...)
+

注意：session 对象发送 get 或 post 请求的参数，与 requests 模块发送请求的参数完全一致

+ +
+
#Python爬虫#requests
Mac上pyenv的安装与使用
Python - 爬虫之数据提取

+ ← + Python - 爬虫之数据提取→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ba99fe/index.html b/pages/ba99fe/index.html new file mode 100644 index 000000000..ef1ee092e --- /dev/null +++ b/pages/ba99fe/index.html @@ -0,0 +1,519 @@ + + + + + + MaterialDesign之SearchView全面解锁 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-05-19
目录

MaterialDesign之SearchView全面解锁

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

SearchView是v7包中的一个兼容性控件，它可以单独使用，也可以配合menu+toolbar一起使用。本文将使用第二种方式，对SearchView进行探索。最后将通过代码实战，实现 “仿网易云音乐本地音乐搜索” 效果，带你全面解锁SearchView的UI定制及查询功能的实现。

# 二、常规使用

*本文重点是SearchView，所以对Toolbar的使用及注意事项在本文中将不会有过多的体现，如需了解可自行百度或直接查看本Demo源码（源码在文末）。

# 1、在menu的xml文件中配置

要跟menu一起使用，就必须在menu的xml文件中对其中的一个item进行actionViewClass属性配置，如：

<?xml version="1.0" encoding="utf-8"?>
+<menu xmlns:android="http://schemas.android.com/apk/res/android"
+      xmlns:app="http://schemas.android.com/apk/res-auto"
+      xmlns:tools="http://schemas.android.com/tools">
+    <item
+        android:id="@+id/menu_search"
+        android:orderInCategory="100"
+        android:title="搜索"
+        app:actionViewClass="android.support.v7.widget.SearchView"
+        app:showAsAction="always"
+        />
+	...
+</menu>
+

这个item跟普通item的差别在于使用了app:actionViewClass属性（注意是app:开头的！！！），这里使用的是兼容性控件里的SearchView，所以取值"android.support.v7.widget.SearchView"。其中title的设置不会生效（一般设置了title的item，长按后会有弹出提示文字），这里去掉也无所谓。

# 2、在onCreateOptionsMenu()中得到SearchView

我们知道menu在创建时会回调Activity中的onCreateOptionsMenu(Menu menu)方法，通过该方法可以得到Menu对象，而SearchView是Menu中item的一个actionView，actionView可以通过MenuItemCompat获取，故，通过Menu对象可以得到SearchView。

@Override
+public boolean onCreateOptionsMenu(Menu menu) {
+    getMenuInflater().inflate(R.menu.search_view, menu);
+    MenuItem searchItem = menu.findItem(R.id.menu_search);
+    //通过MenuItem得到SearchView
+    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+	...
+    return super.onCreateOptionsMenu(menu);
+}
+

到这里就可以看到效果了：

# 3、对SearchView进行设置

# 默认展开搜索框

手淘的首页搜索框是默认展开的，使用SearchView可以做一样的效果。此外，SearchView有三种默认展开的设置，效果上有略微不同，请结合注释与图片仔细观察。

/*------------------ SearchView有三种默认展开搜索框的设置方式，区别如下： ------------------*/
+//设置搜索框直接展开显示。左侧有放大镜(在搜索框中) 右侧有叉叉 可以关闭搜索框
+mSearchView.setIconified(false);
+//设置搜索框直接展开显示。左侧有放大镜(在搜索框外) 右侧无叉叉 有输入内容后有叉叉 不能关闭搜索框
+mSearchView.setIconifiedByDefault(false);
+//设置搜索框直接展开显示。左侧有无放大镜(在搜索框中) 右侧无叉叉 有输入内容后有叉叉 不能关闭搜索框
+mSearchView.onActionViewExpanded();
+

按顺序效果依次如下：

setIconified(false)

setIconifiedByDefault(false)

onActionViewExpanded()

# SearchView的常规设置

//设置最大宽度
+mSearchView.setMaxWidth(500);
+//设置是否显示搜索框展开时的提交按钮
+mSearchView.setSubmitButtonEnabled(true);
+//设置输入框提示语
+mSearchView.setQueryHint("hint");
+

比较容易，直接看下效果：

# SearchView的事件监听

SearchView提供的事件监听还是比较丰富的，一般常用的有打开搜索框按钮的点击事件、清空或关闭搜索框按钮的点击事件、搜索框文字变化事件等。

//搜索框展开时后面叉叉按钮的点击事件
+mSearchView.setOnCloseListener(new SearchView.OnCloseListener() {
+    @Override
+    public boolean onClose() {
+        Toast.makeText(getApplicationContext(), "Close", Toast.LENGTH_SHORT).show();
+        return false;
+    }
+});
+//搜索图标按钮(打开搜索框的按钮)的点击事件
+mSearchView.setOnSearchClickListener(new View.OnClickListener() {
+    @Override
+    public void onClick(View v) {
+        Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
+    }
+});
+//搜索框文字变化监听
+mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
+    @Override
+    public boolean onQueryTextSubmit(String s) {
+        Log.e("CSDN_LQR", "TextSubmit : " + s);
+        return false;
+    }
+
+    @Override
+    public boolean onQueryTextChange(String s) {
+        Log.e("CSDN_LQR", "TextChange --> " + s);
+        return false;
+    }
+});
+

这个也比较容易，直接看下效果：

以上就是SearchView给开发者提供的常规方法调用和属性设置，但是这并不能满足我们的开发需求，因为开发中大部分设计师根据不管MaterialDesign的设计规范，所以大多数情况下需要根据UI设计稿自定义SearchView的样式了，这相对比较复杂，下面将通过实战来学习SearchView的样式自定义，以此来满足我们的开发需求。

# 三、实战

仿网易云音乐本地音乐搜索，先看下效果，然后开始实战：

# 1、设置Toolbar

# 1）创建该界面的布局activity_search_view2.xml

# 指定Toolbar的高度、NaviagtionIcon、标题、字体等
<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              xmlns:app="http://schemas.android.com/apk/res-auto"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <android.support.v7.widget.Toolbar
+        android:id="@+id/toolbar"
+        style="@style/Toolbar.MyStyle"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        android:background="?attr/colorPrimary"
+        app:navigationIcon="@mipmap/lg"
+        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
+        app:title="本地音乐"
+        app:titleTextAppearance="@style/Toolbar.TitleText"
+        app:titleTextColor="@android:color/white"/>
+</LinearLayout>
+

其中style指向的Toolbar.MyStyle是设置标题与NavigationIcon的距离，titleTextAppearance指向的Toolbar.TitleText是设置标题文字大小。

# 在style.xml中创建Toolbar的自定义样式
<!--标题与NavigationIcon的距离-->
+<style name="Toolbar.MyStyle" parent="Base.Widget.AppCompat.Toolbar">
+    <item name="contentInsetStart">0dp</item>
+    <item name="contentInsetStartWithNavigation">0dp</item>
+</style>
+
+<!--Toolbar标题文字大小-->
+<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
+    <item name="android:textSize">15sp</item>
+</style>
+

如果不设置的话，效果不好，NavigationIcon和Toolbar的标题之前的间距看起来很大，下面看下设置前后的差别：

# 2）设置去除ActionBar的主题

# 在Style.xml中创建无ActionBar的主题，并设置主题背景色
<style name="AppTheme.NoActionBar2" parent="AppTheme">
+    <item name="colorPrimary">#D33A31</item>
+    <item name="colorPrimaryDark">#D33A31</item>
+    <item name="windowActionBar">false</item>
+    <item name="windowNoTitle">true</item>
+    <!--设置menu中item的图标颜色-->
+    <item name="android:textColorSecondary">#ffffff</item>
+</style>
+

不设置textColorSecondary的话，默认menu的item图标是黑色，下面看下设置前后的差别：

# 为Activity设置主题
<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.lqr.materialdesigndemo">
+
+    <application
+        ...
+        android:theme="@style/AppTheme">
+        ...
+
+        <activity
+            android:name=".SearchViewActivity2"
+            android:screenOrientation="portrait"
+            android:theme="@style/AppTheme.NoActionBar2"/>
+    </application>
+</manifest>
+

# 3）在Activity中设置Toolbar的代码如下：

public class SearchViewActivity2 extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_search_view2);
+		// 使用Toolbar代替actionbar
+        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
+        setSupportActionBar(toolbar);
+    }
+    ...
+}
+

# 2、设置Menu

# 1）创建菜单布局search_view.xml

跟之前的代码相比，只是多加了几个item而已。

<?xml version="1.0" encoding="utf-8"?>
+<menu xmlns:android="http://schemas.android.com/apk/res/android"
+      xmlns:app="http://schemas.android.com/apk/res-auto"
+      xmlns:tools="http://schemas.android.com/tools">
+    <item
+        android:id="@+id/menu_search"
+        android:orderInCategory="100"
+        android:title="搜索"
+        app:actionViewClass="android.support.v7.widget.SearchView"
+        app:showAsAction="always"
+        />
+    <item
+        android:id="@+id/scan_local_music"
+        android:icon="@mipmap/lv"
+        android:orderInCategory="100"
+        android:title="扫描本地音乐"
+        app:showAsAction="never"
+        />
+    <item
+        android:id="@+id/select_sort_way"
+        android:icon="@mipmap/lt"
+        android:orderInCategory="100"
+        android:title="选择排序方式"
+        app:showAsAction="never"
+        />
+    <item
+        android:id="@+id/get_cover_lyrics"
+        android:icon="@mipmap/lq"
+        android:orderInCategory="100"
+        android:title="获取封面歌词"
+        app:showAsAction="never"
+        />
+    <item
+        android:id="@+id/imporve_tone_quality"
+        android:icon="@mipmap/lw"
+        android:orderInCategory="100"
+        android:title="升级音质"
+        app:showAsAction="never"
+        />
+</menu>
+

# 2）在Activity中设置Menu的代码如下：

public class SearchViewActivity2 extends AppCompatActivity {
+
+    private SearchView mSearchView;
+    ...
+    @Override
+    public boolean onCreateOptionsMenu(Menu menu) {
+        getMenuInflater().inflate(R.menu.search_view, menu);
+        MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+        //通过MenuItem得到SearchView
+        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+
+        return super.onCreateOptionsMenu(menu);
+    }
+
+    // 让菜单同时显示图标和文字
+    @Override
+    public boolean onMenuOpened(int featureId, Menu menu) {
+        if (menu != null) {
+            if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
+                try {
+                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
+                    method.setAccessible(true);
+                    method.invoke(menu, true);
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        }
+        return super.onMenuOpened(featureId, menu);
+    }
+}
+

到这里，除了搜索框（SearchView）以外，整个布局的效果大体上都实现了：

# 3、定制SearchView样式

接下来要实现的样式自定义有：

重点来了，我们先来分析一下。SearchView本身不向外提供 “关闭搜索框” 和 “设置搜索框左边的搜索图标” 等方法，所以需要通过其他的方式来实现样式自定义。

# 考虑：

如果SearchView的布局结构是通过xml布局文件来实现的，那么可以通过SearchView.findViewById（）的方式得到其中的部分或所有的控件；如果是通过代码动态添加的话，那么可以通过反射的方式得到我们需要的控件，进而对控件进行样式设置。

# 结论：

实现证明，SearchView的布局结构就是使用xml布局文件实现的，该xml文件名为abc_search_view.xml，且基本上每个控件都有id，这样就可以拿到需要的控件来实现样式自定义了。

# 1）点击返回按钮，退出搜索框（若搜索框显示的话）

SearchView本身没有提供关闭搜索框的方法（反正我是没找到啊~~），不过SearchView中正好有一个onCloseClicked()方法是用来关闭搜索框，我们可以通过反射来调用该方法，先来理解下该方法都做了什么，onCloseClicked()的代码如下：

void onCloseClicked() {
+    Editable text = this.mSearchSrcTextView.getText();
+	//如果搜索框中有文字，则清除其中的文字
+    if(TextUtils.isEmpty(text)) {
+        if(this.mIconifiedByDefault && (this.mOnCloseListener == null || !this.mOnCloseListener.onClose())) {
+            this.clearFocus();
+            this.updateViewsVisibility(true);
+        }
+    } 
+	//否则关闭搜索框
+	else {
+        this.mSearchSrcTextView.setText("");
+        this.mSearchSrcTextView.requestFocus();
+        this.setImeVisibility(true);
+    }
+}
+

这里要考虑到，当搜索框显示时，按下Toolbar的返回按钮关闭搜索框，否则就关闭当前界面。因为搜索框也有id，所以我们可以通过id可以得到搜索框控件，用来判断当前搜索框的显隐状态。结合SearchView内部的onCloseClicked()方法，最后Toolbar返回按钮的点击事件代码可以这么写：

public class SearchViewActivity2 extends AppCompatActivity {
+
+    private SearchView mSearchView;
+    private SearchView.SearchAutoComplete mSearchAutoComplete;
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_search_view2);
+        ...
+		//Toolbar返回按钮的点击事件
+        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                if (mSearchAutoComplete.isShown()) {
+                    try {
+						//如果搜索框中有文字，则会先清空文字，但网易云音乐是在点击返回键时直接关闭搜索框
+                        mSearchAutoComplete.setText("");
+                        Method method = mSearchView.getClass().getDeclaredMethod("onCloseClicked");
+                        method.setAccessible(true);
+                        method.invoke(mSearchView);
+                    } catch (Exception e) {
+                        e.printStackTrace();
+                    }
+                } else {
+                    finish();
+                }
+            }
+        });
+    }
+
+    @Override
+    public boolean onCreateOptionsMenu(Menu menu) {
+        getMenuInflater().inflate(R.menu.search_view, menu);
+        MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+        //通过MenuItem得到SearchView
+        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+		//通过id得到搜索框控件
+        mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
+
+        return super.onCreateOptionsMenu(menu);
+    }
+
+    ...
+}
+

# 2）隐藏搜索框左边的搜索图标

搜索框中左边的搜索图标不是一个控件，所以没办法通过id得到，但好在可以通过设置style的方式来修改SearchView所有的图标。方法也很简单，只需创建一个style（这里取名Widget.SearchView）继承自Widget.AppCompat.SearchView，然后替换需要修改的属性即可。先看下Widget.AppCompat.SearchView的父级Base.Widget.AppCompat.SearchView吧：

可以看到，这个父级style提供了SearchView中几乎所有的Icon属性，这意味着在图标定制上可以有很大拓展性。其中，layout是指定SearchView的布局，原始布局就是abc_search_view.xml，我们一般不会去动这个属性。 +这里我们只需要去掉搜索框左边的图标（即：searchHintIcon），直接设置为@null就好了，如下修改style文件中的Widget.SearchView主题：

<!--没有ActionBar主题，自定义SearchView样式-->
+<style name="AppTheme.NoActionBar2" parent="AppTheme">
+    ...
+    <!--引入SearchView的自定义样式-->
+    <item name="searchViewStyle">@style/Widget.SearchView</item>
+</style>
+
+<style name="Widget.SearchView" parent="Widget.AppCompat.SearchView">
+	<!--修改搜索框提示文字-->
+    <item name="defaultQueryHint">搜索本地歌曲</item>
+	<!--修改打开搜索框的搜索按钮的图标-->
+    <item name="searchIcon">@mipmap/m5</item>
+	<!--修改搜索框左边的搜索按钮图标-->
+    <item name="searchHintIcon">@null</item>
+</style>
+

# 3）设置搜索框的提示文字

# 修改提示文字内容

修改搜索框提示文字的方式有两种，一种就是修改SearchView的style，如上一步中，修改Widget.AppCompat.SearchView的defaultQueryHint属性；另一种方式是调用SearchView的setQueryHint()来修改。这两种方式都可以，如果同时用这两种方式来设置搜索框的提示语，则最终的提示内容将以代码设置方式为主。

@Override
+public boolean onCreateOptionsMenu(Menu menu) {
+    getMenuInflater().inflate(R.menu.search_view, menu);
+    MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+    //通过MenuItem得到SearchView
+    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
+
+	//通过代码方式修改提示文字内容
+    mSearchView.setQueryHint("搜索本地歌曲by code");
+
+｝
+

# 修改提示文字样式

SearchView也没有提供任何直接修改搜索框提示文字样式的方法，但既然我们可以通过id得到搜索框控件，那设置提示文字的样式便不是什么问题了，代码如下：

@Override
+public boolean onCreateOptionsMenu(Menu menu) {
+    getMenuInflater().inflate(R.menu.search_view, menu);
+    MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+    //通过MenuItem得到SearchView
+    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
+    mSearchView.setQueryHint("搜索本地歌曲by code");
+
+    //设置输入框提示文字样式
+    mSearchAutoComplete.setHintTextColor(getResources().getColor(android.R.color.darker_gray));
+    mSearchAutoComplete.setTextColor(getResources().getColor(android.R.color.background_light));
+    mSearchAutoComplete.setTextSize(14);
+
+    return super.onCreateOptionsMenu(menu);
+}
+

# 4）根据搜索框中有无文字，来显隐搜索框右边的叉叉

这个有点像searchView.onActionViewExpanded()的效果，唯一的区别就是搜索框不能是默认展开的，这要怎么办呢？通过观察onActionViewExpanded()的源码，可以发现该方法中调用了setIconified(false)！！！再联想到setIconified(false)本身就有让搜索框默认展开的效果，这是不是意味着，只要让onActionViewExpanded()的setIconified(false)改为setIconified(true)就好了呢？答案是是的。而且不需要重写SearchView，因为onActionViewExpanded()和setIconified(true)是可以搭配使用的，只要依次调用这两个方法就可以实现这种效果了，代码如下：

@Override
+public boolean onCreateOptionsMenu(Menu menu) {
+    getMenuInflater().inflate(R.menu.search_view, menu);
+    MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+    //通过MenuItem得到SearchView
+    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
+    mSearchView.setQueryHint("搜索本地歌曲by code");
+
+    //设置输入框提示文字样式
+    mSearchAutoComplete.setHintTextColor(getResources().getColor(android.R.color.darker_gray));
+    mSearchAutoComplete.setTextColor(getResources().getColor(android.R.color.background_light));
+    mSearchAutoComplete.setTextSize(14);
+
+    //设置搜索框有字时显示叉叉，无字时隐藏叉叉
+    mSearchView.onActionViewExpanded();
+    mSearchView.setIconified(true);
+
+    //修改搜索框控件间的间隔（这样只是为了在细节上更加接近网易云音乐的搜索框）
+    LinearLayout search_edit_frame = (LinearLayout) mSearchView.findViewById(R.id.search_edit_frame);
+    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) search_edit_frame.getLayoutParams();
+    params.leftMargin = 0;
+    params.rightMargin = 0;
+    search_edit_frame.setLayoutParams(params);
+    return super.onCreateOptionsMenu(menu);
+}
+

# 4、实现搜索提示功能

上面我们已经学习了SearchView的UI定制，下面将通过SearchView自身或结合ListView的方式（RecyclerView应该也一样吧，还没试过）直接学习SearchView搜索提示功能的实现，继续完善 “仿网易云音乐本地音乐搜索” 效果。

# 1）弹出式搜索提示

SearchView本身的搜索框就是AutoCompleteTextView的一个子类，有图有真相。

AutoCompleteTextView是可以通过设置适配器来实现文本补全提示功能的，所以，SearchView中的搜索框一样也可以，不过SearchView提供了setSuggestionsAdapter()方法可以直接为搜索框设置适配器，需要注意的是，这个适配器必须跟数据库的Cursor对象一起使用，例如：

mSearchView.setSuggestionsAdapter(new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1}));
+

一般开发中遇到的需求是一边输入关键字一边显示搜索结果，所以需要监听搜索框的文字输入，一旦文字变化就查询数据库，更新搜索结果，所以代码可以这么写：

// 监听搜索框文字变化
+mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
+    @Override
+    public boolean onQueryTextSubmit(String s) {
+        return false;
+    }
+
+    @Override
+    public boolean onQueryTextChange(String s) {
+        Cursor cursor = TextUtils.isEmpty(s) ? null : queryData(s);
+		// 不要频繁创建适配器，如果适配器已经存在，则只需要更新适配器中的cursor对象即可。
+        if (mSearchView.getSuggestionsAdapter() == null) {
+            mSearchView.setSuggestionsAdapter(new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1}));
+        } else {
+            mSearchView.getSuggestionsAdapter().changeCursor(cursor);
+        }
+
+        return false;
+    }
+});
+

对于SimpleCursorAdapter的使用，不熟悉的自己百度学习吧，下面看效果：

可以发现，当输入第一个文字"a"时，没有什么反应，当输入第二个文字"a"时，弹出了一个列表弹窗，这是由于AutoCompleteTextView本身默认触发查询动作的条件就是该控件中的文字至少要2个以上，如果我们想修改成只要有一个文字就触发查询的话，则可以这么做：

  1. 拿到SearchView中搜索框控件
  2. 调用setThreshold()设置触发查询的字数

直接上代码：

@Override
+public boolean onCreateOptionsMenu(Menu menu) {
+    getMenuInflater().inflate(R.menu.search_view, menu);
+    MenuItem searchItem = menu.findItem(R.id.menu_search);
+
+    //通过MenuItem得到SearchView
+    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
+    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
+    ...
+    //设置触发查询的最少字符数（默认2个字符才会触发查询）
+    mSearchAutoComplete.setThreshold(1);
+｝
+

再看下效果：

好了，弹出式搜索功能做完了，下面贴出条目布局item_layout.xml和queryData()方法的代码实现：

# ① item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+    
+    <TextView
+        android:id="@+id/text1"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:minHeight="?android:attr/listPreferredItemHeightSmall"
+        android:paddingLeft="10dp"
+        android:paddingRight="10dp"
+        android:textAppearance="?android:attr/textAppearanceListItemSmall"
+        android:textColor="@android:color/black"/>
+</LinearLayout>
+
# ② queryData()

只是简单的创建一个数据库（music.db），库中有一张tb_music表，表中有_id和name两个字段，然后填充数据，查询数据，相对比较简单，这里就不做过多解释了。

private Cursor queryData(String key) {
+    SQLiteDatabase db = SQLiteDatabase.openOrCreateDatabase(getFilesDir() + "music.db", null);
+    Cursor cursor = null;
+    try {
+        String querySql = "select * from tb_music where name like '%" + key + "%'";
+        cursor = db.rawQuery(querySql, null);
+    } catch (Exception e) {
+        e.printStackTrace();
+        String createSql = "create table tb_music (_id integer primary key autoincrement,name varchar(100))";
+        db.execSQL(createSql);
+
+        String insertSql = "insert into tb_music values (null,?)";
+        for (int i = 0; i < Cheeses.sCheeseStrings.length; i++) {
+            db.execSQL(insertSql, new String[]{Cheeses.sCheeseStrings[i]});
+        }
+
+        String querySql = "select * from tb_music where name like '%" + key + "%'";
+        cursor = db.rawQuery(querySql, null);
+    }
+    return cursor;
+}
+

# 2）结合ListView实现搜索提示

虽然上面已经实现了搜索提示的功能，但网易云音乐本地搜索出来的结果并不是弹出式的，而是在SearchView下方以列表的方式呈现，要做到这样的效果，就必需让SearchView结合ListView一起使用。其实这并不难，因为AutoCompleteTextView设置的适配器跟ListView要设置的适配器是一样的，直接将上边的适配器设置给ListView即可。

// 监听搜索框文字变化
+mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
+    @Override
+    public boolean onQueryTextSubmit(String s) {
+        return false;
+    }
+
+    @Override
+    public boolean onQueryTextChange(String s) {
+        Cursor cursor = TextUtils.isEmpty(s) ? null : queryData(s);
+		// 设置或更新ListView的适配器
+        setAdapter(cursor);
+        return false;
+    }
+});
+
+private void setAdapter(Cursor cursor) {
+    if (mLv.getAdapter() == null) {
+        SimpleCursorAdapter adapter = new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1});
+        mLv.setAdapter(adapter);
+    } else {
+        ((SimpleCursorAdapter) mLv.getAdapter()).changeCursor(cursor);
+    }
+}
+

这样就完成了，虽然样式上是丑了点，但，那又怎样，呵呵~

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#SearchView
RecyclerView之使用ItemTouchHelper实现交互动画
MaterialDesign之学一波Palette

+ ← + MaterialDesign之学一波Palette→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/bbc079/index.html b/pages/bbc079/index.html new file mode 100644 index 000000000..5f1bf73c2 --- /dev/null +++ b/pages/bbc079/index.html @@ -0,0 +1,492 @@ + + + + + + 热修复 - Tinker的集成与使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-12-06
目录

热修复 - Tinker的集成与使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

Tinker是微信官方的Android热补丁解决方案，它支持动态下发代码、So库以及资源，让应用能够在不需要重新安装的情况下实现更新。当然，你也可以使用Tinker来更新你的插件。

上面是Tinker官方Wiki的原话，意思嘛相信大家都看得明白，但注意啦，它并没有说Tinker可以让补丁实时生效（也叫无感知更新），它必须在打上补丁后重启App（重启进程），补丁才会发挥作用，这跟阿里的热修复方案有着本质的区别。在开始集成Tinker之前，我们有必要了解清楚，Tinker有那些不足，下面是Tinker的已知问题：

  1. Tinker不支持修改AndroidManifest.xml，Tinker不支持新增四大组件(1.9.0支持新增非export的Activity)；
  2. 由于Google Play的开发者条款限制，不建议在GP渠道动态更新代码；
  3. 在Android N上，补丁对应用启动时间有轻微的影响；
  4. 不支持部分三星android-21机型，加载补丁时会主动抛出"TinkerRuntimeException:checkDexInstall failed"；
  5. 对于资源替换，不支持修改remoteView。例如transition动画，notification icon以及桌面图标。

上述不足是由于原理与系统限制，我们在编程中要清楚这些，尽量避免以上问题的出现。

尽管Tinker有着这些“小缺点”，但也丝毫不影响Tinker在国内众多热修复方案中的地位，一方面Tinker是开源的（这意味着Tinker本身免费），另一方面则是Tinker已运行在微信的数亿Android设备上（说明该方案相当稳定）。下面开始进行对Tinker的集成与使用。

# 二、Tinker组件依赖

# 1、在项目的build.gradle中：

添加tinker-patch-gradle-plugin的依赖

buildscript {
+	dependencies {
+		classpath ('com.tencent.tinker:tinker-patch-gradle-plugin:1.9.1')
+	}
+}
+

# 2、在app的gradle文件（app/build.gradle）中：

需要注意一点，Tinker需要使用到MulitDex，原话在Bugly文档的热更新API接口部分 (opens new window)。

# 1）添加tinker的库依赖

Gradle版本小于2.3的这么写：

dependencies {
+	compile "com.android.support:multidex:1.0.1"
+	//可选，用于生成application类 
+	provided('com.tencent.tinker:tinker-android-anno:1.9.1')
+	//tinker的核心库
+	compile('com.tencent.tinker:tinker-android-lib:1.9.1') 
+}
+

Gradle版本大等于2.3的这么写：

dependencies {
+    implementation "com.android.support:multidex:1.0.1"
+    //tinker的核心库
+    implementation("com.tencent.tinker:tinker-android-lib:1.9.1") { changing = true }
+    //可选，用于生成application类
+    annotationProcessor("com.tencent.tinker:tinker-android-anno:1.9.1") { changing = true }
+    compileOnly("com.tencent.tinker:tinker-android-anno:1.9.1") { changing = true }
+}
+

# 2）开启multiDex

defaultConfig {
+		...
+        multiDexEnabled true
+}
+

# 3）应用tinker的gradle插件

这部分可先不管，在第三部分《Tinker的配置及任务》的第2节《配置Tinker与任务》中会添加。可跳过这部分继续往下看。

//apply tinker插件
+apply plugin: 'com.tencent.tinker.patch
+

# 三、Tinker的配置及任务

# 1、开启支持大工程模式

Tinker文档中推荐将jumboMode设置为true。

android {
+    dexOptions {
+        // 支持大工程模式
+        jumboMode = true
+    }
+	...
+}
+

# 2、配置Tinker与任务

将下面的配置全部复制粘贴到app的gradle文件（app/build.gradle）末尾，内容很多，但现在只需要看懂bakPath与ext括号内的东东就好了。

// Tinker配置与任务
+def bakPath = file("${buildDir}/bakApk/")
+ext {
+    // 是否使用Tinker(当你的项目处于开发调试阶段时，可以改为false)
+    tinkerEnabled = true
+    // 基础包文件路径（名字这里写死为old-app.apk。用于比较新旧app以生成补丁包，不管是debug还是release编译）
+    tinkerOldApkPath = "${bakPath}/old-app.apk"
+    // 基础包的mapping.txt文件路径（用于辅助混淆补丁包的生成，一般在生成release版app时会使用到混淆，所以这个mapping.txt文件一般只是用于release安装包补丁的生成）
+    tinkerApplyMappingPath = "${bakPath}/old-app-mapping.txt"
+    // 基础包的R.txt文件路径（如果你的安装包中资源文件有改动，则需要使用该R.txt文件来辅助生成补丁包）
+    tinkerApplyResourcePath = "${bakPath}/old-app-R.txt"
+    //only use for build all flavor, if not, just ignore this field
+    tinkerBuildFlavorDirectory = "${bakPath}/flavor"
+}
+
+def getOldApkPath() {
+    return hasProperty("OLD_APK") ? OLD_APK : ext.tinkerOldApkPath
+}
+
+def getApplyMappingPath() {
+    return hasProperty("APPLY_MAPPING") ? APPLY_MAPPING : ext.tinkerApplyMappingPath
+}
+
+def getApplyResourceMappingPath() {
+    return hasProperty("APPLY_RESOURCE") ? APPLY_RESOURCE : ext.tinkerApplyResourcePath
+}
+
+def getTinkerIdValue() {
+    return hasProperty("TINKER_ID") ? TINKER_ID : android.defaultConfig.versionName
+}
+
+def buildWithTinker() {
+    return hasProperty("TINKER_ENABLE") ? TINKER_ENABLE : ext.tinkerEnabled
+}
+
+def getTinkerBuildFlavorDirectory() {
+    return ext.tinkerBuildFlavorDirectory
+}
+
+if (buildWithTinker()) {
+    //apply tinker插件
+    apply plugin: 'com.tencent.tinker.patch'
+
+    // 全局信息相关的配置项
+    tinkerPatch {
+        tinkerEnable = buildWithTinker()// 是否打开tinker的功能。
+        oldApk = getOldApkPath()        // 基准apk包的路径，必须输入，否则会报错。
+        ignoreWarning = false           // 是否忽略有风险的补丁包。这里选择不忽略，当补丁包风险时会中断编译。
+        useSign = true                  // 在运行过程中，我们需要验证基准apk包与补丁包的签名是否一致，我们是否需要为你签名。
+        // 编译相关的配置项
+        buildConfig {
+            applyMapping = getApplyMappingPath()
+            // 可选参数；在编译新的apk时候，我们希望通过保持旧apk的proguard混淆方式，从而减少补丁包的大小。这个只是推荐设置，不设置applyMapping也不会影响任何的assemble编译。
+            applyResourceMapping = getApplyResourceMappingPath()
+            // 可选参数；在编译新的apk时候，我们希望通过旧apk的R.txt文件保持ResId的分配，这样不仅可以减少补丁包的大小，同时也避免由于ResId改变导致remote view异常。
+            tinkerId = getTinkerIdValue()
+            // 在运行过程中，我们需要验证基准apk包的tinkerId是否等于补丁包的tinkerId。这个是决定补丁包能运行在哪些基准包上面，一般来说我们可以使用git版本号、versionName等等。
+            keepDexApply = false
+            // 如果我们有多个dex,编译补丁时可能会由于类的移动导致变更增多。若打开keepDexApply模式，补丁包将根据基准包的类分布来编译。
+            isProtectedApp = false // 是否使用加固模式，仅仅将变更的类合成补丁。注意，这种模式仅仅可以用于加固应用中。
+            supportHotplugComponent = false // 是否支持新增非export的Activity（1.9.0版本开始才有的新功能）
+        }
+        // dex相关的配置项
+        dex {
+            dexMode = "jar"
+// 只能是'raw'或者'jar'。 对于'raw'模式，我们将会保持输入dex的格式。对于'jar'模式，我们将会把输入dex重新压缩封装到jar。如果你的minSdkVersion小于14，你必须选择‘jar’模式，而且它更省存储空间，但是验证md5时比'raw'模式耗时。默认我们并不会去校验md5,一般情况下选择jar模式即可。
+            pattern = ["classes*.dex",
+                       "assets/secondary-dex-?.jar"]
+            // 需要处理dex路径，支持*、?通配符，必须使用'/'分割。路径是相对安装包的，例如assets/...
+            loader = [
+                    // 定义哪些类在加载补丁包的时候会用到。这些类是通过Tinker无法修改的类，也是一定要放在main dex的类。
+                    // 如果你自定义了TinkerLoader，需要将它以及它引用的所有类也加入loader中；
+                    // 其他一些你不希望被更改的类，例如Sample中的BaseBuildInfo类。这里需要注意的是，这些类的直接引用类也需要加入到loader中。或者你需要将这个类变成非preverify。
+            ]
+        }
+        // 	lib相关的配置项
+        lib {
+            pattern = ["lib/*/*.so","src/main/jniLibs/*/*.so"]
+            // 需要处理lib路径，支持*、?通配符，必须使用'/'分割。与dex.pattern一致, 路径是相对安装包的，例如assets/...
+        }
+        // res相关的配置项
+        res {
+            pattern = ["res/*", "assets/*", "resources.arsc", "AndroidManifest.xml"]
+            // 需要处理res路径，支持*、?通配符，必须使用'/'分割。与dex.pattern一致, 路径是相对安装包的，例如assets/...，务必注意的是，只有满足pattern的资源才会放到合成后的资源包。
+            ignoreChange = [
+                    // 支持*、?通配符，必须使用'/'分割。若满足ignoreChange的pattern，在编译时会忽略该文件的新增、删除与修改。 最极端的情况，ignoreChange与上面的pattern一致，即会完全忽略所有资源的修改。
+                    "assets/sample_meta.txt"
+            ]
+            largeModSize = 100
+            // 对于修改的资源，如果大于largeModSize，我们将使用bsdiff算法。这可以降低补丁包的大小，但是会增加合成时的复杂度。默认大小为100kb
+        }
+        // 用于生成补丁包中的'package_meta.txt'文件
+        packageConfig {
+            // configField("key", "value"), 默认我们自动从基准安装包与新安装包的Manifest中读取tinkerId,并自动写入configField。
+            // 在这里，你可以定义其他的信息，在运行时可以通过TinkerLoadResult.getPackageConfigByName得到相应的数值。
+            // 但是建议直接通过修改代码来实现，例如BuildConfig。
+            configField("platform", "all")
+            configField("patchVersion", "1.0")
+//            configField("patchMessage", "tinker is sample to use")
+        }
+        // 7zip路径配置项，执行前提是useSign为true
+        sevenZip {
+            zipArtifact = "com.tencent.mm:SevenZip:1.1.10"
+        }
+    }
+    List<String> flavors = new ArrayList<>();
+    project.android.productFlavors.each { flavor ->
+        flavors.add(flavor.name)
+    }
+    boolean hasFlavors = flavors.size() > 0
+    def date = new Date().format("MMdd-HH-mm-ss")
+
+    /**
+     * bak apk and mapping
+     */
+    android.applicationVariants.all { variant ->
+        /**
+         * task type, you want to bak
+         */
+        def taskName = variant.name
+
+        tasks.all {
+            if ("assemble${taskName.capitalize()}".equalsIgnoreCase(it.name)) {
+
+                it.doLast {
+                    copy {
+                        def fileNamePrefix = "${project.name}-${variant.baseName}"
+                        def newFileNamePrefix = hasFlavors ? "${fileNamePrefix}" : "${fileNamePrefix}-${date}"
+
+                        def destPath = hasFlavors ? file("${bakPath}/${project.name}-${date}/${variant.flavorName}") : bakPath
+                        from variant.outputs.first().outputFile
+                        into destPath
+                        rename { String fileName ->
+                            fileName.replace("${fileNamePrefix}.apk", "${newFileNamePrefix}.apk")
+                        }
+
+                        from "${buildDir}/outputs/mapping/${variant.dirName}/mapping.txt"
+                        into destPath
+                        rename { String fileName ->
+                            fileName.replace("mapping.txt", "${newFileNamePrefix}-mapping.txt")
+                        }
+
+                        from "${buildDir}/intermediates/symbols/${variant.dirName}/R.txt"
+                        into destPath
+                        rename { String fileName ->
+                            fileName.replace("R.txt", "${newFileNamePrefix}-R.txt")
+                        }
+                    }
+                }
+            }
+        }
+    }
+    project.afterEvaluate {
+        //sample use for build all flavor for one time
+        if (hasFlavors) {
+            task(tinkerPatchAllFlavorRelease) {
+                group = 'tinker'
+                def originOldPath = getTinkerBuildFlavorDirectory()
+                for (String flavor : flavors) {
+                    def tinkerTask = tasks.getByName("tinkerPatch${flavor.capitalize()}Release")
+                    dependsOn tinkerTask
+                    def preAssembleTask = tasks.getByName("process${flavor.capitalize()}ReleaseManifest")
+                    preAssembleTask.doFirst {
+                        String flavorName = preAssembleTask.name.substring(7, 8).toLowerCase() + preAssembleTask.name.substring(8, preAssembleTask.name.length() - 15)
+                        project.tinkerPatch.oldApk = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-release.apk"
+                        project.tinkerPatch.buildConfig.applyMapping = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-release-mapping.txt"
+                        project.tinkerPatch.buildConfig.applyResourceMapping = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-release-R.txt"
+
+                    }
+
+                }
+            }
+
+            task(tinkerPatchAllFlavorDebug) {
+                group = 'tinker'
+                def originOldPath = getTinkerBuildFlavorDirectory()
+                for (String flavor : flavors) {
+                    def tinkerTask = tasks.getByName("tinkerPatch${flavor.capitalize()}Debug")
+                    dependsOn tinkerTask
+                    def preAssembleTask = tasks.getByName("process${flavor.capitalize()}DebugManifest")
+                    preAssembleTask.doFirst {
+                        String flavorName = preAssembleTask.name.substring(7, 8).toLowerCase() + preAssembleTask.name.substring(8, preAssembleTask.name.length() - 13)
+                        project.tinkerPatch.oldApk = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-debug.apk"
+                        project.tinkerPatch.buildConfig.applyMapping = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-debug-mapping.txt"
+                        project.tinkerPatch.buildConfig.applyResourceMapping = "${originOldPath}/${flavorName}/${project.name}-${flavorName}-debug-R.txt"
+                    }
+
+                }
+            }
+        }
+    }
+}
+

其中，有几点配置在这里说明一下，方便理解后续的操作（当tinkerEnabled = true的情况下）：

  • app的生成目录是：主Module（一般是名为app）/build/bakApk文件夹。
  • 补丁包的生成路径：主Module（一般是名为app）/build/outputs/apk/tinkerPatch/debug/patch_signed_7zip.apk。
  • 基础包的名字：old-app.apk，放于bakApk文件夹下。
  • 基础包的mapping.txt和R.txt文件一般在编译release签名的apk时才会用到。
  • 在用到mapping.txt文件时，需要重命名为old-app-mapping.txt，放于bakApk文件夹下。
  • 在用到R.txt文件时，需要重命名为old-app-R.txt，放于bakApk文件夹下。

对于mapping.txt和R.txt文件，在配置中有说明，请回配置中仔细看。
+上面只是我项目中的配置，这些其实都是可以自定义的，建议在搞清楚配置内容之后再去自定义修改。

# 什么是基础包？？

基础包就是已经上架的apk文件（假设是1.0版本）。这其实很好理解，在新版本的App上架之前（假设是2.0版本），我们会用到Tinker来修复1.0版App中存在的bug，这时就需要用到Tinker来产生补丁包文件，而补丁包文件的本质，就是修复好Bug的App与1.0版本App之间的文件差异。在2.0版本上架之前，我们可能会多次产生新的补丁包，用于修复在用户手机上的1.0版App，所以补丁包必须以1.0版App作为参考标准，也就是说用户手机上的app就是基础包，即当前应用市场上的apk文件（前面说的1.0版本）。

# 四、Tinker封装与拓展

# 1、拷贝文件

将Demo中提供的tinker包下的所有文件及文件夹都拷贝到自己项目中。

这些文件其实就是Tinker官方Demo中的文件完全复制过来的，只是多加了一些注释。

简单说明下，这几个文件的作用：

  • SampleUncaughtExceptionHandler：Tinker的全局异常捕获器。
  • MyLogImp：Tinker的日志输出实现类。
  • SampleLoadReporter：加载补丁时的一些回调。
  • SamplePatchListener：过滤Tinker收到的补丁包的修复、升级请求。
  • SamplePatchReporter：修复或者升级补丁时的一些回调。
  • SampleTinkerReport：修复结果（成功、冲突、失败等）。
  • SampleResultService：:patch补丁合成进程将合成结果返回给主进程的类。
  • TinkerManager：Tinker管理器（安装、初始化Tinker）。
  • TinkerUtils：拓展补丁条件判定、锁屏或后台时应用重启功能的工具类。

这些只是对Tinker功能的拓展和封装罢了，都是可选的，但这些文件对项目的功能完善会有所帮助，建议加入到自己的项目中。
+如果你仅仅只是为了修复bug，而不做过多的工作（如：上传打补丁信息到服务器等），则无须理会这些文件的作用，当然你也可以自己封装。

对于这些自定义类及错误码的详细说明，请参考：「Tinker官方Wiki：可选的自定义类」 (opens new window)。

# 2、清单文件中添加服务

前面添加的文件中，有一个SampleResultService文件，是四大组件之一，所以必须在清单文件中声明。

<service
+    android:name="com.lqr.tinker.service.SampleResultService"
+    android:exported="false"/>
+

# 五、编写Application的代理类

Tinker表示，Application无法动态修复，所以有两种选择：

  1. 使用「继承TinkerApplication + DefaultApplicationLike」。
  2. 使用「DefaultLifeCycle注解 + DefaultApplicationLike」。

当然，如果你觉得你自定义的Application不会用到热修复，可无视这部分；
+但下方代码中的initTinker()方法记得要拷贝到你项目中，用于初始化Tinker。

第1种方式感觉比较鸡肋，这里使用第2种(Tinker官方推荐的方式):「DefaultLifeCycle注解 + TinkerApplicationLike」，DefaultLifeCycle注解生成Application，下面就来编写Application的代理类：

# 1、编写TinkerApplicationLike

将下方的代码拷贝到项目中，注释简单明了，不多解释：

@SuppressWarnings("unused")
+@DefaultLifeCycle(application = "com.lqr.tinker.MyApplication",// application类名。只能用字符串，这个MyApplication文件是不存在的，但可以在AndroidManifest.xml的application标签上使用（name）
+        flags = ShareConstants.TINKER_ENABLE_ALL,// tinkerFlags
+        loaderClass = "com.tencent.tinker.loader.TinkerLoader",//loaderClassName, 我们这里使用默认即可!（可不写）
+        loadVerifyFlag = false)//tinkerLoadVerifyFlag
+public class TinkerApplicationLike extends DefaultApplicationLike {
+
+    private Application mApplication;
+    private Context mContext;
+    private Tinker mTinker;
+
+    // 固定写法
+    public TinkerApplicationLike(Application application, int tinkerFlags, boolean tinkerLoadVerifyFlag, long applicationStartElapsedTime, long applicationStartMillisTime, Intent tinkerResultIntent) {
+        super(application, tinkerFlags, tinkerLoadVerifyFlag, applicationStartElapsedTime, applicationStartMillisTime, tinkerResultIntent);
+    }
+
+    // 固定写法
+    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
+    public void registerActivityLifecycleCallbacks(Application.ActivityLifecycleCallbacks callback) {
+        getApplication().registerActivityLifecycleCallbacks(callback);
+    }
+
+    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
+    @Override
+    public void onBaseContextAttached(Context base) {
+        super.onBaseContextAttached(base);
+        mApplication = getApplication();
+        mContext = getApplication();
+        initTinker(base);
+        // 可以将之前自定义的Application中onCreate()方法所执行的操作搬到这里...
+    }
+
+    private void initTinker(Context base) {
+        // tinker需要你开启MultiDex
+        MultiDex.install(base);
+
+        TinkerManager.setTinkerApplicationLike(this);
+        // 设置全局异常捕获
+        TinkerManager.initFastCrashProtect();
+        //开启升级重试功能（在安装Tinker之前设置）
+        TinkerManager.setUpgradeRetryEnable(true);
+        //设置Tinker日志输出类
+        TinkerInstaller.setLogIml(new MyLogImp());
+        //安装Tinker(在加载完multiDex之后，否则你需要将com.tencent.tinker.**手动放到main dex中)
+        TinkerManager.installTinker(this);
+        mTinker = Tinker.with(getApplication());
+    }
+
+}
+

# 2、搬运自定义Application中的操作

把项目中在自定义Application的操作移到TinkerApplicationLike的onCreate()或onBaseContextAttached()方法中。

public class TinkerApplicationLike extends DefaultApplicationLike {
+	...
+    @Override
+    public void onCreate() {
+        super.onCreate();
+		// 将之前自定义的Application中onCreate()方法所执行的操作搬到这里...
+    }
+
+    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
+    @Override
+    public void onBaseContextAttached(Context base) {
+        super.onBaseContextAttached(base);
+        mApplication = getApplication();
+        mContext = getApplication();
+        initTinker(base);
+        // 或搬到这里...
+    }
+}
+

# 3、清单文件中注册

将@DefaultLifeCycle中application对应的值，即"com.lqr.tinker.MyApplication"，赋值给清单文件的application标签的name属性，如下：

<application
+    android:name="com.lqr.tinker.MyApplication"
+    android:allowBackup="true"
+    android:icon="@mipmap/ic_launcher"
+    android:label="@string/app_name"
+    android:roundIcon="@mipmap/ic_launcher_round"
+    android:supportsRtl="true"
+    android:theme="@style/AppTheme">
+    ...
+</application>
+

注意：
+此时name属性会报红，因为项目源码中根本不存在MyApplication.java文件，但不必担心，因为它是动态生成的，Build一下项目就好了，不管它也无所谓。

对于Application代理类的详细说明，请参考：「Tinker官方Wiki：Application代理类」 (opens new window)。

到这里就已经集成好Tinker了，但只是本地集成而已，服务端下发补丁包到app的文章之后会陆续发布更新。

# 六、常用API

现在来了解下代码中会用到的几个Tinker的重要API。

# 1、请求打补丁

TinkerInstaller.onReceiveUpgradePatch(context, 补丁包的本地路径);
+

# 2、卸载补丁

Tinker.with(getApplicationContext()).cleanPatch();// 卸载所有的补丁
+Tinker.with(getApplicationContext()).cleanPatchByVersion(版本号)// 卸载指定版本的补丁
+

# 3、杀死应用的其他进程

ShareTinkerInternals.killAllOtherProcess(getApplicationContext());
+

# 4、Hack方式修复so

TinkerLoadLibrary.installNavitveLibraryABI(this, abi);
+

abi：cpu架构类型

# 5、非Hack方式修复so

TinkerLoadLibrary.loadLibraryFromTinker(getApplicationContext(), "lib/" + abi, so库的模块名); // 加载任意abi库
+TinkerLoadLibrary.loadArmLibrary(getApplicationContext(), so库的模块名); // 只适用于加载armeabi库
+TinkerLoadLibrary.loadArmV7Library(getApplicationContext(), so库的模块名); // 只适用于加载armeabi-v7a库 
+

loadArmLibrary()与loadArmV7Library()本质是调用了loadLibraryFromTinker()，有兴趣的可以查看下源码。

对于Tinker所有API的详细说明，请参考：「Tinker官方Wiki：Tinker-API概览」 (opens new window)。

# 七、测试

因为布局简单且不是重点，这里就给出一张Demo的运行图片，剩下的就靠想像了。

# 1、编译基础包

没有基础包，那要补丁有什么用？所以，第一步就是打包一个apk。

在Terminal中使用命令行./gradlew assembleDebug。不会命令行无所谓，Android Studio为我们提供了图形化操作，根据下图操作即可：

如果你是要release签名的打包，则双击assembleRelease，不过还要配置签名文件，这个后面再说。

编译完成后，可以在build目录下会自动创建一个bakApk文件夹，里面就有打包好的apk文件，因为之后的所有生成的补丁包都以这个apk会标准，所以这就是那个基础包文件（相当于应用市场上的app）。

如果这个apk文件是release签名且是要放到应用市场上的，那么你必须将apk与R.txt（如果有使用混淆的话，还会有一个mapping.txt）这几个文件保存好，切记。

现在就把这个tinker-local-debug-1206-11-48-42.apk安装到手机上（相当于是用户手机上的app）。

  1. 点击"say someting"按钮吐司"Hello"。
  2. 点击"get string from .so"按钮吐司"hello LQR"。
  3. 点击"show info"按钮显示"patch is not loaded"，说明当前没有加载补丁。

# 1、修复java代码

下面是"say someting"按钮点击时，调用的方法，使用Toast显示Hello字符串：

public void say(View view) {
+    Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
+}
+

# 1）修复代码

现在我想让它吐司Hello World，所以代码修改为：

public void say(View view) {
+    Toast.makeText(getApplicationContext(), "Hello World", Toast.LENGTH_SHORT).show();
+}
+

# 2）制作补丁包

先将基础包（前面那个tinker-local-debug-1206-11-48-42.apk文件）重命名为old-app.apk，然后双击tinkerPatchDebug，操作如下图所示：

编译完成后，build/outputs/apk/tinkerPatch会产生3个补丁包，我们要的就是patch_signed_7zip.apk。

对于build/outputs/apk/tinkerPatch目录下文件及文件夹的详细说明，请参考：「Tinker官方Wiki：输出文件详解」 (opens new window)。

# 3）下发补丁包

将patch_signed_7zip.apk放到手机的SD卡目录下：

不一定是SD卡目录，位置由我们开发者决定，Demo中调用TinkerInstaller.onReceiveUpgradePatch(context, 补丁包的本地路径)方法时，第二个参数指定了是SD卡，故如此操作。

# 4）打补丁

可以看到，在install patch之前，点击"say someting"按钮时，还是吐司"Hello"。 +点击"install patch"按钮后，会提示"patch success,please restart process"，说明Tinker已经打上补丁了。 +这时点击"show info"，可以看到"patch is not loaded"，说明当前补丁还没有生效。 +最后，点击"kill myself"按钮，杀死当前app（进程）。

在重新打开app，再点击"say someting"按钮，吐司"Hello World"。 +再点击"show info"，可以看到"patch is loaded"，说明app重启后补丁生效了。

小结：
+Tinker热修复无法让补丁实时生效，在重启进程后，补丁才会生效。
+Tinker会在app重启后自动应用补丁。

# 2、修复so库

在一开始制作基础包时，工程中就已经加入了一些so文件，存放在src/main/jniLibs目录下，因为Android Studio默认的库目录是libs（与src同级），所以这里需要在app的build.gradle文件中进行配置，指定so库所在文件夹。

下面是"get string from .so"按钮点击时调用的方法：

public void string_from_so(View view) {
+    String string = JniUtil.hello();
+    Toast.makeText(getApplicationContext(), string, Toast.LENGTH_SHORT).show();
+}
+

这个JniUtil的代码如下：

public class JniUtil {
+    public static String LIB_NAME = "LQRJni";
+    public JniUtil() {}
+    static {
+        System.loadLibrary(LIB_NAME);
+    }
+    public static native String hello();
+}
+

加载so库有2点需要注意：

  1. System.loadLibrary(libname)加载固定目录下的库文件，而System.load(filename)加载指定目录下的库文件。
  2. System.loadLibrary(libname)的参数libname指的是库的模块名，不是so文件的名字，如libLQRJni.so文件的模块名实际上是LQRJni。

so文件的制作代码包含在Demo中，有兴趣的朋友可以尝试自己制作。

# 1）替换so文件

回归正题，现在so库中得到的文字是"Hello LQR"，现在变一下，我需要得到的文字是"Hello CSDN_LQR"，将新的so文件替换掉旧的so文件即可。

# 2）检查Tinker的lib匹配规则

在app的build.gradle文件中，我们前面在第三部分《Tinker的配置及任务》的第2节《配置Tinker与任务》中，有如下一段配置：

lib {
+    pattern = ["lib/*/*.so", "src/main/jniLibs/*/*.so"]
+}
+

这就是Tinker的lib匹配规则，在生成补丁的过程中，它会去把符合这个规则的库文件拿出来与基础包中的库文件进行匹配，从而将有差异的库文件放入到补丁包中。而Tinker官方Demo的配置中是没有"src/main/jniLibs/*/*.so"这一段的，这将导致Tinker在产生补丁包时不会去检查src/main/jniLibs目录下的文件变化，进而补丁包中不会包含修复好的so文件，这很重要，切记。

# 3）生成补丁与下发补丁包

生成补丁与下发补丁包的过程与之前的操作一致，这里不再重覆，不过我们来看看tinkerPatch跟之前有什么区别吧：

最后记得将patch_signed_7zip.apk放到手机的SD卡目录下。

# 4）卸载补丁

补丁是可以打多个的，用补丁的版本号做区分，在卸载的时候，可以根据补丁的版本号来卸载，也可以把之前所有的补丁卸载掉，实际开发中，看项目需求来解决用哪种方式来卸载补丁，这里我选择清理之前所有的补丁，下面是"uninstall patch"按钮的点击事件：

public void uninstall_patch(View view) {
+    ShareTinkerInternals.killAllOtherProcess(getApplicationContext());
+    Tinker.with(getApplicationContext()).cleanPatch();
+}
+

卸载补丁之前，要先杀死当前App的其他进程。
+卸载补丁之后，App是不安全的（因为此时Tinker已经初始化完成），最好，需要重启一下App。

# 5）打补丁

现在我们再来打一次补丁，操作如下图所示：

可以看到，在install patch之前，点击"get string from .so"按钮时，还是吐司"Hello LQR"。 +点击"install patch"按钮后，会提示"patch success,please restart process"，说明Tinker已经打上补丁了。 +这时点击"show info"，可以看到"patch is not loaded"，说明当前补丁还没有生效。 +最后，点击"kill myself"按钮，杀死当前app（进程）。

现在重启app，理想状态下，当我们再次点击"get string from .so"按钮时，会吐司"Hello CSDN_LQR"。

然而，吐司还是"Hello LQR"，并没有变化，而且点击"show info"按钮后，可以看到"patch is loaded"，说明补丁已经加载了，这是为啥？

再来看看下面的操作：

重启app后，先点击"load library(hack)"按钮，再点击"get string from .so"按钮，出现了，吐司变成了"Hello CSDN_LQR"。

上图是Tinker官网Wiki的文档部分截图，从红线部分可以知道，因为部分手机判断abi并不准确（可能因为Android碎片化比较严重吧），Tinker没有区分abi，自然也不会在app启动时，自动加载对应的so库，这需要开发者自己判断。

下面是"load library(hack)"按钮点击调用的方法：

public void load_library_hack(View view) {
+    String CPU_ABI = android.os.Build.CPU_ABI;
+    // 将tinker library中的 CPU_ABI架构的so 注册到系统的library path中。
+    TinkerLoadLibrary.installNavitveLibraryABI(this, CPU_ABI);
+}
+

这是Tinker提供的使用Hack方式加载补丁中的so库，只是一个方法调用而已，并没有什么特别。对于非Hack方式加载补丁的方式，我本人是没有测试成功的，很奇怪，搞不明白问题的原因，官方的文档也写得不清不楚的，有知道本Demo加载不成功的原因的朋友请不吝赐教一下哈，thx。

小结：
+Tinker虽然会在app重启后自动加载补丁，但不会自动加载补丁中的so文件，开发者需自己判定好abi来加载so文件。

# 3、修复资源文件

这部分跟前面的重合度极高，故不做演示了，你可以在补丁包中对本demo中的头像进行替换试试，与修复java文件的操作基本一致，这部分需要提醒的是，app的build.gradle文件中Tinker配置有如下这一段：

res {
+    pattern = ["res/*", "assets/*", "resources.arsc", "AndroidManifest.xml"]
+    ...
+}
+

不难理解，这就是Tinker对资源文件的匹配规则，日常开发够用，如果你的项目中把资源文件放到了这里没有的目录下，需要修改这部分的配置。

# 八、细节

# 1、打包步骤

# 1）debug打包

  1. 调用assembleDebug编译得到一个debug签名的apk（old apk），这是基础apk。
  2. 修改代码、更新res文件、so等。
  3. 将old apk按gradle中的参数规则，重命名为指定名字，还是放在bakApk目录下（该目录可更改）。
  4. 调用tinkerPatchDebug生成补丁包于/build/outputs/tinkerPatch/目录（默认是patch_signed_7zip.apk）。
  5. 将补丁包复制到SD卡目录下（目录可更改），在程序中调用打补丁方法，重启app即可实现热修复。

# 2）release打包步骤

  1. 调用assembleRelease编译得到一个release签名的apk（old apk），这是基础apk，还有一个mapping文件。
  2. 修改代码、更新res文件、so等。
  3. 将old apk与mapping文件按gradle中的参数规则，分别重命名为指定名字，还是放在bakApk目录下（该目录可更改）。
  4. 调用tinkerPatchRelease生成补丁包于/build/outputs/tinkerPatch/目录（默认是patch_signed_7zip.apk）。
  5. 将补丁包复制到SD卡目录下（目录可更改），在程序中调用打补丁方法，重启app即可实现热修复。

因为调用tinker的release打包需要用到签名文件的信息，所以还必须在app的build.gradle中配置好签名文件。

android {
+    ...
+    signingConfigs {
+        release {
+            try {
+                storeFile file("./keystore/release.keystore")
+                storePassword "testres"
+                keyAlias "testres"
+                keyPassword "testres"
+            } catch (ex) {
+                throw new InvalidUserDataException(ex.toString())
+            }
+        }
+
+        debug {
+            storeFile file("./keystore/debug.keystore")
+        }
+    }
+	...
+    buildTypes {
+        release {
+            minifyEnabled true
+            signingConfig signingConfigs.release
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), project.file('proguard-rules.pro')
+        }
+        debug {
+            debuggable true
+            minifyEnabled false
+            signingConfig signingConfigs.debug
+        }
+    }
+}
+

其实说白了，debug与release打包的差别，除了执行的命令不一样之外，release打包比debug打包多用到2个文件（mapping.txt、R.txt）。

# 2、使用tinker的注意事项与发现

  • tinker编译时需要禁用instant run。
  • tinker需要MultiDex。
  • 上架前用assembleRelease编译得到的apk、mapping.txt、R.txt这3个文件要备份好，制作补丁时会用到。
  • 多个补丁包的版本一样时，不影响打补丁（如：第一次补丁版本是1.0，第二次补丁还是1.0版本，是可以成功打上第二次补丁的）。
  • 成功打上补丁后，补丁原文件会被删除，故项目中不必担心补丁原文件清理的问题。

# 3、可能会遇到的错误

# 1）onLoadPatchListenerReceiveFail code为-2

报错原文如下：

receive a patch file: /storage/emulated/0/patch_signed_7zip.apk, file size:3604
+patch loadReporter onLoadPatchListenerReceiveFail: patch receive fail: /storage/emulated/0/patch_signed_7zip.apk, code: -2
+

出现这种情况，请按如下两步进行排查：

  1. 查看文件路径是否正常。
  2. 查看清单文件中是否有添加SD卡访问权限。

如果你的手机是Android7.0请要考虑FileProvider（Android7.0不支持直接访问sd卡）。

# 2）onLoadPatchListenerReceiveFail code为-24

报错原文如下：

receive a patch file: /storage/emulated/0/patch_signed_7zip.apk, file size:3665
+get platform:null
+patch loadReporter onLoadPatchListenerReceiveFail: patch receive fail: /storage/emulated/0/patch_signed_7zip.apk, code: -24
+

提示很明显，Tinker获取不到platform的值，请检查在app的build.gradle文件中是否有如下配置，这部分配置了Tinker补丁包支持的平台与版本号：

packageConfig {
+	configField("platform", "all")
+	configField("patchVersion", "1.0")
+}
+

# 九、其他

对于多渠道打包的补丁文件，暂时没有研究，请自行参考Tinker的官方Wiki。

本Demo基于Tinker官方Demo及文档制作，以下是Tinker的官方文档链接：

# 最后贴下Demo链接

https://github.com/GitLqr/HotFixDemo (opens new window)

Demo中的Module说明：

  1. app：热修复原理Demo
  2. tinker-local：本地集成Tinker热修复Demo
  3. jnitest：生成简单so文件的Demo
+ +
+
#热修复#Tinker
热修复 - 深入浅出原理与实现
热修复 - Bugly让热修复变得如此简单

+ ← + 热修复 - Bugly让热修复变得如此简单→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/bea8f9/index.html b/pages/bea8f9/index.html new file mode 100644 index 000000000..674223e82 --- /dev/null +++ b/pages/bea8f9/index.html @@ -0,0 +1,160 @@ + + + + + + iOS - 记录一次对屏幕旋转后崩溃的定位过程 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-09-02
目录

iOS - 记录一次对屏幕旋转后崩溃的定位过程

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 问题

触发：点击按钮进行屏幕旋转发生了崩溃

一般这个时候只要查看调用栈信息就可以定位到崩溃的原因，但是这里的调用栈信息只能看到强制屏幕旋转的代码

UIDevice.current.setValue(orientation.rawValue, forKey: "orientation")
+

这种强制屏幕旋转的方式在很多第三方库中都有使用到，不大可能会是因为这个而导致崩溃，要不然网上得多少人吐槽~

我们再对调用栈逐个进行点击查看，发现都是这种汇编相关的提示😳

# 定位

仔细观察调用栈，从上往下依次为：

objc_msgSend:
+CA::Layer::layout_if_needed:(CA::Transaction*)
+-[UIView(Hierarchy) layoutBelowIfNeeded]:
+-[UINavigationController _layoutViewController:]
+

在第二个执行后导致了 objc_msgSend 报错，所以我们打开第二个栈信息，在崩溃处理的上一行添加断点，这里我们称之为 断点A

还没完，编辑该断点，添加 Action，并把下方的 Automatically continue after evaluating actions 打勾，让程序帮我们自动进入下一步

添加的 Action 说明：

显示对象信息
+po $x0 
+
+显示方法名称
+p (char*)$x1 
+

这样，当系统内部执行到相应的代码时就会跳到此断点并自动放行，并且会自动在控制台打印对象信息和方法名称。

但是这个断点在程序运行期间到处都会调用，执行的过程就会比较慢，所以你先使其失效，并可以添加符号断点 Symbolic Breakpoint...

添加断点到发生崩溃前的附近，比如我这里添加了 -[UINavigationController _layoutViewController:] 这个断点，因为相比较于刚才那个断点，它调用次数就很少了

符号的描述取自调用栈第一行

等跳到断点时别急着切回 断点A，需要对比一下当前的调用栈和崩溃的调用栈是否一致，如果一致则切回 断点A，否则继续放行断点，这里也可以自己并数数并放行，确认第n次时崩溃发生了，再运行一遍，放行 n-1 次后切回 断点A

待切回 断点A 后你会发现 Xcode 的控制台开始疯狂打印信息，至到停止，取最后几条信息如下所示：

<CALayer:0x2820ca480; position = CGPoint (315 135); bounds = CGRect (0 0; 80 20); 
+
+delegate = <xxx.JXPageControlEllipse: 0x10bdaf130;  // 注意这里
+
+frame = (275 125; 80 20); layer = <CALayer: 0x2820ca480>>; sublayers = (<CALayer: 0x2820ca440>); opaque = YES; allowsGroupOpacity = YES; >
+(char *) $325 = 0x00000001e4f40ab8 "layoutSublayers"
+
+<CALayer:0x2820ca440; position = CGPoint (68 10); bounds = CGRect (0 0; 24 4); delegate = <UIView: 0x10bdaf4e0; frame = (56 8; 24 4); layer = <CALayer: 0x2820ca440>>; sublayers = (<CALayer: 0x28216f5c0>, <CALayer: 0x28216e6c0>, <CALayer: 0x28216d3c0>, <CALayer: 0x28216d540>); opaque = YES; allowsGroupOpacity = YES; >
+(char *) $327 = 0x00000001e4f40ab8 "layoutSublayers"
+

可以看到崩溃前调用的方法名 layoutSublayers ，所在视图的 frame 等信息。

再往上找，有一个类型 JXPageControlEllipse，对代码进行全局搜索，发现只有首页轮播图有使用，是一个第三方的指示器，且视图的所有 frame 都对得上，那没跑了，注释相关使用的代码后发现一切都正常了😭 ~

# 解决

根据调用栈的第二条信息 CA::Layer::layout_if_needed:(CA::Transaction*) 发现与 CATransaction 有关，对该第三方的代码进行搜索一番，有两处方法里使用到了，删除多余的代码后如下所示：

// MARK: - -------------------------- Update tht data --------------------------
+override func updateProgress(_ progress: CGFloat) {
+	...
+    
+    CATransaction.setDisableActions(!isAnimation)
+    
+    ...
+    
+    CATransaction.commit()
+}
+
override func updateCurrentPage(_ pageIndex: Int) {
+    ...
+    
+    if isAnimation {
+        CATransaction.begin()
+        CATransaction.setCompletionBlock {[weak self] in
+            ...
+            
+        }
+        
+        ...
+        
+        CATransaction.begin()
+        ...
+        CATransaction.commit()
+        
+        CATransaction.commit()
+        
+    } else {
+        CATransaction.begin()
+        CATransaction.setCompletionBlock {[weak self] in
+            ...
+        }
+        ...
+        CATransaction.begin()
+        ...
+        CATransaction.commit()
+        CATransaction.commit()
+    }
+    currentIndex = pageIndex
+}
+

结果发现第一个方法中没有调用 CATransaction.begin()，CATransaction.begin() 与 CATransaction.commit() 需要成对使用，补上后再运行一遍，世界终于又美好了😀

// MARK: - -------------------------- Update tht data --------------------------
+override func updateProgress(_ progress: CGFloat) {
+	...
+    
+    CATransaction.setDisableActions(!isAnimation)
+    CATransaction.begin() // 补的内容
+    
+    ...
+    
+    CATransaction.commit()
+}
+

# 参考

深入iOS系统底层之crash解决方法 (opens new window)

+ +
+
#iOS#Xcode
Fastlane - 解决报错Could not find a `ios` simulator
iOS - Swift 面向协议编程（一）

+ ← + iOS - Swift 面向协议编程（一）→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/beb840/index.html b/pages/beb840/index.html new file mode 100644 index 000000000..da137fc6c --- /dev/null +++ b/pages/beb840/index.html @@ -0,0 +1,226 @@ + + + + + + Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-08-09
目录

Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、痛点

痛点一：Flutter 官方提供了 ScrollController，调用下方两个方法可以滚动到指定偏移处

void jumpTo(double value)
+
Future<void> animateTo(
+  double offset, {
+  required Duration duration,
+  required Curve curve,
+})
+

但是官方没有提供滚动到指定下标位置的功能

痛点二：

为了解决痛点一，业内有很多第三方库实现了这个功能，其中最知名的莫过于谷歌的 scrollable_positioned_list (opens new window)

而这些库都有一些相同的问题：

  • 侵入性强，必须使用他们提供的 Widget 来构建列表视图
  • 不支持 GridView

对此，我决定自己编写一个库（flutter_scrollview_observer (opens new window)）来实现这个功能，以及解决以上的问题。

# 二、优点

  1. 侵入性低，不会限制你的列表视图实现，只要求将列表视图做为 ViewObserver 的 child，如果不想用了，直接移除掉 ViewObserver 即可。
  2. 基于【不会限制你的列表视图实现】这一点， flutter_scrollview_observer 支持所有的列表Widget，如:ListView、GridView，甚至 CustomSrollView
  3. 防抖动，如果在滚动到指定下标时，列表尾部的可滚动区域已不足以支撑滚动到相应位置，则会自动滚动到最底部，避免回弹的问题

下面正式介绍一下这个库的使用

# 三、使用

# 1、ListView

正常创建和使用 ScrollController 实例

这里你可以使用 ListView 或者 CustomSrollView 的 SliverList

ScrollController scrollController = ScrollController();
+
+ListView _buildListView() {
+  return ListView.separated(
+    controller: scrollController,
+    ...
+  );
+}
+

创建 ListObserverController 实例并将其传递给 ListViewObserver

ListObserverController observerController = ListObserverController(controller: scrollController);
+
+ListViewObserver(
+  controller: observerController,
+  child: _buildListView(),
+  ...
+)
+

注意：创建 ListObserverController 实例时需要传入列表的 ScrollController 实例。 +这一步很重要，因为 flutter_scrollview_observer 内部实现原理是基于官方 ScrollController 提供的 jumpTo 和 animateTo 方法

现在即可滚动到指定下标位置了

// 无动画滚动至下标位置
+observerController.jumpTo(index: 100)
+
+// 动画滚动至下标位置
+observerController.animateTo(
+  index: 100,
+  duration: const Duration(seconds: 1),
+  curve: Curves.ease,
+);
+

# 2、GridView

由于内容与 ListView 基本一致，所以这里就折叠了，需要的小伙伴可点击【展开查看】

展开查看

正常创建和使用 ScrollController 实例

Widget _buildGridView() {
+  return GridView.builder(
+    ...
+    controller: scrollController,
+    ...
+  );
+}
+

创建 GridObserverController 实例并将其传递给 GridViewObserver

GridObserverController observerController = GridObserverController(controller: scrollController);
+
+GridViewObserver(
+  controller: observerController,
+  child: _buildGridView(),
+)
+

现在即可滚动到指定下标位置了

observerController.jumpTo(
+  index: 40,
+);
+
+observerController.animateTo(
+  index: 40,
+  duration: const Duration(seconds: 1),
+  curve: Curves.ease,
+);
+

# 3、CustomSrollView

支持 SliverList 和 SliverGrid 混合使用的情况！

如上图所示，CustomSrollView 的 slivers 中包含有 SliverList 和 SliverGrid

  • 点击右下角第一个按钮可滚动到 SliverList 的第 29 行
  • 点击第二个按钮可滚动到 SliverGrid 的第 10 的子部件所在行
展开查看

正常创建和使用 ScrollController 实例

Widget _buildScrollView() {
+  return CustomScrollView(
+    controller: scrollController,
+    // scrollDirection: Axis.horizontal,
+    slivers: [
+      _buildSliverListView(),
+      _buildSliverGridView(),
+    ],
+  );
+}
+

正常创建你的 SliverList 和 SliverGrid，并将它们的 BuildContext 记录起来

Widget _buildSliverListView() {
+  return SliverList(
+    delegate: SliverChildBuilderDelegate(
+      (ctx, index) {
+        _sliverListCtx ??= ctx;
+        ...
+      },
+      ...
+    ),
+  );
+}
+
+Widget _buildSliverGridView() {
+  return SliverGrid(
+    ...
+    delegate: SliverChildBuilderDelegate(
+      (BuildContext context, int index) {
+        _sliverGridCtx ??= context;
+        ...
+      },
+      ...
+    ),
+  );
+}
+

创建 SliverObserverController 实例并将其传递给 SliverViewObserver

注意：在 sliverListContexts 里返回刚才记录的两个 Sliver 的 BuildContext

SliverObserverController observerController = SliverObserverController(controller: scrollController);
+
+SliverViewObserver(
+  controller: observerController,
+  child: _buildScrollView(),
+  sliverListContexts: () {
+    return [
+      if (_sliverListCtx != null) _sliverListCtx!,
+      if (_sliverGridCtx != null) _sliverGridCtx!,
+    ];
+  },
+  ...
+),
+

现在即可滚动到指定下标位置了

observerController.animateTo(
+  sliverContext: _sliverListCtx,
+  index: 29,
+  duration: const Duration(milliseconds: 300),
+  curve: Curves.easeInOut,
+);
+
+observerController.animateTo(
+  sliverContext: _sliverGridCtx,
+  index: 10,
+  duration: const Duration(milliseconds: 300),
+  curve: Curves.easeInOut,
+);
+

# 四、说明

# 1、ViewObserver 的选择

建议使用相应的 ViewObserver：

  • 如果是 ListView 或者纯 SliverList，建议使用 ListViewObserver
  • 如果是 GridView 或者纯 SliverGrid，建议使用 GridViewObserver
  • 如果是 SliverList 和 SliverGrid，则使用 SliverViewObserver

这样在 onObserve 回调中拿到数据模型后不用再对其进行类型判断与转换。

# 2、isFixedHeight

子部件为固定高度的情况下，请设置 isFixedHeight 为 true，以提升性能！

observerController.jumpTo(
+  index: 100, 
+  isFixedHeight: true
+);
+
+observerController.animateTo(
+  index: 100,
+  isFixedHeight: true,
+  duration: const Duration(seconds: 1),
+  curve: Curves.ease,
+);
+

# 3、sliverContext 是否需要传

jumpTo({
+  required int index,
+  BuildContext? sliverContext,
+  bool isFixedHeight = false,
+})
+
+animateTo({
+  required int index,
+  required Duration duration,
+  required Curve curve,
+  BuildContext? sliverContext,
+  bool isFixedHeight = false,
+})
+

如上，jumpTo 和 animateTo 方法中都有一个 sliverContext 参数，这是用来指定哪个 sliver 进行滚动操作的。

如果不传 sliverContext，则默认会是列表中的第一个 sliver，只有你想让非第一个 sliver 进行滚动的时候才需要传该值

# 五、可现实的功能

# 1、获得当前视窗中的子部件信息

如上图控制台所示，在滚动的过程中可以实时获取正在显示的子部件的数据。

# 2、视频列表自动播放

这种功能很常见，在列表滚动的时候，指定区域内的被命中的视频便会自动进行播放。

# 3、模块定位

一般详情页中都会有的功能，在列表视图滚动的时候，顶部定位导航视图跟着更新下标，点击导航视图某个下标则会定位到对应的模块

# 六、最后

如果这个库对你很有帮助，请不吝给个 star 吧

GitHub: flutter_scrollview_observer (opens new window)

+ +
+
#Dart#Flutter
Flutter - 获取ListView当前正在显示的Widget信息
Flutter - 快速实现聊天会话列表的效果，完美💯

+ ← + Flutter - 快速实现聊天会话列表的效果，完美💯→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/bfa843/index.html b/pages/bfa843/index.html new file mode 100644 index 000000000..c7b27a144 --- /dev/null +++ b/pages/bfa843/index.html @@ -0,0 +1,132 @@ + + + + + + Docker - 私有仓库Registry | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-01-31
目录

Docker - 私有仓库Registry

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

私有仓库: 在本地（局域网）搭建的一个类似公共仓库的东西，我们可以将镜像提交到私有仓库中，供局域网内的其它人拉取使用。 +本文以 Registry 为例，并在提供私有仓库的主机上操作

# 拉取私有仓库镜像

请先确保你当前拥有的镜像有 registry +如果没有，可以先拉取下来

docker image pull registry
+

# 设置私有仓库地址

vim /etc/docker/daemon.json
+

修改 insecure-registries 的值，提供私有仓库的主机的ip地址和端口

{
+  ...
+  "insecure-registries":[
+    "192.168.1.234:5000"
+  ],
+  ...
+}
+

Mac软件版 + 修改后重新启动 docker 服务

# 运行私有仓库镜像资源

将 registry 镜像生成一个容器并运行起来

# -p 5000:5000 
+# 第一个是容器使用的端口，第二个是本地端口，这里是本地端口映射到把容器的端口
+docker run -d -p 5000:5000 registry
+
~/lxf ❯ docker ps
+❯ docker ps
+CONTAINER ID   IMAGE      COMMAND                  CREATED         STATUS         PORTS      NAMES
+f12ad7ae43ca   registry   "/entrypoint.sh /etc…"   9 minutes ago   Up 9 minutes   5000/tcp   nostalgic_elion
+

此时你可以访问如下地址，如果看到 {} 就说明 Registry 运行正常

http://192.168.1.234:5000/v2/
+

# 上传镜像

比如此时我要将 ubuntu 这个镜像上传到私有仓库

# 给ubuntu镜像打一个tag，命名需为 私有仓库主机ip:端口/镜像名:[版本号,不加默认为latest]
+docker tag ubuntu:latest 192.168.1.234:5000/ubuntu:v0.1
+

+开始上传镜像至本地的私有仓库中

# docker push <registry_ip>:<registry_port>/<image_name>:<image_tag>
+docker push 192.168.1.234:5000/ubuntu:v0.1
+

# 拉取镜像

先将本地的 v0.1 删掉

docker rmi 192.168.1.234:5000/ubuntu:v0.1
+

拉取私有仓库中 ubuntu 的 0.1 版本镜像

# docker pull <registry_ip>:<registry_port>/<image_name>:<image_tag>
+docker pull 192.168.1.234:5000/ubuntu:v0.1
+

# 搜索镜像

Registry 不支持通过 docker search 这种方式去搜索镜像，会报 404 的错误 + +需要使用 V2 API 去查询

# 列出仓库中所有的镜像

curl 192.168.1.234:5000/v2/_catalog
+

# 列出指定镜像的所有标签

# curl -X GET http://<registry_ip>:<registry_port>/v2/<image_name>/tags/list
+curl 192.168.1.234:5000/v2/lxf/tags/list
+

# 删除镜像

查找指定标签的镜像的 digest ，再根据这个 digest 来删除，以删除 lxf:0.2 镜像为例

先执行命令找到该镜像的 digest

curl -v --silent -H "Accept: application/vnd.docker.distribution.manifest.v2+json" -X GET  http://192.168.1.234:5000/v2/lxf/manifests/0.2 2>&1 | grep Docker-Content-Digest | awk '{print ($3)}'
+

得到输出值

sha256:4e4bc990609ed865e07afc8427c30ffdddca5153fd4e82c20d8f0783a291e241
+

根据 digest 来删除镜像

curl -v --silent -H "Accept: application/vnd.docker.distribution.manifest.v2+json" -X DELETE http://192.168.1.234:5000/v2/lxf/manifests/sha256:4e4bc990609ed865e07afc8427c30ffdddca5153fd4e82c20d8f0783a291e241
+

+这个时候只是删除镜像的元数据，并没有真正从硬盘上删除镜像，需要执行垃圾回收才行。

# 删除失败

遇到 405 UNSUPPORTED 错误 +

需要在运行 Registry 容器时设置REGISTRY_STORAGE_DELETE_ENABLED 为 true

举例

docker-compose.yaml：设置环境变量

environment:
+    REGISTRY_STORAGE_DELETE_ENABLED: "true"
+

docker run：添加参数

# -e REGISTRY_STORAGE_DELETE_ENABLED="true"
+docker run -d -p 5000:5000 -e REGISTRY_STORAGE_DELETE_ENABLED="true" registry
+

# 垃圾回收

执行垃圾回收，上述删除的镜像才会真正从硬盘上移除

docker exec -it registry的容器名 /bin/registry garbage-collect /etc/docker/registry/config.yml
+

+ +
+
#Docker
Docker - 操作容器
Docker - 数据管理

+ ← + Docker - 数据管理→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/bfc897/index.html b/pages/bfc897/index.html new file mode 100644 index 000000000..cf9368a8f --- /dev/null +++ b/pages/bfc897/index.html @@ -0,0 +1,203 @@ + + + + + + DesignPattern - 组合模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-11
目录

DesignPattern - 组合模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、组合模式介绍

组合模式又叫部分整体模式，将对象组合成树形结构以表示“部分-整体”的层次结构，可以更好的实现管理操作；组合模式使得用户可以使用一致的方法操作单个对象和组合对象；部分-整体对象的基本操作多数是一样的，但是也有不一样的地方。

本质：组合模式可以使用一棵树来表示

  • 核心组成

    • 组合中的对象声明接口（Component）：在适当的情况下，实现所有类共有接口的默认行为。声明一个接口用于访问和管理 Component 子部件。
    • 容器对象（Composite）：定义有枝节点行为，用来存储子部件，在 Component 接口中实现与子部件有关的操作，如增加和删除等。
    • 叶子对象（Leaf）：没有子节点。

    注意：容器对象和叶子节点都实现 Component 接口，这也是能够将两者一致对待的关键所在。

  • 应用场景

    • 银行总行，总行有前台、后勤、网络部门等，辖区下还有地方分行，也有前台、后勤、网络部门，最小的分行就没有子分行了
    • 公司也是，总公司下有子公司，每个公司大部分的部门都类似
    • 文件夹和文件，也有层级管理关系

  • 何时使用

    • 当想表达对象的部分-整体的层次结构
    • 当我们要处理的对象可以生成一颗树形结构，对树上节点和叶子进行操作时，它能够提供一致的方式，而不用考虑它是节点还是叶子

  • 优点

    • 客户只需要面对一致的对象而不用考虑整体部分或者节点叶子
    • 方便创建出复杂的层次结构

  • 缺点

    • 客户端需要花更多时间理清类之间的层次关系

# 二、组合模式代码实现

以 "文件-文件夹" 为例，在 Linux 系统中，两者均是文件，定义一个文件接口：

说明 ：Component 接口定义一些通用属性及方法（还可以增加一些默认行为），故使用抽象类。除了 display() 方法以外，还可以定义诸如 rename()、delete() 等 文件 和 文件夹 都可以有的方法，当然这类方法对于文件和文件夹而言是不一样的，文件的 delete() 是删除自己，而文件夹的 delete() 则可以是删除整个文件目录。

/**
+ * 组合中的对象声明接口（声明一个接口用于访问和管理子部件）
+ *
+ * @author GitLqr
+ */
+public abstract class File {
+
+	String name;
+
+	public File(String name) {
+		this.name = name;
+	}
+
+	public String getName() {
+		return name;
+	}
+
+	public void setName(String name) {
+		this.name = name;
+	}
+
+	/**
+	 * 显示子部件信息
+	 */
+	public abstract void display();
+}
+

定义容器对象（文件夹）类：

说明 ：因为是容器对象，需要定义容器（一般是数组）来存储子部件，以及增加必要的管理子部件的方法，如：增加、删除。

/**
+ * 容器对象(定义枝节点行为，存储子部件)：文件夹
+ *
+ * @author GitLqr
+ */
+public class Folder extends File {
+
+	private List<File> files = new ArrayList<>();
+
+	public Folder(String name) {
+		super(name);
+	}
+
+	/**
+	 * 浏览文件夹中的文件
+	 */
+	@Override
+	public void display() {
+		for (File file : files) {
+			file.display();
+		}
+	}
+
+	/**
+	 * 向文件夹中添加文件
+	 */
+	public void addFile(File file) {
+		files.add(file);
+	}
+
+	/**
+	 * 从文件夹中删除文件
+	 */
+	public void removeFile(File file) {
+		files.remove(file);
+	}
+}
+

定义叶子对象（具体文件）类：

说明：叶子对象没有子节点，所以不需要像文件夹那样，只需要实现 Component 接口中的方法即可。

/**
+ * 叶子节点：文本文件
+ *
+ * @author GitLqr
+ */
+public class TextFile extends File {
+
+	public TextFile(String name) {
+		super(name);
+	}
+
+	@Override
+	public void display() {
+		System.out.println("文本文件 - 文件名为：" + name);
+	}
+
+}
+/**
+ * 叶子节点：图像文件
+ *
+ * @author GitLqr
+ */
+public class ImageFile extends File {
+
+	public ImageFile(String name) {
+		super(name);
+	}
+
+	@Override
+	public void display() {
+		System.out.println("图像文件，文件名：" + name);
+	}
+
+}
+

使用：

说明：display() 方法对于文件夹【容器对象】而言，是显示容器中所有 "文件" 的信息，对于具体文件【叶子对象】而言，则是显示自己的信息。

public static void main(String[] args) {
+    Folder folder1 = new Folder("文件夹1");
+
+    // 填充文件夹2
+    Folder folder2 = new Folder("文件夹2");
+    TextFile readmeFile = new TextFile("readme.txt");
+    ImageFile qrcodeFile = new ImageFile("qrcode.jpg");
+    ImageFile pictureFile = new ImageFile("picture.jpg");
+    folder2.addFile(readmeFile);
+    folder2.addFile(qrcodeFile);
+    folder2.addFile(pictureFile);
+
+    // 把文件夹2添加到文件夹1中
+    folder1.addFile(folder2);
+    // "递归"遍历文件夹1中所有的文件
+    folder1.display();
+}
+
+ +
+
#设计模式#组合模式
DesignPattern - 桥接模式【结构型】
DesignPattern - 装饰器模式【结构型】

+ ← + DesignPattern - 装饰器模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c243aa/index.html b/pages/c243aa/index.html new file mode 100644 index 000000000..2f2be28d4 --- /dev/null +++ b/pages/c243aa/index.html @@ -0,0 +1,112 @@ + + + + + + iOS - Swift 高仿微信 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift 高仿微信

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# LXFWeChat

Swift 3.0 高仿微信

两个测试账号： lxf lqr  密码都是123456

# 源码地址

码云 +http://git.oschina.net/LinXunFeng/LXFWeChat

GitHub +https://github.com/LinXunFeng/LXFWeChat

在此提供存放于百度云的完整项目【高仿微信】- 百度云 (opens new window) +希望各位能在我的项目上献出一个宝贵的Star +谢谢

从2016年12月份开始做到现在，虽说这个项目看起来不大，但是锻炼人的地方还真是很多的，微信通讯录联系人的按拼音排序，自定义表情键盘中遇到的分页滚动，微信聊天界面的图片显示、语音信息的动画等。挑战着各种各样的需求，本人也将遇到的问题的解决方案做了记录并整理了一下，希望能给iOS程序员同胞们带来帮助。目前基本的聊天已完成，实现了一部分个人信息的修改，功能我会尽快完善的！

# 模仿微信的导航栏

在navigationBar底部添加一个添加了渐变层的view

let blurBackView = UIView()
+blurBackView.frame = CGRect(x: 0, y: -20, width: kScreenW, height: 64)
+let gradintLayer = CAGradientLayer()
+gradintLayer.frame = CGRect(x: 0, y: 0, width: kScreenW, height: 64)
+gradintLayer.colors = [
+    UIColor.hexInt(0x040012).withAlphaComponent(0.76).cgColor,
+    UIColor.hexInt(0x040012).withAlphaComponent(0.28).cgColor
+]
+gradintLayer.startPoint = CGPoint(x: 0, y: 0)
+gradintLayer.endPoint = CGPoint(x: 0, y: 1.0)
+blurBackView.layer.addSublayer(gradintLayer)
+blurBackView.isUserInteractionEnabled = false
+blurBackView.alpha = 0.5
+
+// 设置导航栏样式
+navigationBar.barStyle = .black
+navigationBar.insertSubview(blurBackView, at: 0)
+

# 表情面板和更多面板

遇到的问题总结了一下，可以参考下以下总结的文章

《iOS - Swift UICollectionView横向分页滚动，cell左右排版》

《iOS-Swift-UICollectionView横向分页的问题》

# 聊天界面

《iOS-Swift 仿微信聊天图片显示》

《iOS-Swift-UITableView的scrollToRow的"坑"》

《iOS-Swift-UIButton中ImageView的animationImages动画执行完毕后，图标变暗》

# 首页

《iOS - Swift 仿微信小红点(无数字)》

# 目前完成的功能

# 微信界面

  1. 显示右上角的菜单
  2. 显示最近联系人
  3. 最近联系人信息未读数的显示

# 通讯录界面

  1. 联系人的排序
  2. 联系人总数显示

# 发现界面

  1. 动态小红点的显示
  2. 购物选项的链接跳转

# 我界面

  1. 个人头像的上传与设置，及头像的保存
  2. 我的二维码界面的显示及二维码的保存

# 聊天界面

  1. 小视频的录制与发送
  2. 小视频的播放
  3. 聊天时间
  4. 图片的发送与显示
  5. 未发送成功的重发功能
  6. 语音的录制与发送
  7. 语音的播放动态效果

# 已知BUG

  • 小视频和图片发送出去后不能立即更新显示缩略图
  • 更换头像模拟器测试正常，真机无效。。

# 2017-07-24 更新

抽空出来添加了一个简单的直播功能（对方需要先进入到对应的聊天界面） +相关博文：iOS-给高仿微信添加直播聊天功能 +需要用到编译好的B站开源库ijkplayer (opens new window) ，由于打包好的文件太大，传不上来，所以需要各位去自己编译集成进去。

# 效果图

# 动态图

# 静态图

+ +
+
#iOS项目#Swift
iOS - Swift3.0 高仿喜马拉雅FM
iOS - 面向协议方式封装空白页功能

+ ← + iOS - 面向协议方式封装空白页功能→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c2b035/index.html b/pages/c2b035/index.html new file mode 100644 index 000000000..30ef7b4cf --- /dev/null +++ b/pages/c2b035/index.html @@ -0,0 +1,295 @@ + + + + + + Flutter - 子部件任意位置观察滚动数据 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-11-24
目录

Flutter - 子部件任意位置观察滚动数据

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在 scrollview_observer (opens new window) 的 1.23.0 中，新增了允许对观察结果进行监听的功能，也就是说你可以不需要在固定的观察结果回调（如：onObserve、onObserveAll ）中去处理数据了。

那具体是什么意思呢？我们通过实战来了解一下。

# 二、实战

这里以之前的 Flutter - 轻松搞定炫酷视差(Parallax)效果 为例

# Page

这里附上原先 PageView 的构建代码，以及使用 ListViewObserver 对其进行观察，并在 onObserve 回调中实现 Parallax 效果的详细处理逻辑

final observerController = ListObserverController();
+
+Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    ...
+  );
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+    triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+    onObserve: (resultModel) {
+      final displayingChildModelList = resultModel.displayingChildModelList;
+      for (var itemModel in displayingChildModelList) {
+        // 取出 item 的下标
+        final itemIndex = itemModel.index;
+        // 取出 item 自身的显示占比
+        final itemDisplayPercentage = itemModel.displayPercentage;
+
+        // 计算无符号的 alignment.x
+        double itemAlignmentX = 1 - itemDisplayPercentage;
+        
+        // 计算有符号的 alignment.x
+        if (itemModel.leadingMarginToViewport > 0) {
+          itemAlignmentX = -itemAlignmentX;
+        }
+        
+        // 取值范围判断
+        if (itemAlignmentX > 1) {
+          itemAlignmentX = 1;
+        } else if (itemAlignmentX < -1) {
+          itemAlignmentX = -1;
+        }
+        
+        // 赋值
+        pageItemBgPicAlignmentXList[itemIndex].value = itemAlignmentX;
+      }
+    },
+    customTargetRenderSliverType: (renderObj) {
+      return renderObj is RenderSliverFillViewport;
+    },
+  );
+
+  ...
+  return resultWidget;
+}
+

在上代码中，我们在 onObserve 回调中去处理了 Parallax 效果的一切逻辑，但假设 item 有多种类型呢？比如可能会在其中插一个不需要 Parallax 效果的纯广告图片的 item，这个时候就得去取出对应下标的数据，判断是否需要该效果，否则就 return 不做处理。

那此时就会想，我们能不能仅在需要 Parallax 效果的 item 内部去做呢？

可以，我们先将 onObserve 回调去除，保留 ListViewObserver 及其配置，即保留观察能力，为 item 提供数据。

final observerController = ListObserverController();
+
+Widget _buildPageView() {
+  Widget resultWidget = PageView.builder(
+    ...
+  );
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+    triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+    customTargetRenderSliverType: (renderObj) {
+      return renderObj is RenderSliverFillViewport;
+    },
+  );
+
+  ...
+  return resultWidget;
+}
+

# Item

将 item 抽成 StatefulWidget，并传入下标和对应的数据

class ParallaxItemView extends StatefulWidget {
+  final int index;
+  final String imgUrl;
+
+  const ParallaxItemView({
+    Key? key,
+    required this.index,
+    required this.imgUrl,
+  }) : super(key: key);
+
+  @override
+  State<ParallaxItemView> createState() => _ParallaxItemViewState();
+}
+

附上视图布局代码，主要靠 picAlignmentX 来控制背景的对齐偏移，进而实现视差效果。

class _ParallaxItemViewState extends State<ParallaxItemView> {
+  final picAlignmentX = ValueNotifier<double>(0);
+  ...
+
+  @override
+  void dispose() {
+    ...
+    picAlignmentX.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget resultWidget = Stack(
+      alignment: AlignmentDirectional.center,
+      children: [
+        Positioned(
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          child: _buildPageItemBgPicView(widget.index),
+        ),
+        ...
+      ],
+    );
+    ...
+    return resultWidget;
+  }
+
+  Widget _buildPageItemBgPicView(int index) {
+    return ValueListenableBuilder(
+      valueListenable: picAlignmentX,
+      builder: (BuildContext context, double alignmentX, Widget? child) {
+        return Image.network(
+          widget.imgUrl,
+          fit: BoxFit.cover,
+          alignment: Alignment(alignmentX, 0),
+        );
+      },
+    );
+  }
+}
+

好了，现在来实现在 item 中对观察结果数据的监听。

ListViewObserverState? observerState;
+
+@override
+void didChangeDependencies() {
+  super.didChangeDependencies();
+
+  removeListener();
+  // 通过当前 item 的 context 找到 ListViewObserver 的 State
+  // 再调用 addListener 方法对其进行监听
+  observerState = ListViewObserver.of(context)
+    ..addListener(
+      onObserve: handleObserverResult,
+    );
+}
+
+@override
+void dispose() {
+  ...
+  removeListener();
+  super.dispose();
+}
+
+/// 移除监听
+void removeListener() {
+  observerState?.removeListener(
+    onObserve: handleObserverResult,
+  );
+  observerState = null;
+}
+
+/// 处理监听结果
+void handleObserverResult(
+  ListViewObserveModel result,
+) {
+  if (result.displayingChildModelMap.isEmpty) return;
+  // 根据 index 取出对应的观察结果数据
+  final model = result.displayingChildModelMap[widget.index];
+  // 取不到说明当前不在显示区内，重置 picAlignmentX
+  if (model == null) {
+    picAlignmentX.value = 0;
+    return;
+  }
+
+  // 计算无符号的 alignment.x
+  picAlignmentX.value = 1 - model.displayPercentage;
+
+  // 计算有符号的 alignment.x
+  if (model.leadingMarginToViewport > 0) {
+    picAlignmentX.value = -picAlignmentX.value;
+  }
+
+  // 取值范围判断
+  if (picAlignmentX.value > 1) {
+    picAlignmentX.value = 1;
+  } else if (picAlignmentX.value < -1) {
+    picAlignmentX.value = -1;
+  }
+}
+

其实很简单，也就三步走

  • 调用 addListener 对观察结果进行监听
  • 处理观察结果数据
  • 在 dispose 方法中调用 removeListener 移除监听

handleObserverResult 方法中关于 picAlignmentX 的计算在之前的 Flutter - 轻松搞定炫酷视差(Parallax)效果 一文中有详细讲解，这里就不再赘述。

# 三、其它说明

# of

根据 context 向上找最近的 ObserverWidgetState，如果找不到会抛异常。

observerState = ListViewObserver.of(context);
+observerState = GridViewObserver.of(context);
+observerState = SliverViewObserver.of(context);
+

# maybeOf

of 的可选类型版本，如果向上找不到对应类型的 ObserverWidgetState 则返回 null

observerState = ListViewObserver.maybeOf(context);
+observerState = GridViewObserver.maybeOf(context);
+observerState = SliverViewObserver.maybeOf(context);
+

# 嵌套问题

ObserverWidget 是可以嵌套使用的，如下代码所示

widget = getListView(
+  scrollController: scrollController,
+  itemCount: 100,
+  itemBuilder: (context, index) {
+    ...
+  },
+);
+widget = ListViewObserver(
+  tag: tag2,
+  child: widget,
+  controller: observerController2,
+);
+widget = ListViewObserver(
+  tag: tag1,
+  child: widget,
+  controller: observerController1,
+);
+

一个 ListView 被两个 ListViewObserver 所包裹。

如果此时我们直接使用 item 的 BuildContext 去调用 of，则会拿到离它最近的 tag2 的 ListViewObserverState。

// tag2 的 ListViewObserverState
+ListViewObserver.of(itemContext)
+

那如果我们想要拿到的是 tag1 的 ListViewObserverState，该怎么做呢？

很简单，使用 tag 参数即可~

ListViewObserver.of(
+  context,
+  tag: tag1,
+);
+

当然，你不使用 tag 参数，而是通过 tag2 的 ListViewObserver 对应的 BuildContext 去调用 of 也是可以的~

ListViewObserver.of(tag2Context);
+

# 四、最后

通过上述示例的讲解，相信你对 scrollview_observer 的使用又更加清楚，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

GitHub: https://github.com/fluttercandies/flutter_scrollview_observer (opens new window)

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 危！3.24版本苹果审核被拒！

+ ← +

最近更新
01
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
02
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
03
+ Flutter - 轻松实现PageView卡片偏移效果 +
09-08
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c53d80/index.html b/pages/c53d80/index.html new file mode 100644 index 000000000..d2295fe8e --- /dev/null +++ b/pages/c53d80/index.html @@ -0,0 +1,183 @@ + + + + + + iOS - 视频采集详解 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-10-16
目录

iOS - 视频采集详解

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

苹果官方文档-AVFoundation (opens new window)

为了管理从相机或者麦克风等这样的设备捕获到的信息，我们需要输入对象(input)和输出对象(output)，并且使用一个会话(AVCaptureSession)来管理 input 和 output 之前的数据流：

类名 简介
AVCaptureDevice 输入设备，例如 摄像头 麦克风
AVCaptureInput 输入端口 [使用其子类]
AVCaptureOutput 设备输出 [使用其子类]，输出视频文件或者静态图像
AVCaptureSession 管理输入到输出的数据流
AVCaptureVideoPreviewLayer 展示采集 预览View

如图，通过单个 session，也可以管理多个 input 和 output 对象之间的数据流，从而得到视频、静态图像和预览视图

多个输入输出设备

如图，input 可以有一个或多个输入端口，output 也可以有一个或多个数据来源（如：一个 AVCaptureMovieFileOutput (opens new window) 对象可以接收视频数据和音频数据）

当添加 input 和 output 到 session 中时，session 会自动建立起一个连接(AVCaptureConnection)。我们可以使用这个 connection 来设置从 input 或者 从 output 得到的数据的有效性，也可以用来监控在音频信道中功率的平均值和峰值。

AVCaptureConnection

# 使用 Session 来管理数据流

创建一个 session 用来管理捕获到的数据，需要先将 inputs 和 outputs 添加到 session 中，当 session 执行 [startRunning] 方法后就会开始将数据流发送至 session，通过执行[stopRunning] 方法来结束数据流的发送。

AVCaptureSession *captureSession = [[AVCaptureSession alloc] init];
+
+// 添加 inputs 和 outputs
+
+[session startRunning];
+

在 [session startRunning] 之前我们需要进行一些基本的配置 (如：设备分辨率，添加输入输出对象等)

# 设置分辨率

// 设置分辨率 720P 标清
+if ([captureSession canSetSessionPreset:AVCaptureSessionPreset1280x720]) {
+    captureSession.sessionPreset = AVCaptureSessionPreset1280x720;
+}
+

附苹果官方文档中可供配置的分辨率列表

分辨率列表

其中高分辨率(AVCaptureSessionPresetHigh) 为默认值，会根据当前设备进行自适应，但是这样之后导出来的文件就会很大，一般情况下设置为标清(AVCaptureSessionPreset1280x720) 就可以了

# 输入对象

// 直接使用后置摄像头
+AVCaptureDevice *videoDevice = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
+
// 在这个方法中的 mediaType 有三个选项供我们使用
+// AVMediaTypeVideo 视频
+// AVMediaTypeAudio 音频
+// AVMediaTypeMuxed 混合(视频 + 音频)
++ (nullable AVCaptureDevice *)defaultDeviceWithMediaType:(AVMediaType)mediaType;
+

但是这种方式只能获取到后置摄像头，如果想要获取前置摄像头，可使用

AVCaptureDevice *videoDevice;
+NSArray *devices = [AVCaptureDevice devices];
+for (AVCaptureDevice *device in devices) {
+   if(device.position == AVCaptureDevicePositionFront) {
+        // 前置摄像头
+        videoDevice = device;
+   }
+}
+
// 通过设备获取输入对象
+AVCaptureDeviceInput *videoInput = [AVCaptureDeviceInput deviceInputWithDevice:videoDevice error:nil];
+// 给会话添加输入
+if([captureSession canAddInput:videoInput]) {
+    [captureSession addInput:videoInput];
+}
+

# 输出对象

// 视频输出：设置视频原数据格式：YUV, RGB 
+// 苹果不支持YUV的渲染，只支持RGB渲染，这意味着： YUV => RGB
+AVCaptureVideoDataOutput *videoOutput = [[AVCaptureVideoDataOutput alloc] init];
+
+// videoSettings: 设置视频原数据格式 YUV FULL
+videoOutput.videoSettings = @{(NSString *)kCVPixelBufferPixelFormatTypeKey:@(kCVPixelFormatType_420YpCbCr8BiPlanarFullRange)};
+
+// 设置代理：获取帧数据
+// 队列：串行/并行，这里使用串行，保证数据顺序 
+dispatch_queue_t queue = dispatch_queue_create("LinXunFengSerialQueue", DISPATCH_QUEUE_SERIAL);
+[videoOutput setSampleBufferDelegate:self queue:queue];
+
+// 给会话添加输出对象
+if([captureSession canAddOutput:videoOutput]) {
+    // 给会话添加输入输出就会自动建立起连接
+    [captureSession addOutput:videoOutput];
+}
+

在这里，输出对象可以设置帧率

// 帧率：1秒10帧就差不多比较流畅了
+videoOutput.minFrameDuration = CMTimeMake(1, 10);
+

输出对象在设置视频原数据格式时使用 videoSettings 属性，需要赋值的类型是字典 +格式有两种，一种是YUV，另一种是RGB（一般我们都使用YUV，因为体积比RGB小）

// key
+kCVPixelBufferPixelFormatTypeKey 指定解码后的图像格式
+
+// value
+kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange  : YUV420 用于标清视频[420v]
+kCVPixelFormatType_420YpCbCr8BiPlanarFullRange   : YUV422 用于高清视频[420f] 
+kCVPixelFormatType_32BGRA : 输出的是BGRA的格式，适用于OpenGL和CoreImage
+
+区别：
+1、前两种是相机输出YUV格式，然后转成RGBA，最后一种是直接输出BGRA，然后转成RGBA;
+2、420v 输出的视频格式为NV12；范围： (luma=[16,235] chroma=[16,240])
+3、420f 输出的视频格式为NV12；范围： (luma=[0,255] chroma=[1,255])
+

# 预览图层

AVCaptureVideoPreviewLayer *previewLayer = [AVCaptureVideoPreviewLayer layerWithSession:captureSession];
+previewLayer.frame = self.view.bounds;
+[self.view.layer  addSublayer:previewLayer];
+

实时显示摄像头捕获到的图像，但不适用于滤镜渲染

# 代理方法

#pragma mark - AVCaptureVideoDataOutputSampleBufferDelegate
+/*
+ CMSampleBufferRef: 帧缓存数据，描述当前帧信息
+ CMSampleBufferGetXXX : 获取帧缓存信息
+ CMSampleBufferGetDuration : 获取当前帧播放时间
+ CMSampleBufferGetImageBuffer : 获取当前帧图片信息
+ */
+// 获取帧数据
+- (void)captureOutput:(AVCaptureOutput *)output didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection {
+    // captureSession 会话如果没有强引用，这里不会得到执行
+    
+    NSLog(@"----- sampleBuffer ----- %@", sampleBuffer);
+}
+
// 获取帧播放时间
+CMTime duration = CMSampleBufferGetDuration(sampleBuffer);
+

在代理方法中，可以把 sampleBuffer 数据渲染出来去显示画面。适用于滤镜渲染

// 获取图片帧数据
+CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
+CIImage *ciImage = [CIImage imageWithCVImageBuffer:imageBuffer];
+UIImage *image = [UIImage imageWithCIImage:ciImage];
+
+dispatch_async(dispatch_get_main_queue(), ^{
+    self.imageView.image = image;
+});
+

需要注意的是：代理方法中的所有动作所在队列都是在异步串行队列中，所以更新UI的操作需要回到主队列中进行！！

但是此时会发现，画面是向左旋转了90度，因为默认采集的视频是横屏的，需要我们进一步做调整。以下步骤添加在[session startRunning];之前即可，但是一定要在添加了 input 和 output之后～

// 获取输入与输出之间的连接
+AVCaptureConnection *connection = [videoOutput connectionWithMediaType:AVMediaTypeVideo];
+// 设置采集数据的方向
+connection.videoOrientation = AVCaptureVideoOrientationPortrait;
+// 设置镜像效果镜像
+connection.videoMirrored = YES;
+

# Demo

LXFAudioVideo (opens new window)

+ +
+
#iOS#Objective-C
iOS - 采集音视频及写入文件
iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError)

+ ← + iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError)→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c5b883/index.html b/pages/c5b883/index.html new file mode 100644 index 000000000..81a40cc11 --- /dev/null +++ b/pages/c5b883/index.html @@ -0,0 +1,164 @@ + + + + + + Kotlin - 数据类型 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-11
目录

Kotlin - 数据类型

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# Boolean 类型

示例代码：

val aBoolean: Boolean = true
+val anotherBoolean: Boolean = false
+

kotlin 中的 Boolean 在多数情况下，相当于 Java 中基本类型 boolean，只有在必要情况下才会装箱成 Java 中的装箱类型 Boolean，由编译器决定，通常我们不需要关心。

# Number 类型

Number 即数字，主要包括整型和浮点型：

分类 类型 位宽
浮点型 Double 64
Float 32
整型 Long 64
Int 32
Short 16
字节 Byte 8

# Int 类型

kotlin 的 Int 类型跟 Java 中的 int 一样，可以用整数、十六进制、二进制写法表示：

val anInt: Int = 8 // 8
+val anotherInt: Int = 0xFF // 255
+val moreInt: Int = 0b00000011 // 3
+val maxInt: Int = Int.MAX_VALUE // 2147483647
+val minInt: Int = Int.MIN_VALUE // -2147483648
+

整型是有符号的数，整型的最高位是符号位，剩下的 31 位表示数值范围，最大值是Math.pow(2.0, 31.0) - 1，最小值是-Math.pow(2.0, 31.0)

# Long 类型

Long 类型与 Int 类型相似，只是 Int 类型是 32 位，而 Long 类型是 64 位，能表示更大的数：

val aLong: Long = 12345678987654321 // 12345678987654321
+val anotherLong: Long = 123 // 123
+val maxLong: Long = Long.MAX_VALUE // 9223372036854775807
+val minLong: Long = Long.MIN_VALUE // -9223372036854775808
+

因为 anotherLong 强制指定了 Long 类型，所以对应的值 123 是 Long 类型，而 println(123) 中的 123 则是 Int 类型，如果需要指定为 Long 类型的话，可以这样来书写 println(123L)。

# Float 类型

Float 即单精度浮点数，是带有小数的数，Float 类型的数值表示必须在末尾加上 F 或 f，否则编译会认为是 Double 类型。

val aFloat: Float = 2.0F // 2.0
+val anotherFloat: Float = 1E3f // 1000.0
+val maxFloat: Float = Float.MAX_VALUE // 3.4028235E38
+val minFloat: Float = Float.MIN_VALUE // 1.4E-45
+val minFloatReal: Float = -Float.MAX_VALUE // -3.4028235E38
+val positiveInfinityFloat: Float = Float.POSITIVE_INFINITY // 正无穷，输出 Infinity
+val negativeInfinityFloat: Float = Float.NEGATIVE_INFINITY // 负无穷，输出 -Infinity
+

要注意 Float.MIN_VALUE 指最小非 0 正数！最小非 0 正数！最小非 0 正数！如果想表示带符号的最小浮点数则需要使用 -Float.MAX_VALUE。

以下是 Kotlin 中 Float 的部分源码注释：

/**
+ * Represents a single-precision 32-bit IEEE 754 floating point number.
+ * On the JVM, non-nullable values of this type are represented as values of the primitive type `float`.
+ */
+public class Float private constructor() : Number(), Comparable<Float> {
+    companion object {
+        /**
+         * A constant holding the smallest *positive* nonzero value of Float.
+         */
+        public val MIN_VALUE: Float
+
+        /**
+         * A constant holding the largest positive finite value of Float.
+         */
+        public val MAX_VALUE: Float
+    }
+}
+

# NaN

Float 拥有一个 NaN 常量属性，表示"不是一个数"的数，什么情况下会得到 NaN 呢？

println(0.0f / 0.0f) // NaN
+println(0.0f / 0.0f == Float.NaN) // false
+

通过上述 Demo 可以得出 2 个结论：

  1. 除零可以得到 NaN
  2. NaN 跟任何 NaN 结果不是相等的

NaN 表示 "不是一个数" ，所以比较起来没有意义。

# Double 类型

Double 即双精度浮点数（或多精度浮点数），Double 之于 Float 就如同 Long 之 Int，故 Double 其实就是比 Float 能表示更大的浮点数而已。

val aDouble: Double = 3.0 // 3.0
+val anotherDouble: Double = 3.1415926 // 3.1415926
+val maxDouble: Double = Double.MAX_VALUE // 1.7976931348623157E308
+val minDouble: Double = Double.MIN_VALUE // 4.9E-324
+val minDoubleReal: Double = -Double.MAX_VALUE // -1.7976931348623157E308
+

Double 与 Float 一样，Double.MIN_VALUE 表示的是最小非 0 正数。

# Short 类型

Short 也称短整型，位宽比 Int 少一半，即 16 位：

val aShort: Short = 127 // 127
+val maxShort: Short = Short.MAX_VALUE // 32767
+val minShort: Short = Short.MIN_VALUE // -32768
+

因为 Short 是 16 位的有符号数，所以 Short 能表示的最大数值是2 的 15 次减 1，即：Math.pow(2.0, 15.0) - 1。

# Byte 类型

Byte 类型比 Short 类型更短，一般只用来处理二进制数据流：

val maxByte: Byte = Byte.MAX_VALUE // 127
+val minByte: Byte = Byte.MIN_VALUE // -128
+

# 基本类型转换

Java 支持使用 long 类型或 float 类型变量接收一个 int 类型变量，且不报错，这是因为 Java 支持隐式转换，但这在 Kotlin 中是行不通的，Kotlin 不支持隐式转换，举个例子：

val anInt: Int = 5
+val aLong: Long = anInt // 报错：Type mismatch
+val aLong: Long = anInt.toLong() // 正常
+

# Char 类型

  • Char 称为字符，对应 Java 的 Character
  • Char 占两个字节，表示一个 16 位的 Unicode 字符
  • Char 需要用单引号 '' 引起来，例如：'0'，'a'，'\n'
val aChar: Char = '0' // 0
+val bChar: Char = '林' // 林
+val cChar: Char = '\t' // 看不见的制表符
+val dChar: Char = '\u9510' // 锐
+

Char 表示一个字符，其值的书写可以是字母、数字、Unicode、以及类似 \n 的特殊字符。

还有一些符号，在语法上有特殊作用的，想要输出它原本的样子，需要借助 \ 进行转义：

转义字符 含义
\t 制表符
\b 光标后退一个字符
\n 回车
\r 光标回到行首
\' 单引号
\" 双引号
\\ 反斜杠
\$ 美元符号，Kotlin 支持美元符号开头的字符串模板
val eChar: Char = '\'' // '
+val fChar: Char = '"' // "
+val gChar: Char = '\"' // "
+val hChar: Char = '\$' // $
+val iChar: Char = '\\' // \
+

# String 类型

String 字符串，即一连串的字符，字符 Char 使用 ''引起来，字符串 String 则使用 ""引起来：

val aString: String = "HelloWorld" // HelloWorld
+val anotherString: String = String(charArrayOf('H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd')) // HelloWorld
+println(aString == anotherString) // true
+println(aString === anotherString) // false
+println(aString.length) // 10
+

这里的 == 实际上就是 equals()，判断值是否相同；而 === 是全等运算符，除了判断值是否相等，还会判断地址是否也相同，只有值与地址都相等的情况下才会为 true。

字符串模板，可以在字符串中使用 $ 符号引入其他变量：

println("输出一个字符串：" + aString) // HelloWorld
+val arg1: Int = 0
+val arg2: Int = 1
+println("$arg1 + $arg2 = ${arg1 + arg2}") // 0 + 1 = 1
+

单个变量使用 $ 即可，表达式则需要使用 ${}

字符串除了可以用 ""　引起来，还可以使用 """""" (3 对引号)引起来，3 引号字符串比双引号字符串更强大，包括换行也会被识别，不需要借助 \n ，但同时这些转义字符也就无效了，可以理解为是最原始的字符串。

// 输出结果：
+//    \t \n
+//    |哈哈哈
+val rawString: String = """
+    \t \n
+    |哈哈哈
+    """
+val rawString1: String = """$aString  \$aString""" // HelloWorld  \HelloWorld
+val rawString2: String = """$ aString""" // $ aString
+

三引号字符串支持字符串模板，即支持使用 $ 引入变量，且无法使用 \ 对 $ 进行转义！

+ +
+
#Kotlin#Boolean#Number#Char#String
Kotlin - 类与构造器

Kotlin - 类与构造器→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c7c2c0/index.html b/pages/c7c2c0/index.html new file mode 100644 index 000000000..be380cf4e --- /dev/null +++ b/pages/c7c2c0/index.html @@ -0,0 +1,230 @@ + + + + + + Kotlin - 伴生对象与静态成员 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-28
目录

Kotlin - 伴生对象与静态成员

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# object 关键字

Kotlin 中有一种特殊的类，它本身也是一个实例（单例），这种既是类又是对象的类需要使用 object 关键字声明（普通类声明使用 class），它跟普通类一样，也可以实现接口和继承父类：

object MusicPlayer : Player(), OnStatusChangeListener {
+
+    var state: Int = 0
+
+    fun play(url: String) {
+        ...
+    }
+
+    fun stop() {
+        ...
+    }
+
+    override fun onMount(driver: Driver) {
+    }
+
+    override fun onUnmount(driver: Driver) {
+    }
+}
+

这种 object 类的方法可以通过类名直接调用：

fun main() {
+    MusicPlayer.play("http://qqmusic.com/123213.mp3")
+    MusicPlayer.stop()
+}
+

借助 Show Kotlin Bytecode 工具，将上述 Kotlin 代码反编译成 java 代码如下：

public final class MusicPlayer extends Player implements OnStatusChangeListener {
+   public static final MusicPlayer INSTANCE;
+
+   private MusicPlayer() {
+   }
+
+   static {
+      MusicPlayer var0 = new MusicPlayer();
+      INSTANCE = var0;
+   }
+   ...
+}
+

可以发现，Kotlin 中的 object 本质上就是 Java 中简单的单例模式，同时它的构造方法是 private 的，因此 object 类不能自定义构造方法！

# 伴生对象(companion object)

日常开发中，经常会编写一些 Bean 类，用于描述一类事物，Bean 中会包含事物的属性，有的 Bean 类还会提供一系列"工具方法"来帮助开发者快速创建 Bean 对象，就比如在 Java 中，Integer.valueOf() 就可以帮助开发者快速将字符串转成整型，进入源码一看，可以发现这是一个使用了 static 关键字修饰的静态方法：

public static Integer valueOf(String s) throws NumberFormatException {
+    return Integer.valueOf(parseInt(s, 10));
+}
+

可是，在 Kotlin 中是没有 static 关键字的！！！想要实现通过 类名.xxx() 的方式调用工具方法，可以使用上述的 object 类，但 object 本身就是一个对象，我们无法在外部调用其构造方法，既然想拥有 object 类(通过类名调用方法)与 class 类(外部可以调用构造方法)的两种特性，这时伴生对象 companion object 就完全可以满足这个需求：

class Rectangle(val width: Int, val height: Int) {
+    companion object {
+        fun ofSize(width: Int, height: Int): Rectangle {
+            return Rectangle(width, height)
+        }
+
+        fun ofRectangle(rectangle: Rectangle): Rectangle {
+            return Rectangle(rectangle.width, rectangle.height)
+        }
+    }
+}
+
+fun main() {
+    val width = 4
+    val height = 5
+    val rectangle1 = Rectangle(width, height) // 调用构造方法
+    val rectangle2 = Rectangle.ofRectangle(rectangle1) // 通过类名调用方法
+    val rectangle3 = Rectangle.ofSize(width, height) // 通过类名调用方法
+}
+

伴生对象顾名思义，就是与类一起诞生的对象，类一加载，它的伴生对象也就被创建了，每个类都可以对应一个伴生对象，并且该伴生对象的成员全局独一份，也就是说伴生对象 companion object 也是一种单例，再次借助 Show Kotlin Bytecode 工具，将上述 Kotlin 代码反编译成 java 代码如下：

public final class Rectangle {
+   ...
+   public static final Rectangle.Companion Companion = new Rectangle.Companion((DefaultConstructorMarker)null);
+
+   public static final class Companion {
+      @NotNull
+      public final Rectangle ofSize(int width, int height) {
+         return new Rectangle(width, height);
+      }
+
+      @NotNull
+      public final Rectangle ofRectangle(@NotNull Rectangle rectangle) {
+         Intrinsics.checkParameterIsNotNull(rectangle, "rectangle");
+         return new Rectangle(rectangle.getWidth(), rectangle.getHeight());
+      }
+
+      private Companion() {
+      }
+
+      // $FF: synthetic method
+      public Companion(DefaultConstructorMarker $constructor_marker) {
+         this();
+      }
+   }
+}
+

可以发现，Kotlin 中的 companion object 其实对应到 Java 中也就只是 Rectangle 的一个静态内部类实例而已。

# JVM 静态成员(@JvmStatic)

我们把上面 Kotlin 的 main 方法中的代码用 java 重写一遍：

int width = 4;
+int height = 5;
+Rectangle rectangle1 = new Rectangle(width,height);
+Rectangle rectangle2 = Rectangle.Companion.ofSize(width,height);
+Rectangle rectangle3 = Rectangle.Companion.ofRectangle(rectangle2);
+

发现 ofSize 和 ofRectangle 方法并不是通过 Rectangle 类直接调用的，结合上述反编译后的 java 代码，应该不难理解，因为 Kotlin 中 Rectangle 的伴生对象本质上就是这个 Rectangle.Companion 实例，ofSize 和 ofRectangle 都是 Rectangle.Companion 的方法，所以，用 Rectangle.Companion 对象调用它自己的方法这完全没有毛病，可是，难道就不能在 Java 中也像 Kotlin 那样，直接通过 类名.xxx() 的方法来调用伴生对象方法吗？答案肯定是有的啦，Kotlin 提供了 @JvmStatic 和 @JvmField，可以让伴生对象中的方法和属性在 java 中通过类名直接调用：

class Rectangle(val width: Int, val height: Int) {
+    companion object {
+        @JvmStatic
+        fun ofSize(width: Int, height: Int): Rectangle {
+            return Rectangle(width, height)
+        }
+
+        @JvmStatic
+        fun ofRectangle(rectangle: Rectangle): Rectangle {
+            return Rectangle(rectangle.width, rectangle.height)
+        }
+
+        @JvmField
+        val Tag = "Rectangle"
+    }
+}
+

这次 java 代码也可以使用 Rectangle 类名来调用 ofSize 和 ofRectangle 方法了：

int width = 4;
+int height = 5;
+Rectangle rectangle1 = new Rectangle(width, height);
+Rectangle rectangle2 = Rectangle.ofSize(width, height);
+Rectangle rectangle3 = Rectangle.ofRectangle(rectangle2);
+System.out.println(Rectangle.Tag);
+

再来反编译一次，看其究竟是什么原理，原来就只是在 Rectangle 中增加了对应的 static 属性和方法而已：

public final class Rectangle {
+   public static final Rectangle.Companion Companion = new Rectangle.Companion((DefaultConstructorMarker)null);
+
+   @JvmField
+   @NotNull
+   public static final String Tag = "Rectangle";
+
+   @JvmStatic
+   @NotNull
+   public static final Rectangle ofSize(int width, int height) {
+      return Companion.ofSize(width, height);
+   }
+
+   @JvmStatic
+   @NotNull
+   public static final Rectangle ofRectangle(@NotNull Rectangle rectangle) {
+      return Companion.ofRectangle(rectangle);
+   }
+
+   public static final class Companion {
+      @JvmStatic
+      @NotNull
+      public final Rectangle ofSize(int width, int height) {
+          ...
+      }
+
+      @JvmStatic
+      @NotNull
+      public final Rectangle ofRectangle(@NotNull Rectangle rectangle) {
+          ...
+      }
+   }
+}
+
+ +
+
#object#companion object#JvmStatic
Kotlin - 类及成员的可见性
Kotlin - 方法重载与默认参数

+ ← + Kotlin - 方法重载与默认参数→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/c7d38a/index.html b/pages/c7d38a/index.html new file mode 100644 index 000000000..71bd57284 --- /dev/null +++ b/pages/c7d38a/index.html @@ -0,0 +1,314 @@ + + + + + + MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-06-13
目录

MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

本文要介绍的AppBarLayout与CollapsingToolbarLayout均是随MaterialDesign出现的新控件，两者的作用呢，可以说就是为了“增强”Toolbar的吧，它们的出现使得Toolbar不再只是那个木讷的"ActionBar"，而是一个真正有灵性，有活力的APP工具条。下面就来看看它们是怎么使用的吧。

# 二、使用

# 1、CoordinatorLayout

在使用AppBarLayout与CollapsingToolbarLayout之前，先来说说这个CoordinatorLayout。CoordinatorLayout直译为“协调布局”，顾名思义，它就是用来协调子布局及控件的，要使用它，则必须把它设置为整个布局的根，同时，通过对“特殊子控件”设置app:appbar_scrolling_view_behavior属性的值，进而来协调子控件在整个布局中的显示位置。本文不对其进行深入讲解，我们这里只需知道，要使用AppbarLayout来“增强”Toolbar，就需要用到CoordinatorLayout即可。CoordinatorLayout的使用示例代码：

<?xml version="1.0" encoding="utf-8"?>
+<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="256dp">
+        ...
+    </android.support.design.widget.AppBarLayout>
+
+    <android.support.v4.widget.NestedScrollView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:layout_behavior="@string/appbar_scrolling_view_behavior">
+
+        <WebView
+            android:id="@+id/webview"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"/>
+
+    </android.support.v4.widget.NestedScrollView>
+
+
+</android.support.design.widget.CoordinatorLayout>
+

从上面的代码中，可以知道，这里只对NestedScrollView控件设置了app:appbar_scrolling_view_behavior属性，没错，NestedScrollView是上面说到的“特殊子控件”，像这样的“特殊子控件”有3个，分别是RecyclerView、ViewPager、NestedScrollView，它们的使用基本是一样的，app:appbar_scrolling_view_behavior属性也只对这3个“特殊子控件”有效。对于这个NestedScrollView，你可以认为，它就是ScrollView的增强版而已。好了，下面就开始介绍本文的主角。

# 2、AppBarLayout

下面是官方文档中对AppBarLayout的描述：

AppBarLayout是一个垂直的LinearLayout，实现了Material Design中app bar的scrolling gestures特性。AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。 +AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作， +为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

结合上面CoordinatorLayout部分中贴出的代码，这段描述的后半段是不难理解的，而比较难理解的应该是layout_scrollFlags属性，描述中的scrolling view就是上面所说的“特殊子控件”。要牢记，描述中说的是对AppbarLayout的直接子控件设置layout_scrollFlags属性，下面来看看都有哪些ayout_scrollFlags属性：

scrollFlags的属性值 作用
scroll 让AppBarLayout与scrolling view合为一体，当scrolling view滚动时，AppBarLayout也跟着一起滚动。这是“增强”Toolbar的一个必需取值，可以跟其他值一起使用，从而实现不同的“增强”效果。单独使用scroll的话，其效果就类似给ListView加了一个HeaderView。
<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            app:title="CSDN_LQR"
+            app:layout_scrollFlags="scroll"
+            app:titleTextColor="@android:color/white"/>
+
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

scroll

scrollFlags的属性值 作用
scroll | enterAlways 当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，一旦scrolling view向下滚动，AppBarLayout也跟着一起滚入屏幕。
<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            app:layout_scrollFlags="scroll|enterAlways"
+            app:title="CSDN_LQR"
+            app:titleTextColor="@android:color/white"/>
+
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

enterAlways

scrollFlags的属性值 作用
scroll | enterAlways | enterAlwaysCollapsed 当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，一旦scrolling view向下滚动，AppBarLayout便先慢慢滚动到折叠高度（即最小高度），直到scrolling view向下滚动到最顶部时，AppBarLayout再先慢慢滚动到原来的高度（此时scrolling view也会再次和AppBarLayout一起滚动）。
<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:minHeight="?attr/actionBarSize">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="150dp"
+            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
+            app:title="CSDN_LQR"
+            app:titleTextColor="@android:color/white"/>
+
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

enterAlwaysCollapsed

scrollFlags的属性值 作用
scroll | exitUntilCollapsed 当scrolling view向上滚动时，AppBarLayout也跟着一起滚出屏幕，直到达到了折叠高度（即最小高度），此时AppBarLayout不再滚动，也就是不完全滚出屏幕，而当scrolling view向下滚动到最顶部时，AppBarLayout才会再随scrolling view一起滚动，直到原来的高度。
<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="150dp"
+            android:minHeight="?attr/actionBarSize"
+            app:layout_scrollFlags="scroll|exitUntilCollapsed"
+            app:title="CSDN_LQR"
+            app:titleTextColor="@android:color/white"/>
+
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

exitUntilCollapsed

scrollFlags的属性值 作用
scroll | snap snap有仓促的意思，效果同它的意思一样，当scrolling view处于无法再向下滚动的状态时（即已经到顶部了），此时向上滚动scrolling view，AppBarLayout将一次全部滚出屏幕，或向下滚动scrolling view，AppBarLayout将一次全部滚入屏幕。有一种引力的感觉。
<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <android.support.v7.widget.Toolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="150dp"
+            android:minHeight="?attr/actionBarSize"
+            app:layout_scrollFlags="scroll|snap"
+            app:title="CSDN_LQR"
+            app:titleTextColor="@android:color/white"/>
+
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

snap

好啦，AppBarLayout对Toolbar的“增强”就差不多这样了，不过要纠正一点，其实AppBarLayout并不只是对Toolbar"增强"，对于其他控件也是一样的，只是AppBarLayout与Toolbar的搭配比较常见而已。下面接着来看看CollapsingToolbarLayout具体可以对Toolbar做到怎样的“增强”。

# 3、CollapsingToolbarLayout

CollapsingToolbarLayout对Toolbar的“增强”就是把Toolbar变成可折叠的，使其具有更多的交互花样（其实也就是更多的交互动画），我们先来看看可以实现的效果：

CollapsingToolbarLayout

要实现上图的效果，需要跟AppBarLayout一起使用，CollapsingToolbarLayout的使用很简单，直接包裹Toolbar即可，其中可以增加一个ImageView控件来作为CollapsingToolbarLayout的“背景”，其实CollapsingToolbarLayout本身是一个FrameLayout，所以其子控件的摆放就是从左上角开始，一个个叠加起来。不过，其中的Toolbar默认一开始是隐藏的。

<?xml version="1.0" encoding="utf-8"?>
+<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:layout_width="match_parent"
+        android:layout_height="256dp">
+
+        <android.support.design.widget.CollapsingToolbarLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_scrollFlags="scroll|exitUntilCollapsed">
+
+            <ImageView
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:scaleType="centerCrop"
+                android:src="@mipmap/palette"/>
+
+            <android.support.v7.widget.Toolbar
+                android:id="@+id/toolbar"
+                android:layout_width="match_parent"
+                android:layout_height="?attr/actionBarSize"
+                app:title="CSDN_LQR"
+                app:titleTextColor="@android:color/white"/>
+        </android.support.design.widget.CollapsingToolbarLayout>
+    </android.support.design.widget.AppBarLayout>
+    ...
+</android.support.design.widget.CoordinatorLayout>
+

这代码中有个细节需要注意一下，你可以发现，代码中不再对Toolbar设置app:layout_scrollFlags属性，而是给CollapsingToolbarLayout控件设置了。这不奇怪，因为上面已经说了，app:layout_scrollFlags属性是对AppBarLayout的直接子控件设置的。先来看看效果怎样：

这是默认的效果，可以看到滚动过程中，ImageView和大标题一起向上或向下滚动，其实这个过程中，只有当CollapsingToolbarLayout折叠时，Toolbar才会显示出来，大标题执行了缩放、位置和透明等动画，而Toolbar执行透明动画，两标题重合或分离，看起来好像就只有一个标题一样。此外，上面的布局代码中是有给Toolbar设置样式的，但并没有起作用。CollapsingToolbarLayout提供了文字样式属性，可以分别对大标题（展开标题）与小标题（折叠标题）的文字样式进行设置。

style.xml中文字样式代码如下：

<!--CollapsingToolbarLayout展开时标题文字样式-->
+<style name="ExpandedTitleTextAppearance" parent="TextAppearance.AppCompat.Title">
+    <item name="android:textSize">30sp</item>
+    <item name="android:textColor">#fff</item>
+</style>
+<!--CollapsingToolbarLayout折叠时标题文字样式-->
+<style name="CollapsedTitleTextAppearance" parent="TextAppearance.AppCompat.Title">
+    <item name="android:textSize">15sp</item>
+    <item name="android:textColor">#000</item>
+</style>
+

对CollapsingToolbarLayout分别设置展开标题样式与折叠标题样式

<android.support.design.widget.CollapsingToolbarLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:layout_scrollFlags="scroll|exitUntilCollapsed"
+    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
+    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
+    >
+    ...
+</android.support.design.widget.CollapsingToolbarLayout>
+

效果：

这样还不够，如果想在CollapsingToolbarLayout折叠时，背景变为纯色、状态栏也一起变色的话，可以通过如下代码设置：

<android.support.design.widget.CollapsingToolbarLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:layout_scrollFlags="scroll|exitUntilCollapsed"
+    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
+    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
+    app:contentScrim="?attr/colorPrimary"
+    app:statusBarScrim="?attr/colorPrimaryDark"
+    >
+    ...
+</android.support.design.widget.CollapsingToolbarLayout>
+

其中contentScrim设置的是折叠时，CollapsingToolbarLayout的背景色。statusBarScrim设置的是折叠时，状态栏的颜色，可以达到沉浸式的效果，不过这个属性需要Android 5.0以上才能支持，而且，有的国产机对状态栏做了限制，没办法生效，比如锤子的系统，状态栏一起是半透明色，且该属性无法生效，所以，这个效果需视手机及系统版本而定。来看下效果如何：

呀，马马虎虎，不过还差点，需要给图片“背景”设置视差效果，还有大标题文字底部居中显示。给图片“背景”设置视差效果可以通过设置app:layout_collapseMode属性来完成，这个属性只要是CollapsingToolbarLayout的子控件就有，有三种取值，分别是：none、pin、parallax。其中parallax的效果是在CollapsingToolbarLayout折叠时，此布局（或控件）会有视差折叠效果；pin的效果是在CollapsingToolbarLayout折叠后，此布局（或控件）将固定在顶部。none是默认值，即没有效果，实话说，我感觉pin跟none没什么区别（如果觉得我说的不对，请不吝赐教）。至于标题的位置，可以通过app:collapsedTitleGravity和app:collapsedTitleGravity来配置，用法跟layout_gravity一样，就不说了，贴下代码，随便看下效果。

<android.support.design.widget.CollapsingToolbarLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
+    app:contentScrim="?attr/colorPrimary"
+    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
+    app:layout_scrollFlags="scroll|exitUntilCollapsed"
+    app:statusBarScrim="?attr/colorPrimaryDark"
+    app:collapsedTitleGravity="start"
+    app:expandedTitleGravity="center_horizontal|bottom" >
+
+    <ImageView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="centerCrop"
+        android:src="@mipmap/palette"
+        app:layout_collapseMode="parallax"/>
+
+    <android.support.v7.widget.Toolbar
+        android:id="@+id/toolbar"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        app:title="CSDN_LQR"
+        app:titleTextColor="@android:color/white"
+        app:layout_collapseMode="pin"/>
+</android.support.design.widget.CollapsingToolbarLayout>
+

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#AppBarLayout#CollapsingToolbarLayout
MaterialDesign之学一波Palette
MaterialDesign之对TabLayout的探索

+ ← + MaterialDesign之对TabLayout的探索→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/cb27eb/index.html b/pages/cb27eb/index.html new file mode 100644 index 000000000..fa5502458 --- /dev/null +++ b/pages/cb27eb/index.html @@ -0,0 +1,132 @@ + + + + + + iOS - Swift 仿微信小红点(无数字) | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-01-17
目录

iOS - Swift 仿微信小红点(无数字)

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

OC版原文链接：关于如何在每个UITabBarItem上添加提示小红点 (opens new window)

  • 以分类的方式实现

# 代码

UITabBar+Extenstion.swift

fileprivate let lxfFlag: Int = 666
+
+extension UITabBar {
+    // MARK:- 显示小红点
+    func showBadgOn(index itemIndex: Int, tabbarItemNums: CGFloat = 4.0) {
+        // 移除之前的小红点
+        self.removeBadgeOn(index: itemIndex)
+        
+        // 创建小红点
+        let bageView = UIView()
+        bageView.tag = itemIndex + lxfFlag
+        bageView.layer.cornerRadius = 5
+        bageView.backgroundColor = UIColor.red
+        let tabFrame = self.frame
+        
+        // 确定小红点的位置
+        let percentX: CGFloat = (CGFloat(itemIndex) + 0.59) / tabbarItemNums
+        let x: CGFloat = CGFloat(ceilf(Float(percentX * tabFrame.size.width)))
+        let y: CGFloat = CGFloat(ceilf(Float(0.115 * tabFrame.size.height)))
+        bageView.frame = CGRect(x: x, y: y, width: 10, height: 10)
+        self.addSubview(bageView)
+    }
+    
+    // MARK:- 隐藏小红点
+    func hideBadg(on itemIndex: Int) {
+        // 移除小红点
+        self.removeBadgeOn(index: itemIndex)
+    }
+    
+    // MARK:- 移除小红点
+    fileprivate func removeBadgeOn(index itemIndex: Int) {
+        // 按照tag值进行移除
+        _ = subviews.map {
+            if $0.tag == itemIndex + lxfFlag {
+                $0.removeFromSuperview()
+            }
+        }
+    }
+}
+

# 使用

// 默认4个tabbarItem
+self.tabBarController?.tabBar.showBadgOn(index: 2)
+// 如果不是则用这个方法
+// self.tabBarController?.tabBar.showBadgOn(index: Int, tabbarItemNums: CGFloat)
+

# 效果

小红点

附上相关项目：Swift 3.0 高仿微信 (opens new window)

+ +
+
#iOS#Swift
RePluginX - 兼容AndroidX并加入新特性开发纪要
iOS - 实现UINavigation全屏滑动返回(一)

+ ← + iOS - 实现UINavigation全屏滑动返回(一)→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/cc54c3/index.html b/pages/cc54c3/index.html new file mode 100644 index 000000000..e8592299e --- /dev/null +++ b/pages/cc54c3/index.html @@ -0,0 +1,90 @@ + + + + + + iOS - 解决Transporter一直卡正在验证的问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-03-12
目录

iOS - 解决Transporter一直卡正在验证的问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

苹果的上传应用工具 Transporter 虽然挺好用，但是估计也不少人跟我一样遇到过这样的问题，就是一直卡在 正在验证，不采取点措施估计能一直卡下去~

正在验证APP

其实原因很简单，就是 /User/当前登录用户/Library/Caches/com.apple.amp.itmstransporter 这个目录里的文件不全，一直处于下载更新的状态。

# 解决方案

# 方案一

科学上网前提下，在终端下执行 Transporter 包内的 iTMSTransporter，

/Applications/Transporter.app/Contents/itms/bin/iTMSTransporter
+

因为国外服务器（contentdelivery.itunes.apple.com:443）对我们来说会很慢，所以这个过程最好弄下科学环境。

直到出现这个命令说明界面就可以了

# 方案二

适用人群

  • 没有科学环境
  • 速度要求高的
  • 比较懒的

可以使用 transporter_fix

GitHub地址：https://github.com/LinXunFeng/transporter_fix (opens new window)

执行文件下载地址：点我下载 (opens new window)，下载后双击运行即可。

比较懒的朋友看到这就可以了，要求速度快的就继续往下看

重点

  • transporter_fix 默认是从 github 上下载 com.apple.amp.itmstransporter.zip 到同目录级别的 files 目录下。
  • 如果 files 目录下已存在 com.apple.amp.itmstransporter.zip ，则不会重新下载。

所以，如果当前正常网络对 github 不给力，可以到这里 (opens new window)，找个离当前日期最近的压缩包，下载下来后改名为 com.apple.amp.itmstransporter.zip，存放 files 目录下即可

+ +
+
#iOS
iOS - Swift UITableView的scrollToRow的坑
iOS - 解决SecurityEnvSDK与SGMain的冲突问题

+ ← + iOS - 解决SecurityEnvSDK与SGMain的冲突问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ccf9c0/index.html b/pages/ccf9c0/index.html new file mode 100644 index 000000000..35fc1ad7c --- /dev/null +++ b/pages/ccf9c0/index.html @@ -0,0 +1,107 @@ + + + + + + 热修复与插件化基础 - dex与class | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2018-05-13
目录

热修复与插件化基础 - dex与class

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、dex/class 浅析

# 1、class 与 dex 对比

类型 class 文件 dex 文件
定义 能够被 jvm 识别、加载并执行的文件格式 能够被 dvm 识别、加载并执行的文件格式
如何生成 使用 java 命令（javac） 使用 java 命令、dx 命令
作用 记录一个类文件的所有信息 记录整个工程中所有类文件的信息

# 2、生成 class 与 dex 文件的指令

生成并运行 class 文件对于我们而言实在太熟悉了，这里只演示 dex 文件的生成与运行。

以 Hello World 为例：

public class Hello {
+    public static void main(String[] args){
+        System.out.println("Hello LQR!");
+    }
+}
+

# 1）生成 dex 文件

生成 dex 文件需要用到 dx 指令，与 java 指令一样，也是对应一个对应的程序来执行的，最好配置到环境变量中，具体可看文章末尾。

生成 dex 文件之前需要先生成 class 文件，所需指令如下：

javac -target 1.6 -source 1.6 Hello.java
+dx --dex -- output Hello.dex Hello.class
+

# 2）运行 dex 文件

class 文件的运行需要依赖 jvm，同理，dex 文件的运行需要依赖 dvm，所以 dex 文件需要在 Android 上才能运行。所需指令如下：

adb push Hello.dex /storage/emulated/0
+adb shell
+dalvikvm -cp /sdcard/Hello.dex Hello
+

使用 adb 将 dex 文件放送到 Android 手机的 SD 卡目录之后，再使用 adb 进入 shell，运行 dvm 指令即可。

# 二、class 文件结构深入

# 1、class 文件结构：

  • 一种 8 位字节的二进制流文件
  • 各个数据按顺序紧密的排列，无间隙
  • 每个类或接口都单独占据一个 class 文件

# 2、class 文件结构的详解：

一个 class 文件，包含下面表格的所有字段，

类型 名称 数量 说明
u4 magic 1 魔数，0xCAFEBAB
u2 minor_version 1 次版本号
u2 major_version 1 主版本号
u2 constant_pool_count 1 常量池中常量个数
cp_info constant_pool constant_pool_count-1 表类型数据集合，即常量池中每一项常量都是一个表，共有 11 种结构各不相同的表结构数据
u2 access_flags 1 访问标志，用于识别类或接口层次的访问信息
u2 this_class 1 类索引，用于确定这个类的全限定名
u2 super_class 1 父类索引，用于确定这个类父类的全限定名
u2 interfaces_count 1 接口索引计数器
u2 interfaces interfaces_count 接口索引集合，用来描述这个类实现了哪些接口
u2 fields_count 1 字段表计数器，即字段表集合中的字段表数据个数
field_info fields fields_count 字段表集合，用于描述接口或类中声明的变量，包括类级别（static）和实例级别变量，不包括在方法内部声明的变量
u2 methods_count 1 方法表计数器，即方法表集合中的方法表数据个数
method_info methods methods_count 方法表集合，方法表结构和字段表结构一样
u2 attributes_count 1 属性订数器
attribute_info attributes attributes_count 在 Class 文件、属性表、方法表中都可以包含自己的属性表集合，用于描述某些场景的专有信息

1，无符号数，以 u1、u2、u4、u8 分别代表 1 个字节、2 个字节、4 个字节、8 个字节的无符号数 +2，表，以“_info”结尾，由多个无符号数或其它表构成的复合数据类型

源自：JVM 笔记 5：Class 文件结构 (opens new window)

# 3、class 文件弊端：

由 class 文件结构（第 3 点）所导致

  • 内存占用大，不适合移动端
  • 堆栈的加载模式，加载速度慢
  • 文件 IO 操作多，类查找慢

基于以上几个 class 文件的特点，又因为移动端运存较小（以当年的移动端手机为标准），class 并不适合直接在移动端设备上运行。

# 二、dex 文件结构深入

# 1、dex 文件结构：

  • 一种 8 位字节的二进制流文件
  • 各个数据按顺序紧密的排列，无间隙
  • 整个应用中所有 java 源文件都放在一个 dex 中

# 2、dex 文件结构的详解：

dex 文件与 class 文件的结构有很大的不同，如下图所示：

对应的字段说明如下表所示：

数据名称 解释
header dex 文件头部，记录整个 dex 文件的相关属性
string_ids 字符串数据索引，记录了每个字符串在数据区的偏移量
type_ids 类似数据索引，记录了每个类型的字符串索引
proto_ids 原型数据索引，记录了方法声明的字符串，返回类型字符串，参数列表
field_ids 字段数据索引，记录了所属类，类型以及方法名
method_ids 类方法索引，记录方法所属类名，方法声明以及方法名等信息
class_defs 类定义数据索引，记录指定类各类信息，包括接口，超类，类数据偏移量
data 数据区，保存了各个类的真实数据
link_data 连接数据区

# 3、dex 头文件

下面是 dex 头文件中字段详解，与 class 文件的结构有部分相同的地方，但因为一个 dex 文件中包含 n 个 class 文件，在头文件中需要对所有 class 进行标记及记录相关信息，故会多出一些不同的字段。

字段名称 偏移值 长度 说明
magic 0x0 8 魔数字段，值为"dex\n035\0"
checksum 0x8 4 校验码
signature 0xc 20 sha-1 签名
file_size 0x20 4 dex 文件总长度
header_size 0x24 4 文件头长度，009 版本=0x5c,035 版本=0x70
endian_tag 0x28 4 标示字节顺序的常量
link_size 0x2c 4 链接段的大小，如果为 0 就是静态链接
link_off 0x30 4 链接段的开始位置
map_off 0x34 4 map 数据基址
string_ids_size 0x38 4 字符串列表中字符串个数
string_ids_off 0x3c 4 字符串列表基址
type_ids_size 0x40 4 类列表里的类型个数
type_ids_off 0x44 4 类列表基址
proto_ids_size 0x48 4 原型列表里面的原型个数
proto_ids_off 0x4c 4 原型列表基址
field_ids_size 0x50 4 字段个数
field_ids_off 0x54 4 字段列表基址
method_ids_size 0x58 4 方法个数
method_ids_off 0x5c 4 方法列表基址
class_defs_size 0x60 4 类定义标中类的个数
class_defs_off 0x64 4 类定义列表基址
data_size 0x68 4 数据段的大小，必须 4k 对齐
data_off 0x6c 4 数据段基址

源自：Dex 文件格式详解 (opens new window)

对于 class 文件及 dex 文件的结构 都可以使用 “010 editor” 这个神器进行查看验证，网上也有相关的文章说明，有兴趣的道友可自行百度 或 访问如下 2 篇文章进行查阅了解，这里便不再啰嗦：

# 4、dex 文件的优势

dex 文件的头文件与索引区部分，保存了所有类及类中数据的索引，因此，dvm 可通过这两部分快速查找到对应类及数据，相对于直接运行 class 文件而言，效率上提升了不少。

# 三、dex 与 class 两者的异同

经过上面对 class 文件与 dex 文件的结构进行大概的了解之后，我们可以得出如下几个结论：

  • 本质上都是一样的，dex 是从 class 文件演变而来的。
  • class 文件存在许多冗余信息，dex 文件会去除冗余，并整合。

# 四、其他

# 1、配置 Android 及 dx 环境变量

以 mac 为例，windows 请百度。

  1. 到用户目录下：
cd ~
+
  1. 打开.bash_profile 文件
open -e .bash_profile
+

如果当前用户目录下没有.bash_profile，可以使用 touch .bash_profile 自行创建

export ANDROID_HOME=/Users/lqr/Library/Android/sdk
+export PATH=${PATH}:${ANDROID_HOME}/tools
+export PATH=${PATH}:${ANDROID_HOME}/platform-tools
+export PATH=${PATH}:${ANDROID_HOME}/build-tools/27.0.3
+

ANDROID_HOME 与 build-tools 的值需要根据电脑的情况修改。

  1. 配置生效
source .bash_profile
+
  1. 测试

在终端输入 adb 或 dx 命令看是否有命令反应即可。

+ +
+
#热修复#虚拟机#dex#class
Android音视频 - MediaCodec编码mp4踩坑记录
热修复与插件化基础 - Java与Android虚拟机

+ ← + 热修复与插件化基础 - Java与Android虚拟机→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/cd4aeb/index.html b/pages/cd4aeb/index.html new file mode 100644 index 000000000..6bdc094e7 --- /dev/null +++ b/pages/cd4aeb/index.html @@ -0,0 +1,570 @@ + + + + + + RePlugin集成ARouter | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-04-12
目录

RePlugin集成ARouter

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、功能需求

# 1、组件解耦 (ARouter)

阿里开源的 ARouter (opens new window) 在组件化开发中这个库相当有用，其核心功能就是组件解耦，比如以往要跳转另一个 Activity 时，会使用如下代码：

val intent = Intent(this, OtherActivity::class.java)
+startActivity(intent)
+

这样的代码意味着耦合性极强，当前的 Activity 代码层面上直接引用了 OtherActivity，当项目中应用了模块化开发（Module 之间不直接依赖）或多渠道变体（不同渠道指定不同的 src 目录）时，将会导致 OtherActivity 无法引用，这时工程就会报错了，而使用 ARouter 时，上述代码可以转变成如下代码：

ARouter.getInstance().build("/module2/other").navigation()
+
+@Route(path = "/module2/other")
+class OtherActivity : BaseActivity() {
+    ...
+}
+

很显示，使用了 ARouter 之后，Activity 之间不再存在代码级引用，这就是组件解耦。ARouter 还支持 Fragment，更多使用方式请查看官方文档: https://github.com/alibaba/ARouter/blob/master/README_CN.md (opens new window)

# 2、插件化 (RePlugin)

项目的架构设计涉及到插件化，我们使用的是 RePlugin (opens new window)，当然，每个公司对 RePlugin 的使用方式可能是不一样的，大致分为以下两种：

  • 方式一： 宿主是主 app，包含主要的业务功能，只一些小功能需要通过插件方式动态更新。
  • 方式二： 宿主是马甲包，插件才是主 app，宿主 apk 只管一件事：更新主 app 插件。

这里，我们基于方式二来使用 RePlugin，因为方式二中主 app 是插件，涉及大量业务逻辑，并且工程会用到多渠道变体（不同渠道指定不同的 src 目录），所以，我们需要在插件中使用 ARouter，而宿主的功能很简单，用不到 ARouter。

>>>>>>>>>>>>>>>>>>>注意：以下所有的分析都以此为基础<<<<<<<<<<<<<<<<<<<<

# 二、问题与解决方案

按照 ARouter 的官方文档，在插件工程中对 ARouter 进行了依赖，作为单品时，所有功能都正常使用，但作为插件时，就完全失效了~ 界面提示：There's no route matched! Path = [/arouter/service/interceptor] Group = [arouter]

# 1、ARouter 初始化失败

在 ARouter 的 issue 中也有很多 issue 提到与插件化框架搭配时出了问题，官方的回应表示对 RePlugin 等插件化框架支持不好，相关 issue 有：

以下是 app 分别作为单品或插件时 ARouter 的日志输出：

// >>>>>>>>>>>>>>>>>>> 单品日志输出
+I/ARouter::: ARouter openLog[ ]
+I/ARouter::: ARouter openDebug[ ]
+I/ARouter::: ARouter init start.[ ]
+I/ARouter::: Run with debug mode or new install, rebuild router map.[ ]
+I/ARouter::: VM with name 'Android' has multidex support
+E/ARouter::: InstantRun support error, com.android.tools.fd.runtime.Paths
+I/ARouter::: Thread production, name is [ARouter task pool No.1, thread No.1][ ]
+D/ARouter::: Filter 6 classes by packageName <com.alibaba.android.arouter.routes>
+I/ARouter::: Find router map finished, map size = 6, cost 43 ms.[ ]
+I/ARouter::: Load root element finished, cost 4 ms.[ ]
+D/ARouter::: LogisticsCenter has already been loaded, GroupIndex[2], InterceptorIndex[0], ProviderIndex[2][ ]
+I/ARouter::: ARouter init success![ ]
+D/ARouter::: The group [arouter] starts loading, trigger by [/arouter/service/interceptor][ ]
+D/ARouter::: The group [arouter] has already been loaded, trigger by [/arouter/service/interceptor][ ]
+I/ARouter::: Thread production, name is [ARouter task pool No.1, thread No.2][ ]
+I/ARouter::: ARouter init over.[ ]
+
+// >>>>>>>>>>>>>>>>>>> 插件日志输出
+I/ARouter::: ARouter openLog[ ]
+I/ARouter::: ARouter openDebug[ ]
+I/ARouter::: ARouter init start.[ ]
+I/ARouter::: Run with debug mode or new install, rebuild router map.[ ]
+I/ARouter::: VM with name 'Android' has multidex support
+E/ARouter::: InstantRun support error, com.android.tools.fd.runtime.Paths
+I/ARouter::: Thread production, name is [ARouter task pool No.1, thread No.1][ ]
+D/ARouter::: Filter 0 classes by packageName <com.alibaba.android.arouter.routes>
+I/ARouter::: Find router map finished, map size = 0, cost 14 ms.[ ]
+I/ARouter::: Load root element finished, cost 0 ms.[ ]
+E/ARouter::: No mapping files were found, check your configuration please![ ]
+D/ARouter::: LogisticsCenter has already been loaded, GroupIndex[0], InterceptorIndex[0], ProviderIndex[0][ ]
+I/ARouter::: ARouter init success![ ]
+W/ARouter::: ARouter::There is no route match the path [/arouter/service/interceptor], in group [arouter][ ]
+I/ARouter::: ARouter init over.[ ]
+

大致分析一下日志发现，当作为插件时，路由映射配置为 0（Find router map finished, map size = 0），为了找到 ARouter 初始化失败的原因，简单的跟踪了一下源码：

ARouter 初始化失败，那么一般要从初始化入口开始查起，即 ARouter.init(application)

public final class ARouter {
+    public static void init(Application application) {
+        if (!hasInit) {
+            hasInit = _ARouter.init(application);
+            ...
+        }
+    }
+}
+final class _ARouter {
+    protected static synchronized boolean init(Application application) {
+        LogisticsCenter.init(mContext, executor);
+        ...
+        return true;
+    }
+}
+

可以看到 ARouter#init() 最终会执行 LogisticsCenter.init(mContext, executor)，下面来看 LogisticsCenter.init(mContext, executor) 的源码：

public class LogisticsCenter {
+    /**
+     * LogisticsCenter init, load all metas in memory. Demand initialization
+     */
+    public synchronized static void init(Context context, ThreadPoolExecutor tpe) throws HandlerException {
+
+        // Step1. 获取到 app 所有的 class
+        Set<String> routerMap;
+        // It will rebuild router map every times when debuggable.
+        if (ARouter.debuggable() || PackageUtils.isNewVersion(context)) {
+            logger.info(TAG, "Run with debug mode or new install, rebuild router map.");
+            // These class was generated by arouter-compiler.
+            routerMap = ClassUtils.getFileNameByPackageName(mContext, ROUTE_ROOT_PAKCAGE);
+            if (!routerMap.isEmpty()) {
+                context.getSharedPreferences(AROUTER_SP_CACHE_KEY, Context.MODE_PRIVATE).edit().putStringSet(AROUTER_SP_KEY_MAP, routerMap).apply();
+            }
+
+            PackageUtils.updateVersion(context);    // Save new version name when router map update finishes.
+        } else {
+            logger.info(TAG, "Load router map from cache.");
+            routerMap = new HashSet<>(context.getSharedPreferences(AROUTER_SP_CACHE_KEY, Context.MODE_PRIVATE).getStringSet(AROUTER_SP_KEY_MAP, new HashSet<String>()));
+        }
+
+        logger.info(TAG, "Find router map finished, map size = " + routerMap.size() + ", cost " + (System.currentTimeMillis() - startInit) + " ms.");
+
+        // Step2. 加载 路由配置、拦截器 相关类
+        for (String className : routerMap) {
+            if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_ROOT)) {
+                // This one of root elements, load root.
+                ((IRouteRoot) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.groupsIndex);
+            } else if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_INTERCEPTORS)) {
+                // Load interceptorMeta
+                ((IInterceptorGroup) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.interceptorsIndex);
+            } else if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_PROVIDERS)) {
+                // Load providerIndex
+                ((IProviderGroup) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.providersIndex);
+            }
+        }
+        ...
+    }
+}
+

这段代码的核心是最后的 for 循环，大致意思就是通过判断类名规则，过滤出 ARouter 相关的特定类，比如 路由分组信息 相关类、拦截器 相关类，并分别加载进 Warehouse.groupsIndex 和 Warehouse.interceptorsIndex，不过它不是出问题的关键。

补充：ARouter 的工程源码中有 arouter-annotation 和 arouter-compiler 这 2 个额外的 Module，这是使用 ARouter 能够进行 依赖注入、组件解耦 的技术核心： 编译时注解 + JavaPoet。就组件解耦而言，ARouter 通过编译时注解技术，可以在工程编译期间，获取到使用了 @Route 注解的类，结合 JavaPoet 生成特定的 class 文件，用来描述 path 与组件之间的对应关系（以及各个参数）。

根据输出日志信息，可以知道 routerMap 中的元素个数为 0，而 routerMap 是通过 ClassUtils.getFileNameByPackageName(mContext, ROUTE_ROOT_PAKCAGE) 得到的，再来看 ClassUtils 源码：

public class ClassUtils {
+    /**
+     * 通过指定包名，扫描包下面包含的所有的ClassName
+     *
+     * @param context     U know
+     * @param packageName 包名
+     * @return 所有class的集合
+     */
+    public static Set<String> getFileNameByPackageName(Context context, final String packageName) throws PackageManager.NameNotFoundException, IOException, InterruptedException {
+        final Set<String> classNames = new HashSet<>();
+
+        List<String> paths = getSourcePaths(context);
+        final CountDownLatch parserCtl = new CountDownLatch(paths.size());
+
+        for (final String path : paths) {
+            DefaultPoolExecutor.getInstance().execute(new Runnable() {
+                @Override
+                public void run() {
+                    DexFile dexfile = null;
+
+                    try {
+                        if (path.endsWith(EXTRACTED_SUFFIX)) {
+                            //NOT use new DexFile(path), because it will throw "permission error in /data/dalvik-cache"
+                            dexfile = DexFile.loadDex(path, path + ".tmp", 0);
+                        } else {
+                            dexfile = new DexFile(path);
+                        }
+
+                        Enumeration<String> dexEntries = dexfile.entries();
+                        while (dexEntries.hasMoreElements()) {
+                            String className = dexEntries.nextElement();
+                            if (className.startsWith(packageName)) {
+                                classNames.add(className);
+                            }
+                        }
+                    } catch (Throwable ignore) {
+                        Log.e("ARouter", "Scan map file in dex files made error.", ignore);
+                    } finally {
+                        if (null != dexfile) {
+                            try {
+                                dexfile.close();
+                            } catch (Throwable ignore) {
+                            }
+                        }
+
+                        parserCtl.countDown();
+                    }
+                }
+            });
+        }
+
+        parserCtl.await();
+
+        Log.d(Consts.TAG, "Filter " + classNames.size() + " classes by packageName <" + packageName + ">");
+        return classNames;
+    }
+
+
+    /**
+     * get all the dex path
+     *
+     * @param context the application context
+     * @return all the dex path
+     * @throws PackageManager.NameNotFoundException
+     * @throws IOException
+     */
+    public static List<String> getSourcePaths(Context context) throws PackageManager.NameNotFoundException, IOException {
+        ApplicationInfo applicationInfo = context.getPackageManager().getApplicationInfo(context.getPackageName(), 0);
+        File sourceApk = new File(applicationInfo.sourceDir);
+
+        List<String> sourcePaths = new ArrayList<>();
+        sourcePaths.add(applicationInfo.sourceDir); //add the default apk path
+
+        //the prefix of extracted file, ie: test.classes
+        String extractedFilePrefix = sourceApk.getName() + EXTRACTED_NAME_EXT;
+
+//        如果VM已经支持了MultiDex，就不要去Secondary Folder加载 Classesx.zip了，那里已经么有了
+//        通过是否存在sp中的multidex.version是不准确的，因为从低版本升级上来的用户，是包含这个sp配置的
+        if (!isVMMultidexCapable()) {
+            //the total dex numbers
+            int totalDexNumber = getMultiDexPreferences(context).getInt(KEY_DEX_NUMBER, 1);
+            File dexDir = new File(applicationInfo.dataDir, SECONDARY_FOLDER_NAME);
+
+            for (int secondaryNumber = 2; secondaryNumber <= totalDexNumber; secondaryNumber++) {
+                //for each dex file, ie: test.classes2.zip, test.classes3.zip...
+                String fileName = extractedFilePrefix + secondaryNumber + EXTRACTED_SUFFIX;
+                File extractedFile = new File(dexDir, fileName);
+                if (extractedFile.isFile()) {
+                    sourcePaths.add(extractedFile.getAbsolutePath());
+                    //we ignore the verify zip part
+                } else {
+                    throw new IOException("Missing extracted secondary dex file '" + extractedFile.getPath() + "'");
+                }
+            }
+        }
+
+        if (ARouter.debuggable()) { // Search instant run support only debuggable
+            sourcePaths.addAll(tryLoadInstantRunDexFile(applicationInfo));
+        }
+        return sourcePaths;
+    }
+}
+

因为 ClassUtils 的 getFileNameByPackageName() 和 getSourcePaths() 代码很关键，所以原封不动拷贝过来了，大致的逻辑是：通过包名获取到 apk 安装时解压出来的所有 dex 文件路径，再通过加载 dex 文件，提取出其中所有的 class，然后再回到 LogisticsCenter.init(mContext, executor) 中最后的那个 for 循环，加载出所有的路由和拦截器配置。那问题就来了：

# Q: 为什么 routerMap 中的元素个数为 0 ？或者说，为什么 dex 文件提取不出 class ？

A: 根据 RePlugin 官方 wiki 中，对插件的目录结构的介绍中，可以知道，插件的 dex 文件就不在常规目录下，所以 ARouter 压根就获取不到插件的 dex 文件，更别说加载插件中的路由及拦截器配置了。

https://github.com/Qihoo360/RePlugin/wiki/插件的管理#插件的目录结构 (opens new window)

# Q: 那要怎样才能让 ARouter 加载到插件的 dex 文件呢？

A: 理论上可以在插件中，通过反射的方式给 ARouter 的 Warehouse.groupsIndex 追加路由配置信息。或者对 ARouter 进行代码改造，在 LogisticsCenter.init(mContext, executor) 中插入获取当前插件 dex 文件中所有 class 的代码。

# Q: 这样就能让 ARouter 在插件中正常工作了吗？

A: 理论上是的。不过 Activity 可能还是会跳转失败。

# 2、Activity 跳转失败

ARouter 组件路由的关键方法就是 navigation()，而所有重载的 navigation() 方法最终都会走向 _ARouter#_navigation() 方法，其源码如下：

final class _ARouter {
+
+    private Object _navigation(final Postcard postcard, final int requestCode, final NavigationCallback callback) {
+        final Context currentContext = postcard.getContext();
+
+        switch (postcard.getType()) {
+            case ACTIVITY:
+                // Build intent
+                final Intent intent = new Intent(currentContext, postcard.getDestination());
+                intent.putExtras(postcard.getExtras());
+
+                // Set flags.
+                int flags = postcard.getFlags();
+                if (0 != flags) {
+                    intent.setFlags(flags);
+                }
+
+                // Non activity, need FLAG_ACTIVITY_NEW_TASK
+                if (!(currentContext instanceof Activity)) {
+                    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
+                }
+
+                // Set Actions
+                String action = postcard.getAction();
+                if (!TextUtils.isEmpty(action)) {
+                    intent.setAction(action);
+                }
+
+                // Navigation in main looper.
+                runInMainThread(new Runnable() {
+                    @Override
+                    public void run() {
+                        startActivity(requestCode, currentContext, intent, postcard, callback);
+                    }
+                });
+
+                break;
+            case PROVIDER:
+                return postcard.getProvider();
+            case BOARDCAST:
+            case CONTENT_PROVIDER:
+            case FRAGMENT:
+                Class<?> fragmentMeta = postcard.getDestination();
+                try {
+                    Object instance = fragmentMeta.getConstructor().newInstance();
+                    if (instance instanceof Fragment) {
+                        ((Fragment) instance).setArguments(postcard.getExtras());
+                    } else if (instance instanceof android.support.v4.app.Fragment) {
+                        ((android.support.v4.app.Fragment) instance).setArguments(postcard.getExtras());
+                    }
+
+                    return instance;
+                } catch (Exception ex) {
+                    logger.error(Consts.TAG, "Fetch fragment instance error, " + TextUtils.formatStackTrace(ex.getStackTrace()));
+                }
+            case METHOD:
+            case SERVICE:
+            default:
+                return null;
+        }
+
+        return null;
+    }
+}
+

这里主要看 switch-case 中 ACTIVITY 分支部分，在创建好 Intent 之后，就会调用 _ARouter#startActivity() 来启动 Activity，其源码如下：

final class _ARouter {
+    /**
+     * Start activity
+     *
+     * @see ActivityCompat
+     */
+    private void startActivity(int requestCode, Context currentContext, Intent intent, Postcard postcard, NavigationCallback callback) {
+        if (requestCode >= 0) {  // Need start for result
+            if (currentContext instanceof Activity) {
+                ActivityCompat.startActivityForResult((Activity) currentContext, intent, requestCode, postcard.getOptionsBundle());
+            } else {
+                logger.warning(Consts.TAG, "Must use [navigation(activity, ...)] to support [startActivityForResult]");
+            }
+        } else {
+            ActivityCompat.startActivity(currentContext, intent, postcard.getOptionsBundle());
+        }
+
+        if ((-1 != postcard.getEnterAnim() && -1 != postcard.getExitAnim()) && currentContext instanceof Activity) {    // Old version.
+            ((Activity) currentContext).overridePendingTransition(postcard.getEnterAnim(), postcard.getExitAnim());
+        }
+
+        if (null != callback) { // Navigation over.
+            callback.onArrival(postcard);
+        }
+    }
+}
+

可以看到 _ARouter#startActivity() 是通过 ActivityCompat.startActivity() 来启动 Activity，有一点很关键，插件中的 Activity，必须由插件的 context 来启动，那么这里的 currentContext 是谁？通过 Postcard#setContext() 的调用可以定位到以下源码：

final class _ARouter {
+    private static Context mContext;
+    protected static synchronized boolean init(Application application) {
+        mContext = application;
+        ...
+        return true;
+    }
+    protected Object navigation(final Context context, final Postcard postcard, final int requestCode, final NavigationCallback callback) {
+        // Set context to postcard.
+        postcard.setContext(null == context ? mContext : context);
+        ...
+    }
+}
+

也就是说，在调用 _ARouter#navigation() 时，如果外部有传入 context 就使用外部的 context，否则使用 application，而 _ARouter 的 application 来自框架初始化时 ARouter#init(application) 传入的 application，好了，现在的问题就是，这个 application 是宿主的，还是插件的？

下面只考虑作为插件的情况，因为作为单品没有宿主插件之分。

# 情景 1：在自定义 Application 中初始化 ARouter

public class MyApplication extends Application {
+
+    @Override
+    public void onCreate() {
+        super.onCreate();
+        ARouter.init(this); // this是插件的application
+    }
+}
+
  • 自定义 Application 中的 this 就是【插件】的 application。

# 情景 2：在 Activity 中初始化 ARouter

public class MyActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        ARouter.init(this.getApplication()); // 宿主application
+        ARouter.init(((Application) this.getApplicationContext())); // 插件application
+    }
+}
+
  • activity.getApplication()：拿到【宿主】的 application
  • activity.getApplicationContext()：拿到【插件】的 application

相关 issue：

综上，出现 Activity 跳转失败的本质原因就是使用了宿主的 context，主要发生在非自定义 Application 中初始化 ARouter 的场景，现在解决这个问题就很简单了，有 2 种解决方案：

如果你是在自定义 Application 中初始化 ARouter 的话，下面就不用看了。

# 方案 1：在非自定义 Application 中使用 applicationContext 初始化 ARouter：

public class MyActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        ARouter.init(((Application) this.getApplicationContext()));
+    }
+}
+

# 方案 2：使用带 context 参数的 navigation(Context) 方法进行路由操作：

public class MyActivity extends AppCompatActivity implements View.OnClickListener {
+
+    private Button button;
+
+    @Override
+    public void onClick(View view) {
+        ARouter.getInstance().build("/module2/other").navigation(this);
+    }
+}
+

# 三、LiteARouter

通过以上分析得出，为了让 ARouter 能够在 RePlugin 中正常初始化，有两种方案：

  • 反射：通过反射的方式给 ARouter 的追加路由配置信息 Warehouse.groupsIndex ，拦截器 Warehouse.interceptorsIndex 以及 IProvider 服务 Warehouse.providersIndex。
  • 改造：对 ARouter 进行代码改造，在 LogisticsCenter.init(mContext, executor) 中插入获取当前插件 dex 文件中所有 class 的代码。

以上两种方案各有利弊，个人觉得改造的方式应该比较好一点，不过呢，我并没有完全按上面的方式来处理，一方面是因为 ARouter 的设计思路是比较复杂的，除了路由，还有拦截器，依赖注入，以及 IProvider 等服务，并不能完全保证除了路由以外的其他功能是否能正常使用，另一方面是因为项目时间紧、任务重，开发时间严重不足，而且我们只需要用到路由功能。于是，我的做法是改造 ARouter，只保留路由功能，并命名为 LiteARouter (opens new window)。

# 1、arouter-compiler 分析

通过分析 arouter-compiler 代码，结合 jadx 反编译，可以知道最终会在 com.alibaba.android.arouter.routes 包下生成 ARouter$$Root$$XXX 的类，比如：

package com.alibaba.android.arouter.routes;
+
+import com.alibaba.android.arouter.facade.template.IRouteGroup;
+import com.alibaba.android.arouter.facade.template.IRouteRoot;
+import java.util.Map;
+
+public class ARouter$$Root$$substance implements IRouteRoot {
+    public void loadInto(Map<String, Class<? extends IRouteGroup>> routes) {
+        routes.put("substance", ARouter$$Group$$substance.class);
+    }
+}
+

substance 是我的主程序 Module 名，一般是 app，也就是 gradle 文件中 AROUTER_MODULE_NAME 参数对应的值。

可以知道 ARouter$$Root$$XXX 的 loadInto(Map<String, Class<? extends IRouteGroup>> routes) 方法会将路由的【分组信息】保存到 routes 中，而这个 route 正是 Warehouse.groupsIndex 。另外，真正的路由【映射信息】则是生成在了 ARouter$$Group$$XXX 类中，比如：

package com.alibaba.android.arouter.routes;
+
+import com.alibaba.android.arouter.facade.enums.RouteType;
+import com.alibaba.android.arouter.facade.model.RouteMeta;
+import com.alibaba.android.arouter.facade.template.IRouteGroup;
+import com.charylin.substance.screen.main.MainActivity;
+import java.util.Map;
+
+public class ARouter$$Group$$substance implements IRouteGroup {
+    public void loadInto(Map<String, RouteMeta> atlas) {
+        atlas.put("/substance/main", RouteMeta.build(RouteType.ACTIVITY, MainActivity.class, "/substance/main", "substance", (Map<String, Integer>) null, -1, Integer.MIN_VALUE));
+    }
+}
+

ARouter$$Group$$XXX 的 loadInto(Map<String, RouteMeta> atlas) 会将路由【映射信息】保存到 atlas 中，而这个 atlas 正是 Warehouse.routes 。

# 2、LogisticsCenter 分析

现在回过头再来看 LogisticsCenter.init(mContext, executor) 中最后的那个 for 循环，就比较清楚它是怎么加载路由配置信息的了：

public class LogisticsCenter {
+    /**
+     * LogisticsCenter init, load all metas in memory. Demand initialization
+     */
+    public synchronized static void init(Context context, ThreadPoolExecutor tpe) throws HandlerException {
+		...
+        // Step2. 加载 路由配置、拦截器 相关类
+        for (String className : routerMap) {
+            if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_ROOT)) {
+                // This one of root elements, load root.
+                ((IRouteRoot) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.groupsIndex);
+            } else if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_INTERCEPTORS)) {
+                // Load interceptorMeta
+                ((IInterceptorGroup) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.interceptorsIndex);
+            } else if (className.startsWith(ROUTE_ROOT_PAKCAGE + DOT + SDK_NAME + SEPARATOR + SUFFIX_PROVIDERS)) {
+                // Load providerIndex
+                ((IProviderGroup) (Class.forName(className).getConstructor().newInstance())).loadInto(Warehouse.providersIndex);
+            }
+        }
+        ...
+    }
+}
+

其核心就是反射拿到 ARouter$$Root$$XXX 、 ARouter$$Interceptors$$XXX 、 ARouter$$Providers$$XXX 类并创建实例，最终丢到 Warehouse 中，细心的你可能发现了，这里怎么没有 Warehouse.routes ？其实 LogisticsCenter 有一个很重要的 completion(Postcard) 方法，主要是对 Postcard 中的信息进行完善填充，以下是 completion(Postcard) 方法源码：

public class LogisticsCenter {
+
+    /**
+     * Completion the postcard by route metas
+     *
+     * @param postcard Incomplete postcard, should complete by this method.
+     */
+    public synchronized static void completion(Postcard postcard) {
+        RouteMeta routeMeta = Warehouse.routes.get(postcard.getPath());
+
+        if (null == routeMeta) {
+            // Maybe its does't exist, or didn't load.
+            if (!Warehouse.groupsIndex.containsKey(postcard.getGroup())) {
+                throw new NoRouteFoundException(TAG + "There is no route match the path [" + postcard.getPath() + "], in group [" + postcard.getGroup() + "]");
+            } else {
+
+                // Load route and cache it into memory, then delete from metas.
+                try {
+                    addRouteGroupDynamic(postcard.getGroup(), null);
+                } catch (Exception e) {
+                    throw new HandlerException(TAG + "Fatal exception when loading group meta. [" + e.getMessage() + "]");
+                }
+
+                completion(postcard);   // Reload
+            }
+        }
+        ...
+    }
+
+    public synchronized static void addRouteGroupDynamic(String groupName, IRouteGroup group) throws NoSuchMethodException, IllegalAccessException, InvocationTargetException, InstantiationException {
+        if (Warehouse.groupsIndex.containsKey(groupName)){
+            // If this group is included, but it has not been loaded
+            // load this group first, because dynamic route has high priority.
+            Warehouse.groupsIndex.get(groupName).getConstructor().newInstance().loadInto(Warehouse.routes);
+            Warehouse.groupsIndex.remove(groupName);
+        }
+
+        // cover old group.
+        if (null != group) {
+            group.loadInto(Warehouse.routes);
+        }
+    }
+}
+

LogisticsCenter#completion(Postcard) 源码的大致逻辑是，当根据 Postcard 中的路由 path 从 Warehouse.routes 中获取不到 routeMeta 时，即为路由信息缺失，这时，会根据 Postcard 中的路由 group （分组信息）动态加载到具体的路由配置，并保存到 Warehouse.routes 中，所以说，其实 Warehouse.routes 中具体的 routeMeta 是按需加载的。

# 3、LogisticsCenter 改造

综上，因为 Warehouse.routes 会在 LogisticsCenter#completion(Postcard) 方法中动态加载填充，所以，我只需要通过反射把路由【分组信息】加载进 Warehouse.groupsIndex 即可，于是我改造了 LogisticsCenter#loadRouterMap() 方法：

public class LogisticsCenter {
+
+    private static Context sContext;
+    private static ThreadPoolExecutor sExecutor;
+
+    private LogisticsCenter() {
+    }
+
+    public synchronized static void init(Context context, ThreadPoolExecutor tpe) {
+        loadRouterMap();
+    }
+
+    private static void loadRouterMap() {
+        try {
+            String nameOfRouteRootClass = Consts.NAME_OF_ROUTE_ROOT_CLASS; // com.charylin.litearouter.routes.LiteARouter$$Root
+            Class<?> routeRootClz = Class.forName(nameOfRouteRootClass);
+            if (routeRootClz != null) {
+                IRouteRoot routeGroup = routeRootClz.asSubclass(IRouteRoot.class).newInstance();
+                if (routeGroup != null) {
+                    routeGroup.loadInto(Warehouse.groupsIndex);
+                }
+            }
+        } catch (Exception e) {
+            LiteARouter.logger.error(Consts.TAG, "load router map error.", e);
+        }
+    }
+}
+
+public final class Consts {
+    public static final String SEPARATOR = "$$";
+    public static final String PROJECT = "LiteARouter";
+    public static final String TAG = PROJECT + "::";
+    public static final String NAME_OF_ROOT = PROJECT + SEPARATOR + "Root";
+    public static final String PACKAGE_OF_GENERATE_FILE = "com.charylin.litearouter.routes";
+    public static final String NAME_OF_ROUTE_ROOT_CLASS = PACKAGE_OF_GENERATE_FILE + '.' + NAME_OF_ROOT;
+}
+

为了反射足够简单，我把 ARouter$$Root$$XXX 类名改为 LiteARouter$$Root ，也就是说类名后面不追加模块名。即 gradle 文件中不需要配置 AROUTER_MODULE_NAME 参数了。

# 4、arouter-compiler 改造

既然记载了路由【分组信息】的类名（ ARouter$$Root$$XXX ）设计变化了，那么在 compiler 中也需要对生成的类名规则进行修改：


+@AutoService(Processor.class)
+@SupportedAnnotationTypes({ANNOTATION_TYPE_ROUTE})
+public class RouteProcessor extends BaseProcessor {
+
+    private void parseRoutes(Set<? extends Element> routeElements) throws IOException {
+        ...
+        // Write root meta into disk.
+        String rootFileName = NAME_OF_ROOT; // String rootFileName = NAME_OF_ROOT + SEPARATOR + moduleName;
+        JavaFile.builder(PACKAGE_OF_GENERATE_FILE,
+                TypeSpec.classBuilder(rootFileName)
+                        .addJavadoc(WARNING_TIPS)
+                        .addSuperinterface(ClassName.get(elementUtils.getTypeElement(ITROUTE_ROOT)))
+                        .addModifiers(PUBLIC)
+                        .addMethod(loadIntoMethodOfRootBuilder.build())
+                        .build()
+        ).build().writeTo(mFiler);
+    }
+}
+

因为只需要保留了路由功能，所以，把拦截器、依赖注入等不需要用到的功能对应的生成类逻辑一并精简掉了。

至此，便是我在处理 RePlugin+ARouter 搭配时发现的问题思考及解决方案，以上只是此次改造 ARouter 中最重要的部分，更多细节可通过对比 LiteARouter (opens new window) 与 ARouter 各个文件的差异来了解。

+ +
+
#插件化#RePlugin#ARouter#LiteARouter
RePlugin集成AndroidAutoSize
RePluginX - 兼容AndroidX并加入新特性开发纪要

+ ← + RePluginX - 兼容AndroidX并加入新特性开发纪要→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/cd4fd1/index.html b/pages/cd4fd1/index.html new file mode 100644 index 000000000..a0120d676 --- /dev/null +++ b/pages/cd4fd1/index.html @@ -0,0 +1,134 @@ + + + + + + Flutter - 快速实现聊天会话列表的效果，完美💯 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-10-09
目录

Flutter - 快速实现聊天会话列表的效果，完美💯

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、目标效果

聊天会话页的列表效果

  • 1、聊天数据不满一屏时，顶部显示所有聊天数据
  • 2、插入消息时 +
    • 如果最新消息紧靠列表底部时，则插入消息会使列表向上推
    • 如果不是紧靠列表底部，则固定到当前聊天位置

效果如图所示：

# 二、原理

# 1、 涉及的方法

ScrollPhysics 提供了 adjustPositionForNewDimensions 方法，用于修正 ScrollView 在 rebuild 后的偏移量，方法声明如下

double adjustPositionForNewDimensions({
+  required ScrollMetrics oldPosition,
+  required ScrollMetrics newPosition,
+  required bool isScrolling,
+  required double velocity,
+})
+

默认情况下，值为上一次的偏移量，即 newPosition 参数的 pixels，所以在顶部插入消息时，消息列表就会跟随滚动。

如下图所示，观察蓝色的消息条目，每播入一条消息时，所有消息会自动往上顶，而滚动视图的偏移量其实一直是没有变化的~

注：值得注意的是，如果该方法返回的值与 newPosition 的 pixels 不相等时，则会触发视图的重新布局，所以这个操作还是比较昂贵的，应尽量减少返回值的变动。

# 2、实现逻辑

根据上述内容我们不难推出插入消息时的效果实现原理如下：

效果 返回的值
消息紧靠列表底部时，插入消息会使列表向上推 直接返回 super 的值，即 newPosition 参数的 pixels
如果不是紧靠列表底部，则固定到当前聊天位置 返回原本第 0 条消息的最新偏移量

下面重点说明一下第 2 点中 返回原本第0条消息的最新偏移量 的实现逻辑：

ListView 的本质是 RenderSliverList，通过 RenderSliverList 的 firstChild 属性拿到当前列表中渲染的首个 item。

如下图，firstChild 是下标为 10 的 item，这个 item 与预渲染区域 cacheExtent 相关，如果将其设置为 0，则 firstChild 的下标将会是 12，这个相信不难理解。

所以，我们只需要在插入消息时，记录第 0 条消息的偏移量，当列表视图 rebuild 后，adjustPositionForNewDimensions 方法会被调用，此时取出第 1 条消息的偏移量，两者的差值加上 super 的值即为目标修正偏移量。

至于 聊天数据不满一屏时，顶部显示所有聊天数据 这个效果只是在切换 shrinkWrap 而已，比较简单就不在此展开讲了。

我已将上述逻辑进行了封装，集成于 flutter_scrollview_observer (opens new window)，接下来我们就来看看如何使用。

# 三、使用

现在只需三个步骤即可快速实现聊天会话列表的效果

步骤一：初始化必要的 ListObserverController 和 ChatScrollObserver

/// 初始化 ListObserverController
+observerController = ListObserverController(controller: scrollController)
+  ..cacheJumpIndexOffset = false;
+
+/// 初始化 ChatScrollObserver
+chatObserver = ChatScrollObserver(observerController)
+  ..toRebuildScrollViewCallback = () {
+    // 这里可以重建指定的滚动视图即可
+    setState(() {});
+  };
+

步骤二：按如下配置 ListView 并使用 ListViewObserver 将其包裹

Widget _buildListView() {
+  Widget resultWidget = ListView.builder(
+    physics: ChatObserverClampinScrollPhysics(observer: chatObserver),
+    shrinkWrap: chatObserver.isShrinkWrap,
+    reverse: true,
+    controller: scrollController,
+    ...
+  );
+
+  resultWidget = ListViewObserver(
+    controller: observerController,
+    child: resultWidget,
+  );
+  return resultWidget;
+}
+

步骤三：插入或删除消息前，调用 ChatScrollObserver 的 standby 方法

onPressed: () {
+  chatObserver.standby();
+  setState(() {
+    chatModels.insert(0, ChatDataHelper.createChatModel());
+  });
+},
+...
+onRemove: () {
+  chatObserver.standby(isRemove: true);
+  setState(() {
+    chatModels.removeAt(index);
+  });
+},
+

注：示例中的 setState 都可以换成对列表视图进行局部刷新的代码

# 四、最后

GitHub地址: flutter_scrollview_observer (opens new window)

该库还实现了其它十分实用的功能，相关功能有对应的文章进行叙述

相关文章链接：

如果这个库对你很有帮助，请不吝给个 star 吧

+ +
+
#Dart#Flutter
Flutter - 列表滚动定位超强辅助库，墙裂推荐！🔥
Flutter - 聊天输入框更新文本时的必备优化点🔖

+ ← + Flutter - 聊天输入框更新文本时的必备优化点🔖→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d09c0b/index.html b/pages/d09c0b/index.html new file mode 100644 index 000000000..4e30d923c --- /dev/null +++ b/pages/d09c0b/index.html @@ -0,0 +1,201 @@ + + + + + + iOS - ARC与MRC的单例设计模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - ARC与MRC的单例设计模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 单例设计模式(Singleton)

# 定义

就是保证某个类创建出来的对象从始到终只有一个的一种方案

# 作用

  • 节省内存开销
  • 保证整个程序中使用同一份资源

# 实现

首先将我们的环境设置为非ARC环境，即MRC，如图

MRC环境

在MRC模式下，我们得自己手动释放资源，所以得重写一些与资源创建与释放相关的方法，以保证单例对象的唯一。

新建一个继承于NSObject的类 LXFFileTool，我直接上代码，并写上注释 +LXFFileTool.h

@interface LXFFileTool : NSObject
++ (instancetype)sharedFileTool;
+@end
+

LXFFileTool.m

#import "LXFFileTool.h"
+@implementation LXFFileTool
+static LXFFileTool *_fileTools = nil;
+/**
+ *  alloc方法内部会调用allocWithZone:
+ *  @param zone 系统分配给app的内存
+ */
++ (instancetype)allocWithZone:(struct _NSZone *)zone {
+    if (_fileTools == nil) {
+        static dispatch_once_t onceToken;
+        dispatch_once(&onceToken, ^{    // 安全(这个代码只会被调用一次)
+            _fileTools = [super allocWithZone:zone];
+        });
+    }
+    return _fileTools;
+}
+- (oneway void)release {
+    // 在allocWithZone中使用了GCD令创建对象的代码只执行一次，如果_fileTools被释放则无法再创建
+    // 重写release方法，防止_fileTools被释放
+}
+// 重写retain方法
+- (instancetype)retain {
+    return self;
+}
+// 重写retainCount锁定引用计数
+- (NSUInteger)retainCount {
+    return 1;
+}
+// 重写init方法，防止单例所拥有的属性值被重置
+// 让初始化的方法只能执行一次，自然属性值就没有机会被重置
+- (instancetype)init {
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+        _fileTools = [super init];  // init会先调用alloc方法
+    });
+    return _fileTools;
+}
+// 仿造系统的单例创建方式，提供类方法
++ (instancetype)sharedFileTool {
+    // 由于我们已经重写了init方法保证了单例对象的唯一了，所以这里直接调用init方法即可。
+    return [[self alloc] init];
+}
+@end
+

MRC下就是这样，我们的目的就是只能创建和初始化一次对象，不给机会释放，也不给机会重新初始化，从而保证了该对象的唯一。

那现在来看看ARC下是如何实现单例的吧。其实ARC下与MRC的区别就是ARC下我们不用自己再手动去释放资源了，从而使代码上大同小异，如下所示。

#import "LXFFileTool.h"
+@implementation LXFFileTool
+
+static LXFFileTool *_fileTools = nil;
+
++ (instancetype)allocWithZone:(struct _NSZone *)zone {
+    if (_fileTools == nil) {
+        static dispatch_once_t onceToken;
+        dispatch_once(&onceToken, ^{
+            _fileTools = [super allocWithZone:zone];
+        });
+    }
+    return _fileTools;
+}
+- (instancetype)init {
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+        _fileTools = [super init];
+    });
+    return _fileTools;
+}
++ (instancetype)sharedFileTool {
+    return [[self alloc] init];
+}
+

# 批量创建单例

现在我们已经知道了ARC与MRC下分别是如何创建单例的了，但是如果我们一个项目里需要多个单例，那我们只能把代码复制粘贴再改改就完事吗？这未免也太麻烦了吧。那我们能不能做到快速且方便的创建单例对象呢？可以的，利用宏

首先先说下一些关于宏的知识吧

  • 使用 #define 关键字来定义宏
  • 宏定义只能是单行的，不能换行

那现在来讨论下一些疑惑吧，你说宏只能单行，可是创建单例的代码可是有很多行呀！还有我们如何做到自定义类方法名(就是 sharedXXX )？好，我们来介绍下宏下的两个特殊符号

# 宏的特殊符号

 作用
\ 用来转译换行符，即屏蔽换行符
## 将两个相邻的标记(token)连接为一个单独的标记

想了解其它关于宏的预处理命令可以自行百度参考"C语言的预处理命令"

简单来说，\用于取消换行，##用来连接，而我们就用##来实现自定义类方法名

创建一个头文件Singleton.h用来存放宏定义 +先来看看定义.h中 sharedXXX 是如何通过宏来定义的

// .h文件的实现
+#define SingletonH(methodName) + (instancetype)shared##methodName;
+

现在回到LXFFileTool.h中，直接一行定义sharedFileTool这个类方法

#import "Singleton.h"
+@interface LXFFileTool : NSObject
+SingletonH(FileTool)
+@end
+

我们只需要将方法名FileTool传入SingletonH()中就可以拼接为sharedFileTool

那现在再来看看定义.m中创建单例的方式，以ARC为例

#define SingletonM(methodName) \
+static id _instance = nil; \
++ (instancetype)allocWithZone:(struct _NSZone *)zAone { \
+    if (_instance == nil) { \
+        static dispatch_once_t onceToken; \
+        dispatch_once(&onceToken, ^{ \
+            _instance = [super allocWithZone:zone]; \
+        }); \
+    } \
+    return _instance; \
+} \
+\
+- (instancetype)init { \
+    static dispatch_once_t onceToken; \
+    dispatch_once(&onceToken, ^{ \
+        _instance = [super init]; \
+    }); \
+    return _instance; \
+} \
+\
++ (instancetype)shared##methodName { \
+    return [[self alloc] init]; \
+}
+

在每一个行后面加上(反斜杠)取消换行，使用##来拼接传入的方法名，但还有一点需要注意：最后一行不能加反斜杠

回到LXFFileTool.m中，一行实现创建单例

#import "LXFFileTool.h"
+@implementation LXFFileTool
+SingletonM(FileTool)
+@end
+

好，现在还有一个问题，就是如果我的项目中有个别文件是需要MRC环境的，那我该怎么办才能让创建单例也是如此简单呢？很简单，加个判断就好了，大致判断如下，详情看文章最后附上的Demo

#if __has_feature(objc_arc) // ARC
+// 写上ARC下的定义代码
+#else   // 非ARC
+// 写上MRC下的定义代码
+#endif
+

好了，现在用起来是不是方便多了？我们只要创建一个类，然后在.h文件中写SingletonH(XXX)，再在.m文件中写SingletonM(XXX)就可以实现单例了~

# 指定环境

顺便提下如何在MRC下指定某个类文件使用的环境为ARC

指定环境

如图，可以在 Build Phases -> Compile Sources 中双击某个需要ARC环境的类文件，然后写上

-fobjc-arc
+

如果是指定MRC，则写上

-fno-objc-arc
+

# Demo

最后，附上Demo: LXFSingleton (opens new window)

+ +
+
#iOS#Objective-C
iOS - 通过runtime获取某个类中所有的变量和方法
iOS - 揭露Block的内部实现原理

+ ← + iOS - 揭露Block的内部实现原理→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d0a26b/index.html b/pages/d0a26b/index.html new file mode 100644 index 000000000..f5b1c6021 --- /dev/null +++ b/pages/d0a26b/index.html @@ -0,0 +1,194 @@ + + + + + + iOS - Swift UICollectionView横向分页滚动，cell左右排版 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift UICollectionView横向分页滚动，cell左右排版

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 情况

最近在做表情键盘时遇到一个问题，我用UICollectionView来布局表情，使用横向分页滚动，但在最后一页出现了如图所示的情况

只显示一半

# 情况分析图

是的，现在的item分布就是这个鬼样子

从上到下，从左到右

现在想要做的，就是将现在这个鬼样子变成另外一种样子，如图

从左到右，从上到下

那怎么办？只好重新布局item了

# 解决方案

我是自定了一个Layout(LXFChatEmotionCollectionLayout)，让UICollectionView在创建的时候使用了它

在 LXFChatEmotionCollectionLayout.swift 中

# 添加一个属性来保存所有item的attributes

// 保存所有item的attributes
+fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []
+

# 重新布局

// MARK:- 重新布局
+override func prepare() {
+    super.prepare()
+    
+    let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
+    
+    // 设置itemSize
+    itemSize = CGSize(width: itemWH, height: itemWH)
+    minimumLineSpacing = 0
+    minimumInteritemSpacing = 0
+    scrollDirection = .horizontal
+    
+    // 设置collectionView属性
+    collectionView?.isPagingEnabled = true
+    collectionView?.showsHorizontalScrollIndicator = false
+    collectionView?.showsVerticalScrollIndicator = true
+    let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
+    collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
+    
+    
+    /// 重点在这里
+    var page = 0
+    let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
+    for itemIndex in 0..<itemsCount {
+        let indexPath = IndexPath(item: itemIndex, section: 0)
+        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
+        
+        page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
+        // 通过一系列计算, 得到x, y值
+        let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
+        let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
+        
+        attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
+        // 把每一个新的属性保存起来
+        attributesArr.append(attributes)
+    }
+}
+

# 返回所有当前可见的Attributes

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
+    var rectAttributes: [UICollectionViewLayoutAttributes] = []
+    _ = attributesArr.map({
+        if rect.contains($0.frame) {
+            rectAttributes.append($0)
+        }
+    })
+    return rectAttributes
+}
+

# 大功告成

# 完整代码

import UIKit
+
+let kEmotionCellNumberOfOneRow = 8
+let kEmotionCellRow = 3
+
+class LXFChatEmotionCollectionLayout: UICollectionViewFlowLayout {
+    // 保存所有item
+    fileprivate var attributesArr: [UICollectionViewLayoutAttributes] = []
+    
+    // MARK:- 重新布局
+    override func prepare() {
+        super.prepare()
+        
+        let itemWH: CGFloat = kScreenW / CGFloat(kEmotionCellNumberOfOneRow)
+        
+        // 设置itemSize
+        itemSize = CGSize(width: itemWH, height: itemWH)
+        minimumLineSpacing = 0
+        minimumInteritemSpacing = 0
+        scrollDirection = .horizontal
+        
+        // 设置collectionView属性
+        collectionView?.isPagingEnabled = true
+        collectionView?.showsHorizontalScrollIndicator = false
+        collectionView?.showsVerticalScrollIndicator = true
+        let insertMargin = (collectionView!.bounds.height - 3 * itemWH) * 0.5
+        collectionView?.contentInset = UIEdgeInsetsMake(insertMargin, 0, insertMargin, 0)
+        
+        var page = 0
+        let itemsCount = collectionView?.numberOfItems(inSection: 0) ?? 0
+        for itemIndex in 0..<itemsCount {
+            let indexPath = IndexPath(item: itemIndex, section: 0)
+            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
+            
+            page = itemIndex / (kEmotionCellNumberOfOneRow * kEmotionCellRow)
+            // 通过一系列计算, 得到x, y值
+            let x = itemSize.width * CGFloat(itemIndex % Int(kEmotionCellNumberOfOneRow)) + (CGFloat(page) * kScreenW)
+            let y = itemSize.height * CGFloat((itemIndex - page * kEmotionCellRow * kEmotionCellNumberOfOneRow) / kEmotionCellNumberOfOneRow)
+            
+            attributes.frame = CGRect(x: x, y: y, width: itemSize.width, height: itemSize.height)
+            // 把每一个新的属性保存起来
+            attributesArr.append(attributes)
+        }
+        
+    }
+    
+    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
+        var rectAttributes: [UICollectionViewLayoutAttributes] = []
+        _ = attributesArr.map({
+            if rect.contains($0.frame) {
+                rectAttributes.append($0)
+            }
+        })
+        return rectAttributes
+    }
+    
+}
+

附上相关项目：Swift 3.0 高仿微信 (opens new window)

+ +
+
#iOS#Swift
iOS - 实现UINavigation全屏滑动返回(二)
iOS - Swift-UICollectionView横向分页的问题

+ ← + iOS - Swift-UICollectionView横向分页的问题→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d18561/index.html b/pages/d18561/index.html new file mode 100644 index 000000000..95a62a52f --- /dev/null +++ b/pages/d18561/index.html @@ -0,0 +1,176 @@ + + + + + + Flutter - 秒杀1/2曝光统计 📊 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2023-08-26
目录

Flutter - 秒杀1/2曝光统计 📊

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

在众多的曝光统计计算方式中，有这么一种特殊的，名为 1/2 曝光统计的计算方式，顾名思义就是模块露出的大小超过自身大小的 50% 时，需要触发一次统计，并记录起来防止被反复统计，当少于 50% 时会将曝光记录进行重置。

一般会用于统计在列表页中投放的广告和详情页中某些广告模块的曝光。

# 二、解决方案

要实时监测并计算来得到当前所有 item 的自身显示占比还是比较麻烦的，所以普遍我们会优先去找和使用已存在的解决方案。

那想必大家脑海中第一个想到的便是谷歌自家的 visibility_detector (opens new window)，这个库也确实很好用，常规场景下呢我也比较推荐大家使用它的，因为它真的太方便了！不过我所遇到的一种场景它却无法胜任，那就是在 CustomScrollView 中存在 SliverPersistentHeader 的情况，它的计算结果会不准确，如下所示。

注意看蓝色的 Middle Sliver 视图，当它刚被 AppBar 挡住时自身显示占比还是 1，直到超出了屏幕的上方才开始发生变化，当被 AppBar 完全遮挡时值为 0.58~

不过这里我着重介绍一下另一个方案，那就是使用我这个库（flutter_scrollview_observer (opens new window)) 去快速获取 item 自身显示占比，而且不会有上述的 bug。

# 三、实战

以 ListView 为例，代码如下：

final observerController = ListObserverController();
+
+ListViewObserver(
+  child: _buildListView(),
+  // 不进行对比，直接把结果返出来
+  triggerOnObserveType: ObserverTriggerOnObserveType.directly,
+  controller: observerController,
+  onObserve: (resultModel) {
+    // 从观察结果中拿到正在展示的所有 item 的数据
+    final models = resultModel.displayingChildModelList;
+    // 取出所有下标
+    final indexList = models.map((e) => e.index).toList();
+    // 取出所有 item 的自身显示占比
+    final displayPercentageList =
+        models.map((e) => e.displayPercentage).toList();
+    debugPrint('index -- $indexList -- $displayPercentageList');
+  },
+

是的，拿到所有的 item 的自身显示占比就是这么简单，通过使用对应的 WidgetObserver 去对滚动视图进行观察就可以了。

每次滚动的时候就会直接返回观察结果，如果需要在不滚动的时候也能进行一次观察，可以调用如下方法

observerController.dispatchOnceObserve();
+

# 四、统计逻辑

上面你已经能拿到自身显示占比的数据，那接下来就可以做是否触发曝光的逻辑判断了，这个比较业务化，所以这里直接给出我的代码吧，供参与使用

import 'package:scrollview_observer/scrollview_observer.dart';
+
+mixin VisibilityExposureMixin {
+  // 记录 item 已曝光的 Map
+  Map<dynamic, bool> exposureRecordMap = {};
+
+  /// 重置所有 item 的曝光记录
+  resetExposureRecordMap() {
+    exposureRecordMap.clear();
+  }
+  
+  /// 处理滚动视图中 item 的曝光
+  /// 
+  /// [resultModel] 监听结果（基类是 ObserveModel, 传 onObserve 回调中的值，或 onObserveAll 中根据 BuildContext 取出来的值）
+  /// [toExposeDisplayPercent] 当自身显示占比超过该值时视为曝光且记录起来，否则重置曝光记录
+  /// [recordKeyCallback] 返回用于记录 item 已曝光的 key，不实现则使用下标
+  /// [needExposeCallback] 用于确定对应下标的 item 是否参与曝光计算逻辑，不实现则为 true
+  /// [toExposeCallback] 满足曝光条件后的回调
+  handleExposure({
+    required dynamic resultModel,
+    double toExposeDisplayPercent = 0.5,
+    dynamic Function(int index)? recordKeyCallback,
+    bool Function(int index)? needExposeCallback,
+    required Function(int index) toExposeCallback,
+  }) {
+    List<ObserveDisplayingChildModelMixin> displayingChildModelList = [];
+    if (resultModel is ListViewObserveModel) {
+      displayingChildModelList = resultModel.displayingChildModelList;
+    } else if (resultModel is GridViewObserveModel) {
+      displayingChildModelList = resultModel.displayingChildModelList;
+    }
+    for (var displayingChildModel in displayingChildModelList) {
+      final index = displayingChildModel.index;
+      final recordKey = recordKeyCallback?.call(index) ?? index;
+      // 让外部告诉我们 index 对应的 item 是否需要参与曝光计算逻辑
+      final needExpose = needExposeCallback?.call(index) ?? true;
+      if (!needExpose) continue;
+      // debugPrint('item : $index - ${displayingChildModel.displayPercentage}');
+      // 判断 item 自身显示占比是否超过 [toExposeDisplayPercent]
+      if (displayingChildModel.displayPercentage < toExposeDisplayPercent) {
+        // 不满足曝光条件，重置曝光记录
+        exposureRecordMap[recordKey] = false;
+      } else {
+        // 满足暴露条件
+        final haveExposure = exposureRecordMap[recordKey] ?? false;
+        if (haveExposure) continue;
+        toExposeCallback(index);
+        exposureRecordMap[recordKey] = true;
+      }
+    }
+  }
+}
+

逻辑：

  1. 达到 1/2 后触发曝光统计，并记录起来，防触发多次请求
  2. 小于 1/2 时重置当前 item 的曝光记录

使用：

混入 VisibilityExposureMixin

class _VisibilityListViewPageState extends State<VisibilityListViewPage>
+    with VisibilityExposureMixin {
+  ...
+}
+

在 onObserve 中调用 handleExposure 方法

onObserve: (resultModel) {
+  handleExposure(
+    resultModel: resultModel,
+    needExposeCallback: (index) {
+      // 只有下标为 6 的 item 需要计算是否曝光
+      return index == 6;
+    },
+    toExposeCallback: (index) {
+      // 满足条件，可以上报曝光了
+      debugPrint('Exposure -- $index');
+    },
+  );
+},
+

最终看下效果吧，注意看红色视图和控制台的输出

曝光左下角 ListView 中下标为 6 的红色 item

曝光左下角 SliverGrid 中下标为 6 的紫色 item

Demo链接：visibility_demo (opens new window)

+ +
+
#Dart#Flutter
Flutter - 滚动视图中的表单防遮挡 🗒
一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐

+ ← + 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d45f5d/index.html b/pages/d45f5d/index.html new file mode 100644 index 000000000..c10659d01 --- /dev/null +++ b/pages/d45f5d/index.html @@ -0,0 +1,380 @@ + + + + + + Kotlin - 改良设计模式 - 工厂模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-11
目录

Kotlin - 改良设计模式 - 工厂模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

设计模式是软件工程中解决特定问题的一种指南，我们常说 Java 有 23 种设计模式，而多范式的 Kotlin 作为更好的 Java，拥有很多新的语言特性，在使用原本 Java 中常用的设计模式时，可以有哪些方面的改良呢？

说明：本系列是本人对《Kotlin 核心编程》第 9 章 设计模式 的理解总结，所以总结内容上会有些改动，另外，部分篇章个人觉得意义不大，所以没有在本系列中进行概括，有兴趣可自行查阅原书籍。

  • 工厂模式 +
    • 作用：隐藏对象实例的创建逻辑，而不需要暴露给客户端。
    • 细分：简单工厂、工厂方法、抽象工厂。

# 二、改良简单工厂

  • 例子：电脑厂商生产电脑（服务器、家用 PC）
  • 重点：伴生对象、运算符重载(invoke)
/**
+ * 电脑接口
+ *
+ * @author GitLqr
+ */
+interface Computer {
+    val cpu: String
+}
+
+/**
+ * 电脑类
+ *
+ * @author GitLqr
+ */
+class PC(override val cpu: String = "Core") : Computer
+class Server(override val cpu: String = "Xeon") : Computer
+
+/**
+ * 电脑类型枚举
+ *
+ * @author GitLqr
+ */
+enum class ComputerType {
+    PC, SERVER
+}
+

简单工厂，一般会使用单例模式（私有化构造器，强制通过类方法来使用），先来看 Java 版本：

/**
+ * 简单电脑工厂（Java版）
+ *
+ * @author GitLqr
+ */
+public static class ComputerFactory {
+    private ComputerFactory() {
+    }
+
+    public static Computer produce(ComputerType type) {
+        if (type == ComputerType.PC) {
+            return new PC();
+        } else if (type == ComputerType.SERVER) {
+            return new Server();
+        } else {
+            throw new IllegalArgumentException("没有其他类型的电脑了");
+        }
+    }
+}
+
+// 使用
+Computer pc = ComputerFactory.produce(ComputerType.PC);
+Computer server = ComputerFactory.produce(ComputerType.SERVER);
+

Kotlin 在语言层面就已经实现了单例（使用 object 关键字替代 class），所以将上述代码改造成 Kotlin 版本：

/**
+ * 简单电脑工厂（Kotlin版）
+ *
+ * @author GitLqr
+ */
+object ComputerFactory {
+    fun produce(type: ComputerType): Computer {
+        return when (type) {
+            ComputerType.PC -> PC()
+            ComputerType.SERVER -> Server()
+        }
+    }
+}
+
+// 使用
+val pc = ComputerFactory.produce(ComputerType.PC)
+val server = ComputerFactory.produce(ComputerType.SERVER)
+

以上只不过是用 Kotlin 翻译了一遍 Java 代码，下面进入正题，从这个简单工厂的使用上，我们知道核心是让 ComputerFactory 根据不同的 ComputerType 参数来创建电脑实例，而这个 produce 方法名并不重要，结合 Kotlin 的运算符重载，可以进一步简化代码：

/**
+ * 简单工厂改良：重载 invoke 运算符
+ *
+ * @author GitLqr
+ */
+object ComputerFactory {
+    operator fun invoke(type: ComputerType): Computer {
+        return when (type) {
+            ComputerType.PC -> PC()
+            ComputerType.SERVER -> Server()
+        }
+    }
+}
+
+// 使用
+val pc = ComputerFactory(ComputerType.PC)
+val server = ComputerFactory(ComputerType.SERVER)
+

你可能会觉得 ComputerFactory(ComputerType.PC) 这样的代码也太奇怪了，更像是在创建一个工厂实例，如果能改成 Computer(ComputerType.PC) 这样的代码的话，才比较符合正常逻辑吧，没问题，只需要在 Computer 接口中搞一个静态工厂方法代替构造器就好了，先来看下 Java 版本：

/**
+ * 静态工厂方法（Java版）
+ *
+ * @author GitLqr
+ */
+interface Computer {
+    class Factory{ // 等同于 public static class Factory
+        public static Computer produce(ComputerType type){
+            if (type == ComputerType.PC) {
+                return new PC();
+            } else if (type == ComputerType.SERVER) {
+                return new Server();
+            } else {
+                throw new IllegalArgumentException("没有其他类型的电脑了");
+            }
+        }
+    }
+    ...
+}
+
+// 使用
+Computer pc = Computer.Factory.produce(ComputerType.PC);
+Computer server = Computer.Factory.produce(ComputerType.SERVER);
+

将上面的 Java 代码翻译成 Kotlin 版本：

/**
+ * 静态工厂方法（Kotlin版）
+ *
+ * @author GitLqr
+ */
+interface Computer {
+    companion object Factory{
+        fun produce(type: ComputerType): Computer {
+            return when (type) {
+                ComputerType.PC -> PC()
+                ComputerType.SERVER -> Server()
+            }
+        }
+    }
+    ...
+}
+
+// 使用
+val pc = Computer.Factory.produce(ComputerType.PC)
+val server = Computer.Factory.produce(ComputerType.SERVER)
+

注意：伴生对象名称默认是 Companion，可以自定义，但是不管指不指定名称，使用时都可以省略不写，所以上面的代码也可以这样 Computer.produce(ComputerType.PC)，但有一种情况除外，如果是给伴生对象扩展属性或方法时，就必须写上伴生对象的自定义名称了。

我们知道，Kotlin 中伴生对象的名称是可以省略不写的的，结合运算符重载，上述代码可以进一步简化为：

/**
+ * 静态工厂方法改良：重载【伴生对象】 invoke 运算符
+ *
+ * @author GitLqr
+ */
+interface Computer {
+    companion object {
+        operator fun invoke(type: ComputerType): Computer {
+            return when (type) {
+                ComputerType.PC -> PC()
+                ComputerType.SERVER -> Server()
+            }
+        }
+    }
+    ...
+}
+
+// 使用
+val pc = Computer(ComputerType.PC)
+val server = Computer(ComputerType.SERVER)
+

# 三、改良抽象工厂

  • 例子：电脑品牌厂商生产电脑
  • 重点：内联函数（inline + reified）

现在增加了品牌厂商的概念，比如 Dell、Asus 等，如果用简单工厂模式，则需要再创建 n 个品牌厂商工厂类，比如 DellComputerFactory、AsusComputerFactory，品牌厂商众多，为了后续扩展，需要对工厂进行抽象：

/**
+ * 各品牌电脑
+ *
+ * @author GitLqr
+ */
+interface Computer
+class Dell : Computer
+class Asus : Computer
+
+/**
+ * 各品牌厂商
+ *
+ * @author GitLqr
+ */
+abstract class AbstractFactory {
+    abstract fun produce(): Computer
+}
+
+class DellFactory : AbstractFactory() {
+    override fun produce() = Dell()
+}
+
+class AsusFactory : AbstractFactory() {
+    override fun produce() = Asus()
+}
+

抽象工厂模式，一般会在抽象工厂类中提供一个根据 参数 获取具体工厂实例的方法，结合 Kotlin 的重载运算符特性，该方法可以这么写：

/**
+ * 抽象工厂：根据方法参数构建工厂实例
+ *
+ * @author GitLqr
+ */
+abstract class AbstractFactory {
+    abstract fun produce(): Computer
+
+    companion object {
+        operator fun invoke(type: String): AbstractFactory {
+            return when (type) {
+                "dell" -> DellFactory()
+                "asus" -> AsusFactory()
+                else -> throw IllegalArgumentException()
+            }
+        }
+    }
+}
+
+// 使用：
+val factory = AbstractFactory("dell")
+val computer = factory.produce()
+

注意：该 参数 是什么东西并没有限制，可以是字符串、枚举、具体工厂实例等等，在《Kotlin 核心编程》中，案例使用的参数是传入具体工厂实例，我个人认为这样不妥，因为工厂模式的核心就是 隐藏对象实例的创建逻辑，而不需要暴露给客户端 ，所以这里我改用为字符串来做区分。

这里要思考一个问题，实际项目中使用字符串方式来区分工厂类型并不合理，因为会造成调用处硬编码的问题，改用枚举会更加合适，但是枚举会增加类文件啊，那么有什么方案可以规避掉上述两种弊端呢？很简单，直接把具体 Computer 的类类型传进方法内做判断：

import java.lang.reflect.Type
+
+/**
+ * 抽象工厂传参优化（Java反射包）
+ *
+ * @author GitLqr
+ */
+abstract class AbstractFactory {
+    abstract fun produce(): Computer
+
+    companion object {
+        operator fun invoke(type: Type): AbstractFactory {
+            return when (type) {
+                Dell::class -> DellFactory()
+                Asus::class -> AsusFactory()
+                else -> throw IllegalArgumentException()
+            }
+        }
+    }
+}
+
+// 使用
+val factory = AbstractFactory(Dell::class.java)
+val computer = factory.produce()
+

注意：在 Java 中，类类型对应是用 java.lang.reflect.Type 来表示，一般通过 类.class 这种方式来获取，对应到 Kotlin 的写法就是 类::class.java

你应该注意到了，这个 Type 是 Java 反射包中的类，而 Kotlin 完全兼容 Java，自然可以使用 java.lang.reflect.Type 来表示类类型，不过，Kotlin 自身也有一套反射机制，可以使用 kotlin.reflect.KClass 来表示类类型，所以，使用 Kotlin 反射 API 版本如下：

import kotlin.reflect.KClass
+
+/**
+ * 抽象工厂传参优化（Kotlin反射包）
+ *
+ * @author GitLqr
+ */
+abstract class AbstractFactory {
+    abstract fun produce(): Computer
+
+    companion object {
+        // operator fun invoke(type: KClass<*>): AbstractFactory
+        operator fun invoke(type: KClass<out Computer>): AbstractFactory {
+            return when (type) {
+                Dell::class -> DellFactory()
+                Asus::class -> AsusFactory()
+                else -> throw IllegalArgumentException()
+            }
+        }
+    }
+}
+
+// 使用
+val factory = AbstractFactory(Dell::class)
+val computer = factory.produce()
+

注意：KClass<*> 中的 * 是一个通配符，表示接收任意类类型；而 KClass<out Computer> 中使用了 out 关键字，这是 Kotlin 中的泛型协变，表示只接收 Computer 子类的类类型。

其实，通过 AbstractFactory(Dell::class) 这种方式来获取具体工厂实例已经够用了，但是使用泛型还可以进一步简化代码，最终写法为：AbstractFactory<Dell>() ，是不是更加直观优雅？那么要怎么使用泛型来改造上面的方法呢？要知道 Java 泛型是在 1.5 之后才有的，为了向后兼容，泛型参数类型会在编译期被擦除（纯粹的历史包袱 =_=），所以在 Java 中要获取一个泛型的参数类型是十分困难的，而 Kotlin 的内联函数(inline)配合 reified 关键字，却可以做到具体化泛型参数类型，从而让获取 泛型参数类型 变得尤为简单：

/**
+ * 抽象工厂改良：根据泛型参数类型构建工厂实例（inline + reified 具体化泛型参数类型）
+ *
+ * @author GitLqr
+ */
+abstract class AbstractFactory {
+    abstract fun produce(): Computer
+
+    companion object {
+        inline operator fun <reified T : Computer> invoke(): AbstractFactory {
+            return when (T::class) { // 不使用 reified 的话，T::class 会报错
+                Dell::class -> DellFactory()
+                Asus::class -> AsusFactory()
+                else -> throw IllegalArgumentException()
+            }
+        }
+    }
+}
+
+// 使用
+val factory = AbstractFactory<Dell>()
+val computer = factory.produce()
+

# 四、补充

在 【二、改良简单工厂】 部分提到了伴生对象指定名称问题， 这里做一下补充。假设 Computer 是由其他同事或第三方人员编写的，我们不方便直接在其伴生对象中增加新功能，这时，可以使用 Kotlin 的扩展特性，给伴生对象扩展方法，比如给 Computer 增加一个功能，通过 CPU 型号来判断电脑类型：

/**
+ * 伴生对象扩展方法（默认名称）
+ *
+ * @author GitLqr
+ */
+fun Computer.Companion.fromCPU(cpu: String): ComputerType? = when (cpu) {
+    "Core" -> ComputerType.PC
+    "Xeon" -> ComputerType.SERVER
+    else -> null
+}
+
+// 使用
+val type = Computer.fromCPU(pc.cpu)
+

如果此时 Computer 中的伴生对象已经指定了名称为 Factory，那么在给伴生对象扩展方法时就必须使用对应的伴生对象名称，而不是默认的 Companion 了：

interface Computer {
+    // 自定义伴生对象名称
+    companion object Factory { ... }
+}
+
+/**
+ * 伴生对象扩展方法（自定义名称）
+ *
+ * @author GitLqr
+ */
+fun Computer.Factory.fromCPU(cpu: String): ComputerType? = when (cpu) { ... }
+
+// 使用
+val type = Computer.fromCPU(pc.cpu)
+

结论：

  • 扩展伴生对象方法时，如果伴生对象有自定义名称，则使用自定义名称进行扩展。
  • 无论伴生对象是否有自定义名称，调用时均可省略不写。
+ +
+
#设计模式#工厂模式
Kotlin - 函数式编程
Kotlin - 改良设计模式 - 构建者模式

+ ← + Kotlin - 改良设计模式 - 构建者模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d4ac48/index.html b/pages/d4ac48/index.html new file mode 100644 index 000000000..e4344de16 --- /dev/null +++ b/pages/d4ac48/index.html @@ -0,0 +1,136 @@ + + + + + + iOS-组件化开发（一）：远程私有库的基本使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2018-04-06
目录

iOS-组件化开发（一）：远程私有库的基本使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

随着项目功能的不断增加，越来越多的开发人员加入，业务主线也随之越来越多，造成耦合越来越严重，编译越来越慢，测试不独立等一系列问题。为了解决此类情况，我们可以考虑到使用组件化开发

1.概念 +组件化就是将一个单一工程的项目, 分解成为各个独立的组件， 然后按照某种方式, 任意组织成一个拥有完整业务逻辑的工程。

2.优势

  • 独立：独立编写、编译、运行、测试
  • 重用：功能代码的重复使用。比如不同项目使用同一功能模块
  • 高效：任意增删模块，实现高效迭代
  • 组件化还可以配合二进制化, 提高项目编译速度

3.组件分类 +大体上分三类：基础组件、功能组件和业务组件

  • 基础组件：也称为公共组件，存放平时定义的宏、常量、协议、分类、对必要的第三方的封装类，以及各种处理工具类，如：时间、日期、设备信息、文件处理、沙盒管理等
  • 功能组件： 自定义视图控件、一些特定功能的封装（如录音、播放音频封装）
  • 业务组件：各种业务线

本篇先来介绍下远程私有库的基本使用，建议按顺序看完之后，回来再看一遍步骤归纳，加深了解，如有不足之处，欢迎指出，感谢 : )

# 步骤归纳

  1. 创建远程索引库和私有库

  2. 将远程索引库添加到本地 pod repo add 索引库名称 索引库地址

  3. 在本地创建一个pod模板库 pod lib create 组件名称
    +将框架的核心代码添加到Classes目录下
    +本地安装测试核心代码是否可用 pod install
    +修改Spec描述文件
    +将修改好的模板库上传至远程私有库

  4. 上传代码和打标签
    git init
    git add .
    git commit -m "提交描述"
    git remote add origin 远程私有库地址
    git push origin master
    git tag '0.1.0'
    git push --tags

  5. 提交spec至私有索引库
    pod lib lint --private
    pod spec lint --private
    pod repo push 索引库的本地名称 xx.podspec

  6. 使用
    source 官方索引库url
    source 私有索引库url
    pod '组件名称'
    pod install

接下来我们就来实战如何创建和使用私有库

# 一、创建私有索引库

这里以码云为例，创建一个LXFSpecs的私有索引库，这玩意的作用如其名，就是用来索引的

私有索引库

LXFSpecs

# 二、本地添加私有索引库

# 1、查看本地索引库

pod repo
+

查看本地索引库

如图，目前本地仅有github上的那个公有索引库

# 2、添加私有索引库

将我们刚刚新建的私有索引库LXFSpecs添加到本地

// pod repo add 索引库名称 索引库地址
+pod repo add LXFSpecs https://gitee.com/LinXunFeng/LXFSpecs.git
+

现在本地就有两个索引库，好，索引库的事情就先放一边去了～

# 三、创建组件库

码云上的创建操作同上，这里以LXFBase为例，创建基础组件库 +LXFBase

# 1、快速创建模版库

到合适的位置创建一个与组件名相同的文件夹，cd进去后，使用如下命令

// pod lib create 组件名
+pod lib create LXFBase
+

这里会让你配置一些信息，根据自己的情况自行配置即可。

配置

# 2、添加组件内容

创建完成后会自动帮我们打开相应的Example项目，LXFBase目录中会出现如图这些文件，我们把基础组件相关的东西丢到Classes文件夹中，并且把ReplaceMe.m文件删除

目录结构

默认Classes文件夹中存放的文件就是pod install时要下载下来的文件，当然可以通过修改spec文件的配置来更改位置

# 3、安装与测试本地库

在Example项目的Podfile文件中可以看到

pod 'LXFBase', :path => '../'
+

模板库已经默认帮我们在Podfile中指定了LXFBase.podspec的位置，使组件LXFBase可以正常安装使用和方便测试

pod install
+

pod install

pod

可以看到我们已经将本地的组件添加进Example中了，现在可以尽情地做你想做的测试，确保组件的可用。

测试组件没有问题后，我们接下来就要将podspec文件上传至私有索引库，不过在此之前，需要对spec进行修改。

# 4、 修改Spec

具体的配置说明可以参考Cocoapods-创建第三方框架 (opens new window)

podspec

主要的修改内容

  s.name             = 'LXFBase'
+  s.version          = '0.1.0'
+  s.summary          = 'LXFBase.'
+  s.description      = <<-DESC
+LXFBase是基础组件库，包括分类和常用工具
+                       DESC
+  s.homepage         = 'https://gitee.com/LinXunFeng/LXFBase'
+  s.source           = { :git => 'https://gitee.com/LinXunFeng/LXFBase.git', :tag => s.version.to_s }
+  s.source_files = 'LXFBase/Classes/**/*'
+

# 四、上传组件代码

# 1、将代码提交到组件仓库

git add .
+git commit -m 'firstCommit'
+git remote add origin https://gitee.com/LinXunFeng/LXFBase.git
+// 第一次push如果报错的话可以加上-f
+// git push -f origin master
+git push origin master
+

# 2、打标签

标签0.1.0与spec中的s.version保持一致

git tag '0.1.0'
+git push --tags
+

tag

标签上传成功

# 五、提交podspec到私有索引库

在上传spec文件前我们可以做一个验证来节省时间，不然每次都推送很久结果还是验证失败，会气死人的～

# 1、本地验证Spec的必填字段

// 本地验证不会验证 s.source 中的tag
+pod lib lint
+

pod lib lint

# 2、远程验证

// 远程验证会验证 s.source 中的tag，如果此时没有打上相应的标签则会报错
+pod spec lint
+

如果你刚才没有打标签并上传至远程私有库就来进行远程验证，肯定是会报错的

tag Error

在打完并上传tag后再进行远程验证，就会验证成功了，验证成功后我们就可以进行下一步操作：提交podspec文件到索引库

pod spec lint

  • 验证私有库提示 +如果验证的是私有库，则在后面加上--private,否则会有警告，你可以选择--allow-warnings来忽略该警告
pod lib lint --private
+pod spec lint --private
+

# 3、提交podspec

// pod repo push 私有索引库名称 spec名称.podspec 
+pod repo push LXFSpecs LXFBase.podspec 
+

这里的操作过程：先将我们的代码直接push到本地索引库LXFSpecs，推送后会自动帮我们同步到远程索引库

提交成功

再来看看码云上的私有索引库LXFSpecs

LXFBase.podspec

来测试下搜索我们的组件

pod search 'LXFBase'
+

搜索成功

# 六、使用私有库

这时我们可以来试试通过pod形式来添加组件LXFBase，创建一个新的项目

# 1、添加Podfile文件

pod init
+

# 2、在Podfile的最顶部添加如下描述

// 第二行是为了保证公有库的正常使用
+source 'https://gitee.com/LinXunFeng/LXFSpecs.git'
+source 'https://github.com/CocoaPods/Specs.git'
+

# 3、添加使用组件LXFBase

pod 'LXFBase'
+

# 4、安装组件

pod install
+

安装成功

成功添加组件内容

+ +
+
#iOS#Git#GitHub#Cocoapods#组件化
iOS - Cocoapods-创建第三方框架
iOS-组件化开发（二）：远程私有库的更新与子库

+ ← + iOS-组件化开发（二）：远程私有库的更新与子库→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/d85c7a/index.html b/pages/d85c7a/index.html new file mode 100644 index 000000000..d2eb3bc30 --- /dev/null +++ b/pages/d85c7a/index.html @@ -0,0 +1,719 @@ + + + + + + Gradle入门系列(一) - groovy基础语法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-01
目录

Gradle入门系列(一) - groovy基础语法

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# groovy基础语法

# 一、变量

# 1、类型

对象类型、基本类型(本质是对象类型)

int x = 0
+println x.class
+double y = 3.14
+println y.class
+

输出：

class java.lang.Integer
+class java.lang.Double
+

结论： +从log输出可以得出，groovy中实质上是没有基本类型的，本质是java中的装箱对象类型。

# 2、定义

强类型定义方式、弱类型def定义方式

def x_1 = 11
+println x_1.class
+def y_1 = 3.1415
+println y_1.class
+def name = 'Android'
+println name.class
+

输出：

class java.lang.Integer
+class java.math.BigDecimal
+class java.lang.String
+

# 二、字符串

String、GString

# 1、常用的三种定义方式

// 单引号：与java中的String是一样的
+def name = 'a single \'a\' string'
+println name.class
+// 三引号：可以直接指定格式（如：换行，不需要加\n，代码表示上也不需要用+号拼接）
+def thupleName = '''three single string'''
+println thupleName.class
+// 三引号：需要每行文字声明不同行（即：三引号后不要紧接文字内容），可以用\。
+def thupleName1 = '''\
+line one
+line two
+line three'''
+println thupleName1
+// 双引号：可扩展字符串（即：可包含变量、表达式等）
+def doubleName = "this a common String" // String
+println doubleName.class
+def doubleName1 = "Hello: ${name}" // GString
+println doubleName1.class
+
// 单引号
+class java.lang.String
+// 三引号
+class java.lang.String
+line one
+line two
+line three
+// 双引号
+class java.lang.String
+class org.codehaus.groovy.runtime.GStringImpl
+

# 2、新增操作符

方法来源：java.lang.String、DefaultGroovyMethods、StringGroovyMethods（普通类型的参数、闭包类型的参数）

def str = "groovy"
+def str2 = "gro"
+// center(numberOfChars, padding)：使用padding对已有字符串两边进行填充
+// center(numberOfChars)：使用空格对已有字符串两边进行填充
+println str.center(8,'a')
+// padLeft(numberOfChars, padding)：使用padding对已有字符串左边进行填充
+println str.padLeft(8,'a')
+// 比较：可以使用>、<符号来直接比较，而不需要使用compareTo()
+println str > str2
+// 获取字符：string[index]（相当于string.getAt(index)）
+println str[0]
+println str[0..1]
+// 减去字符串：可以直接使用-号，效果与minus()一致
+println str - str2 // str.minus(str2)
+// 倒序
+println str.reverse()
+// 首字母大写
+println str.capitalize()
+// 判断是否是数字
+println str.isNumber()
+

输出：

// center
+agroovya
+// padLef
+aagroovy
+// str > str2
+true
+// str[0]
+g
+// str[0..1]
+gr
+// str - str2
+ovy
+// reverse
+yvoorg
+// capitalize
+Groovy
+// isNumber
+false
+

# 三、新增API讲解

逻辑控制：顺序逻辑（单步往下执行）、条件逻辑（if/else、switch/case）、循环逻辑（while、for）

// ============= 条件逻辑 =============
+def x = 1.23
+def result
+switch(x){
+  case 'foo':
+    result = 'found foo'
+    break
+  case [4,5,6,'inlist']: // 列表
+    result = 'list'
+    break
+  case 12..30: // 范围
+    result = "range"
+    break
+  case Integer:
+    result = 'integer'
+    break
+  case BigDecimal:
+    result = 'big decimal'
+    break
+  default:
+    result = 'default'
+    break
+}
+println result
+
+// ============= 循环逻辑 =============
+def sum = 0
+// 对范围的for循环
+for(i in 0..9){sum += i}
+// 对List的循环
+for(i in [0,1,2,3,4,5,6,7,8,9]){sum += i}
+// 对Map的循环
+for(i in ["lili":1, "luck":2, "xiaoming":3]){
+  sum += i.value
+}
+

输出：

// x = 1.23
+big decimal
+// x = 4
+list
+

# groovy闭包讲解

# 一、基础

闭包概念（定义、调用）、闭包参数（普通参数、隐式参数）、闭包返回值（总是有返回值的）

// ============= 闭包概念 =============
+// 定义
+def clouser = {println 'Hello groovy!'}
+// 调用1：
+clouser.call()
+// 调用2：
+clouser()
+
+// ============= 闭包参数 =============
+// 普通参数
+def clouser = {String name, int age -> println "Hello ${name}, my age is ${age}"}
+clouser('groovy!', 18) // clouser.call('groovy!', 18) 
+// 隐式参数（it是所有闭包都拥有的默认参数，当有显式声明参数时，it失效）
+def clouser = {println "Hello ${it}"}
+clouser('groovy!')
+
+// ============= 闭包返回值 =============
+def clouser = {return 'Hello, groovy!'} // 返回 Hello, groovy
+def result = clouser()
+println result
+
+def clouser = {println 'Hello groovy!'} // 返回 null
+def result = clouser()
+println result
+

# 二、使用

闭包的用法：与基本类型的结合使用、与String结合使用、与数据结构结合使用、与文件等结合使用

// ============= 与基本类型的结合使用 =============
+int x = fab(5)
+println x
+// 用来求指定number的阶乘
+int fab(int number){
+  int result = 1
+  1.upto(number, {num -> result *= num}) // upto()是DefaultGroovyMethods中封装好的方式
+  return result
+}
+int fab2(int number){
+  int result = 1
+  number.downto(1){       // 闭包可以不写在括号内，可以写在括号外
+    num -> result *= num
+  }
+  return result
+}
+// 从0循环到number
+int cal(int number){
+  int result = 1
+  number.times { // times(Closure)只接收一个闭包，把闭包写到括号外，括号可以省略
+    num -> result += num
+  }
+  return result
+}
+
+// ============= 与String结合使用包参数 =============
+String str = 'the 2 and 3 is 5'
+// each：遍历每个字符
+str.each {
+  String temp -> print temp
+}
+// find：查找符合条件的第一个
+println str.find {
+  String s -> s.isNumber()
+}
+// findAll：查找符合条件的所有字符
+def list = str.findAll {
+  String s -> s.isNumber()
+}
+println list.toListString()
+// any：遍历每个字符，只要满足条件就返回true
+def result= str.any {
+  String s -> s.isNumber()
+}
+println result
+// every：遍历每个字符，所有都要满足条件才会返回true
+println str.every {
+  String s -> s.isNumber
+}
+// collect：遍历每个字符，经过闭包处理后，添加进list中返回
+def list = str.collect { it.toUpperCase() }
+println list.toListString()
+
+// ============= 与数据结构结合使用 =============
+// ============= 与文件等结合使用 =============
+// 后续篇章中会涉及
+
+

输出：

// ============= 与String结合使用包参数 =============
+// each
+the 2 and 3 is 5
+// find
+2
+// final All
+[2, 3, 5]
+// any
+true
+// every
+false
+// collect
+[T, H, E,  , 2,  , A, N, D,  , 3,  , I, S,  , 5]
+

# 三、进阶

闭包关键变量（this、owner、delegate）

// this == owner == delegate
+def scriptClosure = {
+  println "scriptClosure this:"+this // 代表闭包定义处的类
+  println "scriptClosure owner:"+owner // 代表闭包定义处的类或者对象
+  println "scriptClosure delegate:"+delegate // 代码任意对象，默认与owner一致
+}
+scriptClosure.call()
+
+// this != owner == delegate
+def nestClosure = {
+  def innerClosure = {
+    prinln "innerClosure this:"+this
+    prinln "innerClosure owner:"+owner
+    prinln "innerClosure delegate:"+delegate
+  }
+  innerClosure.call()
+}
+
+// this != owner != delegate
+def nestClosure = {
+  def innerClosure = {
+    prinln "innerClosure this:"+this
+    prinln "innerClosure owner:"+owner
+    prinln "innerClosure delegate:"+delegate
+  }
+  innerClosure.delegate = new Person() // 手动修改delegate的值
+  innerClosure.call()
+}
+

输出

// this == owner == delegate
+scriptClosure this:variable.closurestudy@2ef3eef9
+scriptClosure owner:variable.closurestudy@2ef3eef9
+scriptClosure delegate:variable.closurestudy@2ef3eef9
+
+// this != owner == delegate
+innerClosure this:variable.closurestudy@2ef3eef9
+innerClosure owner:variable.closurestudy$_run_closure2@402bba4f
+innerClosure delegate:variable.closurestudy$_run_closure2@402bba4f
+
+// this != owner != delegate
+innerClosure this:variable.closurestudy@2ef3eef9
+innerClosure owner:variable.closurestudy$_run_closure2@402bba4f
+innerClosure delegate:variable.Person@795cd85e
+

结论：

  • 在大多数据情况下，this、owner、delegate的值是一样的。
  • 在闭包中定义闭包时，this与owner的值是不一样的。（this指的是闭包定义处的类对象，owner指的是闭包定义处类中的闭包对象）
  • 在手动修改了闭包delegate时，owner与delegate的值才会不一样。

闭包委托策略（Closure.OWNER_FIRST、Closure.OWNER_ONLY、Closure.DELEGATE_FIRST、Closure.DELEGATE_ONLY）

class Studen{
+  String name
+  def pretty = { "My name is ${name}" }
+  String toString(){
+    pretty.call()
+  }
+}
+
+Class Teacher{
+  String name1 // 注意：与Student中的name变量名不一样！！
+}
+
+def stu = new Studen(name: "Lqr")
+def tea = new Teacher(name1: "Lxf")
+
+// 1、Normal
+println stu.toString()
+
+// 2、优先委托delegate
+stu.pertty.delegate = tea
+stu.pertty.resolveStrategy = Closure.DELEGATE_FIRST
+println stu.toString()
+
+// 3、只委托delegate
+stu.pertty.delegate = tea
+stu.pertty.resolveStrategy = Closure.DELEGATE_ONLY
+println stu.toString()
+

输出：

// 1、Normal
+My name is Lqr
+
+// 2、优先委托delegate
+My name is Lqr // 如果Teacher中的name1改为name，则输出变为：My name is Lxf
+
+// 3、只委托delegate
+报错：No Such property: name for class Teacher
+

# groovy数据结构

# 一、列表

定义、操作（增删查排）

// 列表的定义
+def list = [1, 2, 3, 4, 5] // groovy中的列表就是ArrayList
+println list.class
+println list.size()
+// 数组的定义
+def array = [1, 2, 3, 4, 5] as int[] // 使用as int[]转换
+int[] array = [1, 2, 3, 4, 5] // 使用强类型定义
+
+// ============= 列表的添加 =============
+list.add(6)
+list.leftShift(7)
+list << 8
+println list.toListString()
+def plusList = list + 9
+println plusList.toListString()
+
+// ============= 列表的删除 =============
+list.remove(7)
+list.remove((Object)7)
+list.removeAt(7)
+list.removeElement(6)
+list.removeAll { return it % 2 == 0}
+println list - [6, 7]
+println list.toListString()
+ 
+// ============= 列表的排序 =============
+def sortList = [6 -3, 9, 2, -7, 1, 5]
+sortList.sort() // java中：Collections.sort(sortList)
+println sortList
+// 自定义排序规则：按绝对值反方向排序
+sortList.sort { a,b ->
+  a == b ? 0 : Math.abs(a) < Math.abs(b) ? 1 : -1
+}
+// 自定义排序规则：按字符串长度排序
+def sortStringList = ['abc', 'z', 'Hello', 'groovy', 'java']
+sortStringList.sort { it -> return it.size()}
+println sortStringList
+
+// ============= 列表的查找 =============
+def findList = [-3, 9, 6, 2, -7, 1, 5]
+// find() : 返回第一个符合条件的元素
+int result = findList.find { return it % 2 == 0}
+println result
+// findAll() : 返回所有符合条件的元素
+def resultfindList.findAll{ return it % 2 != 0}
+println result.toListString()
+// any() : 若列表中有一个满足条件就返回true
+def result = findList.any { return it % 2 != 0} 
+println result
+// every() : 列表中所有元素都满足条件才返回true
+def result = findList.every {return it % 2 != 0}
+println result
+// min() : 返回最小值
+println findList.min() // findList.min { return Math.abs(it) } 查找最小绝对值
+// max() : 返回最大值
+println findList.max() // findList.max { return Math.abs(it) } 查找最大绝对值
+// count() : 统计符合条件的元素个数
+def num = findList.count { return it % 2 == 0}
+println num
+

输出

// 列表的定义
+class java.util.ArrayList
+5
+
+// ============= 列表的排序 =============
+[-7, -3, 1, 2, 5, 6, 9]
+// 自定义排序规则：按绝对值反方向排序
+[9, -7, 6, 5, -3, 2, 1]
+// 自定义排序规则：按字符串长度排序
+['z', 'abc', 'java', 'Hello', 'groovy']
+
+// ============= 列表的查找 =============
+// find
+6
+// findAll() 
+[-3， 9， -7， 1， 5]
+// any() 
+true
+// every() 
+false
+// min()
+1
+// max() 
+9
+// count() 
+2
+

# 二、映射

// 定义
+def colors = [
+  red : 'ff0000',
+  green : '00ff00',
+  blue : '0000ff'
+]
+println colors.getClass() // 注：不能直接使用colors.class，因为这样会查找key为class的元素
+// 强行指定类型：def colors = [...] as HashMap 或 HashMap colors = [...]
+
+// 索引方式
+println colors['red']
+println colors.red
+println colors.blue
+// 添加元素
+colors.yellow = 'ffff00'    // 添加同类型key-value
+colors.complex = [a:1, b:2] // 添加任意类型key-value
+println colors.toMapString()
+// 删除元素
+colors.remove(red)
+
+def students = [
+  1: [number: '0001', name: 'Bob', score: 55, sex: 'male'],
+  2: [number: '0002', name: 'Johnny', score: 62, sex: 'female']
+  3: [number: '0003', name: 'Claire', score: 73, sex: 'female']
+  4: [number: '0004', name: 'Amy' ,score: 66, sex: 'male']
+]
+
+// 遍历
+students.each { def student -> 
+  println "the key is ${student.key}, "+
+    "the value is ${student.value}"
+}
+// 带索引遍历
+students.eachWithIndex { def student, int index ->
+  println "the index is ${index}, "+
+    "the key is ${student.key}, "+
+    "the value is ${student.value}"
+}
+// 直接遍历key-value
+students.each { key, value -> ...}
+students.eachWithIndex { key, value, index -> ...}
+
+// 查找
+def entry = students.find { def student ->
+  return student.value.score >= 60
+}
+println entry
+def entrys = students.findAll { def student ->
+  return student.value.score >= 60
+}
+println entrys
+// 统计及格男生个数
+def count =  students.count { def student ->
+  return student.value.score >= 60 && student.value.sex == 'male'
+}
+println count
+// 过滤：获取所有及格同学的姓名
+def names = students.findAll { def student ->
+  return student.value.score >= 60
+}.collect{ // 过滤出元素指定属性列
+  return it.value.name
+}
+println names.toListString()
+// 分组：对及格与不及格学生进行分组
+def group = students.groupBy {def student ->
+  return student.value.score >= 60 ? '及格' : '不及格'
+}
+println group.toMapString()
+
+// 排序
+def sort = students.sore { def student1, def students ->
+  Number score1 = student1.value.score
+  Number score2 = student2.value.score
+  return score1 == score2 ? 0 : score1 < score2 ? -1 : 1
+}
+println sort
+
// 定义
+class java.util.LinkedHashMap
+
+// 索引方式
+ff0000
+ff0000
+0000ff
+// 添加元素
+[red:ff0000, green:00ff00, blue:0000ff, yellow:ffff00, complex:[a:1, b:2]]
+
+// 遍历
+the key is 1, thie value is [number:0001, name:Bob, score:55, sex:male]
+the key is 2, thie value is [number:0002, name:Johnny, score:62, sex:female]
+the key is 3, thie value is [number:0003, name:Claire, score:73, sex:female]
+the key is 4, thie value is [number:0004, name:Amy, score:66, sex:male]
+// 带索引遍历
+the index is 0, the key is 1, thie value is [number:0001, name:Bob, score:55, sex:male]
+the index is 1, the key is 2, thie value is [number:0002, name:Jhonny, score:62, sex:female]
+the index is 2, the key is 3, thie value is [number:0003, name:Claire, score:73, sex:female]
+the index is 3, the key is 4, thie value is [number:0004, name:Amy, score:66, sex:male]
+
+// 查找
+// find
+2={number=0002, name=Johnny, score=62, sex=female}
+// findAll
+[2:[number:0002, name:Johnny, score:62, sex:female], 3:[number:0003, name:Claire, score:73, sex:female], 4:[number:0004, name:Amy, score:66, sex:male]]]
+// count
+1
+// collect
+[Johnny, Claire, Amy]
+// groupBy
+[不及格:[1:[number:0001, name:Bob, score:55, sex:male]], 及格:[2:[number:0002, name:Johnny, score:62, sex:female], 3:[number:0003, name:Claire, score:73, sex:female], 4:[number:0004, name:Amy, score:66, sex:male]]]]
+
+// 排序
+[1:[number:0001, name:Bob, score:55, sex:male], 2:[number:0002, name:Johnny, score:62, sex:female], 4:[number:0004, name:Amy, score:66, sex:male]], 3:[number:0003, name:Claire, score:73, sex:female]]
+

其他：

  • map定义时，key通常是用不可变字符串或number来定义。
  • 字符串不使用单引号时，groovy默认会认为是不可变的单引号字符串。（如：red 与 'red' 一样）

# 三、范围

Range定义、操作（each、switch-case）

def range = 1..10           // Range是一个继承于List的接口，即，本质是列表
+println range[0]            // 范围第一个数值
+println range.contains(10)  // 范围是否包含10
+println range.from          // 范围中第一个值
+println range.to            // 范围中最后一个值
+
+// 遍历
+range.each {
+  println it
+}
+for(i in range){
+  println i
+}
+
+// switch-case
+def getGrade(Number number){
+  def result
+  switch(number){
+    case 0..<60: // [0, 60)
+      result = '不及格'
+      break;
+    case 60..<70:
+      result = '及格'
+      break;
+    case 70..<80:
+      result = '良好'
+      break;
+    case 80..100: // [80, 100]
+      result = '优秀'
+      break;
+  }
+  result // 相当于 return result。此处可以省略return，groovy中方法会默认返回最后一行的结果
+}
+
+

# groovy面向对象

# 一、类、接口等的定义和使用

// 类的定义
+class Person{
+  String name
+  
+  Integer age // int与Integer是一样的，groovy中，int本质就是Integer
+  
+  def increaseAge(Integer years){
+    this.name += years
+  }
+}
+
+// 创建对象
+def person = new Person(name: 'Lqr', age: 18) // 也可以只直接一部分，如：new Person(name: 'lqr')或不指定
+println "the name is ${person.name}, the age is ${person.age}"
+person.increaseAge(10)
+
+// 接口定义
+interface Action {
+  void eat()
+  void drink()
+  void play()
+}
+
+// trait类定义（与java中的抽象类差不多）
+trait DefaultAction {
+  abstract void eat()
+  void play(){
+    println ' i can play.'
+  }
+}
+

结论

  • groovy中默认都是public（类、成员属性、方法等）
  • groovy类继承自groovy.lang.GroovyObject（而java类则继承自Object）
  • def定义的方法，其返回值就是Object
  • groovy类会默认会成员变量生成getter与setter方法。
  • 无论你是直接.还是调用get/set，最终都是调用get/set方法，如：person.name相当于person.getName()
  • groovy接口中不允许定义非public的方法（如：protected void eat()是不行的）

# 二、元编程

groovy运行时类方法调用流程： +

在java中，如果对象调用了一个类中没有定义过的方法时，连编译都编译不过，但是在groovy中，情况则不同（可以编译通过），根据图中流程可以知道，运行期间，当对象调用了一个类中没有的方法时，会依次调用metaClass中的同名方法，类中的methodMissing(String name, Object args)方法，类中的invokeMethod(String name, Object args)方法，执行到其中一个便停止后续方法查找调用。

# 1、定义invokeMethod

当只定义类的invokeMethod(String name, Object args)方法时，运行时调用对象一个不存在的方法时，会执行invokeMethod()。

class Person{
+  ...
+  // 一个方法找不到时，调用它代替
+  def invokeMethod(String name, Object args){
+    return "the method is ${name}, the params is ${args}"
+  }
+}
+
+def person = new Person(name: 'Lqr', age: 18)
+person.cry()
+

输出：

the method is cry, the params is []
+

# 2、定义methodMissing

当同时定义了类中的invokeMethod()、methodMissing()方法时，优先执行methodMissing(String name, Object args)

class Person{
+  ...
+  // 一个方法找不到时，调用它代替
+  def invokeMethod(String name, Object args){
+    return "the method is ${name}, the params is ${args}"
+  }
+  
+  def methodMissing(String name, Object args){
+    return "the method ${name} is missing"
+  }
+}
+
+def person = new Person(name: 'Lqr', age: 18)
+person.cry()
+

输出：

the method cry is missing
+

# 3、metaClass

metaClass便是groovy中的元编程核心。在groovy中，可以使用metaClass为类在运行时动态添加 属性 和 方法

用处：对第三方库中的final类进行扩展。

// 为类动态添加一个属性
+Person.metaClass.sex = 'male' // 同时设置动态属性sex的默认值为male
+def Person = new Person(name: 'Lqr', age: 18)
+println person.sex
+person.sex = 'female'
+println "the new sex is:" + person.sex
+
+// 为类动态添加方法
+Person.metaClass.sexUpperCase = { -> sex.toUpperCase() }
+def person2 = new Person(name: 'Lqr', age: 18)
+println person2.sexUpperCase()
+
+// 为类动态添加静态方法
+Person.metaClass.static.createPerson = {
+  String name, int age -> new Person(name: name, age: age)
+}
+def person3 = Person.createPerson('Lqr', 18)
+println person3.name + ' and ' + person.age
+

输出：

// 为类动态添加一个属性
+male
+the new sex is:female
+// 为类动态添加方法
+MALE
+// 为类动态添加静态方法
+Lqr and 18
+

以上可以看到groovy的metaClass功能十分强大，但它本身有一个限制需要我们注意一下，即：默认情况下metaClass注入的属性与方法只是短暂的（准确来说是非全局的）。

举个例子在ClassA中对Person进行了metaClass扩展并正常调用动态注入的属性和方法，但是在ClassB中，若也要使用前面动态注入的属性和方法是不行的，因为在groovy中metaClass动态注入的属性和方法默认是非全局的，你可以有如下2种做法：

  1. 在ClassB中再使用metaClass再动态注入一次属性和方法。
  2. 使用ExpandoMetaClass.enableGlobally()。

# 4、ExpandoMetaClass.enableGlobally()

使用ExpandoMetaClass.enableGlobally()开启metaClass动态全局注入 属性、方法 功能。

// 在ApplicationManager调用ExpandoMetaClass.enableGlobally()，并对Person进行扩展
+class ApplicationManager{
+  static void init(){
+    ExpandoMetaClass.enableGlobally()
+    // 为第三方类添加方法
+    Person.metaClass.static.createPerson = { String name, int age ->
+      new Person(name: name, age: age)
+    }
+  }
+}
+
+// 在ClassB中可以使用Person动态注入的扩展方法了
+class ClassB{
+  def test(){
+    def person = Person.createPerson('Lqr', 18) // 因为只是普通方法，不是构造函数，所以不能这样：createPerson(name: 'Lqr', age: 18) ，切记！！
+    println "the person name is ${person.name} and the age is ${person.age}"
+  }
+}
+
+// Entry模拟一个App的运行入口
+class Entry{
+  static void main(String[] args){
+    ApplicationManager.init()
+    new ClassB().test()
+  }
+}
+

输出：

the person name is Lqr and the age is 18
+
+ +
+
#脚本#Gradle
使用注解打造自己的IOC框架
Gradle入门系列(二) - groovy高级语法

+ ← + Gradle入门系列(二) - groovy高级语法→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/daa62e/index.html b/pages/daa62e/index.html new file mode 100644 index 000000000..b6968d31c --- /dev/null +++ b/pages/daa62e/index.html @@ -0,0 +1,184 @@ + + + + + + iOS - 解决SecurityEnvSDK与SGMain的冲突问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-03-14
目录

iOS - 解决SecurityEnvSDK与SGMain的冲突问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 问题

在集成友盟统计和阿里百川之后项目报如下错误

duplicate symbol '_OBJC_CLASS_$_tdvSFHFKeychainUtils' in:
+    /Users/.../Pods/UMCSecurityPlugins/thirdparties/SecurityEnvSDK.framework/SecurityEnvSDK(SecurityEnvSDK99999999.o)
+    /Users/.../阿里百川/WXFrameworks/SGMain.framework/SGMain(SGMain99999999.o)
+duplicate symbol '_OBJC_METACLASS_$_tdvSFHFKeychainUtils' in:
+    /Users/.../Pods/UMCSecurityPlugins/thirdparties/SecurityEnvSDK.framework/SecurityEnvSDK(SecurityEnvSDK99999999.o)
+    /Users/.../阿里百川/WXFrameworks/SGMain.framework/SGMain(SGMain99999999.o)
+duplicate symbol '_OBJC_CLASS_$_SGDataCollectionLock' in:
+    /Users/.../Pods/UMCSecurityPlugins/thirdparties/SecurityEnvSDK.framework/SecurityEnvSDK(SecurityEnvSDK99999999.o)
+    /Users/.../阿里百川/WXFrameworks/SGMain.framework/SGMain(SGMain99999999.o)
+duplicate symbol '_OBJC_METACLASS_$_SGDataCollectionLock' in:
+    /Users/.../Pods/UMCSecurityPlugins/thirdparties/SecurityEnvSDK.framework/SecurityEnvSDK(SecurityEnvSDK99999999.o)
+    /Users/.../阿里百川/WXFrameworks/SGMain.framework/SGMain(SGMain99999999.o)
+

报错是说有重复类，解决的办法比较简单粗暴，就是把在Xcode里全文搜索 +-framework "SecurityEnvSDK"，接着全文替换为空字符串就可以了。

虽然解决这个问题的方式很简单，但是每次 pod install 后都要做一遍该操作，这就很无语了 。

那有什么办法可以让我们不用自己去做这个烦琐的事情呢？

# 改进

  1. 首先要搞清楚，上面的操作原理是怎么回事？其它很简单，就是将下面这两个文件中 OTHER_LDFLAGS 所在行的内容里，把 -framework "SecurityEnvSDK" 置为空字符串。
Pods/Target Support Files/Pods-项目名/Pods-项目名.debug.xcconfig
+Pods/Target Support Files/Pods-项目名/Pods-项目名.release.xcconfig
+
  1. 有什么办法可以让我们在适当的时候去执行这个置空字符串的操作？ +Cocoapods 提供了一个很好用的 Hook 就是 post_install，这个钩子的作用就是方便我们在执行 pod install 之后去做一些其它配置，这里我们就用它来搞事情。

Podfile 文件中使用的是 ruby 语言，ruby 执行终端命令的代码如下所示：

post_install do |installer|
+  # command = "echo 'hello world'"
+  command = "终端命令"
+  system(command)
+end
+

OK，现在开始搞事！

# 步骤

  1. 在项目的目录，即与Pods平级目录中，新建一个文件，名为 fix.py
.
+├── ...
+├── Podfile
+├── Podfile.lock
+├── Pods
+│   ├── ...
+│   └── ...
+└── fix.py
+
  1. 在 fix.py 中粘贴如下内容
# -*- coding: UTF-8 -*-
+import sys, os, getopt, codecs
+
+def get_current_file_name():
+    """获取当前文件名称"""
+    return os.path.split(__file__)[-1]
+
+def replace_all_str(file_path, for_str, to_str):
+    """
+    全文搜索替换或单行替换
+    :param file_path: 文件路径
+    :param for_str: 要被替换的内容
+    :param to_str: 替换之后的内容
+    """
+    if not os.path.exists(file_path):
+        # 文件不存在
+        print('文件不存在')
+        return
+    bak_file_path = file_path+".bak"
+    with codecs.open(file_path, 'r', encoding='utf-8') as f, codecs.open(bak_file_path, 'w', encoding='utf-8') as f_w:
+        lines = f.readlines()
+        for line in lines:
+            if "OTHER_LDFLAGS" in line and for_str in line:
+                line = line.replace(for_str, to_str)
+            f_w.write(line)
+
+    os.remove(file_path)
+    os.rename(bak_file_path, file_path)
+
+def throwParamError():
+    print("请正确输入命令： %s -p 项目名称" % get_current_file_name())
+    sys.exit(0)
+
+def main(argv):
+    project_name = ""
+    try:
+        opts, args = getopt.getopt(argv, "p:", ["project="])
+    except getopt.GetoptError:
+        throwParamError()
+    for opt, arg in opts:
+        # print("opt -- ", opt)
+        # print("arg -- ", arg)
+        if opt in ('-p', '--project'):
+            project_name = arg
+
+    if not len(project_name):
+        throwParamError()
+    
+    path_str = "Pods/Target Support Files/Pods-%s/Pods-%s.%s.xcconfig"
+    xcconfig_debug_path = path_str % (project_name, project_name, "debug")
+    xcconfig_release_path = path_str % (project_name, project_name, "release")
+    # print(xcconfig_debug_path)
+    # print(xcconfig_release_path)
+    be_fixed_str = '-framework "SecurityEnvSDK"'
+    replace_all_str(xcconfig_debug_path,  be_fixed_str, '')
+    replace_all_str(xcconfig_release_path,  be_fixed_str, '')
+    print("%s is fixed successfully" %project_name)
+
+if __name__ == "__main__":
+    main(sys.argv[1:])
+
  1. 打开 Podfile，在内容最后添加如下内容
post_install do |installer|
+  # 解决SecurityEnvSDK与SGMain的冲突问题
+  command = "python fix.py -p 项目名称"
+  system(command)
+end
+
  1. 执行pod install

好了，现在开始就又可以继续愉快的搬砖了~

# GitHub

相关代码文件可以到这里下载，如果觉得不错，不妨给个 Star 鼓励一下 +https://github.com/LinXunFeng/fix_confict_SecurityEnvSDK_SGMain (opens new window)

+ +
+
#iOS#Cocoapods
iOS - 解决Transporter一直卡正在验证的问题
iOS - 实现25秒完成测试包出包

+ ← + iOS - 实现25秒完成测试包出包→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/db2b0b/index.html b/pages/db2b0b/index.html new file mode 100644 index 000000000..fd11d637b --- /dev/null +++ b/pages/db2b0b/index.html @@ -0,0 +1,641 @@ + + + + + + 手撸一个简易Android数据库框架 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-11-27
目录

手撸一个简易Android数据库框架

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

众所周知，移动端（不管是Android还是iOS）使用的数据库是Sqlite，这种小型的数据库很适合移动端存储大量的数据，使用上也跟mysql基本无差，但官方提供的API在操作性方面真不咋的，你必须掌握一定程度的sql语句，否则将很难驾驭。所以，有很多第三方的数据库框架就开始流行，如：GreenDao、Litepal等。这些ORM数据库框架，可以帮助开发者节省大量编写数据库操作代码的时间，只需对对象进行赋值操作，便能作用到数据库上，方便我们开发更加复杂的业务逻辑。本篇的主题就是做一个简易的数据库框架，使用设计模式、泛型、注解、反射这些高级技巧来实现。

# 二、数据库常用操作

数据库操作无非就是增删改查（CRUD），而且一般操作数据库表的类称为Dao类，所以可以为这些Dao类抽取一个共同的接口：

public interface IBaseDao<M> {
+
+    Long insert(M entity);
+
+    Integer delete(M where);
+
+    Integer update(M entitiy, M where);
+
+    List<M> query(M where);
+
+    List<M> query(M where, String orderBy);
+
+    List<M> query(M where, String orderBy, Integer page, Integer pageCount);
+
+}
+

我们要做的数据库框架也是一个ORM框架，表现层不涉及任何sql语句，直接操作的是数据对象，但具体的数据类型在这个接口中并不清楚，所以使用泛型来表示。

# 三、Dao类工厂

一个程序，一般只有一个数据库，一个数据库中会包含多张表，例如用户表，权限表等，这就意味着，项目中，Dao类会有多个，因为数据库操作无非是CRUD，所以可以确定它们的结构相同，只是具体操作的表与字段不同（即数据类型不同），所以，使用“泛型+工厂”来生产这些Dao类最合适不过。下面先贴出Dao类工厂代码，再一一分析：

public class BaseDaoFactory {
+
+    private static String mDbPath;
+    private SQLiteDatabase mDatabase;
+
+    private static class Instance {
+        public static BaseDaoFactory INSTANCE = new BaseDaoFactory();
+    }
+
+    public static BaseDaoFactory getInstance() {
+        return Instance.INSTANCE;
+    }
+
+    // 初始化数据库位置
+    public static void init(String dbPath) {
+        mDbPath = dbPath;
+    }
+
+    public BaseDaoFactory() {
+        if (TextUtils.isEmpty(mDbPath)) {
+            throw new RuntimeException("在使用BaseDaoFactory之前，请调用BaseDaoFactory.init()初始化好数据库路径。");
+        }
+        // 打开数据库，得到数据库对象
+        mDatabase = SQLiteDatabase.openOrCreateDatabase(mDbPath, null);
+    }
+
+    public <T extends BaseDao<M>, M> T getDataHelper(Class<T> clazz, Class<M> entity) {
+        T baseDao = null;
+        try {
+            baseDao = clazz.newInstance();
+            baseDao.init(mDatabase, entity);
+        } catch (InstantiationException e) {
+            e.printStackTrace();
+        } catch (IllegalAccessException e) {
+            e.printStackTrace();
+        }
+        return baseDao;
+    }
+}
+

# 1、数据库位置

使用SQLiteDatabase，可以在任意位置创建或打开一个数据库，这样的好处是：如果，用SQLiteOpenHelper来创建数据库，默认会将数据库文件创建到/data/data/包名/databases目录下，当应用被删除时，数据库也将同应用一起被删除，有时我们会有这样的需求，在用户重装安装App时，可以使用之前的数据库信息，例如：UC浏览器的书签本地恢复功能。

// 初始化数据库位置
+public static void init(String dbPath) {
+    mDbPath = dbPath;
+}
+
+public BaseDaoFactory() {
+    if (TextUtils.isEmpty(mDbPath)) {
+        throw new RuntimeException("在使用BaseDaoFactory之前，请调用BaseDaoFactory.init()初始化好数据库路径。");
+    }
+    // 打开数据库，得到数据库对象
+    mDatabase = SQLiteDatabase.openOrCreateDatabase(mDbPath, null);
+}
+

本框架可以让开发者自定义数据库的存放位置，因为在构造函数中会使用到该路径对数据库进行创建，所以这里使用静态方法的方式，在Dao工厂实例化之前先对其（mDbPath）进行赋值。这种方式在很多第三方框架的源码中很是常见，一般在自定义的Application中对通过调用框架的init()方法对框架中必需的变量进行赋值。

# 2、工厂单例

该框架中的Dao类工厂只要一个就够了，所以需要用到单例模式，常见的单例模式有饿汉式和懒汉式，这里选用静态内部类单例模式，原因是什么呢？

# 1）饿汉式

饿汉式在类加载时就已经初始化好了，不管项目中是否使用，都会占用内存，虽然效率高，但开发中一般不用。

public class BaseDaoFactory {
+	private static BaseDaoFactory Instance = new BaseDaoFactory();
+    public static BaseDaoFactory getInstance() {
+        return Instance;
+    }
+}
+

# 2）懒汉式

懒汉式虽然解决了饿汉式的弊端，实现调用时创建单例，但线程不安全，当然我们可以使用双重检测机制来解决，但这样也降低了效率（至少第一次初始化时需要同步，降低了效率），是开发中最常见的单例实现方式。

public class BaseDaoFactory {
+	private static BaseDaoFactory mInstance;
+    public static BaseDaoFactory getInstance() {
+        if (mInstance == null) {
+            synchronized (BaseDaoFactory.class) {
+                if (mInstance == null) {
+                    mInstance = new BaseDaoFactory();
+                }
+            }
+        }
+        return mInstance;
+    }
+}
+

# 3）静态内部类单例

静态内部类单例综合了前面两者的优点，即调用时创建单例，效率高且没有线程安全问题。当在调用getInstance()方法创建工厂单例时，静态内部类Instance才会被加载，同时初始化内部类属性INSTANCE，即初始化外部类BaseDaoFactory对象（Dao工厂），因为该静态内部类只会加载一次，所以该INSTANCE对象也只会被创建一次。

private static class Instance {
+    public static BaseDaoFactory INSTANCE = new BaseDaoFactory();
+}
+
+public static BaseDaoFactory getInstance() {
+    return Instance.INSTANCE;
+}
+
+// 单例模式，一般会将构造函数私有化，以保证不会被外界初始化。
+private BaseDaoFactory() {
+   ...
+}
+

# 3、生产Dao类

Dao工厂会提供一个public方法来供外界获取需要的Dao类，而外界只需要传入具体Dao类和数据实体类对应的class即可。

public <T extends BaseDao<M>, M> T getDataHelper(Class<T> clazz, Class<M> entity) {
+    T baseDao = null;
+    try {
+        baseDao = clazz.newInstance();
+        baseDao.init(mDatabase, entity);
+    } catch (InstantiationException e) {
+        e.printStackTrace();
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    }
+    return baseDao;
+}
+

可能这部分代码比较迷的地方就是<T extends BaseDao<M>, M>了（先抛开方法体中的具体实现），其实这只是方法声明泛型的方式而已。我们知道，类上声明泛型很简单，只需要在类后面加上<T\>（字母随意）即可，如：

// 类上泛型可以声明多个
+public class Person<M,T> {
+    ...
+}
+

而方法上声明泛型跟类上声明泛型有些区别——泛型声明的位置不同，方法上的泛型需要在修饰符（public等）与返回值之间声明，如：

public <T> void eat(){
+    ...
+}
+

上面的代码不会报错，但一点意义都没有，因为泛型没被使用到，一般方法上声明的泛型可作为方法参数类型和返回值类型，如：

// 同样，方法泛型也可以声明多个
+public <T,M> T eat(T t, M m){
+    ...
+}
+

可以这样认为，默认泛型表示的是Object（编码时），有时我们需要更加精确泛型的类型，这可以通过extends办到，如：

public <T extends Person> void doSomething(T t){
+    ...
+}
+

这时，传入doSomething()的参数必须是Person的子类（Boy或Girl），且在编码时，可以在方法体中使用t调用Person中声明的方法，如eat()，如果不使用extends来指定泛型T的具体类型，那么在编码时，t会被认为是Object类型，也就没法调用eat()这类自定义的方法了。到这里，回头再看上面的代码，应该就不会迷了。

# 四、数据库操作封装

前面一开始的时候就已经为Dao类抽取了一个共同的接口，规范了Dao类的基本操作，而且，我们不想在具体的Dao类中直接操作数据库，所以，在这两者中间必须有一层来完成数据库操作，并对各操作方法进行封装，它就是BaseDao，以下是该类中可供外界调用的方法：

public abstract class BaseDao<M> implements IBaseDao<M> {
+    protected boolean init(SQLiteDatabase database, Class<M> entity) {
+        ...
+    }
+    @Override
+    public Long insert(M entity) {
+        ...
+    }
+    @Override
+    public Integer delete(M where) {
+        ...
+    }
+
+    @Override
+    public Integer update(M entitiy, M where) {
+        ...
+    }
+
+    @Override
+    public List<M> query(M where) {
+        ...
+    }
+
+    @Override
+    public List<M> query(M where, String orderBy) {
+        ...
+    }
+
+    @Override
+    public List<M> query(M where, String orderBy, Integer page, Integer pageCount) {
+        ...
+    }
+}
+

在框架设计中，要切记，不需要被外界（表现层）所知的方法或属性请尽量私有化，一来对框架安全，二来避免团队开发中不必要的冲突。因为BaseDao的init()方法只被DaoFactory调用，且两者均在同包下，故使用protected修饰。

# 1、自定义注解：TbName和TbField

在对BaseDao进行解析前，先来说说两个十分重要的注解——TbName和TbField。几乎市面上所有的ORM数据库框架，都会用到自定义注解来对一个数据实体进行描述，比如User类的类名对应表的表名，有可能是user，也有可能是t_user，那开发者就可以使用框架提供的注解（TbName）来进行自定义表名了，同理，类中的属性名对应表的字段名也是如此，不过对于表的初始化还需要知道表字段的长度，所以表字段注解（TbField）还多了一个length属性。

/**
+ * 表名注解
+ */
+@Target(ElementType.TYPE)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface TbName {
+    String value();
+}
+
+/**
+ * 表字段注解
+ */
+@Target(ElementType.FIELD)
+@Retention(RetentionPolicy.RUNTIME)
+public @interface TbField {
+    String value();
+    int length();
+}
+

一方面，BaseDao对TbName和TbField的解析是处于程序运行阶段，所以这2个注解必须是运行时可见，即Retention的值必须是RetentionPolicy.RUNTIME。 +另一方面，TbName是要注解在类上的，所以其Target的值是ElementType.TYPE；而TbField则是注解在类属性上的，所以其Target的值是ElementType.FIELD。

# 2、Dao类初始化

在Dao工厂中就已经使用了这个BaseDao的init()方法，来对Dao类进行一些通用的初始化工作，下面就来看看它都初始化了什么：

/**
+ * 初始化表操作对象，一般包括：创建表、获取表字段与类字段的映射关系
+ */
+protected boolean init(SQLiteDatabase database, Class<M> entity) {
+    mDatabase = database;
+    mEntityClass = entity;
+    
+    // 往后的操作必须是基于数据库已经打开的前提下
+    if (!database.isOpen()) {
+        return false;
+    }
+
+    // 获取表名
+    TbName tbName = entity.getAnnotation(TbName.class);
+    mTbName = tbName == null ? entity.getSimpleName() : tbName.value();
+
+    // 获取表映射字段
+    if (!genFieldMap()) {
+        return false;
+    }
+
+    // 创建数据库
+    if (!createTable(database)) {
+        return false;
+    }
+
+    return true;
+}
+

在这个init()方法中，可以看到，注解TbName率先被该框架使用到了，当开发者有使用该注解时，表名以TbName注解中的值为表名，否则以类名作为表名。

注解是“静态的”，在类加载时就已经固定了，也就是说运行时无法修改其值（javassist方式除外），所以，可以利用类的class对象，通过 getAnnotation(注解.class).注解属性() 这种方法也获取注解的属性值。

# 1）获取表字段与类字段的映射关系

我们知道，类的属性名可能会与表的字段名不同，而BaseDao中的很多后续操作都会跟这两者打交道，所以，在BaseDao的初始化过程中将这两者的关系使用Map进行保存，方便后续的各种操作。

private boolean genFieldMap() {
+    mFieldMap = new HashMap<>();
+    Field[] fields = mEntityClass.getFields();
+    if (fields == null || fields.length == 0) {
+        Log.e(TAG, "获取不到类中字段");
+        return false;
+    }
+    for (Field field : fields) {
+        field.setAccessible(true);
+        TbField tbField = field.getAnnotation(TbField.class);
+        mFieldMap.put(tbField == null ? field.getName() : tbField.value(), field);
+    }
+    return true;
+}    
+

反射中的几个小知识点：

  • Field[] fields = mEntityClass.getFields();// 得到类中的public字段，包括父类。
  • Field[] fields = mEntityClass.getDeclaredFields();// 得到类中声明的字段（不管是public、protected、private），不包括父类。
  • field.setAccessible(true);// 将私有属性或final属性可以被访问

考虑到数据实体类可能会使用继承的方式来拓展父类，即会用到父类的属性值，所以使用getFields()方法，但代价就是实体类中的属性必须是public的。

# 2）创建表

Dao类的初始化工作也包括了表的创建。一方面，因为不能在每次创建并初始化Dao类时都去重新创建一次表，所以这里就用到了sql语句中的 if not exists 关键字来避免重复创建表的问题。另一方面，其实创建表的sql语句是一种模板，两个不同的表在使用sql创建时，无非就是表名、字段名、字段类型和字段长度不同，而恰好，这些不同的元素可以使用反射+TbField注解来获取，从而实现sql语句的动态拼接，结合上一步得到的表字段与类字段的映射关系（mFieldMap），代码可以这么写：

/**
+ * 创建表（可以被子类重写，方便灵活扩展）
+ */
+protected boolean createTable(SQLiteDatabase database) {
+    StringBuilder sb = new StringBuilder();
+    for (Map.Entry<String, Field> entry : mFieldMap.entrySet()) {
+        String columnName = entry.getKey();
+        Field field = entry.getValue();
+        TbField tbField = field.getAnnotation(TbField.class);
+        int length = tbField == null ? 255 : tbField.length();
+        String type = "";
+        Class<?> fieldType = field.getType();
+        if (fieldType == String.class) {
+            type = "varchar";
+        } else if (fieldType == int.class || fieldType == Integer.class) {
+            type = "int";
+        } else if (fieldType == double.class || fieldType == Double.class) {
+            type = "double";
+        } else if (fieldType == float.class || fieldType == Float.class) {
+            type = "float";
+        }
+        if (TextUtils.isEmpty(type)) {
+            Log.e(TAG, type.getClass().getName() + "是不支持的字段");
+        } else {
+            sb.append(columnName + " " + type + "(" + length + "),");
+        }
+    }
+    sb.deleteCharAt(sb.lastIndexOf(","));
+    String s = sb.toString();
+    if (TextUtils.isEmpty(s)) {
+        Log.e(TAG, "获取不到表字段信息");
+        return false;
+    }
+    String sql = "create table if not exists " + mTbName + " (" + s + ") ";
+    Log.e(TAG, sql);
+    database.execSQL(sql);
+    return true;
+}
+

到这里，Dao类的初始化工作就完了，下面进行CRUD的封装。

# 3、增

我们知道，若使用原生的SQLiteDatabase将数据插入到表中，需要将数据先封装成ContentValues对象，再调用其insert()方法来执行数据插入操作。那么，现在我们拥有了一个数据实体，要做的，就是将这个数据实体转成ContentValues对象，再使用SQLiteDatabase的insert()方法来执行插入，可以说我们就是对SQLiteDatabase进行封装，总结上面的理论，代码分如下三步：

  1. 将对象中的属性转成键值对values。
  2. 将键值对values转成ContentValues对象。
  3. 使用SQLiteDatabase的insert()方法进行数据插入。

结合mFieldMap，实现表数据插入的代码可以这么写：

@Override
+public Long insert(M entity) {
+    try {
+        Map<String, String> values = getValues(entity);
+        ContentValues cv = getContentValues(values);
+        return mDatabase.insert(mTbName, null, cv);
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    }
+    return 0L;
+}
+
+/**
+ * 将对象中的属性转成键值对（列名--值）
+ */
+private Map<String, String> getValues(M entity) throws IllegalAccessException {
+    Map<String, String> result = new HashMap<>();
+    for (Map.Entry<String, Field> entry : mFieldMap.entrySet()) {
+        Object value = entry.getValue().get(entity);
+        result.put(entry.getKey(), value == null ? "" : value.toString());
+    }
+    return result;
+}
+
+/**
+ * 将键值对转成ContentValues
+ */
+private ContentValues getContentValues(Map<String, String> values) {
+    ContentValues cv = new ContentValues();
+    for (Map.Entry<String, String> val : values.entrySet()) {
+        cv.put(val.getKey(), val.getValue());
+    }
+    return cv;
+}
+

# 4、删

要实现删除表数据功能，需要使用到SQLiteDatabase的delete()方法，其中whereClause和whereArgs是关键。又因为该框架是一个ORM框架，在表现层需要将删除条件使用数据实体进行封装，而框架内部则是对传入的数据实体进行解析，将对象中属性值不为null的属性拿出来作为删除的条件（这也意味着常见的数据类型不能用了，如int，但可以使用Integer来替换），可分为两步：

  1. 将对象中的属性转成键值对whereMap。
  2. 使用Condition类的构造函数对whereMap中value不为null的键值对取出来拼接。

综上所述，BaseDao的表数据删除实现代码如下：

@Override
+public Integer delete(M where) {
+    try {
+        Map<String, String> whereMap = getValues(where);
+        Condition condition = new Condition(whereMap);
+        return mDatabase.delete(mTbName, condition.whereClause, condition.whereArgs);
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    }
+    return 0;
+}
+
+class Condition {
+    public Condition(Map<String, String> whereMap) {
+
+        StringBuilder sb = new StringBuilder();
+        List<String> list = new ArrayList<>();
+
+        for (Map.Entry<String, String> entry : whereMap.entrySet()) {
+            if (!TextUtils.isEmpty(entry.getValue())) {
+                sb.append("and " + entry.getKey() + "=? ");
+                list.add(entry.getValue());
+            }
+        }
+        this.whereClause = sb.delete(0, 4).toString();
+        this.whereArgs = list.toArray(new String[list.size()]);
+    }
+
+    String whereClause;
+    String[] whereArgs;
+}
+

whereClause是删除条件，是个字符串，需要使用?来作为占位符，多个条件需要使用and关键字连接，如：name=? and password=?。
+whereArgs则是对whereClause中占位符进行数值替换的字体串数组，如：new String[]{"LQR","123456"}。

# 5、改

通过前面对表数据增和删的代码实现，更新数据部分就比较好理解了，因为SQLiteDatabase的update()方法需要用到的参数有ContentValues对象，whereClause和whereArgs，其实就是将增和删的代码实现相加起来而已，这就不多废话，实现的代码如下：

@Override
+public Integer update(M entitiy, M where) {
+    try {
+        Map<String, String> values = getValues(entitiy);
+        ContentValues cv = getContentValues(values);
+
+        Map<String, String> whereMap = getValues(where);
+        Condition condition = new Condition(whereMap);
+
+        return mDatabase.update(mTbName, cv, condition.whereClause, condition.whereArgs);
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    }
+    return 0;
+}
+

# 6、查

终于到了CRUD的最后一步：数据查询(Retrieve)。可以说这是数据库操作中最重要且使用频率最高的一部分了，同样的，表数据查询还是用到了SQLiteDatabase，使用其query()方法来进行表数据查询，它的参数也比较多，这里就只封装三种查询：

  1. 将符合条件的表数据全部查询出来。
  2. 将符合条件的表数据查询出来，并可以排序。
  3. 将符合条件的表数据查询出来，除了可以排序，还可以分页查询。

需要注意的就是分页查询，因为SQLiteDatabase的第一页是从0开始的，而我希望的是表现层从1开始，所以框架代码中会对其进行自减处理。这三个方法的代码具体实现如下：

@Override
+public List<M> query(M where) {
+    return query(where, null);
+}
+
+@Override
+public List<M> query(M where, String orderBy) {
+    return query(where, orderBy, null, null);
+}
+
+@Override
+public List<M> query(M where, String orderBy, Integer page, Integer pageCount) {
+    List<M> list = null;
+    Cursor cursor = null;
+    try {
+        String limit = null;
+        if (page != null && pageCount != null) {
+            int startIndex = --page;
+            limit = (startIndex < 0 ? 0 : startIndex) + "," + pageCount;
+        }
+
+        if (where != null) {
+            Map<String, String> whereMap = getValues(where);
+            Condition condition = new Condition(whereMap);
+            cursor = mDatabase.query(mTbName, null, condition.whereClause, condition.whereArgs, null, null, orderBy, limit);
+        } else {
+            cursor = mDatabase.query(mTbName, null, null, null, null, null, orderBy, limit);
+        }
+
+		// 将查询出来的表数据转成对象集合
+        list = getDataList(cursor);
+    } catch (IllegalAccessException e) {
+        e.printStackTrace();
+    } catch (InstantiationException e) {
+        e.printStackTrace();
+    } finally {
+        if (cursor != null) {
+            cursor.close();
+            cursor = null;
+        }
+    }
+    return list;
+}
+
+/**
+ * 通过游标，将表中数据转成对象集合
+ */
+private List<M> getDataList(Cursor cursor) throws IllegalAccessException, InstantiationException {
+    if (cursor != null) {
+        List<M> result = new ArrayList<>();
+        // 遍历游标，获取表中一行行的数据
+        while (cursor.moveToNext()) {
+
+            // 创建对象
+            ParameterizedType pt = (ParameterizedType) this.getClass().getGenericSuperclass();// 获取当前new的对象的 泛型的父类 类型
+            Class<M> clazz = (Class<M>) pt.getActualTypeArguments()[0];// 获取第一个类型参数的真实类型
+            M item = clazz.newInstance();
+
+            // 遍历表字段，使用游标一个个取值，赋值给新创建的对象。
+            Iterator<String> iterator = mFieldMap.keySet().iterator();
+            while (iterator.hasNext()) {
+                // 找到表字段
+                String columnName = iterator.next();
+                // 找到表字段对应的类属性
+                Field field = mFieldMap.get(columnName);
+
+                // 根据类属性类型，使用游标获取表中的值
+                Object val = null;
+                Class<?> fieldType = field.getType();
+                if (fieldType == String.class) {
+                    val = cursor.getString(cursor.getColumnIndex(columnName));
+                } else if (fieldType == int.class || fieldType == Integer.class) {
+                    val = cursor.getInt(cursor.getColumnIndex(columnName));
+                } else if (fieldType == double.class || fieldType == Double.class) {
+                    val = cursor.getDouble(cursor.getColumnIndex(columnName));
+                } else if (fieldType == float.class || fieldType == Float.class) {
+                    val = cursor.getFloat(cursor.getColumnIndex(columnName));
+                }
+
+                // 反射给对象属性赋值
+                field.set(item, val);
+            }
+            // 将对象添加到集合中
+            result.add(item);
+        }
+        return result;
+    }
+    return null;
+}
+

至此，这个简易的数据库框架就写好了，下面来测试一下。

# 五、测试

Activity的布局很简单，我就不贴了，就是几个简单的按钮而已。

# 1、测试前准备

# 1）User

一个简单的数据实体类，没什么好说的，看代码。

@TbName("tb_user")
+public class User {
+
+    @TbField(value = "tb_name", length = 30)
+    public String username;
+
+    @TbField(value = "tb_password", length = 20)
+    public String password;
+
+    @TbField(value = "tb_age", length = 11)
+    public Integer age;
+
+    public User() {
+    }
+
+    public User(String username, String password) {
+        this.username = username;
+        this.password = password;
+    }
+
+    public User(String username, String password, int age) {
+        this.username = username;
+        this.password = password;
+        this.age = age;
+    }
+
+    public String getUsername() {
+        return username;
+    }
+
+    public void setUsername(String username) {
+        this.username = username;
+    }
+
+    public String getPassword() {
+        return password;
+    }
+
+    public void setPassword(String password) {
+        this.password = password;
+    }
+
+    public Integer getAge() {
+        return age;
+    }
+
+    public void setAge(Integer age) {
+        this.age = age;
+    }
+
+    @Override
+    public String toString() {
+        return "[username:" + this.username + ", password:" + this.getPassword() + ", age:" + this.getAge() + "]";
+    }
+}
+

# 2）UserDao

可以看到这个UserDao中其实没什么代码，但它可以通过重写父类createTable()方法来更灵活的创建表，或自定义一些其它的方法来扩展其父类的功能。

public class UserDao extends BaseDao<User> {
+    // @Override
+    // protected boolean createTable(SQLiteDatabase database) {
+    // database.execSQL("create table if not exists t_user(tb_name varchar(30),tb_password varchar(10))");
+    // return super.createTable(database);
+    // }
+}
+

# 2、功能测试

# 1）初始化

这个框架需要指定一个数据库位置，我们在Activity的onCreate()方法中调用框架的init()方法来指定，建议最好放到自定义的Application中。

@Override
+protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_customer_db_frame);
+    BaseDaoFactory.init(new File(getFilesDir(), "csdn_lqr.db").getAbsolutePath());
+    mUserDao = BaseDaoFactory.getInstance().getDataHelper(UserDao.class, User.class);
+    mUser = new User("CSDN_LQR", "123456", 10);
+}
+

# 2）增

往user表中插入一条username为"CSDN_LQR"，password为"123456"的数据：

public void insert(View view) {
+    Long insert = mUserDao.insert(mUser);
+    Toast.makeText(getApplicationContext(), "添加了" + (insert != -1 ? 1 : 0) + "条数据", Toast.LENGTH_SHORT).show();
+}
+

# 3）删

从user表中删除一条username为"CSDN_LQR"的数据：

public void delete(View view) {
+    User where = new User();
+    where.setUsername("CSDN_LQR");
+    Integer delete = mUserDao.delete(where);
+    Toast.makeText(getApplicationContext(), "删除了" + delete + "条数据", Toast.LENGTH_SHORT).show();
+}
+

# 4）改

将user表中username为"CSDN_LQR"的数据进行修改：

public void update(View view) {
+    User user = new User("LQR_CSDN", "654321", 9);
+
+    User where = new User();
+    where.setUsername("CSDN_LQR");
+
+    Integer update = mUserDao.update(user, where);
+    Toast.makeText(getApplicationContext(), "修改了" + update + "条数据", Toast.LENGTH_SHORT).show();
+}
+

# 5）查

# a. 将符合条件的表数据全部查询出来

将user表中所有username为"CSDN_LQR"的数据全部查询出来：

public void query1(View view) {
+    User where = new User();
+    where.setUsername("CSDN_LQR");
+
+    List<User> list = mUserDao.query(where);
+    int query = list == null ? 0 : list.size();
+    Toast.makeText(getApplicationContext(), "查出了" + query + "条数据", Toast.LENGTH_SHORT).show();
+    for (User user : list) {
+        System.out.println(user);
+    }
+}
+

# b. 将符合条件的表数据查询出来，并排序

将user表中的数据按age的正反序分别查询出来：

public void query2(View view) {
+    List<User> list = mUserDao.query(null, "tb_age asc");
+    int query = list == null ? 0 : list.size();
+    Toast.makeText(getApplicationContext(), "查出了" + query + "条数据", Toast.LENGTH_SHORT).show();
+    for (User user : list) {
+        System.out.println(user);
+    }
+}
+
+public void query3(View view) {
+    List<User> list = mUserDao.query(null, "tb_age desc");
+    int query = list == null ? 0 : list.size();
+    Toast.makeText(getApplicationContext(), "查出了" + query + "条数据", Toast.LENGTH_SHORT).show();
+    for (User user : list) {
+        System.out.println(user);
+    }
+}
+

# c. 将符合条件的表数据查询出来，并分页。

只查询user表中的前2条数据：

public void query4(View view) {
+    User where = new User();
+
+    List<User> list = mUserDao.query(where, null, 1, 2);
+    int query = list == null ? 0 : list.size();
+    Toast.makeText(getApplicationContext(), "查出了" + query + "条数据", Toast.LENGTH_SHORT).show();
+    for (User user : list) {
+        System.out.println(user);
+    }
+}
+

大成功，撒花。

# 最后贴下Demo地址：

https://github.com/GitLqr/SimpleDbFrame (opens new window)

+ +
+
#注解#数据库
Android面向切面编程（AOP）
使用注解打造自己的IOC框架

+ ← + 使用注解打造自己的IOC框架→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/dd574d/index.html b/pages/dd574d/index.html new file mode 100644 index 000000000..43314a933 --- /dev/null +++ b/pages/dd574d/index.html @@ -0,0 +1,279 @@ + + + + + + Kotlin - 改良设计模式 - 构建者模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-12
目录

Kotlin - 改良设计模式 - 构建者模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 构建者模式 +
    • 作用：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。
    • 核心操作：私有化复杂对象（Product）的类构造器，设计并创建 Builder 类。

# 二、使用构建者模式

  • 例子：组装电脑
  • 重点：多构造器、构建者模式

应用开发过程中，总会遇到创建复杂对象（Product）的情况，以组装电脑为例，从硬件到软件，需要配置的参数非常多，即构造器需要传入 n 个参数，于是我们可能会写出如下代码：

/**
+ * 电脑类
+ *
+ * @author GitLqr
+ */
+class Computer(
+    val mainboard: String, // 主板
+    val cpu: String, // 处理器
+    val ram: String, // 内存
+    val battery: String, // 电源
+    val gpu: String?, // 显卡
+    val hardDisk: String?, // 硬盘
+    val networkInterface: String?, // 网线接口
+    val cdDriver: String?, // 光驱
+    val os: String?, // 系统
+    val chassis: String?, // 机箱
+    val mouse: String?, // 鼠标
+    val keyboard: String?, // 键盘
+    val monitor: String? // 显示器
+)
+
+// 使用
+val nbComputer = Computer(
+    "超微X8QB6-F", "Intel Xeon E7-8870", "海盗船(CORSAIR) 复仇者LPX DDR4 2133 64GB 7000",
+    "西门子豪华供电柜", "Leadtek/丽台Quadro Plex 7000", "WD_BLACK SN850 2T",
+    "Intel/英特尔 万兆光纤网卡 EXPX9501AFXLR", "ThinkPad 43N3215 Blu-ray Burner Ultrabay",
+    "Windows 11", "游戏悍将太极施洛华世奇", "RAPOO雷柏 3710 2.4G激光无线鼠标",
+    "Optimus Maximus 多功能 概念式键盘", "Sharp/夏普 LB-1085 108英寸 FULL HD专业液晶显示器"
+)
+

但是并不是所有的参数都是必须的，在 Java 中，我们一般会通过 重载构造器 来减少对象创建时需要传入的参数个数，在 Kotlin 中，重载构造器 就是定义次级构造器：

/**
+ * 电脑类（重载构造器）
+ *
+ * @author GitLqr
+ */
+class Computer(
+    val mainboard: String, // 主板
+    val cpu: String, // 处理器
+    val ram: String, // 内存
+    val battery: String, // 电源
+    val gpu: String?, // 显卡
+    val hardDisk: String?, // 硬盘
+    val networkInterface: String?, // 网线接口
+    val cdDriver: String?, // 光驱
+    val os: String?, // 系统
+    val chassis: String?, // 机箱
+    val mouse: String?, // 鼠标
+    val keyboard: String?, // 键盘
+    val monitor: String? // 显示器
+) {
+    // 次构造器需要调用主构造器传参
+    constructor(mainboard: String, cpu: String, ram: String, battery: String) :
+            this(mainboard, cpu, ram, battery, null, null, null, null, null, null, null, null, null)
+}
+
+// 使用
+val simpleComputer = Computer("超微X8QB6-F", "Intel Xeon E7-8870", "海盗船(CORSAIR) 复仇者LPX DDR4 2133 64GB 7000", "西门子豪华供电柜")
+

但是 重载构造器 这种方案并不好，一旦重载的多了，代码就会变得很难维护，于是，在 Java 中，对于创建复杂对象这种情景，一般会使用 构建者模式 来处理，在使用 构建者模式 时需要遵循以下几点套路：

  • Product：私有化复杂对象的类构造器（确保使用者无法直接通过构造器创建实例）
  • Builder： +
    • 必传参数 通过 构造器 传入
    • 可选参数 通过一系列 Setter 传入
    • 提供一个 build() 方法返回一个 Product 对象

下面我们就用 构建者模式 来改造上面的代码:

/**
+ * 电脑类（构建者模式）
+ *
+ * @author GitLqr
+ */
+class Computer private constructor( // 私有化复杂对象的类构造器
+    val mainboard: String, // 主板
+    val cpu: String, // 处理器
+    val ram: String, // 内存
+    val battery: String, // 电源
+    val gpu: String?, // 显卡
+    val hardDisk: String?, // 硬盘
+    val networkInterface: String? // 网线接口
+    ...
+) {
+    // 【必传参数】通过 构造器 传入
+    class Builder(val mainboard: String, val cpu: String, val ram: String, val battery: String) {
+        var gpu: String? = null
+        var hardDisk: String? = null
+        var networkInterface: String? = null
+        ...
+
+        fun setGpu(gpu: String): Builder {
+            this.gpu = gpu
+            return this
+        }
+
+        fun setHardDisk(hardDisk: String): Builder {
+            this.hardDisk = hardDisk
+            return this
+        }
+
+        fun setNetworkInterface(networkInterface: String): Builder {
+            this.networkInterface = networkInterface
+            return this
+        }
+
+        ...
+
+        // 别忘了，还要有一个 build() 方法，用来创建复杂对象并返回
+        fun build(): Computer {
+            return Computer(mainboard, cpu, ram, battery, gpu, hardDisk, networkInterface, ...)
+        }
+    }
+}
+
+// 使用
+val computer =
+    Computer.Builder("超微X8QB6-F", "Intel Xeon E7-8870", "海盗船(CORSAIR) 复仇者LPX DDR4 2133 64GB 7000", "西门子豪华供电柜")
+        .setGpu("Leadtek/丽台Quadro Plex 7000")
+        .setHardDisk("WD_BLACK SN850 2T")
+        .setNetworkInterface("Intel/英特尔 万兆光纤网卡 EXPX9501AFXLR")
+        .build()
+

总结一下 构建者模式 的优缺点：

  • 优点： +
    • 结合 链式调用 设计，代码上更加美观
    • 对于可选参数的设置，更加语义化
  • 缺点： +
    • 当可选参数比较多时，Builder 代码比较冗长
    • 在使用 Builder 时可能会忘记 build() 方法的调用
    • 在创建 Product 对象之前，必须先创建 Builder 对象，会增加额外的开销

# 三、改良构建者模式

  • 例子：组装电脑
  • 重点：构建者模式本质上是模拟了具名的可选参数

Kotlin 作为更好的 Java，拥有更多现代语言的特性，具名可选参数 就是众多特性之一，我们完全可以使用这个特性来改良（或者说是取代）构建者模式。

Kotlin 的 具名可选参数 有以下特点：

  • 在具体化一个参数的取值时，可以通过带上它的参数名，而不是它在所有参数中的位置决定
  • 由于参数可以设置默认值，这允许我们可以只给出部分参数的取值，而不必是所有的参数

下面我们用 Kotlin 的 具名可选参数 来改造上面的代码：

/**
+ * 电脑类（构建者模式）改良：带默认值的具名可选参数
+ *
+ * @author GitLqr
+ */
+class Computer(
+    val mainboard: String, // 主板
+    val cpu: String, // 处理器
+    val ram: String, // 内存
+    val battery: String, // 电源
+    val gpu: String? = null, // 显卡
+    val hardDisk: String? = null, // 硬盘
+    val networkInterface: String? = null, // 网线接口
+    val cdDriver: String? = null, // 光驱
+    val os: String? = null, // 系统
+    val chassis: String? = null, // 机箱
+    val mouse: String? = null, // 鼠标
+    val keyboard: String? = null, // 键盘
+    val monitor: String? = null // 显示器
+)
+
+// 使用
+val computer = Computer(
+    "超微X8QB6-F", "Intel Xeon E7-8870", "海盗船(CORSAIR) 复仇者LPX DDR4 2133 64GB 7000", "西门子豪华供电柜",
+    gpu = "Leadtek/丽台Quadro Plex 7000",
+    os = "Windows 11",
+    mouse = "RAPOO雷柏 3710 2.4G激光无线鼠标",
+    keyboard = "Optimus Maximus 多功能 概念式键盘",
+    monitor = "Sharp/夏普 LB-1085 108英寸 FULL HD专业液晶显示器"
+)
+

总结一下 具名可选参数 的优点：

  • 代码简洁优雅，无论是 Product 的类结构，或者是创建一个 Product 实例
  • 创建 Product 实例时，显式指定参数名即可，无须按顺序传入
  • 所有参数均使用 val 声明，相比 Builder 中使用 var 更加安全

# 四、对参数进行约束

构建者模式还有另一个作用，就是在 build() 方法中可以对参数进行约束，比如，如果一台电脑有指定操作系统（os），可是它没有硬盘（hardDisk），这显然是不对的，若使用构建者模式，则可以在 build() 方法中做如下条件约束：

/**
+ * 构建者模式：在 build() 方法中对参数进行约束、校验
+ *
+ * @author GitLqr
+ */
+class Computer private constructor( ... ) {
+    class Builder( ... ) {
+        ...
+        fun build(): Computer {
+            if (os != null && hardDisk == null) {
+                throw IllegalArgumentException("没有硬盘安装不了操作系统")
+            }
+            return Computer(...)
+        }
+    }
+}
+

那么改用 具名可选参数 这种方案之后，如果需要给参数添加约束条件时该怎么办呢？可以在 init 代码块中进行约束条件判断，这时顺便介绍一下 Kotlin 提供的 require() 方法，相当于是 Java 中的 assert：

/**
+ * 具名可选参数：在 init{} 代码块中对参数进行约束、校验
+ *
+ * @author GitLqr
+ */
+class Computer(
+    val mainboard: String, // 主板
+    val cpu: String, // 处理器
+    val ram: String, // 内存
+    val battery: String, // 电源
+    val gpu: String? = null, // 显卡
+    val hardDisk: String? = null, // 硬盘
+    val networkInterface: String? = null, // 网线接口
+    val cdDriver: String? = null, // 光驱
+    val os: String? = null, // 系统
+    val chassis: String? = null, // 机箱
+    val mouse: String? = null, // 鼠标
+    val keyboard: String? = null, // 键盘
+    val monitor: String? = null // 显示器
+) {
+    init {
+
+        // if (os != null && hardDisk == null) {
+        //     throw IllegalArgumentException("没有硬盘安装不了操作系统")
+        // }
+
+        require(!(os != null && hardDisk == null)) {
+            "没有硬盘安装不了操作系统"
+        }
+    }
+}
+

所以，综上所述，在 Kotlin 中，大可不必使用构建者模式~

《Effective Java》中是这样介绍构建者模式的：本质上 builder 模式模拟了具名的可选参数，就像 Ada 和 Python 中的一样。

+ +
+
#设计模式#构建者模式
Kotlin - 改良设计模式 - 工厂模式
Kotlin - 改良设计模式 - 观察者模式

+ ← + Kotlin - 改良设计模式 - 观察者模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/defa2f/index.html b/pages/defa2f/index.html new file mode 100644 index 000000000..000caa140 --- /dev/null +++ b/pages/defa2f/index.html @@ -0,0 +1,219 @@ + + + + + + Kotlin - 常见高阶函数 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-02-02
目录

Kotlin - 常见高阶函数

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# forEach

高阶函数 forEach 是可迭代对象的扩展方法，接收函数类型是 (T) -> Unit 的参数 action，forEach 会将 action 这个函数作用于可迭代对象中的每个元素，这是源码：

/**
+ * Performs the given [action] on each element.
+ */
+@kotlin.internal.HidesMembers
+public inline fun <T> Iterable<T>.forEach(action: (T) -> Unit): Unit {
+    for (element in this) action(element)
+}
+

根据 forEach 的入参要求，我们给其传递一个 lambda 表达式或是函数引用：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8)
+    // list.forEach { it -> println(it) } // it可以省略
+    list.forEach { println(it) }
+    list.forEach(::println)
+    list.forEachIndexed { index, i -> println("index=$index, value=$i") }
+}
+

forEachIndexed 相比 forEach 只是多了索引 index。

# map

高阶函数 map 也是可迭代对象的扩展方法，根据 map 的源码与注释，我们知道 map 接收一个类型是 (T) -> R 的参数 transform，map 会将 transform 作用于可迭代对象中的每个元素，并最终返回一个新的集合 List：

/**
+ * Returns a list containing the results of applying the given [transform] function
+ * to each element in the original collection.
+ *
+ * @sample samples.collections.Collections.Transformations.map
+ */
+public inline fun <T, R> Iterable<T>.map(transform: (T) -> R): List<R> {
+    return mapTo(ArrayList<R>(collectionSizeOrDefault(10)), transform)
+}
+

借助 map 的功能，我们可以将一个数组  “映射” 成另一个数组，这在日常开发很有用：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8)
+
+    // 将int数组中的元素经过某种运算形成一个新的int数组
+    val newList = list.map { it * 2 + 3 }
+    newList.forEach(::println)
+
+    // 将int转成double
+    val newList2 = list.map(Int::toDouble) // (Int) -> Double
+    newList2.forEach(::println)
+}
+

注意：toDouble()是 Int 类中的一个方法，在函数引用部分已经讲过，当使用 类名::方法名 这种方式引用一个成员方法时，会自动在函数类型的参数列表第 1 位多出一个接收者 Receiver，用于接收类实例对象 ，刚好 toDouble()没有参数列表，因此 Int::toDouble 对应的函数类型是 (Int) -> Double，符合高阶函数 map 的参数要求。

# flatMap

高阶函数 flatMap 比 map 高一个维度，可以将可迭代对象中的每个可迭代对象进行处理，最终返回一个 扁平化 的可迭代对象，注意参数 transform 的函数类型是 (T) -> Iterable<R>：

/**
+ * Returns a single list of all elements yielded from results of [transform] function being invoked on each element of original collection.
+ *
+ * @sample samples.collections.Collections.Transformations.flatMap
+ */
+public inline fun <T, R> Iterable<T>.flatMap(transform: (T) -> Iterable<R>): List<R> {
+    return flatMapTo(ArrayList<R>(), transform)
+}
+

什么是 扁平化 ，直观的说，就是胖变瘦，多维变一维：

fun main(args: Array<String>) {
+    val list = listOf(
+        8..10,
+        1..3,
+        98..100
+    )
+    val flatList = list.flatMap { it } // it->it，这里同时也是 (Iterable) -> Iterable
+    flatList.forEach(::println) // 这时的 flatList 就相当于 [8,9,10,1,2,3,98,99,100]
+}
+

flatMap 除了 扁平化 这个特性外，也拥有 map 的特性，可以将可迭代对象中的元素进行转换处理：

fun main(args: Array<String>) {
+    val list = listOf(
+        8..10,
+        1..3,
+        98..100
+    )
+    val flatList2 = list.flatMap { intRange ->
+        intRange.map { intElement -> "No. $intElement " }　// 把Int转成String
+    }
+    flatList2.forEach(::print) // No. 8 No. 9 No. 10 No. 1 No. 2 No. 3 No. 98 No. 99 No. 100
+}
+

# filter

高阶函数 filter 可以将可迭代对象进行过滤，只有满足 predicate 过滤条件的元素(即 return true)才会被 "留下"：

/**
+ * Returns a list containing only elements matching the given [predicate].
+ *
+ * @sample samples.collections.Collections.Filtering.filter
+ */
+public inline fun <T> Iterable<T>.filter(predicate: (T) -> Boolean): List<T> {
+    return filterTo(ArrayList<T>(), predicate)
+}
+

我们可以使用 filter 过滤出数组中的奇数：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8)
+    val newList = list.filter { it % 2 == 1 }
+    newList.forEachIndexed { index, i -> print(if (index > 0) " $i" else i) } // 1 3 5 7
+}
+

# takeWhile

高阶函数 takeWhile 会在遇到第一个不符合条件的元素时就结束取数据，留下前面的作为新的集合返回：

/**
+ * Returns a list containing first elements satisfying the given [predicate].
+ *
+ * @sample samples.collections.Collections.Transformations.take
+ */
+public inline fun <T> Iterable<T>.takeWhile(predicate: (T) -> Boolean): List<T> {
+    val list = ArrayList<T>()
+    for (item in this) {
+        if (!predicate(item))
+            break
+        list.add(item)
+    }
+    return list
+}
+

我们可以使用 takeWhile 筛选出前面满足条件的元素：

fun main(args: Array<String>) {
+    val list = listOf(1, 1, 2, 3, 5, 8, 13, 21)
+
+    var newList = list.takeWhile { it % 2 == 1 } // 筛选出前面的奇数
+    newList.forEachIndexed { index, i -> print(if (index > 0) " $i" else i) } // 1 1
+
+    newList = list.takeWhile { it < 5 } // 筛选出前面小于5的数
+    newList.forEachIndexed { index, i -> print(if (index > 0) " $i" else i) } // 1 1 2 3
+}
+

# reduce

高阶函数 reduce 会从第一个元素开始累加，并从左到右将 operation 函数应用于当前累加值和每个元素：

/**
+ * Accumulates value starting with the first element and applying [operation] from left to right to current accumulator value and each element.
+ *
+ * @sample samples.collections.Collections.Aggregates.reduce
+ */
+public inline fun <S, T : S> Iterable<T>.reduce(operation: (acc: S, T) -> S): S {
+    val iterator = this.iterator()
+    if (!iterator.hasNext()) throw UnsupportedOperationException("Empty collection can't be reduced.")
+    var accumulator: S = iterator.next()
+    while (iterator.hasNext()) {
+        accumulator = operation(accumulator, iterator.next())
+    }
+    return accumulator
+}
+

我们可以用 reduce 来处理一些累加的操作，如计算 1 到 8 之间所有的数进行求和：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8)
+    val result = list.reduce { acc, i -> acc + i }
+    println(result) // 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 = 36
+}
+

# fold

高阶函数 fold 跟 reduce 差不多，只是 fold 多了一个初始值，后续处理与 reduce 一样：

/**
+ * Accumulates value starting with [initial] value and applying [operation] from left to right to current accumulator value and each element.
+ */
+public inline fun <T, R> Iterable<T>.fold(initial: R, operation: (acc: R, T) -> R): R {
+    var accumulator = initial
+    for (element in this) accumulator = operation(accumulator, element)
+    return accumulator
+}
+

我们可以 fold 来计算在 100 的基础上，再累加 1 到 8 的和：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6, 7, 8)
+    val result = list.fold(100, { acc, i -> acc + i })
+    println(result) // 100 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 = 37
+}
+
+ +
+
#forEach#map#flatMap#filter#reduce#fold#takeWhile
Kotlin - 高阶函数与函数引用
Kotlin - 作用域函数

+ ← + Kotlin - 作用域函数→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/df8033/index.html b/pages/df8033/index.html new file mode 100644 index 000000000..71fc88806 --- /dev/null +++ b/pages/df8033/index.html @@ -0,0 +1,181 @@ + + + + + + iOS - 实现UINavigation全屏滑动返回(二) | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - 实现UINavigation全屏滑动返回(二)

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 回顾

在 iOS - 实现UINavigation全屏滑动返回(一) 中我们实现了滑动返回的功能，但不是全屏滑动返回，得在左侧边缘轻扫才能滑动返回~UINavigationController自带的只能在边缘轻扫才能滑动返回，这用户体验是不好的，接下来实现全屏滑动返回!

# 思路

既然自带的滑动返回只能是在边缘，那我们能不能修改使它触摸范围变大甚至全屏呢？先来看下系统手势有没有提供属性或方法供我们使用

NSLog(@"%@", self.interactivePopGestureRecognizer);
+

打印信息：

/*
+<UIScreenEdgePanGestureRecognizer: 0x7fd542611e20; state = Possible;
+ delaysTouchesBegan = YES; view = <UILayoutContainerView 0x7fd542706300>; target= 
+<(action=handleNavigationTransition:, target=<_UINavigationInteractiveTransition 
+0x7fd542611ce0>)>>
+*/
+

原来系统手势的类型为 UIScreenEdgePanGestureRecognizer ，转到定义，发现有一个属性

UIRectEdge edges
+

是个结构体

typedef NS_OPTIONS(NSUInteger, UIRectEdge) { 
+   UIRectEdgeNone = 0,
+   UIRectEdgeTop = 1 << 0,
+   UIRectEdgeLeft = 1 << 1,
+   UIRectEdgeBottom = 1 << 2,
+   UIRectEdgeRight = 1 << 3,
+   UIRectEdgeAll = UIRectEdgeTop | UIRectEdgeLeft | UIRectEdgeBottom | UIRectEdgeRight
+}
+

只提供了这几样，都是边缘的，这样就只好另寻他路了。 +既然没有提供方式给我们现实要求，那我们就自己添加一个拖动手势 UIPanGestureRecognizer来替它执行滑动返回功能。

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:@selector(handleNavigationTransition:)];
+[self.view addGestureRecognizer:pan];
+

添加一个拖动手势，让他执行系统手势的操作，调用handleNavigationTransition:方法（刚才打印的信息中可以得知），现在的问题就是target是谁？ +我们可以看看UIScreenEdgePanGestureRecognizer中是否有线索呢？

UIScreenEdgePanGestureRecognizer *gest = self.interactivePopGestureRecognizer;
+

找了半天没找着，但是UIScreenEdgePanGestureRecognizer继承于UIPanGestureRecognizer，而UIPanGestureRecognizer又继承于UIGestureRecognizer，在UIGestureRecognizer提供的方法中我们可以推断出一定有target，而且还是强引用的私有属性！那我们就可以用OC强大的杀手锏KVC来得到这个属性，但是前提是我们得知道target所指属性是什么名字 +参照我的另一篇文章：iOS - 通过runtime获取某个类中所有的变量和方法

// OC runtime 机制
+// 只能动态获取当前类的成员属性，不能获取其子类，或者父类的属性
+unsigned int count = 0;// 拷贝出所胡的成员变量列表
+Ivar *ivars = class_copyIvarList([UIGestureRecognizer class], &count);
+for (int i = 0; i<count; i++) {
+   // 取出成员变量
+   Ivar ivar = *(ivars + i); 
+
+   // 打印成员变量名字
+   NSLog(@"%s", ivar_getName(ivar)); 
+
+   // 打印成员变量的数据类型
+   NSLog(@"%s", ivar_getTypeEncoding(ivar));
+}
+
+ // 释放
+ free(ivars);
+

在打印中我们找到了UIGestureRecognizer的私有属性 _targets，是个数组，而且只有一个元素，元素的类型如图所示

target

那就好办了，这样我们就可以得到target了

NSArray *targets = [gest valueForKeyPath:@"_targets"]; // 打印可以发现里面就一个元素
+id target = [targets[0] valueForKeyPath:@"_target"];
+

这样我们就差不多实现全屏滑动返回的功能，但是有个bug

向右滑动，接着点击Button

如图所示，在最后里回到根控制器界面后我再一次向右滑动，接着点击Button，它没有将FirstVC弹出，这就是传说中的bug，那我们现在在做的，就是在根控制器不让滑动返回生效，即禁用手势。 +监听手势，遵守协议UIGestureRecognizerDelegate，实现代理方法

// 当当前控制器是是根控制器时不让移除当前控制器(换句话说就是禁止手势)
+pan.delegate = self;
+
#pragma mark - UIGestureRecognizerDelegate// 当开始滑动时调用
+- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
+   // 当为根控制器是不让移除当前控制器，非根控制器时允许移除
+   NSLog(@"%ld", self.viewControllers.count);
+   BOOL open = self.viewControllers.count > 1;
+   return open;
+}
+

# 最后说两句

这样就可以全屏滑动了，不过让我们来看看我们添加手势的习惯

UIPanGestureRecognizer *myPan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan)];
+[self.view addGestureRecognizer:myPan];
+myPan.delegate = self;
+

我们在添加手势时设置了target为self，而delegate也为self +那是不是可以推断出系统手势的delegate就是我们刚刚想要的target呢，答案是是的

id target = self.interactivePopGestureRecognizer.delegate;
+

所以我们的target就可以通过这种方式获得，不用KVC的方式 +哦，最后别忘了禁用系统手势

// 禁止系统的手势
+self.interactivePopGestureRecognizer.enabled = NO;
+

这样，我们就实现了全屏滑动返回的功能了~

# 源码

Objective-C

记得遵守协议： UIGestureRecognizerDelegate +LXFNavigationController.m

- (void)viewDidLoad {
+   [super viewDidLoad];
+   // 系统的手势
+   UIScreenEdgePanGestureRecognizer *gest = self.interactivePopGestureRecognizer;
+   // target
+   id target = self.interactivePopGestureRecognizer.delegate;
+   // 禁止系统的手势 
+   self.interactivePopGestureRecognizer.enabled = NO;
+   UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:@selector(handleNavigationTransition:)];
+   [self.view addGestureRecognizer:pan]; 
+   // 监听代理
+   pan.delegate = self;
+}
+
#pragma mark - UIGestureRecognizerDelegate
+// 当开始滑动时调用
+- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
+   // 当为根控制器是不让移除当前控制器，非根控制器时允许移除
+   NSLog(@"%ld", self.viewControllers.count);
+   BOOL open = self.viewControllers.count > 1;
+   return open;
+}
+

Swift

LXFNavigationController.swift

override func viewDidLoad() {
+    super.viewDidLoad()
+    
+    guard let targets = interactivePopGestureRecognizer!.value(forKey: "_targets") as? [NSObject] else { return }
+    let targetObjc = targets.first
+    let target = targetObjc?.value(forKey: "target")
+    let action = Selector(("handleNavigationTransition:"))
+    
+    let panGes = UIPanGestureRecognizer(target: target, action: action)
+    view.addGestureRecognizer(panGes)
+}
+
+ +
+
#Objective-C#Swift
iOS - 实现UINavigation全屏滑动返回(一)
iOS - Swift UICollectionView横向分页滚动，cell左右排版

+ ← + iOS - Swift UICollectionView横向分页滚动，cell左右排版→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/dfd4b7/index.html b/pages/dfd4b7/index.html new file mode 100644 index 000000000..1a4a786de --- /dev/null +++ b/pages/dfd4b7/index.html @@ -0,0 +1,109 @@ + + + + + + iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError) | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2020-08-29
目录

iOS - 解决 Could not find 'faraday' ... gem(s) (Gem::LoadError)

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、遇到的问题

报错内容如下：

/Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/dependency.rb:319:in `to_specs': Could not find 'faraday' (>= 0.7.4) among 77 total gem(s) (Gem::LoadError)
+Checked in 'GEM_PATH=/Users/lxf/.fastlane/bin/bundle/bin:/Users/lxf/.fastlane/bin/bundle/lib/ruby/gems/2.2.0', execute `gem env` for more information
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1439:in `block in activate_dependencies'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1428:in `each'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1428:in `activate_dependencies'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1410:in `activate'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1442:in `block in activate_dependencies'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1428:in `each'
+	from /Users/xxx/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1428:in `activate_dependencies'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/specification.rb:1410:in `activate'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems.rb:196:in `rescue in try_activate'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems.rb:193:in `try_activate'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:125:in `rescue in require'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:40:in `require'
+	from /Users/lxf/.fastlane/bin/bundle/lib/ruby/gems/2.2.0/gems/fastlane-2.28.3/bin/fastlane:9:in `<top (required)>'
+	from /Users/lxf/.fastlane/bin/bundle/bin/fastlane:22:in `load'
+	from /Users/lxf/.fastlane/bin/bundle/bin/fastlane:22:in `<main>'
+

在执行 fastlane 命令时遇到了上面那个错误

# 二、解决方案：

执行如下几行命令即可，解决方案出自: 链接 (opens new window)

rm -rf $HOME/.fastlane/bin/bundle/lib/ruby/gems/2.2.0/gems/faraday-0.*
+rm -rf $HOME/.fastlane/bin/bundle/lib/ruby/gems/2.2.0/specifications/faraday-0.*
+gem install faraday -v 0.17.0 --install-dir $HOME/.fastlane/bin/bundle/lib/ruby/gems/2.2.0
+

接着再执行 fastlane 命令试试看吧~

+ +
+
#iOS
iOS - 视频采集详解
Fastlane - 解决报错Could not find a `ios` simulator

+ ← + Fastlane - 解决报错Could not find a `ios` simulator→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e06ece/index.html b/pages/e06ece/index.html new file mode 100644 index 000000000..da69163f1 --- /dev/null +++ b/pages/e06ece/index.html @@ -0,0 +1,311 @@ + + + + + + iOS - RxSwift项目实战记录 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - RxSwift项目实战记录

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

ReactiveX

最近刚刚把接手的OC项目搞定，经过深思熟虑后，本人决定下个项目起就使用Swift(学了这么久的Swift还没真正用到实际项目里。。。)，而恰巧RxSwift已经出来有一些时间了，语法也基本上稳定，遂只身前来试探试探这RxSwift，接着就做了个小Demo，有兴趣的同学可以瞧一瞧~

Exhibition

# 结构

.
+├── Controller
+│   └── LXFViewController.swift		// 主视图控制器
+├── Extension
+│   └── Response+ObjectMapper.swift	// Response分类，Moya请求完进行Json转模型或模型数组
+├── Model
+│   └── LXFModel.swift				// 模型
+├── Protocol
+│   └── LXFViewModelType.swift		// 定义了模型协议
+├── Tool
+│   ├── LXFNetworkTool.swift		// 封装Moya请求
+│   └── LXFProgressHUD.swift		// 封装的HUD
+├── View
+│   ├── LXFViewCell.swift			// 自定义cell
+│   └── LXFViewCell.xib				// cell的xib文件
+└── ViewModel
+    └── LXFViewModel.swift			// 视图模型
+

# 第三方库

RxSwift			// 想玩RxSwift的必备库
+RxCocoa 		// 对 UIKit Foundation 进行 Rx 化
+NSObject+Rx		// 为我们提供 rx_disposeBag 
+Moya/RxSwift 	// 为RxSwift专用提供，对Alamofire进行封装的一个网络请求库
+ObjectMapper 	// Json转模型之必备良品
+RxDataSources	// 帮助我们优雅的使用tableView的数据源方法
+Then 			// 提供快速初始化的语法糖
+Kingfisher		// 图片加载库
+SnapKit			// 视图约束库
+Reusable 		// 帮助我们优雅的使用自定义cell和view,不再出现Optional
+MJRefresh 		// 上拉加载、下拉刷新的库
+SVProgressHUD 	// 简单易用的HUD
+

# 敲黑板

# Moya的使用

Moya是基于Alamofire的网络请求库，这里我使用了Moya/Swift，它在Moya的基础上添加了对RxSwift的接口支持。接下来我们来说下Moya的使用

一、创建一个枚举，用来存放请求类型，这里我顺便设置相应的路径，等下统一取出来直接赋值即可

enum LXFNetworkTool {
+    enum LXFNetworkCategory: String {
+        case all     = "all"
+        case android = "Android"
+        case ios     = "iOS"
+        case welfare = "福利"
+    }
+    case data(type: LXFNetworkCategory, size:Int, index:Int)
+}
+

二、为这个枚举写一个扩展，并遵循塄 TargetType，这个协议的Moya这个库规定的协议，可以按住Commond键+单击左键进入相应的文件进行查看

extension LXFNetworkTool: TargetType {
+    /// baseURL 统一基本的URL
+    var baseURL: URL {
+        return URL(string: "http://gank.io/api/data/")!
+    }
+    
+    /// path字段会追加至baseURL后面
+    var path: String {
+        switch self {
+        case .data(let type, let size, let index):
+            return "\(type.rawValue)/\(size)/\(index)"
+        }
+    }
+    
+    /// HTTP的请求方式
+    var method: Moya.Method {
+        return .get
+    }
+    
+    /// 请求参数(会在请求时进行编码)
+    var parameters: [String: Any]? {
+        return nil
+    }
+    
+    /// 参数编码方式(这里使用URL的默认方式)
+    var parameterEncoding: ParameterEncoding {
+        return URLEncoding.default
+    }
+    
+    /// 这里用于单元测试，不需要的就像我一样随便写写
+    var sampleData: Data {
+        return "LinXunFeng".data(using: .utf8)!
+    }
+    
+    /// 将要被执行的任务(请求：request 下载：upload 上传：download)
+    var task: Task {
+        return .request
+    }
+    
+    /// 是否执行Alamofire验证，默认值为false
+    var validate: Bool {
+        return false
+    }
+}
+

三、定义一个全局变量用于整个项目的网络请求

let lxfNetTool = RxMoyaProvider<LXFNetworkTool>()
+

至此，我们就可以使用这个全局变量来请求数据了

# RxDataSources

如果你想用传统的方式也行，不过这就失去了使用RxSwift的意义。好吧，我们接下来说说如何优雅的来实现tableView的数据源。其实RxDataSources (opens new window)官网上已经有很明确的使用说明，不过我还是总结一下整个过程吧。

概念点 +RxDataSources是以section来做为数据结构来传输，这点很重要，可能很多同学会比较疑惑这句话吧，我在此举个例子，在传统的数据源实现的方法中有一个numberOfSection，我们在很多情况下只需要一个section，所以这个方法可实现，也可以不实现，默认返回的就是1，这给我们带来的一个迷惑点：【tableView是由row来组成的】，不知道在坐的各位中有没有是这么想的呢？？有的话那从今天开始就要认清楚这一点，【tableView其实是由section组成的】，所以在使用RxDataSources的过程中，即使你的setion只有一个，那你也得返回一个section的数组出去！！！

一、自定义Section +在我们自定义的Model中创建一个Section的结构体，并且创建一个扩展，遵循SectionModelType协议，实现相应的协议方法。约定俗成的写法呢请参考如下方式

LXFModel.swift
+
+struct LXFSection {
+    // items就是rows
+    var items: [Item]
+  	// 你也可以这里加你需要的东西，比如 headerView 的 title
+}
+
+extension LXFSection: SectionModelType {
+  
+  	// 重定义 Item 的类型为 LXFModel
+    typealias Item = LXFModel
+  
+    // 实现协议中的方式
+    init(original: LXFSection, items: [LXFSection.Item]) {
+        self = original
+        self.items = items
+    }
+}
+

二、在控制器下创建一个数据源属性

以下代码均在 LXFViewController.swift 文件中

// 创建一个数据源属性，类型为自定义的Section类型
+let dataSource = RxTableViewSectionedReloadDataSource<LXFSection>()
+

使用数据源属性绑定我们的cell

// 绑定cell
+dataSource.configureCell = { ds, tv, ip, item in
+    // 这个地方使用了Reusable这个库，在LXFViewCell中遵守了相应的协议
+	// 使其方便转换cell为非可选型的相应的cell类型
+    let cell = tv.dequeueReusableCell(for: ip) as LXFViewCell
+    cell.picView.kf.setImage(with: URL(string: item.url))
+    cell.descLabel.text = "描述: \(item.desc)"
+    cell.sourceLabel.text = "来源: \(item.source)"
+    return cell
+}
+

三、将sections序列绑定给我们的rows

output.sections.asDriver().drive(tableView.rx.items(dataSource:dataSource)).addDisposableTo(rx_disposeBag)
+

大功告成，接下来说说section序列的产生

# ViewModel的规范

我们知道MVVM思想就是将原本在ViewController的视图显示逻辑、验证逻辑、网络请求等代码存放于ViewModel中，让我们手中的ViewController瘦身。这些逻辑由ViewModel负责，外界不需要关心，外界只需要结果，ViewModel也只需要将结果给到外界，基于此，我们定义了一个协议LXFViewModelType

一、创建一个LXFViewModelType.swift

LXFViewModelType.swift
+
+// associatedtype 关键字 用来声明一个类型的占位符作为协议定义的一部分
+protocol LXFViewModelType {
+    associatedtype Input
+    associatedtype Output
+    
+    func transform(input: Input) -> Output
+}
+

二、viewModel遵守LXFViewModelType协议

  1. 我们可以为XFViewModelType的Input和Output定义别名，以示区分，如：你这个viewModel的用于请求首页模块相关联的，则可以命名为：HomeInput 和 HomeOutput
  2. 我们可以丰富我们的 Input 和 Output 。可以看到我为Output添加了一个序列，类型为我们自定义的LXFSection数组，在Input里面添加了一个请求类型(即要请求什么数据，比如首页的数据)
  3. 我们通过 transform 方法将input携带的数据进行处理，生成了一个Output

注意： 以下代码为了方便阅读，进行了部分删减

LXFViewModel.swift
+
+extension LXFViewModel: LXFViewModelType {
+   // 存放着解析完成的模型数组
+   let models = Variable<[LXFModel]>([])
+  
+    // 为LXFViewModelType的Input和Output定义别名
+    typealias Input = LXFInput
+    typealias Output = LXFOutput
+
+  	// 丰富我们的Input和Output
+    struct LXFInput {
+        // 网络请求类型
+        let category: LXFNetworkTool.LXFNetworkCategory
+        
+        init(category: LXFNetworkTool.LXFNetworkCategory) {
+            self.category = category
+        }
+    }
+
+    struct LXFOutput {
+        // tableView的sections数据
+        let sections: Driver<[LXFSection]>
+        
+        init(sections: Driver<[LXFSection]>) {
+            self.sections = sections
+        }
+    }
+    
+    func transform(input: LXFViewModel.LXFInput) -> LXFViewModel.LXFOutput {
+        let sections = models.asObservable().map { (models) -> [LXFSection] in
+            // 当models的值被改变时会调用，这是Variable的特性
+            return [LXFSection(items: models)] // 返回section数组
+        }.asDriver(onErrorJustReturn: [])
+        
+        let output = LXFOutput(sections: sections)
+        
+      	// 接下来的代码是网络请求，请结合项目查看，不然会不方便阅读和理解
+    }
+}
+

接着我们在ViewController中初始化我们的input，通过transform得到output，然后将我们output中的sections序列绑定tableView的items

LXFViewController.swift
+
+// 初始化input
+let vmInput = LXFViewModel.LXFInput(category: .welfare)
+// 通过transform得到output
+let vmOutput = viewModel.transform(input: vmInput)
+
+vmOutput.sections.asDriver().drive(tableView.rx.items(dataSource: dataSource)).addDisposableTo(rx_disposeBag)
+

# RxSwift中使用MJRefresh

一、定义一个枚举LXFRefreshStatus，用于标志当前刷新状态

enum LXFRefreshStatus {
+    case none
+    case beingHeaderRefresh
+    case endHeaderRefresh
+    case beingFooterRefresh
+    case endFooterRefresh
+    case noMoreData
+}
+

二、在LXFOutput添加一个refreshStatus序列，类型为LXFRefreshStatus

// 给外界订阅，告诉外界的tableView当前的刷新状态
+let refreshStatus = Variable<LXFRefreshStatus>(.none)
+

我们在进行网络请求并得到结果之后，修改refreshStatus的value为相应的LXFRefreshStatus项

三、外界订阅output的refreshStatus

外界订阅output的refreshStatus，并且根据接收到的值进行相应的操作

vmOutput.refreshStatus.asObservable().subscribe(onNext: {[weak self] status in
+    switch status {
+    case .beingHeaderRefresh:
+        self?.tableView.mj_header.beginRefreshing()
+    case .endHeaderRefresh:
+        self?.tableView.mj_header.endRefreshing()
+    case .beingFooterRefresh:
+        self?.tableView.mj_footer.beginRefreshing()
+    case .endFooterRefresh:
+        self?.tableView.mj_footer.endRefreshing()
+    case .noMoreData:
+        self?.tableView.mj_footer.endRefreshingWithNoMoreData()
+    default:
+        break
+    }
+}).addDisposableTo(rx_disposeBag)
+

四、output提供一个requestCommond用于请求数据

PublishSubject 的特点：即可以作为Observable，也可以作为Observer，说白了就是可以发送信号，也可以订阅信号

// 外界通过该属性告诉viewModel加载数据（传入的值是为了标志是否重新加载）
+let requestCommond = PublishSubject<Bool>()
+

在transform中，我们对生成的output的requestCommond进行订阅

output.requestCommond.subscribe(onNext: {[unowned self] isReloadData in
+    self.index = isReloadData ? 1 : self.index+1
+    lxfNetTool.request(.data(type: input.category, size: 10, index: self.index)).mapArray(LXFModel.self).subscribe({ [weak self] (event) in
+        switch event {
+        case let .next(modelArr):
+            self?.models.value = isReloadData ? modelArr : (self?.models.value ?? []) + modelArr
+            LXFProgressHUD.showSuccess("加载成功")
+        case let .error(error):
+            LXFProgressHUD.showError(error.localizedDescription)
+        case .completed:
+            output.refreshStatus.value = isReloadData ? .endHeaderRefresh : .endFooterRefresh
+        }
+    }).addDisposableTo(self.rx_disposeBag)
+}).addDisposableTo(rx_disposeBag)
+

五、在ViewController中初始化刷新控件

为tableView设置刷新控件，并且在创建刷新控件的回调中使用output的requestCommond发射信号

tableView.mj_header = MJRefreshNormalHeader(refreshingBlock: { 
+    vmOutput.requestCommond.onNext(true)
+})
+tableView.mj_footer = MJRefreshAutoNormalFooter(refreshingBlock: { 
+    vmOutput.requestCommond.onNext(false)
+})
+

总结流程：

  1. ViewController已经拿到output，当下拉加载数据的时候，使用output的requestCommond发射信息，告诉viewModel我们要加载数据

  2. viewModel请求数据，在处理完json转模型或模型数组后修改models，当models的值被修改的时候会发信号给sections，sections在ViewController已经绑定到tableView的items了，所以此时tableView的数据会被更新。接着我们根据请求结果，修改output的refreshStatus属性的值

  3. 当output的refreshStatus属性的值改变后，会发射信号，由于外界之前已经订阅了output的refreshStatus，此时就会根据refreshStatus的新值来处理刷新控件的状态

好了，附上RxSwiftDemo (opens new window)。完结撒花

+ +
+
#iOS#RxSwift#Swift
Swift - PropertyWrapper
RxSwift + MJRefresh 打造自动处理刷新控件状态

+ ← + RxSwift + MJRefresh 打造自动处理刷新控件状态→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e13e4e/index.html b/pages/e13e4e/index.html new file mode 100644 index 000000000..12e7ac911 --- /dev/null +++ b/pages/e13e4e/index.html @@ -0,0 +1,217 @@ + + + + + + DesignPattern - 策略模式【行为型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-09-09
目录

DesignPattern - 策略模式【行为型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、策略模式介绍

策略模式（Strategy Pattern）定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换

  • 核心组成

    • Context 上下文：屏蔽高层模块对策略、算法的直接访问，封装可能存在的变化
    • Strategy 策略角色：抽象策略角色，是对策略、算法家族的抽象，定义每个策略或算法必须具有的方法和属性
    • ConcreteStrategy 具体策略角色：用于实现抽象策略中的操作，即实现具体的算法

  • 应用场景

    • 外出旅游，选择骑自行车、坐汽车、飞机等，每一种旅行方式都是一个策略
    • Java AWT 中的 LayoutManager（布局管理器）
    • 如果在一个系统里面有许多类，它们之间的区别仅在于它们的行为，那么可以使用策略模式
    • 不希望暴露复杂的、与算法有关的数据结构，那么可以使用策略模式来封装算法

  • 优点

    • 满足开闭原则，当增加新的具体策略时，不需要修改上下文类的代码，上下文就可以引用新的具体策略的实例
    • 避免使用多重条件判断，如果不同策略模式可能会使用多重条件语句，不利于维护，和工厂模式搭配使用可以很好地消除 if-else 代码的多层嵌套（工厂模式主要是根据参数，获取不同的策略）

  • 缺点

    • 策略类数量会增多，每个策略都是一个类，复用的可能性很小
    • 对外暴露了类所有的行为和算法，行为过多导致策略类膨胀

补充：JDK 中的 Collections#sort(list, comparator) 就是策略模式，比较逻辑由外部传入决定。

# 二、策略模式代码实现

以电商促销为例，一件商品，平时 800 元，赶上国庆促销，有 3 种折扣方式供用户选择：

  • 不使用任何折扣
  • 使用 8 折折扣
  • 使用优惠券折扣

创建商品订单类：

/**
+ * 商品订单类
+ *
+ * @author GitLqr
+ */
+public class ProductOrder {
+
+	private float oldPrice;
+	private int userId;
+	private int productId;
+
+	public ProductOrder(float oldPrice, int userId, int productId) {
+		super();
+		this.oldPrice = oldPrice;
+		this.userId = userId;
+		this.productId = productId;
+	}
+
+	... settter & getter ...
+}
+

创建抽象策略类，当前策略的目的就是计算出折扣后的价格：

/**
+ * 抽象策略角色：活动策略
+ *
+ * @author GitLqr
+ */
+public abstract class ActivityStrategy {
+
+	/**
+	 * 计算订单价格
+	 */
+	public abstract double computePrice(ProductOrder productOrder);
+}
+

创建具体策略类，对应上面的 3 种折扣方式：

/**
+ * 具体策略：没有活动
+ *
+ * @author GitLqr
+ */
+public class NormalActivityStrategy extends ActivityStrategy {
+
+	@Override
+	public double computePrice(ProductOrder productOrder) {
+		return productOrder.getOldPrice();
+	}
+}
+
+/**
+ * 具体策略：打折活动
+ *
+ * @author GitLqr
+ */
+public class DiscountActivityStrategy extends ActivityStrategy {
+
+	private float rate; // 折扣
+
+	public DiscountActivityStrategy(float rate) {
+		super();
+		this.rate = rate;
+	}
+
+	@Override
+	public double computePrice(ProductOrder productOrder) {
+		return productOrder.getOldPrice() * rate;
+	}
+}
+
+/**
+ * 具体策略：优惠券抵扣活动
+ *
+ * @author GitLqr
+ */
+public class VoucherActivityStrategy extends ActivityStrategy {
+
+	private float voucher;
+
+	public VoucherActivityStrategy(float voucher) {
+		super();
+		this.voucher = voucher;
+	}
+
+	@Override
+	public double computePrice(ProductOrder productOrder) {
+		if (productOrder.getOldPrice() > voucher) {
+			return productOrder.getOldPrice() - voucher;
+		} else {
+			return 0;
+		}
+	}
+}
+

创建上下文类：

说明：对外屏蔽高层模块对策略、算法的直接访问，封装可能存在的变化

/**
+ * 上下文：促销上下文
+ *
+ * @author GitLqr
+ */
+public class PromotionContext {
+	// 持有具体策略
+	private ActivityStrategy activityStrategy;
+
+	public PromotionContext(ActivityStrategy activityStrategy) {
+		super();
+		this.activityStrategy = activityStrategy;
+	}
+
+	// 直接使用具体策略进行计算
+	public double executeStrategy(ProductOrder productOrder) {
+		return activityStrategy.computePrice(productOrder);
+	}
+}
+

使用：

public static void main(String[] args) {
+
+    ProductOrder productOrder = new ProductOrder(800, 9527, 1001);
+    PromotionContext promotionContext;
+    double finalPrice;
+
+    // 没活动
+    promotionContext = new PromotionContext(new NormalActivityStrategy());
+    finalPrice = promotionContext.executeStrategy(productOrder);
+    System.out.println("正常价：" + finalPrice);
+
+    // 打折活动
+    promotionContext = new PromotionContext(new DiscountActivityStrategy(0.8f));
+    finalPrice = promotionContext.executeStrategy(productOrder);
+    System.out.println("折扣价：" + finalPrice);
+
+    // 使用优惠券抵扣
+    promotionContext = new PromotionContext(new VoucherActivityStrategy(100));
+    finalPrice = promotionContext.executeStrategy(productOrder);
+    System.out.println("使用优惠券抵扣价：" + finalPrice);
+}
+
+ +
+
#设计模式#策略模式
DesignPattern - 享元模式【结构型】
DesignPattern - 模板方法模式【行为型】

+ ← + DesignPattern - 模板方法模式【行为型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e18f51/index.html b/pages/e18f51/index.html new file mode 100644 index 000000000..45a471d38 --- /dev/null +++ b/pages/e18f51/index.html @@ -0,0 +1,126 @@ + + + + + + Kotlin - 扩展成员 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-29
目录

Kotlin - 扩展成员

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 扩展方法

Kotlin 中支持在不修改类原本结构的前提下，对类功能进行扩展，比如对 String 类新增一个 multiply()方法，可返回重复 n 次的字符串：

fun String.multiply(time: Int): String {
+    val stringBuilder = StringBuilder()
+    for (i in 0 until time) stringBuilder.append(this)
+    return stringBuilder.toString()
+}
+
+fun main() {
+    println("hehe".multiply(3)) // hehehehehehe
+}
+

可以看到扩展方法的格式其实很简单，跟普通的函数差不多，只不过在函数名前面多了 要扩展的类名 和一个 . 而已，扩展方法的方法体中，可以使用 this 得到原本的对象。

扩展成员的相关代码外层不需要包裹诸如 class 的代码块，可直接存放在任意 kt 文件中，且在其它 kt 文件中可以直接调用。

# 扩展运算符函数

在 Python 中，字符串若是乘上整数 n，将返回由 n 个此字符串拼接起来的新字符串。这个语法特性我是挺喜欢的，那么 Kotlin 中是否也可以做到像 Python 那样呢？答案是可以的，类似 "hehe" * 3 这种写法，结合之前所学的运算符重载知识，这个问题其实本质上就是对 String 类中的 *运行符函数 times() 进行重载即可，但 String 类我们无法直接修改其源码，同时由于 Kotlin 支持扩展类成员的特性，因此我们可以对运算符函数进行如下扩展：

了解更多操作符对应的具名函数，请点击：https://www.kotlincn.net/docs/reference/operator-overloading.html (opens new window)

operator fun String.times(time: Int): String {
+    val stringBuilder = StringBuilder()
+    for (i in 0 until time) stringBuilder.append(this)
+    return stringBuilder.toString()
+}
+
+fun main() {
+    println("hehe" * 3) // hehehehehehe
+}
+

扩展运算符函数 跟扩展方法的格式是一样的，先书写要重载的运算符函数，然后在函数名前面增加 类名 和 . 即可。

# 扩展属性

Kotlin 不仅支持扩展类方法，也支持扩展类属性，例如 String 原本只有 length 属性，我们可以扩展一个 size 属性，功能与 length 属性一样：

val String.size: Int
+    get() {
+        return this.length
+    }
+
+fun main() {
+    println("hehe".size) // 4
+}
+

注意，扩展属性如果使用 val 修饰，则只有 get() 方法，如果使用 var 修饰，则可以有 set() 方法，但因为扩展属性没有 backing field，即无法使用 field = value 这类代码，因此，这个 set() 方法其实形同虚设。

var String.size: Int
+    get() {
+        return this.length
+    }
+    set(value) {
+        // field = value // IDE报错：Unresolved reference: field
+    }
+

扩展属性不能初始化，类似接口属性

# Java 调用 Kotlin 扩展成员

Java 不认识 Kotlin 的语法糖，所以没办法像 Kotlin 代码那样使用原对象直接调用扩展成员，而是类似调用静态方法的方式：

String str = "hehe";
+System.out.println(ExtendExampleKt.multiply(str, 4)); // hehehehehehehehe
+System.out.println(ExtendExampleKt.times(str, 5)); // hehehehehehehehehehe
+System.out.println(ExtendExampleKt.getSize(str)); // 4
+

Kotlin 的扩展成员在 Java 中会被识别成 类名为 kt文件名＋Kt 组成的类静态方法，附上下图方便理解：

+ +
+
#扩展方法#扩展属性
Kotlin - 方法重载与默认参数
Kotlin - 属性代理

+ ← + Kotlin - 属性代理→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e3339e/index.html b/pages/e3339e/index.html new file mode 100644 index 000000000..b9c5f6414 --- /dev/null +++ b/pages/e3339e/index.html @@ -0,0 +1,280 @@ + + + + + + Android脚本 - 不一样的Gradle多渠道配置总结 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-05-15
目录

Android脚本 - 不一样的Gradle多渠道配置总结

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

好久没有写博客了，突然想把这段时间项目中使用到的技术和多渠道相关的认识总结分享一下~

# 一、新增渠道

使用AndroidStudio配合gradle，可以很方便的输出多个渠道包，只需要在app Module下的build.gradle中，对productFlavors领域进行配置即可，假设我当前开发的项目，需要上线不同的地区，一个是国内版，一个美国版，还有一个免费版，那么gradle可以这么配：

android {
+    productFlavors {
+        china { // 中国版
+        }
+        america { // 美国版
+        }
+        free { // 免费版
+        }
+    }
+}
+

以上多渠道配置完成后，在Android Studio的Build Variants标签中，就会有不同渠道变体供我们选择了。当我们想使用AS直接运行某个渠道的app时，就需要先在Build Variants标签中选择好变体，再点击"运行"按钮运行项目。

在productFlavors中还可以配置包名（applicationId）、版本号（versionCode）、版本名（versionName）、icon、应用名 等等，举个例子：

free {
+	applicationId 'com.lqr.demo.free'
+	versionCode 32
+	versionName '1.3.2'
+	manifestPlaceholders = [
+			app_icon: "@drawable/ic_launcher",
+			app_name: "菜鸡【免费版】",
+	]
+}
+

注意：
这里配置的包名是applicationId，而不是清单文件里的packageName，applicationId与packageName是不一样的。
我们常说，一部Android设备上不能同时安装2个相同包名的app，指的是applicationId不能一样。
applicationId与packageName的区别可查阅：《ApplicationId versus PackageName》 (opens new window)

如果工程要求不同渠道共存，或者对版本号、icon、应用名等有定制需求的话，那么这个多渠道配置就显得非常有用了。其中，app_icon、app_name是放在manifestPlaceholders的，这个其实是在对AndroidManifest.xml中的占位符进行变量修改，也就是说，要定制icon或者应用名的话，还需要对清单文件做些小修改才行（增加一些占位符），如：

<application
+    xmlns:tools="http://schemas.android.com/tools"
+    android:icon="${app_icon}"
+    android:label="${app_name}"
+    android:theme="@style/AppTheme"
+    android:largeHeap="true"
+    tools:replace="android:label">
+	...
+</application>
+

# 二、生成渠道变量

在新增渠道之后，我们可以对这些渠道进行一起更多的配置，假设项目代码需要根据不同的渠道，赋予不同的数据，当然你可以选择在java代码中通过判断当前渠道名，配合switch来设置静态常量，但其实不用那么烦琐，而且有些静态数据通过类似config.gradle或config.properties这类配置文件来配置有比较好，那么gradle中的applicationVariants完全可以帮助到我们，以下面的配置Demo为例进行说明：

// 多渠道相关设置
+applicationVariants.all { variant ->
+    buildConfigField("String", "PROUDCT", "\"newapp\"")
+    buildConfigField("String[]", "DNSS", "{\"http://119.29.29.29\",\"http://8.8.8.8\",\"http://114.114.114.114\"}")
+    if (variant.flavorName == 'china') {
+        buildConfigField("String", "DNS", "\"http://119.29.29.29\"")
+    } else if (variant.flavorName == 'america') {
+        buildConfigField("String", "DNS", "\"http://8.8.8.8\"")
+    } else if (variant.flavorName == 'free') {
+        buildConfigField("String", "DNS", "\"http://114.114.114.114\"")
+    }
+}
+

通过gradle中提供的buildConfigField()，AndroidStudio会在执行脚本初始化时，根据当前所选变体将对于的配置转变为BuildConfig.java中的一个个静态常量：

当我切换其他变体时，BuildConfig中的DNS也会跟着一起改变，这样，我们在工程代码中，就不需要去判断当前渠道名来为某些静态常量赋值了。这里只是举例了使用buildConfigField()来生成String和String[]常量，当然也可以用来生成其它类型的常量数据，有兴趣的话，可以百度了解下。

# 三、变体的使用

上面提到了变体，那么变体是什么？可以这样理解，变体是由【Build Type】和【Product Flavor】组合而成的，组合情况有【Build Type】*【Product Flavor】种，举个例子，有如下2种构建类型，并配置了2种渠道：

Build Type：release debug
+Product Flavor：china free
+

那么最终会有四种 Build Variant 组成：

chinaRelease chinaDebug freeRelease freeDebug
+

变体在复杂多渠道工程中是相当有用的，可以做到资源文件合并以及代码整合，这里的合并与整合怎么理解？我们使用Android Studio进行项目开发时，会把代码文件与资源文件都存放在app/src目录下，通常是main下会有java、res、assets来区分存放代码文件和资源文件，你可以把main看作是默认渠道工程文件目录，也就是说main下存放在代码文件和资源文件对所有渠道来说都是共同持有的。

那么，一旦出来了某些代码文件或者资源文件是个别渠道专属时，应该怎么办呢？因为main是共有的，所以理想状态下，我们并不会把这类"不通用"的文件放在main下（这样做不会出错，但是做法很low，会增大apk包体积），Android Studio为变体做了很好的支持，我们可以在app/src下，创建一个以渠道名命名的目录，用于存放这类个别渠道专属的代码文件和资源文件，如：

可以看到，当我选择freeDebug变体时，app/src/free下的目录高亮了，说明它们被Android Studio识别，在运行工程时，Android Studio会将free和main下的所有资源文件进行合并，将代码文件进行整合。同理，如果我选择的是chinaDebug变体，那么app/src/china下目录就会高亮。知道如何创建变体目录后，下面就开始进行资源合并与代码整合了。

# 1、资源合并

资源文件有哪些？我们可以这样认为：

资源文件 = res下的所有文件 + AndroidManifest.xml 
+

变体的资源合并功能简直是"神器"一般的存在，可以解决很多业务需求，如不同渠道显示的icon不同，应用名不同等等。Android Studio在对变体目录和main目录进行资源合并时，会遵守这样的规则，假设当前选中的变体是freeDebug：

  • 某资源在free下有，在main中没有，那么在打包时，会将该资源直接合并到main资源中。
  • 某资源在free下有，在main中也有，那么在打包时，会以free为主，将free中资源替换掉main中资源。

针对上述2个规则，这里以string.xml为例进行说明，main下的string.xml是：

<resources>
+    <string name="app_name">Demo</string>
+    <string name="app_author">Lin</string>
+</resources>
+

free下的string.xml是：

<resources>
+    <string name="error_append">发生错误</string>
+    <string name="app_author">Lqr</string>
+</resources>
+

那么最终打出的apk包里的string.xml是：

<resources>
+    <string name="app_name">Demo</string>
+    <string name="error_append">发生错误</string>
+    <string name="app_author">Lqr</string>
+</resources>
+

除了字符串合并外，还有图片（drawable、mipmap）、布局（layout）、清单文件（AndroidManifest.xml）的合并，具体可以自己尝试一下。其中，清单文件的合并需要提醒一点，如果渠道目录下的AndroidManifest.xml与main下的AndroidManifest.xml拥有相同的节点属性，但属性值不同时，那么就需要对main下的AndroidManifest.xml进行修改了，具体修改要根据编译时报错来处理，所以，报错时不要慌，根据错误提示修改就是了。

注意：布局（layout）文件的合并是对整个文件进行替换的~。

# 2、代码整合

代码文件，顾名思义就是指java目录下的.java文件了，为什么代码叫整合，而资源却是合并呢？因为代码文件是没办法合并的，只能是整合，整合是什么意思？假设当前选中的变体是freeDebug，有一个java文件是Test.java，这个Test.java要么只存在free/java下，要么只存在于main/java下，如：

可以看到，一切正常，Test.java被AndroidStudio识别，但如果此时在main/java下也存在Test.java，那么Android Studio就会报错了：

代码整合是一个比较头痛的事，因为如果你是在渠道目录free下去引用main下的类，那么是完全没有问题的，但如果反过来，在main下去引用free下的专属类时，情况就会变得很糟糕，当你切换其他变体时（如，切换成chinaDebug），这时工程就会报错了，因为变体切换，Test.java是free专属的，在chinaDebug变体下，free不会被识别，于是main就找不到对应的类了。

选择freeDebug变体时，正常引用Test.java： +

选择chinaDebug变体时，找不到Test.java（只找到junit下的Test.java）： +

所以，对于代码整合，需要我们在开发过程中慎重考虑，多想想如何将渠道目录与main目录进行解耦。比如可以使用Arouter来解耦main与渠道目录下所有的Activity、Fragment，将类引用转换为字符串引用，全部将由Arouter来管理，又或者通过反射来处理，等等，这里顺带记录一下，我项目中使用ARouter来判断Activity、Fragment是否存在，和获取的相关方法：

/**
+ * 获取到目标Delegate（仅仅支持Fragment）
+ */
+public <T extends CommonDelegate> T getTargetDelegate(String path) {
+    return (T) ARouter.getInstance().build(path).navigation();
+}
+
+/**
+ * 获取到目标类class（支持Activity、Fragment）
+ */
+public Class<?> getTargetClass(String path) {
+    Postcard postcard = ARouter.getInstance().build(path);
+    LogisticsCenter.completion(postcard);
+    return postcard.getDestination();
+}
+

# 3、其他

前面只说到了res和java这2个目录，那么assets呢，它是属于哪种？很可惜，assets虽然是资源，但它不是合并，而是整合，也就是说，assets文件的处理方式跟java文件的处理方式是一样的，不能在渠道目录和main目录下同时存在相同的assets文件，这将对某些需求实现造成阻碍，举个例子，假设china与free使用的assets资源是一样的，而america单独使用自己的assets资源，并且这些assets资源文件名都是一样的，那这时要怎么办呢？给每个渠道都放一份各自的assets资源吗？这种做法可行，但很low，原因如下：

  1. 复用性差：都说了china与free使用的资源是一样的，从整个工程的角度来看，一个工程里放了2份一模一样的assets资源文件，如果我有10个渠道，其中9个渠道使用的assets资源是一样的要怎么办，copy9次？
  2. 维护成本高：在开发行业里，需求变动是很常见的事，产品经理会时不时改下需求，所以，叫你改assets资源文件也是很有可能的，如果你采用每个渠道都放一份，那么当assets资源需要修改时，你就需要将每个渠道的assets目录资源替换一遍。记得，是每次修改都要替换一遍。

正确的解决方案是使用sourceSets，对于sourceSets的使用，放到下一节去说明。

# 四、sourceSets

强大的gradle，通过sourceSets可以让开发者能够自定义项目结构，如自定义assets目录、java目录、res目录，而且还可以是多个，但要知道的是，sourceSets并不会破坏变体的合并规则，它们是分开的，sourceSets只是起到了“扩充”的作用。这里先摆一下sourceSets的常规使用：

sourceSets {
+	main {
+		manifest.srcFile 'AndroidManifest.xml'
+		java.srcDirs = ['src']
+		aidl.srcDirs = ['src']
+		renderscript.srcDirs = ['src']
+		res.srcDirs = ['res']
+		assets.srcDirs = ['assets']
+	}
+}
+

# 1、复用assets资源

对于多渠道共用同一套assets资源文件这个问题，结合sourceSets，我们可以这么处理，步骤如下：

  1. 把共用的assets资源存放到一个渠道目录下，如free/assets。
  2. 修改sourceSets规则，强制指定china渠道的assets目录为free/assets。
sourceSets {
+	china {
+		sourceSet.assets.srcDirs = ['src/free/assets']
+	}
+}
+

这样配置以后，如果下次需要统一修改china与free的assets资源文件时，你就只需要把free/assets目录下的资源文件替换掉就好了。虽然这种写法已经满足前面说的需求了，但是还不够，还可以再优化一下，假设你有20个渠道，都使用同一套assets资源的话，按前面的写法你就要写19遍sourceSets配置了。

sourceSets {
+	china {
+		sourceSet.assets.srcDirs = ['src/free/assets']
+	}
+	a{
+		sourceSet.assets.srcDirs = ['src/free/assets']
+	}
+	b{
+		sourceSet.assets.srcDirs = ['src/free/assets']
+	}
+	...
+}
+

可以想像，在这个gradle文件中，光sourceSets配置就会有多长，你可能会说，一个项目怎么会有这么多渠道，不好意思，本人所处公司的业务需求就有20+个渠道的情况，话不多说，下面就来看看怎么优化好这段配置，如果你有学习过gradle，就应该知道，gradle是一种脚本，脚本是可以像写代码一样写逻辑的，那么上面的配置就可以转化为一个if-else代码片段：

sourceSets {
+	sourceSets.all { sourceSet ->
+	// println("sourceSet.name = ${sourceSet.name}")
+	if (sourceSet.name.contains('Debug') || sourceSet.name.contains('Release')) {
+		if (sourceSet.name.contains("china") 
+				|| sourceSet.name.contains("a")
+				|| sourceSet.name.contains("b")
+				|| ...) {
+				sourceSet.assets.srcDirs = ['src/free/assets']
+			}
+		}
+	}
+}
+

现在你可能会觉得这样写好像精简不了多少，不过一旦你的业务复杂起来，像这样用代码的逻辑思维来处理配置，相信这会是一种不错的选择。

有兴趣的可以打印下sourceSet.name；if的写法不一定要用contains()，也可以用其他的判断方式，具体看开发者自己决定。

# 2、修改程序主入口

对于sourceSets的使用，除了针对修改assets以外，java文件、res资源文件、清单文件等等都是可以用同样的方式进行“扩充”的，比如不同渠道共用一套java代码逻辑，那么我们可以把这套代码单独抽取出来存放在一个其他目录下，然后使用sourceSets对其进行添加。这里就以我亲身经历来说明，我是如何通过sourceSets对于java和清单文件进行指定，并且完美解决此类"变态"需求的。

# 1）背景

新的app项目开发完成，现在需要将项目定制化后上线，项目整体采用 1个Activity + n个Fragment架构，这个Activity便是程序主入口，因为我们产品是做机顶盒app开发，产品开发完成后，需要上线到盒子运营商（局方）的应用商店，然后通过盒子推荐位（EPG）启动我们开发的app，因此上线后，需要提供app的包名和类名给到局方，假设新app的包名和类名分别如下：

包名：com.lqr.newapp
+类名：com.lqr.newapp.MainActivity
+

# 2）需求

把新app的包名和类名改成跟旧app的一样，因为局方那边不想换~~假设旧app的包名和类名如下：

包名：com.lqr.oldapp
+类名：com.lqr.oldapp.MainActivity
+

# 3）问题

修改包名很简单，但是修改入口类名就很麻烦了，如果我在该渠道目录下新增一个com.lqr.oldapp.MainActivity，并在其清单文件中进行注册，那么，在打包时，渠道目录下的AndroidManifest.xml会与main目录下的AndroidManifest.xml进行合并。

而main目录下的AndroidManifest.xml中已经注册了com.lqr.newapp.MainActivity，这样就会导致，最终输出apk包中的清单文件会有2个入口类。

是的，这样的产品交付出去，确实也可以应付掉局方的需求，但是，一旦盒子安装了这个app，那么盒子Launcher上可能会同时出现2个入口icon，到时又是一顿折腾，毕竟app上线流程比较麻烦，我们最好是保证产品就一个入口。

# 4）分析

因为变体的资源合并规则，只要渠道目录和main目录下都存在AndroidManifest.xml，那么最终apk包里的清单文件合并出来的就会是2个文件的融合，所以，不能在这2个清单文件中分别注册入口。可以抽出2个不同入口的AndroidManifest.xml存放到其他目录，main下的AndroidManifest.xml只注册通用组件即可。

# 5）操作：

# a. 抽离MainActivity（oldapp）

在app目录下，创建一个support/entry目录（名字随意），用于存放入口相关功能的代码及资源文件，将com.lqr.oldapp.MainActivity放到support/entry/java目录下。

# b. 抽离AndroidManifest.xml

在support目录下，创建manifest（名字随意），用于存放各渠道对应的AndroidManifest.xml，如：

其中newapp目录下的AndroidManifest.xml：

<application>
+    <activity android:name="com.lqr.newapp.MainActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN"/>
+
+            <category android:name="android.intent.category.LAUNCHER"/>
+        </intent-filter>
+    </activity>
+</application>
+

oldapp目录下的AndroidManifest.xml：

<application>
+    <activity android:name="com.lqr.oldapp.MainActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN"/>
+            <category android:name="android.intent.category.LAUNCHER"/>
+        </intent-filter>
+    </activity>
+</application>
+
# c. 配置sourceSets

经过上面2步后，oldapp的MainActivity与各自的主入口注册清单文件就被抽离出去了，接下来就是使用sourceSets，根据不同的渠道名，指定java与清单文件即可：

sourceSets {
+    sourceSets.all { sourceSet ->
+        // project.logger.log(LogLevel.ERROR, "sourceSet.name = " + sourceSet.name)
+        if (sourceSet.name.contains('Debug') || sourceSet.name.contains('Release')) {
+            if (sourceSet.name.contains("china")) {
+                sourceSet.java.srcDirs = ['support/entry/java']
+                sourceSet.manifest.srcFile 'support/manifest/oldapp/AndroidManifest.xml'
+            } else {
+                sourceSet.manifest.srcFile 'support/manifest/newapp/AndroidManifest.xml'
+            }
+        }
+    }
+}
+

至此，最终打出的apk包中的AndroidManifest.xml中就只会保留一个主入口了，完美解决了局方要求。

# 3、解疑

# Q：为什么要把oldapp的MainActivity也抽出去？

A：因为oldapp的MainActivity不单只是china这个渠道需要用到，后续还会被其它渠道使用，为了后续复用考虑，于是就把MainActivity抽离出来。

# Q：为什么sourceSets中要判断sourceSet.name是否包含Debug或Release？

A：如果你有打印过sourceSet.name的话，你一定会发现输出的结果不单单只是那几个变体名，还有androidTest、test、main等等这些，但我们仅仅只是想对工程变体（chinaDebug、chinaRelease、freeDebug、freeRelease）指定java目录和清单文件而已，如果对test、main这类“东西”也指定的话，结果并不是我们想要的，所以，一定要确保source配置的是我们想要指定的变体，而非其他。

# Q：sourceSets与变体合并的关系究竟如何？

A：以java源码目录为例，默认AS工程的java源码目录是【src/main/java】，在gradle中通过sourceSets指定了另一个目录，比如【support/entry/java】，那么打包时，AS会认为这2个目录均是有效的java目录，所以，sourceSets指定的java目录仅仅只是对原来的扩充，而非替换。还是以java源码目录为例，如果你的项目配置了多渠道，在不考虑sourceSets的情况下，项目在打包时，因为变体合并的特性，有效的java目录也是有2个，分别是【src/main/java】和【src/渠道名/java】，变体的合并规则不会因为sourceSets的配置而改变，如果将上述2种情况一起考虑上的话，那么最终打包时，有效的java目录则是3个，分别是【src/main/java】、【src/渠道名/java】、 【support/entry/java】。

# 五、渠道依赖

我们知道，要在gradle中添加第三方库依赖的话，需要在dependencies领域进行配置，常见的configuration有provided（compileOnly）、compile（api）、implementation等等，它们的区别请自行百度查阅了解，针对【Build Type】、【Product Flavor】、【Build Variant】，这些configuration也会出现一些组合，如：

# a. 构建类型组合

debugCompile	// 所有的debug变体都依赖
+releaseCompile	// 所有的release变体都依赖
+

# b. 多渠道组合

chinaCompile	// china渠道依赖
+americaCompile	// america渠道依赖
+freeCompile		// free渠道依赖
+

# c. 变体组合

chinaDebugCompile		// chinaDebug变体依赖
+chinaReleaseCompile		// chinaRelease变体依赖
+americaDebugCompile		// americaDebug变体依赖
+americaReleaseCompile	// americaRelease变体依赖
+freeDebugCompile		// freeDebug变体依赖
+freeReleaseCompile		// freeRelease变体依赖
+

# 1、常规方式配置渠道依赖

通过上述组合就可以轻松配置好各种情况下的依赖了，如：

// autofittextview
+compile 'me.grantland:autofittextview:0.2.+'
+// leakcanary
+debugCompile "com.squareup.leakcanary:leakcanary-android:1.6.1"
+debugCompile "com.squareup.leakcanary:leakcanary-support-fragment:1.6.1"
+releaseCompile "com.squareup.leakcanary:leakcanary-android-no-op:1.6.1"
+// gson
+chinaCompile 'com.google.code.gson:gson:2.6.2'
+americaCompile 'com.google.code.gson:gson:2.6.2'
+freeCompile 'com.google.code.gson:gson:2.5.2'
+

# 2、代码方式配置渠道依赖

虽然官方给出的多种组合依赖可以解决几乎所有的依赖问题，但实际上，当渠道有很多很多时，整个gradle文件将变得冗长臃肿，你能想像20多个渠道中只有1个渠道依赖的gson版本不同的情况吗？所以，这时候就需要考虑一下，充分利用好gradle作为脚本的特性，使用代码方式来进行渠道依赖：

dependencies {
+    gradle.startParameter.getTaskNames().each { task ->
+        // project.logger.log(LogLevel.ERROR, "lqr print task : " + task)
+        if (task.contains('free')) {
+            compile 'com.google.code.gson:gson:2.5.2'
+        } else {
+            compile 'com.google.code.gson:gson:2.6.2'
+        }
+    }
+}
+

另外，还有一种方式是我之前项目中使用过的，但这种方式不支持依赖远程仓库组件，这里也记录一下：

dependencies {
+	// 配置 插件化库 依赖
+    applicationVariants.all { variant ->
+        if (variant.flavorName == 'china')
+                ||variant.flavorName == 'america') {
+            dependencies.add("${variant.flavorName}Compile", project(':DroidPluginFix'))
+        } else {
+            dependencies.add("${variant.flavorName}Compile", project(':DroidPlugin'))
+        }
+    }
+}
+

要知道，以下写法是正确的，但就是不生效：

dependencies.add("${variant.flavorName}Compile", 'com.google.code.gson:gson:2.6.2')
+

DroidPluginFix是最新官方适配了Android7、8的DroidPlugin，而DroidPlugin则没有适配，因为历史原因，需要对不同的渠道依赖不同的DroidPlugin版本。

# 六、结语

在公司待了有1年半了，这段时间里对自己的要求很严格，学习了很多新知识，并大胆的用于实践，收获颇多，因为公司业务的特殊性，对gradle以及多渠道的掌握要求比较高，所以，这也是我这段时间来重点学习的一部分，但是毕竟是单独学习这些知识，可能也会存在一些掌握不到位的情况，所以上面提到的知识如果有误或有更好的处理方式，欢迎各位指出和分享，thx~

+ +
+
#脚本#Gradle#多渠道#productFlavors
Gradle入门系列(五) - Gradle其它模块与Plugin插件
Android脚本 - 不一样的Gradle多渠道配置总结2

+ ← + Android脚本 - 不一样的Gradle多渠道配置总结2→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e3a33a/index.html b/pages/e3a33a/index.html new file mode 100644 index 000000000..50547ba4c --- /dev/null +++ b/pages/e3a33a/index.html @@ -0,0 +1,91 @@ + + + + + + AI - stable-diffusion 艺术化二维码 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2023-06-18
目录

AI - stable-diffusion 艺术化二维码

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

系列文章：

# 一、介绍

近日，AI 绘画（stable-diffusion）用来艺术化二维码算是比较火热的事了，这个 idea 是由国人用 Checkpoint + LoRA + QR Code ControlNet 组合实现出来的，下面是几张图片案例：

这是原作者的文章：《AI 生成可扫码图像 — 新 ControlNet 模型展示》 (opens new window)

不过，文章内并没有讲述艺术化二维码的具体过程，也没有现成的 QR Code ControlNet 可供使用（可能出于某些原因没有公布吧，瞎猜的~），从网上收集了一些资料，使用现有的 ControlNet 模型也能够实现同样的效果，下面来看看具体实现步骤。

# 二、实战

需要先下载 2 个 ControlNet 模型：

下载后存放到 stable-diffusion-webui\extensions\sd-webui-controlnet\models 目录下。

注：建议将 ControlNet 插件升级到最新版本，支持更多预处理器，还有更方便好用的 UI。

# 1、生成二维码

我们先准备一张二维码图片，可以通过以下任意一个网址生成：

# 2、灰度处理

  1. 上传二维码
  2. ControlNet Unit 0：打钩启用（Enable）
  3. 预处理器（Preprocessor）：inpaint_global_harmonious
  4. 模型（Model）：control_v1p_sd15_brightness
  5. 权重（Control Weight）：0.4
  6. 开始与停止步骤（Starting Control Step、Ending Control Step）：0 和 1

注：如果你找不到 inpaint_global_harmonious 预处理器，把 ControlNet 插件升级到最新就有了。

# 3、细节处理

  1. 上传二维码
  2. ControlNet Unit 1：打钩启用（Enable）
  3. 预处理器（Preprocessor）：inpaint_global_harmonious
  4. 模型（Model）：control_v11f1e_sd15_tile
  5. 权重（Control Weight）：0.6
  6. 开始与停止步骤（Starting Control Step、Ending Control Step）：0.35 和 0.75

注：如果你页面上没有多个 ControlNet 单元，可以到 Settings 中，找到 Multiple ControlNets 进行设置，详见：《AI - AI 绘画的精准控图(ControlNet)》 (opens new window)

# 4、配置描述

根据你希望在二维码画面中出现的东西进行配置，比如我希望在画面中出现一个战火中的高达，我的参数配置如下：

  1. 正向提示词（Prompt）：masterpiece, best quality, mecha, no humans, black armor, blue eyes, science fiction, fire, laser canon beam, war, conflict, destroyed city background
  2. 反向提示词（Negative prompt）：UnrealisticDream, FastNegativeEmbedding
  3. 采样方法（Sampling method）：Euler a
  4. 采样步数（Sampling steps）：26
  5. CFG 比例（CFG Scale）：6.5
  6. 随机种子（Seed）：1234843297

注：如果你不知道这些配置含义是什么，可以查阅这篇文章：《AI - stable-diffusion(AI 绘画)的搭建与使用》 (opens new window)

配置完描述后，点击 Generate 按钮，等待图片生成即可：

至此，艺术化后的二维码就生成好了，而且是可以被正常扫码识别出来的哦~

# 三、资料

在上述实战中，出现了 1 个新的 ControlNet 预处理器和 2 个新的 ControlNet 模型，它们的作用分别是什么呢？

# 1、预处理器 inpaint_global_harmonious

inpaint_global_harmonious 主要用于局部（遮罩部分）重绘，在原生基于图生图的重绘模式上加入了 ControlNet 的控制，从而让 inpaint 能够更加准确的预测重绘细节。但是注意，和普通局部重绘不同，ControlNet 的 inpaint 模型除了重绘遮罩部分外，遮罩以外的地方也会发生微小变化（重绘），这样做带来的好处是它能够更好地将重绘区域与整体画面融合，让整体出图更加和谐统一。当然你也能将 ControlNet 引导权重调节到最大，此时 ControlNet-inpaint 模型将尽可能得保持遮罩区域以外的画面不发生变化。

传统图生图 inpaint 效果

上图是传统图生图的局部重绘，原图蒙版重绘部分往往会出现与周围环境不相容的独立景物，无法统一整体布局。

ControlNet inpaint 效果

可以看到，对比传统图生图的局部重绘，ControlNet 的 inpaint 模型能在统一整体效果的前提下，补全蒙版部分的内容，同时遮罩外部分的轮廓和细节也得到了较好的保留。

上述介绍源自：https://www.jianshu.com/p/2e433f71f544

# 2、模型 control_v1p_sd15_brightness

该模型为稳定扩散带来亮度控制，允许用户对灰度图像着色或对生成的图像重新着色。

上述介绍源自： +https://aigc.ioclab.com/sd-showcase/brightness-controlnet.html
https://huggingface.co/ioclab/control_v1p_sd15_brightness

# 3、模型 control_v11f1e_sd15_tile

tile 模型原本是为了放大图片而设计的，具体来讲需要先将原图分割为一块一块的小区域(叫做 Tile 或瓦块)，然后分别对每个瓦块进行图生图放大，最后集合所有放大后的瓦块，拼成完整的大图。之所以采用局部放大后拼接的模式是为了减少显存占用。但是这样放大图片也有弊端，那就是必须要求每个小图在图生图时重绘幅度不能太大，因为本质上每个小图使用的也是全图提示词，当重回幅度过高时，老版本 tile 模型很可能会在每个小图里生成全图提示词所描绘的全部内容。

ControlNet1.1 版本后的 Tile 模型更加强大，它具有两种特性：

  • 忽略图像中的细节并生成新的细节。
  • 如果局部瓦片语义和提示不匹配，则忽略全局提示，并根据局部上下文引导扩散。

因为该模型可以生成新的细节并忽略现有的图像细节，所以我们可以使用该模型去除不良细节并添加细化的细节。例如，消除由图像大小调整引起的模糊。

上述介绍源自： +https://www.jianshu.com/p/2e433f71f544
https://github.com/lllyasviel/ControlNet-v1-1-nightly

# 四、分析

我将实战中两个 ControlNet 单元依次生成的图片拆开，得到如下过程图：

结合上述资料中对两个 ControlNet 模型的介绍，可以大致理解为 control_v1p_sd15_brightness 在二维码图片的基础上进行重新着色，但会丢失二维码信息，control_v11f1e_sd15_tile 则在此基础上，对二维码信息细节进行补充。至于预处理器 inpaint_global_harmonious，因为此场景下二维码并不需要进行 inpaint 处理，所以把预处理器设为 none 也是可以的，对结果并不影响。

+ +
+
#AI绘画#AIGC#stable-diffusion#stable-diffusion-webui#ControlNet#二维码#qrcode
AI - AI绘画的精准控图(ControlNet)
AI - 免费搭建一个私有的 ChatGPT

+ ← + AI - 免费搭建一个私有的 ChatGPT→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e3a5cf/index.html b/pages/e3a5cf/index.html new file mode 100644 index 000000000..924f242b8 --- /dev/null +++ b/pages/e3a5cf/index.html @@ -0,0 +1,144 @@ + + + + + + 性能优化 - 内存泄漏（1）入门篇 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-06-29
目录

性能优化 - 内存泄漏（1）入门篇

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

本篇是作为内存泄漏入门，主要说的是一些关于内存泄漏的概念，包括什么是内存泄漏，内存分配的几种策略，为什么会造成内存泄漏 及 如何避免内存泄漏等。

# 1、避免内存泄露的重要性

对于一个APP的评测，最直接的评分点就是用户体验，用户体验除界面设计外，就数APP是否运行流畅较为重要，当APP中出现越来越多内存泄漏时，卡顿特效就会随之而来。类比下电脑，cpu性能低下或内存不足时，程序运行效率就会降低，常见的现象就是运行卡顿。或许你会说现在的安卓手机配置多牛逼，8核的骁龙cpu，4G的运行内存，流畅的运行一个app足够啦，但实际情况是这样的吗？一个安卓APP是运行在一个dalvik虚拟机上的，系统分配给一个dalvik虚拟机的内存是固定的，如：16M,32M,64M（不同手机分配的内存不一样，可能现在的国产机分配的内存会更大，但绝对不会分配全部内存给一个安卓APP），分配给一个APP的运行内存只有几十M，想想是不是有点少了呢？所以在这有限的运行内存中，想让一个APP一直流畅的运行，解决内存泄漏是十分必要的。

# 2、java与c/c++的对比

作为一个使用java开发的程序员，我们知道，java比c/c++更“高级”，这里的“高级”不是说java比其他语言好（我不想引起圣战哈~），而是说java在内存申请与回收方面不需要人为管理，而c/c++则需要自己去分配内存和释放内存。下面对比下两者之间的差别：

  1. 申请内存： +java只要在代码中new一个Object，系统就会自己计算并分配好内存大小；而c/c++则相对麻烦，需要调用malloc(size_t size)，手动计算并传入要分配的内存值。

  2. 释放内存： +java有回收机制，即GC，不需要调用（也可以通过代码调用），一段时间后便会自己去回收已经不需要的内存；而c/c++则需要手动调用free(void *ptr)来释放指针指向的内存空间。

所以说java比c/c++更“高级”，但是java的垃圾回收机制也没有那么智能，因为它在执行垃圾回收时需要根据一个标准去判断这块内存是否是垃圾，当这块垃圾不符合作为垃圾的标准时，GC就不会去回收它，这就产生了内存泄漏，下面开始进入正题。

  • 上述的标准是：某对象不再有任何的引用时才会进行回收。
  • 这里的内存指的是堆内存，堆中存放的就是引用指向的对象实体。

# 二、基本概念

# 1、什么是内存泄露

当一个对象已经不需要再使用，本该被回收时，而有另一个正在使用的对象持有它的引用从而就导致对象不能被回收。这种导致了本该被回收的对象不能被回收而停留在堆内存中，就产生了内存泄漏。简而言之，内存不在GC掌控之内了。

# 2、java中内存分配的几种策略

# 1）静态的

静态的存储区：内存在程序编译的时候就已经分配好，这块内存在整个程序的运行期间都一直存在。它主要存放静态数据、全局的static数据和一些常量。

# 2）栈式的

在执行函数（方法）时，函数中的一些内部变量的存储都可以放在栈中创建，函数执行结束时，这些存储单元就会自动被释放。

# 3）堆式的

也叫动态内存分配。java中需要调用new来申请分配一块内存，依赖GC机制回收。而c/c++则可以通过调用malloc来申请分配一块内存，并且需要自己负责释放。c/c++是可以自己掌控内存的，但要求程序员有很高的素养来解决内存的问题。而java这块对程序员而言并没有很好的方法去解决垃圾内存，需要在编程时就注意自己良好的编程习惯。

  • 堆管理很麻烦，频繁地new/remove会造成大量的内存碎片，这样就会慢慢导致程序效率低下。
  • 对于栈，采用先进后出，完全不会产生碎片，运行效率高且稳定。

下面通过一段代码，来说明一个类被创建时，往堆栈都存放了些什么：

public class Main {
+	int a = 1; // a变量在堆中
+	Person pa = new Person(); // pa变量在堆中，new Person()实例也在堆中
+
+	public void hehe() {
+		int b = 1; // b变量在栈中
+		Person pb = new Person(); // pb变量在栈中，但new Person()实例在堆中
+	}
+}
+
  • 成员变量全部存储在堆中（包括基本数据类型，引用及引用的对象实体）——因为它们属于类，类的实例是存放在堆中的。
  • 局部变量的基本数据类型和引用存储于栈中，引用的对象实体存储在堆中。——因为它们属于方法当中的变量，生命周期会随着方法一直结束。

# 3、java中一些特殊类

类型 回收时机 使用 生命周期
StrongReference 强引用 从不回收 对象的一般保存 JVM停止是才会终止
SoftReference 软引用 当内存不足时 SoftReference结合ReferenceQueue，有效期短 内存不足时终止
WeakReference 弱引用 在垃圾回收时 同软件引用 GC后终止
PhatomReference 虚引用 在垃圾回收时 结合ReferenceQueue来跟踪对象被垃圾回收期回收的活动 GC后终止

开发时，为了防止内存溢出，处理一些比较占用内存并且生命周期长的对象时，可以尽量使用软引用和弱引用。

# 三、实例

# 1、内存泄露例子

单例模式导致对象无法释放从而造成内存泄露

/**
+ * @创建者 CSDN_LQR
+ * @描述 一个简单的单例
+ */
+public class CommonUtil {
+    private static CommonUtil mInstance;
+    private Context mContext;
+    public CommonUtil(Context context) {
+        mContext = context;
+    }
+    public static CommonUtil getmInstance(Context context) {
+        if (mInstance == null) {
+            synchronized (CommonUtil.class) {
+                if (mInstance == null) {
+                    mInstance = new CommonUtil(context);
+                }
+            }
+        }
+        return mInstance;
+    }
+	...
+}
+

这种单例工具类在开发中是很常见的，它本身并没有什么问题。但如果使用不善，那问题就来了：

/**
+ * @创建者 CSDN_LQR
+ * @描述 内存泄漏
+ */
+public class MemoryLeakActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_memory_leak);
+        CommonUtil.getmInstance(this);
+    }
+}
+

在MemoryLeakActivity中获取CommonUtil对象时，把自己作为参数传给了CommonUtil，这会有什么问题呢？因为CommonUtil对象使用了static修饰，是静态变量，在整个APP的运行期内，GC不会回收CommonUtil实例，并且它持有了传入的Activity，当Activity调用onDestroy()销毁时（例如屏幕旋转时，Activity会重建），发现自己还被其他变量引用了，所以该Activity也不会被回收销毁。

# 2、Memory Monitor的简单使用

Android Studio提供了一套Monitors工具，可以实时查看APP的内存分配、CPU占用及网络等情况，本篇主要针对内存分配，所以使用Memory Monitor来验证上面的说法。

# 1）找到Memory Monitor

图中的几个说明很详细，请细看。

MemoryMonitors

# 2）运行APP，证明内存泄漏

先打开APP，看到目前分配的内存为3.43MB。

程序默认占用内存

接着打开MemoryLeakActivity界面（从这里开始），查看到APP目前分配的内存为3.51MB。

打开界面后查看内存占用

我旋转下屏幕，可以看到APP目前分配的内存增加到了3.60MB。（可以认为每创建一个简单的Activity就会占用大约0.1MB内存）

旋转屏幕后，查看内存占用

点击Initiate GC（启动GC），再点击Dump Java Heap（获取当前内存快照）。

启动GC并获取当前内存快照

在Capture区找到刚刚获取的内存快照，找到MemoryLeakActivity，可以发现内存中有2个实例。 +其实上一步中点击Initiate去启动GC，只是证明竖屏时创建的MemoryLeakActivity已经没办法被GC回收，也就是MemoryLeakActivity[0]不在GC的掌握之内，即内存泄漏了。

内存快照

分别点击MemoryLeakActivity实例0和1，可以看到坚屏MemoryLeakActivity[0]还被CommonUtil引用，而横屏MemoryLeakActivity[1]没有被CommonUtil引用。

坚屏MemoryLeakActivity

横屏MemoryLeakActivity

# 3、为什么会内存泄漏

如果不在onCreate()中获取CommonUtil对象的话，在改变屏幕方向后，竖屏的MemoryLeakActivity在调用onDestroy()时，会被GC回收。而这里出现了内存泄漏，就是因为在代码中获取CommonUtil对象搞的鬼。详情如下图所示：

屏幕旋转

# 4、解决方案

既然CommonUtil实例是静态的，存在于整个APP生命周期中，而ApplicationContext在整个APP的生命周期中也一直存在，那就给它传ApplicationContext对象即可。代码修改如下：

public class MemoryLeakActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_memory_leak);
+        CommonUtil.getmInstance(getApplicationContext());
+    }
+}
+

之后重覆上述步骤，可以看到，内存中只有一个MemoryLeakActivity实例了。

没有内存泄漏了

+ +
+
#性能优化#内存泄漏
热修复 - Tinker多渠道加固配置
性能优化 - 内存泄漏（2）工具分析篇

+ ← + 性能优化 - 内存泄漏（2）工具分析篇→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e3acb4/index.html b/pages/e3acb4/index.html new file mode 100644 index 000000000..91ac8b1b4 --- /dev/null +++ b/pages/e3acb4/index.html @@ -0,0 +1,132 @@ + + + + + + Docker - Compose的使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-04-05
目录

Docker - Compose的使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、服务编排

服务编排：按照一定的业务规则批量管理容器

微服务架构的应用系统中一般包含若干个微服务，每个微服务一般都会部署多个实例，如果每个微服务都要手动启动和停止，那么维护的工作量就会很大。

比如这些工作：

  • 要从 Dockerfile build image 或者去 dockerhub 拉取 image
  • 要创建多个 container
  • 要管理这些 container (启动停止删除)

这时候需要使用官方推出的服务编排

# 二、Docker Compose

Docker Compose 是一个编排多容器分布式部署的工具，提供命令集管理容器化应用的完整开发周期，包括服务构建，启动和停止

使用步骤：

  1. 利用 Dockerfile 定义运行环境镜像
  2. 使用 docker-compose.yml 定义组成应用的各服务（启动顺序、关联关系等）
  3. 运行 docker-compose up 启动应用

# 1、安装

如果使用的是 Docker Desktop (opens new window)，那就不需要再额外安装 Compose 了，因为它已经包含了 Docker Compose 。

下面是 Linux 系统下安装 Compose 的方式

# 以编译好的二进制包方式安装到Linux系统中
+$ curl -L https://github.com/docker/compose/releases/download/1.28.6/run.sh > /usr/local/bin/docker-compose
+
+# 设置文件可执行权限
+$ chmod +x /usr/local/bin/docker-compose
+
+# 查看版本信息（-v 或 --version 都可以）
+$ docker-compose --version
+$ docker-compose -v
+

# 2、卸载

# 二进制包方式安装的，删除二进制文件即可
+rm /usr/local/bin/docker-compose
+

# 3、实战

先来编写配置文件，新建一个 docker-compose.yml 文件，文件名是固定的

touch docker-compose.yml
+

这里我用 VSCode 打开进行编辑

code docker-compose.yml
+

文件内容：

version: '3'
+services: 
+  nginx: # 服务名字自行定义
+    image: nginx # 指定通过nginx该镜像进行启动，这里可以指定镜像的版本号，如果不指定，默认为latest
+    ports: # 端口映射，即 -p 参数，将宿主机的80端口映射到容器的80端口
+      - 8090:80
+    links: # 指明当前服务可以访问到jenkins这个服务
+      - jenkins
+    volumes: # 目录映射，即 -v 参数，（宿主机目录:容器目录）
+      - ~/data/lxf/nginx/conf.d:/etc/nginx/conf.d
+  jenkins: # 服务名字自行定义
+    image: jenkins
+    expose:  # 暴露指定的端口
+      - "8080"
+      - "5000"
+

创建 ~/data/lxf/nginx/conf.d 目录，并进入该目录

mkdir -p ~/data/lxf/nginx/conf.d
+cd ~/data/lxf/nginx/conf.d
+

在该目录中创建一个 conf 文件，比如 lxf.conf ，文件内容如下

server {
+  listen 80;
+  access_log off;
+  
+  location / {
+    proxy_pass http://jenkins:8080;
+  }
+}
+

配置反向代理，当访问 80 端口时会反向代理到 http://jenkins:8080，这里的 jenkins 就是上述 docker-compose.yml 文件中 links 指定的 jenkins

在 docker-compose.yml 文件所在目录，使用 docker-compose 启动容器

# -d: 后台启动
+docker-compse up [-d]
+

测试访问

127.0.0.1:8090
+或
+本机ip:8090
+

# 三、引用

Docker Compose 官方文档 (opens new window)

+ +
+
#Docker
Docker - Dockerfile的使用
Python-虚拟环境

+ ← + Python-虚拟环境→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e3eb8a/index.html b/pages/e3eb8a/index.html new file mode 100644 index 000000000..78e80c5de --- /dev/null +++ b/pages/e3eb8a/index.html @@ -0,0 +1,271 @@ + + + + + + Gradle入门系列(四) - 初识Gradle Task | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-01-04
目录

Gradle入门系列(四) - 初识Gradle Task

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# Gradle中的Task

# 一、Task定义及配置

TaskContainer:管理所有的Task，如：增加、查找。

定义（创建）Task

// 直接通过task函数去创建
+task helloTask {
+  println 'i am helloTask.'
+}
+
+// 通过TaskContainer去创建
+this.tasks.create(name: 'helloTask2') {
+  println 'i am helloTask 2.'
+}
+

配置Task

// 给Task指定分组与描述
+task helloTask(group: 'study', description: 'task study'){ // 语法糖
+  ...
+}
+task helloTask {
+  group 'study' // setGroup('study')
+  description 'task study' // setDescription('task study')
+  ...
+}
+

Task除了可以配置group、description外，还可以配置name、type、dependsOn、overwrite、action。

结论：

  • 给Task分组之后，该task会被放到指定组中，方便归类查找。（默认被分组到other中）
  • 给Task添加描述，相当于给方法添加注释。

# 二、Task的执行详情

Task中doFirst与doLast的使用：

task helloTask {
+  println 'i am helloTask.'
+  doFirst {
+    println 'the task group is: ' + group
+  }
+  // doFirst、doLast可以定义多个
+  doFirst {}
+}
+// 外部指定doFirst（会比在闭包内部指定的doFirst先执行）
+helloTask.doFirst {
+  println 'the task description is: ' + description
+}
+
+// 统计build执行时长
+def startBuildTime, endBuildTime
+this.afterEvaluate { Project project ->
+  // 保证要找的task已经配置完毕
+  def preBuildTask = project.tasks.getByName('preBuild') // 执行build任务时，第一个被执行的Task
+  preBuildTask.doFirst {
+    startBuildTime = System.currentTimeMillis()
+  }
+  def buildTask = project.tasks.getByName('build') // 执行build任务时，最后一个被执行的Task
+  buildTask.doLast {
+    endBuildTime = System.currentTimeMillis()
+    println "the build time is: ${endBuildTime - startBuildTime}"
+  }
+}
+

结论：

  • Task闭包中直接编写的代码，会在配置阶段执行。可以通过doFirst、doLast块将代码逻辑放到执行阶段中执行。
  • doFirst、doLast可以指定多个。
  • 外部指定的doFirst、doLast会比内部指定的先执行。
  • doFirst、doLast可以对gradle中提供的已有的task进行扩展。

# 三、Task的执行顺序

task执行顺序指定的三种方式：

  1. dependsOn强依赖方式
  2. 通过Task输入输出指定（与第1种等效）
  3. 通过API指定执行顺序

# 1、Task的依赖

// ============= dependsOn强依赖方式 =============
+task taskX {
+  doLast {
+      println 'taskX'
+  }
+}
+task taskY {
+  doLast {
+      println 'taskY'
+  }
+}
+// 方式一：静态依赖
+// task taskZ(dependsOn: taskY) // 依赖一个task
+task taskZ(dependsOn: [taskX, taskY]) { // 依赖多个task，需要用数组[]表示
+  doLast {
+      println 'taskZ'
+  }
+}
+// 方式二：静态依赖
+taskZ.dependsOn(taskX, taskY)
+// 方式三：动态依赖
+task taskZ() {
+  dependsOn this.tasks.findAll {    // 依赖所有以lib开头的task
+    task -> return task.name.startsWith('lib')
+  }
+  doLast {
+      println 'taskZ'
+  }
+}
+

其他：

  • taskZ依赖了taskX与taskY，所以在执行taskZ时，会先执行taskX、taskY。
  • taskZ依赖了taskX与taskY，但taskX与taskY没有关系，它们的执行顺序是随机的。

# 2、Task的输入输出

inputs和outputs是Task的属性。 +inputs可以是任意数据类型对象，而outputs只能是文件（或文件夹）。 +TaskA的outputs可以作为TaskB的inputs。

例子：writeTask输入扩展属性，输出文件，readTask输入writeTask的输出文件

ext {
+    versionCode = '1.0.0'
+    versionName = '100'
+    versionInfo = 'App的第1个版本，完成聊天功能'
+    destFile = file('release.xml')
+    if (destFile != null && !destFile.exists()) {
+        destFile.createNewFile()
+    }
+}
+
+task writeTask {
+    inputs.property('versionCode', this.versionCode)
+    inputs.property('versionName', this.versionName)
+    inputs.property('versionInfo', this.versionInfo)
+    outputs.file this.destFile
+    doLast {
+        def data = inputs.getProperties() // 返回一个map
+        File file = outputs.getFiles().getSingleFile()
+        // 将map转为实体对象
+        def versionMsg = new VersionMsg(data)
+        def sw = new StringWriter()
+        def xmlBuilder = new MarkupBuilder(sw)
+        if (file.text != null && file.text.size() <= 0) { // 文件中没有内容
+            // 实际上，xmlBuilder将xml数据写入到sw中
+            xmlBuilder.releases { // <releases>
+                release { // <releases>的子节点<release>
+                    versionCode(versionMsg.versionCode)
+                    // <release>的子节点<versionCode>1.0.0<versionCode>
+                    versionName(versionMsg.versionName)
+                    versionInfo(versionMsg.versionInfo)
+                }
+            }
+            // 将sw里的内容写到文件中
+            file.withWriter { writer ->
+                writer.append(sw.toString())
+            }
+        } else { // 已经有其它版本信息了
+            xmlBuilder.release {
+                versionCode(versionMsg.versionCode)
+                versionName(versionMsg.versionName)
+                versionInfo(versionMsg.versionInfo)
+            }
+            def lines = file.readLines()
+            def lengths = lines.size() - 1
+            file.withWriter { writer ->
+                lines.eachWithIndex { String line, int index ->
+                    if (index != lengths) {
+                        writer.append(line + '\r\n')
+                    } else if (index == lengths) {
+                        writer.append(sw.toString() + '\r\n')
+                        writer.append(line + '\r\n')
+                    }
+                }
+            }
+        }
+    }
+}
+
+task readTask {
+    inputs.file destFile
+    doLast {
+        def file = inputs.files.singleFile
+        println file.text
+    }
+}
+
+task taskTest(dependsOn: [writeTask, readTask]) {
+    doLast {
+        println '任务执行完毕'
+    }
+}
+
+class VersionMsg {
+    String versionCode
+    String versionName
+    String versionInfo
+}
+

通过执行 gradle taskTask 之后，就可以在工程目录下看到release.xml文件了。

结论：

  • 因为writeTask与readTask通过inputs、outputs产生了关联关系，所以，readTask一定会在writeTask执行之后才执行。

# 3、Task API指定顺序

task指定执行顺序的api有：

  • mustRunAfter : 强行指定在某个或某些task执行之后才执行。
  • shouldRunAfter : 与mustRunAfter一样，但不强制。
task taskX {
+    doLast {
+        println 'taskX'
+    }
+}
+task taskY {
+    // shouldRunAfter taskX
+    mustRunAfter taskX
+    doLast {
+        println 'taskY'
+    }
+}
+task taskZ {
+    mustRunAfter taskY
+    doLast {
+        println 'taskZ'
+    }
+}
+

通过执行 gradle taskY taskZ taskX 之后，可以看到终端还是按taskX、taskY、taskZ顺序执行的。

# 四、挂接到构建生命周期

例子：build任务执行完成后，执行一个自定义task

this.afterEvaluate { Project project ->
+    def buildTask = project.tasks.getByName('build')
+    if (buildTask == null) throw GradleException('the build task is not found')
+    buildTask.doLast {
+        taskZ.execute()
+    }
+}
+

例子：Tinker将自定义的manifestTask插入到了gradle脚本中processManifest与processResources这两个任务之间

TinkerManifestTask manifestTask = project.tasks.create("tinkerProcess${variantName}Manifest", TinkerManifestTask)
+...
+manifestTask.mustRunAfter variantOutput.processManifest
+variantOutput.processResources.dependsOn manifestTask
+

# 五、Task类型

Gradle DSL Version 5.1 (opens new window)

Copy - Gradle DSL Version 5.1 (opens new window)

+ +
+
#脚本#Gradle
Gradle入门系列(三) - 初识Gradle与Project
Gradle入门系列(五) - Gradle其它模块与Plugin插件

+ ← + Gradle入门系列(五) - Gradle其它模块与Plugin插件→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e4ed73/index.html b/pages/e4ed73/index.html new file mode 100644 index 000000000..02b64ee79 --- /dev/null +++ b/pages/e4ed73/index.html @@ -0,0 +1,1095 @@ + + + + + + Android音视频 - Libyuv使用实战 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2019-09-20
目录

Android音视频 - Libyuv使用实战

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

近期换部门，从事之前从未接触过的Android音视频开发，主要涉及到USB摄像头调用、libyuv处理Nv21图像、直播推流等功能，对应的库有【UVCCamera】 (opens new window)、【libyuv】 (opens new window)等，刚接触没经验也没人带挺难搞的，而且网上资料很凌乱，所以，开此篇总结&汇总一下近期的研究，兴许可以帮助到别人，本人亦是新手，文中如有不正确的地方，欢迎指出点评。

# 一、libyuv入门

先简单说明一下，不管是Android手机的Camera，或是外接的UVCCamera（免驱摄像头），它们获取到的yuv图像格式都是nv21格式的，针对业务，我们可能需要对摄像头获取到的图像进行各种处理，如：镜像、旋转、缩放、裁剪等。

# 1、yuv概念

总的来说，我们要做的yuv数据处理，无非就是针对各种图像格式下yuv数据（byte[]）的转换、调整。举个例子：

  1. NV21:安卓的模式。存储顺序是先存Y，再存U，再VU交替存储，格式为：YYYYVUVUVU。
  2. I420:又叫YU12，安卓的模式。存储顺序是先存Y，再存U，最后存V，格式为YYYYUUUVVV。

可以看到，NV21与I420（都属于YUV420）之间的差别在于U和V的存储位置，所以，NV21要转换成I420，就必须把NV21中的U和V调整为I420的方式存储即可，其他格式之间的转换以此类推。

# 2、libyuv概念

libyuv是Google开源的yuv图像处理库，实现对各种yuv数据之间的转换，包括数据转换，裁剪，缩放，旋转。尽管libyuv对yuv数据处理的核心进行了封装，但还是要求开发者对各种格式的区别有所了解，这样才能正常调用对应方法，进行转换。在使用这个库之前，如有时间，建议先去了解下yuv的相关知识，相关的文章推荐如下：

# 3、libyuv核心方法

通过git下载下来的libyuv源码目录，有几个文件需要我们了解下，分别是：

// 格式转换（NV21、NV12、I420等格式互转）
+libyuv\include\libyuv\convert_from.h
+// 图像处理（镜像、旋转、缩放、裁剪）
+libyuv\include\libyuv\planar_functions.h
+libyuv\include\libyuv\rotate.h
+libyuv\include\libyuv\scale.h
+libyuv\include\libyuv\convert.h
+

以上的几个头文件中声明了libyuv对yuv数据处理的一些函数，我们后续需要使用到这些函数来处理yuv数据的转换和修改。

# 二、libyuv进阶

通过上面的入门内容与资料，应该对yuv与libyuv有比较表面的理解了，但要完全理解透还是得靠自己再多看看其他资料才行，下面直接使用libyuv这个库，实现一些实际的代码逻辑，完全干货分享，如有错误请不吝赐教。

# 1、yuv转换格式

因为libyuv对于图像的处理基本上都是针对i420格式的，所以，不管摄像头获取到的图像格式如何，都需要在进行图像处理之前转换成i420格式才行。这里整理了比较常用的nv21与i420、nv12与i420互转的cpp代码实现：

nv21是Android摄像头获取到的图像格式。 +nv12是iOS摄像头获取到的图像格式。

// nv21 --> i420
+void nv21ToI420(jbyte *src_nv21_data, jint width, jint height, jbyte *src_i420_data) {
+    jint src_y_size = width * height;
+    jint src_u_size = (width >> 1) * (height >> 1);
+
+    jbyte *src_nv21_y_data = src_nv21_data;
+    jbyte *src_nv21_vu_data = src_nv21_data + src_y_size;
+
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_y_size + src_u_size;
+
+    libyuv::NV21ToI420((const uint8 *) src_nv21_y_data, width,
+                       (const uint8 *) src_nv21_vu_data, width,
+                       (uint8 *) src_i420_y_data, width,
+                       (uint8 *) src_i420_u_data, width >> 1,
+                       (uint8 *) src_i420_v_data, width >> 1,
+                       width, height);
+}
+
+// i420 --> nv21
+void i420ToNv21(jbyte *src_i420_data, jint width, jint height, jbyte *src_nv21_data) {
+    jint src_y_size = width * height;
+    jint src_u_size = (width >> 1) * (height >> 1);
+
+    jbyte *src_nv21_y_data = src_nv21_data;
+    jbyte *src_nv21_uv_data = src_nv21_data + src_y_size;
+
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_y_size + src_u_size;
+
+
+    libyuv::I420ToNV21(
+            (const uint8 *) src_i420_y_data, width,
+            (const uint8 *) src_i420_u_data, width >> 1,
+            (const uint8 *) src_i420_v_data, width >> 1,
+            (uint8 *) src_nv21_y_data, width,
+            (uint8 *) src_nv21_uv_data, width,
+            width, height);
+}
+
+// nv12 --> i420 
+void nv12ToI420(jbyte *Src_data, jint src_width, jint src_height, jbyte *Dst_data) {
+	// NV12 video size
+	jint NV12_Size = src_width * src_height * 3 / 2;
+	jint NV12_Y_Size = src_width * src_height;
+
+	// YUV420 video size
+	jint I420_Size = src_width * src_height * 3 / 2;
+	jint I420_Y_Size = src_width * src_height;
+	jint I420_U_Size = (src_width >> 1)*(src_height >> 1);
+	jint I420_V_Size = I420_U_Size;
+
+    // src: buffer address of Y channel and UV channel
+    jbyte *Y_data_Src = Src_data;
+    jbyte *UV_data_Src = Src_data + NV12_Y_Size;
+    jint src_stride_y = src_width;
+    jint src_stride_uv = src_width;
+
+    //dst: buffer address of Y channel、U channel and V channel
+    jbyte *Y_data_Dst = Dst_data;
+    jbyte *U_data_Dst = Dst_data + I420_Y_Size;
+    jbyte *V_data_Dst = Dst_data + I420_Y_Size + I420_U_Size;
+    jint Dst_Stride_Y = src_width;
+    jint Dst_Stride_U = src_width >> 1;
+    jint Dst_Stride_V = Dst_Stride_U;
+
+    libyuv::NV12ToI420((const uint8 *) Y_data_Src, src_stride_y,
+                         (const uint8 *) UV_data_Src, src_stride_uv,
+                         (uint8 *) Y_data_Dst, Dst_Stride_Y,
+                         (uint8 *) U_data_Dst, Dst_Stride_U,
+                         (uint8 *) V_data_Dst, Dst_Stride_V,
+                         src_width, src_height);
+}
+
+// i420 --> nv12 
+void i420ToNv12(jbyte *src_i420_data, jint width, jint height, jbyte *src_nv12_data) {
+    jint src_y_size = width * height;
+    jint src_u_size = (width >> 1) * (height >> 1);
+
+    jbyte *src_nv12_y_data = src_nv12_data;
+    jbyte *src_nv12_uv_data = src_nv12_data + src_y_size;
+
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_y_size + src_u_size;
+
+    libyuv::I420ToNV12(
+            (const uint8 *) src_i420_y_data, width,
+            (const uint8 *) src_i420_u_data, width >> 1,
+            (const uint8 *) src_i420_v_data, width >> 1,
+            (uint8 *) src_nv12_y_data, width,
+            (uint8 *) src_nv12_uv_data, width,
+            width, height);
+}
+

# 2、yuv处理图像

针对常见的图像处理，在这里也整理了一些，主要包括 镜像、旋转、缩放、剪裁。 +要注意的是，所有的图像处理，都是基于i420数据格式的！

// 镜像
+void mirrorI420(jbyte *src_i420_data, jint width, jint height, jbyte *dst_i420_data) {
+    jint src_i420_y_size = width * height;
+    // jint src_i420_u_size = (width >> 1) * (height >> 1);
+    jint src_i420_u_size = src_i420_y_size >> 2;
+
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_i420_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_i420_y_size + src_i420_u_size;
+
+    jbyte *dst_i420_y_data = dst_i420_data;
+    jbyte *dst_i420_u_data = dst_i420_data + src_i420_y_size;
+    jbyte *dst_i420_v_data = dst_i420_data + src_i420_y_size + src_i420_u_size;
+
+    libyuv::I420Mirror((const uint8 *) src_i420_y_data, width,
+                       (const uint8 *) src_i420_u_data, width >> 1,
+                       (const uint8 *) src_i420_v_data, width >> 1,
+                       (uint8 *) dst_i420_y_data, width,
+                       (uint8 *) dst_i420_u_data, width >> 1,
+                       (uint8 *) dst_i420_v_data, width >> 1,
+                       width, height);
+}
+
+// 旋转
+void rotateI420(jbyte *src_i420_data, jint width, jint height, jbyte *dst_i420_data, jint degree) {
+    jint src_i420_y_size = width * height;
+    jint src_i420_u_size = (width >> 1) * (height >> 1);
+
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_i420_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_i420_y_size + src_i420_u_size;
+
+    jbyte *dst_i420_y_data = dst_i420_data;
+    jbyte *dst_i420_u_data = dst_i420_data + src_i420_y_size;
+    jbyte *dst_i420_v_data = dst_i420_data + src_i420_y_size + src_i420_u_size;
+
+    //要注意这里的width和height在旋转之后是相反的
+    if (degree == libyuv::kRotate90 || degree == libyuv::kRotate270) {
+        libyuv::I420Rotate((const uint8 *) src_i420_y_data, width,
+                           (const uint8 *) src_i420_u_data, width >> 1,
+                           (const uint8 *) src_i420_v_data, width >> 1,
+                           (uint8 *) dst_i420_y_data, height,
+                           (uint8 *) dst_i420_u_data, height >> 1,
+                           (uint8 *) dst_i420_v_data, height >> 1,
+                           width, height,
+                           (libyuv::RotationMode) degree);
+    }else{
+        libyuv::I420Rotate((const uint8 *) src_i420_y_data, width,
+                           (const uint8 *) src_i420_u_data, width >> 1,
+                           (const uint8 *) src_i420_v_data, width >> 1,
+                           (uint8 *) dst_i420_y_data, width,
+                           (uint8 *) dst_i420_u_data, width >> 1,
+                           (uint8 *) dst_i420_v_data, width >> 1,
+                           width, height,
+                           (libyuv::RotationMode) degree);
+    }
+}
+
+// 缩放
+void scaleI420(jbyte *src_i420_data, jint width, jint height, jbyte *dst_i420_data, jint dst_width,
+               jint dst_height, jint mode) {
+
+    jint src_i420_y_size = width * height;
+    jint src_i420_u_size = (width >> 1) * (height >> 1);
+    jbyte *src_i420_y_data = src_i420_data;
+    jbyte *src_i420_u_data = src_i420_data + src_i420_y_size;
+    jbyte *src_i420_v_data = src_i420_data + src_i420_y_size + src_i420_u_size;
+
+    jint dst_i420_y_size = dst_width * dst_height;
+    jint dst_i420_u_size = (dst_width >> 1) * (dst_height >> 1);
+    jbyte *dst_i420_y_data = dst_i420_data;
+    jbyte *dst_i420_u_data = dst_i420_data + dst_i420_y_size;
+    jbyte *dst_i420_v_data = dst_i420_data + dst_i420_y_size + dst_i420_u_size;
+
+    libyuv::I420Scale((const uint8 *) src_i420_y_data, width,
+                      (const uint8 *) src_i420_u_data, width >> 1,
+                      (const uint8 *) src_i420_v_data, width >> 1,
+                      width, height,
+                      (uint8 *) dst_i420_y_data, dst_width,
+                      (uint8 *) dst_i420_u_data, dst_width >> 1,
+                      (uint8 *) dst_i420_v_data, dst_width >> 1,
+                      dst_width, dst_height,
+                      (libyuv::FilterMode) mode);
+}
+
+// 裁剪
+void cropI420(jbyte *src_i420_data, jint src_length, jint width, jint height, 
+				jbyte *dst_i420_data, jint dst_width, jint dst_height, jint left, jint top){
+    jint dst_i420_y_size = dst_width * dst_height;
+    jint dst_i420_u_size = (dst_width >> 1) * (dst_height >> 1);
+
+    jbyte *dst_i420_y_data = dst_i420_data;
+    jbyte *dst_i420_u_data = dst_i420_data + dst_i420_y_size;
+    jbyte *dst_i420_v_data = dst_i420_data + dst_i420_y_size + dst_i420_u_size;
+
+    libyuv::ConvertToI420((const uint8 *) src_i420_data, src_length,
+                          (uint8 *) dst_i420_y_data, dst_width,
+                          (uint8 *) dst_i420_u_data, dst_width >> 1,
+                          (uint8 *) dst_i420_v_data, dst_width >> 1,
+                          left, top,
+                          width, height,
+                          dst_width, dst_height,
+                          libyuv::kRotate0, libyuv::FOURCC_I420);
+}
+

# 3、jni实现YuvUtil

下面编写YuvUtil.java，并通过jni实现上述方法的调用，需要在自己的libyuv module目录下，分别建议3个文件：

  • src/main/cpp/YuvJni.cpp
  • src/main/java/com/libyuv/util/YuvUtil.java
  • CMakeLists.txt

cpp/libyuv就是Google官方的libyuv源码，偷懒的话，可以直接“借鉴”这个开源项目：【LibyuvDemo】 (opens new window)，我也是抄这里的，感谢作者~但请注意，【LibyuvDemo】中的代码是有问题的，主要是YuvJni.cpp的代码逻辑没处理好，下面的YuvJni.cpp是我修复后的代码。

# 1）YuvJni.cpp

以下是YuvJni.cpp代码实现，因为篇幅太长，不利用阅读，故删去上述已贴出代码，这里只贴出YuvJni.cpp中其余核心代码。 +注意，这并非是完全代码，需要整合上面代码后（很简单的~），方可使用。

#include <jni.h>
+#include <string>
+#include "libyuv.h"
+
+...
+---------- 因为篇幅太长，这里去掉了上述重复的代码，需要使用者手动修正！ ----------
+---------- 1、这里需要添加yuv转换格式代码 ----------
+---------- 2、这里需要添加yuv处理图像代码 ----------
+...
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvCompress(JNIEnv *env, jclass type,
+                                         jbyteArray nv21Src, jint width,
+                                         jint height, jbyteArray i420Dst,
+                                         jint dst_width, jint dst_height,
+                                         jint mode, jint degree,
+                                         jboolean isMirror) {
+
+    jbyte *src_nv21_data = env->GetByteArrayElements(nv21Src, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(i420Dst, NULL);
+    jbyte *tmp_dst_i420_data = NULL;
+
+    // nv21转化为i420
+    jbyte *i420_data = (jbyte *) malloc(sizeof(jbyte) * width * height * 3 / 2);
+    nv21ToI420(src_nv21_data, width, height, i420_data);
+    tmp_dst_i420_data = i420_data;
+
+    // 镜像
+    jbyte *i420_mirror_data = NULL;
+    if(isMirror){
+        i420_mirror_data = (jbyte *)malloc(sizeof(jbyte) * width * height * 3 / 2);
+        mirrorI420(tmp_dst_i420_data, width, height, i420_mirror_data);
+        tmp_dst_i420_data = i420_mirror_data;
+    }
+
+    // 缩放
+    jbyte *i420_scale_data = NULL;
+    if(width != dst_width || height != dst_height){
+        i420_scale_data = (jbyte *)malloc(sizeof(jbyte) * width * height * 3 / 2);
+        scaleI420(tmp_dst_i420_data, width, height, i420_scale_data, dst_width, dst_height, mode);
+        tmp_dst_i420_data = i420_scale_data;
+        width = dst_width;
+        height = dst_height;
+    }
+
+    // 旋转
+    jbyte *i420_rotate_data = NULL;
+    if (degree == libyuv::kRotate90 || degree == libyuv::kRotate180 || degree == libyuv::kRotate270){
+        i420_rotate_data = (jbyte *)malloc(sizeof(jbyte) * width * height * 3 / 2);
+        rotateI420(tmp_dst_i420_data, width, height, i420_rotate_data, degree);
+        tmp_dst_i420_data = i420_rotate_data;
+    }
+
+    // 同步数据
+    // memcpy(dst_i420_data, tmp_dst_i420_data, sizeof(jbyte) * width * height * 3 / 2);
+    jint len = env->GetArrayLength(i420Dst);
+    memcpy(dst_i420_data, tmp_dst_i420_data, len);
+    tmp_dst_i420_data = NULL;
+    env->ReleaseByteArrayElements(i420Dst, dst_i420_data, 0);
+
+    // 释放
+    if(i420_data != NULL) free(i420_data);
+    if(i420_mirror_data != NULL) free(i420_mirror_data);
+    if(i420_scale_data != NULL) free(i420_scale_data);
+    if(i420_rotate_data != NULL) free(i420_rotate_data);
+}
+
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvCropI420(JNIEnv *env, jclass type, jbyteArray src_, jint width,
+                                     jint height, jbyteArray dst_, jint dst_width, jint dst_height,
+                                     jint left, jint top) {
+    //裁剪的区域大小不对
+    if (left + dst_width > width || top + dst_height > height) {
+        return;
+    }
+    //left和top必须为偶数，否则显示会有问题
+    if (left % 2 != 0 || top % 2 != 0) {
+        return;
+    }
+	// i420数据裁剪
+    jint src_length = env->GetArrayLength(src_);
+    jbyte *src_i420_data = env->GetByteArrayElements(src_, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(dst_, NULL);
+    cropI420(src_i420_data, src_length, width, height, dst_i420_data, dst_width, dst_height, left, top);
+    env->ReleaseByteArrayElements(dst_, dst_i420_data, 0);
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvMirrorI420(JNIEnv *env, jclass type, jbyteArray i420Src,
+                                          jint width, jint height, jbyteArray i420Dst) {
+    jbyte *src_i420_data = env->GetByteArrayElements(i420Src, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(i420Dst, NULL);
+    // i420数据镜像
+    mirrorI420(src_i420_data, width, height, dst_i420_data);
+    env->ReleaseByteArrayElements(i420Dst, dst_i420_data, 0);
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvScaleI420(JNIEnv *env, jclass type, jbyteArray i420Src,
+                                          jint width, jint height, jbyteArray i420Dst,
+                                          jint dstWidth, jint dstHeight, jint mode) {
+    jbyte *src_i420_data = env->GetByteArrayElements(i420Src, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(i420Dst, NULL);
+    // i420数据缩放
+    scaleI420(src_i420_data, width, height, dst_i420_data, dstWidth, dstHeight, mode);
+    env->ReleaseByteArrayElements(i420Dst, dst_i420_data, 0);
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvRotateI420(JNIEnv *env, jclass type, jbyteArray i420Src,
+                                           jint width, jint height, jbyteArray i420Dst, jint degree) {
+    jbyte *src_i420_data = env->GetByteArrayElements(i420Src, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(i420Dst, NULL);
+    // i420数据旋转
+    rotateI420(src_i420_data, width, height, dst_i420_data, degree);
+    env->ReleaseByteArrayElements(i420Dst, dst_i420_data, 0);
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvNV21ToI420(JNIEnv *env, jclass type, jbyteArray nv21Src,
+                                           jint width, jint height, jbyteArray i420Dst) {
+    jbyte *src_nv21_data = env->GetByteArrayElements(nv21Src, NULL);
+    jbyte *dst_i420_data = env->GetByteArrayElements(i420Dst, NULL);
+    // nv21转化为i420
+    nv21ToI420(src_nv21_data, width, height, dst_i420_data);
+    env->ReleaseByteArrayElements(i420Dst, dst_i420_data, 0);
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_libyuv_util_YuvUtil_yuvI420ToNV21(JNIEnv *env, jclass type, jbyteArray i420Src,
+                                           jint width, jint height, jbyteArray nv21Dst) {
+
+    jbyte *src_i420_data = env->GetByteArrayElements(i420Src, NULL);
+    jbyte *dst_nv21_data = env->GetByteArrayElements(nv21Dst, NULL);
+	// i420转化为nv21
+    i420ToNv21(src_i420_data, width, height, dst_nv21_data);
+    env->ReleaseByteArrayElements(nv21Dst, dst_nv21_data, 0);
+}
+

# 2）YuvUtil.java

以下是YuvUtil.java全部代码，与开源库中的有所不同，修复个别bug，并增加多个图像处理方法及注释。

提示：原Demo中的YuvUtil#compressYUV()在处理镜像时，会导致图像花屏、app闪退等问题，使用本文中修复后的代码，亲测可稳定处理yuv图像流数据。这里改名为yuvCompress()。

package com.libyuv.util;
+
+public class YuvUtil {
+
+    static {
+        System.loadLibrary("yuvutil");
+    }
+
+    /**
+     * YUV数据的基本的处理（nv21-->i420-->mirror-->scale-->rotate）
+     *
+     * @param nv21Src    原始数据
+     * @param width      原始的宽
+     * @param height     原始的高
+     * @param dst_width  缩放的宽
+     * @param i420Dst    目标数据
+     * @param dst_height 缩放的高
+     * @param mode       压缩模式。这里为0，1，2，3 速度由快到慢，质量由低到高，一般用0就好了，因为0的速度最快
+     * @param degree     旋转的角度，90，180和270三种。切记，如果角度是90或270，则最终i420Dst数据的宽高会调换。
+     * @param isMirror   是否镜像，一般只有270的时候才需要镜像
+     */
+    public static native void yuvCompress(byte[] nv21Src, int width, int height, byte[] i420Dst, int dst_width, int dst_height, int mode, int degree, boolean isMirror);
+
+    /**
+     * yuv数据的裁剪操作
+     *
+     * @param i420Src    原始数据
+     * @param width      原始的宽
+     * @param height     原始的高
+     * @param i420Dst    输出数据
+     * @param dst_width  输出的宽
+     * @param dst_height 输出的高
+     * @param left       裁剪的x的开始位置，必须为偶数，否则显示会有问题
+     * @param top        裁剪的y的开始位置，必须为偶数，否则显示会有问题
+     **/
+    public static native void yuvCropI420(byte[] i420Src, int width, int height, byte[] i420Dst, int dst_width, int dst_height, int left, int top);
+
+    /**
+     * yuv数据的镜像操作
+     *
+     * @param i420Src i420原始数据
+     * @param width
+     * @param height
+     * @param i420Dst i420目标数据
+     */
+    public static native void yuvMirrorI420(byte[] i420Src, int width, int height, byte[] i420Dst);
+
+    /**
+     * yuv数据的缩放操作
+     *
+     * @param i420Src   i420原始数据
+     * @param width     原始宽度
+     * @param height    原始高度
+     * @param i420Dst   i420目标数据
+     * @param dstWidth  目标宽度
+     * @param dstHeight 目标高度
+     * @param mode      压缩模式 ，0~3，质量由低到高，一般传入0
+     */
+    public static native void yuvScaleI420(byte[] i420Src, int width, int height, byte[] i420Dst, int dstWidth, int dstHeight, int mode);
+
+    /**
+     * yuv数据的旋转操作
+     *
+     * @param i420Src i420原始数据
+     * @param width
+     * @param height
+     * @param i420Dst i420目标数据
+     * @param degree  旋转角度
+     */
+    public static native void yuvRotateI420(byte[] i420Src, int width, int height, byte[] i420Dst, int degree);
+
+    /**
+     * 将NV21转化为I420
+     *
+     * @param nv21Src 原始I420数据
+     * @param width   原始的宽
+     * @param width   原始的高
+     * @param i420Dst 转化后的NV21数据
+     */
+    public static native void yuvNV21ToI420(byte[] nv21Src, int width, int height, byte[] i420Dst);
+
+    /**
+     * 将I420转化为NV21
+     *
+     * @param i420Src 原始I420数据
+     * @param width   原始的宽
+     * @param width   原始的高
+     * @param nv21Src 转化后的NV21数据
+     **/
+    public static native void yuvI420ToNV21(byte[] i420Src, int width, int height, byte[] nv21Src);
+}
+
+

# 3）CMakeLists.txt

CMakeLists.txt全部内容如下：

cmake_minimum_required(VERSION 3.4.1)
+include_directories(src/main/cpp/libyuv/include)
+add_subdirectory(src/main/cpp/libyuv ./build)
+aux_source_directory(src/main/cpp SRC_FILE)
+add_library(yuvutil SHARED ${SRC_FILE})
+find_library(log-lib log)
+target_link_libraries(yuvutil ${log-lib} yuv)
+

# 4）build.gradle

需要在module的build.gradle中指定下NDK的相关配置：

android {
+    defaultConfig {
+		...
+        externalNativeBuild {
+            cmake {
+                cppFlags ""
+            }
+        }
+    }
+    externalNativeBuild {
+        cmake {
+            path 'CMakeLists.txt'
+        }
+    }
+}
+

# 5）编译so动态库

通过点击执行 Build->Mark Module 'libyuv' ，编译完成后，在build/intermediates/cmake目录下，可以得到各平台的so库文件了。

注意，如果你想生成包含armeabi平台的so动态库，那么需要在local.properties中指定低版本的NDK，比如：r14b。 +点击【旧版NDK下载页面】 (opens new window)，找到你想使用的NDK版本下载后配置下即可，我建议用r14b。

# 三、libyuv实战

需求：

  1. 使用UVCCamera（免驱摄像头）充当Android设备前置摄像头，获取实时视频图像数据。
  2. APP需要显示2个图像窗口，窗口1显示UVCCamera实时图像，窗口2显示使用YuvUtil处理过后的yuv数据图像。

实现：

  1. 使用 saki4510t的【UVCCamera】 (opens new window) 实现USB摄像头的启动和预览。
  2. 使用 YuvUtil对yuv数据进行各种处理后，再利用YuvImage将yuv转成Bitmap。
  3. 最后，通过SurfaceView将转换后的Bitmap绘制并显示出来。

# 1、界面布局

根据上述需求，在布局中放置2个图像窗口控件，分别是

  1. UVCCameraTextureView：用于UVCCamera直接显示摄像头的预览图像。
  2. BitmapSurfaceView：用于绘制Bitmap的SurfaceView。
<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:background="@android:color/black"
+              android:orientation="horizontal">
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:orientation="vertical">
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:text="本地镜像图像"
+            android:textColor="@android:color/white"/>
+
+        <com.serenegiant.usb.widget.UVCCameraTextureView
+            android:id="@+id/camera_view_L"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_gravity="center"/>
+
+    </LinearLayout>
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:orientation="vertical">
+
+        <TextView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:text="LibYUV处理图像"
+            android:textColor="@android:color/white"/>
+
+        <com.lqr.demo.widget.BitmapSurfaceView
+            android:id="@+id/camera_view_R"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_gravity="center"/>
+
+    </LinearLayout>
+
+</LinearLayout>
+

# 2、BitmapSurfaceView

很简单，在子线程中，不断使用SurfaceHolder+Canvas绘制Bitmap而已。 +要绘制的Bitmap由外界通过 BitmapSurfaceView#drawBitmap(Bitmap bitmap) 方法传入。

/**
+ * @创建者 LQR
+ * @时间 2019/9/18
+ * @描述 专门绘制Bitmap的SurfaceView
+ */
+public class BitmapSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
+
+    private SurfaceHolder mHolder;
+    private Thread mThread;
+    private boolean mIsDrawing;
+    private Bitmap mBitmap;
+    private Paint mPaint;
+
+    public BitmapSurfaceView(Context context) {
+        this(context, null);
+    }
+
+    public BitmapSurfaceView(Context context, AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public BitmapSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        mHolder = getHolder();
+        mHolder.addCallback(this);
+        mPaint = new Paint();
+    }
+
+    @Override
+    public void surfaceCreated(SurfaceHolder holder) {
+        mThread = new Thread(this);
+        mThread.start();
+        mIsDrawing = true;
+    }
+
+    @Override
+    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
+    }
+
+    @Override
+    public void surfaceDestroyed(SurfaceHolder holder) {
+        mIsDrawing = false;
+    }
+
+    @Override
+    public void run() {
+        while (mIsDrawing) {
+            try {
+                if (mHolder != null && mBitmap != null) {
+                    Canvas canvas = mHolder.lockCanvas();
+                    canvas.drawBitmap(mBitmap, 0, 0, mPaint);
+                    mHolder.unlockCanvasAndPost(canvas);
+                    Thread.sleep(10);
+                }
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+    }
+
+    public void drawBitmap(final Bitmap bitmap) {
+        post(new Runnable() {
+            @Override
+            public void run() {
+                mBitmap = bitmap;
+            }
+        });
+    }
+}
+

至此，布局完成，下面是逻辑代码。

# 3、UVCCamera本地预览镜像

需求是将USB摄像头充当设备的前置摄像头，所以需要将摄像头捕获到的图像进行镜像处理，需要自定义一个UVCCameraHandler，具体看代码注释。

镜像：就是将图像左右像素对调，从而看起来的效果像照镜子一样。 +UVCCameraHandler：是UVCCamera开源库中的摄像头控制类，用于控制摄像头的开启、预览、监听等功能。

/**
+ * @创建者 LQR
+ * @时间 2019/9/18
+ * @描述 自定义的UVCCameraHandler
+ * <p>
+ * 参照{@link com.serenegiant.usb.common.UVCCameraHandlerMultiSurface}，对RendererHolder进行设置，
+ * 实现SurfaceView或TextureView图像本地镜像功能，关键API：
+ * mRendererHolder = new RendererHolder(thread.getWidth(), thread.getHeight(), null);
+ * mRendererHolder.setMirror(IRendererCommon.MIRROR_HORIZONTAL);
+ */
+public class MyUVCCameraHandler extends AbstractUVCCameraHandler {
+
+    public static final MyUVCCameraHandler createHandler(
+            final Activity parent, final CameraViewInterface cameraView,
+            final int width, final int height) {
+        return createHandler(parent, cameraView, 1, width, height, UVCCamera.FRAME_FORMAT_MJPEG, UVCCamera.DEFAULT_BANDWIDTH);
+    }
+
+    public static final MyUVCCameraHandler createHandler(
+            final Activity parent, final CameraViewInterface cameraView,
+            final int encoderType, final int width, final int height, final float bandwidthFactor) {
+        return createHandler(parent, cameraView, encoderType, width, height, UVCCamera.FRAME_FORMAT_MJPEG, bandwidthFactor);
+    }
+
+    public static final MyUVCCameraHandler createHandler(
+            final Activity parent, final CameraViewInterface cameraView,
+            final int encoderType, final int width, final int height) {
+        return createHandler(parent, cameraView, encoderType, width, height, UVCCamera.FRAME_FORMAT_MJPEG, UVCCamera.DEFAULT_BANDWIDTH);
+    }
+
+    public static final MyUVCCameraHandler createHandler(
+            final Activity parent, final CameraViewInterface cameraView,
+            final int encoderType, final int width, final int height, final int format) {
+        return createHandler(parent, cameraView, encoderType, width, height, format, UVCCamera.DEFAULT_BANDWIDTH);
+    }
+
+    public static final MyUVCCameraHandler createHandler(
+            final Activity parent, final CameraViewInterface cameraView,
+            final int encoderType, final int width, final int height, final int format, final float bandwidthFactor) {
+        final CameraThread thread = new CameraThread(MyUVCCameraHandler.class, parent, cameraView, encoderType, width, height, format, bandwidthFactor);
+        thread.start();
+        return (MyUVCCameraHandler) thread.getHandler();
+    }
+
+    private RendererHolder mRendererHolder;
+
+    protected MyUVCCameraHandler(CameraThread thread) {
+        super(thread);
+        mRendererHolder = new RendererHolder(thread.getWidth(), thread.getHeight(), null);
+        mRendererHolder.setMirror(IRendererCommon.MIRROR_HORIZONTAL);
+    }
+
+    public synchronized void release() {
+        if (mRendererHolder != null) {
+            mRendererHolder.release();
+            mRendererHolder = null;
+        }
+        super.release();
+    }
+
+    public synchronized void resize(int width, int height) {
+        super.resize(width, height);
+        if (mRendererHolder != null) {
+            mRendererHolder.resize(width, height);
+        }
+    }
+
+    public synchronized void startPreview() {
+        checkReleased();
+        if (mRendererHolder != null) {
+            super.startPreview(mRendererHolder.getSurface());
+        } else {
+            throw new IllegalStateException();
+        }
+    }
+
+    public synchronized void addSurface(int surfaceId, Surface surface, boolean isRecordable) {
+        checkReleased();
+        mRendererHolder.addSurface(surfaceId, surface, isRecordable);
+    }
+
+    public synchronized void removeSurface(int surfaceId) {
+        if (mRendererHolder != null) {
+            mRendererHolder.removeSurface(surfaceId);
+        }
+    }
+
+    @Override
+    public void captureStill(String path, OnCaptureListener listener) {
+        checkReleased();
+        post(new Runnable() {
+            @Override
+            public void run() {
+                synchronized (MyUVCCameraHandler.this) {
+                    if (mRendererHolder != null) {
+                        mRendererHolder.captureStill(path);
+                        updateMedia(path);
+                    }
+                }
+            }
+        });
+    }
+}
+
+

# 4、UVCCamera开启图像预览

这一部分的代码，借鉴【USBCameraTest6】使用多个Surface显示图像的案例 (opens new window)，主要的类说明一下：

  1. USBMonitor：与CameraDialog搭配使用，用于检测USB摄像头状态，包括连接、断开等。
  2. MyUVCCameraHandler：前面自定义的UVCCameraHandler，用于多个Surface显示图像，同时可以控制图像是否镜像。
  3. UVCCameraTextureView：USB摄像头的图像预览窗口，该控件可以根据摄像头分辨率调整窗口大小。
  4. BitmapSurfaceView：用于绘制Bitmap的图像窗口(即：专门显示经过YuvUtil处理后的yuv数据图像)。
/**
+ * @创建者 LQR
+ * @时间 2019/9/18
+ * @描述 UVCCamera + YuvUtil 处理USB摄像头图像数据
+ * 
+ * 1、使用UVCCamera实现Usb摄像头图像预览。
+ * 2、使用YuvUtil进行图像预处理：旋转、裁剪、缩放、镜像。
+ */
+public class PreprocessActivity extends BaseActivity implements CameraDialog.CameraDialogParent {
+
+    private int WIDTH = UVCCamera.DEFAULT_PREVIEW_WIDTH;
+    private int HEIGHT = UVCCamera.DEFAULT_PREVIEW_HEIGHT;
+
+    private Object mSync = new Object();
+    private USBMonitor mUSBMonitor;
+    private MyUVCCameraHandler mCameraHandler;
+
+    private UVCCameraTextureView mCameraViewL;
+    private BitmapSurfaceView mCameraViewR;
+
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_preprocess_test);
+        mCameraViewL = findViewById(R.id.camera_view_L);
+        mCameraViewL.setAspectRatio(WIDTH / (float) HEIGHT);
+        mCameraViewL.setCallback(mCallback);
+        mCameraViewR = findViewById(R.id.camera_view_R);
+
+        synchronized (mSync) {
+            mUSBMonitor = new USBMonitor(this, mOnDeviceConnectListener);
+            mCameraHandler = MyUVCCameraHandler.createHandler(this, mCameraViewL, WIDTH, HEIGHT);
+        }
+
+		// 开启UVCCamera授权提示对话框
+        CameraDialog.showDialog(this);
+    }
+
+    @Override
+    protected void onStart() {
+        super.onStart();
+        synchronized (mSync) {
+            mUSBMonitor.register();
+        }
+        if (mCameraViewL != null) {
+            mCameraViewL.onResume();
+        }
+    }
+
+    @Override
+    protected void onStop() {
+        synchronized (mSync) {
+            mCameraHandler.close();
+            mUSBMonitor.unregister();
+        }
+        if (mCameraViewL != null) {
+            mCameraViewL.onPause();
+        }
+        super.onStop();
+    }
+
+    @Override
+    protected void onDestroy() {
+        synchronized (mSync) {
+            if (mCameraHandler != null) {
+                mCameraHandler.release();
+                mCameraHandler = null;
+            }
+            if (mUSBMonitor != null) {
+                mUSBMonitor.destroy();
+                mUSBMonitor = null;
+            }
+        }
+        mCameraViewL = null;
+        super.onDestroy();
+    }
+
+    @Override
+    public USBMonitor getUSBMonitor() {
+        return mUSBMonitor;
+    }
+
+    @Override
+    public void onDialogResult(boolean canceled) {
+
+    }
+
+    private CameraViewInterface.Callback mCallback = new CameraViewInterface.Callback() {
+        @Override
+        public void onSurfaceCreated(CameraViewInterface view, Surface surface) {
+			// 当TextureView的Surface被创建时，将其添加至CameraHandler中保存并管理。
+            mCameraHandler.addSurface(surface.hashCode(), surface, false);
+        }
+
+        @Override
+        public void onSurfaceChanged(CameraViewInterface view, Surface surface, int width, int height) {
+
+        }
+
+        @Override
+        public void onSurfaceDestroy(CameraViewInterface view, Surface surface) {
+			// 当TextureView的Surface销毁时，将其从CameraHandler中移除。
+            mCameraHandler.removeSurface(surface.hashCode());
+        }
+    };
+
+    private USBMonitor.OnDeviceConnectListener mOnDeviceConnectListener = new USBMonitor.OnDeviceConnectListener() {
+        @Override
+        public void onAttach(UsbDevice device) {
+
+        }
+
+        @Override
+        public void onDettach(UsbDevice device) {
+
+        }
+
+        @Override
+        public void onConnect(UsbDevice device, USBMonitor.UsbControlBlock ctrlBlock, boolean createNew) {
+            synchronized (mSync) {
+				// 当检测到USB连接时
+                if (mCameraHandler != null) {
+					// 开启摄像头
+                    mCameraHandler.open(ctrlBlock);
+					// 开启预览，CameraHandler会将图像绘制至关联的Surface上
+                    mCameraHandler.startPreview();
+					// 开启YUV数据转视频流（H.264编码）
+                    mCameraHandler.startRecording(null, onEncodeResultListener);
+					// 设置YUV帧数据监听
+                    mCameraHandler.setOnPreViewResultListener(mOnPreViewResultListener);
+                }
+            }
+        }
+
+        @Override
+        public void onDisconnect(UsbDevice device, USBMonitor.UsbControlBlock ctrlBlock) {
+            synchronized (mSync) {
+				// 当检测到USB断开时，关闭CameraHandler
+                if (mCameraHandler != null) {
+                    queueEvent(new Runnable() {
+                        @Override
+                        public void run() {
+                            if (mCameraHandler != null) {
+                                mCameraHandler.close();
+                            }
+                        }
+                    }, 0);
+                }
+            }
+        }
+
+        @Override
+        public void onCancel(UsbDevice device) {
+
+        }
+    };
+
+    /**
+     * H.264视频编码数据流
+     */
+    AbstractUVCCameraHandler.OnEncodeResultListener onEncodeResultListener = new AbstractUVCCameraHandler.OnEncodeResultListener() {
+        @Override
+        public void onEncodeResult(byte[] data, int offset, int length, long timestamp, int type) {
+			// 这里可以使用rtmp进行推流...
+        }
+
+        @Override
+        public void onRecordResult(String videoPath) {
+			
+        }
+    };
+
+    /**
+     * 摄像头YUV数据流
+     */
+    AbstractUVCCameraHandler.OnPreViewResultListener mOnPreViewResultListener = new AbstractUVCCameraHandler.OnPreViewResultListener() {
+        @Override
+        public void onPreviewResult(byte[] data) { // data就是摄像头获取到的nv21格式的yuv数据
+            try {
+                ...
+				---------- 1、使用YuvUtil进行yuv数据处理 ----------
+				---------- 2、将处理后的yuv数据转成Bitmap传给SurfaceView绘制 ----------
+				...
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+    };
+
+}
+
+

# 5、YuvUtil对yuv图像进行处理

这里针对yuv图像处理提供了2个方法，分别是：

  1. yuvProcessAndDraw1()：完完全全手动处理好每一步的图像处理，自由度较高，相对的，也麻烦。
  2. yuvProcessAndDraw2()：使用YuvUtil.yuvCompress()一步完成除裁剪以外的图像处理操作，比较便捷。

在上面AbstractUVCCameraHandler.OnPreViewResultListener的onPreviewResult(byte[] data)回调中，可以任意选择这2个方法中的1个进行处理，效果是一样的。

/**
+ * 使用YuvUtil完全手动处理YUV图像数据，要求理解byte[]的创建长度：
+ * yuvNV21ToI420()：nv21转i420
+ * yuvMirrorI420()：镜像
+ * yuvScaleI420()：缩放
+ * yuvCropI420()：裁剪
+ * yuvRotateI420()：旋转
+ * yuvI420ToNV21()：i420转nv21
+ *
+ * @param data 摄像头获取到的nv21数据
+ */
+private void yuvProcessAndDraw1(byte[] data) {
+	int width = WIDTH;
+	int height = HEIGHT;
+
+	// nv21 --> i420
+	byte[] nv21Data = data;
+	byte[] i420Data = new byte[width * height * 3 / 2];
+	YuvUtil.yuvNV21ToI420(nv21Data, width, height, i420Data);
+
+	// 镜像
+	byte[] i420MirrorData = new byte[width * height * 3 / 2];
+	YuvUtil.yuvMirrorI420(i420Data, width, height, i420MirrorData);
+	i420Data = i420MirrorData;
+
+	// 缩放
+	byte[] i420ScaleData = new byte[width * height * 3 / 2];
+	int scaleWidth = 320;
+	int scaleHeight = 240;
+	YuvUtil.yuvScaleI420(i420Data, width, height, i420ScaleData, scaleWidth, scaleHeight, 0);
+	i420Data = i420ScaleData;
+	width = scaleWidth;
+	height = scaleHeight;
+
+	// 裁剪
+	byte[] i420CropData = new byte[width * height * 3 / 2];
+	int cropWidth = 240;
+	int cropHeight = 240;
+	YuvUtil.yuvCropI420(i420Data, width, height, i420CropData, cropWidth, cropHeight, 0, 0);
+	i420Data = i420CropData;
+	width = cropWidth;
+	height = cropHeight;
+
+	// 旋转
+	byte[] i420RotateData = new byte[width * height * 3 / 2];
+	int degree = 90;
+	YuvUtil.yuvRotateI420(i420Data, width, height, i420RotateData, degree);
+	i420Data = i420RotateData;
+	if (degree == 90 || degree == 270) {
+		int temp = width;
+		width = height;
+		height = temp;
+	}
+
+	// i420 --> nv21
+	YuvUtil.yuvI420ToNV21(i420Data, width, height, nv21Data);
+
+	// 绘制图像
+	drawSurfaceView(data, width, height);
+}
+
+/**
+ * 使用YuvUtil半自动处理YUV图像数据：
+ * yuvCompress()：nv21转i420、镜像、缩放、旋转
+ * yuvCropI420()：裁剪
+ * yuvI420ToNV21()：i420转nv21
+ *
+ * @param data 摄像头获取到的nv21数据
+ */
+private void yuvProcessAndDraw2(byte[] data) {
+	int width = WIDTH;
+	int height = HEIGHT;
+	int dstWidth = 320;
+	int dstHeight = 240;
+
+	// nv21 --> i420 --> 镜像 --> 缩放 --> 旋转
+	byte[] nv21Data = data;
+	byte[] i420Data = new byte[dstWidth * dstHeight * 3 / 2];
+	int degree = 90;
+	YuvUtil.yuvCompress(nv21Data, width, height, i420Data, dstWidth, dstHeight, 0, 90, true);
+	// 旋转过后，需要手动校正宽高
+	if (degree == 90 || degree == 270) {
+		width = dstHeight;
+		height = dstWidth;
+	} else {
+		width = dstWidth;
+		height = dstHeight;
+	}
+
+	// 裁剪
+	byte[] i420CropData = new byte[width * height * 3 / 2];
+	int cropWidth = 240;
+	int cropHeight = 240;
+	YuvUtil.yuvCropI420(i420Data, width, height, i420CropData, cropWidth, cropHeight, 0, 0);
+	i420Data = i420CropData;
+	width = cropWidth;
+	height = cropHeight;
+
+	// i420 --> nv21
+	YuvUtil.yuvI420ToNV21(i420Data, width, height, nv21Data);
+
+	// 绘制图像
+	drawSurfaceView(data, width, height);
+}
+
+/**
+ * 使用SurfaceView绘制Bitmap图像
+ * @param data nv21数据
+ * @param width 图像宽
+ * @param height 图像高
+ */
+private void drawSurfaceView(byte[] data, int width, int height) {
+	YuvImage yuvImage = new YuvImage(data, ImageFormat.NV21, width, height, null);
+	ByteArrayOutputStream out = new ByteArrayOutputStream();
+	yuvImage.compressToJpeg(new Rect(0, 0, width, height), 100, out);
+	byte[] bytes = out.toByteArray();
+	Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
+	mCameraViewR.drawBitmap(bitmap);
+}
+

要注意的点有2个：

  1. 要明白每次创建byte[]时的长度是多少。
  2. 要知道旋转如果是90或270，则宽高需要对调。

# 6、效果

录制了一小段屏幕，左边是使用UVCCameraTextureView预览USB摄像头镜像后图像，右边是使用YuvUtil对yuv数据进行 镜像、旋转、缩放、裁剪 后的图像，分辨率640*480，流畅度还可以，是镜面效果，完美，撒花。

# 7、Github

https://github.com/GitLqr/LQRLibyuv (opens new window)

+ +
+
#音视频#yuv
AndroidNDK - 编译 openssl
Android音视频 - MediaCodec编码mp4踩坑记录

+ ← + Android音视频 - MediaCodec编码mp4踩坑记录→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e6f2c4/index.html b/pages/e6f2c4/index.html new file mode 100644 index 000000000..062b353e7 --- /dev/null +++ b/pages/e6f2c4/index.html @@ -0,0 +1,205 @@ + + + + + + Flutter - 混编项目集成Shorebird热更新🐦（iOS篇） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-01-21
目录

Flutter - 混编项目集成Shorebird热更新🐦（iOS篇）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

关于 Shorebird 的初始化内容可以在上一篇《Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）》中查看，这里就不再赘述了。

Shorebird 官方文档上对于 iOS 混编方案集成热更新的介绍不算详细，只能说点明了要点，指明了方向。

本文将根据实际的项目应用情况做出集成调整，并补充说明正确的补丁验证方案。

# 二、踩坑

Shorebird 文档里指出需要我们使用类似 Flutter 官方文档里 Option B - Embed frameworks in Xcode 的方式去集成 Flutter 模块。

关于 Flutter 官方文档指出的各种集成方式可以查看: https://docs.flutter.dev/add-to-app/ios/project-setup (opens new window)

具体的步骤就是：

  1. 先注释掉原来的 Option A 集成方式的相关配置代码
  2. 执行 Shorebird Release 去构建对应的所有 xcframework 文件。（xcframework 文件包括了 Flutter.xcframework 和 App.xcframework，以及插件依赖的原生第三方库对应的 xcframework）
  3. 将所有构建完成的 xcframework 拖到 Build Phases 中的 Embed Frameworks 内。
  4. 将 xcframework 的所在目录路径配置到 Framework Search Paths。
  5. 配置 xcframework 的 Embed 模式，静态库必须选 Do Not Embed，动态库必须选 Embed & Sign。

因为 Option A - Embed with CocoaPods and the Flutter SDK 的方式只需要简单的配置 Podfile 就可以集成 Flutter 模块，所以相信大家在一般情况下都是会选择 Option A 的方式。很明显，要改成 Option B 需要我们大改特改。

改成 Option B 这种方式有以下几点问题：

# 1、vendored_frameworks 缺失

如果你依赖的 Flutter 插件依赖了原生第三方的二进制包，如 realm，在它的 podspec 文件是这样声明的 s.vendored_frameworks = 'realm_dart.xcframework'，那你会发现在最终构建完成的 xcframework 的目录里会缺少这些 vendored_frameworks。

相关的 issue: https://github.com/flutter/flutter/issues/125530 (opens new window)。

因为 Option B 是二进制依赖，所以在编译的时候并不会报任何错误，等你 App 运行起来进入一些相关场景，使用到了对应的第三方功能时就会直接来个找不到符号的错误，如：

Failed to lookup symbol 'native_method_signature': dlsym(0xa47e7c10, native_method_signature): symbol not found
+

接着就是闪退，可想而知这得多吓人！

# 2、重复编译

vendored_frameworks 缺失的问题我通过脚本解决了，但是还有另一个问题，这些 xcframework 中也有可能出现涵盖你原来的原生工程里依赖的第三方包，比如，Flutter 的插件用到了 FMDB，生成的 xcframework 中就会包含 FMDB.xcframework，而你的原生工程本来就有依赖 FMDB，这个时候编译，Xcode 就会告诉你重复了，编译不通过，报错内容如下：

Showing Recent Messages
+Multiple commands produce '/Users/lxf/Library/Developer/Xcode/DerivedData/xxx.app/Frameworks/FMDB.framework'
+

如果是你，你选择留下哪个呢？

  • 如果你选择了 Flutter 帮你生成的 FMDB.xcframework，你就得去处理其它原生第三方依赖的 pod 'FMDB'，假如此时原生工程里的一些第三方库或私有库也依赖 FMDB，那你要处理这些库可就太麻烦了。
  • 如果你选择使用 pod 'FMDB' 的方式，那你只需要去判断原生工程里是否有对应的依赖，有的话就不再声明依赖，这种还好。

# 3、静态库与动态库

生成的 xcframework 中，有些是静态库，有些是动态库

如图所示，静态库必须选 Do Not Embed，动态库必须选 Embed & Sign。

如果你全选了 Embed & Sign，那么你就无法启动 App 了，如下图所示

该问题的相关 issue: https://github.com/flutter/flutter/issues/122183

所以为了避免这种情况，我们就必须得选对 Embed 选项，可以使用 file 命令去判断 xcframework 是静态库还是动态库

file FlutterPluginRegistrant.xcframework/ios-arm64/FlutterPluginRegistrant.framework/FlutterPluginRegistrant
+FlutterPluginRegistrant.xcframework/ios-arm64/FlutterPluginRegistrant.framework/FlutterPluginRegistrant: 
+current ar archive random library // 静态库
+
+file url_launcher_ios.xcframework/ios-arm64/url_launcher_ios.framework/url_launcher_ios
+url_launcher_ios.xcframework/ios-arm64/url_launcher_ios.framework/url_launcher_ios: 
+Mach-O 64-bit dynamically linked shared library arm64 // 动态库
+

这部分判断逻辑只能交给脚本处理了，因为当数量起来后你就会体验到什么叫崩溃，别问我是怎么知道的 😭

# 4、直接崩溃

后面我直接用脚本判断 Flutter 插件依赖了哪些原生第三方，将它们统一在原生工程内声明依赖，在一些情况下这也是很危险的，如 connectivity_plus 这个 Flutter 插件依赖了 ReachabilitySwift，你必须得使用 Reachability.xcframework 二进制嵌入的方式，否则运行就崩~

dyld[31764]: Symbol not found: _$s12ReachabilityAAC10ConnectionO4wifiyA2DmFWC
+  Referenced from: <8142F86E-4C9C-3513-AD29-D3522FC6677F> /Users/lxf/Library/Developer/Xcode/DerivedData/xxx/connectivity_plus.framework/connectivity_plus
+  Expected in:     <DA318000-9A97-35AD-87EA-7C5B635DE010> /Users/lxf/Library/Developer/xxx.app/Frameworks/Reachability.framework/Reachability
+

# 三、分析

后来仔细想想，Shorebird 的热更新是针对 Dart 代码，跟原生无关，能不能按原来的 Cocoapods 方式去集成 Flutter.xcframework，App.xcframework 以及插件依赖的原生第三方库呢？

答案是可以的，来看看 install_all_flutter_pods 方法

def install_all_flutter_pods(flutter_application_path = nil)
+  ...
+  flutter_application_path ||= File.join('..', '..')
+  # 生成 .ios/Flutter/Flutter.podspec
+  install_flutter_engine_pod(flutter_application_path)
+  # 集成 插件依赖的原生库 Pods
+  install_flutter_plugin_pods(flutter_application_path)
+  # 编译并集成 Flutter.xcframework 和 App.xcframework
+  install_flutter_application_pod(flutter_application_path)
+end
+

# 1、install_flutter_engine_pod

install_flutter_engine_pod 生成的 Flutter.podspec 是假的podspec，里面没啥实质内容，仅代表 Flutter.xcframework，为什么要这么做呢？因为一些 Flutter 插件声明需要依赖 Flutter，如：

Pod::Spec.new do |s|
+  s.name             = 'sqflite'
+  ...
+  s.dependency 'Flutter'
+  s.dependency 'FMDB', '>= 2.7.5'
+  ...
+end
+

如果没有这个 Flutter.podspec，那么执行 pod install 就会从 CocoaPods trunk 下载 Flutter 了。

# 2、install_flutter_application_pod

install_flutter_application_pod 会去编译 Flutter.xcframework 和 App.xcframework，并将它们并集到我们的原生工程内。不过这两玩意我们用 Shorebird Release 去生成了，所以这个方法我们用不上。

我们可以结合上述的 Flutter.podspec 的作用，修改它内部的依赖声明，从而实现通过 Cocoapods 的方式来集成 Flutter.xcframework 和 App.xcframework。

Pod::Spec.new do |s|
+s.name             = 'Flutter'
+s.version          = '1.0.0'
+s.summary          = 'A UI toolkit for beautiful and fast apps.'
+s.homepage         = 'https://flutter.dev'
+s.license          = { :type => 'BSD' }
+s.author           = { 'Flutter Dev Team' => 'flutter-dev@googlegroups.com' }
+s.source           = { :git => 'https://github.com/flutter/engine', :tag => s.version.to_s }
+s.ios.deployment_target = '11.0'
+# Framework linking is handled by Flutter tooling, not CocoaPods.
+# Add a placeholder to satisfy `s.dependency 'Flutter'` plugin podspecs.
+#
+# 以上到这句都是原来的，将这句注释掉
++ # s.vendored_frameworks = 'path/to/nothing'
+# 新增下面这句，声明依赖当前目录下的 Flutter.xcframework 和 App.xcframework
++ s.vendored_frameworks = 'Flutter.xcframework', 'App.xcframework'
+end
+

生成的所有 xcframework 所在路径为: xxx/flutter_module/build/ios/framework/Release， 我们自己创建的 Flutter.podspec 中的依赖是相对路径，所以该 podspec 也是跟 xcframework 放到一起，当然也可以根据你自己的习惯进行调整。

# 3、install_flutter_plugin_pods

install_flutter_plugin_pods 会将 Flutter 插件依赖的原生库集成到我们的原生工程，这正是我们需要的。

不过如果你直接将 Podfile 中的 install_flutter_application_pod 给替换成 install_flutter_plugin_pods ，执行 pod install 时是会报如下错误的：

pod install
+
+[!] Invalid `Podfile` file: undefined method `flutter_relative_path_from_podfile' for #<Pod::Podfile:0x000000010e74c520 @defined_in_file=#<Pathname:/Users/lxf/xxx/Podfile>, @internal_hash={}, @root_target_definitions=[#<Pod::Podfile::TargetDefinition label=Pods>], @current_target_definition=#<Pod::Podfile::TargetDefinition label=Pods>>
+
+  relative = flutter_relative_path_from_podfile(export_script_directory)
+

也就是找不到 flutter_relative_path_from_podfile 方法，因为该方法在并不在你的 Flutter 模块的 podhelper.rb 中，而是在 packages/flutter_tools/bin/podhelper.rb。

至于为什么原来的 install_all_flutter_pods 方法不会报错，是因为在该方法内先引用了 flutter_tools/bin/podhelper.rb。

关键代码如下：

def install_all_flutter_pods(flutter_application_path = nil)
+  ...
+  # 就是这句
+  require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+  flutter_application_path ||= File.join('..', '..')
+  install_flutter_engine_pod(flutter_application_path)
+  install_flutter_plugin_pods(flutter_application_path)
+  install_flutter_application_pod(flutter_application_path)
+end
+

所以我们可以如法炮制，在 install_flutter_plugin_pods 方法中加入 require 这一行代码，以解决上述错误。

def install_flutter_plugin_pods(flutter_application_path)
++  require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+  flutter_application_path ||= File.join('..', '..')
+  ...
+end
+
+

老是这么改也不是个办法，所以我提了个 PR: https://github.com/flutter/flutter/pull/141521

该 PR 现已合并，应该会在 3.16.9 及之后的版本中生效。

经过验证，该方案是可行的，下面我们来看看如何调整原生工程和 Shorebird 在 iOS 混编下如何使用吧。

# 四、原生工程调整

在 Podfile 文件中，将 Flutter 壳工程的源码依赖方式调整为二进制依赖

- install_all_flutter_pods(flutter_application_path)
++ # 源码集成
++ # install_all_flutter_pods(flutter_application_path)
+
++ # 二进制集成
++ pod 'Flutter', path: 'xxx/flutter_modules/build/ios/framework/Release'
++ install_flutter_plugin_pods(flutter_application_path)
+
  1. 声明 Flutter 依赖，用于集成 Flutter.xcframework 和 App.xcframework。
  2. Option A 方式所需要的代码统统保留，只需要将 install_all_flutter_pods 替换为 install_flutter_plugin_pods，用于集成 Flutter 插件所依赖的原生第三方库

# 五、创建 Shorebird Release

打发布包的时候操作，在 Flutter 工程目录下执行

cd xx/xx/flutter_modules
+
+# 7.0.0+2: 版本号+build版本号
+shorebird release ios-framework-alpha --release-version 7.0.0+2
+

该命令内部会去执行 flutter build ios-framework --no-debug --no-profile ...，并且使用的是 Shorebird 魔改的 Flutter 引擎！

版本号可以在如下图所示进行查看

ShoreBird 的内部逻辑会去以这个版本号组合，向服务器请求判断是否存在相应版本的相关补丁！

执行完成后，在 Shorebird 控制台上可以看到相应的项

在命令执行前，请确保不存在 7.0.0+2 的 Release，如果有的话，请先删除

# 六、创建 Shorebird Patch

紧急修复线上包的bug时操作，在 Flutter 工程目录下执行

shorebird patch ios-framework-alpha --release-version 7.0.0+2
+

注：版本号与上述的 release 命令中使用的要保持一致！

执行完成后，在 Shorebird 控制台上点击对应的 Release 项，进去后可以看到相应的补丁

看看这个补丁大小，我们再来看看安卓的补丁大小

一样的修改，安卓的补丁大小不到 2 MB，iOS 的补丁大小高达 54.83 MB 😂

# 七、热更新验证

官方文档上就只是说重启 App 查看补丁是否生效，并没有说明失败了该如果排查问题~

1、在执行完 shorebird release 命令并完成上述原生工程的调整后，将原生工程的编译模式调整为 Release 进行编译。

此时会依赖的 flutter_modules/build/ios/framework/Release 下的 xcframework，备份为 Release_release

2、关闭 App，打 patch，注意，此时 flutter_modules/build/ios/framework/Release 下的内容会被清空并重新创建。

3、打 patch 后，将 Release_release 改回 Release 用 Xcode 重新运行 App，一切正常的话即可看到变化。

无论成功还是失败，Xcode 的控制台都会有相应的输出

成功

2024-01-03 18:37:55.838328+0800 xxx[623:70498] [VERBOSE0:shorebird.cc(151)] Shorebird updater: no active patch.
+2024-01-03 18:37:55.838424+0800 xxx[623:70498] [VERBOSE0:shorebird.cc(155)] Starting Shorebird update
+[00:00:00.002] (1701cb000) INFO   Sending patch check request: PatchCheckRequest { app_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", channel: "stable", release_version: "7.0.0+2", patch_number: None, platform: "ios", arch: "aarch64" }
+
+[00:00:30.871] (1701cb000) INFO  Patch 1 successfully installed.
+[00:00:30.871] (1701cb000) INFO   Update result: Update installed
+

失败

可以搜索关键字 PatchCheckRequest 定位

2024-01-03 18:37:55.838328+0800 xxx[623:70498] [VERBOSE0:shorebird.cc(151)] Shorebird updater: no active patch.
+2024-01-03 18:37:55.838424+0800 xxx[623:70498] [VERBOSE0:shorebird.cc(155)] Starting Shorebird update
+[00:00:00.002] (1701cb000) INFO   Sending patch check request: PatchCheckRequest { app_id: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", channel: "stable", release_version: "7.0.0+2", patch_number: None, platform: "ios", arch: "aarch64" }
+
+[00:00:30.871] (1701cb000) ERROR  Update failed: error decoding response body: operation timed out
+Caused by:
+    operation timed out
+
+[00:00:30.871] (1701cb000) INFO   Update thread finished with status: Update had error
+

该失败是因为国行机特有的网络权限导致的，开启 Shorebird 的自动检查更新的话，会在网络权限被赋予前去请求，结果就是失败，所以需要关闭自动检查更新，使用 shorebird_code_push (opens new window) 去延迟检查。

# 八、脚本

由于我们日常研发还是使用的是源码依赖的方式，只会在打最终测试包时才需要去做上述的调整操作，所以这里用我比较熟悉的 Python 去制作了简易的脚本，并结合 Jenkins 来辅助完成这种万年不变的无聊步骤

脚本已上传至 Github: https://github.com/LinXunFeng/script_box/tree/main/flutter (opens new window)

看官可自取修改~

# switch_flutter_integrate.py

切换 Flutter 项目的集成方式

# 二进制依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'binary' -f 'ios'
+
+# 源码依赖
+python switch_flutter_integrate.py -p '原生工程路径' -m 'source' -f 'ios' 
+

# shorebird.py

自动获取版本号，并执行 Shorebird 相关命令

# release
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m release -f ios
+
+# patch
+python shorebird.py -p '原生工程路径' -s 'Flutter工程路径' -m patch -f ios
+

需要注意的是，xcodeproj 和 target 的名字被我固定写成 OCProject，如下代码中高亮的那两行，大家请先将其修改为自己的工程名再使用 shorebird.py。

def handle_ios():
+    """
+    处理iOS项目
+    """
+    # 1. 读取主版本号
+    # 请将 OCProject 修改为你们自己的工程名
++    xcodeproj_path = os.path.join(project_path, 'OCProject.xcodeproj')
+    version = ReleaseVersionTool.fetch_project_version(
+        xcodeproj_path=xcodeproj_path,
++        target_name='OCProject',
+    )
+

由于我比较懒，就不改成通用的了 😏

# 九、最后

虽然 iOS 的热更新能用，但也仅仅只是能用，应用于很简单的应用程序，运行起来没有太明显的卡顿感知，但是稍微大点就可以感知到了，卡到怀疑人生那种，相比安卓端的没有任何性能损耗，iOS端的还需要再等等，毕竟现在 iOS 还是 Alpha 版本，相信不久将来 Shorebird 团队会解决该问题。

具体关于安卓和 iOS 两端之间的实现区别可以在这个 issue 中查看 https://github.com/shorebirdtech/shorebird/issues/871 (opens new window)

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter#Shorebird
Flutter - 混编项目集成Shorebird热更新🐦（安卓篇）
Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞

+ ← + Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e87d2b/index.html b/pages/e87d2b/index.html new file mode 100644 index 000000000..81da218b2 --- /dev/null +++ b/pages/e87d2b/index.html @@ -0,0 +1,213 @@ + + + + + + Flutter - 聊天输入框更新文本时的必备优化点🔖 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-11-13
目录

Flutter - 聊天输入框更新文本时的必备优化点🔖

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、问题

可以看出一些问题：

  • 在关闭键盘的情况下，追加表情内容导致换行时，输入框并不会跟随滚动，而键盘输入文字却可以
  • 滚动条在键盘出现时正常，关闭键盘时滚动条无法滑到底部

# 二、示例代码

TextField 代码

_buildTextField() {
+  return Scrollbar(
+    controller: scrollController,
+    isAlwaysShown: true,
+    child: TextField(
+      key: textFieldKey,
+      autofocus: true,
+      decoration: const InputDecoration(
+        border: InputBorder.none,
+        isCollapsed: true,
+      ),
+      controller: editingController,
+      scrollController: scrollController,
+      keyboardType: TextInputType.multiline,
+      maxLines: 8,
+      minLines: 1,
+      showCursor: true,
+      readOnly: true,
+    ),
+  );
+}
+

更新输入框内容的逻辑

var result = editingController.text;
+// 新增的内容
+String content = fetchInsertContent();
+int selectionBefore = editingController.selection.start;
+if (selectionBefore < 0) selectionBefore = 0;
+// 更新内容后，光标的位置
+int selectionAfter = selectionBefore + content.length;
+
+result = (result.split('')..insert(selectionBefore, content)).join('');
+editingController.text = result;
+
+// 设置光标
+editingController.selection = TextSelection.fromPosition(TextPosition(
+  offset: selectionAfter,
+));
+

# 三、探索与解决

# 1、输入框

当键盘输入内容时会自动滚动到底部，既然跟滚动相关，第一时间就会想到 ScrollController 的 animateTo 和 jumpTo 这两个方法，打个断点后，用键盘输入文字看看，发现果然走了断点

从调用栈里可以看到，animateTo 方法是在 EditableTextState 的 _scheduleShowCaretOnScreen 方法里调用的，该方法正是用于处理在键盘输入文字后，使 TextField 的内容自动滚动到适当的位置，保持可见。该方法在每次输入文字时都会调用，其内部有相关的滚动偏移计算逻辑。

那好了，我们现在主要就是看如何调用它，因为其是私有方法，所以需要找其它可帮我们间接调用 _scheduleShowCaretOnScreen 方法的公开方法。

查看调用 _scheduleShowCaretOnScreen 的方法有哪些后，这里我找到了 userUpdateTextEditingValue，以下对两个形参进行说明

class TextEditingValue {
+  const TextEditingValue({
+    this.text = '',
+    this.selection = const TextSelection.collapsed(offset: -1),
+    this.composing = TextRange.empty,
+  })
+...
+
属性 描述
text 当前文本
selection 当前选中的文本下标范围
composing 待组合内容的下标范围，在中文输入法中很常见，如下图中的 lin xun feng

SelectionChangedCause：表明触发变更文本选中范围的原因，常见的几种方式如下代码所示

/// Indicates what triggered the change in selected text (including changes to
+/// the cursor location).
+enum SelectionChangedCause {
+  /// The user tapped on the text and that caused the selection (or the location
+  /// of the cursor) to change.
+  tap,
+
+  /// The user tapped twice in quick succession on the text and that caused
+  /// the selection (or the location of the cursor) to change.
+  doubleTap,
+
+  /// The user long-pressed the text and that caused the selection (or the
+  /// location of the cursor) to change.
+  longPress,
+
+  /// The user force-pressed the text and that caused the selection (or the
+  /// location of the cursor) to change.
+  forcePress,
+
+  /// The user used the keyboard to change the selection or the location of the
+  /// cursor.
+  ///
+  /// Keyboard-triggered selection changes may be caused by the IME as well as
+  /// by accessibility tools (e.g. TalkBack on Android).
+  keyboard,
+
+  /// The user used the selection toolbar to change the selection or the
+  /// location of the cursor.
+  ///
+  /// An example is when the user taps on select all in the tool bar.
+  toolbar,
+
+  /// The user used the mouse to change the selection by dragging over a piece
+  /// of text.
+  drag,
+
+  /// The user used iPadOS 14+ Scribble to change the selection.
+  scribble,
+}
+

该参数为可选参数，对于我们这种使用 TextEditingController 对输入框内容进行修改的方式，传 null 即可。

需要调用的方式已经确定，接下来就是要获取 EditableTextState，我们先来看一下 TextField 的源码，因其为 StatefulWidget，所以需要找到对应的 State， 即 _TextFieldState

class _TextFieldState extends State<TextField> with RestorationMixin implements TextSelectionGestureDetectorBuilderDelegate, AutofillClient {
+
+    @override
+    final GlobalKey<EditableTextState> editableTextKey = GlobalKey<EditableTextState>();
+
+    @override
+    Widget build(BuildContext context) {
+    ...
+
+        Widget child = RepaintBoundary(
+          child: UnmanagedRestorationScope(
+            bucket: bucket,
+            child: EditableText(
+              key: editableTextKey,
+              readOnly: widget.readOnly || !_isEnabled,
+        ...
+    }
+}
+

可以看到，最终 build 方法返回的是嵌套了 EditableText 的 Widget，我们只要获取到该 EditableText 的 State（即 EditableTextState） 就可以调用 userUpdateTextEditingValue 方法。

现在比较棘手的是，TextFieldState 是私有的，无法直接访问到，但是我们可以换种方式，直接遍历 Element 从而获取到 EditableTextState

void visitor(Element element) {
+  if (element.widget is EditableText) {
+    final editableText = element.widget as EditableText;
+    final editableTextState =
+        (editableText.key as GlobalKey<EditableTextState>)
+            .currentState;
+            
+    // 找到 EditableTextState，调用 userUpdateTextEditingValue 方法
+    editableTextState?.userUpdateTextEditingValue(
+      TextEditingValue(...),
+      null,
+    );
+    return;
+  }
+  element.visitChildren(visitor);
+}
+
+textFieldKey.currentContext?.visitChildElements(visitor);
+

至此输入框便可实现我们想要的效果了

注：

  1. 这里大家可以自行对遍历的方法和 userUpdateTextEditingValue 的调用做下调整，毕竟每次变更输入框内容就遍历不好~
  2. 设置光标位置的代码不需要了，userUpdateTextEditingValue 方法内部会做这个事情

# 2、滚动条

只有 readOnly 为 true 时才会出现底部间距，对比 Scrollbar 的 updateScrollbarPainter 方法中的 padding 发现端倪

readOnly: true 的情况：

readOnly: true

readOnly: false 的情况：

readOnly: false

可以看到 readOnly: true 的情况下 padding 的 bottom 为 34.0，做 iOS 开发的小伙伴看到这个数值一定会觉得很熟悉，没错，就是底部安全区域的高度，而当键盘出现的时候，Scrollbar 是不可能接触到底部安全区域的，所以 padding 的 bottom 为 0。

这个时候我们只需要想办法让 Scrollbar 获取到的 padding 的 bottom 为 0 即可。这个不多说直接上代码：

MediaQuery.removePadding(
+  context: context,
+  child: _buildTextField(),
+  removeTop: true,
+  removeBottom: true, // 重点
+);
+

# 四、最后

示例代码已同步至 GitHub: LinXunFeng/flutter_demo (opens new window)

+ +
+
#Dart#Flutter
Flutter - 快速实现聊天会话列表的效果，完美💯
Flutter - 我给官方提PR，解决run命令卡住问题 😃

+ ← + Flutter - 我给官方提PR，解决run命令卡住问题 😃→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e987b9/index.html b/pages/e987b9/index.html new file mode 100644 index 000000000..d48c2f24d --- /dev/null +++ b/pages/e987b9/index.html @@ -0,0 +1,266 @@ + + + + + + Android - 利用 jitpack 免费发布闭源 aar | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2024-06-21
目录

Android - 利用 jitpack 免费发布闭源 aar

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

目前（Android/java） library 的主要发布仓库有 MavenCentral 和 jitpack，我之前也对这两种仓库的发布流程做了详细介绍：

但是，以上两种仓库，一般是用来免费发布开源 library 的，在提交库信息时，就会要求填写开源仓库的 url，如果我们不想开源源代码，仅仅只是希望把混淆后的 aar/jar 发布出去，那么上述两篇文章的流程就行不通了。

一般来说，这些平台也会提供付费服务，支持发布闭源的 library，就比如 jitpack 付费之后，才可以导入私有的 GitHub 仓库（即 private repo），从而构建并发布闭源的 library，可这笔费用不低的，具体费用见官网说明：

那有没有办法做到，既能免费又能闭源地发布 library 呢？Yes，这就是本篇要讲述的主要内容，灰常实用。

# 二、创建 library

温馨提示：这里只是举个简单的例子，熟悉 Android library 的朋友可以直接跳到下一节。

不管是 jar 还是 aar，对于 Android 开发者来说，都是 library，只是它们的 module 类型不同而已，简单来说，aar 是可以包含资源文件的 jar，功能更加强大，这里以 aar 为例，创建一个 android library module：

为了新手容易理解，这里有几点简单说明一下：

  1. com.android.library：是 android library module 使用的 Gradle 插件，android {} 是该插件的配置项，最终产出的库文件是 *.aar。
  2. minifyEnabled：是否开启混淆，默认为 false。
  3. proguard-rules.pro：当前 library 编译时的混淆规则（minifyEnabled 为 true 时生效），对生成最终的 aar 文件有影响。
  4. consumer-rules.pro：携带在 aar 文件中的混淆规则，对 别人工程 编译时的混淆规则有影响。

注：java library module 使用的 Gradle 插件是 java-library（apply plugin: 'java-library'），没有 android{} 配置项，如需混淆，则需要依赖其他 Gradle 插件，有需要的可以看我之前写的另一篇文章。
Android - 混淆 java-library 工程：https://juejin.cn/post/7174443107298050061 (opens new window)

// build.gradle
+apply plugin: 'com.android.library'
+
+android {
+    ...
+
+    defaultConfig {
+        ...
+        versionCode 1
+        versionName "1.0"
+        consumerProguardFiles "consumer-rules.pro"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled true // 开启混淆
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    implementation 'androidx.appcompat:appcompat:1.2.0'
+    implementation 'com.google.android.material:material:1.1.0'
+    implementation 'com.luffykou:android-common-utils:1.1.3'
+}
+

这里我创建的 library 功能非常简单，可以将一个图片 Bitmap 转成 Base64 字符串：

/**
+ * GitLqr 工具类
+ *
+ * @author LQR
+ * @since 2024/6/22
+ */
+public class GitLqrUtil {
+
+    /**
+     * bitmap 转 base64
+     */
+    public static String bitmapToBase64(Bitmap bitmap) {
+        return Base64.encodeToString(bitmapToByte(bitmap), Base64.DEFAULT);
+    }
+
+    /**
+     * bitmap 转 byte[]
+     */
+    public static byte[] bitmapToByte(Bitmap bitmap) {
+        ByteArrayOutputStream o = new ByteArrayOutputStream();
+        bitmap.compress(Bitmap.CompressFormat.PNG, 100, o);
+        return o.toByteArray();
+    }
+}
+

现在就可以编译 library 生成 aar 文件了，找到在 AS 右侧的 Gradle 面板，点开后找到 library 下的 assembleXXX task，这里我需要生成混淆后的 aar 文件，所以执行 assembleRelease，最终产物在 module 的 build/outputs/aar 目录下：

# 三、发布本地 maven

因为 aar 文件中只包含当前 library 的代码和资源，其依赖的第三方库不会被合并进去，想要被其他工程正常集成使用，就需要将第三方库的依赖信息传递下去，所以，需要借助 maven 发布插件，生成 pom 文件，因为 maven 插件已经过时，这里我使用的是 maven-publish 插件，library 脚本配置如下：

apply plugin: 'com.android.library'
+apply plugin: 'maven-publish'
+
+def LIB_VERSION_CODE = 1
+def LIB_VERSION_NAME = "1.0"
+def LIB_GROUP_ID = 'com.gitlqr'
+def LIB_ARTIFACT_ID = 'closed_source_arr'
+
+android {
+    ...
+    defaultConfig {
+        ...
+        versionCode LIB_VERSION_CODE
+        versionName LIB_VERSION_NAME
+    }
+}
+
+// 将当前module打包发布到本地maven仓库
+afterEvaluate {
+    publishing {
+        // 配置maven 仓库
+        repositories {
+            // build/outputs/maven_repo
+            maven { url uri(new File(buildDir, "outputs/maven_repo").path) }
+        }
+        // 配置发布产物
+        publications {
+            maven(MavenPublication) { // 容器可配置的信息 MavenPublication
+                groupId LIB_GROUP_ID
+                artifactId LIB_ARTIFACT_ID
+                version LIB_VERSION_NAME
+
+                // 注：AGP 3.6.0 及以上才能使用，作用是将 Android Gradle 插件生成的组件，作为发布的内容
+                from components.release
+            }
+        }
+    }
+}
+

如果 library 使用的 AGP 版本低于 3.6.0，maven-publish 的配置会比较麻烦，具体脚本配置如下：

task sourceJar(type: Jar) {
+    from android.sourceSets.main.java.srcDirs
+    classifier "sources"
+}
+
+// 将当前module打包发布到本地maven仓库
+afterEvaluate {
+    publishing {
+        // 配置maven 仓库
+        repositories {
+            // build/outputs/maven_repo
+            maven { url uri(new File(buildDir, "outputs/maven_repo").path) }
+        }
+        // 配置发布产物
+        publications {
+            maven(MavenPublication) { // 容器可配置的信息 MavenPublication
+                groupId LIB_GROUP_ID
+                artifactId LIB_ARTIFACT_ID
+                version LIB_VERSION_NAME
+
+                // 配置上传源码
+                artifact(sourceJar)
+                // 指定生成的aar路径
+                artifact "$buildDir/outputs/aar/${project.name}-release.aar"
+                // pom文件中声明依赖，从而传递到使用方
+                pom.withXml {
+                    def dependenciesNode = asNode().appendNode('dependencies')
+                    // 必要的传递性依赖
+                    def coreDependencies = ['api', 'implementation']
+                    coreDependencies.each { dependency ->
+                        def config = configurations[dependency]
+                        println("lqr configurations = ${config}, class = ${config.class}")
+                        // 提取每种传递性依赖配置中，依赖的第三方库信息
+                        config.allDependencies.each {
+                            def dependencyNode = dependenciesNode.appendNode('dependency')
+                            dependencyNode.appendNode('groupId', it.group)
+                            dependencyNode.appendNode('artifactId', it.name)
+                            dependencyNode.appendNode('version', it.version)
+                            // dependencyNode.appendNode('scope', dependency)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+

配置完成 maven 插件后，Gradle 面板会多出来 publishing 任务组，双击 publish 任务，即可在指定的本地目录下，生成 maven 相关的文件，其中 pom 文件非常重要，可以看到它的 <dependencies> 节点下，声明了 library 依赖的所有第三方库信息：

# 四、发布 jitpack

好了，现在 aar 和 pom 文件都有了，接下来就可以着手发布到 jitpack 了。

温馨提示：当前 pom 文件非最终版本，下面的步骤，不要边看边操作，一定等完整看完之后再做操作哦~

# 1、创建仓库

首先，需要创建一个空白的 GitHub 仓库（名字随便），然后把 aar 和 pom 文件上传上去：

注：pom.xml 就是上面使用 maven 插件生成出来的 closed_source_arr-1.0.pom 文件，我把它名字改了而已。

可以看到，仓库中我多上传了一个 jitpack.yml 文件，这个文件的作用是，让 jitpack 直接使用我们提供的 aar 和 pom 文件，不需要它来生成，具体内容如下：

install:
+  - FILE="-Dfile=closed_source_arr-1.0.aar"
+  - mvn install:install-file $FILE -DgroupId=com.gitlqr -DartifactId=closed_source_arr -Dversion=1.0 -Dpackaging=aar -DpomFile=pom.xml
+

注：jitpack.yml 文件中的参数（file、groupId、artifactId、version）根据你的库来修改，不能照抄的！参数名很好理解，相信修改起来没有任何难度。

# 2、创建 release

给刚刚提交的记录打个 tag，并且基于这个 tag 发布一个 release：

注：因为 jitpack 会以 release 的名字作为版本号，所以，建议最好跟 aar 的版本号一致。

# 3、构建版本

来到 https://jitpack.io/ (opens new window)，将 GitHub 仓库链接拷贝到输入框，点击 Look up 按钮：

可以看到，刚刚打的 release 被识别到了，但是此时 Log 那一列下面没有日志图标，说明 jitpack 还没有对它进行构建，点一下 Get it 按钮，再 Look up 一下就触发构建了：

注：就算不点 Get it 按钮，jitpack 也会自动触发构建的，但不知道会延迟多久，反正你想马上构建的话，就点一下吧。

因为我们已经提供了 aar 和pom 文件，所以 jitpack 构建会很快，1 分钟左右就出来了，但是这次日志图标是红色的，后面是 Report 按钮，说明构建失败了：

注：Status 下方按钮后面有个 × 图标，如果你自己操作的时候没有看到的话，请确认是否有登录 jitpack 账号。

点击日志图标，可以查看日志信息：

可以看到报错信息是 ERROR: No build artifacts found，这个报错是因为我们上传的 aar 和 pom 文件没有存放到 $HOME/.m2/repository 等标准目录下，所以 jitpack 找不到了。不过，可以给 pom 文件中声明构建时使用 android-maven-plugin 插件来解决：

<?xml version="1.0" encoding="UTF-8"?>
+<project>
+  ...
+  <packaging>aar</packaging>
+  <build>
+    <plugins>
+      <plugin>
+        <groupId>com.simpligility.maven.plugins</groupId>
+        <artifactId>android-maven-plugin</artifactId>
+        <version>4.1.0</version>
+        <extensions>true</extensions>
+        <configuration>
+          <encoding>utf8</encoding>
+          <source>1.8</source>
+          <target>1.8</target>
+          <sign>
+            <debug>false</debug>
+          </sign>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+  <dependencies>
+    ...
+  </dependencies>
+</project>
+

pom.xml 修改好之后，提交到 GitHub 仓库，然后，执行以下两个步骤：

  1. 把前面创建的 release 和 tag 都删掉，重新走第二步，即重新打 tag 和 release。
  2. 在 jitpack 页面，点击 Status 下方按钮后面的 × 图标，将构建失败的记录删除，重新走第三步，即重新触发构建。

这次日志图标是绿色的，说明构造成功了：

# 五、集成闭源 library

点击 Get it 按钮后，页面会向下滚动，按照 jitpack 的集成步骤，操作即可：

// root build.gradle
+allprojects {
+    repositories {
+        ...
+        maven { url 'https://jitpack.io' }
+    }
+}
+
+// app build.gradle
+dependencies {
+    ...
+    // implementation project(":library")
+    implementation 'com.github.GitLqr:lib-closed-source-arr:1.0'
+}
+

工程 rebuild 之后，能正常跑，查看 GitLqrUtil 类的引用，确实来自闭源 aar：

至此，闭源的 aar 就发布成功咯，如果你觉得文章对你有帮助的话，请不吝点个免费的赞~

+ +
+
#jitpack#maven#闭源库#aar
Android - 混淆 java-library 工程
Android - 自动系统签名

+ ← + Android - 自动系统签名→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/e9d226/index.html b/pages/e9d226/index.html new file mode 100644 index 000000000..91298dbea --- /dev/null +++ b/pages/e9d226/index.html @@ -0,0 +1,201 @@ + + + + + + DesignPattern - 建造者模式【创建型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-02
目录

DesignPattern - 建造者模式【创建型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、建造者模式介绍

建造者模式（Builder Pattern）使用多个简单的步骤一步步构建成一个复杂的对象，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建出不同的实例；允许用户只通过指定复杂对象的类型和内容就可以构建它们，不需要知道内部的具体构建细节。

  • 核心组成

    • Product：产品角色

    • Builder：抽象建造者，定义多个通用方法和构建方法

    • ConcreteBuilder：具体建造者，可以有多个

    • Director：指挥者，控制整个组合过程，将需求交给建造者，由建造者去创建对象

      补充：核心组成不一定要全部齐全，比如 Director 通常可以省略，可参考 java 中的 StringBuilder 也是建造者模式（不完全一样，但思想一致）

  • 场景举例

    • KFC 创建套餐：套餐是一个复杂对象，它一般包含 主食如汉堡、烤翅 和 饮料如果汁、可乐等 组成部分，不同的套餐有不同的组合，而 KFC 的服务员可以根据顾客的要求，一步一步装配这些组成部分，构造一份完整的套餐
    • 电脑组装：有低配、高配，根据用户需求，采购不同规格的 CPU、内存、电源、硬盘、主板等。

  • 优点

    • 客户端不必知道产品内部组成的细节，将产品本身与产品的创建过程解耦
    • 每一个具体建造者都相对独立，而与其他的具体建造者无关，更加精细地控制产品的创建过程
    • 增加新的具体建造者无须修改原有类库的代码，符合开闭原则
    • 建造者模式结合链式编程来使用，代码上更加美观

  • 缺点

    • 建造者模式所创建的产品一般具有较多的共同点，如果产品差异大则不建议使用

  • 建造者模式与抽象工厂模式的比较：

    • 建造者模式返回一个组装好的完整产品
    • 抽象工厂模式返回一系列相关的产品，这些产品位于不同的产品等级结构，构成一个产品族

# 二、建造者模式代码实现

创建产品类：

/**
+ * 套餐
+ *
+ * @author GitLqr
+ */
+public class SetMenu {
+	// 主食
+	private String stapleFood;
+
+	// 饮料
+	private String drink;
+
+	// 小吃
+	private String snack;
+
+	public SetMenu(String stapleFood, String drink, String snack) {
+		super();
+		this.stapleFood = stapleFood;
+		this.drink = drink;
+		this.snack = snack;
+	}
+
+	@Override
+	public String toString() {
+		return "SetMenu [stapleFood=" + stapleFood + ", drink=" + drink + ", snack=" + snack + "]";
+	}
+
+}
+

创建抽象建造者类（或接口）：

/**
+ * 套餐建造接口
+ *
+ * @author GitLqr
+ */
+public interface ISetMenuBuilder {
+	ISetMenuBuilder addStapleFood(String stapleFood);
+
+	ISetMenuBuilder addDrink(String drinkString);
+
+	ISetMenuBuilder addSnak(String snak);
+
+	SetMenu build();
+}
+

创建具体建造者类：

/**
+ * KFC 套餐建造器
+ *
+ * @author GitLqr
+ */
+public class KFCSetMenuBuilder implements ISetMenuBuilder {
+
+	private List<String> stapleFoods = new ArrayList<>();
+	private List<String> drinks = new ArrayList<>();
+	private List<String> snaks = new ArrayList<>();
+
+	@Override
+	public ISetMenuBuilder addStapleFood(String stapleFood) {
+		this.stapleFoods.add(stapleFood);
+		return this;
+	}
+
+	@Override
+	public ISetMenuBuilder addDrink(String drink) {
+		this.drinks.add(drink);
+		return this;
+	}
+
+	@Override
+	public ISetMenuBuilder addSnak(String snak) {
+		this.snaks.add(snak);
+		return this;
+	}
+
+	@Override
+	public SetMenu build() {
+		return new SetMenu(stapleFoods.toString(), drinks.toString(), snaks.toString());
+	}
+
+}
+

说明：【具体建造者类】可以拓展出很多个，比如 "永和豆浆" 的套餐建造者 YonHoSetMenuBuilder 等等。

创建指挥者类（Director）：

/**
+ * KFC 指挥者（服务员）
+ *
+ * @author GitLqr
+ */
+public class KFCDirector {
+
+	public static SetMenu getBreakfastSetMenu() {
+		return new KFCSetMenuBuilder()
+				.addStapleFood("皮蛋瘦肉粥")
+				.addDrink("豆浆")
+				.build();
+	}
+
+	public static SetMenu getFamilyBucketSetMenu() {
+		return new KFCSetMenuBuilder()
+				.addStapleFood("香辣鸡腿堡")
+				.addStapleFood("新奥尔良烤鸡腿堡")
+				.addDrink("百事可乐")
+				.addDrink("美年达")
+				.addSnak("吮指原味鸡")
+				.addSnak("新奥尔良烤翅")
+				.addSnak("葡式蛋挞")
+				.addSnak("醇香土豆泥")
+				.build();
+	}
+}
+

说明：实际开发中，指挥者类（Director）很多时候会被省略掉，取而代之，由使用者在业务代码中 使用【具体建造者类】直接创建产品，这让产品的创建更加灵活，但同时也增加了不可控性，需根据实际情况权衡利弊。

使用：

public class Test {
+	public static void main(String[] args) {
+		SetMenu breakfast = KFCDirector.getBreakfastSetMenu();
+		SetMenu familyBucket = KFCDirector.getFamilyBucketSetMenu();
+		System.out.println("KFC早餐套餐：" + breakfast);
+		System.out.println("KFC全家桶套餐：" + familyBucket);
+	}
+}
+
+ +
+
#设计模式#建造者模式
DesignPattern - 原型模式【创建型】
DesignPattern - 适配器模式【结构型】

+ ← + DesignPattern - 适配器模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ea0f4e/index.html b/pages/ea0f4e/index.html new file mode 100644 index 000000000..f38ca24e8 --- /dev/null +++ b/pages/ea0f4e/index.html @@ -0,0 +1,635 @@ + + + + + + uniapp - 接入科大讯飞语音评测 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-09-05
目录

uniapp - 接入科大讯飞语音评测

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简介

科大讯飞语音评测可以对字、词、句、篇章等题型进行多维度评分（准确度、流畅度、完整度、声韵调型等），支持中文和英文。最新的流式版使用 webSocket 调用接口，开发者可以边录音边上边音频数据（录音与评测同时进行），可以缩短用户等待评测结果的时间，大大提高用户体验。

科大讯飞语音评测提供了多种平台的 SDK 与 Demo，但是没有提供微信小程序版本的 SDK 与 Demo，不过，科大讯飞语音评测【WebApi】有提供浏览器版本的 Demo，理论上可以对它进行适当的改造，就能运行到微信小程序环境下，所以本文的主要内容就是对科大讯飞语音评测【WebApi】的浏览器版本 Demo 进行改造和封装。

温馨提示：着急伸手拿最终成品的，可以直接滚到 【文章末尾】 查看。

# 二、分析

打开科大讯飞语音评测 API 文档页面，在 调用示例 章节处，找到 语音评测流式API demo js语言 并下载，解压后使用 vscode 打开，查看 index.js，可以看到开头有如下注释：

// 1. websocket连接：判断浏览器是否兼容，获取websocket url并连接，这里为了方便本地生成websocket url
+// 2. 获取浏览器录音权限：判断浏览器是否兼容，获取浏览器录音权限，
+// 3. js获取浏览器录音数据
+// 4. 将录音数据处理为文档要求的数据格式：采样率16k或8K、位长16bit、单声道；该操作属于纯数据处理，使用webWork处理
+// 5. 根据要求（采用base64编码，每次发送音频间隔40ms，每次发送音频字节数1280B）将处理后的数据通过websocket传给服务器，
+// 6. 实时接收websocket返回的数据并进行处理
+
+// ps: 该示例用到了es6中的一些语法，建议在chrome下运行
+

通过这个注释说明，可以直观的了解到该 js demo 的大致流程，下面会按照注释里的顺序，逐个分析，并对应到微信小程序里的实现。

注意：因为本人使用的是 uniapp 开发，所以以下关于微信小程序代码实现的部分，并非 传统的 js + wxss + wxml，而是 vue3 + typescript。

# 1、创建 webSocket

官方 demo 是运行在浏览器环境下的，而不同的浏览器对 webSocket 的创建方式不太一样，所以这里做兼容：

// 连接websocket
+connectWebSocket() {
+  return getWebSocketUrl().then(url => {
+    let iseWS
+    if ('WebSocket' in window) {
+      iseWS = new WebSocket(url)
+    } else if ('MozWebSocket' in window) {
+      iseWS = new MozWebSocket(url)
+    } else {
+      alert('浏览器不支持WebSocket')
+      return
+    }
+    this.webSocket = iseWS
+    iseWS.onopen = e => {
+      ...
+    }
+    iseWS.onmessage = e => {
+      ...
+    }
+    iseWS.onerror = e => {
+      ...
+    }
+    iseWS.onclose = e => {
+      ...
+    }
+  })
+}
+

微信小程序内创建 webSocket 就很简单了，使用 uni.connectSocket 即可：

/* socket相关 */
+private socketTask: UniApp.SocketTask | null = null;
+
+async connect() {
+  const url = await this.getWebSocketUrl();
+  const newUrl = encodeURI(url);
+  this.socketTask = uni.connectSocket({
+    url: newUrl,
+    // 如果希望返回一个 socketTask 对象，需要至少传入 success / fail / complete 参数中的一个
+    complete: () => {},
+  });
+  this.socketTask.onOpen((res) => {
+    ...
+  });
+  this.socketTask.onMessage((res) => {
+    ...
+  });
+  this.socketTask.onError((err) => {
+    ...
+  });
+  this.socketTask.onClose(() => {
+    ...
+  });
+}
+

注意：这里有一个坑，uni.connectSocket() 如果不指定 success/fail/complete 参数中的一个，则返回的不是 SocketTask，而是一个 Promise！我们需要的是 SocketTask，所以这里指定了一个空的 complete 回调函数。

上述代码中有一处十分重要的函数调用，即 getWebSocketUrl()，它负责生成科大讯飞语音评测【WebApi】的 webSocket 链接，涉及到参数加密：

import CryptoJS from "crypto-js";
+import { Base64 } from "js/base64js.js";
+
+/**
+ * 获取websocket url
+ * 该接口需要后端提供，这里为了方便前端处理
+ */
+function getWebSocketUrl() {
+  return new Promise((resolve, reject) => {
+    // 请求地址根据语种不同变化
+    var url = "wss://ise-api.xfyun.cn/v2/open-ise";
+    var host = "ise-api.xfyun.cn";
+    var apiKey = API_KEY;
+    var apiSecret = API_SECRET;
+    var date = new Date().toGMTString();
+    var algorithm = "hmac-sha256";
+    var headers = "host date request-line";
+    var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/open-ise HTTP/1.1`;
+    var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
+    var signature = CryptoJS.enc.Base64.stringify(signatureSha);
+    var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
+    var authorization = btoa(authorizationOrigin);
+    url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
+    resolve(url);
+  });
+}
+

js/base64js.js 是 demo 工程里 js 目录下的一个文件（采用 CommonJs 导入规范），而 crypto-js 是使用 npm 安装的一个第三方模块，理论上只需要将这 2 个模块直接拷贝或 npm 安装集成到项目中就好了，但是我的这个工程用的构建工具是 Vite，只支持 ES 模块导入规范，并且项目中使用了 TypeScript，所以，为了更好的编码体验，这里替换为支持 ES 模块导入规范且支持 TypeScript 的另外 2 个模块（js-base64、crypto-es），与 demo 中的那 2 个模块功能完全相同：

// npm i crypto-es -S
+// npm i js-base64 -S
+import CryptoES from "crypto-es";
+import { Base64 } from "js-base64";
+
+/**
+ * @returns 生成wss链接
+ */
+protected getWebSocketUrl(): Promise<string> {
+  if (this.apiKey === "" || this.apiSecret === "") {
+    throw new Error("apiKey、apiSecret must not be empty !!!");
+  }
+  return new Promise<string>((resolve, reject) => {
+    // 请求地址根据语种不同变化
+    let url = "wss://ise-api.xfyun.cn/v2/open-ise";
+    const host = "ise-api.xfyun.cn";
+    const date = (new Date() as any).toGMTString();
+    const algorithm = "hmac-sha256";
+    const headers = "host date request-line";
+    const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/open-ise HTTP/1.1`;
+    const signatureSha = CryptoES.HmacSHA256(signatureOrigin, this.apiSecret);
+    const signature = CryptoES.enc.Base64.stringify(signatureSha);
+    const authorizationOrigin = `api_key="${this.apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
+    const authorization = Base64.encode(authorizationOrigin);
+    url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;
+    resolve(url);
+  });
+}
+

Date#toGMTString() 是一个过时的方法，在 TypeScript 中不被识别，从而导致编译不通过，除了像上述代码中通过强转 any 来规避外，还可以在 src/env.d.ts 文件中进行如下声明解决，interface Date { toGMTString(): string; }，如果工程中频繁使用该方法的话，建议用第二种方法，这样就不必每处都写一次强转代码了。

注意：getWebSocketUrl() 函数内在生成 webSocket url 时，会使用到 API_KEY 和 API_SECRET，这 2 个参数需要你自己注册一个科大讯飞的开发者账号之后，在开发者账号后台获取，为了防止被别人盗用，这个 url 的生成逻辑应该放置到自己的业务后端去实现。

# 2、录音上下文与权限

录音上下文的创建，以及获取录音权限的方式在不同浏览器环境中各不相同，所以官方 Demo 中做了大量兼容判断：

// 初始化浏览器录音
+recorderInit() {
+  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia
+  // 创建音频环境
+  try {
+    this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
+    this.audioContext.resume()
+  } catch (e) {
+    if (!this.audioContext) {
+      alert('浏览器不支持webAudioApi相关接口')
+      return
+    }
+  }
+  // 获取浏览器录音权限
+  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    navigator.mediaDevices
+      ...
+      .then(stream => { getMediaSuccess(stream) })
+      .catch(e => { getMediaFail(e) })
+  } else if (navigator.getUserMedia) {
+    navigator.getUserMedia(
+      ...,
+      stream => { getMediaSuccess(stream) },
+      function(e) { getMediaFail(e) }
+    )
+  } else {
+    ...
+    alert('无法获取浏览器录音功能，请升级浏览器或使用chrome')
+    this.audioContext && this.audioContext.close()
+    return
+  }
+  // 获取浏览器录音权限成功的回调
+  let getMediaSuccess = stream => {
+    console.log('getMediaSuccess')
+    // 创建一个用于通过JavaScript直接处理音频
+    this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1)
+    this.scriptProcessor.onaudioprocess = e => {
+      // 去处理音频数据
+      ...
+    }
+    // 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
+    this.mediaSource = this.audioContext.createMediaStreamSource(stream)
+    // 连接
+    this.mediaSource.connect(this.scriptProcessor)
+    this.scriptProcessor.connect(this.audioContext.destination)
+    ...
+  }
+  let getMediaFail = (e) => {
+    alert('请求麦克风失败')
+    this.audioContext && this.audioContext.close()
+    this.audioContext = undefined
+    ...
+  }
+}
+

而在微信小程序环境下，获取录音上下文与权限就简单多了，通过 uni.getRecorderManager() 即可获取录音上下文（管理器），然后调用 start(option) 时会自动询问用户是否授权录音权限：

const recordManager = uni.getRecorderManager();
+
+/**
+ * 开始录音
+ */
+const startRecord = () => {
+  recordManager.onStart(() => {
+    console.log("recorder start");
+    ...
+  });
+  recordManager.onPause(() => {
+    console.log("recorder pause");
+  });
+  recordManager.onStop((res) => {
+    // tempFilePath	String	录音文件的临时路径
+    console.log("recorder stop", res);
+    ...
+  });
+  recordManager.onError((err) => {
+    // errMsg	String	错误信息
+    console.log("recorder err", err);
+  });
+  recordManager.onFrameRecorded((res) => {
+    // frameBuffer	ArrayBuffer	录音分片结果数据
+    // isLastFrame	Boolean	当前帧是否正常录音结束前的最后一帧
+    const { frameBuffer } = res;
+    ...
+  });
+  recordManager.start(option);
+};
+

# 3、获取录音数据

浏览器的录音数据是通过 scriptProcessor.onaudioprocess 回调函数获得的：

// 获取浏览器录音权限成功的回调
+let getMediaSuccess = (stream) => {
+  ...
+  this.scriptProcessor.onaudioprocess = (e) => {
+    // 去处理音频数据
+    transWorker.postMessage(e.inputBuffer.getChannelData(0));
+  };
+  ...
+};
+

微信小程序的录音数据是通过 recordManager.onFrameRecorded() 回调函数获得：

recordManager.onFrameRecorded((res) => {
+  // frameBuffer	ArrayBuffer	录音分片结果数据
+  // isLastFrame	Boolean	当前帧是否正常录音结束前的最后一帧
+  const { frameBuffer } = res;
+  pushAudioData(frameBuffer); // 将每一帧音频保存起来
+});
+

# 4、录音数据格式

从上面的 语音评测接口要求 中可以知道，科大讯飞语音评测接口对录音数据的格式是有要求的：

内容 说明
音频属性 采样率 16k、位长 16bit、单声道
音频格式 pcm、wav、mp3（需更改 aue 的值为 lame）、speex-wb;
音频大小 音频数据发送会话时长不能超过 5 分钟

官方 Demo 中，通过 scriptProcessor.onaudioprocess 回调拿到的录音数据是双声道的 PCM 数据，而接口要求的是单声道，所以通过代码 e.inputBuffer.getChannelData(0) 提取出第 1 个声道的数据，并交给 transWorker 去处理成 采样率 16k、位长 16bit 的 PCM 数据：

// index.js
+this.scriptProcessor.onaudioprocess = (e) => {
+  // 去处理音频数据
+  transWorker.postMessage(e.inputBuffer.getChannelData(0));
+};
+
+// transcode.worker.js
+(function(){
+  self.onmessage = function(e){
+    transAudioData.transcode(e.data)
+  }
+
+  let transAudioData = {
+    transcode(audioData) {
+      let output = transAudioData.to16kHz(audioData)
+      output = transAudioData.to16BitPCM(output)
+      ...
+    },
+    to16kHz(audioData) {
+      ...
+      return newData
+    },
+    to16BitPCM(input) {
+      ...
+      return dataView
+    },
+  }
+})()
+

微信小程序中在启动录音时需要传入一个配置参数 option，在这个 option 中我们可以指定采样率、通道数等配置，之后通过 recordManager.onFrameRecorded() 回调拿到的就已经是 采样率 16k、位长 16bit 的单声道 PCM 数据了：

const recordManager = uni.getRecorderManager();
+const option = {
+  duration: duration, // 录音的时长，单位 ms，最大值 600000（10 分钟）
+  sampleRate: 16000, // 采样率（pc不支持）
+  numberOfChannels: 1, // 录音通道数
+  // encodeBitRate: 48000, // 编码码率(默认就是48000)
+  frameSize: 1, // 指定帧大小，单位 KB。传入 frameSize 后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。暂仅支持 mp3、pcm 格式。
+  format: "pcm", // 音频格式，默认是 aac
+}
+const startRecord = () => {
+  ...
+  recordManager.onFrameRecorded((res) => {
+    // frameBuffer	ArrayBuffer	录音分片结果数据
+    // isLastFrame	Boolean	当前帧是否正常录音结束前的最后一帧
+    const { frameBuffer } = res;
+    pushAudioData(frameBuffer); // 将每一帧音频保存起来
+  });
+  recordManager.start(option);
+};
+

注意：微信小程序录音时长最大值为 10 分钟，而科大讯飞语音评测录音时长最大值为 5 分钟！！

# 5、发送 webSocket 数据

官方 Demo 中，使用 1 个 audioData 数组来存放每一帧经过 transWorker 处理过的 PCM "散装" 数据（音频流数据）；在 webSocket 连接开启的 500ms 之后，开始发送音频流数据：

class IseRecorder {
+  constructor({ language, accent, appId } = {}) {
+    // 记录音频数据
+    this.audioData = []
+    transWorker.onmessage = function (event) {
+      self.audioData.push(...event.data) // GitLqr: 注意这里是 "散装" 的
+    }
+    ...
+  }
+  recorderStart() {
+    this.audioContext.resume()
+    this.connectWebSocket()
+  }
+  // 连接websocket
+  connectWebSocket() {
+    return getWebSocketUrl().then(url => {
+      ...
+      iseWS.onopen = e => {
+        // 重新开始录音
+        setTimeout(() => {
+          this.webSocketSend()
+        }, 500)
+      }
+    })
+  }
+  // 初始化浏览器录音
+  recorderInit() {
+    ...
+    // 获取浏览器录音权限成功的回调
+    let getMediaSuccess = stream => {
+      this.scriptProcessor.onaudioprocess = e => {
+        // 去处理音频数据
+        transWorker.postMessage(e.inputBuffer.getChannelData(0));
+      }
+      ...
+    }
+  }
+}
+

再来看 webSocketSend() 的具体实现，就是不断从 audioData 数组中取出 "1280字节的" PCM 数据，经过 Base64 编码后发送给科大讯飞接口；PCM 数据只会在 第一帧 和 中间帧 进行发送，当 PCM 数据消费完之后，还需要再发送一个 最后帧 通知科大讯飞语音评测接口数据流已经全部发送完成；此外，需要注意第一帧的几个重要参数：

  • category：题型。read_sentence 指的是句子朗读，read_chapter 指的是篇章朗读，等等。
  • auf：音频采样率。不填默认就是 audio/L16;rate=16000。
  • ent：中文填 cn_vip；英文填 en_vip。
  • text：待评测文本 utf8 编码，需要加 utf8bom 头。

注意：官方 Demo 的对比句子是 where are you，所以 ent 填写的是 en_vip，所以，如果实际业务使用的是中文，则需要注意调整参数值。另外，第一帧参数中有用到 appid，这个跟前面的 API_KEY、API_SECRET 一样，都是从开发者账号后台拿到的。

  // 向webSocket发送数据
+  webSocketSend() {
+    let audioData = this.audioData.splice(0, 1280)
+    var params = {
+      common: { app_id: this.appId },
+      business: {
+        ...
+        category: 'read_sentence', // read_syllable/单字朗读，汉语专有 read_word/词语朗读  read_sentence/句子朗读 https://www.xfyun.cn/doc/Ise/IseAPI.html#%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B
+        auf: 'audio/L16;rate=16000',
+        ent: 'en_vip',
+        text: '\uFEFF' + 'where are you'
+      },
+      data: {
+        status: 0, encoding: 'raw', data_type: 1,
+        data: this.toBase64(audioData),
+      },
+    }
+    this.webSocket.send(JSON.stringify(params))
+    this.handlerInterval = setInterval(() => {
+      // websocket未连接
+      if (this.webSocket.readyState !== 1) {
+        this.audioData = []
+        clearInterval(this.handlerInterval)
+        return
+      }
+      // 最后一帧
+      if (this.audioData.length === 0) {
+        if (this.status === 'end') {
+          this.webSocket.send(
+            JSON.stringify({
+              business: { cmd: 'auw', aus: 4, aue: 'raw' },
+              data: { status: 2, encoding: 'raw', data_type: 1, data: '', },
+            })
+          )
+          this.audioData = []
+          clearInterval(this.handlerInterval)
+        }
+        return false
+      }
+      audioData = this.audioData.splice(0, 1280)
+      // 中间帧
+      this.webSocket.send(
+        JSON.stringify({
+          business: { cmd: 'auw', aus: 2, aue: 'raw' },
+          data: {
+            status: 1, encoding: 'raw', data_type: 1,
+            data: this.toBase64(audioData),
+          },
+        })
+      )
+    }, 40)
+  }
+

微信小程序中的数据发送流程跟官方 Demo 差不多，不过对 PCM 数据的存储方式不太一样，在启动录音的时候传入的 option 参数中，frameSize 指定了 onFrameRecorded() 回调的 PCM 帧大小，比如指定为 1(k)，那么每次回调时附带的就是 "1024"字节的 PCM 数据，而官方 Demo 中对 PCM 进行拆散（存储时）和切割（发送时）的操作在微信小程序中是没必要的，无形中增加了复杂度。于是我这里干脆使用了一个 audioDataList 数组，将 PCM 数据以一帧帧（每帧 1024 字节）的形式进行存放，发送时，再一帧一帧的取出：

// index.vue
+const recordManager = uni.getRecorderManager();
+const option = {
+  ...
+  frameSize: 1, // 指定帧大小，单位 KB。传入 frameSize 后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。暂仅支持 mp3、pcm 格式。
+  format: "pcm", // 音频格式，默认是 aac
+}
+const startRecord = () => {
+  ...
+  recordManager.onFrameRecorded((res) => {
+    // frameBuffer	ArrayBuffer	录音分片结果数据
+    // isLastFrame	Boolean	当前帧是否正常录音结束前的最后一帧
+    const { frameBuffer } = res;
+    pushAudioData(frameBuffer); // 将每一帧音频保存起来
+  });
+  recordManager.start(option);
+};
+
+// ise-xfyun/index.ts
+export default class IseXfyun {
+  private audioDataList: ArrayBuffer[] = []; // 音频流数据
+
+  /**
+   * 添加语音数据
+   * @param frameBuffer 帧数据
+   */
+  pushAudioData(frameBuffer: any) {
+    if (frameBuffer) {
+      this.audioDataList.push(frameBuffer);
+    }
+  }
+  /**
+   * 发送语音数据
+   */
+  private sendAudioData() {
+    const audioData = this.audioDataList.splice(0, 1);
+    const params = {
+      common: { app_id: this.appId },
+      business: {
+        ...
+        category: this.category,
+        ent: "cn_vip", // 中文
+        text: "\uFEFF" + this.chapter,
+      },
+      data: {
+        status: 0, encoding: "raw", data_type: 1,
+        data: this.toBase64(audioData[0]),
+      },
+    };
+    this.socketTask.send({ data: JSON.stringify(params) });
+    this.handlerInterval = setInterval(() => {
+      // websocket未连接
+      if (!this.socketTask) { return this.clearHandlerInterval(); }
+      // 最后一帧
+      if (this.audioDataList.length === 0) {
+        const params = ...;
+        this.socketTask.send({ data: JSON.stringify(params) });
+        this.audioDataList = [];
+        return this.clearHandlerInterval();
+      }
+      // 中间帧
+      const audioData = this.audioDataList.splice(0, 1);
+      const params = {
+        business: { cmd: "auw", aus: 2, aue: "raw" },
+        data: {
+          status: 1, encoding: "raw", data_type: 1,
+          data: this.toBase64(audioData[0]),
+        },
+      };
+      this.socketTask.send({ data: JSON.stringify(params) });
+    }, 40);
+  }
+  private toBase64(buffer: ArrayBuffer) {
+    return uni.arrayBufferToBase64(buffer);
+  }
+  ...
+}
+

注意：这里的 toBase64() 也与官方 Demo 中的实现不一样，官方 Demo 使用的是 js/base64js.js 中 Base64 来对数据进行编码，但是实际测试在微信小程序环境中编码会出问题，具体表现为调用科大讯飞语音评测接口时，会返回 68675 错误码，改用 uni.arrayBufferToBase64() 产出的 base64 则可被科大讯飞正常识别。

# 6、接收 webSocket 消息

官方 Demo 在创建好 webSocket 之后，指定了消息回调处理函数，具体处理逻辑交由 result(resultData) 实现，回调次数为多次，比如：帧数据接收成功消息，数据流中途错误消息，以及最终的评测结果消息。需要注意的是，如果在中途收到了科大讯飞接口的错误消息，那么应该直接停止数据流发送并提示给用户，因为一旦接口返回了错误消息，那么后续发送的中间帧数据科大讯飞接口是不会受理的，纯属浪费用户的流量和时间：

// 连接websocket
+connectWebSocket() {
+  return getWebSocketUrl().then(url => {
+    let iseWS
+    ...
+    iseWS.onmessage = e => {
+      this.result(e.data)
+    }
+  })
+}
+
+result(resultData) {
+  // 识别结束
+  let jsonData = JSON.parse(resultData)
+  if (jsonData.data && jsonData.data.data) {
+    let data = Base64.decode(jsonData.data.data)
+    let grade = parser.parse(data, {
+      attributeNamePrefix: '',
+      ignoreAttributes: false
+    })
+    // 显示成绩
+    ...
+  }
+  if (jsonData.code === 0 && jsonData.data.status === 2) {
+    this.webSocket.close()
+  }
+  if (jsonData.code !== 0) {
+    this.webSocket.close()
+    console.log(`${jsonData.code}:${jsonData.message}`)
+  }
+}
+

微信小程序接收并处理 webSocket 消息的逻辑与官方 Demo 类似，不多赘述：

import { Base64 } from "js-base64";
+import { XMLParser } from "fast-xml-parser";
+
+export default class IseXfyun {
+  /**
+   * 连接科大讯飞wss接口
+   */
+  async connect() {
+    this.socketTask = uni.connectSocket(...);
+    this.socketTask.onMessage((res) => {
+      this.onMessage(res.data.toString());
+    });
+    ...
+  }
+  private onMessage(resultData: string) {
+    const jsonData = JSON.parse(resultData);
+    this.log("收到消息：", jsonData);
+    if (jsonData.data && jsonData.data.data) {
+      const data = Base64.decode(jsonData.data.data);
+      const parser = new XMLParser({
+        attributeNamePrefix: "",
+        ignoreAttributes: false,
+        allowBooleanAttributes: true,
+      });
+      const grade = parser.parse(data);
+      // 显示成绩
+      ...
+    }
+    if (jsonData.code === 0 && jsonData.data.status === 2) {
+      this.disconnect();
+    }
+    if (jsonData.code !== 0) {
+      this.callback.onError(jsonData);
+      this.log(`${jsonData.code}:${jsonData.message}`);
+      this.disconnect();
+    }
+  }
+  ...
+}
+

# 三、封装

以上就是对科大讯飞语音评测官方 js Demo 代码逻辑的逐步分析，官方 Demo 把录音与 webSocket 接口调用写在一个文件中，感觉比较混乱，为了更好的复用，我将 录音 与 语音评测 两者进行拆分，把 语音评测 的部分封装到 IseXfyun 类中，大致类结构如下，内容基本上就是上面分析过程中微信小程序端的实现，为缩短篇幅，方法体内代码以省略号表示：

import { Base64 } from "js-base64";
+import { XMLParser } from "fast-xml-parser";
+import CryptoES from "crypto-es";
+
+/**
+ * 科大讯飞 语音评测（流式版）封装
+ *
+ * 注意：需要设置wss域名白名单 wss://ise-api.xfyun.cn
+ * 建议：apiKey、apiSecret 不要存放在本地，应该放在后端，防止被破解。
+ * 最佳做法：继承 IseXfyun，重写 getWebSocketUrl()，从后端获取 socket 链接，即 webSocketUrl 的计算规则由后端实现。
+ *
+ * @author GitLqr
+ * @since 2022-08-30
+ */
+export default class IseXfyun {
+  /**
+   * 科大讯飞的语音评测只支持 16k 16bit 单通道
+   * @param duration 录音时长
+   * @returns 录音配置
+   */
+  getAudioRecordOption(duration: number) { ... }
+
+  /**
+   * 添加语音数据
+   * @param frameBuffer 帧数据
+   */
+  pushAudioData(frameBuffer: any) { ... }
+
+  /**
+   * @returns 生成wss链接
+   */
+  protected getWebSocketUrl(): Promise<string> { ... }
+
+  /**
+   * 连接科大讯飞wss接口
+   */
+  async connect() { ... }
+
+  /**
+   * 断开连接
+   */
+  disconnect() { ... }
+
+  /**
+   * 发送语音数据
+   */
+  private sendAudioData() { ... }
+
+  private onMessage(resultData: string) { ... }
+}
+

类 IseXfyun 与 Uniapp 完整版 Demo 的具体代码可访问下面仓库进行查看：

注意：微信小程序需要配置域名白名单 wss://ise-api.xfyun.cn

Uniapp版 科大讯飞语音评测Demo

+ +
+
#uniapp#小程序#科大讯飞#语音评测
uniapp - 腾讯云点播小程序插件
uniapp - tensorflowjs 之小程序环境集成

+ ← + uniapp - tensorflowjs 之小程序环境集成→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ea5b48/index.html b/pages/ea5b48/index.html new file mode 100644 index 000000000..86e494898 --- /dev/null +++ b/pages/ea5b48/index.html @@ -0,0 +1,96 @@ + + + + + + 逆向 - 用IDA破解adb时间限制 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-10-21
目录

逆向 - 用IDA破解adb时间限制

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、场景

之前公司有个 TV 盒子项目，需要使用厂商提供的 adb 工具才能连接设备进行调试，厂商为了安全，就在 adb 工具里加了过期时间限制，现在 adb 工具过期了，问厂商要新的，不给，让我自己改电脑时间（内心 os：这么容易就绕过去了，当初还为了安全加过期时间？纯属恶心人）。今天，领导说还要再调试查查项目 bug，我静心一想，每次都这样改时间也不是个事儿，求人不如求己，既然厂商不给力，那我就自己来动手破解吧~

# 二、实战

此次所需工具/条件如下：

  • 神器 IDA
  • 厂商 adb 包
  • 懂一点 adb 命令
  • 懂一点汇编知识

# 1、准备环境

【神器 IDA】，这个网上随便找一下就有了，这里不多赘述，有能力的请支持一下正版，良心软件。

【厂商 adb 包】是一个 zip 压缩包，解压后，只有 3 个文件：

  • adb.exe
  • AdbWinApi.dll
  • AdbWinUsbApi.dll

在 windows 上，为了方便在 cmd 窗口使用 adb 命令，同时为了不与 AndroidStudio 自带的 adb 冲突，我将以上 3 个文件复制到 xxx\Android\Sdk\platform-tools 目录下进行覆盖。

注意：记得备份好该目录下原本的 3 个文件哦

# 2、寻找切入点

确定好 TV 盒子的 ip 地址，打开 cmd 窗口，使用 adb connect xxx 连接盒子：

C:\Users\GitLqr>adb connect 192.168.0.104
+############
+

这里的 ############ 是厂商 adb 在验证系统时间过期后输出的，当然，此时是无法成功连上 TV 盒子的。不过呢，这个字符串输出不就是一个很好的切入点吗！！接着我们用 IDA-32bit 打开 adb.exe ：

注意：使用 IDA 64bit 还是 32bit 是根据具体要逆向的程序而定的，这里的 adb.exe 是 32 位程序，所以用的是 IDA-32bit。

选中 adb.exe 文件后，点 "打开" ，之后一路点 "OK" 和 "Yes"：

注意：IDA 在加载文件的时候，中途可能会提示一些 Warning 警告，不管它，继续点 "OK" 或 "Yes"。

当 IDA 加载成功后，就会看到如下界面了：

现在需要找到前面提到的 ############ 字符串，通过 "View -> Open subviews ->Strings" 或 按"Shift+F12" 打开字符串窗口：

此时，在 IDA 的左侧会出现一个 Strings window (字符串窗口)：

通过快捷键 "ctrl + f" 打开搜索栏，输入 ############ 后回车：

双击该搜索结果条目，在 IDA 右侧的 IDA View-A 窗口会跳转到该字符串所在的地址处。至此，切入点的指令位置就已经找到了。

# 3、理清逻辑

在找到切入点之后，接下来就需要理清这段指令的触发时机了。注意看，在 004C58E9 地址处指令后面有一段蓝色字： ; DATA XREF: _adb_commandline+124B，这段蓝色字的意思是该指令被 _adb_commandline+124B 处引用，正合我意，我们的目的就是要看，这个指令是在哪里被引用和触发的。

双击蓝色字之后，IDA View-A 窗口内容会发现变化，从 Text View 转变成了 Graph View，记住这个指令块的地址 loc_40C110：

按下 ctrl 键，加鼠标滚轮，可以缩放这个 Graph View：

沿着 loc_40C110 指令块头上的绿色线条，可以找到解决该指令块的唯一源头：

从这个图可以知道，该 loc_40BC0B 指令块使用了 cmp 汇编指令，比较 2 个值的大小关系，汇编指令 jg 的意思是 有符号大于则跳转，所以当比较结果大于 0 时，就会跳转到 loc_40C110 处，即输出 ############ 字符串，否则，往右边红色线继续执行，进入正常的 adb 操作。至此，已经把切入点的触发逻辑搞清楚了。

# 3、逆向汇编代码

在弄清楚触发逻辑之后，就得考虑破解方案了，我自个想到的有如下几种破解思路：

  1. 修改获取到的时间值（难，要找到获取时间的地址处）
  2. 修改比较结果（难，我不知道 ebp、buf、1Fh 都是些啥）
  3. 修改比较逻辑（易，只需要把 jg 改成能执行到红色线的其它指令即可）

综上，选用方案 3，因为 JG 意为 有符号大于则跳转，那么相反的，使用 为 0 则跳转 的 JZ 或 有符号小于则跳转 的 JL，都可以达到执行红色线的目的，这里我选用 JZ 指令，这样，无论电脑时间如何修改，基本上都不可能触发。（但是，如果你硬是要抬杠，那就算你说的对）

汇编跳转指令说明：https://blog.csdn.net/wq57885/article/details/80700032 (opens new window)

接下来要真正开始修改指令码了，先把 Graph View 转成 Text View，右击指令块，点击 "Text view"：

将光标移动到 jg 指令那行，即 0040BC12：

注意：鼠标左击一下，确定你光标就是在那里。

通过 "Edit -> Patch program -> Assemble" 打开 Assemble instruction (汇编指令) 对话框：

直接把 jg 改成 jz ，然后，点击 "OK"：

此时，你会发现，0040BC12 处的指令成功修改成功了，但还是会有个对话框出来问你，下一行 0x40BC18 处你要不要也改了，因为不需要修改，所以点击 "Cancel" 或 直接叉掉就行了：

搞定，至此，汇编指令修改成功。

# 4、导出成品

不要以为直接 ctrl + s 保存就可以了，到目前为止，我们在 IDA 里所做的一切，都没有修改到原 adb.exe 文件，因为这是一个由 IDA 对原程序加载解析后得到的一个 IDA 工程，我们修改的也只是这个 IDA 工程里的代码，所以，我们还需要把工程进行导出，不过，IDA 很 dio，通过 "Edit -> Patch program -> Apply patches to input file..."，可以把修改过的汇编码直接应用到原文件上：

这里还可以指定应用的地址范围，不用管，直接点 "OK" 即可：

可能会遇到 "Permission denied" 警告，这是因为 adb 进程正在运行中，只需要把 adb 进程 kill 掉，再重复上述操作即可：

注意：除了用 windows 自带的任务管理器，还可以使用 adb 命令 adb kill-server 来杀掉 adb 进程哦。

应用成功后，再来执行一次 adb 连接命令：

C:\Users\GitLqr>adb kill-server
+
+C:\Users\GitLqr>adb connect 192.168.0.104
+* daemon not running. starting it now on port 5037 *
+* daemon started successfully *
+connected to 192.168.0.104:5555
+

perfect~

+ +
+
#逆向#破解#IDA
Jsonnet - json数据模板语言

+ ← +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ea91be/index.html b/pages/ea91be/index.html new file mode 100644 index 000000000..9d1bf5211 --- /dev/null +++ b/pages/ea91be/index.html @@ -0,0 +1,151 @@ + + + + + + Kotlin - 作用域函数 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-02-02
目录

Kotlin - 作用域函数

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 作用域函数

Kotlin 提供了一系列的作用域函数，可以在函数形成的临时作用域中对象上下文执行代码块，这些作用域函数共有 5 个：let、with、run、apply、also，它们区别有 2 个：

  • 对象上下文在作用域名中的使用（this 还是 it）
  • 作用域函数的返回结果（上下文对象 还是 Lambda 表达式结果）

# let

let 经常用于非空值执行代码块，通过与安全操作符 ? 组合成 ?.let 进行安全的非空代码操作：

  • 对象上下文：it
  • 返回值：lambda 表达式结果
fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6)
+
+    list?.let { it ->
+        println(it[0]) // 1
+        it.forEach(::println) // 1 2 3 4 5 6
+    }
+
+    val ele1 = list.let { it[5] }.let { it * 2 }
+    println(ele1) // 12
+}
+

另外，还有一种经常使用 let 的场景，那就是懒得给变量命名，使用 it 代替。

# with

with 不是一个扩展函数，所以 不能使用 对象.with 的方式来执行！！！ +with 接收 2 个参数，参数 1 是 receiver，即上下文对象，在临时作用域中可以使用 this 代替使用：

  • 对象上下文：this
  • 返回值：lambda 表达式结果
fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6)
+    with(list) {
+        println(this[0]) // 1
+        // this.forEach(::println) // this可以省略
+        forEach(::println) // 1 2 3 4 5 6
+    }
+
+    val ele1 = with(list) { this[5] }
+    println(ele1) // 6
+}
+

with 可以这么理解记忆：对于这个对象，进行以下操作。

# run

run 其实就是 with 的扩展函数版本，除了调用方式有区别，其他的都与 with 一模一样：

  • 对象上下文：this
  • 返回值：lambda 表达式结果
fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6)
+    list.run {
+        println(this[0]) // 1
+        // this.forEach(::println) // this可以省略
+        forEach(::println) // 1 2 3 4 5 6
+    }
+
+    val ele1 = list.run { this[5] }
+    println(ele1) // 6
+}
+

不过，run 还有个非扩展函数版本，非扩展run 有点类似于一个纯粹代码块的作用，相比 扩展run 少了一个对象上下文：

fun main(args: Array<String>) {
+    val list = listOf(1, 2, 3, 4, 5, 6)
+    run {
+        // 没有上下文
+        list.forEach { println(it) } // 1 2 3 4 5 6
+    }
+    val ele1 = run { list[5] }
+    println(ele1) // 6
+}
+

# apply

apply 接收对象上下文，最终也返回对象上下文，常用于对对象进行配置：

  • 对象上下文：this
  • 返回值：上下文对象
fun main(args: Array<String>) {
+    val list = mutableListOf(1, 2, 3, 4, 5, 6)
+    list.apply {
+        this.add(0, 0)
+    }.apply {
+        add(0, -1)
+    }
+
+    list.forEach(::println) // -1 0 1 2 3 4 5 6
+}
+

apply 可以这么理解记忆：对于这个对象，进行以下配置。

# also

also 对于执行一些将上下文对象作为参数的操作很有用。对于需要引用对象而不是其属性与函数的操作，或者不想屏蔽来自外部作用域的 this 引用时，请使用 also。

  • 对象上下文：it
  • 返回值：上下文对象
fun main(args: Array<String>) {
+    val list = mutableListOf(1, 2, 3, 4, 5, 6)
+    list.also {
+        it.add(0, 0)
+    }.also {
+        it.add(0, -1)
+    }
+    list.forEach(::println) // -1 0 1 2 3 4 5 6
+}
+

# 总结

作用域函数的目的是一样的，只是彼此之间在使用上存在一些细微的区别：

  • 作用：生成一个临时作用域，并在该作用域名中对对象上下文进行操作。
  • 差别：对象上下文在临时作用域中的使用（this 或 it），以及作用域的返回值（对象上下文 或 Lambda 表达式结果）。

正是因为这些细微区别，才让人觉得有些混乱，引用 Kotlin 官方文档的汇总表格，可以帮助我们直观的理清这些区别：

函数 对象引用 返回值 是否是扩展函数
let it Lambda 表达式结果 是
run this Lambda 表达式结果 是
run - Lambda 表达式结果 不是：调用无需上下文对象
with this Lambda 表达式结果 不是：把上下文对象当做参数
apply this 上下文对象 是
also it 上下文对象 是

以下是根据预期目的选择作用域函数的简短指南：

  • 对一个非空（non-null）对象执行 lambda 表达式：let
  • 将表达式作为变量引入为局部作用域中：let
  • 对象配置：apply
  • 对象配置并且计算结果：run
  • 在需要表达式的地方运行语句：非扩展的 run
  • 附加效果：also
  • 一个对象的一组函数调用：with

文章部分引用自 Kotlin 官方文档：https://www.kotlincn.net/docs/reference/scope-functions.html (opens new window)

+ +
+
#let#run#with#apply#also
Kotlin - 常见高阶函数
Kotlin - 尾递归优化

+ ← + Kotlin - 尾递归优化→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/ee17d1/index.html b/pages/ee17d1/index.html new file mode 100644 index 000000000..6d585bc8f --- /dev/null +++ b/pages/ee17d1/index.html @@ -0,0 +1,193 @@ + + + + + + Kotlin - 函数与Lambda表达式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-17
目录

Kotlin - 函数与Lambda表达式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 函数

函数是以特定功能组织起来的代码块，函数定义格式如下：

fun sum(arg1: Int, arg2: Int): Int {
+    return arg1 + arg2
+}
+

如果函数方法体只有一行代码，那可以将 {} 改为 =，去掉 return，表达式的值将作为函数返回值：

fun sum(arg1: Int, arg2: Int) = arg1 + arg2
+

# 默认返回值类型

任何函数都是有返回值的，一般函数方法体中会使用 return 将结果进行返回，但有的函数就是不需要返回结果，此时可以将 return 省略：

fun main(args: Array<String>) {
+    ...
+}
+

即使函数方法体中没有 return 返回结果，但函数还是有返回值类型的，默认的返回值类型就是 Unit ，但一般 Unit 会省略不写：

fun main(args: Array<String>): Unit {
+    ...
+}
+

# 匿名函数

匿名函数就是没有名字的函数，但是需要赋值给一个变量，否则 IDE 会报错：

// 变量sum，它的值是一个函数
+val sum = fun(arg1: Int, arg2: Int): Int {
+    return arg1 + arg2
+}
+
+fun main(args: Array<String>): Unit {
+    val result = sum(1, 2)
+    println(result) // 3
+}
+

此时 sum 是一个变量，只是它的值是一个函数。

# Lambda 表达式

Lambda 表达式也是一种"匿名函数"，不过格式上会有些不同：

  • {[参数列表] -> [函数体, 最后一行是返回值]}
val sum = { arg1: Int, arg2: Int ->
+    println("$arg1 + $arg2 = ${arg1 + arg2}")
+    arg1 + arg2
+}
+
+fun main(){
+    println(sum(1, 2)) // 3
+}
+

Lambda 表达式的返回值是表达式中最后一行的结果。

# Lambda 的类型

Kotlin 中，不管是常量或是变量，都会有各自的类型，如：Human，那如果一个变量的值是 Lambda 表达式，那它的类型是什么呢？没错，就是 Lambda 类型：

  • () -> Unit : 无参，返回值为 null
  • (Int) -> Int : 传入整型，返回一个整型
  • (String, (String)->String) -> Boolean : 传入字符串、Lambda 表达式，返回 Boolean
// lambda的类型：(Int,Int) -> Int
+val sum = { arg1: Int, arg2: Int -> arg1 + arg2 }
+
+// lambda的类型：() -> Unit
+val printlnHello = {
+    println("Hello")
+}
+

# Lambda 表达式的调用

与匿名函数一样，值为 Lambda 表达式的变量可通过以下两种方式执行 Lambda 表达式：

  • 用 () 进行调用
  • 用 invoke() 调用
println(sum(1, 2)) // 3
+println(sum.invoke(1, 2)) // 3
+

实际上，() 就是 invoke()。

# Lambda 表达式的简化

  • 函数参数调用时最后一个 Lambda 可以移出去
  • 函数参数只有一个 Lambda，调用时小括号可省略
  • Lambda 只有一个参数可默认为 it
  • 入参、返回值与形参一致的函数可以用函数引用的方式作为实参传入

我们先来看一下 Array 数组的一个扩展函数 forEach：

/**
+ * Performs the given [action] on each element.
+ */
+public inline fun <T> Array<out T>.forEach(action: (T) -> Unit): Unit {
+    for (element in this) action(element)
+}
+

这个扩展函数为 Array 类扩展了一个 forEach 方法，需要传入一个参数 action，其类型是 (T) -> Unit 的 Lambda 类型，返回值为 Unit（即没有返回值），方法体中使用 for-in 对数组进行遍历，同时使用参数 action 处理遍历的元素。

关于扩展函数这里不展开细讲，后续文章会专门解读，这里只需要知道 forEach 的功能即可。

val args = arrayOf("1", "2", "3", "l", "q", "r")
+
+// 使用 for-in 遍历数组并打印元素内容
+for (arg in args) {
+    println(arg)
+}
+

这是一个普通的数组遍历打印功能，上面已经使用 for-in 实现了，下面就使用前面学到的扩展函数 forEach 来处理：

// Lambda完整写法
+args.forEach({ it -> println(it) })
+
+// Lambda简化写法
+args.forEach({ println(it) })
+
+// 重命名参数it，此时ele不可省略
+args.forEach({ ele -> println(ele) })
+

Lambda 只有一个参数时可默认为 it，当然了，如果你不想使用 it 也是可以改名的，但如果改名了，就不能将其省略。除了省略默认参数 it，还有如下方法简化 Lambda 表达式：

// 函数参数调用时最后一个 Lambda 可以移出去
+args.forEach(){ println(it) }
+
+// 函数参数只有一个 Lambda，调用时小括号可省略
+args.forEach{ println(it) }
+

以上就是 Kotlin 中 Lambda 表达式的简化流程，以后开发中会经常遇到最后的简化写法。

# Lambda 表达式与函数引用

再回头看看这个扩展函数 forEach 的参数 action 的类型：

// action: (T) -> Unit
+public inline fun <T> Array<out T>.forEach(action: (T) -> Unit): Unit {
+    for (element in this) action(element)
+}
+

再看看 println() 的定义：

// println: (Any?) -> Unit
+public actual inline fun println(message: Any?) {
+    System.out.println(message)
+}
+

不难发现 println() 的定义完全符合 action 的 Lambda 类型要求，于是此场景下还可以将 forEach 参数 action 需要的 Lambda 表达式转换成 println 函数的引用，引用函数需要使用 :: ：

// 入参、返回值与形参一致的函数可以用函数引用的方式作为实参传入
+args.forEach(::println)
+

# Lambda 表达式跳出 forEach

这里严重超纲，看不明白也无所谓，可以先跳过～

需求：遍历数组时，当发现元素是 q 时，中断循环。

val args = arrayOf("1", "2", "3", "l", "q", "r")
+for (arg in args) {
+    if (arg == "q") break
+    println(arg)
+}
+println("The End") // 1 2 3 l The End
+

使用 for-in 配置 break 即可实现该功能，下面试试使用 forEach：

fun main() {
+    val args = arrayOf("1", "2", "3", "l", "q", "r")
+    args.forEach {
+        if (it == "q") break // IDE报错：'break' and 'continue' are only allowed inside a loop
+        print("$it ")
+    }
+    println("The End")
+}
+

是的，Lambda 表达式仅仅是一个表达式而已，不是循环体，所以无法使用 break 和 continue，那这里为了中断遍历只能使用 return 了：

fun main() {
+    val args = arrayOf("1", "2", "3", "l", "q", "r")
+    args.forEach { // 1 2 3 l
+        if (it == "q") return
+        print("$it ")
+    }
+    println("The End") // 不会被执行
+}
+

乍一看，这里使用了 return 实现了中断遍历，但其实 "The End" 没有输出，说明 return 并非中断遍历，而是中断了当前的 main 函数，原因还是那个：Lambda 表达式仅仅只是表达式而已。

针对 Lambda 表达式，Kotlin 提供了标签式返回，可以在 Lambda 表达式中使用 return@xxx 方法跳出遍历，那使用这个来试试看：

fun main() {
+    val args = arrayOf("1", "2", "3", "l", "q", "r")
+    args.forEach {
+        if (it == "q") return@forEach
+        print("$it ")
+    }
+    println("The End") // 1 2 3 l r The End
+}
+

程序跳过 q 继续往下执行了，这又是什么情况？这还是要回到 Lambda 表达式的本质，forEach里的 Lambda 表达式其实就是一个函数体，因此标签式返回 return@xxx 对这个函数体的退出只能退出当前的调用罢了。那就没有办法使用 forEach 实现这个需求了吗？是的，单靠 forEach 不行，需要配置 StreamApi 对数组进行过滤后再遍历：

val args = arrayOf("1", "2", "3", "l", "q", "r")
+args.takeWhile { it != "q" }.forEach { print("$it ") }
+println("The End")　// 1 2 3 l The End
+
+ +
+
#Lambda
Kotlin - 常量与变量
Kotlin - 类成员

+ ← + Kotlin - 类成员→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f2b19d/index.html b/pages/f2b19d/index.html new file mode 100644 index 000000000..eab109a00 --- /dev/null +++ b/pages/f2b19d/index.html @@ -0,0 +1,332 @@ + + + + + + Android脚本 - 不一样的Gradle多渠道配置总结2 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-05-25
目录

Android脚本 - 不一样的Gradle多渠道配置总结2

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

文章中可能涉及的到一些 groovy 语法点，可在如下文章中找到&学习：

# 一、问题

Android Gradle plugin 给 Android apk 打包扩展了更多的可能性，其中多渠道打包是日常开发中最为常用的配置，通过前篇文章《不一样的 Gradle 多渠道配置总结》 (opens new window)可以了解到， Android Gradle plugin 能够让资源合并、代码整合、甚至指定各种源文件目录等等，但你是否意识到，这些功能基本上都是对原本的配置进行了扩充，而不是覆盖？而今天我就遇到了需要覆盖的情况，先来看看以下配置：

android {
+    defaultConfig {
+        ndk {
+            abiFilters = ['armeabi-v7a']
+        }
+    }
+
+    productFlavors {
+        xiaomi {
+            buildConfigField "String", "CHANNEL", '"xiaomi"'
+        }
+        oppo {
+            buildConfigField "String", "CHANNEL", '"oppo"'
+        }
+        mumu {
+            buildConfigField "String", "CHANNEL", '"mumu"'
+        }
+        yeshen {
+            ndk {
+                abiFilters = ['x86']
+            }
+            buildConfigField "String", "CHANNEL", '"yeshen"'
+        }
+        googleplay {
+            ndk {
+                abiFilters = ['armeabi', 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64']
+            }
+            buildConfigField "String", "CHANNEL", '"googleplay"'
+        }
+    }
+}
+
+dependencies {
+    implementation 'tv.danmaku.ijk.media:ijkplayer-armv5:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-armv7a:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-arm64:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-x86:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-x86_64:0.8.8'
+}
+

我这个配置的意图很明显，默认所有渠道的 apk 只保留 armeabi-v7a 的 so 库，而 yeshen 渠道则是只保留 x86 的 so 库，那么，以现在 yeshen 的渠道配置，打包出来的 apk 最终是否只会保留 x86 的 so 库呢？

提示：PC 上的 Android 模拟器大多数是 x86 的，为了让这类包含 so 库的 app 能正常运行，同时做到 apk 体积最小，所以需要只保留 x86 的 so 库。

当然不会，不然也不会有这篇文章了，来看 apk 解包后的截图：

显然，这达不到我想要的预期效果，那么如何解决这个问题呢？要解决问题，得先知道问题出现的原因是什么，下面就进入探索环节。

提示：如果你赶时间，想直接知道结果，那么请拉到文末查看最终解决方案。

# 二、探索

通过 apk 解包结果以及 gradle 配置这两者的综合考虑，显然是 defaultConfig 与 productFlavors 中配置的 ndk abiFilters 被合并了，为什么会合并呢？又是怎么合并的？有如下两种可能性：

  • defaultConfig 与 productFlavors 修改了同一个 ndk abiFilters 配置。
  • defaultConfig 与 productFlavors 有各自单独的 ndk abiFilters 配置，但最终被 Android Gradle plugin 通过某种手段整合了。

# 1、ndk abiFilters 源码分析

按住ctrl 点击 abiFilters，会自动跳转到 Android Gradle plugin 的 NdkOptions 的源码中：

public class NdkOptions implements CoreNdkOptions, Serializable {
+    private Set<String> abiFilters;
+    ...
+    @NonNull
+    public NdkOptions setAbiFilters(Collection<String> filters) {
+        if (filters != null) {
+            if (abiFilters == null) {
+                abiFilters = Sets.newHashSetWithExpectedSize(filters.size());
+            } else {
+                abiFilters.clear();
+            }
+            abiFilters.addAll(filters);
+        } else {
+            abiFilters = null;
+        }
+        return this;
+    }
+}
+

也就是说 build.gradle 中 abiFilters = ['x86'] 其实调用了 NdkOptions#setAbiFilters(Collection<String> filters) 方法， 即 abiFilters = ['x86'] 等同于 setAbiFilters(['x86'])；通过阅读其源码可以知道，该方法会先将 abiFilters 集合清空再添加新的 filters 集合，那么这就可以排除掉 defaultConfig 与 productFlavors 修改同一个 ndk abiFilters 配置的可能性。

提示：事实上，defaultConfig 与 productFlavors 对应的也不是同个 NdkOptions 对象。

# 2、关联 Android Gradle plugin 源码

在继续往下探索前，我们需要先关联 Android Gradle plugin 源码，只需要在 app 下 build.gradle 中添加如下依赖即可：

提示：为什么要关联 Android Gradle plugin 源码？因为虽然你现在可以通过 按住ctrl + 点击 的方式索引到对应的源码，但你是没办法查看变量或方法在哪些地方被调用了的，这不利于代码追踪(Find Usages)，阅读源码的效率就会很低下。

dependencies {
+    // 版本号跟项目根目录build.gralde中 classpath "com.android.tools.build:gradle:3.2.0" 的版本号一致即可
+    api 'com.android.tools.build:gradle:3.2.0'
+}
+

这是一种很讨巧的关联源码方式，相当于把 Android Gradle plugin 当作是一个第三方库依赖进来，这样就可以像工程源码那样，进行各种源码跳转追踪了，很实用。

注意：api 'com.android.tools.build:gradle:3.2.0' 仅仅只是用于查看 Android Gradle plugin 源码使用，真正在进行 apk 打包的时候需要注释掉这行依赖。

# 3、Set<String> abiFilters 追踪

前面已经排除了一种合并的可能，现在要验证是否会是第二种。目前我们知道了 ndk abiFilters 配置肯定和 NdkOptions 源码有关，通过 Find Usages 快捷键查看 NdkOptions#setAbiFilters() 方法所有调用处，显然这个方法不是关键：

提示：AS 通过 Find Usages 快捷键，可以列举出变量或方法的所有调用处，如果你的 Keymap 是 Eclipse，那么对应的快捷键是 Ctrl+G，其他 Keymap 需要自己确认。

再通过 按住ctrl + 鼠标左键 查看 Set<String> abiFilters 变量的调用处，发现了线索：

根据名字，自然可以想到这个 MergedNdkConfig 应该就是 ndk abiFilters 配置合并的关键了：

public class MergedNdkConfig implements CoreNdkOptions {
+
+    private Set<String> abiFilters;
+
+    @Override
+    @Nullable
+    public Set<String> getAbiFilters() {
+        return abiFilters;
+    }
+
+    public void append(@NonNull CoreNdkOptions ndkConfig) {
+        // override
+        if (ndkConfig.getModuleName() != null) {
+            moduleName = ndkConfig.getModuleName();
+        }
+
+        if (ndkConfig.getStl() != null) {
+            stl = ndkConfig.getStl();
+        }
+
+        if (ndkConfig.getJobs() != null) {
+            jobs = ndkConfig.getJobs();
+        }
+
+        // append
+        if (ndkConfig.getAbiFilters() != null) {
+            if (abiFilters == null) {
+                abiFilters = Sets.newHashSetWithExpectedSize(ndkConfig.getAbiFilters().size());
+            }
+            abiFilters.addAll(ndkConfig.getAbiFilters());
+        }
+
+        if (cFlags == null) {
+            cFlags = ndkConfig.getcFlags();
+        } else if (ndkConfig.getcFlags() != null && !ndkConfig.getcFlags().isEmpty()) {
+            cFlags = cFlags + " " + ndkConfig.getcFlags();
+        }
+
+        if (ndkConfig.getLdLibs() != null) {
+            if (ldLibs == null) {
+                ldLibs = Lists.newArrayListWithCapacity(ndkConfig.getLdLibs().size());
+            }
+            ldLibs.addAll(ndkConfig.getLdLibs());
+        }
+    }
+}
+

在 MergedNdkConfig#append() 方法中使用到了 NdkOptions#abiFilters 变量，再以同样的方法，可以定位到 MergedNdkConfig#append() 方法的调用处就在 GradleVariantConfiguration#mergeOptions() 方法中：

public class GradleVariantConfiguration
+        extends VariantConfiguration<CoreBuildType, CoreProductFlavor, CoreProductFlavor> {
+    ...
+    /**
+     * Merge Gradle specific options from build types, product flavors and default config.
+     */
+    private void mergeOptions() {
+        ...
+        computeMergedOptions(
+                mergedNdkConfig,
+                CoreProductFlavor::getNdkConfig,
+                CoreBuildType::getNdkConfig,
+                MergedNdkConfig::reset,
+                MergedNdkConfig::append);
+        ...
+    }
+
+    private <CoreOptionT, MergedOptionT> void computeMergedOptions(
+            @NonNull MergedOptionT option,
+            @NonNull Function<CoreProductFlavor, CoreOptionT> productFlavorOptionGetter,
+            @NonNull Function<CoreBuildType, CoreOptionT> buildTypeOptionGetter,
+            @NonNull Consumer<MergedOptionT> reset,
+            @NonNull BiConsumer<MergedOptionT, CoreOptionT> append) {
+        reset.accept(option);
+
+        CoreOptionT defaultOption = productFlavorOptionGetter.apply(getDefaultConfig());
+        if (defaultOption != null) {
+            append.accept(option, defaultOption);
+        }
+
+        // reverse loop for proper order
+        final List<CoreProductFlavor> flavors = getProductFlavors();
+        for (int i = flavors.size() - 1 ; i >= 0 ; i--) {
+            CoreOptionT flavorOption = productFlavorOptionGetter.apply(flavors.get(i));
+            if (flavorOption != null) {
+                append.accept(option, flavorOption);
+            }
+        }
+
+        CoreOptionT buildTypeOption = buildTypeOptionGetter.apply(getBuildType());
+        if (buildTypeOption != null) {
+            append.accept(option, buildTypeOption);
+        }
+    }
+}
+

结合 GradleVariantConfiguration#computeMergedOptions() 方法，大概也能知道，其实 GradleVariantConfiguration#mergeOptions() 就是把 defaultConfig 与 productFlavors 各自的 ndk abiFilters 配置结果给整合了。

# 三、方案

到此为止，我们确定了 ndk abiFilters 的合并原理，可以理解为在 build.gradle 中， defaultConfig 与 productFlavors 根本就是两个不想干的配置，两者是没有办法通过某种手段直接干涉 ndk abiFilters 合并结果的。

补充：当然了，你也可以尝试继续追踪 GradleVariantConfiguration#mergeOptions() 的调用时机，看看是否能通过某个 task 来干涉 ndk abiFilters 的合并结果。反正，我目前没未找到突破点。

那么，现在唯一的解决办法就是，defaultConfig 与 productFlavors 中只配一处，可是又要满足 默认只保留 'armeabi' 的前提条件，怎么办？可以使用 groovy函数 + 闭包 来解决这个问题，让你见识一下什么是真正的骚操作。

# 1、闭包抽离

作为第三代配置脚本的 gradle 与第二代的 maven 在格式上有很大的不同，gradle 采用的是 dsl 格式，在某个配置项右边会携带一个 {}，其实这一个 {} 表示的就是 groovy 语言中的一个闭包(clouser)，每个配置顶可以理解为是一个接收闭包的方法，我们可以来验证一下，比如：

// 转换前
+defaultConfig {
+    applicationId "com.charylin.gradleconfigmergedemo"
+    ...
+}
+// 转换后
+defaultConfig({
+    applicationId "com.charylin.gradleconfigmergedemo"
+    ...
+})
+

这两者有差吗？没有，同样能编译通过，并且能被正常识别。那么现在回过头了看看这个多渠道配置：

yeshen {
+    ndk {
+        abiFilters = ['x86']
+    }
+}
+

是不是有什么大胆的想法？没错，我们完全可以把这个闭包抽出来，改成一个返回值是闭包的函数，再结合函数可选参数指定默认值即可：

android {
+    defaultConfig {
+        // ndk {
+        //     abiFilters = ['armeabi-v7a']
+        // }
+    }
+
+    productFlavors {
+        ...
+        xiaomi profileLqr()
+        oppo profileLqr()
+        mumu profileLqr()
+        yeshen profileLqr(['x86'])
+        googleplay profileLqr(['armeabi', 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'])
+    }
+}
+
+def profileLqr(abiList = null) {
+    return {
+        ndk {
+            abiFilters = abiList == null ? ['armeabi-v7a'] : abiList
+        }
+    }
+}
+

注意：defaultConfig 中的 ndk abiFilters 需要注释掉或删除。

# 2、闭包组合

上面运用 函数 + 闭包 这种方式很巧妙实现了 "默认配置覆盖"，实现了 默认只保留 'armeabi' 这个要求，并且后期可以动态替换。但感觉似乎扩展性不强，因为原生的多渠道配置是可以很灵活的，你可以很随意的在不同的渠道中修改各种配置，例如：buildConfigField、applicationId 以及其他未知的配置项。然而，我们现在面向的不是闭包，而是一个函数，难道我每遇到一个未知的配置项，就要修改一次 profileLqr() 函数吗？这显然不可取，好在 groovy 的闭包很是强大，支持闭包组合！闭包组合有 2 个常用 api：

  • Closure#rightShift：向前组合
  • Closure#leftShift：反向组合

详细使用可查看官方的 API 文档：http://docs.groovy-lang.org/docs/groovy-2.4.0/html/api/groovy/lang/Closure.html#rightShift(groovy.lang.Closure) (opens new window)

使用闭包组合 api，渠道配置可以改写成这样：

yeshen profileLqr(['x86']).rightShift {
+    buildConfigField "String", "CHANNEL", '"yeshen"'
+}
+

然而，rightShift 还可以进一步简写成 >>，于是，渠道配置还能改写成这样：

yeshen profileLqr(['x86']) >> {
+    buildConfigField "String", "CHANNEL", '"yeshen"'
+}
+

就问你这操作骚不骚~ 当然了，这里对于 函数 + 闭包 在多渠道配置中的运用仅仅只是抛砖引玉，运动脑子，可以创建更多的可能性。

# 3、最终脚本配置

最后，把最终的 gradle 配置贴一下，完结，撒花：

android {
+    defaultConfig {
+        ...
+        // ndk {
+        //     abiFilters = ['armeabi-v7a']
+        // }
+    }
+
+    productFlavors {
+        xiaomi profileLqr() >> {
+            buildConfigField "String", "CHANNEL", '"xiaomi"'
+        }
+        oppo profileLqr() >> {
+            buildConfigField "String", "CHANNEL", '"oppo"'
+        }
+        mumu profileLqr() >> {
+            buildConfigField "String", "CHANNEL", '"mumu"'
+        }
+        yeshen profileLqr(['x86']) >> {
+            buildConfigField "String", "CHANNEL", '"yeshen"'
+        }
+        googleplay profileLqr(['armeabi', 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64']) >> {
+            buildConfigField "String", "CHANNEL", '"googleplay"'
+        }
+    }
+}
+
+dependencies {
+    // 依赖源码
+    // api 'com.android.tools.build:gradle:3.2.0'
+    implementation 'com.android.support:appcompat-v7:28.0.0'
+    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-armv5:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-armv7a:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-arm64:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-x86:0.8.8'
+    implementation 'tv.danmaku.ijk.media:ijkplayer-x86_64:0.8.8'
+}
+
+def profileLqr(abiList = null) {
+    return {
+        ndk {
+            abiFilters = abiList == null ? ['armeabi-v7a'] : abiList
+        }
+    }
+}
+
+ +
+
#脚本#Gradle#多渠道#productFlavors
Android脚本 - 不一样的Gradle多渠道配置总结
AndroidTV - 获取Mac地址

+ ← + AndroidTV - 获取Mac地址→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f2ddfa/index.html b/pages/f2ddfa/index.html new file mode 100644 index 000000000..179c7b4ed --- /dev/null +++ b/pages/f2ddfa/index.html @@ -0,0 +1,147 @@ + + + + + + Mac上pyenv的安装与使用 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-01-24
目录

Mac上pyenv的安装与使用

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

目的：简单一句话，实现 python 环境隔离

# 一、pyenv

# 1、安装

# 方式一：Git Clone

git clone git://github.com/pyenv/pyenv.git ~/.pyenv
+

bash

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
+echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
+echo 'export PATH="$PYENV_ROOT/shims:$PATH"' >> ~/.bashrc
+echo 'eval "$(pyenv init -)"' >> ~/.bashrc
+exec $SHELL -l
+

zsh

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
+echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
+echo 'export PATH="$PYENV_ROOT/shims:$PATH"' >> ~/.zshrc
+echo 'eval "$(pyenv init -)"' >> ~/.zshrc
+exec $SHELL -l
+

# 方式二：Homebrew

安装

brew install pyenv
+

根据自身环境，将下方内容加到对应文件中： .bashrc / .zshrc

export PYENV_ROOT=/usr/local/var/pyenv
+export PATH="$PYENV_ROOT/bin:$PATH"
+export PATH="$PYENV_ROOT/shims:$PATH"
+if which pyenv > /dev/null; then eval "$(pyenv init -)"; fi
+

# 2、验证

验证安装是否成功：

pyenv
+

# 3、使用

基本使用

命令 描述
pyenv --version 查看 pyenv 的版本
pyenv versions 罗列当前已安装的所有 python 环境，如果是当前正在使用的环境，则前面会有个 *
pyenv help 查看帮助
pyenv init 如果输入 pyenv 之后使用 tab 不补全，可以使用该命令进行初始即可使用补全命令

安装环境

命令 描述
pyenv install -l 显示可以安装的版本列表
pyenv install 版本号 安装指定版本的 python
pyenv rehash 更新本地数据库，安装指定版本的 python 后使用

环境应用

命令 描述
pyenv global 版本号 更改本机版本，重启不会造成再次更改
pyenv local 版本号 会在当前目录创建 .python-version 文件，并记录设置的 python 环境，每次进入该目录会自动设置成该 python 环境
pyenv shell 版本号 更改当前 shell 下使用的 python 版本，临时生效，优先级高于 global

# 二、virtualenv插件

# 1、安装

# 方式一：Git Clone

cd .pyenv/plugins
+git clone https://github.com/pyenv/pyenv-virtualenv.git # 安装virtualenv插件
+

# 方式二：Homebrew

brew install pyenv-virtualenv
+

# 2、配置

无论使用上述的哪种方式进行的安装，请根据自身环境，将下方内容加到对应文件中： .bashrc / .zshrc

eval "$(pyenv virtualenv-init -)"
+

# 3、使用

# 基本使用

命令 描述
pyenv virtualenv 3.8.3 env383 创建 3.8.3 版本虚拟环境
pyenv virtualenvs 显示环境
pyenv activate env383 激活使用指定的虚拟环境
pyenv deactivate 退出当前虚拟环境
rm -rf .pyenv/versions/3.8.3 删除版本环境
rm -rf .pyenv/versions/env383 删除虚拟环境

# 自动激活和退出虚拟环境

在需要使用虚拟环境的目录（通常是项目目录）中：

  1. 建立一个 .python-version 的文本文件
  2. 将虚拟环境名称（如 env383 ）写在里面

之后每次进／出该目录时，虚拟环境都将自动激活／退出。

# 三、报错

# 1、激活指定的虚拟环境时报错

# 命令
+pyenv activate env383
+
+# 报错信息
+Failed to activate virtualenv.
+
+Perhaps pyenv-virtualenv has not been loaded into your shell properly.
+Please restart current shell and try again.
+

别慌，重启你的终端，或者执行如下命令即可

exec $SHELL -l
+

# 2、还是系统版本

如果你用 pyenv versions 查看，明明已经切换成功，但是用 python -V却还是系统版本。

原因是 pyenv没有加到 $PATH环境变量里去，解决办法如下：

export PYENV_ROOT=~/.pyenv
+export PATH=$PYENV_ROOT/shims:$PATH
+

# 3、安装 python报错

安装 python报错，如

pyenv install 3.8.3
+

报错内容：

python-build: use openssl@1.1 from homebrew
+python-build: use readline from homebrew
+Downloading Python-3.8.3.tar.xz...
+-> https://www.python.org/ftp/python/3.8.3/Python-3.8.3.tar.xz
+Installing Python-3.8.3...
+python-build: use readline from homebrew
+python-build: use zlib from xcode sdk
+
+BUILD FAILED (OS X 12.0.1 using python-build 20180424)
+
+Inspect or clean up the working tree at /var/folders/cy/8zkx5hys2tsgb1d_x42_r8qc0000gn/T/python-build.20220122174148.1531
+Results logged to /var/folders/cy/8zkx5hys2tsgb1d_x42_r8qc0000gn/T/python-build.20220122174148.1531.log
+
+Last 10 log lines:
+clang -Wno-unused-result -Wsign-compare -Wunreachable-code -DNDEBUG -g -fwrapv -O3 -Wall -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -std=c99 -Wextra -Wno-unused-result -Wno-unused-parameter -Wno-missing-field-initializers -Wstrict-prototypes -Werror=implicit-function-declaration  -I./Include/internal  -I. -I./Include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include  -DPy_BUILD_CORE_BUILTIN  -c ./Modules/_codecsmodule.c -o Modules/_codecsmodule.o
+clang -Wno-unused-result -Wsign-compare -Wunreachable-code -DNDEBUG -g -fwrapv -O3 -Wall -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -std=c99 -Wextra -Wno-unused-result -Wno-unused-parameter -Wno-missing-field-initializers -Wstrict-prototypes -Werror=implicit-function-declaration  -I./Include/internal  -I. -I./Include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include  -DPy_BUILD_CORE_BUILTIN  -c ./Modules/_weakref.c -o Modules/_weakref.o
+./Modules/posixmodule.c:9221:15: error: implicit declaration of function 'sendfile' is invalid in C99 [-Werror,-Wimplicit-function-declaration]
+        ret = sendfile(in, out, offset, &sbytes, &sf, flags);
+              ^
+clang -Wno-unused-result -Wsign-compare -Wunreachable-code -DNDEBUG -g -fwrapv -O3 -Wall -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -I/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include   -std=c99 -Wextra -Wno-unused-result -Wno-unused-parameter -Wno-missing-field-initializers -Wstrict-prototypes -Werror=implicit-function-declaration  -I./Include/internal  -I. -I./Include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include -I/usr/local/opt/readline/include -I/usr/local/opt/readline/include -I/usr/local/var/pyenv/versions/3.8.3/include -I/usr/local/opt/sqlite/include  -DPy_BUILD_CORE_BUILTIN  -DPy_BUILD_CORE_BUILTIN -I./Include/internal -c ./Modules/_functoolsmodule.c -o Modules/_functoolsmodule.o
+1 error generated.
+make: *** [Modules/posixmodule.o] Error 1
+make: *** Waiting for unfinished jobs....
+1 warning generated.
+

使用下面的命令安装即可，注意修改成相应的版本号

CFLAGS="-I$(brew --prefix openssl)/include -I$(brew --prefix bzip2)/include -I$(brew --prefix readline)/include -I$(xcrun --show-sdk-path)/usr/include" LDFLAGS="-L$(brew --prefix openssl)/lib -L$(brew --prefix readline)/lib -L$(brew --prefix zlib)/lib -L$(brew --prefix bzip2)/lib" pyenv install --patch 3.8.3 < <(curl -sSL https://github.com/python/cpython/commit/8ea6353.patch?full_index=1)
+

# 四、注意

  • 安装好的版本不做任何修改，我们只操作虚拟环境，如 env383
  • 可以通过版本来多个虚拟环境，如 env383_1、env383_2
  • 导出当前环境的依赖库: pip freeze > requirements.txt
  • 导入依赖库到当前环境: pip install -r requirements.txt
+ +
+
#python
Python-虚拟环境
Python - 爬虫基础与requests模块

+ ← + Python - 爬虫基础与requests模块→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f63a8b/index.html b/pages/f63a8b/index.html new file mode 100644 index 000000000..5d8cf1e84 --- /dev/null +++ b/pages/f63a8b/index.html @@ -0,0 +1,159 @@ + + + + + + RePlugin集成AndroidAutoSize | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-03-31
目录

RePlugin集成AndroidAutoSize

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、屏幕适配

你可能会问 "都 2021 年了还折腾屏幕适配？直接用 dp 单位适配不好吗？", 确实，如果公司的 UI 设计师、产品经理以及老板，能明白为什么一套 UI 在不同设备上显现出来的一些差异并不是 bug 时，开发者直接用 dp 单位配合一些布局技巧来进行适配是可以的，但是，实现多数情况下并不是如此美好，他们更希望看到的是 UI 在不同屏幕上，仅仅只是缩放的区别，为了满足这种要求，应用第三方屏幕适配方案就非常有必要了。根据在网上查到的比较好的原生屏幕适配方案有两种：

  • smallestWidth 限定符适配方案
  • 今日头条屏幕适配方案

两者的原理，以及优缺点这里不废话，有兴趣的可通过下方链接了解：

考虑到 apk 体积包大小问题，最终还是选择了 AndroidAutoSize，同时项目中有使用到插件化框架 RePlugin，需要在插件中集成 AndroidAutoSize，然而网上又几乎没有相关的集成踩坑资料，于是便有了本篇文章~

# 二、问题与解决方案

AndroidAutoSize 的使用说明及已知问题汇总请访问以下链接查看：

按作者的集成步骤，在 app 作为单品运行时是没有任何问题的，但是，如果你项目中使用了 RePlugin，一旦 app 作为插件运行中，你就会发现，一点用都没有！！！

注意：本文基于关闭常驻进程的前提完成的论证及测试，即：persistentEnable = false。

# 1、框架初始化

不可否认，AndroidAutoSize 的框架设计很优秀，利用 ContentProvider 实现框架自动初始化工作，然而，这种"黑科技"在个别情况下不好使，比如有些魔改 ROM，还有就是作为 RePlugin 插件的时候，所以，AndroidAutoSize 没起作用的一方面原因是框架未能正常初始化，插件 AndroidManifest.xml 中声明的 ContentProvider 并不会自动被执行创建，也就是 InitProvider 没被执行到，好在该库提供了手动初始化的方式：

class MyApplication : Application() {
+
+    override fun onCreate() {
+        super.onCreate()
+        // 手动直接执行 AutoSizeConfig#init()
+        AutoSize.checkAndInit(this)
+
+        // 通过启动InitProvider，再由InitProvider执行 AutoSizeConfig#init()
+        // AutoSize.initCompatMultiProcess(this)
+    }
+}
+

AutoSize.checkAndInit(this) 亲测有效，AutoSize.initCompatMultiProcess(this) 没有测试过，理论上也是可以的，但大可不必。

通过上面的代码就可以解决 AndroidAutoSize 的初始化问题。另外，如果你担心 app 作为单品时，AutoSizeConfig#init() 会被 AutoSize.checkAndInit(this) 和 InitProvider 执行多次的话，你可以选择把 InitProvider 移除掉：

<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+    <application
+        ...
+        android:name=".MyApplication">
+
+        <provider
+            tools:node="remove"
+            android:name="me.jessyan.autosize.InitProvider"
+            android:exported="false"
+            android:multiprocess="true"
+            android:authorities="${your application id}.autosize-init-provider" />
+    </application>
+
+</manifest>
+

关键点是 tools:node="remove"，可以把 aar 中的 AndroidManifest.xml 声明好的组件移除。此处的 ${your application id} 需要根据你当前 app 的 appid 来修改，不知道怎么改的话，可以先正常打个包，再反编译看看 AndroidManifest.xml 中原来的 InitProvider 声明是怎样的就明白了。

其实并不需要担心 AutoSizeConfig#init() 会被执行多次的问题，框架肯定有做好防护措施的，但如果你很严谨，不想有意外情况发生的话，强烈建议把 InitProvider 移除，这样的话，不管是单品还是插件，初始化逻辑都将是一样的。

# 2、启动屏幕适配功能

解决完框架初始化的问题，现在 AndroidAutoSize 还是无法起作用的。通过 AndroidAutoSize 源码可以得知，框架会给 Application 注册一个 ActivityLifecycleCallbacks，用于执行各个 Activity 初始化时的适配工作，然后，当 app 作为插件时这个 ActivityLifecycleCallbacks 是不会回调的-_-

怎么用宿主的 Application 注册 ActivityLifecycleCallbacks 呢？Easy，在初始化 AndroidAutoSize 的时候用宿主的 Application 即可：

// if (RePlugin.getHostContext() != null) { // 插件
+//     AutoSize.checkAndInit(RePlugin.getHostContext().applicationContext as Application)
+// } else { // 单品
+//     AutoSize.checkAndInit(this)
+// }
+
+// 简洁写法：
+AutoSize.checkAndInit(RePlugin.getHostContext()?.applicationContext as? Application ?: this)
+

好了，到这里 AndroidAutoSize 就起作用了。

这个 ActivityLifecycleCallbacks (也就是 ActivityLifecycleCallbacksImpl) 相当重要，它生效了， CancelAdapt 和 CustomAdapt 才能正常使用。

# 3、指定设计图尺寸

现在框架初始化，以及屏幕适配功能都已经没有问题了，接下来就是配置工作，默认情况下，AndroidAutoSize 会读取开发者在 AndroidManifest.xml 中预先填写好的 meta 设计图尺寸，用于计算 DisplayMetrics#density，然而当 app 作为插件时，你会发现这个配置也是无效的。

  • 原因：框架中通过 context 拿到的是宿主的 AndroidManifest.xml 信息，因为上面 AutoSize#checkAndInit() 传入的是宿主的 Application +
  • 解决方案：由于 AutoSizeConfig#getMetaData(final Context context) 是私有方法，所以，你有 2 种选择： +
    • 反射调用 AutoSizeConfig#getMetaData() 并传入插件的 Application
    • 改为代码配置的方式，给 AutoSizeConfig 直接指定设计图尺寸

别跟我说什么在宿主的 AndroidManifest.xml 中配置设计图尺寸，太 low 了-_-

怎么简单怎么来，这里就通过代码方式给 AutoSizeConfig 直接指定设计图尺寸：

AutoSize.checkAndInit(RePlugin.getHostContext()?.applicationContext as? Application ?: this)
+
+// 注意：一定要在框架初始化之后再进行配置，否则框架内部拿不到正确的设计图尺寸（会被 AutoSizeConfig#init() 重置）
+AutoSizeConfig.getInstance()
+    // 手动指定设计图尺寸，不读取清单文件
+    .setDesignWidthInDp(1280)
+    .setDesignHeightInDp(720)
+    // 设置使用冷门尺寸单位作为副单位
+    .unitsManager
+    .setSupportDP(false)
+    .setSupportSP(false)
+    .setSupportSubunits(Subunits.MM)
+

至此，AndroidAutoSize 无论是单品还是插件都能正常运作了，Nice~

# 三、其他

这里就已经和 RePlugin 的坑没有关系了，只是记录一些 AndroidAutoSize 的使用问题。

# 1、重写 Activity#getResources() 导致 CancelAdapt 和 CustomAdapt 失效

原因是在 getResources()方法中没有判断当前 Activity 是否有实现 CancelAdapt 和 CustomAdapt，一股脑全部适配导致的，只需要做个判断就好了：

abstract class BaseActivity : AppCompatActivity() {
+
+    ...
+
+    override fun getResources(): Resources {
+        when (this) {
+            is CancelAdapt -> {
+                AutoSizeCompat.cancelAdapt(super.getResources())
+            }
+            is CustomAdapt -> {
+                AutoSizeCompat.autoConvertDensityOfCustomAdapt(super.getResources(), this)
+            }
+            else -> {
+                //需要升级到 v1.1.2 及以上版本才能使用 AutoSizeCompat
+                AutoSizeCompat.autoConvertDensityOfGlobal((super.getResources())) //如果没有自定义需求用这个方法
+                // AutoSizeCompat.autoConvertDensity((super.getResources()), 667f, false)//如果有自定义需求就用这个方法
+            }
+        }
+        return super.getResources()
+    }
+}
+
+ +
+
#插件化#RePlugin#AndroidAutoSize#今日头条屏幕适配方案
RePlugin强制退出App
RePlugin集成ARouter

+ ← + RePlugin集成ARouter→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f66719/index.html b/pages/f66719/index.html new file mode 100644 index 000000000..d1023a0ba --- /dev/null +++ b/pages/f66719/index.html @@ -0,0 +1,221 @@ + + + + + + Flutter - 危！3.24版本苹果审核被拒！ | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-11-13
目录

Flutter - 危！3.24版本苹果审核被拒！

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

最近准备使用 Flutter 的 3.24 版本打包上架 APP，结果前天看到有人提了一个 issue: https://github.com/flutter/flutter/issues/158423 (opens new window) ，说分别使用 3.24.3 和 3.24.4 提交苹果审核时，都惨遭被拒~

苹果反馈的信息如下：

Guideline 2.5.1 - Performance - Software Requirements
+
+The app uses or references the following non-public or deprecated APIs:
+
+Frameworks/Flutter.framework/Flutter
+
+Symbols:
+
+• _kCTFontPaletteAttribute
+• _kCTFontPaletteColorsAttribute
+
+The use of non-public or deprecated APIs is not permitted, as they can lead to a poor user experience should these APIs change and are otherwise not supported on Apple platforms.
+

可以看到，是说 Flutter 使用了未公开的 API，并且他使用 strings 命令也验证了这一点。

3.24.x

strings Runner.app/Frameworks/Flutter.framework/Flutter | grep kCT
+SkCTMShader
+kCTFontVariationAxisHiddenKey
+kCTFontPaletteAttribute
+kCTFontPaletteColorsAttribute
+

3.22.3

strings Runner.app/Frameworks/Flutter.framework/Flutter | grep kCT
+SkCTMShader
+kCTFontVariationAxisHiddenKey
+

我先在 Flutter 引擎源码中搜索，结果压根就搜索不到，随后打开了前几日编译好的引擎调试项目，结果一搜一个准，在 third_party 依赖下的 Skia 代码中，很快就定位到了引入未公开 API 的相关提交记录 https://skia-review.googlesource.com/c/skia/+/867836 (opens new window) 。

我一看完就啪的一声敲起来了，很快啊！上来就是一个 Revert https://skia-review.googlesource.com/c/skia/+/918416 (opens new window) 。

目前此次受影响的 Flutter 版本范围暂时是 3.24.0 ~ 3.24.4，得等待新版本的发布才可以解决。建议还没用上 3.24 的小伙伴先不要升级，那如果已经是 3.24 或者是一定要用 3.24.4 及以下版本的小伙伴要怎么办呢？那就跟我一起来自编译引擎吧~

# 二、编译引擎

# 环境

注意：全程需要科学上网环境，请自行查找和配置

首先拉取最新的 depot_tools，放到一个合适的位置，比如我放在 ~/development 目录下

cd ~/development
+git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
+

将 depot_tools 添加至环境变量，在你的终端配置文件里补充如下内容

终端配置文件因人而异，如：~/.bash_profile、~/.zshrc、~/.zprofile，请自行判断

export PATH = "$HOME/development/depot_tools":$PATH
+

然后 source ~/.zshrc（这里请根据自身情况修改终端配置文件路径）

# 拉源码

找个合适的目录，创建 engine 目录并进入

mkdir engine
+cd engine
+

开始拉取源码

fetch flutter
+

它会在当前目录下创建 .gclient 文件，写好配置，并执行 gclient sync

solutions = [
+  {
+    "custom_deps": {},
+    "deps_file": "DEPS",
+    "managed": False,
+    "name": "src/flutter",
+    "safesync_url": "",
+    "url": "https://github.com/flutter/engine.git",
+  },
+]
+

如果在拉取代码的过程中遇到如下问题

remote: Enumerating objects: 835563, done.
+remote: Counting objects: 100% (1612/1612), done.
+remote: Compressing objects: 100% (1011/1011), done.
+error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)
+error: 1481 bytes of body are still expected
+fetch-pack: unexpected disconnect while reading sideband packet
+fatal: early EOF
+fatal: fetch-pack: invalid index-pack output
+
+src/flutter (ERROR)
+----------------------------------------
+[0:00:00] Started.
+

别慌，执行下方命令让其接着拉，直至完成

gclient sync
+

拉取完成后，去查看我们使用的 Flutter 版本对应的引擎版本，这里以 3.24.4 为例，打开链接：https://github.com/flutter/flutter/blob/3.24.4/bin/internal/engine.version ，拿到 db49896cf25ceabc44096d5f088d86414e05a7aa

执行如下命令进行切换

cd src/flutter
+git checkout db49896cf25ceabc44096d5f088d86414e05a7aa
+

执行完成会输出如下内容

Previous HEAD position was b0a4ca92c4 Add FlPointerManager to process pointer events from GTK in a form suitable for Flutter. (#56443)
+HEAD is now at db49896cf2 [CP-stable]Add xcprivacy privacy manifest to macOS framework (#55366)
+post-checkout: The engine source tree has been updated.
+
+You may need to run "gclient sync -D"
+

按照提示执行

gclient sync -D
+

# 调整源码

按路径 engine/src/flutter/third_party/skia/src/ports/SkTypeface_mac_ct.cpp 打开文件，按下方内容进行修改（红：删除，绿：新增）

static CFStringRef getCTFontPaletteAttribute() {
+-    static CFStringRef* kCTFontPaletteAttributePtr =
+-        static_cast<CFStringRef*>(dlsym(RTLD_DEFAULT, "kCTFontPaletteAttribute"));
+-    return *kCTFontPaletteAttributePtr;
++    return nullptr;
++    //static CFStringRef* kCTFontPaletteAttributePtr =
++    //    static_cast<CFStringRef*>(dlsym(RTLD_DEFAULT, "kCTFontPaletteAttribute"));
++    //return *kCTFontPaletteAttributePtr;
+}
+static CFStringRef getCTFontPaletteColorsAttribute() {
+-    static CFStringRef* kCTFontPaletteColorsAttributePtr =
+-        static_cast<CFStringRef*>(dlsym(RTLD_DEFAULT, "kCTFontPaletteColorsAttribute"));
+-    return *kCTFontPaletteColorsAttributePtr;
++    return nullptr;
++    //static CFStringRef* kCTFontPaletteColorsAttributePtr =
++    //    static_cast<CFStringRef*>(dlsym(RTLD_DEFAULT, "kCTFontPaletteColorsAttribute"));
++    //return *kCTFontPaletteColorsAttributePtr;
+}
+
+...
+
+static bool apply_palette(CFMutableDictionaryRef attributes,
+                          const SkFontArguments::Palette& palette) {
+    bool changedAttributes = false;
+-    if (palette.index != 0 || palette.overrideCount) {
++    if ((palette.index != 0 || palette.overrideCount) && getCTFontPaletteAttribute()) {
+        SkUniqueCFRef<CFNumberRef> paletteIndex(
+                CFNumberCreate(kCFAllocatorDefault, kCFNumberIntType, &palette.index));
+        CFDictionarySetValue(attributes, getCTFontPaletteAttribute(), paletteIndex.get());
+        changedAttributes = true;
+    }
+
+-    if (palette.overrideCount) {
++    if (palette.overrideCount && getCTFontPaletteColorsAttribute()) {
+        SkUniqueCFRef<CFMutableDictionaryRef> overrides(
+
+...
+

相应修改来自: https://skia-review.googlesource.com/c/skia/+/918518 (opens new window)

# 编译

来到 engine/src 目录，使用 gn 编译生成 ninja 构建文件

./flutter/tools/gn --runtime-mode release --mac-cpu arm64
+./flutter/tools/gn --ios --runtime-mode release
+

使用 ninja 编译引擎的最终产物

ninja -C out/host_release_arm64
+ninja -C out/ios_release
+

如果你当前是 MacOS 15 的 Sequoia 系统，在执行 ninja -C out/host_release_arm64 时会遇到如下错误

COPY '/System/Library/Fonts/A...arty/txt/assets/Apple Color Emoji.ttc'
+FAILED: gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc
+ln -f '/System/Library/Fonts/Apple Color Emoji.ttc' 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc' 2>/dev/null || (rm -rf 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc' && cp -af '/System/Library/Fonts/Apple Color Emoji.ttc' 'gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc')
+cp: chflags: gen/flutter/third_party/txt/assets/Apple Color Emoji.ttc: Operation not permitted
+[18/4139] SOLINK libvk_swiftshader.dylib libvk_swiftshader.dylib.TOC
+ninja: build stopped: subcommand failed.
+

别急，打开 engine/src/build/toolchain/mac/BUILD.gn，做如下修改，修改完再执行 gn 和 ninja

    tool("copy") {
+-      command = "ln -f {{source}} {{output}} 2>/dev/null || (rm -rf {{output}} && cp -af {{source}} {{output}})"
++      command = "ln -f {{source}} {{output}} 2>/dev/null || (rsync -a --delete {{source}} {{output}})"
+      description = "COPY {{source}} {{output}}"
+    }
+

相应的 issue: #152978 (opens new window)

好了，静静等待编译完成。

请注意，这将是个十分漫长且全程 CPU 占用率为 100% 的过程~

建议使用一台空闲的 Mac 电脑去做这个事！否则你将啥活也干不了~

# 验证

进入 engine/src/out/ios_release

strings Flutter.framework/Flutter | grep kCT
+
+SkCTMShader
+kCTFontVariationAxisHiddenKey
+

可以看到，没有 kCTFontPaletteAttribute 和 kCTFontPaletteColorsAttribute。

# 使用本地引擎

执行如下命令对项目进行编译

flutter build ipa \
+--local-engine-src-path=/Users/lxf/engine/src \
+--local-engine=ios_release \
+--local-engine-host=host_release_arm64
+

如果你有使用 realm 的话，可能会遇到如下错误

Installing realm (1.0.3)
+[!] /bin/bash -c
+set -e
+source "/Users/lxf/app/ios/Flutter/flutter_export_environment.sh" && cd "$FLUTTER_APPLICATION_PATH" && "$FLUTTER_ROOT/bin/flutter" pub run realm install --target-os-type ios --flavor flutter
+
+You must specify --local-engine or --local-web-sdk if you are using a locally built engine or web sdk.
+

你需要对该文件 +/Users/lxf/app/ios/.symlinks/plugins/realm/ios/realm.podspec 进行修改，在 \"$FLUTTER_ROOT/bin/flutter\" 和 pub 中间加上引擎相关参数。如下所示

s.prepare_command           = "source \"#{project_dir}/Flutter/flutter_export_environment.sh\" && cd \"$FLUTTER_APPLICATION_PATH\" && \"$FLUTTER_ROOT/bin/flutter\" --local-engine-src-path /Users/lxf/engine/src --local-engine ios_release --local-engine-host host_release_arm64 pub run realm install --target-os-type ios --flavor flutter"
+
+:script => 'source "$PROJECT_DIR/../Flutter/flutter_export_environment.sh" && cd "$FLUTTER_APPLICATION_PATH" && "$FLUTTER_ROOT/bin/flutter" --local-engine-src-path /Users/lxf/engine/src --local-engine ios_release --local-engine-host host_release_arm64 pub run realm install --target-os-type ios --flavor flutter',
+

如果你只是想对项目进行配置，则将 ipa 改为 ios，并加上 --config-only 参数即可。

flutter build ios \
+--local-engine-src-path=/Users/lxf/engine/src \
+--local-engine=ios_release \
+--local-engine-host=host_release_arm64 \
+--config-only
+

以前使用本地引擎只需要 --local-engine 参数，现在要求结合 --local-engine-host 一块使用，这里附上相关 issue：https://github.com/flutter/flutter/issues/132245 (opens new window) ，想了解的可以点开看看

# 三、最后

过程不难，麻烦的是拉源码和编译真的好慢，而且空间占用还大~

好了，本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter
Flutter - 轻松搞定炫酷视差(Parallax)效果
Flutter - 子部件任意位置观察滚动数据

+ ← + Flutter - 子部件任意位置观察滚动数据→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
03
+ Flutter - 轻松实现PageView卡片偏移效果 +
09-08
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f6869d/index.html b/pages/f6869d/index.html new file mode 100644 index 000000000..4482b8718 --- /dev/null +++ b/pages/f6869d/index.html @@ -0,0 +1,431 @@ + + + + + + Jsonnet - json数据模板语言 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2021-07-25
目录

Jsonnet - json数据模板语言

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

Jsonnet : 谷歌开发的 json 数据模板语言。

特点：支持注释、引用、算术运算、条件操作符，数组和对象内含，引入，函数，局部变量，继承等。

# 一、安装

brew install jsonnet
+

# 二、工具

  • VSCode
  • 插件：Jsonnet NG : 支持语法高亮，保存预览

安装完该插件后，点击右上角的预览按钮即可

默认的预览结果是 yaml 格式，可以在设置中搜索 jsonnet preview 找到对应的设置项，选择 json 即可。

# 三、特点

# 1、字段

# 定义

字段名可以不加引号，但是如果有空格则必须加引号

{
+  field1: 'lxf1',
+  "field 2": 'lxf2'
+}
+

# 隐藏字段

定义的字段不会被输出到 json 结果中

{
+  local name = 'LXF', # 定义在字段旁的变量以逗号结尾
+  language:: 'jsonnet',
+  lxf: {
+    lang: $.language,
+    author: name
+  }
+}
+

结果：

{
+    "lxf": {
+        "author": "LXF",
+        "lang": "jsonnet"
+    }
+}
+

# 2、注释

#  单行注释
+// 单行注释
+
+/*
+多行注释
+*/
+

# 3、字符串

# 引号

单引号与双引号没有区别

# 单行逐字字符串

# 单行逐字字符串：使用 @
+{
+  "single line": @'hello \ lxf'
+}
+

结果：

{
+  "single line": "hello \\ lxf"
+}
+

# 多行逐字字符串

# 多行逐字字符串：使用 |||
+{
+  "multiple line": |||
+  	hello
+  	lxf
+  |||,
+}
+

结果：

{
+  "multiple line": "hello\nlxf\n"
+}
+

# 拼接

{
+  pi:: 3.1415926,
+  format: 'Hello, %s' % 'lxf',
+  concat: 'Hello, ' + 'lxf',
+  format1: |||
+    hello
+    pi=%(pi)0.2f
+  ||| % self,
+}
+

结果：

{
+    "concat": "Hello, lxf",
+    "format": "Hello, lxf",
+    "format1": "hello\npi=3.14\n"
+}
+

# 4、变量

# 定义

  • 使用 local 关键字定义一个变量
  • 定义在字段旁的变量以逗号（,）结尾，其它情况定义的变量以分号（;）结尾
local github = 'https://github.com/LinXunFeng'; # 不是定义在字段旁的变量以分号结尾
+{
+  local name = 'LinXunFeng', # 定义在字段旁的变量以逗号结尾
+  language:: 'jsonnet',
+  lxf: {
+    target: $.language,
+    author: name,
+    by: self.author,
+    address: github
+  }
+}
+

结果：

{
+  "lxf": {
+    "address": "https://github.com/LinXunFeng",
+    "author": "LinXunFeng",
+    "by": "LinXunFeng",
+    "target": "jsonnet"
+  }
+}
+

# 引用

  • 变量名：就近原则

  • self关键字：指向当前对象

  • $ 关键字：指向根对象

  • ['字段名']：用于查找一个字段

  • .字段名：取出一个字段，但这个字段名需要符合常规的命名标准（不能以数字开头，不能有空格等...）

  • [数字]：用于取出数组元素

  • 允许长路径

  • 字符串和数组允许像 python 那样使用数组切片，如 arr[10:20:2]

local github = 'https://github.com/LinXunFeng';
+{
+  local name = 'LXF',
+  language:: 'jsonnet',
+  lxf: {
+    target: $.language,
+    author: name,
+    by: self.author,
+    address: github,
+    languages: ['oc', 'swift', 'python'],
+    nums: [1.8, 11, 22, 33, 44, 55],
+  },
+  lqr: {
+    local name = "fsa_fullstackaction",
+    languages: ['java', 'kotlin', 'python'],
+    scores: $.lxf.nums[1:3],
+    organization: name[4:],
+    height: $['lxf'].nums[0] + 'm'
+  },
+}
+

结果：

{
+  "lqr": {
+    "height": "1.8m",
+    "languages": [
+      "java",
+      "kotlin",
+      "python"
+    ],
+    "organization": "fullstackaction",
+    "scores": [
+      11,
+      22
+    ]
+  },
+  "lxf": {
+    "address": "https://github.com/LinXunFeng",
+    "author": "LXF",
+    "by": "LXF",
+    "languages": [
+      "oc",
+      "swift",
+      "python"
+    ],
+    "nums": [
+      1.8,
+      11,
+      22,
+      33,
+      44,
+      55
+    ],
+    "target": "jsonnet"
+  }
+}
+

# 5、四则运算

  • 支持四则运算，位运算，比较逻辑

  • + 运算时遇到字符串，会将数值转成字符串进行拼接

  • 字符串可以进行比较

  • 使用 in 关键字判断一个字段是否对指定对象中

{
+  info: {
+    name: 'LinXunFeng'
+  },
+  ex1: (1 + 2) / 3 * 4,
+  ex2: 1 << 2,
+  ex3: 'a' <= 'b',
+  ex4: 'a' == 'b',
+  ex5: 5 + 6 + '1' + 1,
+  ex6: 'name' in self.info,
+}
+

结果：

{
+    "ex1": 4,
+    "ex2": 4,
+    "ex3": true,
+    "ex4": false,
+    "ex5": "1111",
+    "ex6": true,
+    "info": {
+        "name": "LinXunFeng"
+    }
+}
+

# 5、函数

local addNumber(number) = function(x) number + x;
+local add2 = addNumber(2);
+local add3 = addNumber(3);
+{
+  # 闭包
+  closures: [
+    add2(2),
+    add3(5)
+  ],
+  # 定义函数
+  local sayHello(name) = 'hello %s' % name,
+  sum(x, y):: x + y,
+  newPerson(name='lxf', age=18, gender='male'):: {
+    name: name,
+    age: age,
+    gender: gender,
+  },
+  # 调用函数
+  call_say_hello: sayHello('lxf'),
+  call_sum: $.sum(1, 2),
+  lxf: $.newPerson(age=3),
+  standard_lib: std.join(' ', std.split('foo/bar', '/')),
+  len: [
+    std.length('hello'),
+    std.length([1, 2, 3])
+  ],
+}
+

结果：

{
+    "call_say_hello": "hello lxf",
+    "call_sum": 3,
+    "closures": [
+        4,
+        8
+    ],
+    "len": [
+        5,
+        3
+    ],
+    "lxf": {
+        "age": 3,
+        "gender": "male",
+        "name": "lxf"
+    },
+    "standard_lib": "foo bar"
+}
+

# 6、条件语句

表达式：if a then b else c，其它 else 是可选的，默认返回 null

local Person(isFemale) = {
+  name: 'lxf',
+  age: 18,
+  gender: if isFemale then 'female' else 'male',
+  [if isFemale then 'clothing']: 'dress',
+};
+
+{
+  condition1: if 2 > 1 then 'true' else 'false',
+  condition2: if 2 < 1 then 'true',
+  male: Person(false),
+  female: Person(true),
+}
+

结果：

{
+    "condition1": "true",
+    "condition2": null,
+    "female": {
+        "age": 18,
+        "clothing": "dress",
+        "gender": "female",
+        "name": "lxf"
+    },
+    "male": {
+        "age": 18,
+        "gender": "male",
+        "name": "lxf"
+    }
+}
+

# 7、对象合并

  • 使用 + 运算符来组合两个对象, 如果遇到字段冲突, 则使用右侧对象中的字段

  • 右对象中可以使用 super 关键字引用左对象中的字段

  • 使用 +: 运算符组合两个对象时，右对象会对左对象中已有的字段进行覆盖，没有的字段则会添加进去

# +
+local base = {
+    f: 2,
+    g: self.f + 100,
+};
+base + {
+    f: 5,
+    old_f: super.f,
+    old_g: super.g,
+}
+
+##################################
+
+# +:
+local base = {
+    override: {
+        x: 1,
+    },
+    composite+: {
+        x: 1,
+    },
+};
+{
+    override: { 
+      y: 2, 
+      z: 3 
+    },
+    composite: { 
+      y: 4, 
+      z: 5 
+    },
+} + base
+

结果：

# +
+{
+    "f": 5,
+    "g": 105,
+    "old_f": 2,
+    "old_g": 105
+}
+
+##################################
+
+# +:
+
+{
+    "composite": {
+        "x": 1,
+        "y": 4,
+        "z": 5
+    },
+    "override": {
+        "x": 1
+    }
+}
+

# 8、模板导入

  • 类似于复制/粘贴代码

  • 同样可以用来导入 json 原生数据

  • 模板文件的后缀统一为 .libsonnet

  • 使用 import 关键字，导入模板内容并使用指定的变量进行存储

模板内容

{
+  newPerson(
+    name,
+    country='China',
+    age=18
+  ):: {
+    name: name,
+    country: country,
+    age: age,
+    belly: [],
+    eat(food):: self + {
+      belly+: [food],
+    },
+  },
+}
+

使用模板

# libs/lxflib.libsonnet 为模板路径，在当前目录的libs目录下
+local personTemplate = import 'libs/lxflib.libsonnet';
+
+personTemplate
+  .newPerson(name='lxf', age=3)
+  .eat('rice')
+  .eat('pear')
+

结果：

{
+    "age": 3,
+    "belly": [
+        "rice",
+        "pear"
+    ],
+    "country": "China",
+    "name": "lxf"
+}
+

# 四、终端使用

# 1、基本使用

# 简单的代码可以使用 -e 直接运行
+jsonnet -e '{key: 1+2}'
+

查看 jsonnet 文件的转换结果

jsonnet shuttle.jsonnet
+

# 2、指定库路径

如果 jsonnet 文件中有引入模板文件，但是只写模板文件的命名，不包含路径

# lxflib.libsonnet是在当前目录的 libs 目录下，即 ./libs/lxflib.libsonnet
+local personTemplate = import 'lxflib.libsonnet';
+

这种情况直接执行命令是会报错的

RUNTIME ERROR: couldn't open import "lxflib.libsonnet": no match locally or in the Jsonnet library paths.
+

这个时候你有两个选择

选择一：老老实实在导入时写上完整的相对路径

local personTemplate = import 'libs/lxflib.libsonnet';
+

选择二：使用 -J <dir> 参数

 jsonnet -J ./libs shuttle.jsonnet
+

# 3、导出结果至文件

使用 jsonnet 文件导出 json 文件

jsonnet shuttle.jsonnet -o shuttle.json
+

# 4、多文件输出

Jsonnet 还支持使用一个 jsonnet 文件，生成多个 json 文件的场景，如同时生成 a.json 和 b.json 两个文件

{
+  "a.json": {
+    x: 1,
+    y: $["b.json"].y,
+  },
+  "b.json": {
+    x: $["a.json"].x,
+    y: 2,
+  },
+}
+

命令

# jsonnet -m <dir> jsonnet文件
+jsonnet -m . multiple_output.jsonnet
+

结果：

$ cat a.json 
+{
+   "x": 1,
+   "y": 2
+}
+
+$ cat b.json 
+{
+   "x": 1,
+   "y": 2
+}
+

# 五、应用

为了提高我们的工作效率，经常是将常用的一些命令进行整理和保存。

比如像我就是这样，并且会搭配 Shuttle (opens new window) （一款使用 json 来配置终端命令的快捷菜单软件）一块使用。

如下图所示，我添加了触发远端 Jenkins 进行打包的命令，但是远端的构建机因为一些原因会在两个固定的 ip 进行切换，所以我添加了两条，仅仅只是 ip 不同

但是除了打包功能外，其它的功能也与构建机 ip 有关，所以一旦添加一个 ip，我们需要修改的地方就会很多，而且也发现命令都一模一样，如果哪天命令变了。。。😭

所以像这种情况，我们就需要借助于 Jsonnet 来帮我们把简化这些内容。

如下图左侧，我在 libs 目录下定义了一些常用的模板，并将一些常量配置放入到 constant.libsonnet 模板文件中

在 shuttle.jsonnet 文件里，定义了整个 Shuttle 的配置内容

这有个好处，当新人进来时，你需要他能马上介入到打包和发版时，只需要把 Shuttle 配置好即可。

而配置 Shuttle 只需要调整 constant.libsonnet 文件后执行一行命令！

jsonnet . shuttle.jsonnet -o ~/.shuttle.json
+
+ +
+
#Jsonnet#Shuttle
FQ-各平台终端设置代理的方法
逆向 - 用IDA破解adb时间限制

+ ← + 逆向 - 用IDA破解adb时间限制→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f6bde9/index.html b/pages/f6bde9/index.html new file mode 100644 index 000000000..998ff7d7d --- /dev/null +++ b/pages/f6bde9/index.html @@ -0,0 +1,104 @@ + + + + + + iOS - Swift-UICollectionView横向分页的问题 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift-UICollectionView横向分页的问题

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# UICollectionView横向分页的问题

# 情况

直接看图

滚前

滚后

已经设置collectionView的isPagingEnabled为true了，可是出现了这种情况，原因就是collectionView的contentSize不够。

<UICollectionView: 0x7fc565076000; 
+frame = (0 0; 375 197); 
+clipsToBounds = YES; 
+gestureRecognizers = <NSArray: 0x6180000557e0>; 
+layer = <CALayer: 0x61000022a5a0>; 
+contentOffset: {187.5, 0}; 
+contentSize: {562.5, 192.25}
+>
+

# 解决方案

有两种方式可以解决，数据只有11个，要分两页需要16个，那我们可以直接添加数据到16个，然后在dataSource中返回cell时进行判断及处理即可。不过对于现在来说太小题大做了，我选第二种方式~

# 直接修改contentSize

我自定义了一个继承于UICollectionViewFlowLayout的Layout(LXFChatMoreCollectionLayout)，让UICollectionView在创建的时候使用了它

在 LXFChatMoreCollectionLayout.swift 中我们需要重写父类的collectionViewContentSize，将contentSize取出来修改为我们自己创建的newSize就可以了代码如下

override var collectionViewContentSize: CGSize {
+    let size: CGSize = super.collectionViewContentSize
+    let collectionViewWidth: CGFloat = self.collectionView!.frame.size.width
+    let nbOfScreen: Int = Int(ceil(size.width / collectionViewWidth))
+    let newSize: CGSize = CGSize(width: collectionViewWidth * CGFloat(nbOfScreen), height: size.height)
+    return newSize
+}
+

注：ceil函数的作用是求不小于给定实数的最小整数。ceil(2)=ceil(1.2)=cei(1.5)=2.00

# 效果

至于如何让item水平布局，请参考[《iOS - Swift UICollectionView横向分页滚动，cell左右排版》](/2017/09/12/iOS - Swift UICollectionView横向分页滚动，cell左右排版 (opens new window)

附上相关项目：Swift 3.0 高仿微信 (opens new window)

+ +
+
#iOS#Swift
iOS - Swift UICollectionView横向分页滚动，cell左右排版
iOS - Swift仿微信聊天图片显示

+ ← + iOS - Swift仿微信聊天图片显示→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f6d976/index.html b/pages/f6d976/index.html new file mode 100644 index 000000000..61e78643d --- /dev/null +++ b/pages/f6d976/index.html @@ -0,0 +1,243 @@ + + + + + + Flutter - 升级3.19之后页面多次rebuild？🤨 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-03-23
目录

Flutter - 升级3.19之后页面多次rebuild？🤨

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、背景

上周一尝试从 3.16.9 升级 3.19.3，主要有两个原因：

一是安卓端有一个疑似造成崩溃率上涨的 bug 在 Flutter 3.16 上出现，相关issue: #138947 (opens new window), 该 bug 在 3.13 不会出现，在 3.17.pre 上得到修复，而 3.16 之后的下个正式版本是 3.19。

二是苹果的隐私清单审核政策。

在苹果发布的【关于 App Store 提交的隐私更新 (opens new window)】新闻中指出

自 3 月 13 日起： 如果你上传新 App 或更新 App 到 App Store Connect，且该 App 使用了需要声明批准原因的 API，但你未在 App 的隐私清单中提供批准原因，我们会通过电子邮件告知你。这是对 App Store Connect 中现有通知的补充。

自 5 月 1 日起： 你需要就你的 App 代码使用的所列 API 提供批准原因，才能将新 App 或更新 App 上传到 App Store Connect。如果你没有合理的原因使用某个 API，请寻找替代的方案。如果你添加了常用第三方 SDK 列表中所列的新版第三方 SDK，那么这些 API、隐私清单和签名要求将应用于该 SDK。请务必使用包含其隐私清单的 SDK 版本，并注意在将该 SDK 添加为二进制依赖项时也需要提供签名。

在苹果的【即将发布的第三方SDK要求 (opens new window)】一文中，列举出需要隐私清单和签名的 SDK，其中就包含了 Flutter。为了符合该审核要求，Flutter 从 3.19 开始包含了 PrivacyInfo.xcprivacy 这个隐私清单文件。

文件位于: https://github.com/flutter/engine/blob/3.19.0/shell/platform/darwin/ios/framework/PrivacyInfo.xcprivacy (opens new window)

# 二、踩坑

升到到 3.19.3 后发现，从 页面A 跳转到 页面B 和返回 页面A 时，页面A 的 build 方法都会被执行，降回 3.16.9 则不会，这就很奇怪。后来发现是因为 页面A 间接使用了 ModalRoute.of。

以下是可复现问题的代码

class PageA extends StatefulWidget {
+  @override
+  State<PageA> createState() => _PageAState();
+}
+
+class _PageAState extends State<PageA> {
+  @override
+  Widget build(BuildContext context) {
+
+    // ==== 这里 ====
++    final arguments = ModalRoute.of(context)?.settings.arguments;
++    print("PageA arguments:$arguments");
+
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('PageA'),
+      ),
+      body: const SizedBox.shrink(),
+    );
+  }
+}
+

# 三、探索

在经过一番摸索后，发现 ModalRoute 在 3.19 上面有一个小修改~

相关 issue 是: #112567 (opens new window) 。

该 issue 主要是涉及在 Web 端上按 Tab 键切换焦点的问题，后续有个 PR: #130841 (opens new window) 解决了该问题。

该 PR 因内部测试原因进行了回滚，后再重新登陆，现PR: #134554 (opens new window)

而在该 PR 中就对 ModalRoute 加了如下代码：

// packages/flutter/lib/src/widgets/routes.dart
+
+abstract class ModalRoute<T> extends TransitionRoute<T> with LocalHistoryRoute<T> {
+  ...
++  @override
++  void didChangeNext(Route<dynamic>? nextRoute) {
++    super.didChangeNext(nextRoute);
++    changedInternalState();
++  }
++
++  @override
++  void didPopNext(Route<dynamic> nextRoute) {
++    super.didPopNext(nextRoute);
++    changedInternalState();
++  }
++
+  @override
+  void changedInternalState() {
+    super.changedInternalState();
+-    setState(() { /* internal state already changed */ });
+-    _modalBarrier.markNeedsBuild();
++    // No need to mark dirty if this method is called during build phase.
++    if (SchedulerBinding.instance.schedulerPhase != SchedulerPhase.persistentCallbacks) {
++      setState(() { /* internal state already changed */ });
++      _modalBarrier.markNeedsBuild();
++    }
+    _modalScope.maintainState = maintainState;
+  }
+...
+}
+

didChangeNext 和 didPopNext 这两个方法对应的就是页面的 push 和 pop，现在在该 PR 中重写并调用了 changedInternalState 方法，在 changedInternalState 方法中调用了 setState。

下面将以高亮的方式标出重点代码（不是新增代码）。

abstract class ModalRoute<T> extends TransitionRoute<T> with LocalHistoryRoute<T> {
+  ...
+  @protected
+  void setState(VoidCallback fn) {
+    if (_scopeKey.currentState != null) {
++      _scopeKey.currentState!._routeSetState(fn);
+    } else {
+      // The route isn't currently visible, so we don't have to call its setState
+      // method, but we do still need to call the fn callback, otherwise the state
+      // in the route won't be updated!
+      fn();
+    }
+  }
+...
+}
+

这个 ModalRoute 内的 setState 会使 _ModalScopeStatus 的 _routeSetState 被调用，然后触发 _ModalScopeState 的 setState，接着其 child: _ModalScopeStatus 就开始 rebuild 了。

class _ModalScopeState<T> extends State<_ModalScope<T>> {
+  ...
+  void _routeSetState(VoidCallback fn) {
+    if (widget.route.isCurrent && !_shouldIgnoreFocusRequest && _shouldRequestFocus) {
+      widget.route.navigator!.focusNode.enclosingScope?.setFirstFocus(focusScopeNode);
+    }
++    setState(fn);
+  }
+  
+  
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      ...
++      child: _ModalScopeStatus(
+        ...
+      ),
+    );
+  }
+  ...
+}
+

如下代码所示，_ModalScopeStatus 是一个 InheritedWidget，在经过一系列的处理后最终会走到其 InheritedElement 的 update 方法，在 update 方法中通过调用 updateShouldNotify 来判断数据是否发生变化，进而决定是否通知相关依赖。

+ class _ModalScopeStatus extends InheritedWidget {
+  ...
+
+  @override
++  bool updateShouldNotify(_ModalScopeStatus old) {
++    return isCurrent != old.isCurrent ||
+           canPop != old.canPop ||
+           impliesAppBarDismissal != old.impliesAppBarDismissal ||
+           route != old.route;
+  }
+  ...
+}
+
class InheritedElement extends ProxyElement {
+  ...
+  @override
+  void updated(InheritedWidget oldWidget) {
++    if ((widget as InheritedWidget).updateShouldNotify(oldWidget)) {
+      super.updated(oldWidget);
+    }
+  }
+  ...
+}
+

_ModalScopeStatus 的 isCurrent 表示当前页面是否处于最上层，所以在打开和关闭下一个页面时，其值必定切换，也就是 updateShouldNotify 必定返回 true，既而通知依赖（实际上就是找出一个个依赖进行标脏，然后等待 build 方法的重新调用）。

而我们在使用 ModalRoute.of 的时候，内部就是将当前页的 BuildContext 添加到依赖中，所以他这个改动就会影响到使用 ModalRoute.of 的 Widget，使其多次 rebuild。

@optionalTypeArgs
+static ModalRoute<T>? of<T extends Object?>(BuildContext context) {
+  final _ModalScopeStatus? widget = context.dependOnInheritedWidgetOfExactType<_ModalScopeStatus>();
+  return widget?.route as ModalRoute<T>?;
+}
+

# 四、解决方案

# 方案一：调整 ModalRoute.of

在当前版本中，of 的用意就是找到相应的 ModalRoute 并且创建依赖关系，当数据改变时会重新 build ，这是符合它期望用意的。

但是有些场景下我们并不希望有这个 “特性”，比如，我打开新页面后，通过 ModalRoute.of(context)?.settings.arguments 取路由参数，当前页面的取参，与跳转和关闭下个页面是没有任何关系的，所以这种场景下触发 rebuild 将毫无意义。

所以我提了个 PR: #145389 (opens new window), 给 ModalRoute.of 添加了 createDependency 参数，为开发者提供了是否创建依赖的选择。目前还在审核中~

  static ModalRoute<T>? of<T extends Object?>(
+    BuildContext context, {
+    bool createDependency = true,
+  }) {
+    _ModalScopeStatus? widget;
+    if (createDependency) {
+      widget = context.dependOnInheritedWidgetOfExactType<_ModalScopeStatus>();
+    } else {
+      widget = context
+          .getElementForInheritedWidgetOfExactType<_ModalScopeStatus>()
+          ?.widget as _ModalScopeStatus?;
+    }
+    return widget?.route as ModalRoute<T>?;
+  }
+

# 方案二：魔改源码

原 PR 是对 Tab 键切换焦点问题的修复，但对于移动端来说根本不算问题，因为用不上~ 😅 （当然，如果你们的用户有使用无障碍功能的，还需要自行斟酌一下）

如果这个问题到时还未解决（原 PR 的作者还在休假），那我们也可以先注释掉相关代码对 changedInternalState 的调用来应对

// packages/flutter/lib/src/widgets/routes.dart
+
+abstract class ModalRoute<T> extends TransitionRoute<T> with LocalHistoryRoute<T> {
+  ...
+  @override
+  void didChangeNext(Route<dynamic>? nextRoute) {
+    super.didChangeNext(nextRoute);
++    // changedInternalState();
+  }
+
+  @override
+  void didPopNext(Route<dynamic> nextRoute) {
+    super.didPopNext(nextRoute);
++    // changedInternalState();
+  }
+}
+

提供一个补丁

# 进入你的 flutter 目录，比如我用的是 fvm 下载的 3.19.3
+# 记得将 cd 后面的路径换成你自己电脑上的~
+cd /Users/lxf/fvm/versions/3.19.3
+
+# 下载补丁
+curl -O https://raw.githubusercontent.com/LinXunFeng/flutter_assets/main/patch/01_rollbak_3_19_routes_change/0001-Roll-back-changes-to-routes.dart.patch
+
+# 应用补丁
+git apply 0001-Roll-back-changes-to-routes.dart.patch
+

# 五、最后

总而言之，距离5月1日（苹果强制要求添加隐私清单文件的期限）还有一个月，我们现在大可保持在 3.13 版本先用着，免得折腾，同时也祈祷快点修复该问题，然后顺利升级上去~

+ +
+
#Dart#Flutter
Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞
Flutter - 热更新 Shorebird 1.0 正式版来了 🐦

+ ← + Flutter - 热更新 Shorebird 1.0 正式版来了 🐦→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f81235/index.html b/pages/f81235/index.html new file mode 100644 index 000000000..aa07baa2f --- /dev/null +++ b/pages/f81235/index.html @@ -0,0 +1,122 @@ + + + + + + vite - 多渠道差异化打包插件 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-11-06
目录

vite - 多渠道差异化打包插件

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

为了让 vite 项目支持多渠道差异化打包（如同 Android 工程变体），我做了一个 vite 插件：

# 一、简介

vite-plugin-variant 是一个管理多渠道差异化源码的 vite 插件，与其他 vite 插件不同，vite-plugin-variant 的原理是从多渠道源码目录中过滤出当前渠道的所有源码文件，然后对 src 目录进行更新，即从多渠道源码(MCS)到当前渠道源码(FCS)的过程，而不再是基于 src 目录做文章，所以与其他 vite 插件可以很好的兼容。

  • MCS：多渠道源码（multi-channel src）
  • FCS：最终渠道源码（final channel src）

# 二、特性

  • 支持添加、删除、更新文件即时生效（HMR）
  • 支持动态切换渠道
  • 支持定义多渠道全局变量
  • 支持各种 vite 工程（包括 uniapp）

# 三、使用

# 1、安装

npm i vite-plugin-variant -D
+

# 2、配置

在 vite.config.ts 中添加配置：

import variant from "vite-plugin-variant";
+
+export default defineConfig({
+  plugins: [
+    variant({
+      mcsCurrent: "channelA", // 当前渠道
+      mcsDefine: {
+        channelA: {}, // 渠道A 的全局变量 ....
+        channelB: {}, // 渠道B 的全局变量 ....
+      },
+    }),
+    // other plugins
+  ],
+});
+

注意：

  1. 需要将 variant() 放置到插件列表最前，才能与其他插件更好的兼容。
  2. 修改 mcsCurrent 的值即可切换渠道，dev 模式下会自动重新部署。

# 3、源码目录

  1. 在 src 同级目录下创建 variants/main 目录，存放项目的默认工程源码。
  2. 在 variants 目录下创建渠道目录（如：channelA、channelB），作为各渠道差异性源码。

说明：假设工程需要上线 2 个不同的渠道，分别是华为和小米，它们各自显示的 logo 图片不同，那么可以在各自的渠道目录下放置各自的 logo 图片，如果有一个渠道没有放置 logo 图片，则使用 main 目录下默认的 logo 图片，其他源码文件同理。

# 4、全局变量

在 vite.config.ts 中配置各渠道的全局变量：

export default defineConfig({
+  plugins: [
+    variant({
+      mcsCurrent: "huawei",
+      mcsDefine: {
+        xiaomi: {
+          WEBSITE: "https://www.mi.com/",
+        },
+        huawei: {
+          WEBSITE: "https://www.huawei.com/",
+        },
+      },
+    }),
+  ],
+});
+

注意：

  1. mcsDefine 中定义的全局变量跟在 vite 的 define 选项中定义的效果是一样的，但是 mcsDefine 能更好的管理各个渠道各自的变量。
  2. vite-plugin-variant 会自动在 variants/main 目录下根据当前渠道的全局变量生成 variant-env.d.ts，防止 TypeScript 编译报错。

在代码中可以直接使用：

import { ref } from "vue";
+const flavor = ref(FLAVOR);
+const website = ref(WEBSITE);
+

# 5、其他

  1. 因为多渠道源码都在 variants 目录下，而 src 作为 vite-plugin-variant 的输出目录，其下文件会随时变化，故建议在 .gitignore 文件中将 src 目录忽略。
  2. vite-plugin-variant 会自动在 tsconfig.json 的 include 选项中插入必要的规则，避免 variants 目录下代码不被 TypeScript 识别从而提示报错。

# 四、Demo

vite-plugin-variant 提供了 2 个简单 Demo 为开发者提供参考：

+ +
+
#vite#plugin#variant#vite-plugin-variant#多渠道#差异化#变体
uniapp - tensorflowjs 之小程序环境集成
vue - Vue2兼容低版本浏览器

+ ← + vue - Vue2兼容低版本浏览器→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f81fb5/index.html b/pages/f81fb5/index.html new file mode 100644 index 000000000..1a356e42b --- /dev/null +++ b/pages/f81fb5/index.html @@ -0,0 +1,112 @@ + + + + + + iOS逆向 - 运行时分析（一）class-dump | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-03-19
目录

iOS逆向 - 运行时分析（一）class-dump

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 概述

众所周知，OC 是一门面向对象的动态编程语言，在程序运行时才会确定对象的真实类型，并调用类和对象的相应方法。所以在 iOS 逆向领域便出现了一些工具，利用 Runtime 帮助我们开发者在程序运行时去动态修改类和对象中的属性和方法。

# class-dump

class-dump 是一个命令行工具，可对存储在 Mach-O 文件中的 OC Runtime 信息进行检测，生成类、分类和协议的属性和方法的声明，即 .h 头文件。

# 1、下载安装

官网下载链接：

下载后解压，将 class-dump 拖到 /usr/local/bin 目录下即可在终端内使用

官网下载的 class-dump 由于很久没有维护了，不支持 Swift 和 OC 混编的二进制文件，会报如下错误

class-dump[36848:11809395] Error: Cannot find offset for address 0x800000001001586 in stringAtAddress:
+

所以推荐从 https://github.com/AloneMonkey/MonkeyDev/blob/master/bin/class-dump (opens new window) 下载 class-dump

下载后拖到 /usr/local/bin 目录下，再赋予执行权限方可在终端内使用

chmod 755 /usr/local/bin/class-dump
+

# 2、使用

使用参数说明：

class-dump 3.5 (64 bit)
+Usage: class-dump [options] <mach-o-file>
+
+  where options are:
+        -a             show instance variable offsets
+        -A             show implementation addresses
+        --arch <arch>  choose a specific architecture from a universal binary (ppc, ppc64, i386, x86_64)
+        -C <regex>     only display classes matching regular expression
+        -f <str>       find string in method name
+        -H             generate header files in current directory, or directory specified with -o
+        -I             sort classes, categories, and protocols by inheritance (overrides -s)
+        -o <dir>       output directory used for -H
+        -r             recursively expand frameworks and fixed VM shared libraries
+        -s             sort classes and categories by name
+        -S             sort methods by name
+        -t             suppress header in output, for testing
+        --list-arches  list the arches in the file, then exit
+        --sdk-ios      specify iOS SDK version (will look in /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS<version>.sdk
+        --sdk-mac      specify Mac OS X version (will look in /Developer/SDKs/MacOSX<version>.sdk
+        --sdk-root     specify the full SDK root path (or use --sdk-ios/--sdk-mac for a shortcut)
+

举个例子：我们对 Twitter 的二进制文件导出头文件

class-dump --arch arm64 -a -A -H Twitter -o ./Headers
+

各参数说明：

参数 作用
a 显示实例变量的偏移地址
A 显示方法实现地址
H 生成头文件
arch 指定架构（如果只有一个架构，可以不加该参数）
o 指定保存生成的头文件的目录位置

执行完成后，可以看到 Headers 目录下一共有 343 个文件

Headers

任意打开一个头文件，可以看到变量名、方法名、偏移地址等信息

+ +
+
#iOS#逆向
iOS逆向 - 应用脱壳
iOS逆向 - 运行时分析（二）Cycript

+ ← + iOS逆向 - 运行时分析（二）Cycript→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/f98f41/index.html b/pages/f98f41/index.html new file mode 100644 index 000000000..3710c6d38 --- /dev/null +++ b/pages/f98f41/index.html @@ -0,0 +1,162 @@ + + + + + + Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2024-08-04
目录

Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、概述

距离 chat_bottom_container (opens new window) 首个可用版本 (0.0.2) 的发布已经过去了 1 个多月，在这期间根据大家的使用反馈，我们也做了一些优化调整，今天就来盘点一下到底做了哪些优化，新增了什么功能，以及一些常见操作。

请注意

开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

https://github.com/LinXunFeng/flutter_chat_packages (opens new window)

# 二、使用

# 调整键盘高度监听管理逻辑

0.1.0 版本前，只考虑了页面栈这种常规情况，当键盘高度变化时只处理栈顶的监听。

但其实还有一种常见打破该规则的场景，就是悬浮聊天页，它会一直在页面上，可能为了能快速从悬浮小球展开聊天页面，收起时只是做了隐藏，而不会销毁页面，在这种情况下，它依旧在监听管理里的栈顶，所以在收起后，上一个聊天页的键盘高度监听就会失效。

这个在 0.1.0 版本中得到修复，内部会倒序遍历调用所有的监听回调。

不过你不用担心这一改动会导致其它聊天页面出现多余的视图刷新，因为在键盘高度监听回调里会先判断输入框是否有焦点，若无则直接返回了。

# 兼容外接键盘

当连接外接键盘时，软键盘会消失，高度会降为 0，这里可以用 iOS 模拟器结合 Toggle Software Keyboard (快捷键: cmd + k) 来模拟连接与断开外接键盘的效果。

# 隐藏面板

有小伙伴提出，不知道如何程序式的隐藏面板，其实很简单，就两步

  1. 让输入框失去焦点
  2. 更新内部状态为 ChatBottomPanelType.none
hidePanel() {
+  // 0.2.0 前
+  inputFocusNode.unfocus();
+  if (ChatBottomPanelType.none == controller.currentPanelType) return;
+  controller.updatePanelType(ChatBottomPanelType.none);
+  
+  // 0.2.0 后，可以这么写
+  controller.updatePanelType(
+    ChatBottomPanelType.none,
+    forceHandleFocus: ChatBottomHandleFocus.unfocus,
+  );
+}
+

# 自定义底部安全区高度

在默认情况下，chat_bottom_container 在收起模式 (.none) 下会自动帮你添加底部安全区高度，但在一些场景下你可能不希望如此。比如：

  • 安卓的底部安全区的高度，很多小伙伴都是简单粗暴的设置个高度了事
  • App 首页有底部 BottomNavigationBar，不需要安全区高度

在此，你可以通过将 safeAreaBottom 参数来自定义这个高度，如下设置为 0。

return ChatBottomPanelContainer<PanelType>(
+  ...
+  safeAreaBottom: 0,
+  ...
+);
+

# 调整键盘面板高度

如示例中位于首页的聊天页面

在键盘弹出时，如下图所示

实际 期望

很明显，我们希望键盘容器高度能够减去外层底部固定的 BottomNavigationBar 高度。

ChatBottomPanelContainer 提供了 changeKeyboardPanelHeight 回调，在回调中可以拿到当前的键盘高度，经过计算后，将合适的键盘容器高度返回即可。

return ChatBottomPanelContainer<PanelType>(
+  ...
+  changeKeyboardPanelHeight: (keyboardHeight) {
+    final renderObj = bottomNavigationBarKey.currentContext?.findRenderObject();
+    if (renderObj is! RenderBox) return keyboardHeight;
+    return keyboardHeight - renderObj.size.height;
+  },
+  ...
+);
+

# 缓存键盘高度

先来看未做键盘高度缓存处理之前，会发生什么？

上图一共进入了三次聊天页

  • 第一次是先点击键盘，再切到表情面板，体验起来还是挺不错的。
  • 为了避免一闪而过，没有注意到，所以第二次和第三次的操作是一样的，先唤起表情面板，再切到键盘，可以看到在切到键盘时会抖动。

这是因为每次进入聊天页，键盘的高度为初始值 0，在 0.2.0 版本中对此进行了优化，加入了键盘高度缓存逻辑，从而尽量避免该抖动问题的出现。

❗️ 但需要注意的是，假如你卸载重装 App，该缓存会丢失，即你还是有可能会看到最多一次的抖动。

除此之外，你还可以使用这个缓存的键盘高度来实现表情面板与键盘高度保持一致的效果，这样在切换的时候体验上会更好些。😉

Widget _buildEmojiPickerPanel() {
+  // 如果键盘高度还没有缓存过，则使用默认高度 300
+  double height = 300;
+  final keyboardHeight = controller.keyboardHeight;
+  if (keyboardHeight != 0) {
+    height = keyboardHeight;
+  }
+
+  return Container(
+    padding: EdgeInsets.zero,
+    height: height,
+    color: Colors.blue[50],
+    child: const Center(
+      child: Text('Emoji Panel'),
+    ),
+  );
+}
+

效果如下

# 支持表情面板与输入框焦点共存

这也是提升用户体验的重要一点，效果见上图。

先按如下设置你的输入框

bool readOnly = false;
+TextEditingController textEditingController = TextEditingController();
+
+...
+TextField(
+  controller: textEditingController,
+  focusNode: inputFocusNode,
+  // 为 true 时不显示键盘，默认为 false
+  readOnly: readOnly,
+  // 获取焦点后显示光标，设置为 true 才不受 readOnly 的影响
+  showCursor: true,
+),
+...
+

接下来就是切换表情面板的操作

switchToEmojiPanel() {
+  readOnly = true;
+  // 这里你可以只刷新输入框
+  setState(() {});
+
+  // 等待下一帧
+  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+    controller.updatePanelType(
+      // 内部切至 other 状态
+      ChatBottomPanelType.other,
+      // 关联外部的面板类型为表情面板
+      data: PanelType.emoji,
+      // 输入框获取焦点
+      forceHandleFocus: ChatBottomHandleFocus.requestFocus,
+    );
+  });
+}
+

在 updatePanelType 方法中，如果是切至 .other 状态，是会帮你执行失去焦点操作的，所以这里提供了一个 forceHandleFocus 参数，如果你对方法内部对焦点的处理不满意，你可以使用它来强制指定焦点的处理方式。

# 三、最后

好了，上述便是该库的更新内容, 惯例附上 GitHub 地址: https://github.com/LinXunFeng/flutter_chat_packages/tree/main/packages/chat_bottom_container (opens new window) ，如果接入上有什么问题，可以在链接中查看 demo 演示代码。

开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

+ +
+
#Dart#Flutter#Chat
Flutter - 支持观察NestedScrollView，兼容性更强 😈
Flutter - 升级到3.24后页面还会多次rebuild吗？🧐

+ ← + Flutter - 升级到3.24后页面还会多次rebuild吗？🧐→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/fb0480/index.html b/pages/fb0480/index.html new file mode 100644 index 000000000..db628633e --- /dev/null +++ b/pages/fb0480/index.html @@ -0,0 +1,137 @@ + + + + + + iOS - Swift面向协议编程（二） | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2017-09-12
目录

iOS - Swift面向协议编程（二）

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

上一篇文章iOS - Swift 面向协议编程（一）已经对Swift的面向协议编程做了介绍，接下来该篇文章将使用面向协议开发(POP)来做下实际的应用

在实际开发中，自定义View基本上是必须的，相信这对我们来说都是比较简单，不过我们还是来回顾一下下~

# 面向对象开发

1 新建一个UIView的FirstTypeView

FirstTypeView

2 创建一个View的xib文件

xib

3 设置xib对应的class进行绑定

xib class

4 在FirstTypeView.swift 中实现一个类方法，方便我们外部用xib来初始化FirstTypeView

import UIKit
+
+class FirstTypeView: UIView {
+    
+}
+
+extension FirstTypeView {
+    class func loadFromNib() -> FirstTypeView {
+        return Bundle.main.loadNibNamed("\(self)", owner: nil, options: nil)?.first as! FirstTypeView
+    }
+}
+

在外部只要调用FirstTypeView的loadFromNib方法就可以初始化一个View来使用了。好，现在又有一个类SecondTypeView，也是要求使用xib来初始化view。这时我们就会想，一样的加载xib的方法，那我们就把它抽取出来放到父类就可以了。这里的父类以BaseView.swift为例 +父类的主要实现代码

extension BaseView {
+    class func loadFromNib() -> BaseView {
+        return Bundle.main.loadNibNamed("\(self)", owner: nil, options: nil)?.first as! BaseView
+    }
+}
+

那我们的FirstTypeView和SecondTypeView只需要直接继承于BaseView就可以了，在其它地方初始化view也很方便

let firstView = FirstTypeView.loadFromNib()
+view.addSubview(firstView)
+
+let secondView = SecondTypeView.loadFromNib()
+view.addSubview(secondView)
+

好，现在FirstTypeView里声明了一个属性name，SecondTypeView声明的属性为age，假如我们现在要使用各自对应的属性，这时是直接点不出来的，需要先进行强转

let firstView = FirstTypeView.loadFromNib() as! FirstTypeView
+firstView.name = "LXF"
+view.addSubview(firstView)
+
+let secondView = SecondTypeView.loadFromNib() as! SecondTypeView
+secondView.age = 100
+view.addSubview(secondView)
+

但是这样觉得不是很方便，还需要进行强转，我们能不能在BaseView里面搞定它呢？如果是Swift 2.x 的话是可以的

extension BaseView {
+    class func loadFromNib() -> Self { // 注意这里是大写的S
+        return Bundle.main.loadNibNamed("\(self)", owner: nil, options: nil)?.first as! Self
+    }
+}
+

但是现在Swift 3.0已经不支持这种写法了，会报错。这个时候如果使用面向协议的开发就很方便了。

# 面向协议开发

将BaseView删除，FirstTypeView和SecondTypeView改回继承于UIView

1 新建一个Swift文件 Nibloadable.swift

Nibloadable

2 实现协议方法

协议中不允许定义类方法，需改为静态方法

import UIKit
+
+protocol Nibloadable {
+    
+}
+
+extension Nibloadable {
+    static func loadFromNib() -> Self {
+        return Bundle.main.loadNibNamed("\(self)", owner: nil, options: nil)?.first as! Self
+    }
+}
+

3 遵守协议

class SecondTypeView: UIView, Nibloadable {
+    var age: Int = 10
+}
+

这样就可以了，而且你在调用loadFromNib方法时可以发现，类型是对应上的

loadFromNib协议方法

好了，面向协议开发的应用就记录到这里，希望能帮助到大家！

Demo (opens new window)

+ +
+
#iOS#Swift
iOS - Swift 面向协议编程（一）
Swift - PropertyWrapper

+ ← + Swift - PropertyWrapper→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/fc665a/index.html b/pages/fc665a/index.html new file mode 100644 index 000000000..79012b12b --- /dev/null +++ b/pages/fc665a/index.html @@ -0,0 +1,671 @@ + + + + + + iOS逆向 - 运行时分析（三）Frida | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
LinXunFeng
2022-03-27
目录

iOS逆向 - 运行时分析（三）Frida

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简介

Frida 是一个跨平台的轻量级 Hook 框架，支持 MacOS、Linux 和 Windows 操作系统，提供了精简的 Python 接口和功能丰富的 JS 接口，除了可以使用自身的控制台交互以外，还可以使用 Python 将 JS 脚本注入到运行程序中，通过 Frida 可以获取程序的详细信息、拦截和调用指定函数、注入代码、修改参数等。

Frida 源代码托管：https://github.com/frida (opens new window)

# 二、安装

# iOS

添加软件源 https://build.frida.re/，然后搜索 Frida 安装即可。

安装完成后可能通过 ps 看到 frida-server 后台程序则说明安装成功，若没有可以重启手机后再看看

lxf-iPad:~ root# ps -ax | grep frida
+26717 ??         0:00.08 /usr/sbin/frida-server
+26731 ttys000    0:00.01 grep frida
+

# MacOS

使用 pip 进行安装

pip install frida-tools # CLI tools
+pip install frida       # Python bindings
+

后续需要升级的话，可以使用 --upgrade 参数

pip install frida-tools --upgrade
+pip install frida --upgrade
+

如果报 command not found:pip 错误，说明当前系统没有安装 pip，可以使用下方命令安装

brew install wget
+wget https://bootstrap.pypa.io/get-pip.py
+python3 get-pip.py
+

执行完成后会提示你将对应 python 版本的 bin 路径添加到 PATH 中，如：

export PATH=~/Library/Python/3.8/bin:$PATH
+

当然，如果你也有用 pyenv，则可以忽略上述的 pip 安装流程，因为 pyenv 自带了 pip。

你可以用 which 命令查看你的 pip 的安装位置。

➜  ~ which pip
+/usr/local/var/pyenv/shims/pip
+

# 三、入门

除了 frida 主程序外，frida-tools 里还提供了五个实用工具，它们位于 /usr/local/bin/ 目录下

ls -al /usr/local/bin/frida-*
+

如果使用的是 pyenv 的 pip 安装的 frida，则它们会被安装到 /usr/local/var/pyenv/shims/ 目录下

ls -al /usr/local/var/pyenv/shims/frida-*
+
-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-apk
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-create
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-discover
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-join
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-kill
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-ls-devices
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-ps
+-rwxr-xr-x  1 lxf  admin  180  3 19 22:05 /usr/local/var/pyenv/shims/frida-trace
+

# 1、查看可用的设备列表

frida-ls-devices 用于获取可用的设备列表，在多设备交互的情况下会非常有用

➜  ~ frida-ls-devices
+Id                                        Type    Name
+----------------------------------------  ------  ------------
+local                                     local   Local System
+d007dc58edd70caad950ff01b41ebf73cfa49fbe  usb     iPad
+socket                                    remote  Local Socket
+

# 2、获取设备的进程列表

frida-ps 用于获取进程列表信息

➜  ~ frida-ps --help
+usage: frida-ps [options]
+
+options:
+  -h, --help            show this help message and exit
+  -D ID, --device ID    connect to device with the given ID
+  -U, --usb             connect to USB device
+  -R, --remote          connect to remote frida-server
+  -H HOST, --host HOST  connect to remote frida-server on HOST
+  --certificate CERTIFICATE
+                        speak TLS with HOST, expecting CERTIFICATE
+  --origin ORIGIN       connect to remote server with “Origin” header set to
+                        ORIGIN
+  --token TOKEN         authenticate with HOST using TOKEN
+  --keepalive-interval INTERVAL
+                        set keepalive interval in seconds, or 0 to disable
+                        (defaults to -1 to auto-select based on transport)
+  --p2p                 establish a peer-to-peer connection with target
+  --stun-server ADDRESS
+                        set STUN server ADDRESS to use with --p2p
+  --relay address,username,password,turn-{udp,tcp,tls}
+                        add relay to use with --p2p
+  -O FILE, --options-file FILE
+                        text file containing additional command line options
+  --version             show program's version number and exit
+  -a, --applications    list only applications
+  -i, --installed       include all installed applications
+  -j, --json            output results as JSON
+

这里说明一下常用的命令参数

参数 描述
-U 连接到 USB 设备
-D 如果当前有多台 USB 设备，可以使用该参数指定设备的 UDID（frida-ls-devices 列出的那些 id）
-R/-H 连接到远程 frida-server，主要用于远程调试
-a 仅显示正在运行的应用
-i 显示所有已安装的应用（包括 AppStore安装的应用和系统应用）

具体使用如下：

连接到 USB 设备查看进程列表

~ frida-ps -U
+  PID  Name
+-----  ---------------------------------------------------
+25226   Cydia
+26745   Twitter
+21611   邮件
+25055      AppPredictionWidget
+20944      AppleCredentialManagerDaemon
+ 1687      AssetCacheLocatorService
+23387      CMFSyncAgent
+...
+

连接到 USB 设备查看正在运行的应用

➜  ~ frida-ps -U -a
+  PID  Name         Identifier
+-----  -----------  --------------------
+25226   Cydia    com.saurik.Cydia
+26745   Twitter  com.atebits.Tweetie2
+21611   邮件       com.apple.mobilemail
+➜  ~
+

连接到 USB 设备查看所有安装的应用

➜  ~ frida-ps -U -a -i
+  PID  Name                         Identifier
+-----  ---------------------------  ------------------------------------------
+25226   Cydia                    com.saurik.Cydia
+26745   Twitter                  com.atebits.Tweetie2
+21611   邮件                       com.apple.mobilemail
+    -   App Store                com.apple.AppStore
+    -   FaceTime 通话              com.apple.facetime
+    -   LXFProtocolTool_Example  org.cocoapods.demo.LXFProtocolTool-Example
+    -   Photo Booth              com.apple.Photo-Booth
+    -   Safari 浏览器               com.apple.mobilesafari
+    -   Substitute               com.ex.substitute.settings
+    -   SwiftyFitsize_Swift      org.cocoapods.demo.SwiftyFitsize-Swift
+    -   iTunes Store             com.apple.MobileStore
+    -   信息                       com.apple.MobileSMS
+    -   查找 iPhone                com.apple.mobileme.fmip1
+    -   设置                       com.apple.Preferences
+....
+

连接到指定的 USB 设备查看正在运行的应用

➜  ~ frida-ps -D d007dc58edd70caad950ff01b41ebf73cfa49fbe -a
+  PID  Name         Identifier
+-----  -----------  --------------------
+25226   Cydia    com.saurik.Cydia
+26745   Twitter  com.atebits.Tweetie2
+21611   邮件       com.apple.mobilemail
+➜  ~
+

# 3、杀死进程

frida-kill 用来结束设备上的指定进程

➜  ~ frida-kill --help
+usage: frida-kill [options] process
+
+options:
+  -h, --help            show this help message and exit
+  -D ID, --device ID    connect to device with the given ID
+  -U, --usb             connect to USB device
+  -R, --remote          connect to remote frida-server
+  -H HOST, --host HOST  connect to remote frida-server on HOST
+  --certificate CERTIFICATE
+                        speak TLS with HOST, expecting CERTIFICATE
+  --origin ORIGIN       connect to remote server with “Origin” header set to
+                        ORIGIN
+  --token TOKEN         authenticate with HOST using TOKEN
+  --keepalive-interval INTERVAL
+                        set keepalive interval in seconds, or 0 to disable
+                        (defaults to -1 to auto-select based on transport)
+  --p2p                 establish a peer-to-peer connection with target
+  --stun-server ADDRESS
+                        set STUN server ADDRESS to use with --p2p
+  --relay address,username,password,turn-{udp,tcp,tls}
+                        add relay to use with --p2p
+  -O FILE, --options-file FILE
+                        text file containing additional command line options
+  --version             show program's version number and exit
+

举个例子，杀掉 PID 为 26745 的 Twitter

frida-kill -U 26745
+frida-kill -U Twitter
+frida-kill -D d007dc58edd70caad950ff01b41ebf73cfa49fbe 26745
+frida-kill -D d007dc58edd70caad950ff01b41ebf73cfa49fbe Twitter
+

# 4、跟踪函数/方法的调用

frida-trace 用于跟踪函数或方法的调用。

➜  ~ frida-trace --help
+usage: frida-trace [options] target
+
+positional arguments:
+  args                  extra arguments and/or target
+
+options:
+  -h, --help            show this help message and exit
+  -D ID, --device ID    connect to device with the given ID
+  -U, --usb             connect to USB device
+  -R, --remote          connect to remote frida-server
+  -H HOST, --host HOST  connect to remote frida-server on HOST
+  --certificate CERTIFICATE
+                        speak TLS with HOST, expecting CERTIFICATE
+  --origin ORIGIN       connect to remote server with “Origin” header set to ORIGIN
+  --token TOKEN         authenticate with HOST using TOKEN
+  --keepalive-interval INTERVAL
+                        set keepalive interval in seconds, or 0 to disable (defaults to -1 to auto-select based
+                        on transport)
+  --p2p                 establish a peer-to-peer connection with target
+  --stun-server ADDRESS
+                        set STUN server ADDRESS to use with --p2p
+  --relay address,username,password,turn-{udp,tcp,tls}
+                        add relay to use with --p2p
+  -f TARGET, --file TARGET
+                        spawn FILE
+  -F, --attach-frontmost
+                        attach to frontmost application
+  -n NAME, --attach-name NAME
+                        attach to NAME
+  -p PID, --attach-pid PID
+                        attach to PID
+  -W PATTERN, --await PATTERN
+                        await spawn matching PATTERN
+  --stdio {inherit,pipe}
+                        stdio behavior when spawning (defaults to “inherit”)
+  --aux option          set aux option when spawning, such as “uid=(int)42” (supported types are: string, bool,
+                        int)
+  --realm {native,emulated}
+                        realm to attach in
+  --runtime {qjs,v8}    script runtime to use
+  --debug               enable the Node.js compatible script debugger
+  --squelch-crash       if enabled, will not dump crash report to console
+  -O FILE, --options-file FILE
+                        text file containing additional command line options
+  --version             show program's version number and exit
+  -I MODULE, --include-module MODULE
+                        include MODULE
+  -X MODULE, --exclude-module MODULE
+                        exclude MODULE
+  -i FUNCTION, --include FUNCTION
+                        include [MODULE!]FUNCTION
+  -x FUNCTION, --exclude FUNCTION
+                        exclude [MODULE!]FUNCTION
+  -a MODULE!OFFSET, --add MODULE!OFFSET
+                        add MODULE!OFFSET
+  -T INCLUDE_IMPORTS, --include-imports INCLUDE_IMPORTS
+                        include program's imports
+  -t MODULE, --include-module-imports MODULE
+                        include MODULE imports
+  -m OBJC_METHOD, --include-objc-method OBJC_METHOD
+                        include OBJC_METHOD
+  -M OBJC_METHOD, --exclude-objc-method OBJC_METHOD
+                        exclude OBJC_METHOD
+  -j JAVA_METHOD, --include-java-method JAVA_METHOD
+                        include JAVA_METHOD
+  -J JAVA_METHOD, --exclude-java-method JAVA_METHOD
+                        exclude JAVA_METHOD
+  -s DEBUG_SYMBOL, --include-debug-symbol DEBUG_SYMBOL
+                        include DEBUG_SYMBOL
+  -q, --quiet           do not format output messages
+  -d, --decorate        add module name to generated onEnter log statement
+  -S PATH, --init-session PATH
+                        path to JavaScript file used to initialize the session
+  -P PARAMETERS_JSON, --parameters PARAMETERS_JSON
+                        parameters as JSON, exposed as a global named 'parameters'
+  -o OUTPUT, --output OUTPUT
+                        dump messages to file
+

# 4.1 跟踪函数调用

 ➜  ~ frida-trace -U -i compress -i "recv*" -x "recvmsg*" Twitter
+Instrumenting...
+compress: Auto-generated handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libz.1.dylib/compress.js"
+recvfrom$NOCANCEL: Auto-generated handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom_NOCANCEL.js"
+recvfrom: Auto-generated handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom.js"
+recv: Auto-generated handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv.js"
+recv$NOCANCEL: Auto-generated handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv_NOCANCEL.js"
+Started tracing 5 functions. Press Ctrl+C to stop.
+

参数说明

参数 描述
-i 包含某个函数，支持模糊匹配
-x 排除某个函数，支持模糊匹配

注：进行模糊匹配时，需要使用双引号进行包裹！

上述命令的意思：跟踪名为 compress 和以 recv 开头的函数，且排除以 recvmsg 开头的函数。

当跟踪的函数被触发时，会输出以下日志：

           /* TID 0x1bb43 */
+ 36078 ms  recv$NOCANCEL()
+ 36078 ms     | recvfrom$NOCANCEL()
+ 36081 ms  recv$NOCANCEL()
+ 36081 ms     | recvfrom$NOCANCEL()
+ 36082 ms  recv$NOCANCEL()
+ 36082 ms     | recvfrom$NOCANCEL()
+ 36083 ms  recv$NOCANCEL()
+ 36083 ms     | recvfrom$NOCANCEL()
+ 36083 ms  recv$NOCANCEL()
+ 36083 ms     | recvfrom$NOCANCEL()
+

命令在执行后会在当前目录下会生成一个名为 __handlers__ 的文件夹，里面存放的是自动生成的脚本文件

.
+└── __handlers__
+    ├── libsystem_c.dylib
+    │   ├── recv.js
+    │   └── recv_NOCANCEL.js
+    ├── libsystem_kernel.dylib
+    │   ├── recvfrom.js
+    │   └── recvfrom_NOCANCEL.js
+    └── libz.1.dylib
+        └── compress.js
+

上述命令是在目标 App 打开后执行的，如果我们需要强制启动 App 来进行跟踪，可以使用 -f 应用的BundleID 参数，如：

➜  ~ frida-trace -U -i compress -i "recv*" -x "recvmsg*" -f "com.atebits.Tweetie2"
+Instrumenting...
+compress: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libz.1.dylib/compress.js"
+recvfrom$NOCANCEL: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom_NOCANCEL.js"
+recvfrom: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_kernel.dylib/recvfrom.js"
+recv: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv.js"
+recv$NOCANCEL: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/libsystem_c.dylib/recv_NOCANCEL.js"
+Started tracing 5 functions. Press Ctrl+C to stop.
+

注：frida-trace 执行时不会覆盖已有的脚本文件（即 __handlers__ 文件夹下的脚本），所以可以进行任意修改这些 JS 文件来添加想要的功能。

# 4.2 跟踪 OC 方法的调用

➜  Test frida-trace -U -m "-[T1HomeTimelineItemsViewController _load*]" -M "-[T1HomeTimelineItemsViewController _loadBottomWithSource:]" Twitter
+Instrumenting...
+-[T1HomeTimelineItemsViewController _loadTopWithSource:]: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/T1HomeTimelineItemsViewController/_loadTopWithSource_.js"
+-[T1HomeTimelineItemsViewController _loadGap:withSource:]: Loaded handler at "/Users/lxf/Desktop/LXF/reverse/Test/__handlers__/T1HomeTimelineItemsViewController/_loadGap_withSource_.js"
+Started tracing 2 functions. Press Ctrl+C to stop.
+           /* TID 0x303 */
+ 15600 ms  -[T1HomeTimelineItemsViewController _loadTopWithSource:0xc8]
+

参数说明

参数 描述
-m 包含某个方法，支持模糊匹配
-M 排除某个方法，支持模糊匹配

# 4.3 跟踪调用栈

只需要在 JS 文件中添加如下代码片段即可跟踪某个方法的调用栈

console.log('\tBacktrace:\n\t' + Thread.backtrace(this.context, Backtracer.ACCURATE).map(DebugSymbol.fromAddress).join('\n\t'));
+

想了解详细的接口说明可以在 Frida 官网链接：https://frida.re/docs/javascript-api/#thread (opens new window) 上找到。

# 5、交互模式

frida 提供了两种进入交互模式的方式

# 5.1 通过应用名或 PID 附加

应用于 App 已打开的情况下附加的情景

frida -U 应用名
+frida -U -p PID
+

当使用 PID 进行附加时，-p 可加可不加

举例：

frida -U Twitter
+frida -U 26984
+frida -U -p 26984
+

# 5.2 启动应用进入交互模式

应用于 App 未打开的情景

➜  Test frida -U -f com.atebits.Tweetie2
+     ____
+    / _  |   Frida 15.1.17 - A world-class dynamic instrumentation toolkit
+   | (_| |
+    > _  |   Commands:
+   /_/ |_|       help      -> Displays the help system
+   . . . .       object?   -> Display information about 'object'
+   . . . .       exit/quit -> Exit
+   . . . .
+   . . . .   More info at https://frida.re/docs/home/
+   . . . .
+   . . . .   Connected to iPad (id=d007dc58edd70caad950ff01b41ebf73cfa49fbe)
+Spawned `com.atebits.Tweetie2`. Use %resume to let the main thread start executing!
+[iPad::com.atebits.Tweetie2 ]-> %resume
+

注：需要自己额外再输入 %resume，否则目标应用将一直处于暂停的状态。

如果启动应用后被强制退出或不想再额外输入 %resume，可以加上 --no-pause

frida -U -f com.atebits.Tweetie2 --no-pause
+

# 四、实战

针对上图中的【翻译推文】，我们来把这个标题和点击事件给修改掉

首先我们要做的就是视图组件定位，在这个页面下，使用 FLEX 工具便可轻松定位到

点击右侧的感叹号，可以看到该视图的属性和方法

然后通过如下代码，确认其是否为我们想要 hook 的方法

if (ObjC.available) {
+    var didTap = ObjC.classes.T1TranslateButton['- _didTap:forEvent:']
+    var setTitle = ObjC.classes.T1TranslateButton['- setTitleText:']
+    Interceptor.attach(setTitleOldImp, {
+      onEnter: function(args) {
+        console.log("args 0 -- ", ObjC.Object(args[0]))
+        console.log("args 2 -- ", ObjC.Object(args[2]))
+      }
+    })
+    didTap.implementation = ObjC.implement(setTitle, function(handle, selector, arg1, arg2) {
+
+      var self = ObjC.Object(handle)
+      console.log("self -- ", self) 
+    })
+}
+

打开 Twitter 后，执行如下命令 frida -U -l Twitter.js Twitter

➜ frida -U -l Twitter.js Twitter
+     ____
+    / _  |   Frida 15.1.17 - A world-class dynamic instrumentation toolkit
+   | (_| |
+    > _  |   Commands:
+   /_/ |_|       help      -> Displays the help system
+   . . . .       object?   -> Display information about 'object'
+   . . . .       exit/quit -> Exit
+   . . . .
+   . . . .   More info at https://frida.re/docs/home/
+   . . . .
+   . . . .   Connected to iPad (id=d007dc58edd70caad950ff01b41ebf73cfa49fbe)
+[iPad::Twitter ]->
+

Twitter 进入到指定页面后输出：

args 0 --  <T1TranslateButton: 0x122e46f80; baseClass = UIButton; frame = (0 0; 66 22); opaque = NO; layer = <CALayer: 0x28372a760>>
+args 2 --  翻译推文
+

点一下【翻译推文】按钮输出：

[iPad::Twitter ]-> self --  <T1TranslateButton: 0x122e46f80; baseClass = UIButton; frame = (0 0; 66 22); opaque = NO; layer = <CALayer: 0x28372a760>>
+

看来是没错了，那接下来，我们把标题和点击事件进行修改，完整代码如下：

if (ObjC.available) {
+    const { NSString } = ObjC.classes;
+    var UIAlertController = ObjC.classes.UIAlertController;
+    var UIAlertAction = ObjC.classes.UIAlertAction;
+    var UIApplication = ObjC.classes.UIApplication;
+
+    // 弹窗
+    function showAlert() {
+      var alertHandler = new ObjC.Block({ retType: 'void', argTypes: ['object'], implementation: function () {} });
+    
+      ObjC.schedule(ObjC.mainQueue, function () {
+        var alert = UIAlertController.alertControllerWithTitle_message_preferredStyle_('LinXunFeng', '欢迎关注公众号：FSA全栈行动\n博客：https://fullstackaction.com', 1);
+        var defaultAction = UIAlertAction.actionWithTitle_style_handler_('OK', 0, alertHandler);
+        alert.addAction_(defaultAction);
+        UIApplication.sharedApplication().keyWindow().rootViewController().presentViewController_animated_completion_(alert, true, NULL);
+      })
+    }
+
+    // 播放系统声音
+    function playSystemSound() {
+      var playSound = new NativeFunction(Module.findExportByName('AudioToolbox', 'AudioServicesPlaySystemSound'), 'void', ['int'])
+      playSound(1111)
+    }
+
+    var didTap = ObjC.classes.T1TranslateButton['- _didTap:forEvent:']
+    var setTitle = ObjC.classes.T1TranslateButton['- setTitleText:']
+    
+    // 保留旧实现
+    var didTapOldImp = didTap.implementation
+
+    // hook
+    Interceptor.attach(setTitleOldImp, {
+      onEnter: function(args) {
+        args[2] = ptr(NSString.stringWithString_("Hello LinXunFeng，点击我来弹个窗和听个曲吧"))
+      }
+    })
+
+    // 覆盖实现
+    didTap.implementation = ObjC.implement(setTitle, function(handle, selector, arg1, arg2) {
+      // 调用旧实现
+      // didTapOldImp(handle, selector, arg1, arg2)
+      
+      playSystemSound()
+      showAlert()
+    })
+}
+

# 五、进阶

# 1、Python 交互

Frida 提供了 Python 和 JS 脚本的交互

# 1.1、获取设备

import frida
+
+if __name__ == '__main__':
+
+    deviceManager = frida.get_device_manager()
+
+    # 枚举所有连接的设备
+    print(deviceManager.enumerate_devices())
+
+    # 根据 UDID 获取设备
+    print(deviceManager.get_device("d007dc58edd70caad950ff01b41ebf73cfa49fbe"))
+
+    # 获取当前 USB 连接的设备
+    print(frida.get_usb_device())
+

运行结果：

[Device(id="local", name="Local System", type='local'), Device(id="socket", name="Local Socket", type='remote'), Device(id="d007dc58edd70caad950ff01b41ebf73cfa49fbe", name="iPad", type='usb')]
+Device(id="d007dc58edd70caad950ff01b41ebf73cfa49fbe", name="iPad", type='usb')
+Device(id="d007dc58edd70caad950ff01b41ebf73cfa49fbe", name="iPad", type='usb')
+

# 1.2、附加进程

使用 attach() 附加进程，得到 Session 实例

if __name__ == '__main__':
+    device = frida.get_usb_device()
+    session = device.attach("Twitter")  # 进程名
+    # session = device.attach(27489)  # PID
+    print(session)
+

输出内容：

Session(pid=27489)
+

# 1.3、启动进程

使用 spawn 可以启动进程，不过会进入挂起状态，需要配合 resume() 方法才能唤醒

if __name__ == '__main__':
+    device = frida.get_usb_device()
+    pid = device.spawn("com.atebits.Tweetie2")
+    # session = device.attach(pid)
+    device.resume(pid)
+

spawn 可携带参数运行

如下方代码所示，运行 Safari 并打开 FSA全栈行动 博客： https://fullstackaction.com

pid = device.spawn("com.apple.mobilesafari", url="https://fullstackaction.com/")
+device.resume(pid)
+

# 1.4、脱离进程

得到 Session 并完成所有操作后，需要使用 detach() 脱离进程

if __name__ == '__main__':
+    device = frida.get_usb_device()
+    pid = device.spawn("com.atebits.Tweetie2")
+    session = device.attach(pid)
+    device.resume(pid)
+
+    session.detach()  # 脱离进程
+

# 1.5、注入 JS 脚本

得到 Session 实例后，就可以调用其 create_script 方法创建一个脚本对象，再调用该脚本对象的 load 方法进行脚本注入

if __name__ == '__main__':
+    device = frida.get_usb_device()
+    pid = device.spawn("com.atebits.Tweetie2")
+    session = device.attach(pid)
+    device.resume(pid)
+
+    script = session.create_script("""
+    if (ObjC.available) {
+        var NSHomeDirectory = new NativeFunction(ptr(Module.findExportByName("Foundation", "NSHomeDirectory")), 'pointer', []);
+        var path = new ObjC.Object(NSHomeDirectory());
+        console.log(path);
+    }
+    """)
+    script.load()
+    session.detach()
+

JS 脚本可以保存到本地文件中再进行读取：

with codecs.open('./xxx.js', 'r', 'utf-8') as f:
+    source = f.read()
+script = session.create_script(source)
+

# 1.6、Python 与 JS 交互

向 JS 端传递参数，JS 端处理完成后将结果返回给 Python 端，这种场景还是很常见的，那应该怎么做呢？

示例代码如下：

import frida
+import threading
+
+g_event = threading.Event()  # 同步
+
+
+def payload_message(payload):
+    # print("payload_message -- ", payload)
+    if "msg" in payload:
+        print(payload["msg"])
+
+    if 'status' in payload:
+        if payload['status'] == 'success':
+            g_event.set()
+
+
+def on_message(message, data):
+    # print("on_message message -- ", message)
+    if message['type'] == 'send':
+        payload_message(message['payload'])
+    elif message['type'] == 'error':
+        print(message['stack'])
+
+
+SCRIPT_JS = ("""
+    function handleMessage(message) {
+        var cmd = message['cmd'] 
+        if (cmd == 'GetDirectory') {
+            var name = message['name']
+            var path;
+            switch (name) {
+            case 'home':
+                var NSHomeDirectory = new NativeFunction(ptr(Module.findExportByName("Foundation", "NSHomeDirectory")), 'pointer', []);
+                path = new ObjC.Object(NSHomeDirectory());
+                break;
+            case 'tmp':
+                var NSTemporaryDirectory = new NativeFunction(ptr(Module.findExportByName("Foundation", "NSTemporaryDirectory")), 'pointer', []);
+                path = new ObjC.Object(NSTemporaryDirectory());
+                break;
+            default:
+                path = "写的啥呀"
+            }
+            if (path) send({msg: path.toString()});
+        }   
+        send({status: 'success'});
+    }
+    recv(handleMessage);
+""")
+
+# 根据名字获取对应的沙盒路径
+def getDirectory(target_process, name):
+    device = frida.get_usb_device()
+    session = device.attach(target_process)
+    script = session.create_script(SCRIPT_JS)
+    script.on('message', on_message)
+    script.load()
+    script.post({'cmd': 'GetDirectory', 'name': name})
+    g_event.wait()
+    session.detach()
+
+
+if __name__ == '__main__':
+    # getDirectory('Twitter', 'home')
+    getDirectory('Twitter', 'tmp')
+
  1. g_event 是为了保证同步
  2. JS 端可以设置 recv() 的回调接收 Python 端的消息
  3. Python 端通过 script.on() 设置回调，再使用 script.post() 将参数传递给 JS 端，然后调用 g_event.wait() 进入等待状态
  4. JS 端内部处理完成后，使用 send() 将 {status: 'success'} 传递给 Python 端
  5. 在 on_message 回调中取到 JS 端返回的数据，当识别到 status 为 success 后，调用 g_event.set() 使主线程继续执行

# 2、拦截某个类的所有方法

如果想对某个类的所有方法进行批量拦截，可以使用 ApiResolver 接口，它可以根据正则表达式获取符合条件的所有方法

var resolver = new ApiResolver('objc')
+resolver.enumerateMatches('*[T1TranslateButton *]', {
+    onMatch: function (match) {
+        console.log(match['name'] + ":" + match['address'])
+    },
+    onComplete: function () {}
+})
+

输出结果：

+[T1TranslateButton tfn_defaultShouldFlipForRightToLeftTransform]:0x101be4014
++[T1TranslateButton button]:0x101be2774
+-[T1TranslateButton tapActionBlock]:0x101be4280
+-[T1TranslateButton setTapActionBlock:]:0x101be4290
+-[T1TranslateButton translationSource]:0x101be4250
+-[T1TranslateButton setLogoTapActionBlock:]:0x101be42ac
+-[T1TranslateButton setShowingTranslation:]:0x101be2c10
+-[T1TranslateButton setOriginalLanguage:]:0x101be2b58
+-[T1TranslateButton setTranslationSource:]:0x101be2cec
+-[T1TranslateButton _didTap:forEvent:]:0x101be296c
+-[T1TranslateButton _t1_didHover:]:0x101be4140
+-[T1TranslateButton setSelectionPadding:]:0x101be42d8
+-[T1TranslateButton touchRect]:0x101be42f8
+-[T1TranslateButton _t1_isTouchingLogo:]:0x101be2a8c
+-[T1TranslateButton touchLogoRect]:0x101be4328
+-[T1TranslateButton _t1_buttonTitle]:0x101be2f28
+-[T1TranslateButton autoTranslationExpanded]:0x101be4270
+-[T1TranslateButton _t1_imageHeightOffsetForLogo:]:0x101be3164
+-[T1TranslateButton _t1_titleRectWithTitleString:origin:]:0x101be32b8
+-[T1TranslateButton _t1_imageRectWithOrigin:]:0x101be3394
+-[T1TranslateButton _t1_drawRectFor:]:0x101be3f94
+-[T1TranslateButton setTouchRect:]:0x101be4310
+-[T1TranslateButton _t1_drawHighlightWithContext:andRect:]:0x101be401c
+-[T1TranslateButton setTouchLogoRect:]:0x101be4340
+-[T1TranslateButton setAutoTranslationExpanded:]:0x101be2cc4
+-[T1TranslateButton originalLanguage]:0x101be4240
+-[T1TranslateButton showingTranslation]:0x101be4260
+-[T1TranslateButton logoTapActionBlock]:0x101be429c
+-[T1TranslateButton selectionPadding]:0x101be42c8
+-[T1TranslateButton _dynamicColorsDidReload:]:0x101be3ed0
+-[T1TranslateButton titleText]:0x101be42b8
+-[T1TranslateButton _titleColor]:0x101be2ea8
+-[T1TranslateButton logoImage]:0x101be42e8
+-[T1TranslateButton _logoImage]:0x101be2d14
+-[T1TranslateButton dealloc]:0x101be28e4
+-[T1TranslateButton .cxx_destruct]:0x101be4358
+-[T1TranslateButton initWithFrame:]:0x101be27dc
+-[T1TranslateButton sizeThatFits:]:0x101be3408
+-[T1TranslateButton setHighlighted:]:0x101be2b08
+-[T1TranslateButton drawRect:]:0x101be3798
+-[T1TranslateButton setTitleText:]:0x101be2c38
+

# 3、替换原方法

Interceptor.attach() 可以在拦截目标后，打印参数，修改返回值，但无法阻止原方法的执行

我们可以给原方法的 implementation 进行赋值，从而覆盖其实现

var didTap = ObjC.classes.T1TranslateButton['- _didTap:forEvent:']
+
+var didTapOldImp = didTap.implementation
+
+// 覆盖实现
+didTap.implementation = ObjC.implement(setTitle, function(handle, selector, arg1, arg2) {
+
+  var self = ObjC.Object(handle)
+  console.log("self -- ", self) 
+
+  // 调用旧实现
+  // didTapOldImp(handle, selector, arg1, arg2)
+})
+

这里需要注意的是，像 _didTap:forEvent: 这里需要传递两个参数，则 ObjC.implement 的回调中也需要写明两个参数（arg1、arg2），即需要多少参数就写多少，没有则不用写

# 4、RPC 调用

RPC：即 Remote Procedure Call，远程过程调用，开发人员可以将封装好的任意函数指定为 RPC 函数，以提供给 Python 使用。

利用 rpc.exports = {} 导出 RPC 函数，多个函数以逗号分隔，注意：方法名需要全小写！

function getHomeDirectory() {
+    var NSHomeDirectory = new NativeFunction(ptr(Module.findExportByName("Foundation", "NSHomeDirectory")), 'pointer', [])
+    var path = new ObjC.Object(NSHomeDirectory());
+    return path.toString()
+}
+
+function openUrl(url) {
+    var UIApplication = ObjC.classes.UIApplication.sharedApplication()
+    var toOpen = ObjC.classes.NSURL.URLWithString_(url)
+    return UIApplication.openURL_(toOpen)
+}
+
+function playSystemSound() {
+    var playSound = new NativeFunction(Module.findExportByName('AudioToolbox', 'AudioServicesPlaySystemSound'), 'void', ['int'])
+    playSound(1111)
+}
+
+// 导出 RPC 函数
+rpc.exports = {
+    openurl: function (url) {
+        openUrl(url)
+    },
+    sound: function () {
+        playSystemSound()
+    },
+    alert: function () {
+        showAlert()
+    },
+    homedirectory: function () { // homedirectory 必须小写
+        return getHomeDirectory()
+    }
+}
+

Python 端使用 rpc.js

import codecs
+import frida
+
+if __name__ == '__main__':
+    device = frida.get_usb_device()
+    session = device.attach('Twitter')
+
+    # 读取 JS 脚本 
+    with codecs.open('./rpc.js', 'r', 'utf-8') as f:
+        source = f.read()
+
+    script = session.create_script(source)
+    script.load()
+
+    rpc = script.exports
+    rpc.openurl("https://fullstackaction.com")
+    rpc.sound()
+    print(rpc.homeDirectory())
+    # print(rpc)
+
+    session.detach()
+

# 六、最后

以上代码已经上传至：https://github.com/LinXunFeng/frida_study (opens new window)

Frida 提供的 API 接口十分丰富，这里只提到了常用的内容，更多内容还是需要我们一起去阅读官方文档：https://frida.re/docs/javascript-api (opens new window)

除此之外，https://codeshare.frida.re (opens new window) 上提供很多共享脚本，大家可以用来学习和引入使用

+ +
+
#iOS#逆向
iOS逆向 - 运行时分析（二）Cycript
Dart - 抽象类的实例化

+ ← + Dart - 抽象类的实例化→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/fc879e/index.html b/pages/fc879e/index.html new file mode 100644 index 000000000..47f5a89a6 --- /dev/null +++ b/pages/fc879e/index.html @@ -0,0 +1,246 @@ + + + + + + DesignPattern - 装饰器模式【结构型】 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
FullStackAction
2021-08-18
目录

DesignPattern - 装饰器模式【结构型】

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、装饰器模式介绍

装饰器模式（Decorator Pattern）也叫包装设计模式，属于结构型模式，它是作为现在的类的一个包装，允许向一个现有的对象添加新的功能，同时又不改变其结构。

给对象增加功能，一般两种方式 继承 和 关联组合 。装饰器模式使用的是关联组合，将一个类的对象嵌入另一个对象中，由另一个对象来决定是否调用对象的行为来增强功能，比使用继承更加灵活。

  • 核心组成

    • 抽象组件（Component）：定义组件的方法
    • 具体组件（ConcreteComponent）：Component 的具体实现，是要装饰的具体对象，即被装饰者
    • 抽象装饰器（Decorator）：定义具体装饰者的行为规范，和 Component 角色有相同的接口，持有组件(Component) 对象的实例引用
    • 具体装饰器（ConcreteDecorator）：负责给 Component 对象装饰具体的附加功能

    注意：装饰者和被装饰者有相同的超类(Component)

  • 应用场景

    • 以动态、透明的方式给单个对象添加职责，但又能不改变其结构
    • JDK 源码里应用的最多的就是 IO 流，大量使用装饰设计模式（InputStream、BufferedInputStream...）

  • 优点

    • 装饰器模式与继承关系的目的都是扩展对象的功能，但装饰器模式可以提供比继承更多的灵活性
    • 使用不同的具体装饰器以及这些装饰类的排列组合，可以创造出很多不同行为的组合，原有代码无须改变，符合”开闭原则“

  • 缺点

    • 装饰器模式增加了许多子类，如果过度使用会使程序变得很复杂（多层包装）
    • 增加系统的复杂度，加大学习与理解的难度

# 二、装饰器模式代码实现

创建抽象组件类：

/**
+ * 抽象组件：枪
+ *
+ * @author GitLqr
+ */
+public abstract class Gun {
+	String name;
+
+	public Gun(String name) {
+		super();
+		this.name = name;
+	}
+
+	/**
+	 * 攻击力
+	 */
+	public abstract float attack();
+
+	/**
+	 * 后坐力
+	 */
+	public abstract float recoil();
+
+	@Override
+	public String toString() {
+		return name + "的攻击力为： " + attack() + " , 后坐力为：" + recoil();
+	}
+}
+

创建具体组件类：

/**
+ * 具体组件：UMP9
+ *
+ * @author GitLqr
+ */
+public class Ump9Gun extends Gun {
+
+	public Ump9Gun() {
+		super("UMP9");
+	}
+
+	@Override
+	public float attack() {
+		return 100;
+	}
+
+	@Override
+	public float recoil() {
+		return 20;
+	}
+}
+

创建抽象装饰器类：

/**
+ * 抽象装饰器：配件
+ *
+ * @author GitLqr
+ */
+public abstract class Part extends Gun {
+
+	// 持有组件引用(注意：这个组件可能是已经被装饰过的)
+	Gun gun;
+
+	public Part(String name, Gun gun) {
+		super(name);
+		this.gun = gun;
+	}
+
+	@Override
+	public String toString() {
+		return "装配【" + name + "】，攻击力为： " + attack() + " , 后坐力为：" + recoil();
+	}
+}
+

创建具体装饰器类：

/**
+ * 具体装饰器：消声器
+ *
+ * @author GitLqr
+ */
+public class MufflerPart extends Part {
+
+	public MufflerPart(Gun gun) {
+		super("消声器", gun);
+	}
+
+	@Override
+	public float attack() {
+		return gun.attack() - 5;
+	}
+
+	@Override
+	public float recoil() {
+		return gun.recoil() + 5;
+	}
+}
+/**
+ * 具体装饰器：火焰子弹
+ *
+ * @author GitLqr
+ */
+public class FireBulletPart extends Part {
+
+	public FireBulletPart(Gun gun) {
+		super("火焰子弹", gun);
+	}
+
+	@Override
+	public float attack() {
+		return gun.attack() + 30;
+	}
+
+	@Override
+	public float recoil() {
+		return gun.recoil() + 5;
+	}
+}
+

使用：

public static void main(String[] args) {
+    Gun gun = new Ump9Gun();
+    System.out.println(gun); // UMP9的攻击力为： 100.0 , 后坐力为：20.0
+
+    gun = new MufflerPart(gun);
+    System.out.println(gun); // 装配【消声器】，攻击力为： 95.0 , 后坐力为：25.0
+
+    gun = new FireBulletPart(gun);
+    System.out.println(gun); // 装配【火焰子弹】，攻击力为： 125.0 , 后坐力为：30.0
+
+    // Gun gun = new FireBulletPart(new MufflerPart(new Ump9Gun()));
+}
+

# 三、装饰器模式在 JDK 源码 IO 流中的应用

  • 抽象组件：InputStream
  • 具体组件：FileInputStream、ByteArrayInputStream
  • 抽象装饰器：FilterInputStream
  • 具体装饰器：BufferedInputStream、DataInputStream

抽象组件 InputStream 定义了 read() 方法：

public abstract class InputStream implements Closeable {
+    ...
+    public abstract int read() throws IOException;
+}
+

具体组件 FileInputStream 实现了 read() 方法：

public class FileInputStream extends InputStream {
+    ...
+    public int read() throws IOException {
+        return read0();
+    }
+
+    private native int read0() throws IOException;
+}
+

抽象装饰器 FilterInputStream 继承自抽象组件 InputStream，持有组件对象实例引用：

public class FilterInputStream extends InputStream {
+    /**
+     * The input stream to be filtered.
+     */
+    protected volatile InputStream in;
+    ...
+}
+

具体装饰器 BufferedInputStream 对 read() 进行增强，增加缓存功能：

public class BufferedInputStream extends FilterInputStream {
+    protected volatile byte buf[];
+    ...
+    public synchronized int read() throws IOException {
+        if (pos >= count) {
+            fill();
+            if (pos >= count)
+                return -1;
+        }
+        return getBufIfOpen()[pos++] & 0xff;
+    }
+    ...
+}
+

使用：

// 添加了Buffer缓冲功能
+InputStream inputStream = new BufferedInputStream(new FileInputStream(""));
+
+ +
+
#设计模式#装饰器模式
DesignPattern - 组合模式【结构型】
DesignPattern - 代理模式【结构型】

+ ← + DesignPattern - 代理模式【结构型】→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/fcfa28/index.html b/pages/fcfa28/index.html new file mode 100644 index 000000000..57f2c5f50 --- /dev/null +++ b/pages/fcfa28/index.html @@ -0,0 +1,223 @@ + + + + + + Kotlin - 改良设计模式 - 观察者模式 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2022-02-13
目录

Kotlin - 改良设计模式 - 观察者模式

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、前言

  • 观察者模式 +
    • 作用：定义了一个一对多的依赖关系，让一个或多个观察者对象监听一个主题对象。这样一来，当被观察者状态发生改变时，需要通知相应的观察者，使这些观察者对象能够自动更新。
    • 核心操作： +
      • 观察者（订阅者）添加或删除对 被观察者（主题）的状态监听
      • 被观察者（主题）状态改变时，将事件通知给所有观察者，观察者执行响应逻辑

# 二、使用观察者模式

  • 例子：监听股票价格变动
  • 重点：使用 Java API 或 自定义实现 观察者模式

# 1、使用 Java API 实现观察者模式

Java 标准库中提供了通用观察者模式的 API，分别是：

  • java.util.Observable：被观察者（主题） +
    • setChanged()：标记状态更新
    • addObserver()：添加观察者
    • deleteObserver()：删除观察者
    • countObservers()：获取观察者数量
    • notifyObservers()：通知所有观察者
    • notifyObservers(Object arg)：通知所有观察者（携带参数 arg）
  • java.util.Observer：观察者（订阅者）

利用 Java API，可以实现监听股票价格变动这个功能：

import java.util.Observable
+import java.util.Observer
+
+/**
+ * 被观察者（主题）
+ *
+ * @author GitLqr
+ */
+class StockSubject : Observable() {
+    fun changeStockPrice(price: Int) {
+        this.setChanged() // 标识状态更新
+        this.notifyObservers(price) // 通知所有观察者当前股票价格
+    }
+}
+
+/**
+ * 观察者（订阅者）
+ *
+ * @author GitLqr
+ */
+class StockDisplay(val name: String) : Observer {
+    override fun update(o: Observable?, price: Any?) {
+        println("$name receive stock price : $price") // 注意 price 的类型是 Any?
+    }
+}
+
+// 使用
+val subject = StockSubject()
+subject.addObserver(StockDisplay("observer 1"))
+subject.addObserver(StockDisplay("observer 2"))
+subject.changeStockPrice(200)
+
+// 输出
+// observer 2 receive stock price : 200
+// observer 1 receive stock price : 200
+

注意：在主题中通过 notifyObservers() 方法通知订阅者之前，需要先调用 setChanged() 标识状态更新，才能正常通知给订阅者，这是使用 Java API 实现观察者模式时需要注意的一点。

Java 提供的 API 已经涵盖了观察者模式的完整实现，所以我们在使用的时候，只需要关注业务本身，而不用自己去做模式的具体实现，但是呢，Java 提供的 API 是一种通用实现，从上面的例子中可以注意到，StockDisplay.update(o: Observable?, price: Any?) 中的 price 参数类型是 Any? ，这就会有以下几个问题：

  • 参数判断：因为参数类型是 Any?，所以开发中不得不对 参数是否为空 以及 参数的实际类型 做判断。
  • 通知入口单一：实际业务需求会更加复杂，而 java.util.Observer 只有唯一一个通知入口 update(o: Observable?, arg: Any?)，所以我们不得不在该方法中分离响应逻辑，比如股票价格升降，这会让代码显得臃肿。

# 2、自定义实现观察者模式

虽然 Java 提供了现成的观察者模式 API，但是实际开发中，我们通常还是会自定义实现观察者模式，以便更好的控制代码结构：

/**
+ * 回调接口（解耦业务通知入口）
+ *
+ * @author GitLqr
+ */
+interface StockUpdateListener {
+    fun onRise(price: Int)
+    fun onFall(price: Int)
+}
+
+/**
+ * 被观察者（主题）
+ *
+ * @author GitLqr
+ */
+class StockSubject {
+    val listeners = mutableSetOf<StockUpdateListener>()
+    var price: Int = 0
+
+    fun subscribe(observer: StockUpdateListener) {
+        listeners.add(observer)
+    }
+
+    fun unsubscribe(observer: StockUpdateListener) {
+        listeners.remove(observer)
+    }
+
+    fun changeStockPrice(price: Int) {
+        val isRise = price > this.price
+        listeners.forEach { if (isRise) it.onRise(price) else it.onFall(price) }
+        this.price = price
+    }
+}
+
+/**
+ * 观察者（订阅者）
+ *
+ * @author GitLqr
+ */
+class StockDisplay : StockUpdateListener {
+    override fun onRise(price: Int) {
+        println("The latest stock price has rise to $price")
+    }
+
+    override fun onFall(price: Int) {
+        println("The latest stock price has fell to $price")
+    }
+}
+
+// 使用
+val subject = StockSubject()
+subject.subscribe(StockDisplay())
+subject.changeStockPrice(200) // The latest stock price has rise to 200
+

可见，自定义实现观察者模式，可以让代码结构变得更加简单直观。

# 三、改良观察者模式

  • 例子：监听股票价格变动
  • 重点：委托属性 Delegates.observable()

Kotlin 标准库引入了可被观察的委托属性，可通过 xxx by Delegates.observable() 的方式，用来监听 xxx 属性的改变，于是可以用来改良上面的自定义观察者模式：

import kotlin.properties.Delegates
+
+/**
+ * 观察者模式改良：使用委托属性监听值变化后通知
+ *
+ * @author GitLqr
+ */
+class StockSubject {
+    val listeners = mutableSetOf<StockUpdateListener>()
+
+    var price: Int by Delegates.observable(0) { prop, old, new ->
+        val isRise = new > old
+        listeners.forEach { if (isRise) it.onRise(price) else it.onFall(price) }
+    }
+
+    fun subscribe(observer: StockUpdateListener) {
+        listeners.add(observer)
+    }
+
+    fun unsubscribe(observer: StockUpdateListener) {
+        listeners.remove(observer)
+    }
+
+    // fun changeStockPrice(price: Int) { ... }
+}
+
+// 使用
+val subject = StockSubject()
+subject.subscribe(StockDisplay())
+subject.price = 250 // The latest stock price has rise to 200
+

使用 Delegates.observable() 之后，StockSubject 相比之前减少了一个 changeStockPrice() 方法。使用上，一旦对 price 属性赋值，就可以触发通知，显然，这对使用者更加友好了（直观，少记一个方法）。

# 四、补充

前面说到，Kotlin 标准库引入可被观察的委托属性，除了 Delegates.observable() 之外，还有 +Delegates.vetoable() 也很实用，当我们不希望被监控的属性被随意修改时，就可以用它来否决属性赋值：

import kotlin.properties.Delegates
+
+var value: Int by Delegates.vetoable(0) { prop, old, new ->
+    // 新值大于0时，才给属性赋值
+    new > 0
+}
+
+// 使用
+value = 1
+println(value) // 1
+value = -1
+println(value) // 1（没能赋值成功）
+
+ +
+
#设计模式#观察者模式
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 策略模式

+ ← + Kotlin - 改良设计模式 - 策略模式→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/fe4c94/index.html b/pages/fe4c94/index.html new file mode 100644 index 000000000..58628e767 --- /dev/null +++ b/pages/fe4c94/index.html @@ -0,0 +1,164 @@ + + + + + + MaterialDesign之学一波Palette | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2017-05-21
目录

MaterialDesign之学一波Palette

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

# 一、简述

Palette，直译为调色板，是v7.graphics包中提供的一个工具类，顾名思义，它可以对一张图片进行色彩分析，开发者可以通过调用Palette提供的方法获取图片中的主题色值等，这为动态获取图片色值的开发需求提供了方便。

# 二、使用

依赖

compile 'com.android.support:palette-v7:25.0.0'
+

Palette提供了2类方法，其中包括2个from()方法，4个generate()方法，但generate()方法已全部过时，这里就不介绍了，主要看from()方法。

从上图中可以看到，from()方法有两个，一个的参数是Bitmap，另一个的参数是List<Swatch>。我们常用的是from(Bitmap bitmap)，表示对一个Bitmap对象（即一张图片）进行色彩分析，而from(List<Swatch> swatches)比较少见，需要传入一个Swatch（样品）集合，表示对多个样品进行色彩分析（这里了解下就好了）。下面看下form(Bitmap bitmap)的使用：

BitmapDrawable drawable = (BitmapDrawable) mIvPic.getDrawable(); // mIvPic是设置了src的ImageView控件
+Bitmap bitmap = drawable.getBitmap();
+Palette.Builder builder = Palette.from(bitmap);
+

# 1、Palette.Builder的配置

Palette.from(bitmap)的返回值是Palette.Builder对象，可以通过Palette.Builder提供的多个方法对Palette进行一些配置，详情看代码注释：

builder.maximumColorCount(16) // 构建Palette时使用的最大颜色数，默认是16，风景图推荐取值8-16，人脸图像推荐取值24-32（值越大，花费的时间越长，可选择的色彩越多）
+        .setRegion(0, 0, bitmap.getWidth() - 1, bitmap.getHeight()) // 设置Palette颜色分析的图像区域
+        .addFilter(new Palette.Filter() { // 设置过滤器来过滤不需要的颜色（目前还不清楚怎么用，网上也找不到任何教程及代码，无从学习~）
+            @Override
+            public boolean isAllowed(int rgb, float[] hsl) {
+                return false;
+            }
+        })
+        .clearRegion() // 消除指定的图像区域
+        .clearFilters(); // 取消颜色过滤器
+

因为每次调用from()方法都是重新创建一个Palette.Builder对象，所以一次设置只对一个Palette.Builder对象有效。

# 2、Palette.Builder的颜色分析

# 1）6种色调颜色

通过调用Palette.Builder的generate()方法，就可以能图像进行颜色分析，而generate()的参数是一个Listener，这不难理解，因为对图像进行颜色分析是一个大量计算的过程，如果直接放在主线程中且图像体积较大时，分析的时间会延长，就可能造成ui线程阻塞问题，这也就是Palette.genereate()方法过时的原因。这个Listener的回调方法参数中会携带了一个Palette对象，通过该对象可以获取到图像中不同的色调颜色，下面通过代码及注释大体了解下Palette提供的获取6种色调颜色的方法：

Palette.Builder builder = Palette.from(bitmap);
+builder.generate(new Palette.PaletteAsyncListener() {
+    @Override
+    public void onGenerated(Palette palette) {
+        // 获得 暗、柔和 的色值
+        int darkMutedColor = palette.getDarkMutedColor(Color.BLACK);
+        // 获得 亮、柔和 的色值
+        int lightMutedColor = palette.getLightMutedColor(Color.BLACK);
+        // 获得 暗、鲜艳 的色值
+        int darkVibrantColor = palette.getDarkVibrantColor(Color.BLACK);
+        // 获得 亮、鲜艳 的色值
+        int lightVibrantColor = palette.getLightVibrantColor(Color.BLACK);
+        // 获得 柔和 的色值
+        int mutedColor = palette.getMutedColor(Color.BLACK);
+        // 获得 鲜艳 的色值
+        int vibrantColor = palette.getVibrantColor(Color.BLACK);
+
+        mTvDarkMutedColor.setBackgroundColor(darkMutedColor);
+        mTvLightMutedColor.setBackgroundColor(lightMutedColor);
+        mTvDarkVibrantColor.setBackgroundColor(darkVibrantColor);
+        mTvLightVibrantColor.setBackgroundColor(lightVibrantColor);
+        mTvMutedColor.setBackgroundColor(mutedColor);
+        mTvVibrantColor.setBackgroundColor(vibrantColor);
+    }
+});
+

Palette可以获取图像的6种色调颜色，分别是柔和的暗色、柔和的亮色、鲜艳的暗色、鲜艳的亮色、柔和色、鲜艳色。对应的6个方法也是比较好理解的，且都要传入一个默认颜色，当分析不出对应色调的色值时，就会使用这个默认颜色，看下效果：

可以看到，darkVibrantColor的文本控件背景色为默认色（黑色），说明darkVibrantColor（鲜艳的暗色）没有被分析出来，这是构建Palette时使用的最大颜色数设置小了（默认是16），可以通过提高Palette的最大颜色数来解决，同时这将导致分析的时间延长。

Palette.Builder builder = Palette.from(bitmap);
+builder.maximumColorCount(32);
+...
+

是吧，darkVibrantColor（鲜艳的暗色）有了，但是darkMuteColor（柔和的暗色）却变了，不要慌，这是因为Palette的最大颜色数扩大了，而在这些颜色中darkMuteColor（柔和的暗色）有了更好的“人选”，所以变了是正常的。

# 2）色调样品（Swatch）

Palette除了可以像上面简简单单的获取6个色调色值外，还可以获取某种色调的swatch（样品），每种色调对应一种swatch（样品），通过Swatch对象可以获取色调的rgb值、颜色向量、在图片中所占像素值等，还提供了比较智能化的方法，如：getBodyTextColor()和getTitleTextColor()，这两个方法返回的色值可以作为图片上文字颜色的取值。

Palette.Builder builder = Palette.from(bitmap);
+builder.generate(new Palette.PaletteAsyncListener() {
+    @Override
+    public void onGenerated(Palette palette) {
+
+        // 获取某种色调的样品（这里指柔和的暗色）
+        Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();
+        // 获取图片的整体颜色rgb混合值---主色调
+        int rgb = darkMutedSwatch.getRgb();
+        // 获取图片中间的文字颜色
+        int bodyTextColor = darkMutedSwatch.getBodyTextColor();
+        // 获取作为标题的颜色（有一定的和图片的对比度的颜色值）
+        int titleTextColor = darkMutedSwatch.getTitleTextColor();
+        // 颜色向量
+        float[] hsl = darkMutedSwatch.getHsl();
+        // 分析该颜色在图片中所占像素值
+        int population = darkMutedSwatch.getPopulation();
+
+		// 这部分是对布局中各个文本控件设置背景色，generateTransparentColor()方法对背景色进行透明化。
+        mTvBody.setBackgroundColor(generateTransparentColor(0.2f, rgb));
+        mTvBody.setTextColor(bodyTextColor);
+        mTvTitle.setBackgroundColor(generateTransparentColor(0.6f, rgb));
+        mTvTitle.setTextColor(titleTextColor);
+    }
+});
+

其中palette.getDarkMutedSwatch()是获取柔和暗色的样品，其他的5种色调有对应的方法获取对应的样品，比较简单，可以自己在代码中试试看，这里就不一一列出了。但要注意一点，得到的色调样品可能是个Null，原因跟上面获取不到色调颜色值一样，即构建Palette时使用的最大颜色数设置小了，可以将其提高，但这并不能保证一定不是Null值，所以，在工程代码中要做好Null值的判断！！！好了，看下效果吧：

getBodyTextColor()得到的色值比较适合作为在图片中间显示的文字颜色，而getTitleTextColor()得到的色值比较适合作为在图片上方或下方显示的文字颜色（一般常用这2个位置来显示标题），这样，Palette的学习就完了，如果今后有涉及到颜色过滤器的使用，到时再来续写更新这方面的知识。下面贴出generateTransparentColor()方法的代码：

private int generateTransparentColor(float percent, int rgb) {
+    int red = Color.red(rgb);
+    int green = Color.green(rgb);
+    int blue = Color.blue(rgb);
+    int alpha = Color.alpha(rgb);
+    alpha = (int) (alpha * percent);
+    return Color.argb(alpha, red, green, blue);
+}
+

# 最后附上Demo链接

https://github.com/GitLqr/MaterialDesignDemo (opens new window)

+ +
+
#MaterialDesign#Palette
MaterialDesign之SearchView全面解锁
MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习

+ ← + MaterialDesign之AppBarLayout与CollapsingToolbarLayout的学习→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/pages/feeb2d/index.html b/pages/feeb2d/index.html new file mode 100644 index 000000000..6fac2423d --- /dev/null +++ b/pages/feeb2d/index.html @@ -0,0 +1,216 @@ + + + + + + Kotlin - 面向对象之继承与实现 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
GitLqr
2021-01-27
目录

Kotlin - 面向对象之继承与实现

+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+

继承是面向对象编程的三大特性之一，在开发过程中会经常使用，继承可以让子类拥有父类的功能，也可以对父类功能进行增强修改。

面向对象编程的三大特性：封装、继承、多态

# 继承普通类

Kotlin 中默认 类、方法 都是 final 的，因此默认无法被子类继承或重写，但可通过 open 关键字来解除：

  • 父类需要 open 才可以被继承
  • 父类方法、属性需要 open 才可以被覆写
  • 覆写父类成员需要 override 关键字
open class Person() {
+    open fun walk() {
+        println("慢慢走")
+    }
+}
+
+class Doctor : Person() {
+    override fun walk() {
+        // super.walk()
+        println("快走")
+    }
+}
+

子类重写父类方法时，会使用到 override 关键字，另外，重写的方法体中可以使用 super.xxx() 来调用父类方法中原有的逻辑，当然你也可以选择完全重写(方法体中不使用 super.xxx() 即可)。Kotlin 中父类的属性与方法一样，子类要重写的话，需要使用 open 关键字修饰父类属性，解除 final：

// 重写父类属性
+open class Person(open val name: String) {
+    ...
+}
+class Doctor(override val name: String) : Person(name) {
+    ...
+}
+

当然啦，也不是所有子类都需要重写父类成员属性的，因为子类可通过 getter/setter 对父类的成员属性进行访问。这时子类仅需要将临时变量（即不使用 val 或 var 修饰的构造器参数变量）传递到父类构造器中就好了：

  • 继承类时实际上是调用了父类构造方法
// 传递构造参数
+open class Person(val name: String) {　// 使用了val，所以name是父类Person的成员属性。
+    ...
+}
+class Doctor(name: String) : Person(name) {　// 没有val，所以name仅仅只是一个临时变量。
+    ...
+}
+
+// 不想重写父亲属性就不要使用val或var修改，因为这相当于在子类中定义了一个与父类成员属性同名的属性。
+// class Doctor(val name: String) : Person(name) // IDE报错：'name' hides memeber of supertype 'Person' and needs 'override' modifier
+

# 继承(实现)抽象类(接口)

相比于普通类，抽象类与接口就比较"开放"了，因为它们本身设计出来就是为了让子类(实现类)去继承(实现)的：

  • 接口、接口方法、抽象类默认为 open
abstract class Person() {
+    open fun walk() {　// 成员方法，想被子类重写需要使用open关键字
+        println("慢慢走")
+    }
+
+    abstract fun work() // 抽象方法，默认就是open的
+}
+
+class Doctor : Person() {
+    override fun walk() {
+        println("快走")
+    }
+
+    override fun work() {　// 子类实现父类抽象方法，还是需要使用override关键字
+    }
+}
+

# 接口代理

Kotlin 不支持多继承，只能使用接口来实现多个功能，但我们又不想在类中将接口方法的实现写死，这样代码就不够灵活，因此，往往会在类的构造器参数中，将接口的实现类传进来，而在我们的类中，只需要在实现了接口方法的方法体中调用实现类的对应方法：

interface Driver {
+    fun dirve()
+}
+
+class Manager(val driver: Driver) : Driver {
+    override fun dirve() {
+        driver.dirve()
+    }
+}
+

但这种写法会显得比较罗嗦，Kotlin 提供了 接口代理 将接口方法实现直接交给代理类实现：

  • 格式: class XXX(接口实现类) : 接口 by 接口实现类
class Manager(driver: Driver): Driver by driver
+

这算不算是对 Kotlin 不支持多继承的 "曲线救国" 呢？其实 Java 也一样不支持多继承，通常会使用组合的方式来处理。

# 接口方法冲突

前面我们已经知道了接口方法是可以有默认实现的，Kotlin 可以实现多个接口，而这些接口可能拥有相同的接口方法，就比如这样：

interface Radio {
+    fun display(): String {
+        return "107.1"
+    }
+    ...
+}
+
+interface Compass {
+    fun display(): String {
+        return "东方"
+    }
+    ...
+}
+

这时有一个实现类，同时实现了上述两个接口，就会出现接口方法冲突问题：

class Phone(val type: Int) : Radio, Compass {
+    override fun display(): String {
+        return super.display() // IDE报错：Many supertypes available, please specify the one you mean in angle brackets, e.g. 'super<Foo>'
+    }
+    ...
+}
+

根据提示，这个接口方法冲突问题其实也挺好解决的，只需要在 super 后使用泛型指定父类(接口)名即可：

class Phone(val type: Int) : Radio, Compass {
+    override fun display(): String {
+        when (type) {
+            0 -> return super<Radio>.display()
+            1 -> return super<Compass>.display()
+            else -> return "不支持"
+        }
+    }
+}
+

要注意，这里的接口方法冲突，指的是 签名一致且返回值相同的冲突 ，如果签名一致但返回值类型不同，那这个问题将无解：

方法签名一致指的是方法名、参数列表相同。

interface Radio {
+    fun display(): String {
+        return "107.1"
+    }
+}
+
+interface Compass {
+    fun display(): Int {
+        return 180
+    }
+}
+
+// IDE报错：
+// Platform declaration clash: The following declarations have the same JVM signature (display()Ljava/lang/String;)
+// Platform declaration clash: The following declarations have the same JVM signature (display()I;)
+class Phone(val type: Int) : Radio, Compass {
+    override fun display(): String { // IDE报错
+    }
+
+    override fun display(): Int { // IDE报错
+    }
+}
+

但反过来，如果方法返回值相同但签名不一致，那这情况就不一样了，就相当于 2 个不一样的方法，需要分开重写，只是在使用 super.xxx() 调用接口方法时同样还是需要使用泛型来指明父接口，避免发生歧义：


+interface Radio {
+    fun display(): String {
+        return "107.1"
+    }
+}
+
+interface Compass {
+    fun display(i: Int): Int {
+        return i
+    }
+}
+
+class Phone(val type: Int) : Radio, Compass {
+    override fun display(): String {
+        return super <Radio>.display()
+    }
+
+    override fun display(i: Int): Int {
+        return super<Compass>.display(i)
+    }
+}
+
+ +
+
#abstract class#open
Kotlin - 面向对象之抽象类与接口
Kotlin - 类及成员的可见性

+ ← + Kotlin - 类及成员的可见性→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/power/index.html b/power/index.html new file mode 100644 index 000000000..4ad2e0fad --- /dev/null +++ b/power/index.html @@ -0,0 +1,89 @@ + + + + + + 内功心法 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
内功心法
设计模式、算法
目录
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
后端
更多

+ ← + 更多→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/tags/index.html b/tags/index.html new file mode 100644 index 000000000..22b555a4f --- /dev/null +++ b/tags/index.html @@ -0,0 +1,82 @@ + + + + + + 标签 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
全部标签
Dart Flutter Chat 云游戏 串流 输入法 输入框 悬浮 softinput keyboard 键盘 jitpack maven 闭源库 aar ChatGPT AIGC Midjourney 302 AI 屏幕旋转 视频 缓存 视频缓存 第三方SDK OkHttp https SSL TLS FreeGPT35 FreeGPT35-Vercel ChatGPT-Next-Web Shorebird NDK openssl AI绘画 stable-diffusion stable-diffusion-webui ControlNet 二维码 qrcode uniapp 小程序 tensorflowjs tfjs 小程序插件 文生图 text2img safetensors 系统开发 系统权限 系统签名 自动签名 system signature 混淆 java-library proguard vue2 legacy vitejs/plugin-legacy babel polyfill vite plugin variant vite-plugin-variant 多渠道 差异化 变体 科大讯飞 语音评测 性能优化 内存泄漏 setVisibility 腾讯云点播 iOS 逆向 热修复 Tinker 加固 设计模式 装饰者模式 责任链模式 迭代器模式 策略模式 观察者模式 构建者模式 工厂模式 Python Shuttle python 状态模式 插件化 RePlugin RePluginX AndroidX Swift RxSwift ReactorKit 备忘录模式 破解 IDA 命令模式 模板方法模式 享元模式 Xcode 外观模式 代理模式 装饰器模式 组合模式 桥接模式 dart 适配器模式 建造者模式 原型模式 Jsonnet 单例模式 设计原则 Fastlane Python爬虫 Scrapy Selenium jsonpath lxml requests FQ Terminal 音视频 MediaCodec 脚本 Gradle productFlavors jCenter MavenCentral ARouter LiteARouter 事件循环机制 单线程模型 Future async await isolate Docker WebView ListView GridView AndroidAutoSize 今日头条屏幕适配方案 Align Center Padding Container Flex Row Column Flexible Expanded Stack Text RaisedButton FlatButton OutlineButton FloatingActionButton NetworkImage AssetImage FadeInImage Icon IconData TextField runApp MaterialApp StatelessWidget StatefulWidget 可选参数 typedef 级联语法 命名构造函数 初始化列表 重定向构造函数 常量构造函数 工厂构造函数 setter、getter 隐式接口 mixin 混入 库别名 export extension 闭包 Closure 柯里化 Currying 偏函数 Partial tailrec let run with apply also forEach map flatMap filter reduce fold takeWhile 高阶函数 函数引用 enum class sealed class inner object 静态内部类 非静态内部类 匿名内部类 data class componentN allOpen noArg by lazy Delegates.observable Delegates.vetoable 扩展方法 扩展属性 Overloads JvmOverloads companion object JvmStatic private protected internal public abstract class open interface 具名参数 变长参数 默认参数 多返回值 Exception if-else when for while iterator operator infix lateinit getter setter Lambda Kotlin Val Var Range Array 空类型 类型转换 构造器 继承 Package Boolean Number Char String AndroidTV 机顶盒 Mac 焦点 Cocoapods Cmake makefile yuv DroidPlugin 自定义View ImageView Android Ubuntu Linux ClassLoader 虚拟机 JVM Dalvik ART dex class Git GitHub 组件化 Canvas clipPath 抗锯齿 Libgdx 圆角矩形 Bugly 注解 IoC 数据库 AOP HotFix DeXposed andfix tinker 源码分析 LinkedList Queue ArrayList Objective-C language 中英文切换 iOS项目 RecyclerView 滚动 MaterialDesign AppBarLayout CollapsingToolbarLayout TabLayout Palette SearchView ItemTouchHelper ItemDecoration LayoutInflater SwipeRefreshLayout ListPopupWindow PopupMenu LinearLayoutCompat 微信登录 notifyDataSetChanged

+ Flutter - 子部件任意位置观察滚动数据 +

LinXunFeng 2024-11-24 移动端Flutter开发 DartFlutter

+ Flutter - 危！3.24版本苹果审核被拒！ +

LinXunFeng 2024-11-13 移动端Flutter开发 DartFlutter

+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +

LinXunFeng 2024-09-21 移动端Flutter开发 DartFlutter

+ Flutter - 轻松实现PageView卡片偏移效果 +

LinXunFeng 2024-09-08 移动端Flutter开发 DartFlutter

+ Flutter - 升级到3.24后页面还会多次rebuild吗？🧐 +

LinXunFeng 2024-08-11 移动端Flutter开发 DartFlutter

+ Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻 +

LinXunFeng 2024-08-04 移动端Flutter开发 DartFlutterChat

+ Android - 云游戏本地悬浮输入框实现 +

FullStackAction 2024-07-07 移动端Android云游戏 云游戏串流输入法输入框悬浮softinputkeyboard键盘

+ Flutter - 支持观察NestedScrollView，兼容性更强 😈 +

LinXunFeng 2024-07-06 移动端Flutter开发 DartFlutter

+ Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻 +

LinXunFeng 2024-06-23 移动端Flutter开发 DartFlutterChat

+ Android - 利用 jitpack 免费发布闭源 aar +

FullStackAction 2024-06-21 移动端Android仓库 jitpackmaven闭源库aar
全部标签
Dart Flutter Chat 云游戏 串流 输入法 输入框 悬浮 softinput keyboard 键盘 jitpack maven 闭源库 aar ChatGPT AIGC Midjourney 302 AI 屏幕旋转 视频 缓存 视频缓存 第三方SDK OkHttp https SSL TLS FreeGPT35 FreeGPT35-Vercel ChatGPT-Next-Web Shorebird NDK openssl AI绘画 stable-diffusion stable-diffusion-webui ControlNet 二维码 qrcode uniapp 小程序 tensorflowjs tfjs 小程序插件 文生图 text2img safetensors 系统开发 系统权限 系统签名 自动签名 system signature 混淆 java-library proguard vue2 legacy vitejs/plugin-legacy babel polyfill vite plugin variant vite-plugin-variant 多渠道 差异化 变体 科大讯飞 语音评测 性能优化 内存泄漏 setVisibility 腾讯云点播 iOS 逆向 热修复 Tinker 加固 设计模式 装饰者模式 责任链模式 迭代器模式 策略模式 观察者模式 构建者模式 工厂模式 Python Shuttle python 状态模式 插件化 RePlugin RePluginX AndroidX Swift RxSwift ReactorKit 备忘录模式 破解 IDA 命令模式 模板方法模式 享元模式 Xcode 外观模式 代理模式 装饰器模式 组合模式 桥接模式 dart 适配器模式 建造者模式 原型模式 Jsonnet 单例模式 设计原则 Fastlane Python爬虫 Scrapy Selenium jsonpath lxml requests FQ Terminal 音视频 MediaCodec 脚本 Gradle productFlavors jCenter MavenCentral ARouter LiteARouter 事件循环机制 单线程模型 Future async await isolate Docker WebView ListView GridView AndroidAutoSize 今日头条屏幕适配方案 Align Center Padding Container Flex Row Column Flexible Expanded Stack Text RaisedButton FlatButton OutlineButton FloatingActionButton NetworkImage AssetImage FadeInImage Icon IconData TextField runApp MaterialApp StatelessWidget StatefulWidget 可选参数 typedef 级联语法 命名构造函数 初始化列表 重定向构造函数 常量构造函数 工厂构造函数 setter、getter 隐式接口 mixin 混入 库别名 export extension 闭包 Closure 柯里化 Currying 偏函数 Partial tailrec let run with apply also forEach map flatMap filter reduce fold takeWhile 高阶函数 函数引用 enum class sealed class inner object 静态内部类 非静态内部类 匿名内部类 data class componentN allOpen noArg by lazy Delegates.observable Delegates.vetoable 扩展方法 扩展属性 Overloads JvmOverloads companion object JvmStatic private protected internal public abstract class open interface 具名参数 变长参数 默认参数 多返回值 Exception if-else when for while iterator operator infix lateinit getter setter Lambda Kotlin Val Var Range Array 空类型 类型转换 构造器 继承 Package Boolean Number Char String AndroidTV 机顶盒 Mac 焦点 Cocoapods Cmake makefile yuv DroidPlugin 自定义View ImageView Android Ubuntu Linux ClassLoader 虚拟机 JVM Dalvik ART dex class Git GitHub 组件化 Canvas clipPath 抗锯齿 Libgdx 圆角矩形 Bugly 注解 IoC 数据库 AOP HotFix DeXposed andfix tinker 源码分析 LinkedList Queue ArrayList Objective-C language 中英文切换 iOS项目 RecyclerView 滚动 MaterialDesign AppBarLayout CollapsingToolbarLayout TabLayout Palette SearchView ItemTouchHelper ItemDecoration LayoutInflater SwipeRefreshLayout ListPopupWindow PopupMenu LinearLayoutCompat 微信登录 notifyDataSetChanged
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + + diff --git a/web/index.html b/web/index.html new file mode 100644 index 000000000..d2ebfdc51 --- /dev/null +++ b/web/index.html @@ -0,0 +1,103 @@ + + + + + + 前端 | FSA全栈行动 + + + + + + + + + + + + + + + +
FSA全栈行动
前端
html(5)/css(3)、Vue、React等技术
目录
# + 1. 多语言 +
1-1. 这可能是目前最方便的网站中英文切换（理论支持所有语言） +
# + 2. uniapp +
2-1. uniapp - 腾讯云点播小程序插件 + 2-2. uniapp - 接入科大讯飞语音评测 + 2-3. uniapp - tensorflowjs 之小程序环境集成 +
# + 3. vite +
3-1. vite - 多渠道差异化打包插件 +
# + 4. vue +
4-1. vue - Vue2兼容低版本浏览器 +
+ +
欢迎关注微信公众号：[FSA全栈行动 👋]
+
+ +
+
移动端
后端

+ ← + 后端→ +

最近更新
01
+ Flutter - 子部件任意位置观察滚动数据 +
11-24
02
+ Flutter - 危！3.24版本苹果审核被拒！ +
11-13
03
+ Flutter - 轻松搞定炫酷视差(Parallax)效果 +
09-21
更多文章>
+ Theme by + Vdoing + | Copyright © 2020-2024 + FSA全栈行动
×
+ + +
+ + +