基于谷歌Flutter框架媒體資訊App的設計與實現摘要：當今社會，隨著經濟和科技的發展，人們的生活節奏也愈來愈快，人們生活的閱讀時間也越來越少，越發的流行碎片化閱讀，而同樣的對于互聯網的客戶端開發者，需求的版本迭代也愈發頻繁，同一個移動端的App，起碼要發行兩個平臺，同樣也因為這不同的平臺，不同的系統，導致在尋多的業務場景中，傳統的原生開發效率已經滿足不了日益增長的業務需求，如Androi端和IOS端，一旦需求上的變更，兩個平臺上都要進行更新，重新發布版本，這對于一個公司兩個終端的開發成本都需增加許多的，這其中主要表現為：(1).動態化內容需求增大：當需求發生變化，傳統原生應用需要進行版本迭代來更新內容，但應用上架審核都是要周期的。(2).業務需求變化快，開發成本高：由于原生開發一般都要維護Android、iOS兩個開發團隊，版本迭代時，無論人力成本，還是測試成本都會變大。這樣的情況下，開發者們開發App的成本不斷上升，上架流程以及版本迭代流程的繁瑣，對此很多IT巨頭都推出了很多跨平臺的框架，如Facebook的ReactNative,阿里的WEEX，但都因為存在性能上的缺陷和難以實現復雜的操著，從而導致普及率遠沒有原生開發的普及高，而Google于2015年推出的Flutter跨平臺的框架，如今經歷了5年多的發展，Flutter自身的許多的問題也不斷在修復中，到現在可謂頗為成熟了，因此以此作為跨平臺技術的首選框架，開發此類跨平臺資訊應用，研究和學習Flutter之時，也為Flutter的軟件生態作出一點添磚加瓦，也為廣大的IT網民提供一款不受平臺系統限制的資訊應用。Flutter媒體資訊App將實現一個跨平臺的媒體資訊閱讀軟件，是廣大的互聯用戶不拘束于平臺的限制，能夠隨時隨地利用碎片化的時間，來瀏覽閱讀資訊，同時作為一個Flutter開發者可以參與學習的開源項目關鍵詞：跨平臺，資訊閱讀

DesignandImplementationofMediaInformationAppBasedonGoogleFlutterFrameworkAbstract：Intoday'ssociety,withthedevelopmentofeconomyandtechnology,people'spaceoflifeisbecomingfasterandfaster,people'sreadingtimeisbecominglessandless,andfragmentedreadingisbecomingmoreandmorepopular.ForthesameclientdevelopersoftheInternet,versioniterationsarebecomingmoreandmorefrequent.Forthesamemobileapp,atleasttwoplatformsshouldbereleased,becauseofthesedifferentplatforms,Differentsystemsleadtothefactthattraditionalnativedevelopmentefficiencycannolongermeetthegrowingbusinessrequirementsinmultiplebusinessscenarios,suchasAndroiandIOS.Oncetherequirementsarechanged,bothplatformsneedtobeupdatedandrereleased.Thiswillincreasethedevelopmentcostofbothterminalsofacompany.Themainperformanceisasfollows:(1).dynamiccontentdemandincreases:whenthedemandchanges,thetraditionalnativeapplicationneedstocarryoutversioniterationtoupdatethecontent,buttheapplicationontheshelfauditisperiodic.(2).thebusinessdemandchangesrapidly,andthedevelopmentcostishigh:becausethenativedevelopmentgenerallyneedstomaintaintwodevelopmentteams,AndroidandIOS,whentheversionisiterated,boththelaborcostandthetestcostwillincrease.Inthiscase,thecostfordeveloperstodevelopappsisrising,andtheprocessofputtingthemontheshelfandversioniterationistedious.ManyITgiantshavelaunchedmanycrossplatformframeworks,suchasFacebook'sreactnative,Alibaba'sweex,however,isfarlesspopularthanthenativedevelopmentduetoitsperformancedefectsanddifficulttoachievecomplexoperation.However,thecrossplatformframeworkofflutterlaunchedbyGooglein2015hasexperiencedmorethanfiveyearsofdevelopment.Manyproblemsofflutteritselfarealsobeingrepaired,andnowitisquitemature,soitisusedasacrossplatformThefirstchoiceframeworkoftechnologyistodevelopthiskindofcrossplatforminformationapplication.Whenresearchingandlearningflutter,italsomakesalittlecontributiontothesoftwareecologyofflutterandprovidesaninformationapplicationthatisnotlimitedbytheplatformsystemforthemajorityofitnetizens.Thefluttermediainformationappwillrealizeacrossplatformmediainformationreadingsoftware,whichisnotrestrictedbytheplatform,andenablesthevastnumberofInternetuserstousefragmentedtimetobrowseandreadinformationanytimeandanywhere.Keywords:NewsApp;Dart；

目錄TOC\o"1-3"\h\u第1章緒論 第1章緒論1.1App的開發背景及意義當今社會迅猛發展，信息的流動也越發頻繁，人們獲取信息的渠道也變多種多樣，物聯網時代的興起，移動互聯網的如日中天，不同平臺，不同系統下的App也層出不窮，同樣也因為這不同的平臺，不同的系統，導致在尋多的業務場景中，傳統的原生開發效率已經滿足不了日益增長的業務需求。在這種碎片化閱讀流行的時代，通過跨平臺框架開發一款跨平臺的媒體資訊閱讀的應用，為人們帶來更加富有內涵，更深層次的碎片化閱讀。此App的開發意義旨在在研究和開發基于的Flutter[1]的媒體資訊應用，以及Flutter開發在廣大移動端的應用，對原生開發的影響以及適用性。為什么我們要選擇跨平臺？如今的移動端已經發展非常的迅猛，同樣的，也誕生了許多的移動端的應用開發者，IOS和Android占據了整個移動市場的主流，兩個平臺系統的差異性，導致一個應用的開發需要用不同的編程語言，不同的編程生態，這對開發者乃至于企業公司來講，都需要花費更多的成本，對此有沒有存在更好的選擇呢？答案是存在的，那就是基于跨平臺技術框架的開發，何為跨平臺？是軟件開發中一個重要的概念，即不依賴于操作系統，也不信賴硬件環境。一個操作系統下開發的應用，放到另一個操作系統下依然可以運行。Flutter是什么？Flutter是一款移動應用程序SDK[2]，一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序。Flutter目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程序。我們兼容滾動行為、排版、圖標等方面的差異。為什么要使用Flutter?提高開發效率同一份代碼開發iOS和Android用更少的代碼做更多的事情輕松迭代在應用程序運行時更改代碼并重新加載（通過熱重載）修復崩潰并繼續從應用程序停止的地方進行調試創建美觀，高度定制的用戶體驗受益于使用Flutter框架提供的豐富的MaterialDesig[3]和Cupertino[]（iOS風格）的widget實現定制、美觀、品牌驅動的設計，而不受原生控件的限制基于跨平臺Flutter框架開發的媒體資訊應用有如下意義：研究和進一步推廣Flutter應用的開發給廣大網民提供一個不受系統差異影響的媒體資訊應用為如今正稀缺的Flutter應用生態做出貢獻。1.2國內外研究現狀目前Flutter作為一種新興的跨平臺的技術框架，與老一輩的跨平臺技術框架相比，其通過在不同平臺實現一個統一接口的渲染引擎來繪制UI，而不依賴系統原生控件，就使得它可以做到不同平臺UI的一致性，能夠實現其他跨平臺技術框架做不到的復雜的動畫交互效果，或者復雜的前端交互。在StackOverflow2019年的全球開發者問卷調查中，Flutter被選為最受開發者歡迎的框架之一，超過了TensorFlow和Node.js。圖1.1StackOverflow2019最受歡迎框架其在Github上的熱度，star數達更是可見開發者對其前景的一片看好圖1.2flutterGIthub熱度而在Flutter中午官網上線后，Flutter中文網也很快被傳播開，百度搜索排名迅速躥升到前三，截止目前，Flutter中文官網[4]日PV在7萬左右，每日獨立訪問人數近一萬多。在中國，Flutter的開發者社區非常活躍。社區貢獻了大量高質量的技術文章，Flutter官方文檔的翻譯，還組織了許多線上線下的活動。在今年I/O前舉辦的全球FlutterCreate大賽中，來自中國廣東的胡澤標憑借一個特別精致的羅盤應用摘得了全球大獎。1.3系統的主要研究內容基于Flutter開發的媒體資訊App主要研究是開發跨平臺的媒體資訊閱讀應用，使人們不拘束任何平臺系統的限制，隨時隨地用何種系統設備都能夠用此應用來閱讀媒體資訊將會降低和利潤將會提高。用戶交互界面、網絡數據處理以及本地數據存儲是一個完整的App的基本組成部分，所以Flutter媒體資訊App的主要研究內容可以分為以下幾步：首先用戶交互界面應該如何設計好，如何讓用戶有一個UI體驗，一個APP必須要有良好的用戶交互界面，就必須遵從一定的設計，因此本App采用的是MaterialDesign，而在用戶交互界面設計上，緊接著的是媒體資訊閱讀源的爬取，這里決定的數據采集源有：網易的熱點新聞，知乎日報每天的推送，以及果殼科技的文章，以及可供考慮的ReadHub，接著的本地數據的存儲，可以用數據庫或者第三庫的SharedPreference[5]。1.4系統開發環境與開發工具8GB的win10x64操作系統。AndroidStudio被作為系統Android客戶端的開發工具，FlutterSDK的版本是1.15.3,dev,同時通過HttpCannary，Fiddler來抓取網絡數據，App采用的第三庫有以下這些：閑魚的fishrudex[6]RxdartJson序列化json_annotation事件總線event_bus網絡請求的Dio圖片緩存的Cached_network_imageliquid_pull_to_refreshgoogle_nav_bar

第2章系統需求分析2.1可行性分析2.1.1經濟可行性基于Flutter媒體資訊App的設計與實現是本人的畢業設計，從整個App的設計到開發都由本人自己完成，在開發過程設計的爬取的數據都是來自于第三方，還有一些第三方的接口，是只能每天請求固定數次的，如聚合數據和極速數據等提供的API，超過固定的請求就要進行收費，但幸好的是本App暫時只作為畢業設計的演示項目，并不打算商用，且后續打算進行開源，因而經濟上暫時還沒有太大的阻力，且很多時候爬取數據的API很多也是從官方那邊爬取，沒有過多進行付費API的請求2.1.2技術可行性該系統作為本人的畢業設計，而本人已修完所有在校課程，且已經利用業余時間不斷的學習Flutter技術框架，更有國內開源電子書《Flutter實戰》[7]的指導，且通過GoogleFlutter開設的學習項目上手演練，以算是具備一定的Flutter開發基礎，主要編程語言為Dart[8]而對于原生平臺的語言，我本身以及有過Android開發的經驗，可以保證的是能夠在解決Android平臺的上的適應性和兼容性的問題，而于IOS來說，本人并沒有IOS的開發經驗也沒有相應可供調試的設備，所以IOS端的兼容性無法保證，確定兼容的有Android端，雖然說Flutter的桌面端已經有實驗性項目，但終究還是在實驗性的階段，所以Linux，Window，Macos等桌面端有待以后在成熟時進行兼容性適配2.1.3操作可行性本App的開發的UI是基于MaterialDesign設計。簡潔明快，擬物[9]的風格，在基本元素的設計處理上，借鑒了傳統的印刷設計、字體版式、網格系統、三維空間、比例、色彩、陰影，圖像使用。在這些設計基礎上下功夫，從而能夠構建出更深層次，更富有吸引力的視覺層級、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構建出鮮明、形象的用戶界面，將使得設計的GUI將會變得更加具有吸引力，以及更好的上手操作指引。整體UI設計一看就懂，不存在困惑的操作2.2APP的總體需求Flutter媒體資訊App的設計，旨在給熱點新聞，關注全球時事熱點新聞，關注國際形勢，社會當下的熱點，以及提供精選的資訊的瀏覽，其中包括知乎日報，果殼科技，Readhub等深度資訊熱點話題平臺，這將極大的開闊的用戶的視野，極大的提升的用戶的文化知識。2.3App功能的需求分析App功能模塊圖如圖2.3。圖2.1Flutter媒體資訊App功能模塊圖2.4.1App功能分析今日要聞：爬取網易新聞官方的時事熱點，社會當下的熱點資訊，國際的社會形勢，新聞跟網易新聞同步，每時每刻以供用戶選擇自己的感興趣的時事資訊閱讀。精選聚合：此功能模塊，爬取了國內富有深度內涵的媒體雜志號的文章，以供選擇性瀏覽，更具趣味內涵的文章，此功能模塊有三個子功能模塊，分別是：知乎日報部分，正如其標題所言，每日三次，每次七分鐘，爬取供用戶瀏覽的是，知乎日報每天推送的文章，主題日報包括動漫、設計、大公司、游戲、財經、電影、電子音樂、互聯網安全等豐富內容，為業內人和資深愛好者推薦各領域最精彩文章，滿足高質量閱讀需求。果殼科技，果殼網是一個泛科技主題網站,提供負責任、有智趣、貼近生活的內容,你可以在這里閱讀、分享、交流、提問。果殼網致力于讓科技興趣成為人們文化生活和娛樂生活的重要.部分，此處為爬取果殼網幾個公眾號每日推送的消息，以供用戶閱讀瀏覽ReadHub，其每天都推送互聯網行業里發生的事情，以供讀者了解互聯網和科技在未來的走向，以及所處的變化，此處爬取readhub精選的科技資訊以供人民閱覽一刻：一刻功能功能模塊，作為用戶休閑放松瀏覽的模塊，此處的子功能如下：賞圖模塊，賞圖模塊主要抓取是必應一天推送的七張精致美圖，并且配上優雅的文字解說，令用戶欣賞美圖美景的同時，能理解其表達的內容，景色的講解一言模塊，主要為用戶提供一句話服務，不論在哪里,總有那么幾個句子能穿透你的心。把這些句子匯聚起來,傳遞更多的感動。此模塊就是為用戶所提供這樣的服務收藏模塊：主要是查看用戶收藏的資訊。2.5UML系統建模2.5.1用例圖用例模型的基本組成部分有用例、角色（或參與者）和系統。Flutter媒體資訊App用例圖所示。圖2.2Flutter媒體資訊App用例圖2.5.2用例圖規約表表2-1查看今日要聞用例規約表用例編號2-1用例名稱查看今日要聞功能描述給用戶提供當日熱點資訊，時事要聞，以供瀏覽執行者用戶前置條件網絡正常，且接口獲取數據正常后置條件熱點新聞列表正常展示用戶看到新聞資訊信息涉眾利益無基本路徑用戶進入AppApp發送網絡請求，根據熱點新聞API獲取數據獲取成功加載熱點新聞列表點擊選擇感興趣的資訊瀏覽獲取失敗下拉刷新，重新獲取資訊重新加載新聞列表點擊選擇感興趣的資訊瀏覽瀏覽新聞詳情擴展無字段列表熱點新聞：標題，描述，新聞圖片業務規則無備注無表2-2查看精選聚合用例規約表用例編號2-2用例名稱查看精選聚合功能描述精選聚合功能模塊，提供更深度，更科學的文章資訊給用戶瀏覽，此部分三個子功能模塊，分別是：知乎日報果殼趣事Readhub執行者用戶前置條件網絡正常獲取數據API接口正常后置條件正常展示三個子功能模塊信息涉眾利益無基本路徑用戶進入App點擊精選聚合模塊點擊相應子功能模塊查看知乎日報4.1詳看2-3查看知乎日報用例規約表查看果殼科技5.1詳看2-4查看果殼科技用例規約表查看Readhub資訊6.1詳看2-5查看ReadHub資訊用例規約表擴展無字段列表詳見子功能模塊用例規約表業務規則無備注無表2-3查看知乎日報用例規約表用例編號2-3用例名稱查看知乎日報功能描述提供知乎日報每天的文章推送，供用戶瀏覽執行者用戶前置條件網絡正常知乎日報每日文章API正常后置條件正常加載知乎日報每日文章涉眾利益無基本路徑用戶進入App點擊精選模塊選擇知乎日報模塊網絡發送請求，根據知乎日報API獲取數據獲取成功5.1加載知乎日報文章列表5.2點擊選擇感興趣的日報文章瀏覽獲取失敗6.1下拉刷新，重新獲取資訊6.2重新加載知乎日報文章列表6.3點擊選擇感興趣的日報文章瀏覽擴展無字段列表知乎新聞：高清圖片，小圖片，文章，文章URL，文章ID，文章閱讀時間業務規則無備注無表2-4查看果殼科技用例規約表用例編號2-4用例名稱查看果殼科技功能描述爬取果殼科技網，幾個人氣的公眾號的文章，提供給用戶閱讀瀏覽，其文章內容包含來自生活的的許多個方面，極具實用性執行者用戶前置條件網絡正常果殼公眾號API正常后置條件正常接收數據展示用戶可以正常瀏覽涉眾利益無基本路徑1.用戶進入App2.點擊精選模塊3.選擇果殼科技模塊4.網絡發送請求，根據果殼科技API獲取數據5.獲取成功5.1加載果殼科技公眾號文章列表5.2點擊選擇感興趣的文章瀏覽6.獲取失敗6.1下拉刷新，重新獲取資訊6.2重新加載果殼科技公眾號文章列表6.3點擊選擇感興趣的文章瀏覽擴展無字段列表公眾號標題2.推送的標題3.推送的圖片業務規則無備注無表2-5查看ReadHub資訊用例規約表用例編號2-5用例名稱查看ReadHub資訊功能描述提供用戶瀏覽Readhub上的科技資訊，了解每天一天發生的互聯網資訊執行者用戶前置條件網絡正常Readhubapi可用后置條件正常接收readhub資訊并展示用戶正常瀏覽到結果涉眾利益基本路徑1.用戶進入App2.點擊精選模塊3.選擇Readhub模塊4.網絡發送請求，根據ReadhubAPI獲取數據5.獲取成功5.1加載Readhub資訊列表5.2點擊選擇感興趣的資訊瀏覽6.獲取失敗6.1下拉刷新，重新獲取獲取數據6.2加載Readhub資訊列表6.3點擊選擇感興趣的資訊瀏覽擴展無字段列表資訊ID，資訊標題，資訊簡述業務規則無備注無表2-6查看一刻用例規約表用例編號2-6用例名稱查看一刻功能描述一刻功能模塊，是提供用戶休閑放松時，所觀賞的功能模塊，其分兩個子功能模塊，分別是必應的賞圖，一言執行者用戶前置條件網絡正常必應賞圖和一言API接口沒有問題后置條件正常展示子功能模塊涉眾利益無基本路徑用戶進入App點擊查看一刻模塊選擇查看必應賞圖3.1詳見必應賞圖用例選擇查看一言4.1詳見查看一言用例擴展無字段列表詳見子功能模塊業務規則無備注表2-7必應賞圖用例規約表用例編號2-7用例名稱必應賞圖功能描述提供用戶觀賞必應官網每天會更新的高質量的圖片。執行者用戶前置條件必應推圖API接口正常用戶手機網路正常后置條件App順利根據接口拿到數據用戶正常瀏覽涉眾利益無基本路徑用戶進入App選擇點擊查看一刻模塊選擇必應賞圖模塊點擊圖片觀賞擴展無字段列表圖片鏈接，文字描述業務規則無備注無表2-8查看一言用例規約表用例編號2-8用例名稱查看一言功能描述查看一言，旨在隨機提供那先美好的句子或者文章散句供用戶去思考執行者用戶前置條件一言API正常手機網絡正常后置條件App接受并展示數據涉眾利益無基本路徑1.用戶進入App2.選擇點擊查看一刻模塊3.選擇一言模塊4.瀏覽一言擴展無字段列表句子2.配圖業務規則無備注無表2-9查看收藏用例規約表用例編號2-8用例名稱查看收藏功能描述提供用戶在瀏覽資訊過程中收藏的資訊執行者用戶前置條件一言API正常手機網絡正常后置條件App接受并展示數據涉眾利益無基本路徑用戶進入App拉開側欄，點擊選擇收藏選項瀏覽收藏信息擴展無字段列表無業務規則無備注無2.6本章小結本章首先通過功能模塊圖展示了的功能需求，接下來對App各方面的可行性進行了分析；最后，為了更加直截了當向用戶展示App的功能，Flutter媒體資訊App給出了用例圖并對各個用例用表格進行簡單明了的說明。

第3章系統設計3.1App功能設計查看今日要聞：在進入App后，主界面直接顯示的模塊，以列表展示當日當時的時事熱聞，上拉刷新可以重新加載數據，每天用戶瀏覽到表尾的時候，會自動請求網絡，將下一頁的資訊列表加載進去，今日要聞的資訊采用的是FutureBuilder來初始化，采用異步構建的好處，能夠安全的加載到的數據，以免加載空數據的異常，上拉刷新使用動畫刷新庫LiquidPullToRefresh，如其標題所言“Abeautifulandcustomrefreshindicator”,這個加載庫，能夠在加載數據時，給與用戶非常舒服的過度體驗

查看精選聚合：用戶進入App，可于底部導航欄，點擊精選聚合標簽，進入精選聚合資訊模塊，此功能模塊，頂部Appbar，設計三個扁平的標簽按鈕，開區三個子功能模塊，分別是：知乎日報，日報每天推送的數量有限，不似新聞資訊模塊接受的數據這么多，因而在UI上可以設計的精致一些，通篇日報展示，采用的卡片擬物風格的進行設計，使之更具美觀果殼科技，果殼科技相較于其他資訊模塊，接受的數據容量較中等，整體UI設計偏向于一種雜志號的設計，果殼推送者名作標題，下方以文章橫幅流的形式展示Readhub資訊，Readhub上的科技資訊居多，采取類似與今日要聞的形式展示，不過較之不同，新聞文章條，增加一些簡短的描述，以便用戶快速的了解信息，迅速過濾篩選查看一刻功能模塊：此功能模塊，供用戶休閑放松時觀賞的內容，主體采用的Tabview的形式，展示信息，目前確定的子功能模塊有兩個，其他以后可以進行版本迭代擴展，子功能有必應賞圖，根據必應每天推送的圖片，其接口推送的圖片只有七張，且都為高質量的圖片，搭配文字解說，UI采用卡片堆疊的形式，采用手勢監測，用戶只需滑動手指，就可以看下下一張圖片，整體閱覽采用過度推疊，上升浮現，過度體驗相當舒服一言，一言即跟一言API接口的隨機美文妙句或者令人思考的句子，以供用戶品味，整體背景顏色或采用貝塞爾曲線的水浪浮動效果，以作一個觀賞舒服句子頁收藏模塊，用于顯示存儲用戶瀏覽資訊收藏到的資訊整體UI將于今日要聞相似，不過多了分類的標識，以表名資訊的來源方3.1.1類的關系圖圖3.1類的關系圖3.2App順序圖查看今日要聞順序圖eq\o\ac(○,1)用戶進入Appeq\o\ac(○,2)查看今日要聞eq\o\ac(○,3)根據今日要聞API,請求數據eq\o\ac(○,4)接受返回的今日要聞資訊數據eq\o\ac(○,5)初始化今日要聞界面eq\o\ac(○,6)展示給用戶圖3.2查看今日要聞順序圖查看知乎日報順序圖eq\o\ac(○,1)用戶進入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看知乎日報頁面eq\o\ac(○,4)根據知乎日報API請求數據eq\o\ac(○,5)接受處理返回的知乎日報主題文章數據eq\o\ac(○,6)初始化知乎日報頁面eq\o\ac(○,7)展示給用戶圖3.3查看知乎日報順序圖查看果殼科技順序圖eq\o\ac(○,1)用戶進入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看果殼趣事頁面eq\o\ac(○,4)根據果殼趣事API,請求數據eq\o\ac(○,5)接受處理返回的果殼趣事文章數據eq\o\ac(○,6)初始化果殼趣事頁面eq\o\ac(○,7)展示給用戶圖3.4查看果殼趣事順序圖查看Readhub資訊圖eq\o\ac(○,1)用戶進入App；eq\o\ac(○,2)查看精選聚合頁面eq\o\ac(○,3)查看ReadHub頁面eq\o\ac(○,4)App根據ReadHubAPI,請求數據eq\o\ac(○,5)接受處理返回的ReadHub資訊數據eq\o\ac(○,6)初始化ReadHub頁面eq\o\ac(○,7)展示給用戶圖3.5查看Readhub圖查看必應美圖順序圖eq\o\ac(○,1)進入App；eq\o\ac(○,2)查看一刻頁面eq\o\ac(○,3)查看必應美圖頁面eq\o\ac(○,4)根據必應圖片API,請求數據eq\o\ac(○,5)接受處理返回必應美圖圖片數據eq\o\ac(○,6)初始化必應美圖頁面eq\o\ac(○,7)展示給用戶圖3.6查看必應美圖順序圖查看一言順序圖eq\o\ac(○,1)用戶進入App；eq\o\ac(○,2)查看一刻頁面eq\o\ac(○,3)查看一言頁面eq\o\ac(○,4)根據一言API,請求數據eq\o\ac(○,5)接受處理返回的一言數據eq\o\ac(○,6)初始化一言頁面eq\o\ac(○,7)展示給用戶圖3.7查看一言順序圖查看收藏圖eq\o\ac(○,1)用戶進入App；eq\o\ac(○,2)查看抽屜頁eq\o\ac(○,3)查看收藏eq\o\ac(○,4)展示給用戶。圖3.8查看收藏順序圖3.3App活動圖用戶進入App后，選擇點擊在底部的導航欄的三個tab，訪問用戶想訪問的功能的模塊，要聞tab訪問也即是用戶進入App即可看到的今日要聞頁。聚合tab訪問的是精選聚合模塊，其有三個子活動模塊，分別是知乎日報，果殼科技，readhub資訊，一刻tab可供范問，休閑的文字圖片區域，其有兩個子功能模塊，分別是必應賞圖和一刻。圖3.9App用戶活動圖3.4DAO類設計APP在網絡請求的時候，處理服務器發送過來得數據時，必須有能夠與之可以能夠相轉換得數據類型，把服務器得返回得數據交換格式，如XML和JSON，然后將其映射至我們對應得處理數據擦操作的Dao類，以下在處理獲取網絡數據時所設計使用得Dao類，因為在App爬取得資訊來自各個不同得網站，因此設計不同得Dao類今日要聞API請求返回如下，映射至3-1ResultDataNew類屬性：ResultDataNew類用來裝載請求網易熱門新聞API返回的json的數據的轉換，code指示HTTP的狀態碼，其中200表示服務器已成功的處理了請求，相對的500表示網絡錯誤，message是對當前網絡狀態的描述，result里包含著返回的信息內容，也是客戶端展示的數據源。表3-1ResultDataNew類屬性屬性名數據類型是否為空描述codeintNotnull網絡狀態messageStringNotnull網絡描述resultList<News>Notnull新聞集合New類作為頁面新聞數據的容器，今日要聞的每一個子新聞的數據的容器，path表示新聞詳情內容的url，image指代新聞的展示圖片的鏈接地址，title表示新聞的標題，passtime指新聞在網站發布的時間。表3-2News類屬性屬性名數據類型是否為空描述pathStringNotnull新聞詳情地址imageStringNotnull新聞圖片titleStringNotnull新聞標題passtimeStringNotnull新聞發布時間知乎日報API請求返回如下，映射至3-3ResultZhihu類屬性：ResultZhihu是作為請求知乎今日日報API返回的json數據的容器，Date是服務器處理請求返回的日期，知乎日報的當日包的內容發布的日期，也是請求知乎日報每日內容的一個參數，根據日期請求每日日報的主題文章，stories表明當日文章的內容的集合。表3-3ResultZhihu類屬性屬性名數據類型是否為空描述dateintNotnull今日日期storiesList<ZhihuDay>Notnull日報主題集合ZhihuDay在這里我是作為表示知乎日報里的每一個文章主題的內容，image_hue表示的是其文章的高清圖片，其中返回還有的標清和超清圖片，但這邊是移動端，考慮了一下用戶的體驗，折中的攫取了image_hue,title指代文章標題，url是文章內容詳情的鏈接，hint本應指代標簽或是提示，但返回的數據中，多為null，故沒有選擇作為頁面展示上的內容，ga_prefix同樣在返回的數據大多為null，意義指代不明，images是一個圖片的集合，指內容的圖片集，type指文章的內容類別，id指當前文章信息在數據庫的id表3-4ZhihuDay類屬性屬性名數據類型是否為空描述image_hueStringNotnull高清圖片IDtitleStringNotnull主題標題urlStringNotnull主題詳情UrlhintStringNotnull閱讀提示ga_prefixStringNotnull未知imagesStringNotnull主題圖片typeIntNotnull主題類型idIntNotnull主題Id知乎日報詳情API請求返回如下(攫取部分)，映射至3-5ZhihuDayDetail類屬性：ZhihuDayDetail類是裝載知乎日報文章詳情的數據類，body表示其知乎日報文章的格式內容，這里的文本是Html格式，image_hue同上表示高清圖片，image_source表明圖片的來源，title為標題，image這里是標題頭的主要的展示圖片，share_url指分享給別人訪問此文章的url，js表示關聯到的網頁所用到的js的腳本表3-5ZhihuDayDetail類屬性屬性名數據類型是否為空描述bodyStringNotnull主題html內容image_hueStringNotnull高清圖片idimage_sourceStringNotnull圖片來源titleStringNotnull主題標題imageStringNotnull主題圖片share_urlStringNotnull鏈接分享jsStringNotnulljs腳本ga_prefixStringNotnull未知imagesString[]Notnull圖片集合typeStringNotnull主題類型idintNotnull主題idcssString[]Notnullcss樣式鏈接果殼科技API請求返回如下(攫取部分)，映射至3-6GuokeResult類屬性：GuokeResult是作為請求果殼科技熱門信息API返回數據的容器，now表示請求接口的時間，ok表示請求的網絡狀態，true表示成功，limit表示請求接口返回數據的文章數據數量的限制，默認返回20條，可以通過接口參數limit進行調整，result這里就是返回的文章的內容信息的集合了表3-6GuokeResult類屬性屬性名數據類型是否為空描述nowStringNotnull當前時間okBoolNotnull請求狀態limitIntNotnull請求數量resultList<GuokeDay>Notnull返回文章集合GuokeDay類是果殼文章詳情的數據載體，image是文章的主題圖片，is_replayable表示文章是否已被用戶，本app爬取果殼文章數據，不涉及其用戶信息的處理，故這里用不到，preface是文章的前言描述，id_editor_recommmend表示當前文章是否被編輯推薦，id為當前文章表示，copyright指文章內容產出方，image_description表示圖片的表達內容，small_image指縮略圖，summary指文章內容表達的總結，一般返回null，通常用不到，date_create指文章創建日期，resource指當前文章的網絡訪問鏈接，subject指文章所有的標簽表3-7GuokeDay類屬性屬性名數據類型是否為空描述imageStringNotnull圖片is_replyableBoolNotnull是否已閱讀prefaceStringNotnull前言is_editor_recommendBoolNotnull是否被推薦idIntNotnull文章idcopyrightStringNotnull版權方image_descriptionStringNotnull圖片描述titleStringNotnull文章標題small_imageStringNotnull文章圖片summaryStringNotnull總結date_createdStringNotnull創建日期resource_urlStringNotnull資源urlsubject_keyStringNotnull關鍵詞ReadhubAPI請求返回如下(攫取部分)，映射至3-8ReadhubDay類屬性：Readhub資訊API請求返會的數據相當簡單粗暴，沒有任何多余的內容直接就是返回前20條數據內容，以ReadhubDay類的集合作為載體，Readhubday類作為每一條資訊的內容的載體，id表示資訊標識，newArray表示同類新聞的集合，createAt表示創建日期，publishDate表示發布日期，summary表示咨詢的簡單總結，readhub上的資訊的內容文字不多，多做總結表示，tilte指代資訊標題，updateAt指代資訊更新日期，timeline時間軸App端這邊用不到，order指代序號表3-8ReadhubDay類屬性列名數據類型是否為空描述idStringNotnull資訊idnewsArrayList<NewsArray>Notnull相關新聞createdAtStringNotnull創建日期publishDateStringNotnull發布日期summaryStringNotnull資訊總結titleStringNotnull資訊標題updatedAtStringNotnull更新日期timelineStringNotnull時間軸orderStringNotnull序號NewArray是表示與當前ReadhubDay類所表示的內容資訊的互有同樣表達的內容資訊的新聞Url的結合，id指代當前資訊標識，url表示pc端瀏覽器所訪問的鏈接，moblieUrl表示移動端瀏覽器可以訪問的url鏈接，language表命當前資訊語言，一般返回zh-cn表3-9NewsArray類屬性列名數據類型是否為空描述idIntNotnull資訊idurlStringNotnullWeb端urlmobileUrlStringNotnull移動端urlpublishDateStringNotnull發布日期languageStringNotnull資訊語言titleStringNotnull資訊標題必應賞圖API請求返回如下(攫取部分)，映射至3-10ResultBingPhotoData類屬性：ResultBingPhotoData裝在請求bing圖片的返回的數據類，必應圖片API最多返回七張圖片集，images是返回的圖片集的內容，tooltips是說明表3-10ResultBingPhotoData類屬性列名數據類型是否為空描述imagesList<Image>Notnull圖片集tooltipsStringNotnull提示Image類是必應里一張圖片的數據載體，startdate表明其發布時間，由于必應的圖片都是有時效期的，所以對應的也有enddate表明結束日期，url表明其圖片的高分辨版本的鏈接，通常為1080p左右，urlbase表明其圖片請求鏈接，因為必應圖片的每一張的圖片的分辨率都覆蓋很廣，所以可以通過此鏈接加載各種分辨率樣式，copyright表明其版權方，copyright訪問版權方的鏈接，title圖片的標題描述，hsh表明圖片的哈希值，quiz返回為null，意義不明表3-11Image類屬性列名數據類型是否為空描述startdateList<Image>Notnull發布日期fullstartdateStringNotnull完整發布日期enddateStringNotnull結束日期urlStringNotnull圖片高分辨率鏈接urlbaseStringNotnull圖片資源位置基礎鏈接copyrightStringNotnull版權方copyrightlinkStringNotnull版權方鏈接titleStringNotnull圖片標題hshString哈希值quizString查詢一言API請求返回如下(攫取部分)，映射至3-12OneSay類屬性：一言API請求的返回的數據較為簡單，沒有上面的資訊請求的內容如此之多，OneSay作為其返回數據轉換的載體，id指代當前一言的表示，hitokoto表示一言的額外描述，多數情況返回為空，type指當前一言所涉及的類型，來源哪里，類似的有動漫，還是游戲，又或者是書籍等等，from表明其來源，from_who表明其來源作者，creator表示當前一言的創建者，uuid表明當前一言的通用唯一識別碼表3-12OneSay類屬性列名數據類型是否為空描述idintNotnull一言idhitokotoStringNotnull一言描述typeintNotnull類型fromvarcharNotnull來源from_whoStringnull來源作者creatorStringNotnull創作者uuidStringNotnull唯一標識3.5網絡接口設計網絡編程的核心是IP、端口和協議3個元素，本質是進程間通信，主要的難點是定位主機和數據傳輸。在網絡框架中，有Flutter官方提供的，但HttpClient[10]本身功能較弱，很多常用功能都不支持。所以網絡請求使用的是時下流行的dio庫來發起網絡請求，它是一個強大易用的darthttp請求庫，支持RestfulAPI、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載等等。3.6本章小結本章首先對App功能進行了詳細設計，然后畫出了App開發所涉及的類圖、順序圖、和部分的活動圖，更加直觀地展示了App的各個功能功能；接下來是對Dao類的設計，以及網絡接口進行設計。

第4章App實現4.1界面實現用戶進入媒體資訊App后，即可看到今日要聞模塊如圖4.1所示，以圓角形卡片列表展示，其新聞詳情就如圖4.2所示圖4.1首頁-今日要聞模塊圖4.2首頁-今日要聞詳情點擊底部導航欄中間的Tab，即可進入精選聚合模塊，各模塊皆遵循MaterialDesign進行設計，質感，陰影，皆根據閱覽舒適度設計，共三個子功能模塊，根據頂部按鈕切換。知乎日報模塊界面就如圖4.3所示，果殼趣事模塊界面就如圖4.4所示，其知乎日報文章如圖4.5所示，果殼趣事文章如圖4.6所示，Readhub模塊界面就如4.7所示，Readhub資訊詳情就如圖4.8所示， 圖4.3精選聚合模塊-知乎日報 圖4.4精選聚合模塊-果殼趣事圖4.5精選聚合模塊-知乎日報詳情圖4.6精選聚合模塊-果殼文章詳情圖4.7精選聚合模塊-ReadHub圖4.8精選聚合模塊-ReadHub資訊詳情3.用戶點擊底部導航欄的第三個tab即可進入一塊模塊，其目前只包括兩個子功能，分別是必應賞圖和一言，根據頂部tab進行切換。如圖4.9所示，以撲克牌的形式加載圖片，用戶通過手勢進行圖片操作，而一言界面就如圖4.10所以，背景圖是根據貝塞爾曲線繪制破浪浮動，一言文字就如故事般橫幅展示，每次切換，其一言也會不斷變化圖4.9必應賞圖圖4.10一言4.2本章小結本章主要是對App的UI設計進行實現，給出各個功能APP界面的截圖以展現App實現的效果。

第5章系統測試5.1系統測試的目的系統測試是每個軟件開發周期中一個必不可少的的環節，軟件的bug可能存在于系統、功能、過程、數據和編碼中，我們需要在這些方面上進行測試以找到軟件的Bug并修復。在系統設計和實現過程中檢查出來的錯誤和缺陷需要在軟件運行當中通過系統測試來實現，所以這個階段是軟件開發中必不可少的部分。5.2系統測試的意義在軟件泛濫的信息時代，軟件的質量參差不齊，因此，為了杜絕低質量的軟件的蔓延，系統測試是一個不可或缺的階段。經過一系列的嚴格測試，可以找出系統中難以發現的漏洞，有利于提高一個軟件質量，使用戶的體驗更加完善。5.3測試用例及結果表5-1媒體資訊App接口測試及結果用例編號用例名稱測試目的測試結果U-1TestHotNews測試今日要聞API是否可用，能否正確初始化今日要聞界面，新聞Widget是否正確處理數據成功接受到新聞資訊JSON，界面初始化成功，新聞數據成功加載顯示，頁面動畫異步構建正常U-2TestHotNewsRefresh測試在下拉刷新的時候，網絡請求是否正確發送，數據能否接受并處理，過度的動畫是否異常下拉刷新控件正常調用，動畫過渡流暢顯示，數據重新加載顯示成功，新聞刷新成功U-3TestZhihuDay測試知乎日報API是否可用，能否正確初始化知乎日報界面，文章Widget是否正確處理數據成功接受到知乎日報主題文章JSON，界面初始化成功，知乎日報成功加載顯示，頁面動畫過渡流暢U-4TestGuokeDay測試果殼API是否可用，能否正確初始化果殼趣事界面，文章Widget是否正確處理數據成功接受到果殼科技主題文章JSON，界面初始化成功，果殼文章列表成功加載顯示，頁面動畫過渡流暢U-5TestReadhub測試ReadHubAPI是否可用，能否正確初始化Readhub資訊界面，Readhub資訊Widget是否正確處理數據成功接受到Read科技資訊JSON，界面初始化成功，Readhub列表加載成功U-6TestBingPhoto測試必應賞圖API是否可用，圖片加載頁能否成功顯示高清圖片，加載高清圖片是否會導致OOM成功接收到必應圖片JSON，圖片加載略顯緩慢，但在意料之中，AP