【发布时间】：2020-09-09 18:29:40
【问题描述】：
我正在构建一个名为 LiveTv 的应用程序，它是一个根据不同兴趣推荐视频的应用程序。我编写的代码导致严重滞后，并且随着我在这个应用程序中越来越多地进行操作，它变得几乎无法操作。我已在此链接中包含相同的视频https://youtu.be/YQp3E3Lukfk
我所做的是使调用异步，并且我使用了一个三元运算符，其中显示了在其下加载的循环进度指示器。但它似乎不仅仅工作
我已经包括了由底部导航栏控制的代码。它的服务部分不包括在内，因为它的功能只是加载数据或对象，但我会包括一两个这样你可能明白，我不想让这个问题很长
class LiveTvHomePage extends StatefulWidget {
final String title;
LiveTvHomePage({
this.title,
});
@override
_LiveTvHomePageState createState() => _LiveTvHomePageState();
}
class _LiveTvHomePageState extends State<LiveTvHomePage> {
//GlobalKey<ScaffoldState> _drawerKey = GlobalKey<ScaffoldState>();
@override
void initState() {
// TODO: implement initState
super.initState();
handleScroll(); // function which is responsible for updating the isScrollingDown variable whenever the user scrolls down
_services();
setState(() {
_isLoading = false;
});
}
_loadingImage() {
return CircularProgressIndicator();
}
_services() {
Services.loadDataForMovieId().then((movieIdList) {
setState(() {
_homeBannerObjectMovieIdList = movieIdList;
});
});
Services.loadDataForMovieIdofPopularMovieSection().then((movieIdList) {
setState(() {
_popularMoviesMovieId = movieIdList;
});
});
Services.loadDataForPopularTvShowSection().then((homePageSeriesPosterList) {
setState(() {
_seriesData = homePageSeriesPosterList;
});
});
Services.loadDataForMusicSection().then((musicList) {
setState(() {
_musicCategories = musicList;
});
});
Services.loadDataForPlaylistTitle().then((title) {
setState(() {
_musicPlaylistThemeName = title;
});
});
Services.loadDataForPopularNewsChannelsNames().then((nameList) {
setState(() {
_popularNewsChannelNames = nameList;
});
});
Services.loadDataForPopularNewsChannelsProfilePicUrls().then((urllist) {
setState(() {
_popularNewsChannelProfilePicUrl = urllist;
});
});
Services.loadDataForLiveNewsChannelsProfilePicUrls().then((urllist) {
setState(() {
_liveNewsChannelProfilePicUrl = urllist;
});
});
Services.loadDataForLiveNewsChannelsNames().then((nameList) {
setState(() {
_liveNewsChannelNames = nameList;
});
});
Services.loadDataForPicOfLatestNews().then((nameList) {
setState(() {
_latestNewsProfilePics = nameList;
});
});
Services.loadDataForOfLatestNewsTitle().then((nameList) {
setState(() {
_latestNewsNewsTitle = nameList;
});
});
Services.loadDataForOfLatestNewsDescription().then((nameList) {
setState(() {
_latestNewsDescription = nameList;
});
});
}
_buildBody(var boxHeight, List<String> youtubeIdUrls) {
return Column(
children: <Widget>[
Stack(
children: <Widget>[
_buildPageView(boxHeight, youtubeIdUrls),
_buildCircleIndicator(youtubeIdUrls),
],
),
],
);
}
_buildPageView(var boxHeight, List<String> youtubeIdUrls) {
return Container(
color: Colors.black87,
height: boxHeight,
child: PageView.builder(
itemCount: 8,
controller: _pageController,
itemBuilder: (BuildContext context, int index) {
try {
// HomeBanner homeBanner=_homeBannelList[index];
return FadeInImage.assetNetwork(
image:
'https://img.youtube.com/vi/${youtubeIdUrls[index].substring(8)}/0.jpg',
placeholder: 'assets/loading.gif',
fit: BoxFit.fill,
);
} catch (e) {
return CircularProgressIndicator();
}
//before return Image.network('https://img.youtube.com/vi/${videoIdOfUrlList[index]}/0.jpg',fit: BoxFit.fill,);
},
onPageChanged: (int index) {
_currentPageNotifier.value = index;
}),
);
}
_buildCircleIndicator(List<String> youtubeIdUrls) {
return Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CirclePageIndicator(
itemCount: 8,
currentPageNotifier: _currentPageNotifier,
),
),
);
}
Widget imageDisplayed(String picUrl) {
return Row(
children: <Widget>[
const SizedBox(
width: 10,
),
CircleAvatar(
backgroundImage: NetworkImage(picUrl),
radius: MediaQuery.of(context).size.height * 0.08,
backgroundColor: Colors.black,
),
const SizedBox(
width: 10,
),
],
);
}
Widget HorizontalListViewWitCircularCards(
String title, List<String> urlList, List<String> nameList) {
return Container(
color: Colors.black,
height: MediaQuery.of(context).size.height * 0.32,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.07,
color: Colors.black,
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Text(
title,
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.23,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: _popularNewsChannelNames.length,
itemBuilder: (BuildContext context, int index) => Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.symmetric(),
child: Column(
children: <Widget>[
imageDisplayed(urlList[index]),
const SizedBox(
height: 13,
),
Text(
nameList[index],
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
),
],
),
);
}
Widget HorizontalGridViewOfCardsofGradientColor(int count, List<String> lst) {
return Container(
color: Colors.black,
height: MediaQuery.of(context).size.height * 0.125 * count,
child: GridView.count(
scrollDirection: Axis.horizontal,
crossAxisCount: count,
shrinkWrap: true,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: List.generate(20, (index) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
gradient: LinearGradient(colors: colorsForCardinMusicPage[index]),
),
child: Center(
child: Text(
lst[index],
),
),
);
}),
),
);
}
Widget HorizontalGridViewOfCardsofGradientColorWithtitle(
int count, String title) {
return Column(
);
}
Widget HorizontalListViewOfButtons(List moviesPageButtonNames) {
return Container(
color: Colors.black,
height: MediaQuery.of(context).size.height * 0.13,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: moviesPageButtonNames.length,
itemBuilder: (BuildContext context, int index) => Row(
children: <Widget>[
SizedBox(
width: 7,
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.grey)),
color: Colors.grey[800],
textColor: Colors.white,
onPressed: () {},
child: Text(moviesPageButtonNames[index]),
),
SizedBox(
width: 10,
)
],
),
),
);
}
Widget NewsPageOfBottomNavigator() {
ServicesForNewsPage.loadObjectList().then((newsPageObject) {
_newsPage = newsPageObject;
});
for (var obj in _newsPage.liveChannels) {
_newsPageLiveNewsUrls.add(obj.publisherProfilePic);
_newsPageChannelName.add(obj.publisherName);
}
// print("_newsPageLiveNewsUrls");
// print(_newsPageLiveNewsUrls);
// print("_newsPageLiveNewsNames");
// print(_newsPageChannelName);`
for (var obj in _newsPage.news) {
_newsPagePopularNewsChannelUrls.add(obj.publishers.profilePicUrl);
_newsPagePopularNewsChannelNames.add(obj.publishers.fullName);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
HorizontalListViewWithoutViewAllForLiveNewsChannels(
"Watch Live", _newsPageLiveNewsUrls, _newsPageChannelName),
HorizontalListViewWitCircularCards("Popular News Channel",
_newsPagePopularNewsChannelUrls, _newsPagePopularNewsChannelNames),
VerticalListView(_newsPagePopularNewsChannelNames, true),
],
);
}
Widget LifeStylePageOfBottomNavigator() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
HorizontalListViewWitCircularCards(
"Popular Lifestyle channels", [""], [""]),
VerticalListView(["ssss"], false),
],
);
}
Widget SportsPageOfBottomNavigator() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
HorizontalListViewWitCircularCards(
"Popular Sports channels", [""], [""]),
VerticalListView(["ssss"], false),
],
);
}
Widget returnToTopButton() {
return Visibility(
visible: _showButton,
child: FlatButton(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 7, 0, 0),
child: Text(
"^",
style: TextStyle(color: Colors.white, fontSize: 27),
),
),
Text(
" Return to top",
style: TextStyle(color: Colors.white),
),
],
),
onPressed: () {
_scrollController.animateTo(0,
duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
color: Colors.red,
),
);
}
void showFloationButton() {
setState(() {
_showButton = true;
});
}
void hideFloationButton() {
setState(() {
_showButton = false;
});
}
void handleScroll() async {
// or something else..
_scrollController.addListener(() {
double currentScroll = _scrollController.position.pixels;
double delta = MediaQuery.of(context).size.height;
// print("Current scroll position is ..........$currentScroll");
// print("delta pixel is ..........$delta");
if (currentScroll >= delta) {
showFloationButton();
} else if (currentScroll <= delta) {
hideFloationButton();
}
});
}
@override
void dispose() {
// TODO: implement dispose
_scrollController.removeListener(() {});
super.dispose();
}
@override
Widget build(BuildContext context) {
List<Widget> wdgs_option = [
HomePageForBottomNavigator(),
MoviesPageForBottomNavigator(),
TvSHowsPageOfBottomNavigator(),
MusicPageofBottomNavigator(),
// NewsPageOfBottomNavigator(), //dummy for now
NewsPageOfBottomNavigator(),
LifeStylePageOfBottomNavigator(),
SportsPageOfBottomNavigator()
];
return _isLoading
? _loadingImage()
: Scaffold(
// key: _drawerKey,
appBar: AppBar(
automaticallyImplyLeading: false,
leading: Icon(
Icons.live_tv,
color: Colors.amber,
),
backgroundColor: Colors.black,
title: Text(
widget.title,
style: TextStyle(fontSize: 17, color: Colors.amber),
),
actions: <Widget>[
IconButton(
tooltip: 'Search',
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(
MaterialCommunityIcons.xbox_controller_menu,
color: Colors.white,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DrawerWidget()),
);
},
)
],
),
body: SafeArea(
child: SingleChildScrollView(
controller: _scrollController,
child: wdgs_option.elementAt(_selectedIndex),
),
),
drawer: Drawer(),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.black,
showUnselectedLabels: true,
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
fixedColor: Colors.amber,
onTap: _onItemTapped,
items: const <BottomNavigationBarItem>[
// Icon(
// FontAwesome.facebook_square,
// color: Colors.amber,
// ),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(
MaterialCommunityIcons.video_vintage,
),
title: Text(
'Movies',
),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.live_tv),
title: Text(
'Tv shows',
),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.music_video),
title: Text(
'Music',
),
),
// BottomNavigationBarItem(
// backgroundColor: Colors.black,
// icon: Icon(Icons.dehaze),
// title: Text(
// 'More',
// ),
// ),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.radio),
title: Text(
'News',
),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(
FontAwesome.heartbeat,
),
title: Text(
'LifeStyle',
),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(
Ionicons.md_football,
),
title: Text(
'Sports',
),
),
],
),
);
}
}
服务类在大多数情况下看起来像这样：
class ServicesForNewsPage {
static const String url =
"https://livetvapi.apyhi.com/api/v3/home?pageLocation=News&countries=IN&app_version=13&"
"user_id=44edc2c905ae163f&package_id=livetv.movies.freemovies.watchtv.tvshows&os_platform=android";
static Future<NewsPage> loadObjectList() async {
var res = await http
.get(url, headers: {'Authorization': dartJsonWebTokenGenerator()});
if (res.statusCode == 200) {
// print("response is there for news Page");
final newsPageObjectList = newsPageFromJson(res.body);
return newsPageObjectList;
} else {
print("no response");
return null;
}
}
}
我对 Flutter 很陌生，对于如何提高响应时间有些模糊。
【问题讨论】：
标签： json performance flutter dart