前言
推薦頁面是Home頁面的一個子頁面洒放，里面會使用到Loading翎迁，列表符匾，API數(shù)據(jù)請求相關(guān)只是
Home頁面
 微信圖片_20220604124922.jpg
|
 微信圖片_20220604124927.jpg
|
Loading
加載框一般會出現(xiàn)在頁面請求網(wǎng)絡(luò)數(shù)據(jù)祈坠，或者進(jìn)行耗時操作害碾，對用戶的感官體驗清切對頁面也是一種保護(hù)，在頁面沒有完成之前不允許用戶操作赦拘，這里我們使用了一個第三方依賴去展示loading框
需要在你的pubspec.yaml文件中加入loading_indicator_view: ^1.1.0
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
loading_indicator_view: ^1.1.0
然后點擊Pub get進(jìn)行依賴下載就可以正常使用了
class SuggestPageState extends State {
List<SuggestModel> data = List.empty(growable: true);
var isLoading = true;
Widget getContent() {
if (isLoading) {
return Container(alignment: Alignment.center,child: BallPulseIndicator(ballColor: Colors.green));
} else {
return ListView.builder(
itemBuilder: (BuildContext context, int index) {
return SuggestItem(data[index]);
},
itemCount: data.length,
);
}
}
@override
Widget build(BuildContext context) {
return Column(children: [
Expanded(flex:1,child: getContent()),
],);
}
}
如果isLoading是true的情況下慌随，我們展示Loading，否則我們展示列表數(shù)據(jù)躺同，當(dāng)然我們需要去獲取列表數(shù)據(jù)并且在獲取到列表數(shù)據(jù)之后將isLoading設(shè)置為false
列表數(shù)據(jù)
首先我們需要創(chuàng)建一個列表的Item Widget
class SuggestItem extends StatefulWidget {
SuggestModel data;
SuggestItem(this.data);
@override
State<StatefulWidget> createState() {
return SuggestItemState(data);
}
}
class SuggestItemState extends State {
SuggestModel data;
SuggestItemState(this.data);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(
children: [
Container(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
clipBehavior: Clip.hardEdge,
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Image.network(
"https://upload.jianshu.io/users/upload_avatars/25609565/55f1d4c5-f80b-497c-946f-8ab642a2929e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webps"),
),
),
),
Text('Mike', style: TextStyle(fontSize: 11)),
Spacer(),
Padding(
padding: EdgeInsets.all(10),
child: Icon(Icons.arrow_forward_outlined,
size: 15, color: Colors.grey))
],
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Row(
children: [
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Color(0x0f00FF00)),
child: Row(
children: [
Icon(
Icons.offline_pin,
color: Colors.green,
size: 15,
),
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: GestureDetector(
onTap: () => {
//Jump to Topic Page
Navigator.pushNamed(context, '/chooseTopic')
},
child: Text(
'2022觀影記錄',
style: TextStyle(color: Colors.green, fontSize: 12),
),
),
)
],
),
),
Spacer()
],
),
),
Padding(
padding: EdgeInsets.all(10), child: Text('萬物方來阁猜，萬物方去，永遠(yuǎn)的轉(zhuǎn)著存在的輪子')),
Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
child: Container(
height: 120,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
child: Image.network(
"https://img1.doubanio.com/view/photo/l/public/p2624374019.webp",
fit: BoxFit.cover),
),
),
Container(
width: 5,
),
Flexible(
flex: 1,
child: Container(
height: 120,
child: Image.network(
"https://img9.doubanio.com/view/photo/l/public/p2561886965.webp",
fit: BoxFit.cover),
),
),
Container(
width: 5,
),
Flexible(
fit: FlexFit.tight,
flex: 1,
child: Container(
height: 120,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5))),
child: Image.network(
"https://img1.doubanio.com/view/photo/l/public/p2612697967.webp",
fit: BoxFit.cover),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Spacer(),
Icon(
Icons.thumb_up_alt_outlined,
color: Colors.grey,
),
Text(
'553',
style: TextStyle(color: Colors.grey),
),
Spacer(),
Icon(Icons.messenger_outline, color: Colors.grey),
Text('35', style: TextStyle(color: Colors.grey)),
Spacer(),
Icon(Icons.folder_shared_outlined, color: Colors.grey),
Text('36', style: TextStyle(color: Colors.grey)),
Spacer(),
],
),
),
Container(
height: 10,
alignment: Alignment.center,
color: Color(0x10000000),
)
]),
);
}
}
這里雖然有傳遞了SuggestModel但是沒有使用蹋艺，還是使用了靜態(tài)數(shù)據(jù),純粹是因為我懶....想在未來的將來補上
數(shù)據(jù)請求
添加http請求依賴
http: ^0.12.2
在SuggestPage中增加請求數(shù)據(jù)的函數(shù)
由于豆瓣API最近無法使用剃袍，所以直接call了百度達(dá)到一個異步請求的動作，然后請求完成之后構(gòu)建了假數(shù)據(jù)捎谨，并且刷新了狀態(tài)
Future<void> getSuggestInfo() async {
var client = http.Client();
var response = await client.get("https://www.baidu.com");
print(response.body);
List<String> imgs = List.empty(growable: true);
imgs.add("");
imgs.add("");
imgs.add("");
data.add(SuggestModel(photo: "111",tab: "2022觀影記錄",message: "萬物方來,萬物方去,永遠(yuǎn)的轉(zhuǎn)著存在的輪子",imgRes: imgs));
data.add(SuggestModel(photo: "111",tab: "2022觀影記錄",message: "萬物方來,萬物方去,永遠(yuǎn)的轉(zhuǎn)著存在的輪子",imgRes: imgs));
data.add(SuggestModel(photo: "111",tab: "2022觀影記錄",message: "萬物方來,萬物方去,永遠(yuǎn)的轉(zhuǎn)著存在的輪子",imgRes: imgs));
isLoading = false;
setState(() {});
}
@override
void initState() {
super.initState();
getSuggestInfo();
}
在實際用切換的過程中發(fā)現(xiàn)每次切換到推薦頁面時都會進(jìn)行API請求民效，因為我們將API請求寫在了initState函數(shù)中隘击，為了讓頁面的狀體持久化，我們可以添加
class SuggestPageState extends State with AutomaticKeepAliveClientMixin
@override
bool get wantKeepAlive => true;
這樣就可以保持頁面狀態(tài)研铆，在Tab來回切換時不會多次call API
歡迎關(guān)注Mike的簡書
Android 知識整理
