目錄
效果演示
問題及關鍵點
1.使用的三方庫
這里增加了三個三方庫，如下：
dependencies:
dio: ^4.0.4 #網(wǎng)絡請求
webview_flutter: ^2.0.9 #WebView
path_provider: ^2.0.2 #獲取手機存儲路徑
2.異步UI更新
也就是請求完網(wǎng)絡或加載完數(shù)據(jù)再進行相關UI的加載，這里使用的是FutureBuilder，另外數(shù)據(jù)是加載的本地json文件里的數(shù)據(jù)，具體代碼如下：
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Dio dio = Dio();
Future<File> _getLocalFile() async {
// 獲取應用目錄
String dir = (await getExternalStorageDirectories(type: StorageDirectory.downloads))!.first.path;
return File('$dir/data.json');
}
Future<String> _readCounter() async {
try {
File file = await _getLocalFile();
// 讀取點擊次數(shù)（以字符串）
String contents = await file.readAsString();
return contents;
} on FileSystemException {
return "";
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FutureBuilder(
future: _readCounter(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.connectionState == ConnectionState.done){
if(snapshot.hasError){
return const Text("請求失敗");
}else{
var resJson = snapshot.data.toString();
var newsEntry = NewsModleEntity.fromJson(json.decode(resJson));
return ListView.builder(
itemCount: newsEntry.result.data.length,
itemBuilder: (BuildContext context, int index){
return NewsItem(newsData: newsEntry.result.data[index]);
}
);
}
}else{
return const Text("請求中");
}
},
)
)
);
}
}
這里json數(shù)據(jù)如下：
{
"reason":"success!",
"result":{
"stat":"1",
"data":[
{
"uniquekey":"da51d8497b392c95c90ad5fd4a163db3",
"title":"一圖掌握！貴州務川本輪疫情病例活動軌跡圖",
"date":"2022-03-17 09:36:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317093600272729495.html](https://mini.eastday.com/mobile/220317093600272729495.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093600_619e0860f6d58a2fd29d100fec323f86_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ef4c6e7e1a33cb4e63d45755c99ca990",
"title":"質量人速來：六西格瑪綠帶課程特惠中，手慢無！",
"date":"2022-03-17 09:35:00",
"category":"頭條",
"author_name":"天行健西格瑪",
"url":"[https://mini.eastday.com/mobile/220317093510596993546.html](https://mini.eastday.com/mobile/220317093510596993546.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/minimodify/20220317/1393x681_6232904e2feca_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/minimodify/20220317/1393x681_6232904e2feca_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"2ac171b7b1228421efd246f5e2504a16",
"title":"愿平安！甘肅張掖市肅南縣發(fā)生5.1級地震",
"date":"2022-03-17 09:34:00",
"category":"頭條",
"author_name":"中國地震臺網(wǎng)",
"url":"[https://mini.eastday.com/mobile/220317093423702166059.html](https://mini.eastday.com/mobile/220317093423702166059.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093423_d11d401bb45b90b0274095bb53abbf19_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093423_d11d401bb45b90b0274095bb53abbf19_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"b21b3c7b002a2355d0c4502d81f0b713",
"title":"甘肅張掖市肅南縣發(fā)生5.1級地震，震源深度9千米",
"date":"2022-03-17 09:34:00",
"category":"頭條",
"author_name":"“中國地震臺網(wǎng)”微信公眾號",
"url":"[https://mini.eastday.com/mobile/220317093420136467764.html](https://mini.eastday.com/mobile/220317093420136467764.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093420_b88a292e8e9569c900e489629fa4056e_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"2c05a7d647dad3d26389a0df5d93eb90",
"title":"云南大理五小時內兩地連發(fā)山火，森林消防調派七百余人救援",
"date":"2022-03-17 09:34:00",
"category":"頭條",
"author_name":"澎湃新聞",
"url":"[https://mini.eastday.com/mobile/220317093402075412577.html](https://mini.eastday.com/mobile/220317093402075412577.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093402_4bab0a07f307bdb1cb35f8e1387b6437_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ae3f2d6e214d1b197c942cb85fd0e97e",
"title":"杭州抗疫交警和家人通話 深夜的牽掛是街頭最感人的一幕",
"date":"2022-03-17 09:31:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317093137168727569.html](https://mini.eastday.com/mobile/220317093137168727569.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093137_b9fb7e87ff3eac91e79dfbf87943b653_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e4d966f6106a8097603bb2bfe698047f",
"title":"根據(jù)疫情防控有關要求 北京北站、清河站部分始發(fā)終到列車停運",
"date":"2022-03-17 09:31:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317093135873135682.html](https://mini.eastday.com/mobile/220317093135873135682.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317093135_f398a032d8fb63d3d8990368554374d5_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"55a455a1dade6cdb2f44d63d6cbd571d",
"title":"卓資縣人民檢察院開展涉企民事執(zhí)行案件專項監(jiān)督活動",
"date":"2022-03-17 09:31:00",
"category":"頭條",
"author_name":"映天水墨",
"url":"[https://mini.eastday.com/mobile/220317093124048310777.html](https://mini.eastday.com/mobile/220317093124048310777.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/minimodify/20220317/800x533_62328f6ba0a6d_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/minimodify/20220317/800x533_62328f6ba0a6d_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"5fd763472f9ff10823999c1ae0ea7a3d",
"title":"“桂核酸”小程序來了！柳州各大社區(qū)開始推廣，登記后可輕松查看核酸檢測碼",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092657969630573.html](https://mini.eastday.com/mobile/220317092657969630573.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092657_d3d98714624b8f296677c72e0aeb4edc_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092657_d3d98714624b8f296677c72e0aeb4edc_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"48ca18bf6305b2d605e2e7933773d82a",
"title":"豐澤：用“拼”的精神站成最堅實的生命之墻",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092653496734702.html](https://mini.eastday.com/mobile/220317092653496734702.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092653_5272f966d7700795c7f46d5d4900c84f_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"bf706c89f8d27489fa75a796dcfad4b7",
"title":"這些熟悉的身影，詮釋“守護”的意涵",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092644506717385.html](https://mini.eastday.com/mobile/220317092644506717385.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092644_f87c0492fcba29e22f198e78a4207fca_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"f37c804468f31bae19112291d613c975",
"title":"3分鐘可出預約碼！金山這里的“喵喵機”方便了老年人",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092640956301315.html](https://mini.eastday.com/mobile/220317092640956301315.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092640_b32d2f0046197801651ca66c479ef74b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"bff7ed5f7353769f88302aaf1f2f7478",
"title":"延長門診服務時間、設立涉疫孕產(chǎn)婦診療區(qū)...為金山這家醫(yī)院點贊",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092635548346972.html](https://mini.eastday.com/mobile/220317092635548346972.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_941a9d5dcef9949b2ff896f3c125cd53_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"7cb74ecf1b7529797dfeff2424da55c8",
"title":"“婚禮推遲了，我反而松了口氣...”",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092635261590070.html](https://mini.eastday.com/mobile/220317092635261590070.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092635_a227e7af79e39385cf9af33a180b17be_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"7ff7214ba83c2b798debf458553e854b",
"title":"“猴房靠你們了！”“放心！”疫情里，當實驗室小動物們遇上超有愛的科研人員…… | 魔都溫暖",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092634070928300.html](https://mini.eastday.com/mobile/220317092634070928300.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092634_fe202f087e3e0fc2660a21854da83d3b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"962c4aa1c118c1a522adf9d76727e6c8",
"title":"@楊浦人，手機預約核酸檢測，最全攻略來了",
"date":"2022-03-17 09:26:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092631608115188.html](https://mini.eastday.com/mobile/220317092631608115188.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092631_df4a4e6fae2d94edbde7d7810ab23496_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"fbae0a0f6ef3b8a4681bd01e713b2b3e",
"title":"【疫情當前 警察不退】江蘇泰州：戰(zhàn)疫，有我在！",
"date":"2022-03-17 09:22:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092213286670471.html](https://mini.eastday.com/mobile/220317092213286670471.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092213_b8a69a25268918f8d4173cae46d111dc_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"d993231c75510a19d818a500c2f6d8f6",
"title":"樣樣工作不含糊，他成了工友眼中的駐廠“三好”黨員",
"date":"2022-03-17 09:22:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092202777142355.html](https://mini.eastday.com/mobile/220317092202777142355.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092202_5399a8d047566a2a77952ec0d502fb1d_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e4554742ec848fc6bd1eace9a36ba39c",
"title":"“快遞小哥”化身暖心“大白”",
"date":"2022-03-17 09:22:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092200658456886.html](https://mini.eastday.com/mobile/220317092200658456886.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092200_9f10bfb6740956971bfa7a9334aded15_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"b358ec9c66ea33fae81a63fc29e6ff08",
"title":"獨家述評｜同心抗疫，沒有“孤島”",
"date":"2022-03-17 09:21:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317092153273419656.html](https://mini.eastday.com/mobile/220317092153273419656.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317092153_0a846eddcebeb5a7d3007168fef98023_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317092153_0a846eddcebeb5a7d3007168fef98023_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"0edc2246f28d4a98149fc268ced3c550",
"title":"買盲盒上癮？桂林一學生狂買上百個",
"date":"2022-03-17 09:17:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317091721292271209.html](https://mini.eastday.com/mobile/220317091721292271209.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317091721_a7b7762c94cc2be1164254819f7606d6_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ea445c50a69f9f5996087a0efbc14f6d",
"title":"每斤不到6元，真香",
"date":"2022-03-17 08:08:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317080811837178254.html](https://mini.eastday.com/mobile/220317080811837178254.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080811_55aa3819bacc4159a450561c4a4f152c_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080811_55aa3819bacc4159a450561c4a4f152c_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"11e7fc0487785c6e1e6b8f98202715ee",
"title":"一線故事丨雙警夫妻同心抗疫",
"date":"2022-03-17 08:08:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317080809915470908.html](https://mini.eastday.com/mobile/220317080809915470908.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080809_9aa704e27d0af542c6e934a201bcc9a6_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"c403c969f2fa177aeb107247113af90e",
"title":"杭州疾控發(fā)布重要信息",
"date":"2022-03-17 08:04:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317080404579320067.html](https://mini.eastday.com/mobile/220317080404579320067.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080404_d3a8cb12525bad986944cc65d851a8fd_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ecd98cd9f4952dd4b4dbdb21606f90bb",
"title":"不知道我身份證號，廚師就不能炒菜了？",
"date":"2022-03-17 08:03:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317080359897511638.html](https://mini.eastday.com/mobile/220317080359897511638.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317080359_6929b0bec166a8f71893a88298c1bb3b_2_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"95024533c89df476181e88cb4a541788",
"title":"山西省消協(xié)發(fā)布消費警示：注意！這些騙局要看清 謹防上當受騙",
"date":"2022-03-17 07:59:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317075922099653954.html](https://mini.eastday.com/mobile/220317075922099653954.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317075922_245a833127f1ebe798ff4cebab4fd150_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317075922_245a833127f1ebe798ff4cebab4fd150_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"c6f28e193b286e6eb496ff74b07cfa49",
"title":"聽障阿姨張惠霞，督導垃圾分類“無聲勝有聲”",
"date":"2022-03-17 07:49:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317074952079564799.html](https://mini.eastday.com/mobile/220317074952079564799.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317074952_1833d60d9675ab62216f2f368b4418d8_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"034948da7f63fecc8a3431cb88efd663",
"title":"“土坑酸菜”被曝光 杭州酸菜魚“躺槍”了嗎？",
"date":"2022-03-17 06:32:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317063214661344761.html](https://mini.eastday.com/mobile/220317063214661344761.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_1_mwpm_03201609.jpeg)",
"thumbnail_pic_s02":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_2_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_2_mwpm_03201609.jpeg)",
"thumbnail_pic_s03":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_3_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317063214_bf05fc488bd2ad8eeda2d772facff36b_3_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"e352448a6f84a0168134b0052e3794a7",
"title":"楊曉英：盡心盡力盡責為患者服務",
"date":"2022-03-17 05:05:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317050546675896182.html](https://mini.eastday.com/mobile/220317050546675896182.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317050546_ae6d7c735419b40b142cf81759d1b841_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317050546_ae6d7c735419b40b142cf81759d1b841_1_mwpm_03201609.jpeg)",
"is_content":"1"
},
{
"uniquekey":"ad912fc05da13a91da79200c4c099cc5",
"title":"村干部跨界成為“快遞小哥” 每天上下樓上百次",
"date":"2022-03-17 04:51:00",
"category":"頭條",
"author_name":"人民資訊",
"url":"[https://mini.eastday.com/mobile/220317045153940595640.html](https://mini.eastday.com/mobile/220317045153940595640.html)",
"thumbnail_pic_s":"[https://dfzximg02.dftoutiao.com/news/20220317/20220317045153_47ade9aa0895d8ba1592ae9b92af5521_1_mwpm_03201609.jpeg](https://dfzximg02.dftoutiao.com/news/20220317/20220317045153_47ade9aa0895d8ba1592ae9b92af5521_1_mwpm_03201609.jpeg)",
"is_content":"1"
}
],
"page":"1",
"pageSize":"30"
},
"error_code":0
}
我把它放在了手機的如下目錄：
3.列表條目的構建
這里的列表條目構建基本沒什么說的主要有兩個問題在這說下，一開始出現(xiàn)了如下問題（文字顯示在一行太長的直接報錯）
這里我是通過在外部包了一個Expanded解決的
還有最初日期顯示的Text控件也無法貼在最底下，后來包裹Expanded也無法解決，而且導致直接顯示不出來了，最后才發(fā)現(xiàn)需要指定下最外層容器的寬高才行，如下：
4.頁面跳轉
這里點擊后會跳轉一個網(wǎng)頁，網(wǎng)頁是通過WebView展示的，這里主要是修改了跳轉的動畫，其中WebView頁面的代碼如下：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatelessWidget {
final String url;
final String title;
const WebViewPage({Key? key,required this.url,required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
child: WebView(initialUrl: url,),
),
);
}
}
而跳轉動畫可以看下我的這篇文章：Flutter調整打開新頁面的動畫
