![](/img/trans.png)
[英]Why CTRL + click on some flutter widgets in android studio doesn't show the source dart code?
[英]Flutter App doesn't show content unless some button is clicked
所以,除非按下某個按鈕,否則我的 flutter App 不會顯示通過 API 獲取的內容,然后它只顯示,我不知道這里的問題是什么,但很煩人,我不知道是什么原因造成的因此,下面是我的整個代碼,如果這是一些愚蠢的錯誤,我是新手,所以很抱歉。 謝謝你。
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:FotoApp/image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
final Color myColor = Color(0xff222f3e);
final Color myColor2 = Color(0xff2f3640);
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await FlutterDownloader.initialize(debug: true);
runApp(
MyApp(),
);
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static String query = "wallpapers";
List<dynamic> wallpapersList;
Icon searchIcon = Icon(Icons.search);
Widget searchBar = Text("FotoApp");
@override
void initState() {
super.initState();
initialize();
}
void initialize() async {
var apiUrl =
"https://api.pexels.com/v1/search?query=" + query + "&per_page=500";
http.Response response = await http.get(
apiUrl,
headers: {
HttpHeaders.authorizationHeader:
"563492ad6f91700001000001999da5bd71d04ece9af9ba1a03e8beaf"
},
);
print(apiUrl);
if (response.statusCode == 200) {
try {
final responseJson = jsonDecode(response.body);
wallpapersList = responseJson['photos'];
} catch (e) {
print(e);
}
} else
print(response.reasonPhrase);
}
@override
Widget build(BuildContext context) {
var tabindex = 0;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: searchBar,
backgroundColor: myColor,
actions: [
IconButton(
icon: searchIcon,
onPressed: () {
setState(() {
if (this.searchIcon.icon == Icons.search) {
this.searchIcon = Icon(Icons.cancel);
this.searchBar = TextField(
textInputAction: TextInputAction.go,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search",
hintStyle: TextStyle(color: Colors.white)),
onSubmitted: (value) {
query = value;
initialize();
print(query);
},
);
} else {
this.searchIcon = Icon(Icons.search);
this.searchBar = Text("FotoApp");
}
});
},
color: Colors.white,
)
],
),
body: wallpapersList != null
? StaggeredGridView.countBuilder(
padding: const EdgeInsets.all(8.0),
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index) {
String imgPath = wallpapersList[index]["src"]["large"];
return Card(
child: InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImagePath(imgPath))),
child: Hero(
tag: imgPath,
child: FadeInImage(
width: MediaQuery.of(context).size.width,
placeholder: AssetImage("assets/loading.gif"),
image: NetworkImage(imgPath),
fit: BoxFit.cover,
)),
),
);
},
staggeredTileBuilder: (index) =>
StaggeredTile.count(2, index.isEven ? 2 : 3),
itemCount: wallpapersList.length,
)
: Center(
child: CircularProgressIndicator(
backgroundColor: Colors.white,
),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.black,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.grey,
currentIndex: tabindex,
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.image), title: Text("Wallpapers")),
BottomNavigationBarItem(
icon: Icon(Icons.view_list), title: Text("Categories")),
BottomNavigationBarItem(
icon: Icon(Icons.info), title: Text("About"))
],
),
backgroundColor: myColor2,
),
);
}
}
替換這個:
try {
final responseJson = jsonDecode(response.body);
wallpapersList = responseJson['photos'];
} catch (e) {
print(e);
}
有了這個:
try {
final responseJson = jsonDecode(response.body);
setState(() {
wallpapersList = responseJson['photos'];
});
} catch (e) {
print(e);
}
這是因為您的 UI 具有狀態,並且在檢索數據時必須更改狀態。 該應用程序不知道它必須重建自己。 當按下按鈕時,正在重建。
一個更好的方法是使用 FutureBuilder 並傳遞未來,即接收到 FutureBuilder 的數據,以呈現它。
當數據尚未准備好時顯示循環進度指示器,並在數據准備好時顯示數據。 為此,請查看 FutureBuilder 的 isBusy 屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.